[WordPress]サイドメニューを追加しよう

テーマ作成から放置状態だったWordpressですが、ようやくカスタマイズ編に入ります。ブログでよくみかける2カラム（2列）レイアウトのサイドバーを追加するには？を説明します。自作テーマの中でもここが決まるとかなりブログ然としてきますし、見栄えも整えて自分だけのブログを作りこんでいきましょう。

ウィジェットを利用してサイドバーを設置しましょう

過去のテーマ作りにコードの書き方が載っていますので、ご参考にしてください。

当時はとにかく形を作ることを重視してさらっとやってしまったので、私自身のおさらいも兼ねて説明していきます。

ウィジェットって？

簡単に言うとブログパーツです。
他にもOSに搭載されている小さなアプリケーション（例：スマフォやPCの時計や天気）がウィジェットと呼ばれていたりしますので、混乱してしまいそうですが、ブログに関してはサイドバーやフッターメニュー、ナビゲーションなどのパーツと覚えておいてください。

functions.php

テーマ作りの記事を参考にして作成している場合はここを飛ばしてください。functions.phpファイルを作成して、以下を記述します。

<?php
register_sidebar( array(
	'name'=>'サイドバー',
	'before_widget'=>'<section class="sidebar-wrapper">',
	'after_widget'=>'</section>',
	'before_title'=>'<h4 class="sidebar-title">',
	'after_title'=>'</h4>'
));

<?php

register_sidebar( array(

'name'=>'サイドバー',

'before_widget'=>'<section class="sidebar-wrapper">',

'after_widget'=>'</section>',

'before_title'=>'<h4 class="sidebar-title">',

'after_title'=>'</h4>'

));

register_sidebar()はサイドバー（ウィジェット）をOnにするWordpress関数です。
その隣にあるarrayは連想配列を引数として渡すために書いています。それ以下の記述が配列の引数と呼ばれるもので、この書き方でサイドバーに出力される振る舞いを設定することができます。
まだPHPを学習していなくても、このように書くのだとおまじないとして覚えておいてください。
それでは、配列の引数に書いてある内容を一つずつ解説します。

‘name’: サイドバーの名前です。ダッシュボードに表示されます。
‘before_widget’, ‘after_widget’: ウィジェットの前後に入れる文字列を指定します。
‘before_title’, ‘after_title’: ウィジェットのタイトルの前後に入れる文字列を指定します。

サイドバーだけでなくフッターメニューもこれで1つだけではなく複数作れます。

sidebar.php

テーマ作りの記事を参考にして作成している場合はここもfunction.php同様飛ばしてください。sidebar.phpファイルを作成して、以下を記述します。

<aside id="sidebar">
        <?php dynamic_sidebar( 'サイドバー' ); ?>
</aside>

<?php dynamic_sidebar( 'サイドバー' ); ?>

</aside>

これだけです。簡単ですね。dynamic_sidebar()はウィジェットを出力するWordPress関数です。functions.phpとダッシュボードの設定を反映した結果が出力されます。
サイドバーへ何か他の機能（広告など）を追加したい場合は別に記述する必要がありますが、今回はこのままにしておきます。

ウィジェットが使えるか確認しましょう

管理画面を開いてダッシュボード＞外観＞ウィジェットと進みます。

出来上がったサイドバーボックスに画面左側の「利用できるウィジェット」をドラッグして設置します。今回は「テキストウィジェット」「カレンダー」「カテゴリー」の３つを設置します。

読み込みの仕組み

各ファイルの関係＆役割は、下図のようになります。

functions.phpで追加したサイドバーの機能が、sidebar.phpに呼び出されhtmlとして出力されるようになり、そこからさらにindex.phpに読み込まれサイドバーとして表現される、といった感じです。

CSSで見栄えを整えましょう

サイドバー・ウィジェットにスタイルを当てましょう。
register_sidebar()関数のオプション指定や、各widgetで出力されるIDやクラス名を利用します。
もしわからないようでしたらブラウザの開発ツール（F12、⌘+Option+E、Ctl+Alt+iで大体開きます）を使ってID名・クラス名を参照してくださいね。

.sidebar-wrapper {
	margin: 0 0 15px 0;
}
.sidebar-title {
	border-left: solid 10px #99c348;
	font-size: 1.2em;
	padding: 10px 0 10px 20px;
	margin: 8px 0;
	color: #555;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
.textwidget {
	padding: 0 8px;
}
#calendar_wrap {
	text-align: center;
}
#calendar_wrap table {
	margin-left: auto;
	margin-right: auto;
}
#calendar_wrap table a {
	text-decoration: underline;
	color: #2ea7e0;
}
#calendar_wrap table a:hover {
	background-color: #2ea7e0;
	color: #fff;
}
.sidebar-wrapper ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.sidebar-wrapper li {
	border-bottom: dotted 1px #99c348;
}
.sidebar-wrapper li a {
	display: block;
	color: #555;
	padding: 3px 0 3px 8px;
}
.sidebar-wrapper li a:hover {
	background-color: #cfc;
}

.sidebar-wrapper {

margin: 0 0 15px 0;

}

.sidebar-title {

border-left: solid 10px #99c348;

font-size: 1.2em;

padding: 10px 0 10px 20px;

margin: 8px 0;

color: #555;

border-top: solid 1px #ccc;

border-bottom: solid 1px #ccc;

}

.textwidget {

padding: 0 8px;

}

#calendar_wrap {

text-align: center;

}

#calendar_wrap table {

margin-left: auto;

margin-right: auto;

}

#calendar_wrap table a {

text-decoration: underline;

color: #2ea7e0;

}

#calendar_wrap table a:hover {

background-color: #2ea7e0;

color: #fff;

}

.sidebar-wrapper ul {

list-style-type: none;

padding: 0;

margin: 0;

}

.sidebar-wrapper li {

border-bottom: dotted 1px #99c348;

}

.sidebar-wrapper li a {

display: block;

color: #555;

padding: 3px 0 3px 8px;

}

.sidebar-wrapper li a:hover {

background-color: #cfc;

}

以上です。

私事になるのですが、テーマを作り始めた当時は「どうやって手間を省くか・できれば備忘録を兼ねた記事を早く書き始めたい」ばかり考えていました。結果2週間もかからずにテーマ自体はかたちになったのですが、更新ペースは遅かったですし、その間に勉強したことを記録するという目的が果たせず、ここまで来るのに半年くらいかかりました。
「あのときああすればよかった」のようなことはいっぱいあるので、できれば失敗談も書いていけたらいいかなとチラッと考えています。また、「ここはこうじゃないかな？」「これはこちらが正しい考え方だよ」というのがあれば、教えてくださるととっても嬉しいです。ねこま（@necomacustom）でした。