こんにちは、Naokiです(@naoki_blogger)。
この記事ではこんな疑問を解消します。
WordPressテーマ 「ACTION（AFFINGER6）」のトップページカスタマイズは、難しそうに感じますよね。しかし案外簡単なんです。
- 当サイトの記事では、ブログカードの表記ズレを修正する方法
- 新着記事と、おすすめ記事の設定方法
この２つを主に解説していきます。
他のブロガーの記事では、ブログカードに表記ズレが起きてしまいます。これってブログカードのサイズを指定してないからなんです。
この記事を読めば、順序よく正確に、WordPressテーマ 「ACTION（AFFINGER6）」のトップページがカスタマイズできます。
記事の内容
- ブログカードとバナーとは何か？
- 事前準備、投稿IDのメモ＆画像のアップロード場所、確認
- カスタマイズ編、おすすめ記事と新着記事を表示する方法
- 反映編、固定ページをホームページ化する設定
記事の信頼性
- AFFINGERのトップページで表記ズレを経験
- AFFINGER歴4ヶ月だけど、よく使ってる
- AFFINGERの設定記事をよく書いている
注意ポイント
お願いがあります。最初に紙とメモを用意してください。AFFINGERのトップページは変更する要素が多いため、混乱しやすいです。紙を使って、設定箇所などをメモしましょう。
トップページの完成画像
下準備編、投稿IDのメモ＆画像のアップロード場所
具体的なトップページのカスタマイズ方法は、下の見出しで書いていきます。affingerのトップページを変更する前に、やっておくべき過程があります。
メモ
- ホームページに表示させたい記事を最低4コ用意
- 記事の投稿IDをメモ
- バナーに表示させたい画像を2つ用意
- 画像のアップロード場所を確認
投稿IDの確認方法は、Wordpress管理画面から投稿→投稿一覧→IDと書かれた場所の下をメモ(数字が書かれているはず)。
画像のアップロード場所は、後々バナーに画像を設定する際に役立ちます。画像の投稿方法は、Wordpress管理画面のメディア→ライブラリの下にある新規追加を選択。
バナーとは？
Webライティングと、プログラミングと書かれたエリアのことです。バナーにカテゴリー先のリンクを貼ることも出来ます！
ブログカードとは？
記事の表記方法の一種です。見た目的にもブログカードは、サイトをお洒落にしてくれます。
以下のとおりに進めれば、OKですよ！
画像の用意(最低2枚)→記事の投稿IDをメモ(最低4コ)
画像サイトは以下がオススメ！
»Storyset(クレジット表記必須)
»Illustrations(クレジット表記不要)
»Pixabay(クレジット表記不要)
記事の投稿IDは、Wordpress管理画面から投稿→投稿一覧→IDと書かれた場所の下をメモするだけ(最低4コあれば大丈夫)。
さて画像の用意と、記事投稿IDのメモが終わったらカスタマイズ編に移りましょう。
カスタマイズ編、おすすめ記事と新着記事を表示する方法
さていよいよカスタマイズ編です。こんな感じで進んでいきます。
ポイント
固定ページの作成→コードの入力→ブログカードの高さ調整→プレビューで確認
画像と一緒に解説しますので、安心してください。プログラミングの知識は不要です。
【AFFINGER】トップページカスタム、固定ページの作成
WordPress管理画面から、固定ページ→新規追加を選択。
新規追加を選ぶと、新規固定ページを追加に飛ばされます。
まずは、新規記事のエリアを作成していきます。
「新規記事」と入力し、見出し3を選択。その後、ビジュアル編集画面のタグ→記事一覧 / カード→カテゴリ一覧を選択しましょう。
ビジュアル編集画面のタグ→記事一覧 / カード→カテゴリ一覧を選択
下のコードのようになっていれば、おｋです。
コードの解説
- st-catgroup=”0”、表示させる記事のカテゴリー(現在は無設定)
- page=”5”、読み込む記事の数
- slide=”off”、記事の表示方法をスライドにする設定(重くなるため、オフ)
公開のプレビューを押して以下の表示例のようになってれば大丈夫。
一回ここまで作業が終わったら、下書き保存をしておきましょう。下書き保存をしておくと、作業の途中でミスをしても安心ですよ。
さておすすめ記事の設定に移ります。
新規記事のコードの下に、「おすすめ記事」と入力します。ビジュアル編集画面からタグ→レイアウト→PCとTabで左右50%を選択。
レイアウトが追加された画面
バナーとブログカードを作成していきます。バナーは、タグのボックスデザイン→バナー風ボックス→基本を選択。
ブログカードの追加方法は、ビジュアル編集画面のカードから可能です。
今回いじるバナーのコード。
- url=”カテゴリー先のリンク”、カテゴリー先のリンクが好ましい
- title=”タイトル”、記事のジャンルを入力する
- backgroud_image="画像のリンク先"、表示させたい画像のURL
それぞれで入力したいコードは変わってきます。あくまで僕の一例ですが、紹介します。
コードの入力例(画像リンクのみ未記入)
数字やアルファベットは、“”内に入力していけば、大丈夫ですよ。
title=”記事のジャンル名”、url=”カテゴリー先のリンク”を入力します。カテゴリー先リンクは、以下の画像のようにコピペすればOkです。
さて、コードに画像を追加していきます。メディアから新規追加で、用意した画像を設定します。
ファイルをドラッグ&ドロップすれば大丈夫です。アップロードすると以下の表記に変わります。
あとは、「URLをクリップボードにコピー」を選択するだけです。URLは、メモしておいた方がいいですね。
【AFFINGER】トップページのカスタム、コードの入力
さて画像を追加していきます。
おすすめ記事の 画像を追加すれば、バナーの設定は終わりですよ。下書き保存して、プレビューを見ましょう。 異常がなければ、ブログカードの設定に移ります。 ブログカードの追加方法は、ビジュアル編集画面→カードを選択して、
注意ポイント
必ず[/st-flexbox]の下で改行し、ブログカードは追加してください。
ブログカードで、いじる項目は以下のとおり。
- id=””、記事の投稿ID
- pc_height=””、ブログカードのサイズ調整
- readmore=””、続きを見るを設定する項目(offを推奨)
今回は2個なので、2つ分のブログカードを追加していきましょう。
完成画面は以下のとおり。
- id=””には、メモした記事の投稿IDを入力します。
- pc_height=””は、150を入力。
- readmore=””は、offを記入。
公開のプレビューで確認して、リンクとカテゴリー先リンクが機能していれば設定は終わりです。
右側も左と同様に、記入してみてください。必ずpc_height=””の入力は忘れないでくださいね。
設定が完了したら、公開をクリックします。最後に固定ページをホームページ化すれば、完成です。
反映編、固定ページをホームページ化する設定
先程、設定をした固定ページをホームページ化していきます。やり方は、WordPress管理画面の外観からカスタマイズ→ホームページ設定へ移動。
その後、ホームページの表示を固定ページに変更します。ホームページの表示の下にある、ホームページから固定ページ選ぶ。
カスタマイズのホームページ設定
ホームページの表示を最新の投稿→固定ページに変更。
手順が少しややこしいですが、標準の投稿ページを固定ページ化するって事です。以上ですべての設定は完了です！
ここまでお疲れさまでした。
AFFINGERの購入は、WordPressテーマ 「ACTION（AFFINGER6）」からどうぞ。
AFFINGERの関連記事
。 この記事ではこんな疑問を解消します。 読者 「WordPressテーマ 「ACTION（AFFINGER6）」のトップページってどうカスタ){kind=link}