IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Blankslate / ウィジェットエリアの作り方:WordPressテーマ自作

ウィジェットエリアの作り方:WordPressテーマ自作

2022/05/5 Blankslate, Wordpress

WordPress のブランクテーマ Blankslate を使って一からテーマをつくります。サイドバーにウィジェットエリアをつくり、最新記事等のウィジェットを挿入します。

  • WordPress:Blankslate を使ってテーマを一からつくる
  • WordPress:Genesis Framework を使ったテーマ制作

  • ウィジェットエリアの作り方の概要
  • register_sidebar() でエリア登録
  • ウィジェット登録
  • dynamic_sidebar() でエリア表示
  • ウィジェットタイトルを入れる場合はウィジェットグループで
  • 複数のウィジェットエリア

ウィジェットエリアの作り方の概要

次の流れになります。

  1. register_sidebar() でエリアを登録する
  2. 管理画面の外観メニューにウィジェットが現れる
  3. エリアにウィジェットを登録する
  4. dynamic_sidebar() を使って希望の場所に出力する

register_sidebar() でエリア登録

まずサイドバーという用語ですが、ブログ誕生当時はデスクトップが一般的なデバイスでしたので、その基本スタイルであるメインコンテンツと補助的なサイドバーという用語が今でも残っているのだと思います。

ですので、正確に言いますと、現在ではウィジェットエリアを作成し、それをサイドバーに表示したり、フッターに表示したりするということになります。

以上は私の考えですので正しいかどうかはわかりません。

いずれにしても、まずは functions.php に register_sidebar() 関数を使ってウィジェットエリアを登録します。

  • 関数リファレンス/register sidebar – WordPress Codex 日本語版

add_action( 'widgets_init', 'blankslate_widgets_init' );
function blankslate_widgets_init() {
    register_sidebar( array(
        'name' => esc_html__( 'Sidebar Widget Area', 'blankslate' ),
        'id' => 'primary-widget-area',
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
}

これはブランクテーマ Blankslate のデフォルト設定の register_sidebar() です。このように register_sidebar() 関数を使ってウィジェットを登録をしないとウィジェットメニュー自体が現れません。

サイドバーウィジェットエリアが現れました。Blankslate デフォルトでは検索や最新記事のウィジェットが登録されていますが、これはすべて削除した状態です。

なお、WordPress5.8 からはウィジェットがブロックエディタ仕様に変わっています。私は WordPress を使い始めてまだ半年ほどですのでそれ以前の仕様を知らないのですが、たまたま GenesisFramework から入り、それが旧来の仕様でしたのでこのブロックエディタ仕様のものを見て、あれ?何かが足りないのかなあとしばし悩みました。

ウィジェット登録

エリアへのウィジェット登録はブロックエディタで記事を書くことと同じです。

「+」アイコンをクリックしてウィジェットを挿入していくだけです。

右上の歯車アイコンをクリックしますと詳細設定ができます。記事と同じように「更新」で保存されます。

dynamic_sidebar() でエリア表示

ウィジェットエリアの表示には dynamic_sidebar() 関数を表示したいところに書けば表示されます。Blankslate の場合は、テーマディレクトリに sidebar.php をつくり次のように書けばコンテンツ下に挿入されます。

  • 関数リファレンス/dynamic sidebar – WordPress Codex 日本語版

<?php if ( is_active_sidebar( 'primary-widget-area' ) ) : ?>
<ul class="sidebar sidebar-primary widget-area" role="complementary" itemscope="" itemtype="https://schema.org/WPSideBar">
    <?php dynamic_sidebar( 'primary-widget-area' ); ?>
</ul>
<?php endif; ?>

パラメータは register_sidebar の id を指定します。<ul></ul> タグでくくっているのは register_sidebar() で各ウィジェットを <li><li>で出力するよう設定しているからです。デフォルトが <li> ですのでそうしましたが、<section> などにすれば必要ありません。

表示はこうなります。css は何も指定していません。

ウィジェットタイトルを入れる場合はウィジェットグループで

上の方法のようにウィジェットを直接入れますとタイトルが入りません。どうやらウィジェットにタイトルを入れる場合は「ウィジェットグループ」を使わないといけないようです。

これですとタイトルが入ります。

複数のウィジェットエリア

ウィジェットエリアはいくつでも登録できます。たとえば、フッターにウィジェットエリアが欲しい場合は、

add_action( 'widgets_init', 'blankslate_widgets_init' );
function blankslate_widgets_init() {
    register_sidebar( array(
        'name' => 'Primary Widget Area',
        'id' => 'primary-widget-area',
        'description' => '1カラムではコンテンツ下、2カラムでは右サイド',
        'before_widget' => '<section id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
    register_sidebar( array(
        'name' => 'Footer Widget Area',
        'id' => 'footer-widget-area',
        'description' => '常時コンテンツ下',
        'before_widget' => '<section id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}

のように register_sidebar() を書けば

Footer Widget Area が現れます。

パンツスーツ スーツ レディース ジャケット フォーマル パンツ セットアップ 母 ママ 通勤 入学式 入園式 卒業式 (ブラック, M)

パンツスーツ スーツ レディース ジャケット フォーマル パンツ セットアップ 母 ママ 通勤 入学式 入園式 卒業式 (ブラック, M)

  • richcoco(リッチココ)

Amazon

WordPress:メニューにアイコンを使う(Walker_Nav_Menu)
WordPress:Genesis Framework を使ったテーマ制作(5)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com