好きな場所にウィジェットエリアを自作する方法【WordPress】

この記事では、Wordpressのウィジェットエリアを決められた場所だけではなく、自分の好きな場所に自作する方法を解説します。

WordPressの非常に便利な機能「ウィジェット」は、「カテゴリー」や「最新記事」など様々なコンテンツを簡単に設置できます。文章やコードなどを記述して、独自のコンテンツを配置することもできます。

ところが、配置できる場所がテーマによって決まっていて、好きな場所に自由に配置することができません。

taks

ここにウィジェットがあったら良かったのなぁ・・・なんとかならない？

この記事ではそんな悩みを解決するべく、新規でウィジェットエリアを作成し、好きな場所に配置する方法を解説します。

自作ウィジェットエリアの作り方

WordPressに用意されているウィジェット操作画面に、もともとあるウィジェットエリアと同じように操作することができる自作のウィジェットエリアを作成します。

自作のウィジェットエリアの作成は、「テーマのための関数（functions.php）」にコードを記述することで作ることができます。

ここではHeaderメニュー下に情報テロップを表示するエリアをつくる例を紹介します。

/** ウィジェットエリアの追加 **/
// header下情報テロップ

register_sidebar(array(
'name'=>'header下情報テロップ',
'id' => 'header_info',
'before_widget' => '<div class="header-info">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

/** ウィジェットエリアの追加ここまで **/

ウィジェットエリアを確保するコード「register_sidebar(array( ここに内容 ));」の中に必要な情報を記入していきます。

’name’ の欄には、このウィジェットの名前を入力します。ここで入力した名前がWordpress のウィジェット設定画面に表示されます。

’id’ の欄には、このウィジェットを呼び出すための名前を入力します。ウィジェットを配置したい場所に記述するコードから、この’id’を指定して呼び出します。

’before_widget’ の欄には、このウィジェットに入れる内容の直前に自動挿入したいhtmlタグを入力します。ここでclass指定をしておくと、cssなどでデザインするときに個別指定できるようになります。

’after_widget’ の欄には、’before_widget’ で入力したhtmlタグの綴じタグを入れます。

’before_title’ の欄には、ウィジェットタイトルの前に自動挿入されるhtmlタグを入力します。

タイトル欄を使わなければ何も表示はされませんが、一応ほかのウィジェットと同じタグを入れておくと良いでしょう。

’after_title’ の欄には、’before_title’ で入力したhtmlタグの綴じタグを入れます。

以上で、自作のウィジェットエリアが作成できました。この段階でウィジェット設定画面には、自作ウィジェットエリアが表示されているはずです。

好きな場所に配置する方法

作成した自作のウィジェットエリアを任意の場所に配置します。

配置するためのコードは、以下の通り。

<?php dynamic_sidebar('ここにfunctions.phpに入力した’id’を記述'); ?>

先ほど作成したfunctions.phpのコードを呼び出すには、
<?php dynamic_sidebar('header_info'); ?>
と記入します。

このコードを配置したい場所に記述します。今回の例では、ヘッダーの下、PC版デザインのグローバルメニュー下に配置します。

私が使っているWordpressテーマ「Simplicity2」では、「Header.php」のグローバルメニューコードの下に記述します。

コメントアウトで内容を書いておくと、後で見たときにわかりやすくなりますね。

ウィジェットエリアの作成は簡単にできますが、配置場所を探すにはWordpressやコードの知識などが少し必要です。

【WordPress】スマホとPCで表示を条件分岐させる方法【PHP】

この記事では、WordpressのPHPファイルの中で、スマホとPCをブラウザのユーザーエージェント情報から判別して、それぞれ別の表示内容や処理をおこなう、条件分岐の方法をご紹介します。カスタマイザーやウィジェットなどが用意されていないカス

weblog10.com

WordPressウィジェットのカスタムHTMLが保存できないときの対処法

この記事では、Wordpressをカスタマイズ設定するときに便利なウィジェット「カスタムHTML」が保存できないときの対処法をご紹介します。アドセンスなどのコードを「テキストウィジェット」に保存しようとすると、「カスタムHTMLウィジェット

weblog10.com