WordPress ショートコードで好きな場所にウィジェットを配置する

WordPressのテーマにはウィジェットエリアが用意されています。

ウィジェットエリアに配置したウィジェットは常に表示されてしまいますが、好きな時に好きな位置に表示させられたら便利だと思います。

そこで、この記事ではウィジェットエリアをショートコードでダイナミックに配置する方法について説明します。

この記事で分かること

ウィジェットエリアをショートコードでダイナミックに配置する
1. コードの説明
まとめ

ウィジェットエリアをショートコードでダイナミックに配置する

コードの説明

3つの部分で構成されている。

新規にウィジェットの定義
ウィジェットを実際に配置するコード
そのショートコードの定義

ウィジットエリアは管理画面にいつでも表示されているが、ウィジェットが実際に配置されるかどうかはショートコードが呼び出されるかどうかで決まる。

追加するウィジェットの定義

///////////////////////////////////////
// 投稿本文中ウィジェットの追加
///////////////////////////////////////
register_sidebars(1,
array(
'name'=>'投稿本文中1',
'id' => 'widget-in-article1',
'description' => '投稿本文中の好きな位置に表示できるウィジェット。[set_my_ads1]',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
register_sidebars(1,
array(
'name'=>'投稿本文中2',
'id' => 'widget-in-article2',
'description' => '投稿本文中の好きな位置に表示できるウィジェット。[set_my_ads2]',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
register_sidebars(1,
array(
'name'=>'投稿本文中3',
'id' => 'widget-in-article3',
'description' => '投稿本文中の好きな位置に表示できるウィジェット。[set_my_ads3]',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
register_sidebars(1,
array(
'name'=>'投稿本文中4',
'id' => 'widget-in-article4',
'description' => '投稿本文中の好きな位置に表示できるウィジェット。[set_my_ads4]',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
register_sidebars(1,
array(
'name'=>'投稿本文中5',
'id' => 'widget-in-article5',
'description' => '投稿本文中の好きな位置に表示できるウィジェット。[set_my_ads5]',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));

配置するショートコードの定義

//投稿本文などにダイナミックに配置できるウィジット用のshortcode
add_shortcode('set_my_ads1', 'add_widget_in_post1');
add_shortcode('set_my_ads2', 'add_widget_in_post2');
add_shortcode('set_my_ads3', 'add_widget_in_post3');
add_shortcode('set_my_ads4', 'add_widget_in_post4');
add_shortcode('set_my_ads5', 'add_widget_in_post5');

ショートコードで呼び出す関数の定義

やってることはとてもシンプル。

ウィジェットが定義されていたら、ウィジェットを配置する。

function add_widget_in_post1() {
if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
is_active_sidebar( 'widget-in-article1' ) //ウィジェットが設定されているとき
) {
dynamic_sidebar( 'widget-in-article1' );//本文中ウィジェットの表示
}
}
function add_widget_in_post2() {
if ( is_active_sidebar( 'widget-in-article2' ) //ウィジェットが設定されているとき
) {
dynamic_sidebar( 'widget-in-article2' );//本文中ウィジェットの表示
}
}
function add_widget_in_post3() {
if ( is_active_sidebar( 'widget-in-article3' ) //ウィジェットが設定されているとき
) {
dynamic_sidebar( 'widget-in-article3' );//本文中ウィジェットの表示
}
}
function add_widget_in_post4() {
if ( is_active_sidebar( 'widget-in-article4' ) //ウィジェットが設定されているとき
) {
dynamic_sidebar( 'widget-in-article4' );//本文中ウィジェットの表示
}
}
function add_widget_in_post5() {
if ( is_active_sidebar( 'widget-in-article5' ) //ウィジェットが設定されているとき
) {
dynamic_sidebar( 'widget-in-article5' );//本文中ウィジェットの表示
}
}