WordPressウィジェット エリアの追加・表示・条件分岐の方法

ウィジェットエリアの追加・表示・条件分岐表示

今更だけど、WordPressウィジェット・ウィジェットエリアって何?

ウィジェットエリアはウィジェットを使うために、あらかじめ用意されている場所を指し、多くのテーマでサイドバーやフッターに用意されているものです。

そして、ウィジェットエリア内で使用できる、WordPressのサイドバーや、フッターにコンテンツや機能を追加する時に使えるように用意されている、自己完結型の機能やコードをウィジェットと言います。
Twenty Fifteenのウィジェット管理画面

もともとウィジェットはユーザーに、WordPress テーマのデザインや構造を管理するシンプルで使いやすい方法を提供する目的で設計されました。
–引用:http://wpdocs.osdn.jp/WordPress_%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88

とされているように、WordPressサイトの管理や更新などを効率化、使いやすくするための機能です。

一方、ブログの記事の上や下には、SNSのボタン、コメント欄、関連記事の表示、CTAの記載など、たくさんのことを表示させたくなるものですが、

  • プラグインだと思った通りの場所に表示されない
  • カスタマイズしようとすると、どこにコードを貼れば良いのかがいちいちわかりづらくて難しい

といった事が良くある場合、投稿ページ内にウィジェットエリアを予め追加しておけば、phpのファイルを見るのはエリアを設定する1度のみ。効率アップになります。

というわけで、今回はウィジェットエリアの追加・表示・条件分岐しての表示方法について書いてみました。

前の記事「WordPress Popular Posts応用|人気記事の記事上表示・条件分岐」でも書きましたが、

記事上スペースに最新投稿や人気記事、関連記事のリストを載せるとサイト回遊率がアップするらしい

・・という噂を受けて、記事上用を中心に書いています。

register sidebarを使ってウィジェットエリアを追加する

WordPressの関数、register sidebarを使い、functions.phpに以下の様なコードを追加して、新しいウィジェットを登録すれば、簡単にウィジェットエリアをテーマに追加できます。

ウィジェットエリアを追加するコード

////新規ウィジェットエリアを追加
register_sidebar(array(
     'name' => 'post top widget' ,
     'id' => 'post top widget' ,
     'description' => 'Widgets in this area will be shown on the article top.',
     'before_widget' => '<div class="post-top-widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));

上記コードの説明

  • name : ウィジェットエリア名
    この名前がダッシュボードのウィジェット画面で表示されるので、判別しやすい名前をお好みでつけてあげてください。
  • id : ウィジェットエリアid
  • description : ウィジェットエリアの説明
  • before_widget :  ウィジェットエリアの開始HTMLタグ。class指定をする場合はここで。
    開始タグの中にclass指定を含めることで、CSSの設定ができます。
  • after_widget :  ウィジェットエリアの終了HTMLタグ
  • before_title : このウィジェットエリア内でのウィジェットのタイトルの開始HTMLタグ
  • after_title : このウィジェットエリア内でのウィジェットのタイトルの終了HTMLタグ

※classのパラメータもあるのですが、指定してもうまくいきませんでしたので、開始タグにclassを含めてあります。

※タイトルのHTMLタグはウィジェットを入れた時のウィジェットのタイトルに適用されます。h1タグではなく、h2以下のタグにして、HTML構文的にも正しくしておきましょう。

関数、register sidebarについて、より詳しく知りたい方は、以下のページを参考にしてみて下さい。

関数リファレンス/register sidebar
http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar

dynamic sidebarで登録したウィジェットエリアを表示させる

上記例のサイドバーを表示させたい場所に以下の様なコードを入れます。

<?php if ( is_single() && ! is home() ) : ?>
<?php dynamic_sidebar( 'post top widget' ); ?>
<?php endif ; ?>

上のコードでは、”投稿記事でかつ、ブログのトップページでない場合”という条件分岐をつけています。

記事上にウィジェットを追加する

このコードを記事上に表示される場所に貼り付けます。

デフォルトテーマ、Twenty Twelve、Twenty Thirteen、Twenty Fourteen、Twenty Fifteenの場合は content.php 内の



<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
>>ここに入れる<<

のすぐ下に設置すれば、デフォルトの状態で使用している場合、ウィジェットが投稿記事ページのサムネイル(アイキャッチ画像)の上に表示されます。
※>>ここに入れる<< はすべて消去してください^^;

記事下にウィジェットを追加する場合

デフォルトテーマ、Twenty Twelve、Twenty Thirteen、Twenty Fourteen、Twenty Fifteenの場合で、記事下に表示させたい場合は、同じく content.php 内の下の箇所に入れれば記事直下となります。

</div>
<!-- .entry-content -->
<?php endif; ?>
>>ここに入れる<<
<footer class="entry-meta">

※ただし、プラグインなどで記事下表示させているものがある場合は、そちらが優先されて記事のすぐ下に表示され、追加したウィジェットはその下に表示されます。

追加したウィジェットを使ってみる

ではウィジェット管理画面から、ウィジェットを追加してみましょう。

ダッシュボードの外観→ウィジェットをクリックします。
2012追加後のウィジェット管理画面

新しいウィジェットエリアが追加されているのが確認できます。

ここに左側の利用できるウィジェットから、ドラッグ&ドロップでウィジェットを追加してみます。
新規ウィジェットエリアに最新投稿ウィジェットを追加

投稿の上に新しいウィジェットが表示されているのが確認できます。
ウィジェットの確認

CSSで見映えを整える

これまでの手順で新しいウィジェットエリアを投稿ページの記事上に表示させる準備はできましたが、このままでは見にくい状態ですので、以下の様なCSSをスタイルシートに追加します。

今回はTwenty Twelve上でのCSSですので、他のテーマでは通用しないかもしれませんが、ご参考までに^^;

1カラムの場合

.post-top-widget {
    margin-bottom: 24px;/*ウィジェット下の余白*/
    display: block;
    border: 2px dotted #ccc;/*ウィジェット周囲の枠線の指定 太さ 線の形状 線の色*/
    padding: 16px;/*中のコンテンツと周囲の線との余白*/
    line-height: 24px;/*文字列の行の高さ*/
}

※borderは、直線:solid、点線:dotted、破線:dashed などから選べます。
Twenty Twelveじゃない、もっとデザインに凝りたい、という方は、CSSに挑戦してみて下さい。

参考になるページ:
HTMLクイックリファレンス・border-スタイルシートリファレンスページhttp://www.htmq.com/style/border.shtml

上のCSSを適用した場合、Twenty Twelveでのウィジェットの表示は以下のようになります。
CSS適用後のウィジェット

2カラムの場合

.post-top-widget {
    margin-bottom: 24px;
    display: block;
    padding: 16px;
    line-height: 24px;
    max-width: 280px;
    float: left;
}

このCSSを適用した場合、Twenty Twelveでのウィジェットの表示は以下のようになります。
ウィジェットを2つ並べるイメージ

ウィジェットの表示・非表示を条件分岐させる

記事上スペースに最新投稿や人気記事のリストを載せるとサイト回遊率がアップするらしい・・という話から、投稿記事上のスペースにウィジェットを表示させる手順を説明してきました。

が、スマートフォンユーザーさんにとっては、ここにあまり長々と読みたい記事以外のものを載せられるとうざい → かえって離脱率を上げる結果を招くという事にもなりかねません。

ウィジェットエリアを追加した投稿画面をスマホ表示テスト画面で見ると、下の様になり・・記事タイトルさえファーストショットで見えないというのは、どうかな~?と思います。
記事上にウィジェット有のスマートフォン表示

そこで、記事上ウィジェットには、モバイルユーザーであった場合このウィジェットを表示させない条件分岐設定をしておきましょう。

先にcontent.phpに入力した、ウィジェットを呼び出す下のコードには、既に「投稿ページだったら」=if ( is_single() && ! is home()) という条件がついています。

<?php if ( is_single() && ! is home() ) : ?>
<?php dynamic_sidebar( 'post top widget' ); ?>
<?php endif ; ?> 

これに、閲覧ユーザーがモバイルで見ているかどうかを判定する、wp_is_mobile() に『否定』の 『!』をつけて条件に付け加えます。

<?php if ( is_single() && ! is home() && ! wp_is_mobile() ) : ?>
<?php dynamic_sidebar( 'post top widget' ); ?>
<?php endif ; ?> 

※ちなみに 「&&」 は 「かつ」です。

モバイルでの表示は以下の様に変わります。
記事上にウィジェット無しのスマートフォン表示

また、プラグイン、Jetpackの『ウィジェット表示管理機能』を使うと、カテゴリ別やタグ別に表示・非表示を変更できます。

例えば、表示中の記事のカテゴリ別に、表示させるウィジェットを切り替えられ、最適な表示を工夫することが簡単にできますので、試してみて下さい。

使い方などについての詳細は、「WordPressウィジェット表示を操れ!Jetpackのウィジェット表示管理」にて書いておりますので、ご参考になれば、と思います(^^)

ではでは、今日はこの辺で。
「WordPressウィジェット エリアの追加・表示・条件分岐の方法」でした。

お役に立ちましたら、シェアなどしていただけるとうれしいです!

Published:2015/10/02

Written by