WopdPressの固定ページに「カテゴリーの一覧」を表示してさらにそれを「段組み」にする方法。
ワードプレスでサイト制作を行っているのですが、サイト構成とデザインの関係で、トップページに設定する「固定ページ」に「カテゴリーの一覧」を表示させて、尚且つその一覧が縦長にならないように「段組み」するように設定を行ってみました。
まずは前準備を行う
固定ページにカテゴリーの一覧を表示させるのに、今回は「PHP」を使って表示させることにしましたので、固定ページでPHPが動作できるようにする必要があります。
指定したカテゴリの記事一覧を表示させる為に、PHPのコードを記載するのですが、そのままではWordPressページ内にそのままPHPを記載しても コードが記述されるだけで実行されないので、固定ページ・記事内でPHPが動くようにする必要があります。今回私は「Exec-PHP」プラグインを入れ て使用しました。
上の記事を参考にしつつ「Exec-PHP」プラグインをインストールしました。
固定ページにカテゴリー一覧を表示する
固定ページでPHPが動作するようになりましたので、カテゴリ一覧を表示させるPHPを記述していきます。
<?php
$cat_all = get_terms( "category", "fields=all&get=all" );
foreach($cat_all as $value):
?>
<p><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></p>
<?php endforeach; ?>
上の記事にPHPのコードが掲載されていましたので使わせて頂くことにしました。ちなみに「get_terms」というのはWordPressの関数で「指定したタクソノミーのタームを取得する」というものみたいです。「タクソノミー」は「分類する」的な意味みたいです。
一部カテゴリーを除外する
上のPHPコードのままだと全てのカテゴリが表示されてしまいます。今回は「親カテゴリの下に子カテゴリを沢山設定している」という構成にしていますので、親カテゴリは除外して子カテゴリのみ一覧表示することにします。
<?php
//カテゴリーID1と3を除外
$terms = get_terms( 'category', 'fields=all&get=all&exclude=1,3' );
?>
<?php if( !is_wp_error( $terms ) ) : ?>
<?php foreach( $terms as $term ) : ?>
<li id="cate_<?php echo $term->term_id; ?>"><?php echo $term->name; ?>
<?php endforeach; ?>
<?php endif; ?>
上の記事を参考にして以下のようなコードにしました。
<?php
$cat_all = get_terms( "category", "fields=all&get=all&exclude=1" );
foreach($cat_all as $value):
?>
<p><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></p>
<?php endforeach; ?>
赤文字の部分が追加された箇所で、除外したい親カテゴリのIDが「1」だと仮定した場合です。ちなみに参考にしたPHPコードには「wp_error」というエラー判定が追加されているみたいですが、ここではスルーして、元のコードをそのまま使っていくことにします。
カテゴリー名の横に記事数を表示する
ここまで設定してきたPHPコードでは、そのカテゴリに記事があろうがなかろうが、全てのカテゴリーを一覧表示します。これだとユーザー的に使い勝手が悪いかもしれませんので、カテゴリー名の横に「記事数」を表示することにします。
<!--?php
$cat_all = get_terms( "category", "fields=all&get=all&exclude=1" );
foreach($cat_all as $value):
?-->
<p><a href="<?php echo get_category_link($value->term_id); ?>" class="rpthumb clear"><span class="rpthumb-title"><!--?php echo $value--->name;?> (<!--?php echo get_category($value--->term_id)->category_count; ?>)</span></a></p>
<!--?php endforeach; ?-->
赤文字のコード(記事数を表示するPHPコード)が追加されています。ちなみに「rpthumb clear」というclass指定も追加されているみたいですが、ここではスルーしておきます。
CSSで段組みにする
ここまでで「固定ページにカテゴリー一覧が表示」されて「親カテゴリが除外」されて「カテゴリー名の横に記事数が表示」されているはずです。ただ、表示としてはカテゴリー名が箇条書きでズラズラと表示されていてユーザー的に見にくいと思われるので、一覧を「段組み」して見やすくすることにします。
こういうときには【column】プロパティを使ってCSSを書きます。
div{
display:block;
background-color:#ccc;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}
【column-count】というのは段組の数を指定するプロパティです。
上の記事を参考にして、まずは固定ページに記述するPHPコードを以下のように修正します。
<div class="dankumi">
<?php
$cat_all = get_terms( "category", "fields=all&get=all&exclude=1" );
foreach($cat_all as $value):
?>
<p><a href="<?php echo get_category_link($value->term_id); ?>" class="rpthumb clear"><span class="rpthumb-title"><?php echo $value->name;?> (<?php echo get_category($value->term_id)->category_count; ?>)</span></a></p>
<?php endforeach; ?>
</div>
コード全体を「div」で囲んでclassを設定しています。次にスタイルシートに以下の記述を追加します。
.dankumi {
display:block;
background-color:#fff;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}
上の記述では「column-count」を「2」に設定していますので、カテゴリーの一覧が「二段組」で表示されます。
これで「WopdPressの固定ページにカテゴリーの一覧を表示して(記事数も表示して)さらにそれを段組みにする」ことができました。
カンタン! WordPressでつくるビジネスサイト スマホ・パソコン両対応の「レスポンシブ」なサイトをつくろう!
- 作者: 遠藤裕司
- 出版社/メーカー: ソシム
- 発売日: 2013/10/30
- メディア: 単行本
- この商品を含むブログ (1件) を見る