賢威7 カスタマイズ コードやプログラム必要なし！トップページでカテゴリー別に最新記事を並べて表示する方法

SEOに強いと評価の高いWordPressテーマ「賢威」。

いくつかのサイトを、賢威を使って作成しました。（このサイトも賢威を使用しています）
評判通り狙った検索ワードで上位に出てくることが多いです。

付録の賢威SEOマニュアルもボリューム満点ですごく勉強になりました。

ただ一つ不満があります。

デザイン的に他のWordPressテーマに見劣りしてしまうような気がします。

個人的見解の差もあると思いますが、なんだか無骨な感じがどうしても拭えません。

Google検索してみると多くの賢威カスタマイズ記事があるので「かっこいい感じ」「おしゃれな感じ」など素敵なサイトにカスタマイズすることができます。

ということで今回紹介するのは賢威7のトップページのカスタマイズ。

無料、有料のWordPressテーマのトップページは最新記事の紹介ですよね。

なんだか味気ないなと思ったので、カテゴリー別に新着記事を表示できるようにカスタマイズしようと考えました。。

コードの書き換えではなく、WordPressプラグインを使いました。

賢威だけではなくほとんどのWordPressテーマでも利用可能かと思います。
よければ最後までご覧ください。

トップページをカスタマイズするのに必要なプラグイン

デザインに変更に使用したワードプレスプラグインは2つ。

• Newpost Catch
• Page Builder by SiteOrigin

Newpost Catch

新しい記事を表示するためのプラグイン。
ウィジェットでカテゴリーごとに最新記事一覧を表示できます。
サムネイル画像の表示もできるんです。

Page Builder by SiteOrigin

はHTMLなどのコードを使用せず視覚的に実装させてくれるプラグインです。
使い方はとても簡単。

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

画像を交えながら紹介したいと思います。
2つのプラグインをインストールして有効化してくださいね。

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

固定ページ新規作成をしてま「ビジュアル」「テキスト」の横に「ページビルダー」というタブがあります。
ページビルダーをクリックしてください。（Page Builderをインストール、有効化していないと表示されません。注意してください。）

画面がページビルダーように切り替わります。
赤丸の「列を追加」をクリック。

2カラムのデザインが表示されます。
そのまま画面右下の「挿入」をクリック。
するとページ内に2カラム1行の列ができます。

Newpost Catchの設定

Newpost Catchプラグインを使ってカラムにカテゴリー別新着記事ウィジェットを入れていきます。

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

画面からNewpost Catchのウィジェットを選択します。

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

すると以下のような画面になります。

上から説明します。
「タイトルには」カテゴリ名などを記入。

「サムネイルの設定」では画像のサイズを決めます。
幅120px、高さ120pxで設定。

「投稿件数」は表示件数。
5件づつ表示で変更なし。

「プラグインフォルダ内のデフォルトCSS 」についているチェックを外します。

「投稿タイプ」は変更なし。

「特定のカテゴリーを指定して表示」では、カテゴリーの新着記事を表示させるためにカテゴリIDの入力が必要。
サイドバーの「投稿」→「カテゴリー」を選択。
表示させたいカテゴリーのタイトルの上にカーソルを合わせると下にIDが表示されます。

表示されたIDを入力します。
ブログ全体の最新記事を表示する場合は空欄のままでOKです。

画面右下の「終了」をクリックして終了。

「さらに表示」ボタンを作成

カテゴリー別の新着記事を作成したらその下に「さらに表示」というボタンを作成します。

NewPost Cashを作成したカラムを選択した状態で「ウィジェットを追加」をクリック。
「SiteOrigin Button」を選択します。

以下のように表示されます。

SiteOrigin Buttonの上にカーソルを合わせて「編集」をクリック。
編集していきます。

画像が少し小さいですが、簡単に説明します。

「Button text」はボタンの上の文字。
ここでは「さらに表示」と入力しました。

「Destination URL」はボタンをクリックした時の移動先（リンク先）を入力します。

「Icon」の下のボタンをクリックするとさまざまなアイコンが表示されます。
お好きなアイコンを選択してください。

そして出来上がった感じがこんな感じ。

記事数を「5」で表示させたいのに1つしかない場合はこのように見た目が崩れてしまいます。

もっと多くの記事を作成、投稿して行きたいと思っています。

Newpost CatchのデザインをCSSでカスタマイズ

下記のコードをbase.cssかプラグインのカスタムCSSに入力してデザイン表示をカスタマイズします。

参考にさせていただいたのか下記サイト。
https://prime-dict.com/?p=993
ありがとうございます。

フロントページの日付とタイトルをCSSで非表示にする方法

固定ページをフロントページに設定するとページタイトルや日付が表示されてしまいます。
非表示にするコードをCSSに入力。

※このコードをカスタムCSSやbase.cssに入力してもタイトルが消えませんでしたorz。
一年前に作成したサイトはフロントページのタイトルが消えています。

どのようにタイトルを消したか忘れてしまいましたorz。

誰か知っている人がいれば教えてください。

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

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

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

まとめ

出来上がったトップページを確認してみてください。

先ほども書きましたが、投稿記事数が少ないためにPCでのデザインがまだ良くありません。

きちんと表示できるようにもっと記事数を増やしていきます。

当ブログにお越しいただいた方にとってお役に立てる記事であれば嬉しいです。