ビッグバナー広告

WordPressのフッターにウィジェットを追加して記事やカテゴリを表示させる

WordPress フッターに記事やカテゴリを表示

WordPressのフッターに記事やカテゴリを表示させるため、ウィジェットを追加してフッターにテキストリンクを配置する方法をご紹介します。

フッターにウィジェットを配置すれば、記事追加に合わせてフッターのテキストリンクが自動更新されるので、いちいち手直しをする手間が省けて便利です。

また、フッターにテキストリンクを配置すると、サイト内の回遊性やユーザビリティを高めるだけでなく、サイトの内部リンク構造を最適化してSEOを強化することにもつながります。

スポンサーリンク
PC用

WordPress ウィジェットとは

WordPressのウィジェットとは、特定の機能を追加するためのパーツのようなもので、WordPressには検索やカレンダーなどの機能を持つウィジェットがあらかじめ用意されています。ダッシュボードのメニュー「外観」→「ウィジェット」で使用できるウィジェット一覧が表示されます。

使い方は簡単、「利用できるウィジェット」から該当のウィジェットをつまんで配置するだけです。

今回はフッターにウィジェット表示領域を設けて、そこに記事やカテゴリのウィジェットを設定します。以下のWordPress関数を使うと、簡単にウィジェットを追加できます。

  • ウィジェットの追加 register_sidebar
  • ウィジェットの呼び出し dynamic_sidebar

WordPress ウィジェットの追加 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です。

WordPress ウィジェット追加

次に使いたいウィジェットをつまんで、右のウィジェット欄に移動させます。

WordPress ウィジェット追加

フッター表示1にはカテゴリー、2にアーカイブの表示ウィジェットを追加しました。

WordPress ウィジェット追加

タイトルを入力すればその通りのタイトルを表示、未入力の場合はウィジェット名が表示されます。あと、チェックボックスがカテゴリーに3つ、アーカイブに2つあります。以下は説明です。

ドロップダウン表示 選択式のメニューが表示されます。項目が多すぎて縦長になる場合はチェックしましょう。
投稿数を表示 項目の右側に投稿数が表示されるようになります。
階層を表示 カテゴリーのみチェック可能で、カテゴリーを階層表示してくれます。

WordPress ウィジェットの追加 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;
}

表示させるとこのようになります。ドロップダウン表示のカテゴリーとアーカイブに投稿数を付けてます。

WordPress ウィジェット ドロップダウン表示

あとはCSSを調整してテーマに合ったウィジェット表示にしてください。表示する列を増やして、テキストウィジェットで会社案内やプロフィールを作成したり、カレンダーや検索窓のウィジェットを追加してもいいでしょう。

フッターのデザインについては「フッターデザイン.com」が参考になります。自分でカスタマイズできる知識があれば、ぜひフッターデザインにチャレンジしてみてください。

http://footer-design.com/list.html

登録デザイン一覧|フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

スポンサーリンク
PC用
PC用

フォローする