カスタマイズって難しいのかな？
せっかくなので読みやすくお洒落なトップページにしていきたいですよね！
手順を踏んでいけば簡単なので画像付きで説明していきます☆
こんな方におすすめ
- WordPressを開設したばかりでどんなデザインにして良いかわからない
- サイト型のブログを作ってみたい！
- 見やすくお洒落なサイトを、なるべく簡単にカスタマイズしたい
初期設定がまだの方はこちらから先に設定をしてください↓↓
目次
トップページおすすめカスタマイズ【AFFINGER6】
完成イメージ
ちなみにこのカスタマイズ手順は、「Classic Editor」というプラグインを使用しています。
Classic EditorとはWordPressのエディターを新バージョンから、旧バージョンに戻すプラグインです。
Classic Editorをインストール→有効化しサイトをカスタマイズし、またGutenberg（新バージョン）を使用したい場合は無効化してください。
プラグインの説明は下記記事を参考にして下さい。↓↓
１．ヘッダーカードの設定
ヘッダーカードとは、↑こちらの画像の部分ですね。画像をクリックするとおすすめのカテゴリーや記事を一目で見やすく表示することができます。
まず、WordPress管理画面から「AFFINGER管理」→「ヘッダー下 / おすすめ」へと進んでいきます。
①「画像のURL」は、WordPress管理画面から、「メディア」→「ライブラリ」へと進み好きな画像をクリックすると右下に「URLをクリップボードにコピー」と出てくるのでこちらをクリックしてコピーすることができます。そちらを貼り付けてください。
②「テキスト」は表示させたい文字を自由に入力してください。
③「リンク先URL」は、表示させたい記事のURLを入力してください。
④最後に「Save」で保存し完了です！
２．固定ページ【土台】の作成
トップページの土台となるものは、「固定ページ」で作成をしていきます。
投稿と固定ページの違い
投稿：ブログ記事などを書く機能
固定ページ：「トップページ」「プロフィール」などの独立したページを作成する機能
WordPress管理画面で「固定ページ」→「新規追加」をクリックしてください。
あとでわかりやすいようタイトルに「トップページ」と入力していきましょう。
３．新着記事【スライドショー】の作成
では、新着記事【スライドショー】を作成していきましょう！
まずは、先ほど作成した土台となる固定ページの画面にいきます。
「見出し3」など表示させたい好きな見出しを選びます。
ポイント
見出し設定がまだ出来ていない方は、こちらの記事を参考にして下さい。↓↓
そして「新着記事」や「What's new!」など、新しい記事だとわかるような文言を入力しましょう。
入力をしたら改行をします。
次は、「タグ」→「記事一覧/カード」→「カテゴリ一覧（スライドショー）」の順に選択してクリックをして下さい。
これだけでショートコードが挿入され、新着記事のスライドショーが表示されます！
続きがあるので、まだ「公開」はせず次の項目へ…！
４．レイアウト【バナー風ボックス】の設定
続いては、レイアウト【バナー風ボックス】の設定です！
先ほどの新着記事のスライドショーのショートコードの下に入力をしていきます。
３．新着記事【スライドショー】の作成と同じ要領で、見出しを使って「おすすめ記事」や「Recommend」などと入力していきましょう。
見出しが出来たら、改行をし「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」をクリックします。
注意
「全サイズ」でも「左右50％」が選べるのですが、スマホ表示にした時に崩れてしまうので「PCとTab（959px以上）」を選ぶよう注意してください！
そうするとこのような画面になります。
次は、左側黄色の箇所の「このテキストは最後に消して下さい（50%）」の文章終わりで改行した状態でカーソルをあわせ、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」をクリックします。
そうすると、黄色の部分にこのようにショートコードが入りました。
全く同じように、右側青色の箇所にもカーソルをあわせて、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」をクリックするとショートコードが入ります。
それでは、バナー風ボックスにタイトルと画像を入れていきましょう。
【title="タイトル"】"タイトル"の箇所に入れたいタイトルを自由に入力します。
【backgroud_image=""】" "の中に表示させる画像のURLを入力します。
メモ
画像は、【１．ヘッダー下のおすすめ記事】の項目でお伝えしたのと同様、WordPress管理画面から「メディア」→「ライブラリ」で好きな画像をクリックすると右下に「URLをクリップボードにコピー」と出てくるのでこちらをクリックしてコピーすることができます。編集する際はビジュアルモードからテキストモードに切り替えてコピペしましょう。
これで、【バナー風ボックス】の設定ができました！
次の項目へと続くので、まだ「公開」はしないでください。
５．レイアウト【ブログカード】の設定
次は、レイアウト【ブログカード】の設定です。
引き続き、土台となる固定ページのトップページの画面に入力をしていきます。
まず、左側黄色の箇所のショートコードが、[/st-flexbox]という文字で終わっているはずなので、改行をし次の行にカーソルを合わせて下さい。
その状態で「カード」をクリックするだけでショートコードが挿入されます。
表示させたい記事数分、改行をしてカードをクリックしてショートコードを増やしてください。
青色側の部分も同じように挿入していきましょう。
①id=""：" "の中に記事IDを入力します。
ポイント
記事IDはWordPress管理画面の「投稿」→「投稿一覧」から確認できます。
②「このテキストは最後に消して下さい（50%）」の箇所は不要なので削除してください。
最後にパーマリンクを「toppage」などと入力し、「公開」すれば完了です！
６．固定ページとトップに配置
最後に、今作成した固定ページをトップに配置されるよう設定をしていきます。
WordPress管理画面から「外観」→「カスタマイズ」→「ホームページ設定」をクリックします。
「ホームページの表示」を、「固定ページ」と選択し、「ホームページ」の箇所は先ほど作成した「トップページ」を選択し「公開」をクリックしてください。
以上で完成です！
まとめ
新しく記事が書けたら、記事IDを変更するだけでその都度おすすめ記事を入れ替えることができます。
記事数が増えればカテゴリーを増やしても良いですね☆