WordPressでウィジェットを追加する
WordPressでウィジェットを任意の位置に挿入するには、function.phpとstyle.cssに記述を追加する。
以下は表示位置ごとのサンプルになる。
投稿本文中(最初のH2見出し手前)ウィジェットの追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | /////////////////////////////////////// // 投稿本文中ウィジェットの追加 /////////////////////////////////////// register_sidebars(1, array( 'name'=>'投稿本文中', 'id' => 'widget-in-article', 'description' => '投稿本文中に表示されるウイジェット。文中最初のH2タグの手前に表示されます。', '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>', )); /////////////////////////////////////// //H2見出しを判別する正規表現を定数にする /////////////////////////////////////// define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン /////////////////////////////////////// //本文中にH2見出しが最初に含まれている箇所を返す（含まれない場合はnullを返す） //H3-H6しか使っていない場合は、h2部分を変更してください /////////////////////////////////////// function get_h2_included_in_body( $the_content ){ if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか return $h2results[0]; } } /////////////////////////////////////// // 投稿本文中の最初のH2見出し手前にウィジェットを追加する処理 /////////////////////////////////////// add_filter( 'the_content', function ($the_content) { if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき ) { //広告（AdSense）タグを記入 ob_start();//バッファリング dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示 $ad_template = ob_get_clean(); $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得 if ( $h2result ) {//H2見出しが本文中にある場合のみ //最初のH2の手前に広告を挿入（最初のH2を置換） $count = 1; $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, $count); } } return $the_content; }); |
1 2 3 4 | /* 投稿本文中ウィジェットのスタイル */ .widget-in-article { text-align: center; } |
投稿本文下ウィジェットの追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /////////////////////////////////////// // 投稿本文下ウィジェットの追加 /////////////////////////////////////// register_sidebars(1, array( 'name'=>'投稿本文下', 'id' => 'widget-bottom-article', 'description' => '投稿本文下に表示されるウイジェット。投稿本文の後に表示されます。', 'before_widget' => '<div id="%1$s" class="widget-bottom-article %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-bottom-article-title">', 'after_title' => '</div>', )); /////////////////////////////////////// // 投稿本文下にウィジェットを追加する処理 /////////////////////////////////////// add_filter( 'the_content', function ($the_content) { if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする is_active_sidebar( 'widget-bottom-article' ) //ウィジェットが設定されているとき ) { //広告（AdSense）タグを記入 ob_start();//バッファリング dynamic_sidebar( 'widget-bottom-article' );//本文下ウィジェットの表示 $ad_template = ob_get_clean(); $the_content .= $ad_template; } return $the_content; }); |
1 2 3 4 | /* 投稿本文下ウィジェットのスタイル */ .widget-bottom-article { text-align: center; } |
フッター上ウィジェットの追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /////////////////////////////////////// // フッター上ウィジェットの追加 /////////////////////////////////////// register_sidebars(1, array( 'name'=>'フッター上', 'id' => 'widget-top-footer', 'description' => 'フッター上に表示されるウイジェット。', 'before_widget' => '<div id="%1$s" class="widget-top-footer %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-top-footer-title">', 'after_title' => '</div>', )); /////////////////////////////////////// // フッター上にウィジェットを追加する処理 /////////////////////////////////////// add_action( 'get_footer', function () { if ( is_active_sidebar( 'widget-top-footer' ) //ウィジェットが設定されているとき ) { //広告（AdSense）タグを記入 ob_start();//バッファリング dynamic_sidebar( 'widget-top-footer' );//フッター上ウィジェットの表示 echo ob_get_clean(); } }); |
1 2 3 4 | /* フッター上ウィジェットのスタイル */ .widget-top-footer { text-align: center; } |
ヘッダー下ウィジェットの追加
1 2 3 4 | <?php include(TEMPLATEPATH . '/header.php'); dynamic_sidebar('widget-bottom-header'); ?> |
1 2 3 4 | /* ヘッダー下ウィジェットのスタイル */ .widget-bottom-header { text-align: center; } |
