読者です 読者をやめる 読者になる 読者になる

おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

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

WordPress

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):

 ?>

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

<?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):

 ?>

<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; ?--> 

カテゴリー一覧に記事数を表示したい時 | 現役の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):

 ?>

<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の固定ページにカテゴリーの一覧を表示して(記事数も表示して)さらにそれを段組みにする」ことができました。