ウィジェットを自作する

ウィジェットとは

主にサイトのサイドバーを管理画面から簡単に編集できるようにブロック単位にした機能のこと。
ウィジェットで編集できるのはサイドバーだけではなく、フッターや記事下のCTA(Call To Action 購読ボタンなど)も
ウィジェットで設定できるようになっているテンプレートもある。また、なければ自作もできる。

ウィジェットの自作

  1. functions.phpでウィジェットを定義、登録する。
  2. 出力したいファイル(主にsidebar.php)で出力する。

サンプル

1. functons.phpでウィジェットを作成する

使用するwp関数
関数名 機能 備考
register_sidebar(); ウィジェットの中身を定義する 引数には連想配列を使う
add_action('widgets_init' , '関数名'); 定義したウィジェットを登録する
記述する場所はfunctions.php

/* 定義 */
function 関数名(){
    register_sidebar( array( // 連想配列の形で設定する
        'name'          => 'ユーザーログイン', // 管理画面で表示する名前
        'id'            => 'logIn', // ウィジェットID
        'description'   => 'ユーザーログイン', // 管理画面に表示する説明
        'before_widgit' => '<aside id="%1$s" class="widget %2$s">', // ウィジェットの前の文字列(テーマのCSSに合わせる)
        'after_widgit'  => '</aside>',  // ウィジェットの後の文字列(テーマのCSSに合わせる)
        'before_title'  => '<h3 class="widget-title">', // タイトルの前の文字列(テーマのCSSに合わせる)
        'after_title'   => '</h3>', // タイトルの後の文字列(テーマのCSSに合わせる)
    ));
}

/* 登録 これで管理画面の「外観」→「ウィジェット」に表示されるようになる */
add_action('widgets_init' , '関数名');

ここまでで管理画面にウィジェットが表示されるようになる。

ウィジェット

次にWeb画面に表示されるようにする。

2. 出力したいファイル(主にsidebar.php)で出力する。

使用するwp関数
関数名 機能 備考
is_active_sidebar('ウィジェットID'); ウィジェットが登録されているかどうかif文で判定する ※今回のサンプルでは使っていない
dynamic_sidebar('ウィジェットID'); ウィジェットを有効化(出力)する
記述する場所は主にsidebar.php

<div id="secondary" class="widget-area" role="complementary">
    <?php if(is_user_logged_in()): ?> // ログインしているか判定
        <?php dynamic_sidebar( 'logIn' ); ?> // ウィジェットを有効化
            この部分はfunctions.phpに定義し、sidebar.phpに記述して表示しています。
            <?php $user = wp_get_current_user(); echo $user->display_name; ?>さん、こんにちは。
            ログアウトは<a href="<?php echo wp_logout_url(); ?>" title="ログアウト">こちら</a>です。
    <?php else: ?>
            ゲストさんこんにちは。
            ログインは<a href="<?php echo wp_login_url(); ?>" title="ログイン">こちら</a>。
    <?php endif; ?>
</div>

※このサンプルはウィジェットアイテムを設定せず、直接sidebar.phpに記述している。ユーザーの使い勝手を良くするためにはウィジェットアイテムを用意した方が望ましい。
ウィジェット