結構カンタン！ワードプレスのウィジェットエリアを追加する方法

みなさん、こんにちは！ゲームが大好きなデザイナーです。

今回は、ワードプレスのウィジェットエリアを追加する方法をご紹介していきたいと思います。

ワードプレスのウィジェットエリアとは？

ウィジェットエリアとは、例えばブログのサイドバーを簡単に編集することができる機能です。ウィジェット（機能）を埋め込むためのエリア（サイドバーなど）のことを指します。

ワードプレスを使ったことがある人ならHTMLの知識がなくても、自分で好きなコンテンツを追加することができるので便利だと感じる方も多いでしょう。

このウィジェットエリアはブログのサイドバーに限らず、ヘッダーやフッターなどサイトの好きなところに配置することが出来ます。うまく使えば作業の効率化にもなりますし、クライアント側でテキストの編集ができるようになります。

ウィジェットエリアを追加するメリット・デメリット

メリット

ウィジェットエリアを自分で設定することが出来れば、部分的に変更したい箇所をワードプレスの管理画面から変更することができるようになります。

自分でよく変更する箇所をウィジェットに設定しておくと、効率的にサイト管理ができるようになるかもしれません。

また、ブログは編集できるけどHTMLの知識がない方がサイトの編集を行う場合などにもウィジェットエリアの追加は有効です。

デメリット

ウィジェットエリアを追加すること自体に、大きなデメリットはありません。

ただし、ウィジェットエリアを設置しすぎてしまうと今度は管理画面のウィジェットの数が増えてきて管理画面が見にくくなってしまいます。

サイト制作をする段階でどこをウィジェットエリアに設定するのかを設計しておくと良いかもしれません。ウィジェットエリアを設置しすぎて管理がややこしくなっている方は、ウィジェットエリアを削除してみるのも良いかもしれません。

今回の記事を読めば、ウィジェットエリアの追加・削除ができるようになるはずです。

ウィジェットエリアを追加する手順

手順1．functions.phpにコードをコピペ

ほとんどのワードプレステーマには既にウィジェットが実装されているパターンが多いです。functions.phpの中にある「register_sidebar」という文字列を検索してみましょう。

これを検索すると下記のようなコードが見つかるはずです。テーマによっては、書き方が違うかもしれません。

[codebox title="コード"]

register_sidebar(array(
'id' => 'test_id（好きな半角英数字を入力）',
'name' => 'テスト（好きな名前を入力）',
'description' => 'ここに説明を記入',
'before_widget' => '<div class="test">',
'after_widget' => '</div>',
'before_title' => '<h3 class="test">',
'after_title' => '</h3>',
));

[/codebox]

上記をコピペしても良いですし、既にあるコードを複製しても大丈夫です。一旦入力が完了したら、保存してみましょう。

ウィジェットを開くと「テスト」というウィジェットエリアが作成されたと思います。

しかし、このままではサイト上にウィジェットを表示することはできません。ウィジェットを出力する場所を設定していきましょう。

手順2．表示したい場所にコードをコピペ

下記のコードを表示させたい場所（index.phpなど）に挿入することで、ウィジェットを出力することができます。ただし、デザインの調整はCSSで行う必要があります。
[codebox title="コード"]

<?php if(is_active_sidebar('test_id')) dynamic_sidebar( 'test_id' ); ?>

[/codebox]
「test_id」は手順1で設定したidを、かっこの中に入れてください。

以上で、ウィジェットエリアの設定は完了です。

まとめ

いかがでしたか？

ウィジェットエリアをうまく使いこなすことができれば、サイト上でよく変更する部分をワードプレス上で管理することができるようになります。クライアント用にWEBサイトを制作する場合にも役立つはずです。

弊社では細かいブログの編集なども無料で相談できますので、お気軽にお問い合わせください。