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

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

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

 

えみり
ちなみに以下の手順通り進めていただくと、当サイトとほぼ同じLPが作成できるようになります。笑
LPを作成することにより、読者によるサイトの滞在時間が増え、直帰率が改善します。従ってある程度記事数やカテゴリーが増えてきた方は、ぜひLPを作成してみてください。実際に当サイトもLPを作成しただけで平均滞在時間が大幅にUPしましたよ!
スポンサーリンク

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

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

  1. HOME用のページ
  2. 記事一覧用のページ

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

 

HOME用ページの作成

 

ホームの設定

 

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

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

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

 

スポンサーリンク

記事一覧用ページの作成

 

記事一覧ページ

 

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

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

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

 

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

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

スポンサーリンク

ホームページ設定

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

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

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

 

  1. ホームページの表示⇒固定ページ
  2. ホームページ⇒HOME(先ほど固定ページで作成したHOME用ページ)
  3. 投稿ページ⇒記事一覧(先ほど固定ページで作成した記事一覧用ページ)

 

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

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

 

ウィジェットを設定

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

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

 

  1. THE画像付き新着記事:投稿数6記事、本文抜粋文字数0

  2. THE スタイルテキスト:新着記事はこちら

  3. THE おすすめ記事:カテゴリー【稼ぐ】から特におすすめの記事を4記事ピックアップしています(記事一覧に載っているIDを入力)

  4. 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>

<div></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;
}
上記の追加CSSを入力するとサイドバーやメニューバーも2列表示が適用されてしまうので、サイドバーとメニューバーは画像無しで記事表示させることをおすすめします。

THE THORのLPはカスタマイズが自由

これでLP(HOME)っぽくなったと思います。そのほかにも広告を貼ったり、カテゴリーを表示させたりと、THE THOR(ザ・トール)はカスタマイズが自由自在です。

 

えみり
LPを作成してからは、サイトの平均滞在時間が2分以上伸びましたし、直帰率が80%⇒65%まで改善したりと、いいこと尽くしですね。
読者は訪れたサイトにどんな記事があるかトップページを見て判断しますので、訪問してくれた方にぴったりの記事を提供できるようサイト運営者としては日々工夫していきたいところですよね。
他にもTHE THOR(ザ・トール)の設定方法で参考になりそうな記事を載せておりますので、合わせて参考にしてみてください。公式サイトは⇒【THE THOR(ザ・トール)】
参考記事

THE THOR(ザ・トール)を使用して数日が経過しましたが、設定に手こずった以下の2つに関して、記事にまとめました。内部リンクって何?どうやって記事に貼り付けるの?グローバルメニューが画面にうまく表示されないん[…]

内部リンク表示方法
参考記事

当サイトはワードプレスの有料テーマTHE THOR(ザ・トール)を開設当初から使用しています。使い始めて約1年が経過しましたが、ここで気になる感想を私なりの視点でご紹介いたします。正直言って初心者でも簡単に使える高スペックな有料テーマで[…]

ザ・トールのレビュー
スポンサーリンク
THE THOR 固定ページ
最新情報をチェックしよう!