前回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の項目別リンクを簡単に作成できることがわかった。
次回はアーカイブ一覧ページ表示の作成を行う。
コメント