完成図
Simplicity をお使いの方の中には、ブログをサイト風にしたいとお考えの方もいらっしゃる模様。
フロントページを固定ページで作るとできますが、少し面倒です。そこで行いたいのが、before-main.php へのウィジェットエリアの設置。
子テーマに用意されている before-main.php にウィジェットエリアを作れば、「グローバルメニューの下」と「メインカラムとサイドバーの上」との間にコンテンツを表示できます。
このウィジェットエリアに画像や WordPress popular posts を設置するだけでも、ブログがサイト風になります。
ウィジェットエリアを作成
before-main.php にウィジェットエリアを設置するために、まずは専用のウィジェットエリアを作成します。
子テーマの functions.php に、以下のコードを追加します。
register_sidebars( 1, array(
'name' => 'グローバルメニュー下',
'id' => 'under-globalmenu-widget',
'description' => 'グローバルメニュー下のウィジットエリアです。',
'before_widget' => '<div id="%1$s" class="under-globalmenu-widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="under-globalmenu-widget-title">',
'after_title' => '</div>',
));
これで「グローバルメニュー下」という名前のウィジェットエリアが、ウィジェット管理画面に追加されます。
複数のウィジェットエリアを作成する際には、id
の重複がないように注意します。コードの詳細については、WordPress Codex/関数リファレンス/register sidebar をご参照ください。
before-main.php に設置
ウィジェットエリアを作成しただけでは、サイトには表示されません。before-main.php に設置した後で、サイトに表示されます。
設置するために、下記のコードを子テーマの before-main.php に追加します。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
あとはウィジェット画面で、「グローバルメニュー下」ウィジェットエリアにお好きなウィジェットを追加します。
特定のページだけに表示
before-main.php に追加した先程のコードでは、全てのページにウィジェットが表示されます。
しかし、条件分岐タグを用いれば、任意のページのみにウィジェットを表示できます。いくつか条件分岐タグを使った例を紹介します。尚、条件分岐タグは非常に種類が多く、WordPress Codex/条件分岐タグにて条件分岐タグの一覧をご覧いただけます。
フロントページのみ
フロントページのみに表示するには、is_front_page()
を使ったコードを before-main.php に追加します。これはフロントページが「最新の投稿」でも「固定ページ」であっても同様です。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_front_page() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
ただし、「最新の投稿」の場合は、上記のコードでは 2 ページ目以降の全てのフロントページでウィジェットが表示されます。トップページのみ(フロントページの 1 ページ目のみ)に表示させる場合には、下記のコードにします。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_front_page() === true && is_paged() === false ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
is_paged() === false
で、2 ページ目以降を除外しています。
「投稿ページ」に設定した固定ページのみ
フロントページが固定ページの場合には、表示設定で「投稿ページ」に固定ページを設定できます。
この「投稿ページ」に設定した固定ページは、「最新の投稿」と同じく新着記事を表示するページになります。
新着記事を表示する「投稿ページ」にのみウィジェットを表示するには、is_home()
を使います。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_home() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
カテゴリーページのみ
カテゴリーの一覧ページにのみウィジェットを表示するには、is_category()
を使います。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_category() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
フロントページと同じく、is_paged() === false
で 2 ページ目以降は表示しないようにもできます。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_category() === true && is_paged() === false ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
また、特定のカテゴリーページのみに表示することも可能です。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_category( 'dog' ) === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
上記の例は、カテゴリーのスラッグが dog
のカテゴリーページでのみウィジェットを表示するものです。スラッグではなくカテゴリーの ID でも指定できます。
また、複数のスラッグやカテゴリー ID を指定できます。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_category( array( 'dog', 'cat' ) ) === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
上記コードは、スラッグが dog
と cat
のカテゴリーページにウィジェットを表示する例です。
タグページのみ
タグの一覧ページにのみウィジェットを表示するには、is_tag()
を使います。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_tag() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
カテゴリーページと同じく、2 ページ目以降は表示しないこともできます。また、スラッグやタグの ID を使い、特定のタグページのみに表示も可能です。
検索結果ページのみ
検索フォームを使うと、検索結果ページが表示されます。この検索結果ページのみにウィジェットを表示できます。
使用する条件分岐は、is_search()
です。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_search() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
is_paged() === false
も使うと、2 ページ目以降は表示しないようにできます。
投稿ページのみ
投稿ページ(先程出てきた表示設定の「投稿ページ」ではなく記事ページのこと)のみにウィジェットを表示するには、is_single()
を使います。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_single() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
投稿ページの ID やスラッグを使い、特定の投稿ページのみに表示もできます。以下は、ID が 10 の投稿ページにのみ表示する例です。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_single( '10' ) === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
複数の ID やスラッグを指定できます。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_single( array( '10', '15' ) ) === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
固定ページのみ
固定ページのみに表示するには、is_page()
を使います。
<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_page() === true ) {
dynamic_sidebar( 'under-globalmenu-widget' );
}
?>
ID やスラッグを使い、特定の固定ページでのみ表示も可能です。また、複数の ID やスラッグの指定もできます。
おわりに
before-main.php へのウィジェットエリアの追加で、サイトデザインの幅が広がります。
ウィジェットを利用し、Instagram に投稿した写真を表示するのも 1 つのアイデア。工夫次第で、他のサイトとの差別化が可能です。
尚、今回のウィジェットエリアに WordPress Popular Posts を設置しデザインする方法は、Simplicity のメニュー下に人気記事を表示するカスタマイズで紹介しています。