WopdPressの固定ページに「カテゴリーの一覧」を表示してさらにそれを「段組み」にする方法。

f:id:lord_cashew:20140406174532p:plain

ワードプレスでサイト制作を行っているのですが、サイト構成とデザインの関係で、トップページに設定する「固定ページ」に「カテゴリーの一覧」を表示させて、尚且つその一覧が縦長にならないように「段組み」するように設定を行ってみました。

まずは前準備を行う

固定ページにカテゴリーの一覧を表示させるのに、今回は「PHP」を使って表示させることにしましたので、固定ページでPHPが動作できるようにする必要があります。

指定したカテゴリの記事一覧を表示させる為に、PHPのコードを記載するのですが、そのままではWordPressページ内にそのままPHPを記載してもコードが記述されるだけで実行されないので、固定ページ・記事内でPHPが動くようにする必要があります。今回私は「Exec-PHP」プラグインを入れて使用しました。

固定ページ内に指定したカテゴリの記事一覧を表示させる | WordPress（ワードプレス）とプラグイン

上の記事を参考にしつつ「Exec-PHP」プラグインをインストールしました。

固定ページにカテゴリー一覧を表示する

固定ページでPHPが動作するようになりましたので、カテゴリ一覧を表示させるPHPを記述していきます。

<?php

$cat_all = get_terms( "category", "fields=all&get=all" );

foreach($cat_all as $value):

?>

<a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a>

<?php endforeach; ?>

WordPressでサイドバーなどにカテゴリー一覧を表示する方法 | 現役のWebクリエーターがあなたの疑問に答えます

上の記事に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; ?>

WordPress › フォーラム » $exclude = array が無視されて全部のカテゴリーが表示されます

上の記事を参考にして以下のようなコードにしました。

<?php

$cat_all = get_terms( "category", "fields=all&get=all&exclude=1" );

foreach($cat_all as $value):

?>

<a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a>

<?php endforeach; ?>

赤文字の部分が追加された箇所で、除外したい親カテゴリのIDが「1」だと仮定した場合です。ちなみに参考にしたPHPコードには「wp_error」というエラー判定が追加されているみたいですが、ここではスルーして、元のコードをそのまま使っていくことにします。

カテゴリー名の横に記事数を表示する

ここまで設定してきたPHPコードでは、そのカテゴリに記事があろうがなかろうが、全てのカテゴリーを一覧表示します。これだとユーザー的に使い勝手が悪いかもしれませんので、カテゴリー名の横に「記事数」を表示することにします。

<a href="<?php echo get_category_link($value->term_id); ?>" class="rpthumb clear">name;?> (term_id)->category_count; ?>)</a>



カテゴリー一覧に記事数を表示したい時 | 現役のWebクリエーターがあなたの疑問に答えます

赤文字のコード（記事数を表示する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】というのは段組の数を指定するプロパティです。

CSSで文書の段組表現を行うcolumnプロパティの使い方 | 56docブログ

上の記事を参考にして、まずは固定ページに記述するPHPコードを以下のように修正します。

<div class="dankumi">

<?php

$cat_all = get_terms( "category", "fields=all&get=all&exclude=1" );

foreach($cat_all as $value):

?>

<a href="<?php echo get_category_link($value->term_id); ?>" class="rpthumb clear"><?php echo $value->name;?> (<?php echo get_category($value->term_id)->category_count; ?>)</a>

<?php endforeach; ?>

</div>

コード全体を「div」で囲んでclassを設定しています。次にスタイルシートに以下の記述を追加します。