WordPressテーマ「ADELLE」でウィジェットエリアを追加する方法

2016-02-122017-08-14Web制作

こんにちは、とみーです。

WordPressのウィジェットって本当に便利です。色々な機能を自分の好きなように配置できるなんて！

でもこのADELLEというテーマのウィジェットはサイドバーとインスタグラム用しかないんです。
もっと色々なところに配置したいです。
そもそもインスタグラムやってないので使い方がよくわかりません。。。

というわけで、ウィジェットエリアを追加してみました。

※システムをいじりますので自己責任でお願いします。

Adelle: テーマのための関数 (functions.php)

一番下にこのようなコードがあります。

/// ==================================================================
// Widget - Sidebar
// ==================================================================
function adelle_widgets_init() {
  register_sidebar(array(
    'name'          => __( 'Right Widget', 'adelle-theme' ),
    'id'            => 'right-widget',
    'description'   => 'Right side widget area',
    'before_widget' => '<article id="%1$s" class="side-widget %2$s">',
    'after_widget'  => '</article>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>',
  ));
}

add_action( 'widgets_init', 'adelle_widgets_init' );

このコードをコピー＆一番下にペーストし、ちょこちょこっといじります。
私は記事の上部と下部にウィジェットエリアを設置したいのでこのようにしました。

ちなみに、子テーマのfunctions.phpにこれを記述しても問題なく動作します。

// ==================================================================
// Widget - Main Top
// ==================================================================
function adelle_main_top_widgets_init() {
  register_sidebar(array(
    'name'          => __( 'Main Top Widget', 'adelle-theme' ),
    'id'            => 'main-top-widget',
    'description'   => 'Main Top widget area',
    'before_widget' => '<p>',
    'after_widget'  => '</p>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>',
  ));
}

add_action( 'widgets_init', 'adelle_main_top_widgets_init' );
// ==================================================================
// Widget - Main Bottom
// ==================================================================
function adelle_main_bottom_widgets_init() {
  register_sidebar(array(
    'name'          => __( 'Main Bottom Widget', 'adelle-theme' ),
    'id'            => 'main-bottom-widget',
    'description'   => 'Main Bottom widget area',
    'before_widget' => '<p>',
    'after_widget'  => '</p>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>',
  ));
}

add_action( 'widgets_init', 'adelle_main_bottom_widgets_init' );

大雑把な解説

• function～は関数の名前です。一つ一つ固有の名前を付けます。この名前とadd_action～の()内の名前と一致しないといけません。
• name … ウィジェットエリアの名前
• id … ウィジェットエリアのID
• description … ウィジェットエリアの説明
• before_widget / after_widget … ウィジェットを囲む開始/終了のタグ
• before_title / after_title … ウィジェットのタイトルを囲む開始/終了のタグ

Adelle: content.php

functions.phpの設定が完了したら次はウィジェットエリアをテーマに埋め込みます。<?php dynamic_sidebar('ウィジェットエリアのID’); ?> を追加するだけです。

私は2ヵ所、次のように配置しました。

      <article class="post-content" itemprop="text">
        <?php dynamic_sidebar('main-top-widget'); ?>

        <?php the_content(); ?>
        <?php dynamic_sidebar('main-bottom-widget'); ?>

場所でいうと記事タイトルの下と、記事の終わりです。

あとはいつも通りウィジェットを配置するだけ

管理画面 > 外観 > ウィジェットに新しい場所が追加されているはずですので、好きに色々詰め込みます。