WordPressウィジェットの追加・カスタマイズ
京都のホームページ制作会社 株式会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPressウィジェットの追加やウィジェットのカスタマイズを含めましたWordPressテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
このページでは、WordPressのカスタマイズサービスのうち、「WordPressウィジェットの追加・カスタマイズ」について掲載しております。WordPressテーマをカスタマイズすることでサイドバーやフッター部分にウィジェット機能がない場合に追加したり、既存のウィジェット機能で表示されるパーツの表示の仕方を変更したりすることができます。
弊社では、WordPressテーマファイルの編集によるWordPressサイトのウィジェットの追加・カスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。
「WordPressテーマにウィジェット機能がないので新たに設置したい」
「サイドバーやフッターにWordPressウィジェットを使える場所を追加したい」
「WordPressウィジェットで表示されるウィジェットパーツのデザインを変更したい」
といった場合に、WordPressテーマのカスタマイズによって、ウィジェットの追加やカスタマイズに対応させていただいております。
現在ご利用のWordPressサイトへのWordPressウィジェットの追加や、既に設置済みのウィジェットのレイアウト変更・サイズ変更といった修正、WordPressプラグインを利用した新規機能追加など、各種WordPressウィジェットにかかるカスタマイズに対応可能です。
WordPressのカスタマイズのうち、WordPressサイトの「ウィジェット」の追加やカスタマイズについてご紹介します。
WordPressのウィジェット機能
WordPressをベースとしたホームページ（WordPressサイト）には、ウィジェット機能が設置されている場合があります。
ウィジェット（Widget）はホームページ内のパーツのようなもので、WordPress管理画面からのウィジェット設定操作によって、サイドバーやフッターなどに表示する項目の設定を行うことができます。
WordPressテーマの中にウィジェット機能に関する仕組みが実装されている場合、WordPress管理画面からパーツとして使用するウィジェットをドラッグアンドドロップするだけでパーツを追加していくことができるといったイメージです。
WordPressウィジェットによってできること
WordPressテーマにウィジェット機能がついていることが前提となりますが、このWordPressウィジェットは、ヘッダー部やフッター部、サイドバー部分に表示する項目を選択し、反映するウィジェットエリアにドロップするだけでその項目を表示することができます。
WordPress ウィジェット設置画面（クラシックウィジェット）
ウィジェットによる設定項目として選択できるものは、固定ページのリストや「カテゴリー」のリストや月間アーカイブ、タグクラウド、カレンダーの表示や最近の投稿の表示などのほか、任意のテキストデータやHTMLを表示することもできます。なお、カスタマイズによってウィジェットエリアにphpを組み込むこともできます。
サイドバーにFacebookページのボックスを表示したりX（Twitter）ウィジェットを表示してソーシャルでの活動をWordPressサイトに表示することも可能になります。
こうしたウィジェットを表示する設定をした場合、WordPressテーマの設定で、サイドバー無しテンプレートの利用などをしない限り、原則的にサイドバーやフッターなどに関するウィジェットエリアの設定が全ページに反映されます。
ウィジェットの設定
WordPressサイトで使用するWordPressウィジェットを選択
WordPressテーマがWordPressウィジェットに対応しており、WordPressサイトのヘッダー・フッター部、サイドバーなどにウィジェット機能が設置されている場合は、ウィジェットの設定により、それぞれのパーツの設定をできる場合があります。
使用するウィジェットのタイプを選択し、ドラッグアンドドロップでウィジェット項目の使用・未使用を設定することができます。
WordPressテーマインストール時に予め使用可能なウィジェットもあれば、WordPressプラグインのインストールやWordPressカスタマイズによって、使用可能になるウィジェットなどがあります。
WordPressウィジェットとクラシックウィジェット
なお、WordPressバージョン5.8以降は、ウィジェットが次のようなブロックエディタに変更されています。
WordPress ウィジェット設置画面（新）
旧来からのウィジェットはクラシックウィジェットとして扱われています。「Classic Widgets」プラグインを設置すれば旧来からのウィジェットを使用することができます。
ウィジェットに未対応
WordPressテーマを設置した段階で使用可能なウィジェットもあれば、WordPressプラグインのインストールやWordPressカスタマイズによって、使用可能になるウィジェットなどがあります。
しかしながらWordPressテーマによっては、ウィジェットに対応していないものもあり、また、ウィジェット対応テーマにおいても、ウィジェットで表示できる項目は、純正ではパーツが限定されています。
WordPressウィジェットに対応していないテーマの場合は、WordPress管理画面のウィジェット設定画面にウィジェットエリアが表示されません。
純正ウィジェットパーツの「最近の投稿」と独自リストパーツ
またWordPressサイトのサイドバーやフッターなどにウィジェットを利用して表示する、カテゴリー別の新着記事の表示や、仔細なリストなど、細かな表示項目設定をするためには、WordPressのカスタマイズが必要です。
純正ウィジェットパーツの「最近の投稿」を利用した場合、カテゴリーやタグのなどに関係なく投稿の公開日順に最近の投稿が表示されます。
設定項目は、「表示する投稿数」と「投稿日を表示するかどうか」そしてウィジェットのタイトルのみとなります（未設定の場合は「最近の投稿」と表示されます）。
このため例えばカテゴリーごとに分類した最新投稿のリストを複数表示する場合などは、独自のリストパーツを作成する必要があります。
リストパーツの追加・設置・カスタマイズ WordPressカスタマイズ
未対応テーマにWordPressウィジェットを追加
WordPressをカスタマイズすることで、WordPressウィジェットに未対応のWordPressテーマにウィジェットを追加することもできます。
このウィジェット追加は、WordPressテーマファイルを編集する必要があるため、管理画面の設定などでは実装することはできません。
弊社では、このWordPressウィジェット未対応テーマに、ウィジェットを追加するカスタマイズも手がけております。
「WordPressサイトがウィジェット機能に対応していないため、カスタマイズによって設置したい」
「現在サイドバーウィジェットしか存在しないが、フッターにもウィジェット機能を追加したい」
といった場合においても、WordPressサイトにウィジェットを新規設置することが可能です。
一度ウィジェット機能を追加し、サイドバーやフッターなどに表示するウィジェットエリアを設置することで、WordPress管理画面から好みに合わせたウィジェットパーツを利用することができるようになります。
なお、ウィジェットの設置には、WordPressテーマのレイアウト構造などの変更を伴う場合がありますことを予めご了承ください。
ウィジェットエリアの増設がもたらすマーケティングの柔軟性
Webマーケティングの現場では、スピードが命です。「今すぐこのキャンペーンバナーを全ページのヘッダー下に貼りたい」「特定のカテゴリーの記事下だけにメルマガ登録フォームを設置したい」といった要望は日常茶飯事です。
これらを毎回テンプレートファイル（PHP）を編集して実装するのは、リスクが高く、工数もかかります。そこで私たちが推奨するのは、あらかじめサイト内の戦略的な位置に「カスタムウィジェットエリア」を増設しておくことです。
例えば、記事本文の直下、ヘッダーのナビゲーション横、フッターの最下部、あるいは記事タイトルの直上などです。これらの場所に「空の箱（ウィジェットエリア）」を用意しておけば、管理画面からドラッグ＆ドロップするだけで、CTA（行動喚起）ボタンや広告、お知らせを即座に配信・停止できます。これは、事業のPDCAサイクルを高速に回すための基盤作りと言えます。
register_sidebar 関数の引数設計とHTML構造の最適化
技術的な側面から、ウィジェットエリアの登録を見てみます。functions.php に記述する register_sidebar 関数は、単にエリアを作るだけでなく、出力されるHTML構造を決定する重要な役割を持っています。
実装では、before_widget と after_widget 引数を慎重に設定します。デフォルトの <li> タグではなく、セマンティックな <section> や <aside> タグを使用し、適切なクラス名を付与することで、CSSによるデザインの制御を容易にします。
また、before_title と after_title も重要です。SEOを意識する場合、サイドバーの見出しは h2 なのか h3 なのか、ページ全体の階層構造に合わせて調整する必要があります。私たちは、ウィジェットエリアが配置される場所（サイドバーなのか、フッターなのか）に応じて、適切な見出しレベルが自動的に適用されるように設計します。これにより、検索エンジンに対して文書構造を正しく伝えることができます。
コンテキスト（文脈）に合わせた条件分岐と表示制御
「サイドバーは全ページ共通」という固定観念は捨てるべきです。ユーザーが閲覧しているページの内容（コンテキスト）に合わせて、表示するウィジェットを出し分けることこそが、回遊率とコンバージョンを高める秘訣です。
例えば、「採用情報」のページを見ているユーザーに対して、商品広告のウィジェットを表示しても効果は薄いでしょう。そこには「社員インタビュー」や「エントリーボタン」のウィジェットが表示されるべきです。
私たちは、is_category() や is_single() といったWordPressの条件分岐タグを駆使して、特定のページ群ごとに専用のウィジェットエリアを読み込ませるようにテンプレートを構築します。あるいは、一つのウィジェットエリア内で、ウィジェットごとの表示ロジックを制御することもあります。ユーザーのインテント（意図）に合致した情報だけを提示する、これが「おもてなし」のUI設計です。
ショートコードによるウィジェットの「記事内埋め込み」
通常、ウィジェットはテーマ側で定義されたエリア（サイドバーやフッター）にしか表示できません。しかし、記事の本文中に特定のウィジェットを呼び出したいというニーズも存在します。
私たちは、任意のウィジェットエリアを呼び出せるショートコードを開発・実装することがあります。これにより、ライターが記事を書いている最中に [widget_area id=”campaign-banner”] のようなコードを一行書くだけで、管理画面で管理されたキャンペーンバナーを記事の好きな場所に挿入できるようになります。
これは、ランディングページ（LP）的な記事を作成する際に非常に強力です。コンテンツの流れの中で自然にCTAを提示できるため、記事の説得力を損なうことなく、コンバージョンポイントを作ることができます。
ブロックウィジェット時代の到来と旧来ウィジェットの共存
WordPress 5.8以降、ウィジェット管理画面は「ブロックエディタベース」に刷新されました。これにより、ウィジェットエリア内でも「段落」や「画像」だけでなく、「カラム」や「グループ」といった複雑なレイアウトが可能になりました。
しかし、長年運用されているサイトでは、旧来のウィジェット（クラシックウィジェット）に依存しているケースも多々あります。トップエンジニアとして、私たちはこの過渡期における最適な対応を判断します。
新規構築の場合はブロックウィジェットの柔軟性を活かした設計を行い、リニューアルや保守の場合は、あえて remove_theme_support( ‘widgets-block-editor’ ) を記述してクラシックウィジェットを維持することもあります。重要なのは、クライアント様（運用担当者様）が迷わず、ストレスなく更新できる環境を提供することです。技術の新しさよりも、運用の安定性を優先する視点も持ち合わせています。
レスポンシブデザインにおけるサイドバーの扱いとUX
スマートフォンでの閲覧が主流となった現在、サイドバーにあるウィジェットの扱いは大きな課題です。PCでは横に表示されていたサイドバーが、スマホではメインコンテンツの「ずっと下」に配置されてしまい、誰にも見られないという現象が起きます。
これを解決するために、私たちはいくつかの手法を提案します。一つは、スマホ閲覧時には重要なウィジェットだけを抽出して、コンテンツの途中に差し込むカスタマイズです。
もう一つは、アコーディオンUIやオフキャンバス（ハンバーガーメニューのような開閉式）メニューの中にウィジェットエリアを格納する方法です。「人気の記事」や「カテゴリー一覧」といった回遊を促すウィジェットを、ボタン一つで呼び出せるようにすることで、スマホユーザーの利便性を損なわずに、豊富な情報へのアクセス経路を確保します。
パフォーマンスへの配慮とウィジェットの遅延読み込み
ウィジェットは便利ですが、入れすぎるとサイトの表示速度を低下させる原因になります。特に、InstagramやTwitter（X）のタイムラインを表示する外部API連携型のウィジェットや、人気記事ランキングを集計・表示するウィジェットは、データベースや外部サーバーへの通信が発生するため、ボトルネックになりがちです。
私たちは、重い処理を伴うウィジェットに対して、Fragment Caching（断片キャッシュ）技術を適用します。一度生成されたウィジェットのHTMLを一定時間保存し、データベースへのクエリをスキップして表示させることで、0.01秒単位の高速化を図ります。
また、ファーストビュー（画面を開いて最初に見える範囲）に入らない下部のウィジェットについては、JavaScriptを用いて遅延読み込み（Lazy Load）させることも検討します。ユーザーがスクロールして初めて読み込まれるようにすることで、初期表示速度を劇的に向上させ、Core Web Vitalsのスコア改善に貢献します。
ウィジェットタイトルの隠蔽とデザインの自由度
WordPress標準のウィジェットには「タイトル」を入力する欄がありますが、デザイン上、タイトルを表示したくない場合もあります。しかし、管理画面上では何のウィジェットか識別するためにタイトルを入力しておきたいというジレンマがあります。
私たちは、タイトル先頭に ! などの特定の記号をつけた場合はフロントエンド（表側）でタイトルを非表示にする、といった細かなカスタマイズ機能を実装することがあります。
あるいは、ウィジェット全体を囲むHTMLコンテナに、管理画面で入力した独自のCSSクラスを付与できる機能を追加し、ウィジェットごとに背景色を変えたり、枠線をつけたりといったデザイン変更を、コードを書かずに管理画面から行えるようにします。これにより、デザイナーではない運用担当者様でも、見栄えの良いページ作りが可能になります。
WAI-ARIAに基づくアクセシビリティ対応
公共性の高いホームページにおいては、ウィジェットエリアもアクセシビリティ（a11y）に配慮する必要があります。スクリーンリーダー（音声読み上げソフト）を使用するユーザーにとって、サイドバーのコンテンツがメインコンテンツとどう関係しているのかは重要です。
カスタムウィジェットエリアを定義する際、単なる div ではなく <aside role=”complementary” aria-label=”サイドバー”> や <footer role=”contentinfo”> といったWAI-ARIAのランドマークロールを適切に付与します。
また、ナビゲーションメニューを含むウィジェットには <nav> タグを適用し、装飾目的の画像ウィジェットには alt 属性を空にする、または適切な代替テキストを入れるよう制御します。誰もが等しく情報にアクセスできるサイトを作ることは、Googleからの評価だけでなく、企業のブランド価値を高めることにもつながります。
ヘッドレスCMS構成におけるAPI経由のウィジェットデータ取得
WordPressをヘッドレスCMSとして利用し、フロントエンドをReactやVue.jsで構築する場合、ウィジェットエリアのデータもAPI経由で取得する必要があります。
標準のREST APIではウィジェットのデータを取得しにくい場合がありますが、私たちはAPIのエンドポイントを拡張し、登録されたウィジェットエリアの情報をJSON形式で出力できるようにカスタマイズします。
これにより、フロントエンド技術が何であれ、WordPressの管理画面の「ウィジェット」機能を使ってコンテンツを管理できるという利便性を維持できます。技術スタックが進化しても、運用のしやすさは変わらない。そうした持続可能なシステム設計を行います。
WordPressウィジェットの配置・デザイン等のカスタマイズ
WordPressテーマの仕様によって、ウィジェットの配置やデザインなどがテーマに合わせて設置されています。
ウィジェットの設置場所や幅、ウィジェットの列数、ウィジェットに入力した項目を表示する際の配色やリストのパターンなど、ウィジェットに関するウェブデザインは、WordPressテーマファイルによって設定されているため、変更にはCSSの編集などによるカスタマイズが必要です。
ウィジェットエリアの追加とカスタマイズは、ホームページの「拡張スロット」を増やす行為です。それは、将来的な事業の変化やマーケティング施策の変更に対して、柔軟かつ迅速に対応できる「強いサイト」を作るための投資です。
単にサイドバーを表示するだけでなく、ユーザーの行動心理、デバイスの制約、表示パフォーマンス、そして運用者の使いやすさまでを考慮して設計されたウィジェットエリアは、必ずやあなたの事業の成果に貢献します。
あなたのホームページを、静的なカタログから、動的で戦略的なマーケティングマシンへと進化させるために。株式会社ファンフェアファンファーレは、高度な技術とマーケティング視点を持って、最適なウィジェット環境を構築いたします。実装に関するご相談は、いつでもお気軽にお寄せください。
ウィジェットのカスタマイズ
ホームページ制作 京都 ファンフェアファンファーレでは、ウィジェットの追加（新規設置）やWordPressサイトに組み込まれたウィジェット機能、ウィジェットのデザイン・レイアウトなどを変更するカスタマイズにも対応しております。
例えば、フッター部分のWordPressウィジェットの並びが3列のものを2列にしたり、ウィジェットの配置位置を変更したり、設定の「ウィジェット」で選択した項目の表示形式の変更やウィジェット自体の背景や配色など、デザインの変更といったカスタマイズも可能です。
ご希望のエリアに新規でウィジェットエリアを追加したり、既存のウィジェットエリアを調整するカスタマイズに対応しています。
また逆にヘッダーウィジェット機能などの影響で、該当部分をうまく編集できないといった場合に、ウィジェット機能を停止・削除するといった変更にも対応しています。
WordPressウィジェットの追加、ウィジェットのカスタマイズをお求めの場合は、ぜひ弊社までお問い合わせください。
なお、「ウィジェットによる表示を廃止し、直接サイドバーを編集することが必要になる」等、ご希望内容によっては、ウィジェットのカスタマイズでは実装できずテーマのヘッダー部分、フッター部分、サイドバー部分などのテーマファイルを直接操作する必要がある場合もあります。
弊社ではご依頼内容に合わせて様々な方法でカスタマイズを実装しています。
