WordPress オリジナルテーマを作る ウィジェットを使ったサイドバーの作り方

当サイトでは、サイドバーの作り方を2つ紹介します。今回はそのうちのひとつ、ウィジェットを使った作り方を紹介します。

ウィジェットとは、簡単な操作で自由にサイドバーを作成できる機能です。弱点もありますが、視覚的にわかりやすく手短に高機能なサイドバーを作ることができます。ただし、ウィジェットを使用するためには、テーマ（テンプレート）がウィジェットに対応している必要があります。それさえクリアすれば、あとはお手軽かもしれません。

まずは、現在使用しているテーマ（テンプレート）がウィジェットに対応しているか確認します。
当サイトで1からオリジナルテーマを作成している方は、まだウィジェットに対応していません。ただ、他サイトからテーマをダウンロードして使用することもあるかもしれないので、一応確認の仕方を紹介しておきます。

確認の仕方はいたって簡単です。「ダッシュボード > 外観」の中に「ウィジェット」という項目がなければ、そのテーマはウィジェットに対応していません。または、項目がありながら、クリックすると”ウィジェットに対応していない/使用できない”旨の表示が出る場合も、対応されていません。WordPressのバージョンによって多少変わってきますが、これで大抵はチェックできます。

ウィジェットを有効にするためには、「functions.php」というファイルが必要です。

「sample」（任意のテーマフォルダの名前）フォルダに「functions.php」というファイルを作成し、テーマフォルダにアップロードします。アップロード先は、「wp親フォルダ > wp-contet > themes > sample（「sample」は任意のテーマフォルダの名前）」ですね。「functions.php」のパーミッションは「755」または「777」にします。

これで「ダッシュボード > 外観 > テーマ編集」から編集できます。「テーマのための関数 (functions.php)」となっているのがそうです。クリックするとファイルの内容を表示できます。現在はまだ何も書かれていない状態です。

「functions.php」ファイルは、今までアップロードしてきたテンプレートファイルとは違い、WordPressの設定などを記述するための特殊なファイルです。したがって、HTML等ではなく、内容はすべてPHPで記述します。

では「functions.php」に、ウィジェットを有効にする設定を記述します。以下のように編集してください。

編集: functions.php

<?php

// ウィジェット
register_sidebar();

?>

「// ウィジェット」と書かれた行はコメントです。PHPでは、先頭に「//」を挿入した行はコメントになります。コメントとは、自由に説明等を書くためのメモのようなものです。その行だけは、わかりやすく修正したり、削除しても構いません。

ここでひとつ注意です。「functions.php」ファイルを更新した際に、エラーが出たりダッシュボードが表示されないといったトラブルが発生した場合、「functions.php」ファイルの内容をもとに戻してアップロードしなおすと解決されることがあります。HTMLと違い、PHPは細かな記述ミスが大きなエラーにつながりやすいので、よくわからない記述を適当に改変したりすることはしない方がよいでしょう。

このあとは簡単です。「ダッシュボード > 外観 > ウィジェット」をクリックして、視覚的に操作します。

左に「利用できるウィジェット」、右に「サイドバー 1」と書かれた項目があると思います。さらに「利用できるウィジェット」の中には「RSS」「アーカイブ」「カレンダー」……などのサイドバーに表示するパーツがあります。

表示したいパーツを選び、クリックしたままドラッグ（移動）し、右の「サイドバー 1」の上でドロップ（クリックをはなす）します。

※クリックでレクチャー画像が表示されます。

パーツの順番を変えたいときは、「サイドバー 1」内でパーツをドラッグ＆ドロップして入れ替えます。

パーツを削除したいときは、「サイドバー 1」から削除したいパーツを「利用できるウィジェット」までドラッグ＆ドロップします。

「▼」をクリックすると、そのパーツの詳細を設定できます。

あとは「sidebar.php」にウィジェットを表示させるテンプレートタグを挿入すれば、テーマにウィジェットが反映されます。
以下がウィジェットを表示させるタグです。

Pick up

<?php dynamic_sidebar(); ?>

「sidebar.php」に挿入します。

編集: sidebar.php

<div id="side">

<ul>
<?php dynamic_sidebar(); ?>
</ul>

</div><!--/side-->

ウィジェットを複数にわけて使いたい場合は、こちらのリンクで紹介します。（※現在作成中です。申し訳ありません）

これでウィジェットの内容が反映されたと思います。まだスタイルシートを編集していないので、乱雑な表示になっていると思います。「style.css」を整えると以下のようになります。

※画像をクリックで拡大します。

また、ウィジェットの設定は以下のようになっています。

新しくデザインした「style.css」を含め、ここまでのすべてのコードは下記のリンクから見られます。

>> ここまでのコード / デザインサンプルを見る