2013年09月10日 追記・変更

sidebar.phpの表示部分の確認
ファイルの書き換え作業も残るところ、あと2つだ。今回は、sidebar.phpの書き換え作業を行う。
それでは、サイトの表示を確認する。現在は「検索フォーム」「Category」「Tag」の一覧が表示されている。

共通部分の書き換え sidebar.php
今回もHTMLサイトと同じ表示になるようにページソースを変更していく作業となる。サイドバーはウィジェット対応させて、管理画面から追加編集出来るようにしたい。
現在、ウィジェット対応していない。

管理画面にウィジェットの項目を追加するには、「functions.php」にヴィジェット用の関数を作成しなければならない。
また、実際に呼び出す際はテンプレートに呼び出しの記述をする必要がある。今回はウィジェットを「sidebar.php」で呼び出して表示させる。
functions.phpを開いて、下記を追加記述
<?php register_sidebar( array( 'name' => 'サイドバーウィジェット', 'id' => 'sidebar', 'description' => 'サイドバーのウィジェットエリア', 'before_widget' => '<div class="section">', 'after_widget' => '</div>', ) ); ?>
変更後の記述 functions.php
<?php register_nav_menus(array( 'main_navigation' => 'Primary Navigation' ) ); ?> <?php register_sidebar( array( 'name' => 'サイドバーウィジェット', 'id' => 'sidebar', 'description' => 'サイドバーのウィジェットエリア', 'before_widget' => '<div class="section">', 'after_widget' => '</div>', ) ); ?>これで管理画面でウィジェットの設定が行えるようになった。

ウィジェットで「検索」「カテゴリー」「タグクラウド」を設定する。
参考:ウィジェット項目追加の仕方
続いて、管理画面で設定したウィジェットを呼び出すためにsidebar.phpを書き換える。
現在の記述 sidebar.php
灰色の行は「検索フォーム」だが、ここは切り取って別ファイルとして保存する。説明は下記に記述。<!-- sidebar --> <div id="sidebar"> <div class="section"> <form role="search" method="get" id="searchform" action="#" > <label class="screen-reader-text" for="s"></label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="検索" /> </form> </div> <div class="section"> <h2>Category</h2> <ul> <li><a href="elementary.html">基礎知識</a></li> <li><a href="wordpress.html">WordPress</a></li> </ul> </div><!-- /.section --> <div class="section"> <h2>Tag</h2> <a href="#">タグ</a> <a href="#">php</a> <a href="#">html</a> <a href="#">相対パス</a> <a href="#">絶対パス</a> <a href="#">ツール</a> <a href="#">プラグイン</a> </div><!-- /.section --> </div> <!-- /sidebar -->
検索フォームは別ファイル化して「searchform.php」として保存
検索フォームやコメント等は、別ファイルとして作成する事でデザインを指定出来る。デザインを指定したい場合は、別ファイルとして用意する必要がある。
もしファイルが存在しない場合は、WordPressはデフォルトのファイルを読みに行く。
詳しくは、公式サイトの「関数リファレンス/get search form」を確認。
action=""の部分でデータを送る先は、「http://localhost/wordpress/」だ。
つまり、bloginfo('url')を使用する。
<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>" > <label class="screen-reader-text" for="s"></label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="検索" /> </form>呼び出しのWordPressテンプレタグは、get_search_form()だが、管理画面の「ウィジェット」で「検索」ウィジェットを設定する事で検索ウィジェット内で「get_search_form()」が自動的に記述される。
また、検索フォームのソースファイルはwp-includes/general-template.php に含まれる。
WordPressテンプレタグと、phpで書き換えた記述 sidebar.php
<!-- sidebar --> <div id="sidebar"> <!-- sidebar --> <?php if ( is_active_sidebar( 'sidebar' ) ) : dynamic_sidebar( 'sidebar' ); else: ?> <p>ウィジェットが設定されていません。</p> <?php endif; ?> <!-- /sidebar --> </div> <!-- /sidebar -->
【ソース解説】WordPressテンプレタグと、phpで書き換えた記述 sidebar.php
<!-- sidebar --> <div id="sidebar"> <!-- sidebar --> <!-- ■is_active_sidebar() WordPressのテンプレタグの条件分岐タグ 「functions.php」で記述した id' => 'sidebar' の部分が引数となっている。 もしウィジェットsidebarが設定されている場合 ダイナミックサイドバーのsidebarを表示する。 --> <?php if ( is_active_sidebar( 'sidebar' ) ) : dynamic_sidebar( 'sidebar' ); else: ?> <p>ウィジェットが設定されていません。</p> <?php endif; ?> <!-- /sidebar --> </div> <!-- /sidebar -->
サイトの表示を確認する

これでサイドバーの書き換えが完了した。
次はいよいよ最後のfooter.phpを書き換える作業に入る。