【改訂版】09.共通部分の中身を書き換える　sidebar.php

2013年09月10日追記・変更

sidebar.phpの表示部分の確認

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

共通部分の書き換え 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>',
) );
?>

これで管理画面でウィジェットの設定が行えるようになった。
orijinal8_12

ウィジェットで「検索」「カテゴリー」「タグクラウド」を設定する。
参考：ウィジェット項目追加の仕方
続いて、管理画面で設定したウィジェットを呼び出すために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 -->