WordPressテーマにウィジェットエリアを追加する方法

WordPressの便利な機能の一つ【ウィジェット】
カレンダーやアーカイブやタグクラウドなどを簡単に表示させることができ、このブログでも紹介しているプラグインを入れて自分好みにカスタマイズしたりととても便利なウィジェットの追加方法などをまとめてみました。

functions.php

functions.phpに記述するコードは以下になります。
外観 >> テーマ編集からでも行えます。

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'サイドバー',
'id' => 'sidebar',
'description' => 'サイドバーに表示されるウィジェットです。',
'before_widget' => '<div class="side-widget-area">',
'after_widget' => '</div>',
'before_title' => '<div class="side-widget-title">',
'after_title' => '</div>'
));
}
name ウィジェット名
id ウィジェットID
description ウィジェットの説明
before_widget ウィジェットの始まりタグ
after_widget ウィジェットの終わりのタグ
before_title ウィジェットタイトルの始まりのタグ
after_title ウィジェットタイトルの終わりのタグ

後々見た時に管理しやすいようにご自身でわかりやすく上記項目は任意のものに変更してください。

複数設置

ウィジェットを複数設置する場合は以下のようになります。

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'サイドバー',
'id' => 'sidebar',
'description' => 'サイドバーに表示されるウィジェットです。',
'before_widget' => '<div class="side-widget-area">',
'after_widget' => '</div>',
'before_title' => '<div class="side-widget-title">',
'after_title' => '</div>'
));
//2つ目のウィジェット
register_sidebar(array(
'name' => '2つ目のサイドバー',
'id' => 'sidebar2',
'before_widget' => '<div class="side2-widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}

上記でわかる通り12行目〜19行目のregister_sidebar(array( ~ ));がセットになっている形です。

テーマファイル

上記のウィジェットIDを含めた以下のコードをテーマファイル(single.phpやindex.phpなど)の表示させたい位置に記述します。

<?php dynamic_sidebar('sidebar'); ?>

2つ目のウィジェットの場合だと以下のようになります。

<?php dynamic_sidebar('sidebar2'); ?>

dynamic_sidebar(‘ウィジェットID’);が必要になってきます。

ウィジェット

外観 >> ウィジェットに移ると上記で追加したウィジェットエリアが表示されます。
widget_1

表示させたいウィジェットをドラッグアンドドロップしたら完成です。
widget_2

 

WordPressテーマにウィジェットエリアを追加する方法

  • LATEST
  • RELATED
  • POPULAR