公式テーマ「Habakiri」をカスタマイズ(4)

『公式テーマ「Habakiri」をカスタマイズ』の4回目、最終回です。トップページに、投稿データのカテゴリ毎に新着情報を表示します。

新着情報をフロントページ上にリスト表示する

3カラムの情報エリアの下に、投稿データから新着情報を表示します。例として投稿データにカテゴリを2つ設け、2カラム分割で表示してみます。
こんなのですね↓。

まずは投稿にカテゴリを2つ設定し、各カテゴリに数件ずつ投稿データを作成します。

このあと、登録した投稿データをカテゴリに分けてフロントページに表示するのですが、手順は以下のとおりです。

• functions.phpに最新の投稿データから指定件数分表示するコードを書く
• フロントページに上記のコードを埋め込む

functions.phpに最新の投稿データから指定件数分表示するコードを書く

functions.phpについても、親テーマ内から子テーマ内にコピーしてカスタマイズします。
投稿画面の本文の中に使うショートコードという便利な代物がありますが、今回はそのショートコードを自分で作る…ということになります。

参考WordPressの固定ページに更新情報を追加するための手順

参考にしたページのコードをちょっといじっています。1～9行目は、多分、子テーマにfunctions.phpを作るときに必要なお約束記述（←よくわかってないｗ）。11行目以降がショートコードの記述です。

カテゴリ別に左右に分けて出したいということで、ショートコードを2つ作っています。データをクエリするargsにcategoryを追加しています。posts_per_pageは読み込みたい件数です。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

add_shortcode('recent_posts1', 'my_recent_posts1');
 
function my_recent_posts1() {
  // デフォルトテンプレート
  $template = '<div class="dotline"><div><a href="%s" target="top">%s</a></div><div class="day">%s</div></div>';

  $cat = get_category('1');
  $cat_name = $cat->cat_name;

  $the_list = '';

  $the_list = '<div class="category-box"><span class="category-box-title">'.$cat_name.'</span>';

  // 最新のポスト取得
  $args = 'post_type=post&posts_per_page=3&category=1';
  $posts = get_posts($args);
  foreach ($posts as $post) {
    $the_list .= sprintf(
      $template,
      esc_attr(get_permalink($post->ID)),
      esc_html($post->post_title),
      mysql2date("Y年m月j日", $post->post_date)
      );
  }

  $the_list .= '</div>';
  return $the_list;

}


add_shortcode('recent_posts2', 'my_recent_posts2');
 
function my_recent_posts2() {
  // デフォルトテンプレート
  $template = '<div class="dotline"><div><a href="%s" target="top">%s</a></div><div class="day">%s</div></div>';

  $cat = get_category('2');
  $cat_name = $cat->cat_name;

  $the_list = '';

  $the_list = '<div class="category-box"><span class="category-box-title">'.$cat_name.'</span>';

  // 最新のポスト取得
  $args = 'post_type=post&posts_per_page=3&category=2';
  $posts = get_posts($args);
  foreach ($posts as $post) {
    $the_list .= sprintf(
      $template,
      esc_attr(get_permalink($post->ID)),
      esc_html($post->post_title),
      mysql2date("Y年m月j日", $post->post_date)
      );
  }

  $the_list .= '</div>';
  return $the_list;

}

?>

同じようなコードが２回続くのがなんかアホっぽいので、これって１回でスマートに書けないのかなあ。まあ短いからこのレベルならいいかなあ。

フロントページに上記のコードを埋め込む

functions.phpにショートコードを設定する準備は終わりました。これをフロントページに読み込みます。
固定ページからフロントページを読み込み、下記の部分に追記します。

 

<div class="container">
	<div class="row">
		<div class="col-md-6">
			[recent_posts1]
		</div>
		<div class="col-md-6">
			[recent_posts2]
		</div>
	</div>
</div>

 

２カラム均等分割するので、Bootstrapのクラス「col-md-6」を2つ並べて整形します。

このままだと味気ないので、functions.phpの中のショートコード内で使っていたクラスにCSSで装飾をします（子テーマのstyle.cssに追記）。

CSS装飾はサルワカさんのページを参考にしました。下記参考ページの26番を使っています。

参考【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

.category-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ccb72e;
    border-radius: 8px;
}
.category-box .category-box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #333333;
    font-weight: bold;
}
.category-box div.dotline {
    border-bottom:dotted 1px #aaaaaa;
    margin:10px 0 20px;
    font-size:16px;
}
.category-box div.day {
    font-size:14px;
    color:#888888;
}

 

こんなふうに、囲み記事っぽくなりました。

これで「habakiri」をコーポレートサイトっぽくカスタマイズする実験は終了です。センスのいい方々は、CSSあたりをいろいろいじれば、もっとクールなものができると思います。

これをHTML+CSSでデザインして、自分でWordPressに切り出すことを思うと、気が遠くなりそうなので、作者さん、ほんとにありがとうですm(__)m。