WordPressでサイドバーを表示する

WordPressでテーマの作成/その8

コンテンツ部分の右側にサイドバーを表示したいと思います。サイドバーに表示するメニューがウィジェットの機能を利用して管理画面で選択できるようにします。現状では、『外観』→『ウィジェット』をクリックしても、下記のように表示されています。

『functions.php』にサイドバー用のウィジェットの機能を有効にするために『register_sidebar();』を追加して、『外観』→『ウィジェット』をクリックすると下記のようにウィジェットが利用できるようになります。

それでは、まず現状のコンテンツ部分の横幅を600pxに指定して、右側にサイドバーを入れることができるようにします。『style.css』に下記のタグを挿入します。

div#content	{
	width: 600px;
	float: left}

『home.php』ファイルを開き、サイドバーを表示するための関数『<?php get_sidebar();?>』をフッターの手前に挿入します。尚、『wp-content/themes/winroad theme』フォルダにサイドバー用のカスタムパーツテンプレート『sidebar.php』を作成し、下記のコードを入力します。

<!-- サイドバー -->
<div id="sidebar">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div><!-- /サイドバー -->

ダッシュボードの『外観』→『ウィジェット』を選択すると、サイドバーに表示したいウィジェットを左側の『利用できるウィジェット』から選び、右側のウィジェットエリア『サイドバー1』に追加していきます。今回は、『最近の投稿』『カレンダー』『カテゴリー』『アーカイブ』の4つのメニューを追加します。

ブラウザで確認してみましょう。サイドバーのスタイルを指定していませんので、表示がちょっとおかしいです。

サイドバーのデザインを指定する

それでは、サイドバーのデザインを指定したいと思います。『style.css』に下記のタグを追加します。

/* サイドバー */
div#sidebar	{
	width: 300px;		/*サイドバーの横幅を300pxに指定*/
	float: right}		/*右側配置に指定*/

div#sidebar ul	{
	margin: 0;			/*メニュー周りの余白を削除*/
	padding: 0;
	list-style-type: none}	/*リストマークを削除*/

div#sidebar .widget	{margin-bottom: 20px}	/*メニューの間隔を20pxに指定*/

div#sidebar h2	{
	font-size: 0.75em;	/*見出しの文字サイズを0.75emに指定*/
	color: #ffffff;		/*見出しの文字色を白色に指定*/
	background-color: #0c8bcd;	/*背景色を青色に指定*/
	border-radius: 3px;	/*背景を3pxの角丸に指定*/
	padding: 2px 10px;	/*バーの内側の上下余白を2px、左右余白を10pxに指定*/
	margin: 0}			/*周りの余白を削除*/

div#sidebar li li	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	border-bottom: dotted 1px #aaaaaa;	/*リンクの下に1pxのグレー点線を挿入*/
	margin: 0}			/*リンク周りの余白を削除*/

div#sidebar li li a	{
	color: #000000;		/*リンクの文字色を黒に指定*/
	display: block;		/*リンクをブロック要素として指定*/
	padding: 5px 10px}	/*上下の間隔を5px、左右の間隔を10pxに指定*/

div#sidebar li li a:hover	{
	background-color: #f7e29e}	/*リンクを重ねたときの背景色をオレンジ色に指定*/

/* カレンダー */
#wp-calendar	{
	font-size:0.85em;	/*カレンダーの文字サイズを0.85emに指定*/
	margin:auto;		/*中央に配置*/
	margin-top:20px;	/*上部余白を20pxに指定*/
	margin-bottom:-30px;/*下部余白を-30pxに指定*/
	width : 80%;		/*横幅を80%に指定*/
	text-align:center;}	/*日付文字を中央に配置*/

それでは、ブラウザで確認してみましょう。

本日のWordPress関数

get_sidebar()

あるテンプレートにサイドバー部分のテンプレートを組み込みたいときに使う関数です。サイドバー用のテンプレートの名前に接尾語をつけ、組み込み先のテンプレートに応じて、サイドバー用のテンプレートを使い分けることもできます。たとえば、『sidebar-index.php』というテンプレートを組み込みたいときは、組み込み先のテンプレートに『<?php gent_sidebar(‘index’);?>』と記載します。

dynamic_sidebar()

register_sidebar関数で登録したサイドバーを出力するための関数です。サイドバーを複数登録した場合は、パラメータとしてサイドバーの名前を指定します。サイドバーが未登録や、登録されていてもその中にウィジェットを1つも入れていない場合はdyanamic_sidebar関数は何も出力せず、関数の戻り値はFALSEになります。

本日は以上です。

タグ

このページの先頭へ