• SIMPLEとは

  • デモ

  • マニュアル

  • アップデート

  • ダウンロード

【WordPress】記事ページの下部にウィジェットを設置する方法【コード付き】

今回は、WordPressで記事ページの下部にウィジェットを設置する方法について解説していきます。

記事の終わりのところにウィジェットを表示したい
記事下にウィジェットを置きたいけど、テーマが対応していない

という方は、本記事が参考になるはずです。

また、WordPressテーマ「SIMPLE」では、記事ページ下部にウィジェットを1ステップで設置することができます。

すぐに設置したい場合は、テーマ「SIMPLE」の利用をオススメします。

【WordPress】記事ページの下部にウィジェットを設置する方法【コード付き】

具体的な手順は、下記のとおりです。

  • 新しいウィジェットエリアを作成する
  • 記事ページ下部にコードを追加する
  • WordPress管理画面でウィジェットを設置する

順番に解説していきます。

新しいウィジェットエリアを作成する

まずは、ウィジェットエリアを作成していきます。

テーマディレクトリ直下に、「functions.php」というファイルがあるはずです。

このファイルに、↓のコードを追加します。

register_sidebar( array(
	'name' => '記事下',
	'id' => 'post-bottom',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

コードを追加した時点で、WordPress管理画面の「外観→ウィジェット」ページに、「記事下」というウィジェットエリアが追加されているはずです。

記事ページ下部にコードを追加する

次に、記事ページのphpファイル「single.php」にコードを追加して、「記事下のウィジェットエリア」に設置したウィジェットをサイトに表示させる設定をしていきます。

コードの挿入位置を確認する

まずは、テーマディレクトリ直下にある「single.php」を開いて、記事下、つまり記事本文の終わりがどこに該当するのかを確認しましょう。

・・・

//↓記事開始
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

・・・
//↓投稿の本文を出力する
<?php the_content(); ?>

・・・
//↓記事終了
<?php endwhile; ?>
<?php endif; ?>


・・・

WordPressの関数「the_content()」で投稿の本文を出力しています。

そのため、コードを追加する位置としては「the_content()より下」となります。

WordPress関数の解説は、下記の記事が参考になります。

コードを追加する

挿入する位置がわかったので、コードを追加していきます。

single.phpのthe_content()より下に、下記のコードを追加しましょう。

<?php if ( is_active_sidebar( 'post-bottom' ) ) : ?>
     <?php dynamic_sidebar( 'post-bottom' ); ?>
<?php endif; ?>

これで、サイトにウィジェットが表示されます。

WordPress管理画面でウィジェットを設置する

ここまできたら、あとはWordPress管理画面でウィジェットを設置するだけです。

具体的な手順は、以下の通り。

  • 外観 → ウィジェットに移動する
  • 記事ページ下部にウィジェットを設置する

順番に解説していきます。

外観 → ウィジェットに移動する

まずは、WordPressの管理画面にログインして「外観 → ウィジェット」に移動します。

記事ページ下部にウィジェットを設置する

「記事下」にウィジェットを設置します。

上記の例では、アーカイブウィジェットを設置しています。

記事ページ下部にアーカイブウィジェットが設置されているのがわかると思います。

以上になります。本記事を参考にして、記事下にウィジェットを設置してみてください。

WordPressテーマ「SIMPLE」

simple

「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。

RELATED POSTS