このブログ「いつもていねいに」を書いている 小田やかた です。
プロフィールはこちら、Xのアカウントはこちらです。

WordPressのテーマ「JIN」でCSSをさわることなくトップページをサイト型にカスタマイズする方法を紹介します。

「JIN」だけでなく、他のWordPressのテーマを使っている場合にも参考になる方法だと思います。

サイト型とは

一般的なブログのトップページは新着記事のみが並ぶ場合が多いですが、サイト型ブログとは、トップページに各カテゴリー別の新着記事を表示させるなど、読者がコンテンツを探しやすく、記事へアクセスしやすくしたブログです。

目次

１　サイト型にカスタマイズする方法

まずは、完成形を見てください。

トップページにブログのテーマの説明、最新記事、カテゴリー別の最新記事、という並びにしています。

このようなトップページにする方法を順番に解説します。

（１）トップページ上部のヴィジェットを作成

まずは、ブログのテーマの説明を表示させます。

もし、不要な場合は次の項に進んでください。

WordPressの管理画面の「外観」から「ヴィジェット」を選びます。

次の画像のように、「テキスト」を「トップページ上部」までドラッグします。（画像はiPad）

これを２回繰り返し、「トップページ上部」に２つの「テキスト」を追加します。

上の「テキスト」にブログのテーマの説明を書きます。

下のテキストには「最新記事」と見出しを書いています。ここは好みです。なくても問題ありません。

（２）トップページ下部のヴィジェットを作成

同じように、今度は「トップページ下部」に「テキスト」をドラッグします。ドラッグする数は、トップページに表示させたいカテゴリーの数プラス１です。

プラス１は見出しの分です。

見出しは、以下の画像のとおり「カテゴリー別の新着記事」と入れています。

他にいろいろ複雑なコードが書いてありますが、これは文字に動きを出すためのコードです。これは、機会があれば別の記事で紹介します。

（３）プラグイン「Shortcodes Ultimate」で最新記事のコードを取得

カテゴリー別の最新記事のコードを取得するため、プラグイン「Shortcodes Ultimate」をインストールします。

小田やかた
小田やかた
WordPress管理画面の「プラグイン」＞「新規追加」＞「プラグインの検索」で、「Shortcodes Ultimate」を検索して、インストールしたら「有効化」してください。

プラグインを有効化したら、投稿＞新規追加 から新たな記事を作成する画面を開きます。

次の画像のとおり「＋」を押し、表示されたメニューから「ショートコード」を選びます。（画像はグーテンベルクのビジュアルエディタ）

表示されたメニューから「ショートコードを挿入」と表示される［］のアイコンをタップします。

たくさんメニューが表示されますので「ギャラリー」を選びます。

新たにウインドウが開くので、ソースは「タクソノミー」を選び、その下は「カテゴリー」を選びます。

すると自分のブログのカテゴリーが表示されますので、表示させたいカテゴリーを選びます。

下にスクロールさせ、「制限」はトップページに表示させたい記事の数を設定します。

その下の「リンク」と「リンクターゲット」はお好みで設定してください。私はデフォルトのままです。

幅と高さはお好みで設定してください。

「JIN」のアイキャッチ画像は「１６：９」が推奨されていますので、私は幅３2０、高さ１８０にしています。

「タイトルを表示」は「常に」に設定しておくと、アイキャッチ画像と一緒に記事のタイトルも表示されます。

最後に左下の「ショートコードを挿入」をタップします。

（４）取得したコードをヴィジェットにペースト

挿入されたショートコードをコピーします。

それを先ほど作ったヴィジェットの「トップページ下部」のテキストにペーストします。タイトルはカテゴリー名を入れてくたざい。

あとは、同じように別のカテゴリーも設定するだけです。

これで、トップページにカテゴリーごとの最新記事が表示されます。

２　まとめ

この方法なら一切CSSをさわらなくていいので、CSSに詳しくない方にはオススメです。

手順をまとめると次のとおりです。

  1. ヴィジェットのトップページ上部にテキストを挿入しブログのテーマを書く
  2. ヴィジェットのトップページ下部にテキストを挿入する
  3. プラグイン「Shortcodes Ultimate」でカテゴリー別の最新記事のコードを取得する
  4. 「３」で取得したコードを「２」で作成したヴィジェットにペーストする

ちなみにCSSを書いてトップページをサイト型にカスタマイズする方法は次のサイトが参考になります。私はCSSを大々的に触るのが怖くて今回紹介した方法にしましたが•••。

どこよりも簡単にJINのトップページをサイト型にカスタマイズ！ | ぽんひろ.com

また、JINの有料プラグイン「SPACE」をインストールすることで、サイト型のトップページを作れそうですが、残念ながら、私が見たときはダウンロードできなくなっていました。（開発者様に連絡しましたが音沙汰がありません）

この記事は以上です。

このブログの更新情報や、iPhone・iPadを活用した効率的なインプット・アウトプットの方法を X で発信しています。もしご興味があれば、ぜひ以下のボタンからフォローしてください。また、拙著の一覧はこちら（Amazon著者ページ）からアクセスできます。

＼今すぐFollow！／

小田やかた を

このブログには、iPhone・iPad・Apple Watch、アプリ、Kindle出版、ブログ運営などに関する記事があります。カテゴリーページや下にある「関連記事」を、ぜひご覧ください。

JIN
ABOUT ME
アバター画像
小田やかた
ブロガー＆Kindle作家。二人の子どもを持つ共働きサラリーマンです。（プロフィールの詳細）iPhone・iPadアプリを活用した効率的なインプットとアウトプットの方法を発信しています。