WordPress5速習7(sidebarテンプレート)

WordPress

前回sigle.php,front-page.phpテンプレートを作成した。今回はそこにsidebarを組み込んでいこう

sidebar-category.php

サイドバーに配置した部品は他のページでも使うので機能ごとに分割して作成しよう。まずはカテゴリー一覧を作成する。index.phpと同じ階層に
sidebar-category.php
を以下のように作成する。

<section class="categoryBox">
  <div class="catHeader">カテゴリー一覧</div>
  <ul>
  <?php
  $args=array(
    'title_li'=>'',//見出しを削除
    'show_count'=>true,//投稿数を表示
  );
   wp_list_categories($args);
   ?>
  </ul>
</section>

解説

wp_list_categories($args)
を使うと簡単にカテゴリーページのリンクを作成できる。
引数に渡す配列によって様々なカスタマイズが可能だ。
今回はデフォルトで表示する「カテゴリー」という文字を非表示にして、件数表示をするように設定した。
詳細なパラメータは公式を参照してもらいたい。

読み込み

では実際に今作成したsidebarを読み込んでみよう。siderbar-xxx.phpとして作ったテンプレートはget_sidebar(‘xxx’)で読み込める。
front-page.php
を以下のように編集する。

省略
  <aside id="sideContents">
        <?php get_sidebar('category');?>
      </aside>
    </div><!--mainWrapper-->
<?php get_footer();?>

確認

トップページを表示してみよう。

カテゴリー一覧が表示された!

main.css

少しだけスタイルをあてる。main.cssの最下部に以下を追記する。

/***sidebar***/
.categoryBox > div{
  background:#eee;
  padding:5px;
}

.categoryBox > ul{
  padding:5px 20px;
  margin-bottom:10px;
}
.categoryBox > ul >li{
  margin:10px;
}

確認

以下のように表示されれば成功だ。

日別アーカイブの表示

今度は日別アーカイブを表示してみよう。まずは
sidebar-date.phpを以下のように作成する。

<section class="categoryBox">
  <div class="catHeader">日別一覧</div>
  <ul>
  <?php
  $args=array(
    'type'=>'daily',//日別に指定(yearly,monthly,weekly...)
    'show_post_count'=>true,//投稿数を表示
  );
   wp_get_archives($args);
   ?>
  </ul>
</section>

解説

wp_get_archives($args)
アーカイブページのリンクを取得する際に用いる。
これも引数に渡す配列によって様々にカスタマイズ可能だ。
今回は日別にし、件数を表示した。
詳しくは公式を参照しよう。

読み込み

作ったsidebar-date.phpをfront-page.phpから読み込もう。先程追記した部分のしたに記述する。

<aside id="sideContents">
        <?php get_sidebar('category');?>
        <?php get_sidebar('date');?>
      </aside>
    </div><!--mainWrapper-->
<?php get_footer();?>

確認

確認してみよう。以下のようになれば成功だ。

single.phpにも追記

以上でサイドバーの部品ができた。single.phpからも読み込んであげよう。
single.phpの下部を以下のように編集する。

<aside id="sideContents">
        <?php get_sidebar('category');?>
        <?php get_sidebar('date');?>
      </aside>
    </div>
<?php get_footer();?>

確認

個別投稿ページも表示してみよう。以下のようにサイドバーが読み込まれれば成功だ。

まとめ

以上で今回の内容は終了だ。
wp_list_categoriesとwp_get_archivesを使うことによってよく見かけるWPの項目別リンクを簡単に作成できることがわかった。

次回はアーカイブ一覧ページ表示の作成を行う。

コメント

タイトルとURLをコピーしました