Twenty Fifteen のデザイン

ヘッダーとサイドバーが融合し、スクロール固定を採用

ヘッダーと視認できる部分はなく、サイドバーがヘッダーになっています。header.php の中にサイドバーが含まれるつくりです。このサイドバー部分に、コンテンツ以外のものは全て表示させる構造になっています。サイトタイトル、ナビゲーションメニュー、ウィジェットが全てここにきます。
サイドバーは一番下までスクロールすると固定されます。

スペースいっぱいの大きなアイキャッチ

Twenty Fifteen には大きなアイキャッチ（サムネイル）が表示されます。推奨サイズは 幅 825px に高さ 510px です。このサイズの画像をアイキャッチとして用意すれば、Twenty Fifteen のレイアウトにきれいに表示されます。
これまでアイキャッチの画像に 1208px × 540px の画像を使っていたんですが、このサイズの画像だとスペースいっぱいに表示されませんでした。
また、新たに 1208px × 540px のアイキャッチをアップロードしたら、コンテンツのスペースをはみ出して表示されてしまいました。縮小されずにそのままのサイズで表示されているようです。
色々なサイズで試してみましたが、以下のようになりました。

新規にアップロードした画像に関しては、推奨サイズにしておいた方がよさそうです。既にアップロード済みの画像がうまくはまらないので、なんとか最適化されるようにしたいものです。

主なパーツの幅やサイズ

Twenty Fifteen のカスタマイズ

Twenty Fifteen の背景や色の変更、ウィジェットやメニューの設定についてです。

Twenty Fifteen のカラーパターン変更

Twenty Fifteen には、予め 6 つのカラーパターンが用意されています。カスタマイズ画面から選択することで変更できます。

ヘッダー画像の変更

メインメニューの設定

メニューといえばヘッダーの上か下に配置されることが多いのですが、Twenty Fifteen には明確なヘッダー部分がなく、ナビゲーションメニューもサイドバーに表示されます。
デザイン・レイアウト的にはウィジェットを追加するのとなんの違いもありませんが、メニューでは階層を指定でき、また今回メニューに補足説明を追加できるようになっています。
さらにソーシャルメニューというものが用意されていて、ソーシャルメディアの URL をメニューに追加すると、ソーシャルアイコンとして自動的に表示されるようになっています。

メニューに補足説明を追加する方法

外観 > メニューから設定できます。このメニュー設定のページを開いた状態で右上の【表示オプション】をクリックすると、以下のようなメニューが表示されます。【詳細メニュー設定を表示】の右端にある【説明】にチェックをいれると、メニューの中に詳細を入力するボックスが表示されます。

ソーシャルメニューの設定

初めから用意されているメニューは 2 つ、メインメニューとソーシャルメニューです。中でもソーシャルメニューには、ソーシャルリンクを追加することで、自動的にソーシャルアイコンとして表示をしてくれるようになっています。
対応しているソーシャルメディアは以下の通り。RSS や Feedly などが使えないのは残念でした。

(1) ソーシャルアイコン用のメニューを追加

外観 > メニューから設定できます。メニューの名前を決めて【メニューを作成】をクリックします。

(2) 作成したメニューの中にリンクを追加

リンクのタブを開き、ソーシャルメディアの URL を入力し、【メニューに追加】をクリック。

(3) ソーシャルリンクメニューとして表示させる

必要なメニューを追加したら、【メニュー設定】のところで【ソーシャルリンクメニュー】にチェックを入れます。するとサイドバーにソーシャルアイコンが表示されます。

ウィジェットの設定

ウェイジェットを追加できるエリアはサイドバーのみです。ヘッダー部分にサイトタイトルが表示され、その下にメニュー、ソーシャルメニューが続き、その下からがウィジェットエリアになります。
カスタマイズ方法はこれまで通りで特筆すべき点はありません。

Twenty Fifteen の構造

PHP ファイルの中身をちょっと見てみたいと思います。
まずは header.php です。いきなり id=”sidebar” となっています。その下からヘッダー部分が始まり、サイトタイトルとサイトディスクリプションを出力するタグが配置されています。
その下はサイドバーが出力されるようになっていますね。

<div id="page" class="hfeed site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
	<div id="sidebar" class="sidebar">
		<header id="masthead" class="site-header" role="banner">
			<div class="site-branding">
				<?php
					if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
					<?php endif;
					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif;
				?>
				<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
			</div><!-- .site-branding -->
		</header><!-- .site-header -->
		<?php get_sidebar(); ?>
	</div><!-- .sidebar -->
	<div id="content" class="site-content">

sidebar.php を見てみると、ナビゲーションメニューがここに配置されていますね。このナビメニューの中にはメインメニューとソーシャルメニューの 2 つが配置されていることが分かります。
そして、ナビゲーションメニューの後にウィジェットが来ています。

<?php
/**
 * The sidebar containing the main widget area
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' )  ) : ?>
	<div id="secondary" class="secondary">
		<?php if ( has_nav_menu( 'primary' ) ) : ?>
			<nav id="site-navigation" class="main-navigation" role="navigation">
				<?php
					// Primary navigation menu.
					wp_nav_menu( array(
						'menu_class'     => 'nav-menu',
						'theme_location' => 'primary',
					) );
				?>
			</nav><!-- .main-navigation -->
		<?php endif; ?>
		<?php if ( has_nav_menu( 'social' ) ) : ?>
			<nav id="social-navigation" class="social-navigation" role="navigation">
				<?php
					// Social links navigation menu.
					wp_nav_menu( array(
						'theme_location' => 'social',
						'depth'          => 1,
						'link_before'    => '<span class="screen-reader-text">',
						'link_after'     => '</span>',
					) );
				?>
			</nav><!-- .social-navigation -->
		<?php endif; ?>
		<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>
	</div><!-- .secondary -->
<?php endif; ?>

Twenty Fifteen のカスタマイズがうまくできない場合

Twenty Fifteen では色々なカスタマイズができますが、その中でも色の設定があります。サイドバーと背景色と文字色を自由に設定できます。いくつかのパターンも用意されているので、そこから選択することもできます。
しかし、プラグインの Head Cleaner を有効化していると、不具合を起こして色の変更ができませんでした。他にも相性の悪いプラグインがあるかもしれませんね。
カスタマイズがうまく反映されない場合は、プラグインが原因となっているケースが多いです。プラグインが問題を起こしているかな？　と思った時は、一旦すべて停止させて、1 つ 1 つ有効化していくとどのプラグインが悪さをしているのか確認できます。怪しいと思ったらプラグインをチェックしてみてくださね。

テーマカスタマイザーがエラーになる原因は？

では、一体どのプラグインが原因なのか？　ということになってきます。
怪しいのは【Twenty Eleven Theme Extensions】ですね。これは Twenty Eleven の機能を拡張してくれるプラグインです。個別記事ページ（single.php）は通常サイドバーが表示されないんですが、これがあると CSS やテンプレートファイルをいじらずに簡単に個別記事ページにサイドバーを表示してくれたので重宝しておりました。
でもこのプラグインだけを停止してみると・・・案の定テーマカスタマイザーは正常に動きました。そしてまた Twenty Eleven Theme Extensions を有効化してみると、、、またもやエラー。やっぱりこのプラグインが原因だったようです。
今のところ（2012.6.16現在）、Twenty Eleven Theme Extensions は最新バージョンの WordPress には対応していないようで、テーマカスタマイザーはとりあえず使えないようです。
もし、あなたが Twenty Eleven を使っていて、WordPress3.4 のテーマカスタマイザーの機能が利用できないとお困りの場合は、もしかしたら Twenty Eleven Theme Extensions が有効化されているのかもしれないですね。
ぼくの場合は今のところテーマカスタマイザーは使いそうにないので、とりあえずプラグインは有効化したままにしました。

不具合発生時は問題のプラグインをチェックしよう

今回の件に限らず、何か不具合があって WordPress が表示されないなどの不具合がおきた場合。プラグインが原因の可能性が考えられますので、まずは以下の手順を試してみましょう。

(1) プラグイン一度全部停止させる

プラグインの影響で不具合が出ているかどうかを確認するため、一旦全てのプラグインを停止します。プラグイン一覧のページで全てのプラグインにチェックを入れ、一括停止すれば簡単ですね。

管理画面（ダッシュボード）へログインできない場合

もし不具合の影響で管理画面（ダッシュボード）にログインできない場合は、FTP から直接サーバー上の plugins フォルダへアクセスし以下の手順でプラグインを停止状態にします。

これで WordPress の管理画面へログインできるようになるはずです。この状態でプラグインのページに行くと、停止状態のプラグインが確認できると思います。

(2) 一旦サイトをチェック

ここでサイトをチェックしましょう。不具合が出ていた部分はどうなっていますか？　解消されていればやはりプラグインが原因だったということになります。変化がない場合は、、、他の原因ということになるので、ググって情報を集めてみましょう・・・。

(3)１個１個有効化してチェック

改めてプラグインのページに戻り、1 つ 1 つ有効化してはサイトをチェックしていきます。いずれ不具合が発生するプラグインを特定できるはずです。
1 個 1 個チェックするのは面倒かもしれませんが、たぶん今のところこれしか方法がないと思われますので、根気づよく頑張ってください。
怪しいプラグインから試してみるのもアリです。ぼくはそれですぐに判明できましたし。
また複数のプラグインが影響しあっている可能性もあります。1 つ発見したからといって安心しないように。

プラグインがくせ者でした

原因はプラグインだったようで、『DB Cache Reloaded Fix』というプラグインが原因だ！という情報をいくつか見つけたのですが、残念ながらこのブログには該当しませんでした。
そしたらちゃぼすけさんという方のブログで、原因となるプラグインを 1 個 1 個チェックする方法がご紹介されていましたので、試してみたらサクッと解決できました。
ぼくの場合、エラーになったプラグインは【WordTwit】と【Wp Custom Fields Search】でした（なんと２つも！）。どちらも使わないので削除しましたよ。
もし、同じようにつまづいている方がいましたら、ぜひ参考にしてみてください。あと、焦らないようにアップグレード前はバックアップは取っておくものですね。

参考にさせて頂いたブログ

― ワードプレスのバージョンアップでエラー時の対処方法