Step

【2023年】これからブログを始める人へおすすめの書籍

Kissy

【WordPress】記事の前後にウィジェットエリアを追加する

作成: 更新:

【WordPress】記事の前後にウィジェットエリアを追加する

この記事では記事の前後にウィジェットを追加する方法を記載します。

WordPressにはウィジェットという機能があり、Webページのパーツをドラッグアンドドロップで配置できる機能です。とても便利な機能ですが、テーマによってはウィジェットエリアがないものがあります。そのようなテーマでもカスタマイズすることで、自分で追加することができます。

ウィジェットのメリット

ウィジェットはいくつかメリットがあります。

  • ドラッグアンドドロップでパーツを気軽に追加／削除できる。
  • ドラッグでパーツの配置を変更できる。
  • 各記事で共通のパーツを配置できる。（何度も記載する必要がない）

記事前後のエリアは重要エリア

記事の前後はユーザーの目につきやすく、とても重要なエリアになります。記事前のエリアはユーザーが最初に目にするエリアであり、記事後のエリアは記事を読み終えたエリアであるため、ユーザーがアクションを取りやすいという特徴があります。多くの記事では、このエリアへ詳細ページへの誘導や購入ページへの誘導、広告に関連記事などの重要な要素が多いエリアです。

このエリアへウィジェットを追加できると、各ページで共通の重要なパーツを配置できてとても便利です。

手順

  1. function.phpに以下のコードを追加する。
/*
 * ウィジェットエリアを定義
 */
add_action('widgets_init', 'register_mywedgets');
function register_mywedgets()　{
  // 記事上部のウィジェットエリアを定義
  register_sidebar( array(
    'name' => __( '記事上部' ),
    'id' => 'post_top',
    'description' => __( '記事上部に表示されるウィジェットエリアです。' ),
    'before_title' => '<div class="widget-title">',
    'after_title' => '</div>',
    'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
    'after_widget' => '</div>'
));

  // 記事下部のウィジェットエリアを定義
  register_sidebar( array(
    'name' => __( '記事下部' ),
    'id' => 'post_bottom',
    'description' => __( '記事下部に表示されるウィジェットエリアです' ),
    'before_title' => '<div class="widget-title">',
    'after_title' => '</div>',
    'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
    'after_widget' => '</div>'
  ));
}

/*
 * ウィジェットをフィルターフックにセット
 */
add_filter('the_content','my_content');
function my_content($content) {
  if(!is_single()){
    return  $content;
  }

  $new_content = '';
  $new_content  .=  get_dynamic_sidebar('記事上部');
  $new_content  .=  $content;
  $new_content  .=  $sns_share;
  $new_content  .=  get_dynamic_sidebar('記事下部');

  return  $new_content;
}

// ウィジェットのコンテンツを取得する
function get_dynamic_sidebar($index = 1) {
  $sidebar_contents = "";
  
  ob_start();
  dynamic_sidebar($index);
  $sidebar_contents = ob_get_clean();

  return  $sidebar_contents;
}

ソースコードの解説

ウィジェットエリアの登録

add_action('widgets_init', 'register_mywedgets');ではウィジェット初期化（widgets_init）時にregister_mywedgets()を呼び出すというコードになります。

register_mywidgets()では、register_sidebar()を呼び出しウィジェットエリアを登録します。register_sidebarの各引数は以下を設定します。

  • name　…　ウィジェットの名前
  • id　…　ウィジェットのid
  • description　…　ウィジェットエリアの説明
  • before_title, after_title　…　ウィジェットタイトルの直前／直後に出力するタグ
  • before_widget, after_widget　…　ウィジェットのコンテンツの直前／直後に出力するタグ

上記までで、ウィジェットの登録は完了です。

記事の前後にウィジェットのコンテンツを挿入する

続いて、記事の前後にウィジェットのコンテンツを差し込む必要があります。以降のコードでウィジェットのコンテンツを差し込んでいきます。

add_filter('the_content','my_content');では、記事コンテンツの出力（the_content）時に、my_content()関数を呼び出すというコードになります。

my_content()には記事コンテンツが引数として$contentにわたってくるので、記事前ウィジェットのコンテンツを取得→記事コンテンツを取得→記事後ウィジェットのコンテンツを取得し、これらを１つの変数に結合し、出力せずに関数の戻り値として返します。

ここでのポイントは、ウィジェットコンテンツの取得方法です。例えば、以下のようなコードの場合、正しく動作しません。

$new_content = '';
$new_content  .=  dynamic_sidebar('記事上部');
$new_content  .=  $content;
$new_content  .=  dynamic_sidebar('記事下部');

return  $new_content;

コンテンツを出力せずに取得する

ウィジェットコンテンツはdynamic_sidebar()で取得していますが、dynamic_sidebar()は呼び出しと同時に出力しています。my_content()は出力せずに関数の戻り値としてコンテンツを返す必要があるため、正しく動作しません。

その場合は、ob_start()、ob_get_contents()、ob_end_clean()を使うと、出力せずにコンテンツのみ取得することができます。

ob_start()
dynamic_sidebar()
$widget_content = ob_get_contents();
ob_end_clean()

もしくは

ob_start()
dynamic_sidebar()
$widget_content = ob_get_clean()

ob_start()は、ob_start()以降に出力されたコンテンツを出力せずにバッファリングします。ob_get_contents()でバッファしたコンテンツを取得し、ob_end_clean()でバッファをクリアしています。これによって出力せずにコンテンツのみを取得しています。

なお、ここでは使用していませんが、phpを読み込む場合は、get_template_part()を使います。この場合もob_start()、ob_get_contents()、ob_end_clean()で対応できます。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK