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

固定ページで用意するもの
まずは、ダッシュボードの固定ページから以下2つページを用意してください。
- HOME用のページ
- 記事一覧用のページ
設定は、それぞれ画像を見ていただくと分かりやすいかもしれません。
HOME用ページの作成
LPページの設定箇所は赤枠の3か所です。
- タイトル⇒HOMEが分かりやすいかと
- パーマリンク⇒homeにしました
- ページ属性⇒テンプレートはLP用TPLを選択
これでHOMEは作成完了です。次に記事一覧を作っていきましょう。
記事一覧用ページの作成
記事一覧用ページでの設定箇所も赤枠の3か所です。
- タイトル⇒記事一覧で良いと思います
- パーマリンク⇒articlesにしました
- meta robots設定⇒ここは人によって設定が変わりますが、私はnoindexにしています
これで固定ページの準備は完了です。
THE THORでLPページをカスタマイズ
いよいよカスタマイズしていきます。
ホームページ設定
以下の手順でホームページ設定をしてください。
- 外観⇒カスタマイズ⇒ホームページ設定
設定は上から順に選択して、必ず公開ボタンを押してくださいね!
- ホームページの表示⇒固定ページ
- ホームページ⇒HOME(先ほど固定ページで作成したHOME用ページ)
- 投稿ページ⇒記事一覧(先ほど固定ページで作成した記事一覧用ページ)
ここまではスムーズに設定できたのではないでしょうか?予め設定しているヘッダーが表示されると思います。ちなみに当サイトは記事をメインに表示させたく、「ヘッダーは邪魔だな。。」と判断したためヘッダーのロゴは非表示にしました。ここはお好みで表示させてください。
次はHOME(メインページ)に表示させたいおすすめ記事や広告を設定していきましょう。
ウィジェットを設定
- 外観⇒カスタマイズ⇒ウィジェット
トップページ上部エリアを設定していきます。ちなみに当サイトの設定状態をご参考まで以下解説しております。
THE画像付き新着記事:投稿数6記事、本文抜粋文字数0
THE スタイルテキスト:新着記事はこちら
THE おすすめ記事:カテゴリー【稼ぐ】から特におすすめの記事を4記事ピックアップしています(記事一覧に載っているIDを入力)
THE おすすめ記事:カテゴリー【働く】から特におすすめの記事を4記事ピックアップしています
こんな感じです。まだまだ完成までは程遠いですが、試行錯誤しながら今の状態に落ち着いています。ちなみに今はカテゴリーごとの主力記事(アクセスの多いものやアフィリエイト記事)を4記事ピックアップさせています。
カテゴリーのタブごとに記事を表示させる方法もメインページがコンパクトに収まって良いかなとも思っています。
プライマリボタンを使った新着記事一覧用のボタンを作成
HOMEに新着記事一覧のボタンを作成していますが、この設定方法についても解説していきますね。
実際には下書きを利用して、色味や枠の設定等いくつか練習してみてください。
- 共通ボタン⇒プライマリボタン(中央)を使う
スタイルテキストで新着記事ボタンを表示させる
上記で新着記事一覧のボタンを作成したら、次は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;
}
THE THORのLPはカスタマイズが自由
これでLP(HOME)っぽくなったと思います。そのほかにも広告を貼ったり、カテゴリーを表示させたりと、THE THOR(ザ・トール)はカスタマイズが自由自在です。


THE THOR(ザ・トール)を使用して数日が経過しましたが、設定に手こずった以下の2つに関して、記事にまとめました。内部リンクって何?どうやって記事に貼り付けるの?グローバルメニューが画面にうまく表示されないん[…]
当サイトはワードプレスの有料テーマTHE THOR(ザ・トール)を開設当初から使用しています。使い始めて約1年が経過しましたが、ここで気になる感想を私なりの視点でご紹介いたします。正直言って初心者でも簡単に使える高スペックな有料テーマで[…]
