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

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

スポンサード リンク

01

ウィジェットを使ってサイドバー(サイドメニュー)を作る

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

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

02

現在適用されているテーマ(テンプレート)がウィジェットに対応しているか確認する

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

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

「ウィジェット」の項目がない場合

「ウィジェット」の項目がある場合

03

「functions.php」を作成する

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

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

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

04

「functions.php」を編集する

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

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

編集: functions.php
<?php

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

?>

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

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

05

ダッシュボードからウィジェットを自由に操作する

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

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

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

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

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

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

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

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

06

「sidebar.php」にウィジェットを表示するタグを挿入する

あとは「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」を含め、ここまでのすべてのコードは下記のリンクから見られます。

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

[PR] 《スマホ広告ならAMoAd》圧倒的な広告数、枠、サイズで高収益!

スポンサード リンク

Wordpress 関連書

Amazonより激選したWPオススメ関連書。

[PR] 冷え性・便秘にお悩みの方向け「ほっと熟成発酵しょうが」

サイドバー/サイドメニューの作成 TOP[WordPress Customize NOTE] ウィジェットを使わないサイドバーの作り方 [高速化]
Wordpress無料テーマ配布中!

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



スポンサード リンク

ライセンスフリー 無料素材「ばじねこ茶店」