IMUZA.com

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

ホーム / genesis / WordPress:Genesis Framework を使ったテーマ制作(5)

WordPress:Genesis Framework を使ったテーマ制作(5)

2022/05/8 genesis, Wordpress

Genesis Framework を使う場合のウィジェットエリアの登録方法です。

現在、ブランクテーマを使って一からテーマを自作する方法と二刀流で進めています。

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

  • Genesis Framework のウィジェット
  • ウィジェットエリアの追加方法
  • ウィジェットの表示方法

Genesis Framework のウィジェット

Genesis Framework ではデフォルトで Primary Sidebar(最初のサイドバー)が登録されています。また、WordPress:Genesis Framework を使ったテーマ制作(2) では初期設定 Setup Function に

// Add support for three footer widget areas.
add_theme_support( 'genesis-footer-widgets', 3 );

とフッターウィジェットエリアを3つ作っていますのですでに次のようになっています。

ウィジェットエリアの追加方法

Genesis Framework では genesis_register_widget_area() 関数を使ってウィジェットエリアを追加します。

// トップページウィジェット
for ( $i = 1; $i <= 5; $i++ ) {
  genesis_register_widget_area(
    array(
      'id'          => "front-page-{$i}",
      'name'        => __( "Front Page {$i}", 'my-theme-text-domain' ),
      'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
    )
  );
}

上のコードを functions.php に書きます。

my-theme-text-domain は Setup Function で下記のように指定した翻訳言語ファイルの場所、一般的にはテーマディレクトリ名を指定し、その場合はテーマディレクトリ内の languages ディレクトリに言語ファイルをつくります。ただ、ファイルがない場合には英語表記になりますので特に気にする必要はありません。

// Load child theme textdomain.
load_child_theme_textdomain( 'my-theme-text-domain' );
  • 関数リファレンス/load child theme textdomain – WordPress Codex 日本語版

そうしますと、管理画面のウィジェットに登録したウィジェットエリアが現れます。

ウィジェットの表示方法

Primary Sidebar(最初のサイドバー)はデフォルトでサイドバーエリアに表示されます。フッターウィジェットはサイドバーを含んだコンテンツエリアとフッターエリアの間に表示されます。

新たに作成したウィジェットはアクションフックを使って希望の場所に挿入します。たとえばフロントページのサイドバーを含んだコンテンツエリアとフッターウィジェットエリアの間に表示するには front-page.php に

add_action('genesis_after_loop', 'add_front_page_widgets');
// トップページウィジェット
function add_front_page_widgets(){
  for ( $i = 1; $i <= 5; $i++ ) {
    genesis_widget_area( "front-page-{$i}", array(
      'before' => '<div id="front-page-' . $i . '" class="front-page-' . $i . '"><div class="wrap">',
      'after'  => '</div></div>',
    ) );
  }
}

と書き込みます。

どこに挿入するかの add_action のアクション名(上記では genesis_after_loop)は一覧を参照してください。

  • Genesis Hooks

後はウィジェットエリアに希望のウィジェットを挿入するだけです。

Echo Show 5 (エコーショー5) 第2世代 - スマートディスプレイ with Alexa、2メガピクセルカメラ付き、ディープシーブルー

Echo Show 5 (エコーショー5) 第2世代 – スマートディスプレイ with Alexa、2メガピクセルカメラ付き、ディープシーブルー

  • Amazon

Amazon

ウィジェットエリアの作り方:WordPressテーマ自作
WordPress:テーマ制作は一からの制作に行きつく
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com