WordPress

AFFINGER5で固定ページを使ったトップページの作り方は?

AFFINGER5で固定ページを使ったトップページの作り方は?
AFFINGER5で作ったサイトのトップページを、最新記事が並んでるだけじゃなくて、カテゴリーごとに記事を分けて使いやすくカスタマイズしたい。どうしたらいいの?

 

それならトップページ用に固定ページを作って、それをトップページにするのがオススメだよ♪
ゆうか堂

 

 

AFFINGER5のトップページは、そのままでも機能的で、デザインも見やすくて使いやすいです。

しかしこだわりのある人は、もっとカスタマイズして、より自分好みのトップページにしたい人も多いかも知れませんね。

 

そこでここでは、AFFINGER5で固定ページを使った、トップページのカスタマイズ方法について見ていきます。

 

固定ページを使わないカスタマイズ方法は?

この記事では、固定ページを使ったトップページのカスタマイズ方法を紹介しますが、元からあるトップページをカスタマイズしたい方は、こちらの記事をどうぞ。

 

AFFINGER5のトップページのカスタマイズ方法は?
AFFINGER5のトップページのカスタマイズ方法は?

ブログやサイトの顔ともいうべきトップページ。自分の個性や、扱う商品・コンテンツの特徴を表す、魅力的で読者が利用しやすいデザインにしたいですね。ここではAFFINGER5のトップページのカスタマイズ方法を、画像を交えながら紹介していきます。

続きを見る

 

 

トップページ用の固定ページ作成例

トップページ用の固定ページ作成例

固定ページを使うと、このように記事のスライドショーカテゴリー別に分かれた記事コーナーを、好きな場所に作ることができます。

 

ここでは、この2つのコンテンツの作り方を紹介します。

 

 

トップページ用固定ページの作り方

ではここから実際に、トップページ用の固定ページを作っていきます。

 

「Classic Editor」プラグインのインストール

固定ページを作り始める前に、プラグイン「Classic Editor」を新規追加&有効化しておきます。

もう済んでるという方は、先に進んで下さい。

 

トップページ用固定ページの作り方
  1. 管理画面左のメニューから、「プラグイン」→「新規追加」を選択
  2. 右上の検索窓に、「classic editor」と入力
  3. プラグイン「Classic Editor」が表示されるので、「今すぐインストール」をクリック
  4. 同じ場所に表示される「有効化」をクリック

 

 

トップページを固定ページで作成

インストール完了後、左メニューから「固定ページ」→「新規追加」を選択すると、上のような画面になります。

 

上の「新規固定ページを追加」の下の部分に、ページのタイトルを入力しましょう。

特にこだわりが無ければ、「トップページ」で良いと思います。

 

この状態から、トップページを作っていきます。

 

 

「記事スライドショー」の作成

「記事スライドショー」の作成
  1. タブから「見出し3」を選択
  2. 「新着記事」など、タイトルを入力

 

 

「記事スライドショー」の作成

カーソルを見出しの下に置いた状態で、

  1. 「タグ」→「記事一覧」→「カテゴリ一覧(スライドショー)」を選択

 

 

「記事スライドショー」の作成

コードが表示されるので、

  1. 「cat」にカテゴリーID
  2. 「page」にスライド表示させたいページ数

を、それぞれ入力します。

 

 

カテゴリーIDの調べ方

カテゴリーIDの調べ方

「カテゴリーID」は、左メニューの「投稿」→「カテゴリー」を選択してページを開くと、表示されています。

 

 

「カテゴリー別記事コーナー」の作成

「カテゴリー別記事コーナー」の作成
  1. タブから「見出し3」を選択
  2. 「おすすめ記事」など、タイトルを入力

 

 

「カテゴリー別記事コーナー」の作成
  1. 「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」を選択

 

 

「カテゴリー別記事コーナー」の作成

このような画面になります。

 

 

バナー風ボックスの挿入

「カテゴリー別記事コーナー」の作成

まず、カテゴリー名を入れる「バナー風ボックス」を作ります。

  1. 黄色の枠の中にカーソルを置いて、「ボックスデザイン」→「バナー風ボックス」→「基本」を選択
  2. 青色の枠でも同様にして、コードを入力します

 

 

「カテゴリー別記事コーナー」の作成
  1. 「title」にカテゴリー名を入力
  2. 「backgroud_image」に、挿入する画像のURLを入力(URLの確認方法は下にあります↓)
  3. 青色の枠でも同様に、2つの項目を設定します

 

 

挿入する画像URLの確認方法

左メニューから、「メディア」→「ライブラリ」を選択します。

 

挿入する画像URLの確認方法

アップロード済みの画像の中から挿入したいものをクリックすると、「添付ファイルの詳細」という画面が開き、右下にURLが表示されています。

すぐ下にある「URLをコピー」ボタンをクリックして、URLをコピーできます。

 

 

バナー風ボックスの挿入

プレビュー画面で確認すると、こんな感じでバナー風ボックスが入ってるかと思います。

 

 

ブログカードの挿入

続いて、ブログカードを挿入していきます。

 

ブログカードの挿入
  1. 「バナー風ボックス」のコードの直後にカーソルを合わせ、右上の「カード」ボタンをクリック
  2. 「ブログカード」のコードが表示されるので、「id」に表示させたい記事の「記事ID」を入力
  3. コード直後に9、10を繰り返すことで、下にどんどん記事を追加できる
  4. 青い枠でも同様に行う

 

「記事ID」は、左メニューの「投稿」→「投稿一覧」から確認できます。

 

 

ブログカードの調整

記事の設定ができたら、固定ページ編集画面の右側のボタンから、プレビュー画面を開いて確認します。

 

ブログカードの調整

記事の抜粋された文章や「続きを見る」ボタンが入り、カードが縦長に並んで見づらいですね。

これらを改善していきます。

 

 

 【抜粋文の設定】
ブログカードの調整
  1. 左メニュー「AFFINGER5 管理」→「AFFINGER5 管理」の「抜粋設定」にある、「PC閲覧時の『ブログカード』及びコンテンツ内の『おすすめ記事』の抜粋を非表示にする」にチェックを入れる
  2. 同じページにある「save」ボタンをクリックして設定を保存します

 

 

【「続きを見るボタン」の設定】
「続きを見るボタン」の設定

コードの値を変えることによって、ブログカードのデザインをカスタマイズできます。

  • readmore」に「on」または「off」を入れることで、「続きを見る」ボタンの表示・非表示を切り替えられます
  • pc_height」に数値を入れることで、ブログカードの高さの設定が可能

 

 

完成

コード表示部分の一番上の「このテキストは最後に消して下さい(50%)」をいう部分を消去すれば、ブログカードの完成です。

 

ブログカード完成

 

 

固定ページをトップページに反映させる

最後に、完成した固定ページをトップページに反映させます。

 

固定ページをトップページに反映させる

左メニュー「外観」→「カスタマイズ」→「ホームページ設定」を選択してから、

  1. 「固定ページ」を選択
  2. 固定ページの中から、先ほど作ったページの名前を選択
  3. プレビュー画面が表示されるので、確認した後に「公開」をクリック

 

これで、カスタマイズした固定ページがトップページとして反映されました。

 

 

まとめ

以上、『AFFINGER5』で固定ページを利用する、トップページのカスタマイズ方法について見てきました。

 

いくつかあるカテゴリーを際立たせたい時などに、紹介したカテゴリー別記事のコーナーは有効ですね。

他にも様々なコンテンツを入れたりできるし、アイデア次第で自由自在に個性豊かなトップページが作れそうです。

 

『AFFINGER5』についての詳細や購入は、こちらからどうぞ。

 

 

AFFINGER5で固定ページを使ったトップページの作り方は?
アフィンガーの評判・口コミをレビュー!購入して損した理由とは?

アフィンガー(AFFINGER5)はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。

続きを見る

 

-WordPress
-

Copyright© ネットビジネス覚え書き , 2021 All Rights Reserved Powered by AFFINGER5.