WordPressのフッターに記事やカテゴリを表示させるため、ウィジェットを追加してフッターにテキストリンクを配置する方法をご紹介します。
フッターにウィジェットを配置すると、記事追加に合わせてフッターのテキストリンクが自動更新されるので、いちいち手直しをする手間が省けて便利です。
また、フッターにテキストリンクを配置すると、サイト内の回遊性やユーザビリティを高めるだけでなく、サイトの内部リンク構造を最適化してSEOを強化することにもつながります。
WordPress ウィジェットとは
WordPressのウィジェットとは、特定の機能を追加するためのパーツのようなもので、WordPressには検索やカレンダーなどの機能を持つウィジェットがあらかじめ用意されています。
ダッシュボードの左メニュー「外観」→「ウィジェット」に進むと、使用できるウィジェット一覧が表示されます。
使い方は簡単で、「利用できるウィジェット」からウィジェットをつまんで配置します。
または、ウィジェットをクリックして、位置を指定してから「ウィジェットを追加」します。
今回はフッターにウィジェット表示領域を設けて、そこに記事やカテゴリのウィジェットを設定します。以下のWordPress関数を使うと、簡単にウィジェットを追加できます。
- ウィジェットの追加 register_sidebar
- ウィジェットの呼び出し dynamic_sidebar
ウィジェットの追加 function.php
では、WordPressウィジェットを追加してみましょう。まずはダッシュボードから「外観」→「テーマの編集」へ進み、右側のテンプレートから「function.php」を開いてください。ここにウィジェットを追加するためのコードを記述します。
大抵のWordPressテーマは「function.php」内にウィジェットを表示させるための関数が記述されているので、その下に追記すればよいでしょう。今回はカテゴリと月別アーカイブを表示させるため、関数を2つ追加しました。
※ functions.php は WordPress を動作させるための重要なファイルです。変更すると WordPress が動作しなくなる可能性があるので、このコードを記述する前に functions.php をバックアップしておいてください。
register_sidebar(array( 'name' => 'フッター表示1', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'フッター表示2', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', ));
‘name’「フッター表示1」の部分はウィジェットに表示される管理用の名前です。好きな名称を付けて下さい。
‘before_widget’ と ‘after_widget’ はウィジェット表示のマークアップを指定、’before_title’ と ‘after_title’ はウィジェット管理画面で入力したタイトルをマークアップします。
「div」とCSSの組み合わせや「style」で文字色や大きさを変えたり、文字やアクセント画像を挿入することができます。
‘before_widget’ と ‘after_widget’ には＜div＞＜/div＞を入れています。ここのマークアップはデフォルトが＜li＞なので、余計な黒丸が入らないようにするためです。titleには＜h3＞を入れています。
テーマによっては、＜li＞の先頭に付く黒丸のような装飾や、余計なマークアップが入ったりします。元のCSSや表示を確認しながら、適宜’before_widget’などを変更してください。
widgetとtitleのマークアップ指定が不要であれば、下記のようにシンプルなコードでOKです。
register_sidebar(array(‘name’ => ‘フッター表示1’)); register_sidebar(array(‘name’ => ‘フッター表示2’));
このように新しいウィジェット欄が追加されていればOKです。
次に使いたいウィジェットをつまんで、右のウィジェット欄に移動させます。
フッター表示1にはカテゴリー、2にアーカイブの表示ウィジェットを追加しました。
タイトルを入力すればその通りのタイトルを表示、未入力の場合はウィジェット名が表示されます。あと、チェックボックスがカテゴリーに3つ、アーカイブに2つあります。以下は説明です。
| ドロップダウン表示 | 選択式のメニューが表示されます。項目が多すぎて縦長になる場合はチェックしましょう。 |
| 投稿数を表示 | 項目の右側に投稿数が表示されるようになります。 |
| 階層を表示 | カテゴリーのみチェック可能で、カテゴリーを階層表示してくれます。 |
ウィジェットの追加 footer.php
次に追加したウィジェットをフッターに表示させます。ダッシュボードから「外観」→「テーマの編集」へ進み、右側のテンプレートから「footer.php」を開きます。
ウィジェットを表示させたい部分に下記のコードを記述してください。
<div id="footer-widget"><?php dynamic_sidebar('フッター表示1'); ?></div>
<div id="footer-widget"><?php dynamic_sidebar('フッター表示2'); ?></div>
CSSはこんな感じです。ウィジェットが左詰めで2つ並びます。widthはテーマの幅に合わせて変更してください。
#footer-widget{
float:left;
width: 300px;
padding: 10px;
}
表示させるとこのようになります。ドロップダウン表示のカテゴリーとアーカイブに投稿数を付けてます。
あとはCSSを調整してテーマに合ったウィジェット表示にしてください。表示する列を増やして、テキストウィジェットで会社案内やプロフィールを作成したり、カレンダーや検索窓のウィジェットを追加してもいいでしょう。
フッターのデザインについては「フッターデザイン.com」が参考になります。自分でカスタマイズできる知識があれば、ぜひフッターデザインにチャレンジしてみてください。
