WordPress特集 - ウィジェットエリアの登録

Webページ内でウィジェットを使って表示するエリアの登録を行います。ページのどこをウィジェットエリアとするかは、テンプレートにコードを記述します。一般的には各ページ共通で表示する、ヘッダー/フッター/サイドバーにウィジェットを設置するケースが多いです。

【記事執筆時の環境】
WordPress 5.8

【参考ページ】
サポート - ウィジェット
Codex 日本語版 - テーマのウィジェット対応
Theme Handbook - Widgets

functions.phpにコードを記述してウィジェットエリアを登録

【参考ページ】
Codex 日本語版 - 関数リファレンス/register sidebar
Code Reference | register_sidebar

functions.php に関数 register_sidebar を使ってコードを記述します。
以下はサイドバーとフッターにウィジェットエリアを登録するコード例です。

ウィジェットを表示する位置をテンプレートに記述

【参考ページ】
Codex 日本語版 - 関数リファレンス/dynamic_sidebar
Codex 日本語版 - 関数リファレンス/is active sidebar
Code Reference | dynamic_sidebar

テンプレートに関数 dynamic_sidebar を使ってウィジェットを表示する位置を指定するコードを記述します。
以下は sidebar-widgets という id で登録したウィジェットエリアを指定するコード例です。ウィジェットエリアにウィジェットが実際に追加されているかを関数 is_active_sidebar で判断しています。

管理画面からウィジェットエリアにウィジェットを追加

実際のページ作成作業では、[外観]>[ウィジェット] から、ウィジェットエリアにウィジェットを追加します。
あるいは [外観]>[ウィジェット] でカスタマイザーに移動し、ページのプレビューを確認しながら追加することも可能です。

WordPress 5.8 からウィジェット機能は大幅に変更となりました。従来のウィジェットではなく、投稿や固定ページで追加するのと同じブロックを、ウィジェットブロックとして追加する形になります。

【参考ページ】
Block Editor Handbook - Widgets Block Editor overview

«次の特集記事»
«前の特集記事»

スポンサーリンク

WordPress 特集記事

WordPressの概要

WordPressの仕組み

WordPressのカスタマイズ性

制作環境とインストール

基本設定項目

追加設定項目

Gutenbergエディター

具体的な制作作業

応用・高度機能

実践的なTips

よく使われるテーマ紹介

有用なプラグイン紹介

独自テーマによる制作

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ