【THE SONIC】フロントページ（トップページ）の作り方・カスタマイズ【画像付き】

WordPressテーマTHE SONICで作ったブログのトップページのカスタマイズ方法を画像を使ってわかりやすく説明します。

この記事は

• トップページに特定の記事を固定して表示させたい
• サイトのようなデザインにしたい

という時の参考になると思います。

この方法は「THE SONIC開発メンバーのくまさんのサイト」に載っている方法です。

その記事中に提供されているコードを使用させていただいて作成していきます。

作業しやすいようにリンク先にある提供コードをメモ帳などにペーストして保存しておきましょう。

それでは早速説明します。

THE SONICトップページのカスタマイズ方法

この方法はWordPressの「再利用ブロック管理」の機能とTHE SONICの「フロントページCTA設定」を利用した方法です。

再利用ブロックで新規追加

まずはWordPressの「再利用ブロック管理」で再利用ブロックを新規で作成します。

• WordPressにログイン
• 左カラムの再利用ブロック管理
• 新規追加をクリック

タイトルを入力してコードをペースト

記事を書くようなページが表示されます。

• まずはタイトルを入力します。（なんでもいいです。私はフロントページとしました。）
• 本文部分で右クリックして上記した「くまさんのサイト」で提供されているコードをコピーして「プレーンテキストとして貼り付ける」をクリックして貼り付けます。
  

ブロックの形で表示される

下記画像のようにブロック形式で表示されます。

編集していく

画像の挿入やテキストの入力をして自分が表示させたいトップページを作っていきます。そのままの形で利用してもいいですし、追加もしくは削除などして自由に作りましょう。

下の画像はサンプルとして適当な画像を入れてみました。
完了したら右上の公開をクリックしましょう。下書きのままでは表示されないので注意してください。

再利用ブロック管理に戻る

ページが出来上がったら再利用ブロック管理に戻りましょう。

• 左カラムの再利用ブロック管理をクリック
• 上記で作ったページ（フロントページ）が反映されています。
• 右側に表示されているショートコードをクリックしてコピーします。

SONICオリジナル機能のフロントページCTA設定を行う

ここからTHE SONICオリジナル機能のフロントページCTA設定をしていきます。

左カラムの外観のカスタマイズをクリック

SONICオリジナル機能をクリック

フロントページCTA設定ををクリック

ファーストビューCTA機能の使用するにチェックを入れる。

スクロールして下にあるHTMLカスタマイズボックスの使用するにチェックを入れる。そして下の記入できる場所に再利用ブロック管理でコピーしたショートコードをペーストする。

これで完了です。反映されているかブログのトップページを確認しましょう。

WordPressテーマTHE SONICなら
ConoHa WINGのWINGパックがお得です。