好きな場所にウィジェットエリアを自作する方法【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やコードの知識などが少し必要です。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする