テーマ Twenty Eleven の投稿ページにサイドバーを付ける

テーマ Twenty Eleven の投稿ページにサイドバーを付ける


少し前に「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」を投稿したので、ここは投稿ページにもサイドバーを付けてみようかと思い調査しました。
投稿ページは、固定ページみたいに簡単に付きませんでした。
が、ググってみると簡単にできますというWebサイトを見つけたので参考にしながら試行錯誤して付けてみました。
ちなみに、ググって見つけたWebサイトのやり方では表示されるのですが、下に付く形で表示されてしまい「なんだかぁ~」って感じになってました。

テーマ Twenty Eleven の投稿ページにサイドバーを付ける方法

試行錯誤で試しながら付けたため、どのWebサイトでも正常に表示されるか保証はできません。
でも、テーマ Twenty Eleven を使っているなら、たぶん正常に表示されると思います。

single page の css を変更する

「 Twenty Eleven Child w/ Sidebar Support 」と言う、Twenty Eleven の子テーマを見つけて参考にしました。
下のようにマージンや表示幅を変更します。
私の場合は、既に子テーマを作ってしまっていたため、自分の子テーマの style.css に追加する形をとりました。


/* Singular */
.singular #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 34% 0 2%;
width: 64%;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}

single.php にサイドバー表示を追加する

私の場合は、子テーマに single.php が入って居なかったため、子テーマディレクトリに single.php をコピーしました。
FTPで Twenty Eleven の single.php をローカルにダウンロードして、子テーマにアップロードしました。

その後、サイドバー呼び出す関数 php get_sidebar() を下のように追加しました。
修正前:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

修正後:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

この作業までだと、サイドバーは表示されるのですが、正常な位置・表示して欲しい位置に表示されません。
パソコン表示では、本文の下に表示されるような形になってしまいました。

body要素に「 singler 」クラスを追加するフィルタを削除します


/**
 * Add two classes to the array of body classes.
 *
 * The first is if the site has only had one author with published posts.
 * The second is if a singular post being displayed
 *
 * @since Twenty Eleven 1.0
 *
 * @param array $classes Existing body classes.
 * @return array The filtered array of body classes.
 */
function twentyeleven_body_classes( $classes ) {

	if ( function_exists( 'is_multi_author' ) && ! is_multi_author() )
		$classes[] = 'single-author';

	if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
		$classes[] = 'singular';

	return $classes;
}
add_filter( 'body_class', 'twentyeleven_body_classes' );

Twenty Eleven は、上のようにbody要素に「 singler 」クラスを追加するフィルタを追加しています。
子テーマの functions.php は、親テーマの機能を上書きできません。
親の functions.php に追加する形が一般的です。
と言うか、親テーマのファイルの 直前 に読み込まれるので上書きは無理ですし、エラーになります。

そこで、親テーマがフィルタを追加した後に、削除する方法を取ります。


add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
	remove_filter( 'body_class', 'twentyeleven_body_classes' );
}

これで、singlerクラスが body 要素に追加されるフィルタを削除できます。

まとめ

・single page の css を変更する
・single.php にサイドバー表示(get_sidebar())を追加する
・function.php に singler クラスを追加するフィルタを削除する関数を追加する

3つの作業で、テーマ Twenty Eleven の投稿ページにサイドバーが表示されるようになります。

以上、「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です