フロントページでカテゴリー毎の最新記事を並べて表示する方法【Simplicity】

このブログのフロントページ(トップページ・ホーム)を、元々の普通に新着記事がリスト表示されてるだけの状態から、固定ページを使って「各カテゴリー毎の新着記事をそれぞれ5件づつ表示」するデザインに変更してみました。

元は寝ログさんのようなデフォルトの状態でしたが

固定フロントページの設定方法

それを現在はこうしました▼

固定フロントページの設定方法

意外とけっこうこのスタイルにしたい人って多いと思うので、とりあえずこのブログで使っている Simplicityテーマをベースにした前提で今回僕がやったカスタマイズの手順を解説記事として残してみます。

違うテーマを使っていても大体の手順は同じで、ただ表示デザインを調整するための CSS の書き方がテーマによってちょっとづつ違ってきちゃうところはあると思います。その辺は、自分で頑張ってみるか、最悪クラウドソーシングで誰か詳しい人に CSS を書いてもらったらいいと思います。(今回僕自身がそうしました)

フロントページでカテゴリー別に新着記事を表示するためのプラグインと手順

今回このデザインに変更するにあたり、プラグインを新たに2つインストールしました。プラグインはなるべく少ない方がいいとは思うので一瞬どうしようか迷ったんですが、プラグインを使わずに理想形に仕上げるにはなかなかの勉強量が必要になってくるっぽい感じがしたので、潔く諦めてプラグインに頼りました。

使ったプラグインは次の2つです。

  1. Newpost Catch
  2. Page Builder by SiteOrigin

リンク Newpost Catch プラグイン作者のブログ

どちらもそこそこ名の知れたプラグインなので触ったことのある人も多いかと思います。僕は両方とも過去に一度は使ったことがありました。今回、他のプラグインも一応検討はしたんですが、いまいちわざわざ新しい未知のプラグインを使うに値するほど惹かれるものがなかったので、安定感のあるこれら人気プラグインを使うことにしました。

ちなみに「Newpost Catch」はその名の通り、新しい記事を表示するためのプラグインです。ウィジェットでカテゴリー毎に最新記事一覧を表示でき、サムネイル画像の表示もできるので、これでいいかなという感じで。ちなみに欠点としては、いまのところ「記事の日付の表示が上手くできない」という問題があります。日付表示は必須だという人の場合は、自力で解決するために頑張るか、他の同種のプラグインを当たってみた方がいいかもしれません。

「Page Builder」の方は、なんて言ったらいいか。。いわゆる一般的な“ホームページ”ってありますよね。ああいうデザインをややこしい HTML とか書かなくても簡単に実装させてくれるプラグインです。多分、固定ページでフロントページを作成している人のうち少なくない人がこれを使っているんじゃないでしょうか。

作業手順は次の通り。

  1. 両プラグインをインストールして有効化
  2. 固定ページを Page Builder で作成
  3. その固定ページに Newpost Catch ウィジェットを設定していく
  4. Newpost Catch での表示デザインを CSS で調整
  5. フロントページとしての余計な情報を CSS で非表示にする
  6. 完成した固定ページをフロントページに設定

難しいことをするわけじゃありません。ただ僕は今回、「4.Newpost Catch での表示デザインを CSS で調整」でハマりました。丸一日潰してしまい、その挙句自力では綺麗にできなかったのでクラウドワークスで依頼して CSS を人に書いてもらいました。

なのでこの記事で紹介する CSS は、僕がお金を出して人に書いてもらったものです。(感謝してねw)

ハマる可能性があるとしたらこの CSS の書き方ぐらいのものなので、もし CSS がよく分からない人は初めからさっさと人に依頼した方がいいと思います。ちなみに僕は今回3,250円だったかな? で依頼しました(手数料等が引かれ、ワーカー側の取り分 2,500円)。参考までに。

Page Builder でフロントページ用の固定ページを作成

まずはプラグインを入れて、フロントページとして使う固定ページを作成していきます。

固定ページ作成時、今回の場合はいじるところは3箇所だけ。下図の ① ~ ③ だけで済んでしまいます。

固定フロントページの設定方法

まず ① は、上のスクショ画像には何も書かれていませんが、普通固定ページの新規追加や編集画面を開くと、「ビジュアル」「テキスト」のどちらのモードで書いていくかを選択できるタブがありますよね。Page Builder プラグインを有効化するとそこに「ページビルダー」というタブも加わります。なのでそのタブをクリックする、という意味での ① です。

そして次に ② 、「列を追加」です。

固定フロントページの設定方法

このように初めから2カラム表示のデザインが表示されるので、今回はそのままで良いのでそのまま画面右下の「挿入」をクリック。すると下図のようにページ内に2カラム1行の列ができます。

固定フロントページの設定方法

この作成されたスペースに何かしらコンテンツを埋めていくわけですが、今回は Newpost Catchプラグインを使ってここに新着記事ウィジェットを入れていきます。

左右どちらかのカラムをクリックして選択した状態にして、③ の「ウィジェットを追加」をクリック。すると挿入するウィジェットを選ぶ画面になるので、Newpost Catchのウィジェットを選択します。

固定フロントページの設定方法

Newpost Catchウィジェットの設定

ウィジェットを入れたカラムの上にマウスを持っていくと「編集 重複 削除」という選択項目が表示されるので、編集をクリックします。

固定フロントページの設定方法

するとここに入れたウィジェットの設定をいじれます。

固定フロントページの設定方法

上の画像はデフォルトの状態です。ここから、必要に応じて、今回の場合は ① ~ ⑤ までを適宜設定していきます。番号順に設定内容を解説すると次の通りです。

  1. 最新記事リストのタイトル。カテゴリ名などを書く
  2. 画像のサイズは、僕は今回「幅 75px, 高さ 80px」で設定しました
  3. 表示件数。僕は一応今のところ暫定的に5件づつ表示
  4. デフォルトCSS はチェックを外してください。デフォルトCSS で思い通りのデザインに表示される人はいないでしょうから
  5. カテゴリ毎の新着記事を表示するためにはここにカテゴリIDを入力。ブログ全体の最新記事を表示する場合は空欄のままで

以上でこのウィジェットの設定は完了です。画面右下の「終了」をクリックします。

で、このウィジェットを入れて設定する作業を、フロントページで表示させたいカテゴリーの数だけ繰り返し行います。一通りウィジェットを入れ終わったら、フロントページ用の固定ページの作成は完了です。

Newpost Catch の表示を整える CSS

今僕の環境ではもう既に綺麗に表示するための CSS を書いてしまっているので再現できませんが、恐らくここまでの作業をしてきて固定ページをプレビューすれば、新着記事リストの表示がぐちゃぐちゃなはずです。

使っているテーマ(Theme)次第でどうぐちゃぐちゃかは違ってきますが、それぞれのテーマに合わせて CSS で表示を整えてあげる必要があります。

僕と同じように Simplicity を使っている場合は、僕の CSS を丸パクリしてみてください。気になる点があればそこから適宜手を加えていってみると時間短縮になるかと。

こちらが僕の現状での CSS です。

#npcatch li {
list-style: none;
overflow: hidden;
margin-bottom: 10px;
}

#npcatch li a {
text-decoration:none;
color:#111;
}

#npcatch li a:hover {
text-decoration:underline;
color:#c03;
}

#npcatch li img {
float:left;
margin-right: 5px;
}

#npcatch {
padding: 0;
font-size:14.4px;
}

フロントページとしての余計な情報を非表示にする

さて、ここまで来たら後は仕上げ程度です。

普通に固定ページをフロントページに設定してしまうと、下図のようにページタイトルや日付が表示されてしまいます。(確かパンくずリストは勝手に非表示になった気がします)

固定フロントページの設定方法

なのでこれを消します。CSS で非表示にする指示を書きます。下の CSS の「post-数字」の数字部分だけ、フロントページに設定しようとしているページの ID に変更してください。僕の場合は 920 でした。

/*フロント固定ページのタイトルと日付を消す*/
#post-920 .entry-title {
 display:none;
}
#post-920 .post-meta {
 display: none;
}

完成した固定ページをフロントページに設定

最後に完成した固定ページをフロントページに設定すれば終了です。

一般的な方法としては「ダッシュボード」→「設定」→「表示設定」で下図のところでフロントページを設定します。

固定フロントページの設定方法

テーマに Simplicity を使っている人は「ダッシュボード」→「外観」→「カスタマイズ」でカスタマイザーで「固定フロントページ」から設定できます。

固定フロントページの設定方法

おわり

かなり駆け足な説明になってしまっているかも? という気がしないでもないので、もし何かつまづくポイントなどありましたらコメントください。できるだけ素早く回答します。


以上です、
ではまた

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ Simplicityカスタマイズ, ブログの話


コメント

  1. SAKURAKO より:

    記事を参考にカスタマイズしているのですが、CSSの設定があわないのかうまく整列した状態になりません・・・

    • ぴらひこ より:

      何が原因なのか推察しかねますが、もしCSSだけの問題であるようなら詳しい人に聞いてみるのが早いと思います。
      クラウドワーキングサービスで依頼してみれば、例えば3,000円とかぐらいでさっと綺麗な表示が可能じゃないかと思います。延々とあーでもないこーでもないとやるよりかは良いかと。

      参考までに、この記事内のCSSを書いてもらったクラウドワーカーさんの情報をここに書いておきます。
      『クラウドワークス』というサイトで『syplanning』さんという方に書いてもらいました。
      https://crowdworks.jp/public/employees/805575

      個人的には計2回お世話になっているワーカーさんですが、仕事が早くて丁寧で安心して頼める方です。

      何か参考になりましたら幸いです

  2. NAE より:

    まさにやりたいことドンピシャのカスタマイズでした。ありがとうございます!

    1点だけご報告です。
    PHP 7.1、WordPress 4.8.1でNewpost Catch 1.3.4を使うとPHPのWarningが出ました。
    プラグインのソースの一部に手を入れる必要がありました。(class.phpの117行目)
    Netpost Catchの作者の方にもバグ報告を行いましたが、念のため……

  3. より:

    大変素晴らしい記事ありがとうございます。まさに自分がやりたい事でした。雑記ブログのようなカテゴリが多くあるサイトにとってこの記事は極めて有用性が高いと思います。本当にありがとうございました。

トップへ戻る