WordPress ウィジェットエリア 追加する方法(functions.phpに追記)

本記事は、WordPressのテーマファイルとfunctions.phpにコードを追記して、好きな場所にウィジェット エリアを追加する手順です。

functions.phpにコードを追記します。この作業を間違うと、WordPressにエラーが発生し、表示が真っ白になります。記事データは消えませんが、びっくりします。functions.phpの扱いに慣れている方向けの記事です。自己責任でよろしくお願いします。

Codexにサンプルがある

Codex に手順が書かれています。これを参考にします。

トップページを front-page.php を使ってカスタマイズしているサイトを例にします。

functions.php

子テーマのfunctions.phpに追記します。(テーマ本体に追記すると、アップデートで消えます)

function toppage_mono96_widgets_init() {

	register_sidebar( array(
		'name' => 'Top Page area',
		'id' => 'home_top_1',
		'before_widget' => '<div class="top_page_widgets_area">',
		'after_widget' => '</div>',
		'before_title' => '<h2 class="title">',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'toppage_mono96_widgets_init' );

nameは、ウィジェットエリアのタイトルに表示されます。

ミソは、id です。これが、次の追記するコードに必要になります。追加するウィジェットエリアの背番号です。

今回は、home_top_1 に設定していますが、自由に変更できます。

また、関数名 toppage_mono96_widgets_init も自由に変更可能です。変更する場合、toppage_mono96 の部分を変更するのがオススメ。

ウィジェットを追加するテーマファイルに追記

<!-- ウィジェットエリア -->
<?php if ( is_active_sidebar( 'home_top_1' ) ) : ?>
	<div id="toppage-widget-1" class="toppage-widget-area" role="complementary">
		<?php dynamic_sidebar( 'home_top_1' ); ?>
	</div><!-- #toppage-widget-1 -->
<?php endif; ?>

これが、テーマファイルに追記するコードです。これも、子テーマを使うのが吉です。

2箇所、home_top_1 と、functions.php に設定した id があります。ここを揃えることがポイントです。

(Codexのサンプルコード、なぜか、ここが違うので、混乱するんですよね、、)

ウィジェットエリアが増えた

下の写真の通り、ウィジェットエリアが増えました。パチパチ。

PHPを始めるのにおすすめ本はこちら。

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール必須
お名前(姓)必須
お名前(名)必須
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

博士課程中退 / WEB・ITコンサルタント(業界歴 9年以上) / 岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年) / ニックネーム : ものくろ / ブロガー / WordPress & Woocommerceが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

講座・ワークショップ 開催予定

2023-01-07 09:30 – 19:30
2023年1月7日 18きっぷを楽しむ1日
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-12 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 1月12日
詳細・お申し込みはこちら

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】イカの塩辛作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-18 19:00 – 20:30
あみだすマインドフルネス 瞑想会
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-27 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 1月27日
詳細・お申し込みはこちら

2023-01-28 14:00 – 17:30
”職場のコミュニケーションが良くなる”働く人のための傾聴講座 3回連続講座
詳細・お申し込みはこちら

2023-02-09 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 2月9日
詳細・お申し込みはこちら

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


カテゴリー 一覧