【THE THOR】固定ページを使ったLPの作り方（直帰率を改善）

2020年8月6日
2020年11月30日
Wordpress
THE THOR, Wordpress, ブログ

本記事ではワードプレスの有料テーマ、ザ・トール（THE THOR）で固定ページを使ったLP（HOME）の作り方を詳しく解説しています。記事を読み終えた後、読者の大半はHOMEをチェックしてその他類似する記事を探していますので、トップページはしっかり準備しておきましょう。

作業時間は10分もかからずできますので、参考にしてみてください。

えみり

ちなみに以下の手順通り進めていただくと、当サイトとほぼ同じLPが作成できるようになります。笑

LPを作成することにより、読者によるサイトの滞在時間が増え、直帰率が改善します。従ってある程度記事数やカテゴリーが増えてきた方は、ぜひLPを作成してみてください。実際に当サイトもLPを作成しただけで平均滞在時間が大幅にUPしましたよ！

1 固定ページで用意するもの
- 1.1 HOME用ページの作成
- 1.2 記事一覧用ページの作成
2 THE THORでLPページをカスタマイズ
3 THE THORのLPはカスタマイズが自由

固定ページで用意するもの

まずは、ダッシュボードの固定ページから以下2つページを用意してください。

HOME用のページ
記事一覧用のページ

設定は、それぞれ画像を見ていただくと分かりやすいかもしれません。

HOME用ページの作成

ホームの設定

LPページの設定箇所は赤枠の3か所です。

タイトル⇒HOMEが分かりやすいかと
パーマリンク⇒homeにしました
ページ属性⇒テンプレートはLP用TPLを選択

これでHOMEは作成完了です。次に記事一覧を作っていきましょう。

記事一覧用ページの作成

記事一覧ページ

記事一覧用ページでの設定箇所も赤枠の3か所です。

タイトル⇒記事一覧で良いと思います
パーマリンク⇒articlesにしました
meta robots設定⇒ここは人によって設定が変わりますが、私はnoindexにしています

これで固定ページの準備は完了です。

THE THORでLPページをカスタマイズ

いよいよカスタマイズしていきます。

ホームページ設定

以下の手順でホームページ設定をしてください。

外観⇒カスタマイズ⇒ホームページ設定

設定は上から順に選択して、必ず公開ボタンを押してくださいね！

ホームページの表示⇒固定ページ
ホームページ⇒HOME（先ほど固定ページで作成したHOME用ページ）
投稿ページ⇒記事一覧（先ほど固定ページで作成した記事一覧用ページ）

ここまではスムーズに設定できたのではないでしょうか？予め設定しているヘッダーが表示されると思います。ちなみに当サイトは記事をメインに表示させたく、「ヘッダーは邪魔だな。。」と判断したためヘッダーのロゴは非表示にしました。ここはお好みで表示させてください。

次はHOME（メインページ）に表示させたいおすすめ記事や広告を設定していきましょう。

ウィジェットを設定

外観⇒カスタマイズ⇒ウィジェット

トップページ上部エリアを設定していきます。ちなみに当サイトの設定状態をご参考まで以下解説しております。

THE画像付き新着記事：投稿数6記事、本文抜粋文字数０
THE スタイルテキスト：新着記事はこちら
THE おすすめ記事：カテゴリー【稼ぐ】から特におすすめの記事を4記事ピックアップしています（記事一覧に載っているIDを入力）
THE おすすめ記事：カテゴリー【働く】から特におすすめの記事を4記事ピックアップしています

こんな感じです。まだまだ完成までは程遠いですが、試行錯誤しながら今の状態に落ち着いています。ちなみに今はカテゴリーごとの主力記事（アクセスの多いものやアフィリエイト記事）を4記事ピックアップさせています。

カテゴリーのタブごとに記事を表示させる方法もメインページがコンパクトに収まって良いかなとも思っています。

プライマリボタンを使った新着記事一覧用のボタンを作成

HOMEに新着記事一覧のボタンを作成していますが、この設定方法についても解説していきますね。

実際には下書きを利用して、色味や枠の設定等いくつか練習してみてください。

共通ボタン⇒プライマリボタン（中央）を使う

新着記事一覧

設定方法は、上記を左クリックすると編集・リンクを削除と出てくるので、編集を選択します。次にリンク設定ボタンをクリックしてください。URLは先ほど作成した固定ページの記事一覧を選択し、タイトルは新着記事一覧と設定すれば、上記のようにボタンを作成することができます。

スタイルテキストで新着記事ボタンを表示させる

上記で新着記事一覧のボタンを作成したら、次はHOMEに表示させましょう。

ウィジェットからTHE スタイルテキストを追加してください。

スタイルテキストを使ってボタン（URLリンク）を表示させるためには、本文のところに文字をただ打つのではなく、HTMLを書き込む必要があります。「HTML・・難しそう。」と思う方もいらっしゃると思うので、簡単な表示方法です。

プライマリボタンをHTMLで表示させる方法はすごく簡単で、ビジュアル⇒テキストに切り替えるだけ！

該当するHTMLをコピーして、本文に貼り付ければ簡単に表示させることができますよ。当サイトで表示しているボタンのHTMLは以下の通りです。

新着記事一覧ボタンのHTML表示

<div class=”btn btn-center”><a class=”btn__link btn__link-primary” href=”https://記事一覧ページのURLを入力”>新着記事一覧はこちら</a></div>

ご自身のURLを埋め込んでコピペしてご使用ください。

追加CSSで記事を2列表示させる

デフォルトの場合ですとトップページに1列で表示されます。個人的には、ちょっと大きすぎるかなと思いトップページは2列にするようにカスタマイズしております。この方が記事数を多く表示させられるので、読者も読みたい記事を見つけやすいですよ。

2列の方法は、追加CSSにHTMLを書き出します。これもコピペしてご使用ください。

外観⇒カスタマイズ⇒追加CSS

2列表示させる追加CSS: .widgetArchive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li.widgetArchive__item{
width:calc(50% – 6px);
text-align: center;
background-color: #fff;
box-shadow: 0px 1px 3px 0px #ccc;
margin-bottom: 12px;
padding-bottom: 4px;
}
.widgetArchive .heading a{
font-weight: 400;
padding:0 4px;
}