WordPressテーマのsidebar.phpを編集してサイドバーをカスタマイズする

WordPressテーマのsidebar.phpを編集してサイドバーをカスタマイズする方法をお伝えします。

WordPressサイトの中でサイドバーは主にサブコンテンツを配置する場所で、主要ページへのリンクやカテゴリーアーカイブ、タグクラウド、新着記事のリストなどが設置されます。

WordPressにおいて一般的にサイドバーは、サイドバーウィジェットを用いて設定しますが、今回は、直接WordPressサイトのサイドバー部分をカスタマイズ・編集場合についてお伝えしていきます。

WordPressテーマのsidebar.phpを編集する

WordPressをカスタマイズするためにWordPressテーマ中のサイドバーを直接カスタマイズする目的でsidebar.phpを編集する場合には、WordPress管理画面から直接ファイルを操作するか、WordPressインストールサーバーにFTPなどで接続し、sidebar.phpをダウンロードしてローカル環境でエディタを用いて修正します。

sidebar.phpがある場合とない場合

WordPressテーマによってはsidebar.phpが存在しないケースもあり、サイドバー部分に関するファイルの名称が異なっていたり、様々なテーマディレクトリの中にsidebar.phpに該当するファイルが細切れのように配置されていたり、index.phpなどの中にWordPressサイドバーに関する部分が指定してある場合もあります。

WordPressテーマにsidebar.phpがある場合は、そのファイルの存在の確認と編集するために、管理画面からチェックしてみましょう。

管理画面からsidebar.phpを確認し、編集する

WordPressにログインすると管理画面が表示されます。

WordPress管理画面の左側に操作メニューが表示されていますので、その中の「外観」から「テーマの編集」を選択します。

すると画面右側にWordPressテーマファイルの一覧が表示されますので（深い階層にあるものは表示されない場合があります）、その中にsidebar.phpがある場合は、その部分をクリックします。なお、WordPress標準テーマの場合は、「テーマサイドバー（sidebar.php）」と表記されています。

この部分を修正することで、WordPressサイトのサイドバーのカスタマイズを行うことができます。

WordPressサイトのサイドバーのカスタマイズ

2列以上のレイアウトのWordPressサイトのサイドバーには全てのページに共通した部分である「主要ページへのリンク」やカテゴリーアーカイブ、タグクラウド、新着記事のリストなどが設置されていますが、sidebar.phpを編集することで、こうした要素の配置変更やサイズ変更、要素の属性変更などのカスタマイズを行うことができます。

なお、固定ページや投稿のテンプレートでサイドバーなしのものがあり、それを選択している場合はサイドバーは表示されません。

sidebar.phpを編集

WordPressテーマによっては、テーマカスタマイズ機能によって設定できる場合もありますが、細かなカスタマイズにはsidebar.phpを編集する必要があります。

phpの利用による特殊なリストの生成など、サイドバーウィジェットの編集のみでは実装できない場合は、こうしたサイドバーのテーマテンプレートをカスタマイズする必要があります。

WordPressテーマの他のファイルでサイドバーを呼び出す

なお、sidebar.phpが存在し、サイドバーに関する設計を行った場合でも、投稿ページや固定ページに関するWordPressテーマの他のファイルでサイドバーを呼び出さないと、WordPressサイトのサイドバーに関する表示は行われません。

サイドバー非表示で全幅テンプレートを作成する場合

逆に言うと、サイドバーの呼び出しに関するphpを削除することで、サイドバーを非表示にすることもできます。

しかしながら、本文カラムとの関係性の中で、サイドバー部分を削除したからといってレイアウトが全幅になるわけでもなく、表示が消えるだけであることがほとんどです。

WordPressの固定ページのテンプレート作成で、全幅テンプレート作成を作るようなシーンでも、サイドバーの表示を消しながら、本文カラムに関するブロック要素のid、class、それに伴うCSSのなども同時に編集していく必要があります。

コンテキスト（文脈）に応じたサイドバーの動的な出し分け戦略

WordPress標準の仕様では、どのページでも同じ sidebar.php が読み込まれることが一般的です。しかし、ユーザーインテント（検索意図）を深く考慮した場合、これは最適な設計とは言えません。

例えば、ブログ記事を読んでいるユーザーには「関連記事」や「人気記事ランキング」を見せるべきですが、会社概要やサービス紹介ページを見ているユーザーには「お問い合わせバナー」や「制作実績へのリンク」を見せるべきです。文脈に合わない情報はノイズとなり、離脱の原因になります。

get_sidebar関数の引数を活用したテンプレート分割

これを解決する技術的なアプローチとして、get_sidebar() 関数の引数を活用する方法があります。この関数は get_sidebar( ‘name’ ) と指定することで、sidebar-name.php という別ファイルを読み込むことができます。

条件分岐タグ（is_single(), is_page(), is_category() など）と組み合わせることで、ページの種類ごとに最適なサイドバーを表示することが可能です。

// mainのテンプレートファイル内での記述例

if ( is_single() ) {
// 投稿詳細ページなら sidebar-single.php を読み込む
get_sidebar( ‘single’ );
} elseif ( is_page() ) {
// 固定ページなら sidebar-page.php を読み込む
get_sidebar( ‘page’ );
} else {
// それ以外は通常の sidebar.php を読み込む
get_sidebar();
}

このようにテンプレートファイルを物理的に分けることで、管理性が向上し、それぞれのページでのコンバージョン（CV）に向けた導線を最適化できます。事業用ホームページにおいては、ユーザーを迷わせないことが鉄則です。

position: stickyによる追従型サイドバーの実装と注意点

PC表示において、サイドバーのコンテンツが短いと、メインコンテンツを読み進めるにつれて右側に大きな空白が生まれてしまいます。これは非常にもったいないスペースです。ここに「目次」や「CVボタン（資料請求など）」を常に表示させておくことで、ユーザーの利便性を高め、クリック率を向上させることができます。

かつてはJavaScriptを使ってスクロール量を計算し、要素を固定する手法が取られていましたが、現在はCSSの position: sticky を使用するのが最もスマートで、パフォーマンスへの影響も少ない方法です。

CSSのみで実現する追従のテクニック

実装はシンプルですが、親要素の高さや構造に依存するため、正しく動作させるにはHTML構造の理解が必要です。

.sidebar-inner {
position: -webkit-sticky; /* Safari用 */
position: sticky;
top: 20px; /* 画面上部から20pxの位置で固定 */
}

ここで重要なのは、position: sticky を適用する要素が、サイドバーの親枠（aside タグなど）の中で動く余地があるかどうかです。親枠の高さがコンテンツの高さと一緒であれば、固定される余地がありません。Flexboxなどでレイアウトを組んでいる場合、サイドバーのカラム自体（親要素）には高さを指定せず、メインコンテンツに合わせて自然に伸びるように設計する必要があります。

また、広告を追従させる場合は、Google AdSenseなどの規約に抵触しないよう細心の注意を払う必要があります。ポリシー違反とならないよう、追従させるコンテンツは自社バナーや目次などに留めるのが安全です。

モバイルフレンドリーを極める・レスポンシブ対応の深い議論

現代のWeb制作において最大の課題は「スマホでサイドバーをどう扱うか」です。多くのテーマでは、CSSのメディアクエリを使って、PCでは2カラム、スマホでは1カラム（サイドバーをメインコンテンツの下に移動）というレイアウトを採用しています。

しかし、スマホで長い記事を読んだ後に、さらに長いサイドバー（ランキング、タグクラウド、アーカイブなど）が延々と続く構成は、フッターにある「会社情報」や「お問い合わせ」への到達を著しく困難にします。これはUX（ユーザー体験）の観点から見て大きな問題です。

display: none ではなく PHP側で制御する

よくある解決策として、スマホ表示時にはサイドバーをCSSで display: none にして隠す方法があります。しかし、これは見た目上消えているだけで、ブラウザは裏側でHTMLを読み込み、画像などのリソースもダウンロードしています。つまり、ユーザーのパケットを無駄に消費し、ページの表示速度（Core Web Vitals）を悪化させているのです。

より専門的なアプローチとしては、wp_is_mobile() 関数（または独自のデバイス判定関数）を使用し、PHPのレベルで「スマホの場合はサイドバーのコード自体を出力しない」あるいは「スマホ専用の軽量なナビゲーションを出力する」という制御を行います。

<?php if ( ! wp_is_mobile() ) : ?>
<aside id="sidebar">
<?php dynamic_sidebar( 'main-sidebar' ); ?>
</aside>
<?php endif; ?>

ただし、wp_is_mobile() はキャッシュ系プラグインやサーバーサイドキャッシュと相性が悪い場合があります（PCでキャッシュされたページがスマホで表示されるとサイドバーが出現してしまうなど）。そのため、キャッシュの切り分け設定を正しく行うか、あるいはJavaScriptを用いてクライアントサイドで読み込みを制御する「遅延読み込み」の技術を組み合わせるなど、高度な設計が必要となります。

セマンティックHTMLとSEOへの影響

サイドバーのマークアップにおいて、単に <div id=”sidebar”> とするだけでは不十分です。Googleの検索エンジンは、ページの構造を理解するためにHTMLタグの意味（セマンティクス）を重視します。

サイドバーは、メインコンテンツとは独立した、しかし関連性のある情報を提供するセクションです。HTML5では、このような役割を持つ箇所には <aside> タグを使用することが推奨されています。

navタグとasideタグの使い分け

サイドバーの中に「カテゴリー一覧」や「メニュー」が含まれる場合、その部分はナビゲーションとしての役割を持ちます。したがって、<aside> タグの中に <nav> タグを含める構造が、SEO的にもアクセシビリティ的にも理想的です。

HTML

<aside id="secondary" class="widget-area">
<section class="widget widget_categories">
<h2 class="widget-title">カテゴリー</h2>
<nav role="navigation" aria-label="カテゴリーメニュー">
<ul>
</ul>
</nav>
</section>
</aside>

このようにマークアップすることで、スクリーンリーダーを使用しているユーザーや検索クローラーに対して「ここは補足情報であり、その中にナビゲーションが含まれている」と明確に伝えることができます。細かい点ですが、こうした配慮の積み重ねがサイト全体の評価（EEAT）を下支えします。

パフォーマンス改善・ウィジェットの遅延読み込み

サイドバーには、Twitter（X）のタイムラインやFacebookのページプラグイン、あるいはInstagramのフィードを埋め込むことがよくあります。しかし、これらの外部スクリプトは非常に重く、ページの読み込み速度を劇的に低下させる主犯格です。

特に「First Contentful Paint (FCP)」や「Largest Contentful Paint (LCP)」といった重要な指標に悪影響を与えます。ユーザーが記事を読み始めた段階では、サイドバーにあるTwitterのタイムラインは見えていません。見えていないもののために、メインコンテンツの表示を遅らせるべきではありません。

Intersection Observer APIの活用

これを解決するためには、JavaScriptの Intersection Observer API を活用し、「ユーザーがスクロールしてサイドバーの該当箇所が画面に近づいた時だけ、外部スクリプトを読み込む」という実装を行います。

最近のWordPressやブラウザでは、画像に対して loading=”lazy” が標準化されていますが、iframeや外部スクリプトに対しても同様の配慮が必要です。技術的には少々高度になりますが、専用のJavaScriptを書くか、最適化プラグイン（WP RocketやFlying Scriptsなど）の設定で、特定のJavaScriptファイルの実行を遅延させる設定を行うことを強くお勧めします。

管理画面のユーザビリティ向上・register_sidebarの工夫

開発者ではなく、実際にサイトを運用するクライアント（またはWeb担当者）の視点に立つと、ウィジェット管理画面の使いやすさも重要です。functions.php でサイドバーエリアを定義する register_sidebar() 関数において、適切な説明文やクラス名を付与することで、運用のミスを防ぐことができます。

register_sidebar( array(
'name' => '投稿ページ用サイドバー',
'id' => 'sidebar-single',
'description' => 'ブログ記事の詳細ページに表示されます。PC閲覧時のみ表示推奨。',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );

このように description に具体的な用途や注意事項を記載しておくと、管理画面のウィジェットエリアにその説明が表示されます。「どこに表示されるか分からないエリア」を減らすことは、長期的なサイト運用の安定性に寄与します。

サイドバーは「余白」ではなく「戦略的要衝」である

sidebar.php のカスタマイズは、単にウィジェットを並べるだけの作業ではありません。

ユーザーの閲覧状況（記事、固定ページ、スマホ、PC）に合わせる 技術的に表示速度を最適化する SEOを意識した正しいタグ付けを行う CVへの導線を確保する

これらを総合的に設計し、実装して初めて、サイドバーは事業に貢献するパーツとなります。メインカラムと同じくらいの熱量を持って、サイドバーの設計・カスタマイズに取り組んでみてください。それは確実に、サイトの回遊率と成果に数字として表れてきます。

WordPressの「サイドバー」カスタマイズ

ホームページ制作 京都 ファンフェアファンファーレでは、WordPressテーマファイルの編集によるWordPressサイトのサイドバーのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。

• 「WordPressサイト（WordPressホームページ）にサイドバーが設置されているが、ウィジェット機能以上の機能を実装したい」
• 「サイドバーのデザインを変更したい」
• 「2カラムレイアウトだが、サイドバーがWordPressウィジェットに対応していないため、ウィジェット機能を追加したい」

といったケースにおいて、WordPressテーマの編集により、WordPressサイトのサイドバーに関するカスタマイズをさせていただいております。

WordPressサイトの「サイドバー」カスタマイズ

WordPressの設定・カスタマイズ・修正・編集方法の参考例

（初回投稿日 2015年11月18日）

WordPressカスタマイズ・修正

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。

WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。

WordPress（ワードプレス）のカスタマイズ

復旧・復元・エラー修正

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPress（ワードプレス）で制作されたウェブサイト・ホームページの復旧（復元）、エラー修正サービスを提供しております。弊社制作のWordPress（ワードプレス）サイトの復旧、エラー修正も承っておりますが、自社制作・運営、他社制作・管理のWordPressサイトのエラー復旧（復元）・修正にも対応可能です。

WordPress（ワードプレス）の復旧・復元・エラー修正

WordPressの保守やセキュリティについては、基本的にはバックアップによる保守管理で十分だと考えています。トラブル時のWordPressの復旧のためのWordPressの保守やセキュリティ、バックアップと復元について。

WordPressの保守管理 バックアップと復元で対応する

WordPressでのホームページ制作（WordPressサイト制作）

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。

企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。

WordPress（ワードプレス）でのホームページ制作・ウェブサイト制作