wordPress stingerでサイドバーの表示が違うページを作る方法

2014年6月26日

久しぶりに、wordPressのカスタマイズ記事をお届けします。
wordPressユーザーになる事約1月、ある程度の仕組みが分かって来ましたので、
今回、サイドバーのカスタマイズに挑戦します。しかも話題の無料テーマ、stingerでおこなってみたいと思います。

サイドバーとは、通常記事の右横に表示されている”NEW ENTRY”などが表示されている、stingerでは、お馴染みのレイアウト画面です。今回、固定ページを作成した場合に、いつもと違うレイアウトにする為の仕掛けを用意します。

固定ページについて、良くわからない方は、以前の記事、”wordPress 投稿ページと固定ページの違い”をご参照ください。

wordPress stingerでサイドバーを変更する為に必要なファイル

変更するファイルは、
functions.php

新規作成するファイルは、
page-new.php
sidebar-new.php
footer-new.php

また、今まで説明してしてきた通り、子テーマの変更で対応します。
子テーマの変更であれば、万一ソースコードを間違えて記述してしまっても、wordPressのデータを壊す心配もありませんし、wordPressの親テーマのバージョンアップの際も、カスタマイズした内容を簡単に引き継げますから、お勧めです。

さて、まずは、functions.phpに管理画面のウィジェットで、サイドバーの表示が出来るように、変更を加えます。

以前、footerをカスタマイズする方法で、functions.phpを変更した場合は、
以下のソースコードになっていますので、

[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) ||
!dynamic_sidebar(7) )

register_sidebars(1,
    array(
    ‘name’=>’サイドバー1’,

‘before_widget’ => ‘<ul><li>’,
    ‘after_widget’ =>
‘</li></ul>’,
    ‘before_title’ => ‘<h4
class="menu_underh2">’,
    ‘after_title’ => ‘</h4>’,

));
・
・
省略
・
・
register_sidebars(1,
    array(

    ‘name’=>’フッター右’,
    ‘before_widget’ => ”,

‘after_widget’ => ”,
    ‘before_title’ => ‘<h5>’,

‘after_title’ => ‘</h5>’,
    ));
[/php]

最初の2行目の数値を７→８に変更し、最後の行に、追加するサイドバー用の
コードを付け加え、以下のような記述になれば完成です。

[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) ||
!dynamic_sidebar(8) )

    ‘name’=>’フッター右’,
    ‘before_widget’ => ”,

‘after_widget’ => ”,
    ‘before_title’ => ‘<h5>’,

‘after_title’ => ‘</h5>’,
    ));
register_sidebars(1,

array(
    ‘name’=>’サイドバー固定’,
    ‘before_widget’ =>
‘<ul><li>’,
    ‘after_widget’ => ‘</li></ul>’,

    ‘before_title’ => ‘<h4 class="menu_underh2">’,

‘after_title’ => ‘</h4>’,
    ));
[/php]

次に、子テーマの中にある、footet.phpと親テーマの中にあるpage.phpとsidebar.phpをそれぞれコピーして、
名前を違うファイルを新規に子テーマの中に用意します。

page.php → page-new.php
footer.php → footer-new.php
sidebar.php → sidebar-new.php

では、順番にみていきましょう。
page-new.phpは、管理画面の固定ページを作成する時に選択するテンプレートになります。通常wordPressのテーマファイルであれば、この中に、サイドバーに関する記述が入っているのですが、stingerには、入っていませんでした。しかし、よーく調べてみると、なんと、footer.phpの中にsidebarを呼び出す記述が載っているではありませんか。

[php]
<?php get_sidebar(); ?>
[/php]

よって、仕組みは次の通りです。page.phpが固定ページの記事本文になり、この中で、footer.phpを読みこんでいます。読み込まれたfooter.phpがサイドバー情報を含んでいるsidebar.phpを呼び出しているのです。
そこで、今回、新しいサイドバーのレイアウト画面を用意する為、３つのphpファイルを複製して名前を変える必要があったのです。

あとは、新規に作成しした複製ファイルにおいても、phpの呼び出しが続くようにソースコードを変更してあげればイイだけです。