WordPressの逆引き作業メモ

このブログはWordPressで業務に使った時の自分の作業用のポイントメモです。

ウィジェットをトップページのコンテンツ管理でスニペットのように使う

WordPressウィジェットは、コンテンツをGUIで管理して画像や記事の新着などをブロック単位で管理できて便利です。

f:id:jinkosky2009:20180507221918p:plain

デフォルトではサイドバーの管理やテーマによりコンテンツの下の部分など管理できる箇所がセットされています。

自分で新たに追加するには、まずfunctions.phpに任意の名前で以下のコードを追加します。

adblock-topという名前のウィジェットをテーマtwentysixteen-childに追加します。
IDはコードから呼び出す時のIDです。
あとはコードを囲むタグと、タイトルを入力した時にタグを配列でそれぞれ指定します。最後にwidgets_initアクションに設定します。

function my_widgets_init() {
 register_sidebar( array(
  'name'          => __( 'adblock-top', 'twentysixteen-child' ), 
  'id'            => 'adblocktop',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget'  => '</aside>',
  'before_title'  => '<h1 class="widget-title">', 'after_title'   => '</h1>',
 ) );
}

add_action( 'widgets_init', 'my_widgets_init' );

 

これで、ウィジェットadblock-topが追加されます。

f:id:jinkosky2009:20180507223241p:plain

適当に画像のバナーなどをセットします。

f:id:jinkosky2009:20180507223933p:plain

 

 

 

これを任意のコードの位置に表示させます。

このテーマではtwentysixteenの子テーマにしています。

twentysixteenのindex.phpにはトップページだけで表示するコードがすでに記述されています。

<?php if ( is_home() && ! is_front_page() ) : ?>
 <header>
  <h1 class="page-title screen-reader-text">
  <?php single_post_title(); ?>
  </h1>
 </header>
<?php endif; ?>

if ( is_home() && ! is_front_page() ) :でホームかフロンページならという条件でh1を表示させています。

ではコンテンツの最後</main>の前にコードを追加します。

<?php
if (is_active_sidebar( 'adblocktop' ) ) :
dynamic_sidebar( 'adblock-top' );
endif;

?>

広告バナーがトップページの一番したに表示されます。

f:id:jinkosky2009:20180507225931p:plain

ここで時々はまる問題、さきほどのコードでわざとIDと名前を変えました。

'name'          => __( 'adblock-top', 'twentysixteen-child' ), 
 'id'            => 'adblocktop',

is_active_sidebarでチェックするときは名前でなくIDでないとダメなんです。

ここで、ずいぶん前の仕事で小一時間ミスりました。

これでウィジェットをいろいろなところで使用できます。

これだとユーザーがドラッグドロップで順番を入れ替えたり、コンテンツを追加したりできます。