カテゴリー: WordPress

WordPress のカスタマイズに役立つ、サイドバーウィジェットの追加方法をメモしておきます。ウィジェットを追加してレイアウトを整えれば、カスタマイズの自由度は飛躍的に高まります。
例えば・・・
ヘッダーとコンテンツの間に、ウィジェットで管理できるスペースを設置したり

３カラム用のサイドバーウィジェットを用意したり

幅の違うウィジェットをサイドバーに設置したり

ウィジェットを使えば、ダッシュボードのウィジェット管理画面からいつでも自由に好きなようにコンテンツを入れ替えることができるので非常に便利です。
この部分にあったらいいな〜というコンテンツを自由に追加できます。もちろん、テンプレートに直接 HTML で書き込んでも OK ですが、作業が面倒だと思います。それよりも WordPress の管理画面から変更できた方が便利だと思いませんか？
ウィジェットを好きなように追加・配置できれば、こういったことが可能になります。

WordPressに新規でウィジェットを追加する

ウィジェットの追加はとても簡単です。決まったコードを追記するだけ。それを表示するのも簡単。以下詳しく見ていきます。

(1) ウィジェット用のコードを追加

さて、本題に入って行きます。使用しているテンプレートは WordPress のデフォルトテンプレートとしておなじみの Twenty Eleven です。が、基本的に WordPress 全てのテンプレートに共通する内容です。
ウィジェットを追加するには、【functions.php】に、以下を追記してください（※functions.php をカスタマイズする場合は子テーマの作成をオススメします）。

【注意】functoins.phpをWordPressの子テーマに追加する場合

register_sidebar( array(
	'name' => __( 'サブサイドバー', 'twentyeleven' ),
	'id' => 'sidebar-6',
	'description' => __( '新規で追加したウィジェットです', 'twentyeleven' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => '</aside>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

id を【sidebar-6】、つまり 6 番目としているのは、Twenty Eleven の場合すでにデフォルトで 5 つのウィジェットが設定されているからです。新たに追加すると 6 番目になるわけです。
もちろん、名称は任意で決めてもらって大丈夫です。
また、【name】の部分は管理画面上に表示されるので、分りやすく日本語やカタカナで OK です。
これで新しいウィジェットが追加されました。管理画面のウィジェットを見てみると、追加した項目が表示されていると思います。

Twenty Eleven 以外のテーマを使用している場合のウィジェット追加方法は？

上記のコードで基本的にはウィジェットを追加できますが、細かい点はコピペでは印象が悪い気がします。例えば、、、name の部分に ‘twentyeleven’ と入っていたり、、、before_title に <h3> が指定されていたり。
これらの指定はテーマによって異なりますので、今使用しているテーマの functions.php を開いて【register_sidebar】と検索をしてみてください。ウィジェットに関するコードが見つかるはずです。ここの記述を子テーマの functions.php にコピペし【name】や【id】の部分を任意の値に変更すれば、テーマに合ったウィジェットを追加できるはずです。

(2) ウィジェットのコードをテーマに追記して表示させる

続いて【sidebar.php】など、ウィジェットを追加したいテーマファイルを子テーマにコピーして、以下のコードを追記します。

		<?php endif; // end sidebar widget area ?>
	</div><!-- #secondary .widget-area -->


	<div id="tertiary" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-6' ); ?>
	</div><!-- #tertiary .widget-area -->

<?php endif; ?>

Twenty Eleven の場合、メインサイドバーに対しての id が secondary（第２）となってますので、第３ということで tertiary としています。ちなみに 4 番目は quaternary、5 番目は quinary です。
これでサイドバーに新しいウィジェットエリアが追加されました。

他のウィジェットと同じように使用することができます。後はレイアウトを好きなように整えればいいのですが、これは CSS のカスタマイズになります。

Twenty Elevenのサイドバーに関する仕組みについて

ここで、Twenty Eleven のサイドバーについてまとめておきたいと思います。どのテンプレートファイルが、どこに反映されて、CSS ではどのように指定されているのか・・・？？　このようなことが分ってもらえると思います。
Twenty Eleven は 2 カラムのテンプレートです。デフォルトでは 5 つのウィジェットが用意されています。その内、1 つはサイドバー用、1 つはショーケーステンプレートのサイドバー用、残りの 3 つはフッターに表示されるサイドバー用です。
また、CSS に関しては以下のように指定されています。

※フッターエリアのスタイルは全て #supplementary で指定されており、#first〜#third は使われていません。
基本的なテンプレートの構造は、ヘッダーから始まり、コンテンツ部分が来て、サイドバーを吐き出し、最後にフッターを吐き出す、という流れになっています。つまり、CSS でレイアウトなどを一切指定しなかった場合、以下のように上から順番に表示されるようになっているということです。

Twenty Eleven の場合、いくつかのテンプレートがあり、サイドバーに関しては右サイドバーと左サイドバーの両方を選択できるようになっています。これは、要するにサイドバーを【float】で右に回り込ませるか、左に回り込ませるかの違いです。コンテンツの幅を狭めて、回り込ませるスペースをつくり、サイドバーが横に並ぶように CSS でレイアウトを指定しているわけですね。

そのため、コンテンツの幅をちょっと広げると、サイドバーは回り込むスペースを奪われ、コンテンツの下に位置するようになってしまいます（理屈を把握するためにも、試してみてください）。

ウィジェットのレイアウトを整える

追加したウィジェットは CSS を使ってレイアウトを整えることができます。これによって、3 カラムに構成にしたりコンテンツ部分にウィジェットを表示させたり、結構自由な使い方ができるようになります。
具体的なカスタマイズ方法は、別途詳しくまとめたいと思います。
基本的には、各ウィジェットに id を指定してしているので、その id に対して float や width や margin などを調節すればいいだけです。
例えば先ほどの例で言うと、Twenty Eleven に追加した 3 つ目のウィジェットは【id=”tertiary”】にしました。このウィジェットのレイアウトを調節する場合は【tertiary】で指定してあげれば OK というわけです。
Firefox などのブラウザの拡張機能である Firefbug などを使って、レイアウトを確認しながら調節していけば、そんなに難しくないと思います。
ぜひ挑戦してみてください。

WordPress をサイト用にカスタマイズするなかで、ヘッダー画像は大事な要素だと思います。しかし、トップページではインパクトを与えることができても、他のページでは必要なかったりします。
なので、トップページのみヘッダー画像を表示させるカスタマイズはできないものか、情報を探しておりました。
そして、実際にトップページのみヘッダー画像を表示させ、他のページではヘッダー画像を表示させないというカスタマイズができたので、メモしておきたいと思います。

結論：条件分岐を使う

条件分岐タグを使えば、そのタグで指定した条件の場合にだけ、任意のソースを表示してくれるようになります。
このタグには様々なものがあり、メインページ、カテゴリーページ、個別投稿ページなどの条件を指定することができ、そのページだけで表示させたいものを吐き出すことができます。
＞ 各種条件分岐タグについてはこちら

条件分岐タグを使って、トップページのみヘッダーを表示させる

条件分岐タグには色々な種類がありますが、トップページに何を指定しているかで、ちょっと使い方が異なるようです。今回は大きく 2 パターンについてメモしておきたいと思います（以下トップページ＝フロントページとして話しを進めていきます）。

フロントページに固定ページを指定している場合

今回はサイトタイプのため、フロントページには固定ページを指定していました。つまり、WordPress の設定において、【表示設定】の【フロントページの表示】の部分で【固定ページ】を選択し、任意の固定ページをフロントページに指定してたということですね。
 
フロントページに指定した固定ページにのみ、あるソースを表示させる場合、以下のタグを使用します。

<?php if(is_front_page() ): ?>
	フロントページのみで表示させたいこと
<?php endif; ?>

で、これをどこに書き込むか、ということですが、、、今回はフロントページが表示された場合のみ、つまりドメインへのアクセスがあった場合にのみヘッダー画像を表示させたいわけなので、【header.php】に書き込みます。
以下のように、ヘッダー画像を条件分岐タグで囲ってしまえば OK です。

<?php if(is_front_page() ): ?>
	<div id="header-img">ヘッダー画像</div> /* idを指定していると、CSSで編集しやすくなります */
<?php endif; ?>

Twenty Eleven を使っているのであれば、カスタムヘッダーに関する記述が 78 行目から 117 行目辺りまでなので、その間を条件分岐タグで囲みます。そうすると、トップページでしかヘッダーが表示されなくなるというわけです。

<?php if(is_front_page() ): ?> /* ここから下を囲みます */
			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						/*
						 * We need to figure out what the minimum width should be for our featured image.
						 * This result would be the suggested width if the theme were to implement flexible widths.
						 */
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					/*
					 * The header image.
					 * Check if this is a post or page, if it has a thumbnail, and if it's a big one
					 */
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>
<?php endif; ?>

フロントページに最新の投稿を指定している場合

フロントページの指定が固定ページではなく、ブログの最新投稿一覧ページだった場合、別の書き方があるようですので、補足として紹介しておきます。
タグは以下のものを使います。

<?php if(is_home() && !is_paged()): ?>
	フロントページで表示させたいこと
<?php endif; ?>

これで、トップドメインのページにアクセスした場合にのみ、任意のソースを表示させることができます。
ちなみに、

<?php if(is_home()): ?>
	フロントページで表示させたいこと
<?php endif; ?>

のように書いた場合（後半の【 && !is_paged() 】が無い場合）、トップドメイン以外の 2 ページ目、3 ページ目の投稿一覧ページでもフロントページ扱いにされてしまうようです。個別投稿（single.php）とかだと、フロントページ以外、ということになるんでしょう。

結局どっちがいいのか？

フロントページを示す条件分岐タグは大きく２パターンあるようですが、フロントページを固定ページにしていた時の条件分岐タグでも、ブログの最新投稿をフロントページとして扱ってくれます。ただし、逆は無理のようです。
つまり、

というようになっています。
WordPress をサイトタイプにカスタマイズしたい場合は、前者の方を使っておいた方が間違いないでしょう。

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

ありがとうございました！