WordPress

【JIN】固定トップページに新着記事一覧(お知らせ)を載せる方法【簡単カスタマイズ】

固定トップページに新着記事一覧(お知らせ)を載せる方法

今回は、JINで固定トップページにした時、新着記事一覧(お知らせ)を載せる方法をご紹介します。

ちなみに、CSSやphpコードを書き換えたりすることはありませんので、初心者の方も安心して下さいね。

固定トップページに新着記事一覧(お知らせ)の完成例

新着記事完成例

新着記事一覧の出来上がりはこんな感じになります。(記事内容な伏せています)

リンクの色や枠線の色や線種は、JINでは「テーマ」-「カスタマイズ」-「カスタマイザー」で調整できますよ。

新着記事一覧の作り方の手順

1、「What’s New Generator」をインストール

What's New Generatorインストール

新着記事一覧を載せるためには、「What’s New Generator」というプラグインをインストールします。

このプラグインは新着記事の一覧を、コードを貼るだけで載せることができるというものです。

「ダッシュボード」-「プラグイン」-「新規追加」から「What’s New Generator」をインストールし、「有効化」させておきましょう。

「What’s New Generator」の設定方法を簡単に説明

「設定」-「What’s New Generator設定」を開きます。

What's New Generatorの設定画面
  1. タイトルを枠内に入れたい時はここに入れます。
  2. 新着一覧に表示するページの種類を選びます。今回は「投稿」を選びます。
  3. 表示件数を選びます。
  4. 「変更を保存」をクリックします。
  5. 「ショートコード」をフロントページ(トップページ)の表示させたいところに張り付けます。

JIN以外のテーマの方は、「What’s New Generator」のプレビュー通りに表示されるので、これだけで大丈夫だと思います。

一度プレビューしてみましょう。

JINだと新着記事一覧がかなり大きく表示されてしまう

JINでプレビューしてみると、上の画像のように、なぜか余白をたっぷり取って、かなり大きい新着記事一覧が出来上がってしまいます。

これでOKな方はこのまま使って頂いて良いのですが、気になる方は表示形式を変える必要があります。

場所を取り過ぎてバランスが悪いですよね。

2、「Page Builder by SiteOrigin」をインストールする

Page Builder by SiteOriginをインストールする

Page Builder by SiteOrigin」とは、ページの好きなところにウィジェットエリアを簡単に作ることができるプラグインです。

カラム数を分けたり、ドラッグ&ドロップだけで思い通りのレイアウトにすることができるので、初心者にはとても頼りになる存在なのです。

「Page Builder by SiteOrigin」の使い方を簡単に説明

固定ページの「フロントページ(トップページになるページ)」を表示します。

フロントページは何も書かれていない状態にしておいて下さい。既に何か書いてある場合はメモ帳などにコピーしておき、後で貼り付けましょう。(フロントページの「タイトル」は任意のものを入れて下さいね。)

1.「ページビルダー」のタブをクリックします。
「Page Builder by SiteOrigin」の使い方

画面右上の「ページビルダー」のタブをクリックします。

2.「ウィジェットを追加」をクリックします。
「Page Builder by SiteOrigin」

ページビルダーの画面に切り替わります。この画面で、カラム数を設定したり、ウィジェットを入れることができます。

「ウィジェットを追加」のボタンをクリックします。

3.「テキスト」をクリックします。
「Page Builder by SiteOrigin」テキストを追加。

ウィジェットの一覧から「テキスト」を選びます。

Richテキストエディターで作りたい時は、プラグイン「SiteOrigin Widgets Bundle」も併せてインストールしておくと便利ですよ。
4.「編集」をクリックします。
「Page Builder by SiteOrigin」

ページにテキストウィジェットが追加されました。内容をいれるためには「編集」をクリックします。

5.JINのボックスコードと「What’s New Generator」のショートコードを入れる。
「Page Builder by SiteOrigin」コード

JINのボックスコードと、先ほど作った「What’s New Generator」のショートコードを入れます。私はBox4の細枠のものを使っています。

良かったらコピペして下さいね。

出来上がったら「保存」しておきましょう。

新着情報一覧は完成です。プレビューしてみましょう。

3、フロントページを完成させる

このコードの後に、先ほどコピペした内容を貼り付けるか、新たにウィジェットを追加してフロントページを完成させましょう。

固定トップページに新着記事一覧(お知らせ)を載せる方法のまとめ

固定トップページにかわいい新着記事一覧(お知らせ)を載せる方法はいかがでしたでしょうか?

CSSコードを書き換えたくない場合は、今回のようにプラグインで作ってみるのもおすすめですよ。

JINカスタマイズ
【JIN】トップページの記事タイトルを非表示にする方法【コピペOK】WordPressテーマJINでトップページの記事タイトルを非表示にする方法をご紹介しています。...
格安でホームページを作りたい方におすすめです!
格安でホームページの作成をします