WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

独自のウィジェットエリアを追加する方法

公開日:2018(平成30)年12月15日/最終更新日:

独自のウィジェットエリアを追加する方法



最近お客様のご依頼に追われてちょっと疲れ気味。なかなか記事の追加ができなくなっていますが、気合を入れていきます。

ウィジェットって本当に便利ですよね?何でもかんでも挿入できて、順番を入れ替えられて・・ザ・WordPressっていう機能の1つです。

ウィジェットを入れられる場所のことをウィジェットエリアといい、このウィジェットエリアはテーマによって場所や表示する条件などが制御されています。

つまり知識がない場合にはよりウィジェットエリアの多いものを選びがちになるってことなんですね。WordPressをインストールすると入っているテーマはこれらを自身で設定していくことが前提になっているベーステーマなのでサイドバーのエリアだけって状態になっています。

本文のタイトル下、本文の下、フッターなどなどこれ以外にも入れたい場所があるのに・・・ちょっと残念です。

今回はタイトルでも書いている通り、自身で追加したい場所へ独自のウィジェットエリアを設ける方法です。

ウィジェットエリアを作ろう!!

結構敷居が高そうに見えるウィジェットエリアの作成、実は簡単に作れるんです。ここでは1つ追加する方法を紹介しますね。

方法は簡単、下のコードをテーマのfunctions.php末尾へ追加するだけです

add_action(
'widgets_init',
function(){
register_sidebar(array(
'id' => 'widget_under_content',
'name' => 'ウィジェットの名前',
'description' => 'ウィジェットの説明',
));
}
);

※functions.phpへの追記に失敗するとWordPressのバージョンによっては管理画面が真っ白になって操作できなくなる可能性がありますのでFTPでバックアップを取るなりしてもしもに備えるようにしてください

コードの解説

簡単に言うとregister_sidebarというWordPress独自の関数を使って「ウィジェットエリアを追加してね!」としています

中にある「widget_under_content」というのはそのウィジェット固有の名前(id)なので適宜変更してください

「ウィジェットの名前」と「ウィジェットの説明」は管理画面から「外観」→「ウィジェット」で画面を開いたときに表示される名前や説明になりますから自身で分かるようにしておけばいいでしょう。

ウィジェットエリアの作成方法についてはウィジェットエリアを追加する方法のページでとってもわかりやすく紹介されていますのでそちらもぜひ参考になさってください。

エリアができたら適当なウィジェットを追加しておきましょう(次の項目で表示設定をしたときにすぐ確認ができるようにするため)。

作成したウィジェットを表示させるようにしよう

テーマの編集なんてしたことがない・・・という方にはちょっと難解かも知れません。

WordPressのテーマは大きく

  1. サイトタイトルやメニューを表示するヘッダーエリア(テーマ内ではheader.phpがそれにあたります)
  2. サイト本文のエリア(テーマ内ではpage.phpやsingle.phpが標準的なファイル名です)
  3. サイドバーのエリア(テーマ内ではsidebar.phpが一般的です)
  4. フッターエリア(テーマ内ではfooter.phpが一般的です)

に分かれています。この中のどこに先ほど作ったウィジェットエリアを表示させるのかでまずは判断します。今回は本文の下に挿入する前提で解説します。

管理画面から「外観」→「テーマ編集」を開いてください(子テーマを使っている場合には親テーマを選択します)。

試しに「single.php」を開いてみましょう。なんだか怖いコードがたくさん書かれてますね。

テーマファイルの中は

<div>...</div>

というタグの間にいろいろなコンテンツが入っていますこれが1つの部品の塊になります。

これがAの部品の中にBとCの部品があって・・・という風に多数折り重なっていつものページが表示されるようになっています。

そしてよーーく見ると、表示されるのと同じような文字が入ってたりします。それをヒントに「この辺の位置かな?」と当たりを付けてください。

ここに入れたらどうなるだろう・・・という場所が決まったら改行して隙間を空けて以下のコードを追記してみてください

<p>ここに何かが表示されますよ</p>

そして更新したら一度サイトの画面を開いてみてください。「single.php」は投稿を表示するためのファイルなので、投稿を1つ表示してみてください

すると・・・どこかに「ここに何かが表示されますよ」という文字列が出てくるはず・・・。

つまり「ここに何かが表示されますよ」の代わりにウィジェットエリアを挿入するコードを入れればもうウィジェットエリアは完成!!というわけなんです。テーマによってファイル内の記述はさまざまですから、自分のテーマでないものを参考にコピペするよりもご自身でこうしてテストした方がより確実に場所を特定することができます。

それではいい場所が見つかったら

<p>ここに何かが表示されますよ</p>

の代わりに以下のコードをコピペしましょう

<?php //ウィジェットの追加ここから ?>

<aside>
<?php if(is_active_sidebar('widget_under_content')) : ?>
<ul id="m_undercontent_widget">
<?php dynamic_sidebar('widget_under_content'); ?>
</ul>
<?php endif; ?>
</aside>

<?php //ウィジェットの追加ここまで ?>

保存したら再び入れた部分のあるページを表示してみてください(single.phpの場合は何か投稿を表示してみてください)

・・・ね、先ほど設定しておいたウィジェットの内容が表示されますよね?たったこれだけでオリジナルのウィジェットエリアが完成します。

注意点としては前の項でfunctions.phpへ追記したときのウィジェットidとこのコードのウィジェットidが一致してること。例では両方「widget_under_content」となっているのが確認いただけると思います。

それから前述したように

<div>...</div>

が折り重なるようになっていますから、入れる場所によっては幅が狭くなったりして思う場所ではなかった・・・という場合がありますから、誤って関係ないコード部分を移動しないように

<?php //ウィジェットの追加ここから ?>

<aside>
<?php if(is_active_sidebar('widget_under_content')) : ?>
<ul id="m_undercontent_widget">
<?php dynamic_sidebar('widget_under_content'); ?>
</ul>
<?php endif; ?>
</aside>

<?php //ウィジェットの追加ここまで ?>

だけを移動させて調整しましょう(そのために頭と末尾にここから、ここまでというコメントを入れてます)。


簡単に書かせていただきましたが、基本的にウィジェットエリアを追加する方法としてはこれですべてなんです。

今まで必死に「いい場所にウィジェットエリアがあるテーマ・・・」と探されていた方からしたら青天の霹靂ですよね?これができればどんなテーマでも思うようにカスタマイズできると思います。

おまけ モバイルの時だけ表示されるようにする

ついでなのでちょっと条件を追加する方法を紹介しておきます。スマホなどのモバイル端末でのみ表示されるようにする方法です。

上の基本的な設置方法ができるようになってからチャレンジしてくださいね。

WordPressはphpというプログラム言語が使われていて、条件分岐というのが使えるようになっています。つまり「もしも〇〇だったら・・・そうでなかったら・・・」ということが制御できるようになってるんです。

この条件分岐を先ほどテーマ内に挿入したコードへ追加します。出来上がったものがこれ

<?php //モバイル用本文下ウィジェットの追加ここから ?>

<?php if ( wp_is_mobile() ) : ?>

<aside>
<?php if(is_active_sidebar('widget_under_content')) : ?>
<ul id="m_undercontent_widget">
<?php dynamic_sidebar('widget_under_content'); ?>
</ul>
<?php endif; ?>
</aside>

<?php else: ?>
<?php endif; ?>

<?php //モバイル用本文下ウィジェットの追加ここまで ?>

よーく見比べると・・・お分かりになるかと思います。

新たに

<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php endif; ?>

という3行が追加されてますね。

これは1行目の

<?php if ( wp_is_mobile() ) : ?>

で、もしもアクセスされたのがモバイル端末だったら・・・が書かれていてその下にモバイルの時に表示されるもの(今回の場合はウィジェットエリア)が書かれ、その下に

<?php else: ?>

という「モバイル端末でなかったら・・」が書かれています(今回の場合はモバイルでなかったら何も表示しないので空にしてあります)

そして最後に

<?php endif; ?>

で「もしも・・・の内容はここで終わりですよ!」と閉じてます。

もしもモバイルだったら・・を判断させるために最初の行で書いてある「wp_is_mobile」という関数についてはその他にもいろいろなパターンがありますから、WordPressの公式ページなどを見ていろいろチャレンジしてください。