Twentyeleven では「外観」→「テーマ設定」で２カラムを設定しても単一記事は１カラム表示になっています。これを２カラムにします。
まず、twentyeleven フォルダの中にある page.php と single.php を見ます。
single.php を例にします。記述内容は以下の通りです。
<?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?> <div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <nav id="nav-single"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3> <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span> <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span> </nav><!-- #nav-single --> <?php get_template_part( 'content', 'single' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>
これを図解にしますと下図のようになっています。
サイドバーを表示させる部分がありません。そこで、イメージとして下図のような構成にするための記述をします。
まず、twentyeleven フォルダの中にある single.php をコピーして子テーマ用のフォルダに設置します。
子テーマフォルダ内のsingle.php に
<?php get_sidebar(); ?>
の一文を記載します。場所は<?php get_footer(); ?> の直前、つまり下から２行目に<?php get_sidebar(); ?> が記載された状態になります。
<?php
/**
* The Template for displaying all single posts.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<nav id="nav-single">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span>
</nav><!-- #nav-single -->
<?php get_template_part( 'content', 'single' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
これでサイドバーの部分が記事内容部分の下に表示されるようになりました。
id=primary の部分とサイドバー部分を左右に振り分ける設定は子テーマのstyle.css で行います。
<?php get_sidebar(); ?> で呼び込まれるサイドバーは
<div id=”secondary” class=”widget-area” role=”complementary”></div>
で囲まれています。id=”secondary” に対する設定は以下の通り。
既に float で右寄せになっています。
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}
id=”primary” の部分も float で左寄せになっています。
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
ここからちょっとややこしい話。
twentyeleven では、header.php で <body <?php body_class(); ?>> の記載で body 部分が始まります。
これは、functions.php 内で以下の部分を実行するものです。
/**
* Adds 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
*/
function twentyeleven_body_classes( $classes ) {
if ( ! 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' );
これで 自動的に body にクラス設定がされてしまいます。
例えば、テーマ設定で２カラム表示に設定している状態で、トップページの body クラスを見てみます。
body class="home blog logged-in admin-bar single-author two-column right-sidebar"
Showcase Template で作成した記事の body クラスは、
class="page page-id-69 page-template page-template-showcase-php logged-in admin-bar single-author two-column right-sidebar"
１コラム状態で表示される body クラスは、
class="single single-post postid-62 single-format-standard logged-in admin-bar single-author singular two-column right-sidebar"
この singular が曲者です。body クラス singular の中のprimary と content には以下のような設定がなされています。
.singular #primary {
margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 7.6%;
position: relative;
width: auto;
}
本来、primary と content は以下のような設定です。
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
primary で右マージンにネガティブ設定。content では幅が58.4％になっています。この二つの設定で２コラムになるのですが、body クラスの設定にが生きる事によって float で片側に寄せる設定になっていても、サイドバーが入る間隔が無いので２カラム表示になりません。
twentyeleven の functions.php 内の以下をコメントアウトしてしまえば生成される ページに余計なクラス名 singular も付かなくてすっきりするのですが、子テーマフォルダの中に functions.php を作成しても、
if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) ) $classes[] = 'singular';
それなので、子テーマのstyle.css で調整します。
新たに記載するのは body クラス singular 内にある priimary と content に関するマージンと幅を変更します。
/* single page を ２コラム表示にするための変更
*******************************************************/
.singular #primary {
margin: 0 -26.4% 0 0;
}
.singular #content {
width: 58.4%;
}
以上の css の変更で、単一記事も２コラム表示になります。
page.php での作業も同様です。
twentyeleven から page.php のコピーを子テーマフォルダに設置。
<?php get_sidebar(); ?>
の一文を添付します。場所は<?php get_footer(); ?> の直前、つまり下から２行目に<?php get_sidebar(); ?> が記載された状態になります。
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
これで子テーマのフォルダの中は下図のようになっています。page.php と single.php にはそれぞれ original のものをコピーして、<?php get_sidebar(); ?> の一行を加えてある。
page.php のcss 設定もまた少しこんがらがっているが、取り敢えず下記のように書き加えれば他のページと表示形態は揃う。
表示の違いは下図のような感じ。
/* page.php を ２コラム表示にするための変更
*******************************************************/
.singular.page .hentry {
border-bottom: 1px solid #ddd;← 記事の下部に下線
margin: 0 0 1.625em;
padding: 0 0 1.625em;
position: relative;
}
/* 記事の幅に関する設定です */
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
width: 100%;← 68.9％に設定されているのを100％に変更
}
/* 編集ボタンの位置を指定しています */
.singular .entry-meta .edit-link a {
left: auto;← 50pxからautoに変更
position: relative;← absoluteからrelativeに変更
top: auto;← 80pxからautoに変更
}
#respond {
width: auto;← コメント部分の幅を変更
}
※<?php get_sidebar(); ?> で読み込まれるサイドバーは「外観」→「ウィジェット」の「メインサイドバー」で行います。
