TOPページに複数のカテゴリーの新着記事をサムネイル付きで表示

 WordPressのTOPページをカテゴリー別の新着記事一覧を表示するようにカスタマイズしました。
どんな感じかは、HOME を覗いてみて下さい。

カテゴリーの多いブログや、異なる話題を頻繁に取上げるブログの場合だとTOPページが全体の新着記事よりも、カテゴリー別に分けて表示されてた方が訪問者にとっても見やすいのじゃないかな？と思います。

私のHOMEページ通りの解説になりますが、
２種類のプラグインのインストールや、お使いのテーマに適用されてるスタイルによっては修正箇所が多く発生するかもしれません。
個別ページに作るし、親テーマも弄らないのでやり直しが効きますが、くれぐれも自己責任で修正できる方のみでお願いします。

Page Builder by SiteOrigin のインストール

ページを分割してウィジェットを配置するためのプラグイン
「Page Builder by SiteOrigin」をインストールします。

インストールして有効化します。

Page Builder by SiteOrigin の使い方。

固定ページ⇒新規作成をクリックすると作成画面右上に
Page Builderのボタンが追加されました。

↑のPage Builderボタンをクリック。

Add Rowをクリック。

今回は横を2列のページにするので
Set Row Layoutを「2」として下のInsertをクリック。

分割した部分にウィジェットを登録します。

↑のように分割された部分をクリックして選択状態にし、Add Widgetをクリック。

使用できるウィジェット一覧が表示されるので「テキスト」を選択

作成したいカテゴリーの数だけ同じように追加して下さい。

PHP Text Widget のインストール

テキスト・ウィジェットにPHPを記述できるようにするプラグイン
PHP Text Widget をインストールします。

このプラグインはインストールだけで何の設定もいりません。

ウィジェット・タイトルにリンクを貼る方法

ウィジェットのタイトルには普通に書いてもリンクは貼れません。

リンクを貼るには、タイトル部分を空白にしてテキスト欄へタグを記述します。

私のTOPページのBODYカテゴリーのタイトルの場合、
タイトル前にFont Awesomeのアイコンを入れて↓のように書いています。

<h3 class="widget-title"><a href="http://lahatnggusto.com/category/body"><i class="fa fa-child fa-fw"></i> BODY</a></h3>

広告最短4分で広告を掲載できる『忍者AdMax』

指定したカテゴリーの新着情報をサムネイル付きで取得

<h3 class="widget-title"><a href=" カテゴリーのURL ">< Font Awesome >カテゴリー名</a></h3>
<div class="categorybox">
<table align="center">
<tbody>
<?php
  $post_id = get_the_ID();
  $newposts = get_posts( array(
    'category_name' => 'カテゴリー名',
    'posts_per_page' => 4,
    'exclude' => $post_id ));
  foreach( $newposts as $post ):
    echo '<tr height="75px">';
    setup_postdata( $post );
    $new_title = get_the_title($post);
    echo '<td width="75px">';
    if(has_post_thumbnail($post->ID)) {
      $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),large);
      echo "<img src='{$img[0]}' alt='' height='75' width='75'>";
    }
    echo '</td>';
    echo '<td valign="top" padding="0 5px">';
    echo "<a href='" . get_permalink($post) . "'>";
    echo "{$new_title} <span style='font-size:13px'>(" . get_post_time('Y.m.d',false,$post) . ")</span>";
    echo '</a>';
    echo '</td>';
    echo '</tr>';
  endforeach;
  wp_reset_postdata();
?>
</tbody>
</table>
</div>

↑これの1行目がタイトルとなります。
カテゴリーのURLと名前、Font Awesomeのコードを追記して下さい、

8行目の””の間へカテゴリー名を入れて下さい。

9行目の「4」は表示する記事数です。

$img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),large);

$img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'thumb100');

以上のソースを自分用に書き換えて、テキスト・ウィジェットへペーストします。

タイトルは空欄のままテキストエリアへソースをペースト。

右側のWidget Classへpostbox1と入力。
このClass名は2分割したウィジェット全てのスタイルを適用させるのに使用するので、作ったウィジェット全てに記述して下さい。

右下のDesignで背景色を設定できます。

CSSの追加

/* topページ・カテゴリbox */
.postbox1 h3.widget-title {
  margin-bottom: 0;
  padding: 5px 0px 2px 10px;
  background-color: rgb(254, 156, 0);
  color: white;
  border-bottom: none;
  border: 1px solid #000;
  text-shadow: 1px 1px 3px #000;
}
h3.widget-title a {
  text-decoration: none;
  color: #FFF;
}
h3.widget-title a:hover {
  color: aqua !important;
  font-size: 26px;
}
.categorybox a {
  text-decoration: none;
  font-size: 15px;
}
.categorybox {
  display: table;
  width: 100%;
  line-height: 1.2em;
}
.categorybox img {
  vertical-align: middle;
  max-height: 75px;
  overflow: hidden;
}
.categorybox td {
  display: table-cell;
  height: 75px;
  border: 1px solid #000 !important;
}
.categorybox tr td {
  vertical-align: middle;
}

タイトル色の変更は、6行目。
マウスオーバー色は、16行目で変更できます。

以上！お疲れ様でした。

おすすめ

WordPressに簡単最強レスポンシブ「Max Mega Menu」