自作しているWordPressテーマにサイドバーを表示したくなったので、サイドバーを自作して表示することにしました。
簡単にではありますが、WordPressにサイドバーを自作して表示するときのやり方を手順にして記事にまとめましたので参考になる内容があれば役立ててください。
WordPressのサイドバーをsidebar.phpで自作
はじめにsidebar.phpを作成します。WordPressのサイドバーはsidebar.phpがテンプレートファイルになります。そのため、サイドバーに表示するコンテンツもsidebar.phpで自作することになります。
sidebar.phpの作成はテンプレートファイル名を「sidebar.php」で作成します。
テーマに既存のsidebar.phpがある場合は、ファイル名を「sidebar-任意名.php」のように作成します。例えばsidebar-original.phpのように作成です。
今回はsidebar.phpとsidebar-original.phpの2つのPHPファイルを作成し、WordPressにサイドバーを自作して表示する説明を進めます。
作成したsidebar.phpファイルにはサイドバーに表示する内容を記述します。はじめはサイドバーの表示確認用の簡単な記述を書いておくと良いかもしれません。
<!-- sidebar.phpで出力される -->
<div class="side">
<aside>
<ul class="side-free-content">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</aside>
</div>
sidebar-original.phpにも簡単に確認用の記述をしておきます。
<!-- sidebar-original.phpで出力される -->
<div class="side">sidebar-original.phpの内容</div>
作成したsidebar.phpとsidebar-original.phpは、サイドバーを表示するWordPressテーマのフォルダに配置します。テーマのフォルダはwp-contentフォルダから階層を下げていくとあります。
サイドバーがWordPressテーマに認識したか確認
sidebar.phpはテーマフォルダに配置したことで、サイドバーを表示する予定のWordPressテーマにサイドバーのテンプレートファイルとして認識されます。
sidebar.phpがWordPressに認識したかを確認するには、WordPressの管理画面から外観のテーマエディターで「テーマを編集」まで進み、先ほどsidebar.phpをテーマフォルダに配置したWordPressテーマを選択して確認します。
上の画像のようにsidebar.phpが「サイドバー」のテンプレートとしてWordPressに認識されていれば成功です。
sidebar-original.phpについてはテンプレートファイル名が表示していればWordPressに認識されています。
get_sidedbarでWordPressにサイドバーを表示
次にWordPressにサイドバーをget_sidedbarで表示する作業をします。
get_sidebarはWordPressで用意されているテンプレートタグです。get_sidebar()を使うことによりテーマフォルダに配置したsidebar.phpを読み込みサイドバーを表示することができます。
例えばWordPressのindex.phpにメインコンテンツとして表示している記事一覧があり、サイドバーにはsidebar.phpに記述したコンテンツをget_sidedbarで表示する場合、以下のような記述をします。
<?php get_header(); ?>
<div class="wrapper">
<div class="main">
<?php if ( have_posts() ): ?>
<ul class="archive-image">
<?php while( have_posts() ): the_post(); ?>
<li><?php the_post_thumbnail(array( 640,410)); ?></li>
<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>ループは簡略して投稿サムネイルのみにしています。
HTMLの構造で<div class=”wrapper”></div>がコンテンツ全体を囲む親要素になってメインコンテンツを囲んでいますので、get_sidedbar()をmainクラスを付与してあるdiv閉じタグの直下に記述します。
記述後は編集内容を保存します。
ここで一度sidebar.phpに記述していた確認用の内容がget_sidebar()で表示することができるかブラウザでページを開き確認をします。上の記述例ではmainクラス付きのdiv要素の下にget_sidebar()を記述したので、メインコンテンツ下部にsidebar.phpに記述した内容が表示されます。
.wrapper{
width: 100%;
max-width: 1200px;
display: flex;
margin: 0px auto;
}
ページのメイン下部に表示した要素は、WordPressにサイドバーとして表示をしたいので、CSSでwrapperクラスを持つdiv要素をクラスセレクタにし、display: flexでメインを左に、サイドを右に配置します。
あとはget_sidedbarでWordPressのサイドバーに表示するコンテンツをsidebar.phpのテンプレートファイルに記述して作り込んでいくことでサイドバーは完成です。
CSSでごにょごにょとデザインしていますが、WordPressにサイドバーを自作して表示すると以下の画像のように表示することができます。
左に表示する2列のサムネイルがメインコンテンツの一覧記事のようにイメージしてください。これはWordPress関数、the_post_thumbnail()を使って投稿のサムネイルのみをループしてます。
メインコンテンツのサムネイルに対して右に配置した黒背景がサイドバーです。サイドバーから少しハミ出すようにデザインしています。またゴールド背景のリストはsidebar.phpに記述した内容が表示しています。
サイドバーのリストの下にはYouTube動画が表示してます。
これはsidebar.phpを作成したときに一緒に作成したsidebar-original.phpにWordPressのウィジェット機能からのコンテンツを追加してサイドバーを使い分けた表示をしています。
WordPressのサイドバーを追加して使い分け
sidebar.phpと一緒に作成しておいたsidebar-original.phpをWordPressのサイドバーへの追加用のファイルとして使用すると、サイドバーの使い分けができるようになります。
まずはsidebar-original.phpをWordPressのサイドバーへの追加用ファイルとして読み込む記述からです。
<?php get_sidebar('original'); ?>
sidebar-original.phpをget_sidebarで読み込むときは、引数にファイル名を指定して読み込みます。記述例ではsidebar-original.phpを読み込むので<?php get_sidebar(‘original’); ?>と記述をしています。
あとはWordPressでサイドバーに追加するsidebar-original.phpのコンテンツ表示位置を決めて引数付きのget_sidebarを記述するだけです。
<div class="side">
<aside>
<ul class="side-free-content">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</aside>
<?php get_sidebar('original'); ?>
</div>
例えばWordPressのサイドバーにsidebar.phpで表示したリストがあり、そのリスト下部にsidebar-original.phpのコンテンツを追加するとしたら、sidebar.php内でHTMLのリスト要素を囲んでいるaside要素の終了タグ下に<?php get_sidebar(‘original’); ?>を記述して使うなどのやり方ができます。
WordPressのサイドバーを追加して使い分ける考え方としてはWordPressのget_header()でヘッダーを使い分けるときをイメージすると分かりやすくなるかと思います。
