もみのころぐ

テーブルレイアウトしか知らんババアが、慣れないツールいじって脳みそのリハビリをする美貌…おっと備忘録。

WEB・WORDPRESS

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

投稿日:2017年11月1日 更新日:

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

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

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

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

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

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

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

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

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

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

カテゴリ別に左右に分けて出したいということで、ショートコードを2つ作っています。データをクエリするargscategoryを追加しています。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;

}

?>

上記コードで使うCategoryのidについて管理画面の「投稿」→「カテゴリ」で、カテゴリ名にマウスを置くと、ブラウザ下部にリンク先URLが表示されますが、このURL内にある“category&tag_ID=”のあとに続く数字がargsの記述に使うCategoryのidです。

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

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

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>

 

2カラム均等分割するので、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。

-WEB・WORDPRESS

執筆者:

関連記事

さらば、Samara Oblastの友よ

このブログはまだ実験中なので、あまり人にアドレスを言っていない。言っていない状態でアクセスとかあるものなのか、Google Analyticsを突っ込んで覗いているのだが、ある日、ロシアからのアクセス …

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

『公式テーマ「Habakiri」をカスタマイズ』の2回目です。コーポレートサイトっぽくするために、まず、トップページによくありがちなスライドショーを組み込み、スライドショーの下に、3カラム分の情報エリ …

さくらからKDDIホスティングサービスへのWORDPRESS移行で死ぬ

さくらで開発してたWORDPRESSサイトをKDDIホスティングサービスに移行しようとして死んだお話。 まず環境から。 さくらレンタルサーバ(開発環境) PHP 7.1 [標準のPHP] (CGI版) …

俺メモ:死なないように、HTML+CSSの無料テンプレダウンロードサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、サイト作成用のベースになる、HTML+CSSの無料テンプレダウンロードサイトをメモっとく。 でも、前にちょこっとやったことあんだけど、元々のテンプレ …

俺メモ:死なないように、CSSスタイリングのコードコピペ元になるサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、コードのパクリ元をメモっとく。順番にベンキョーすっしかねえなあ。 そのうち、HTML+CSSのベーステンプレがあるサイトとか、サイトデザイン集めたと …