当サイト「からあげ棒、ありったけ」は THE THOR というワードプレステーマを使用しています。
どうせブログをやるなら人とは違ったデザインのサイトを構築したい。
そんな風に思う人は多いと思います。
特に有料テーマを購入するような人はそんな傾向が強いのではないでしょうか。
THE THOR の導入がまだの人はこちらをご覧ください。
人気記事THE THOR ザ･トール レビュー買いなのか？過去に戻れたらどのテーマを購入する？
テーマをダウンロード【圧倒的にSEOに強く･上位表示されやすい】 THE・THOR(ザ・トール)
今回は、固定ページを使いオリジナリティの高いトップページを作る方法を紹介していきます。
基本的な部分を紹介するのだ。
このサイトの全部をみせても汎用性ないしな。
ブログ形式 と 固定ページについて
ブログ形式とは、投稿した記事がトップページに逆順（最新が上）で自動表示されるタイプのサイトです。一般的にブログといわれて思い浮かべるスタイルですね。
対して固定ページを利用したトップページ（固定トップ）というのは自動では何も表示されません。何も無い場所に自分の好みで表示したいコンテンツを配置する形となります。
ブログ形式は新着記事がメインコンテンツになる（なりがち）のに対し、固定ページではどのコンテンツを主役にするか自分で決めることができます。
たとえばオススメのカテゴリーをいくつかページ上部に表示し、自己紹介やサイトアピールをした後に新着記事情報を数件載せるなどです。
THE THOR の場合は豊富なウィジェットとエリアが準備されているので固定ページを使わずにトップページをカスタマイズすることもできますが、当サイトではより高い自由度を求めて固定ページを使ったトップページ、固定トップを採用しています。
トップページを固定ページで作る手順
固定トップを作るには、トップページになる固定ページと記事一覧を表示する固定ページ、2つの固定ページを準備する必要があります。
1.固定ページを新規追加で2つ作る
固定ページ → 新規追加 → タイトルとパーマリンクを設定
固定ページの新規追加で2つの固定ページを作ります。それぞれのタイトルはHOME、投稿ページなどわかるような名前をつけます。
「からあげ棒、ありったけ」ではトップページとして使用する固定ページに「HOME」、記事を表示する固定ページに「記事一覧」というタイトルを付けています。
※それぞれスラッグ(パーマリンク)には「home」「list_articles」という名前を設定しています。
2つのページが準備できたら次の手順です。
2.ホームページ設定を固定ページに変更
外観 → カスタマイズ → ホームページ設定
ホームページ設定は以下のように設定
ホームページの表示に「固定ページ」を選択。
ホームページに準備した固定ページ（HOME）を選択。
投稿ページに準備した固定ページ（記事一覧）を選択。
これで準備完了です。
ドキドキするよね。
2つのスペースが必要になるってことを理解するのに時間かかったぞ。
THE THOR 固定ページ を トップページ に設定したらやるべきこと
準備完了した状態で自分のサイトのトップページを閲覧してみてください。
ヘッダーやフッター、サイドバーなどは表示されていると思いますが、肝心の中身がからっぽになっていると思います。
トップページとして準備した固定ページ(HOME)に文章などを書くとトップページに表示されるようになります。
ﾒﾝﾄﾞｸｻｲﾅ･･･
固定ページ上に文字を打ち込んで作ることもできますが、当サイトではウィジェットを積み上げることによってトップページを作成しています。
とりあえずトップページとして機能する形を作成します。
やり方は色々とあります。ここでは「からあげ棒、ありったけ」で採用している方法で新着記事と記事一覧へのボタンを作ります。
まず新着記事を表示するためのウィジェット[THE]画像付き新着記事をトップページ上部エリアに設定。
これで新着記事がトップページに表示されます。
※詳細設定はサイトにあわせ設定してください。
外観 → カスタマイズ → ウィジェット → トップページ上部エリア → [THE]画像付き新着記事 を選択
しかし、これでは数記事が表示されるだけです。
投稿記事の全てが閲覧できるよう記事一覧ページ（固定ページで準備した投稿ページ）へのリンクボタンを用意します。
記事一覧ページへのリンクボタンは[THE]スタイルテキストウィジェットを使います。[THE]スタイルテキストは、THE THOR の記事作成ページと同じスタイルが使用できる便利なウィジェットです。
ウィジェット上でテキストを打つのは大変なので投稿の下書きでボタンを作成してテキストエディタのコードをウィジェットにコピペすると楽ちんです。
普段の記事と同じようにボタンを作成、コードをコピー →
外観 → カスタマイズ → ウィジェット → トップページ上部エリア →[THE]スタイルテキスト を選択 →
コードをペースト
これで新着記事と記事一覧へのリンクボタンができブログ形式と同じような状態（最低限の状態）になりました。
あとは追加したいコンテンツをウィジェットを駆使して配置していくだけ。準備した2つの固定ページ内にデザインするのもありです。
※ウィジェットの並び換えは簡単にできます。
※トップページ下部エリアも使用可能。固定ページの下に表示されます。
※固定ページで作成した投稿ページには記事一覧が自動で表示されます。
ウィジェット[THE]画像付き新着記事を2列表示するカスタマイズ
THE THOR のウィジェット [THE] 画像付き新着記事 をカスタマイズ。 [THE]画像付き新着記事は、新着記事を横幅いっぱいに表示することができます。 個人的に画像が大きすぎると感じました。特にPC[…]
参考「からあげ棒、ありったけ」のトップページ
「からあげ棒、ありったけ」のトップページに設定した固定ページはからっぽです。今後、より細かい表現をしようと思ったら使う可能性はあります。固定ページに記載はなし、つまり「からあげ棒、ありったけ」のトップページはウィジェットだけで構築されています。
「からあげ棒、ありったけ」のトップページで使用しているウィジェット一覧を記載します。
※ヘッダー、フッター、サイドバーエリアはまた別の設定となります。
追記：
使用しているウィジェットは上記画像の通りです。上記画像の中身について若干ですが追記いたします。
新着記事タイトルは[THE]画像付き新着記事にタイトルをつけるためだけに使用しています。理由はタイトルに独自の装飾をするためです。
タイトルの装飾文字の左右にボーダー をつける
これは本記事掲載の通りです。
カスタマイズ新着記事を2列表示
これは本記事掲載の通りです。
アドセンス広告のコードを入力。
おすすめカテゴリーはショートコードのカテゴリー指定記事一覧（ランダム）を使用しています。投稿の下書きで内容を作成。テキストエディタでコードをコピーしてウィジェット[THE]スタイルテキストに貼り付けしています。
トップページの表示に変化を持たせたくランダムを使用しています。
ショートコードのカテゴリー指定記事一覧では、アイキャッチ画像/記事タイトル/記事冒頭部分が表示されます。もし記事冒頭部分が必要なければ下記のコードを追加CSSに記述してください。なお全てのショートコードに反映されるので注意。
.content .archiveScode__contents .phrase {
display: none;
}
以上です。
参考になれば幸いです。
記事ページの構成についてはこちらをご覧ください。
人気記事THE THORどこに何がある？どこで変更する？レイアウト デザインの基本
THE THOR 固定ページ を使い トップページ を自由にレイアウト
あとがき
この作業、最初の頃はなんだかわからず不安でした。
何度も作り直し、別サイトも作るようになってからやっと慣れて来ました。
やってみたけど思ったようには出来なかった・・・。
戻すのは簡単です。
ブログ形式に戻したいときは、ホームページの表示「最新の投稿」を選択。
ホームページと投稿ページの設定を「−選択−」を選んで解除すればもと通りのブログ形式となります。
※固定トップ用に設定したウィジェットなどは削除しましょう。
きちんと設定を戻さないとトップページに記事内容が全て表示されるというカオス状態になるので注意しましょう。