THE THOR ザ･トール 固定ページ を使い トップページ を自由にレイアウト
当ページのリンクには広告が含まれています。
当サイト「からあげ棒、ありったけ」は THE THOR というワードプレステーマを使用しています。
どうせブログをやるなら人とは違ったデザインのサイトを構築したい。
そんな風に思う人は多いと思います。
特に有料テーマを購入するような人はそんな傾向が強いのではないでしょうか。
THE THOR の導入がまだの人はこちらをご覧ください。
人気記事THE THOR ザ･トール レビュー買いなのか？過去に戻れたらどのテーマを購入する？
テーマをダウンロード【圧倒的にSEOに強く･上位表示されやすい】 THE・THOR(ザ・トール)
今回は、固定ページを使いオリジナリティの高いトップページを作る方法を紹介していきます。
固定ページを使ったトップページ作成の
基本的な部分を紹介するのだ。
基本的な部分を紹介するのだ。
デザインやレイアウトに対する考えは色々。
このサイトの全部をみせても汎用性ないしな。
このサイトの全部をみせても汎用性ないしな。
目次
ブログ形式 と 固定ページについて
ブログ形式とは、投稿した記事がトップページに逆順（最新が上）で自動表示されるタイプのサイトです。一般的にブログといわれて思い浮かべるスタイルですね。
対して固定ページを利用したトップページ（固定トップ）というのは自動では何も表示されません。何も無い場所に自分の好みで表示したいコンテンツを配置する形となります。
ブログ形式は新着記事がメインコンテンツになる（なりがち）のに対し、固定ページではどのコンテンツを主役にするか自分で決めることができます。
たとえばオススメのカテゴリーをいくつかページ上部に表示し、自己紹介やサイトアピールをした後に新着記事情報を数件載せるなどです。
THE THOR の場合は豊富なウィジェットとエリアが準備されているので固定ページを使わずにトップページをカスタマイズすることもできますが、当サイトではより高い自由度を求めて固定ページを使ったトップページ、固定トップを採用しています。
トップページを固定ページで作る手順
固定トップを作るには、トップページになる固定ページと記事一覧を表示する固定ページ、2つの固定ページを準備する必要があります。
1.固定ページを新規追加で2つ作る
操作手順
固定ページ → 新規追加 → タイトルとパーマリンクを設定
固定ページ → 新規追加 → タイトルとパーマリンクを設定
固定ページの新規追加で2つの固定ページを作ります。それぞれのタイトルはHOME、投稿ページなどわかるような名前をつけます。
「からあげ棒、ありったけ」ではトップページとして使用する固定ページに「HOME」、記事を表示する固定ページに「記事一覧」というタイトルを付けています。
※それぞれスラッグ(パーマリンク)には「home」「list_articles」という名前を設定しています。
2つのページが準備できたら次の手順です。
2.ホームページ設定を固定ページに変更
操作手順
外観 → カスタマイズ → ホームページ設定
外観 → カスタマイズ → ホームページ設定
ホームページ設定は以下のように設定
ホームページの表示に「固定ページ」を選択。
ホームページに準備した固定ページ（HOME）を選択。
投稿ページに準備した固定ページ（記事一覧）を選択。
これで準備完了です。
なんだか初めてだと
ドキドキするよね。
ドキドキするよね。
トップページと投稿ページ、
2つのスペースが必要になるってことを理解するのに時間かかったぞ。
2つのスペースが必要になるってことを理解するのに時間かかったぞ。
THE THOR 固定ページ を トップページ に設定したらやるべきこと
準備完了した状態で自分のサイトのトップページを閲覧してみてください。
ヘッダーやフッター、サイドバーなどは表示されていると思いますが、肝心の中身がからっぽになっていると思います。
トップページとして準備した固定ページ(HOME)に文章などを書くとトップページに表示されるようになります。
えっ
ﾒﾝﾄﾞｸｻｲﾅ･･･
ﾒﾝﾄﾞｸｻｲﾅ･･･
まぁまぁ待て待て
固定ページ上に文字を打ち込んで作ることもできますが、当サイトではウィジェットを積み上げることによってトップページを作成しています。
とりあえずトップページとして機能する形を作成します。
やり方は色々とあります。ここでは「からあげ棒、ありったけ」で採用している方法で新着記事と記事一覧へのボタンを作ります。
まず新着記事を表示するためのウィジェット[THE]画像付き新着記事をトップページ上部エリアに設定。
これで新着記事がトップページに表示されます。
※詳細設定はサイトにあわせ設定してください。
操作手順
外観 → カスタマイズ → ウィジェット → トップページ上部エリア → [THE]画像付き新着記事 を選択
外観 → カスタマイズ → ウィジェット → トップページ上部エリア → [THE]画像付き新着記事 を選択
しかし、これでは数記事が表示されるだけです。
投稿記事の全てが閲覧できるよう記事一覧ページ（固定ページで準備した投稿ページ）へのリンクボタンを用意します。
記事一覧ページへのリンクボタンは[THE]スタイルテキストウィジェットを使います。[THE]スタイルテキストは、THE THOR の記事作成ページと同じスタイルが使用できる便利なウィジェットです。
ウィジェット上でテキストを打つのは大変なので投稿の下書きでボタンを作成してテキストエディタのコードをウィジェットにコピペすると楽ちんです。
操作手順
普段の記事と同じようにボタンを作成、コードをコピー →
外観 → カスタマイズ → ウィジェット → トップページ上部エリア →[THE]スタイルテキスト を選択 →
コードをペースト
普段の記事と同じようにボタンを作成、コードをコピー →
外観 → カスタマイズ → ウィジェット → トップページ上部エリア →[THE]スタイルテキスト を選択 →
コードをペースト
これで新着記事と記事一覧へのリンクボタンができブログ形式と同じような状態（最低限の状態）になりました。
あとは追加したいコンテンツをウィジェットを駆使して配置していくだけ。準備した2つの固定ページ内にデザインするのもありです。
※ウィジェットの並び換えは簡単にできます。
※トップページ下部エリアも使用可能。固定ページの下に表示されます。
※固定ページで作成した投稿ページには記事一覧が自動で表示されます。
ウィジェット[THE]画像付き新着記事を2列表示するカスタマイズ
あわせて読みたい
THE THOR ザ・トール [THE] 画像付き新着記事 ウィジェットを2列で表示する
THE THOR の『ウィジェット[THE]画像付き新着記事』を2列表示にするカスタマイズ。
参考「からあげ棒、ありったけ」のトップページ
「からあげ棒、ありったけ」のトップページに設定した固定ページはからっぽです。今後、より細かい表現をしようと思ったら使う可能性はあります。固定ページに記載はなし、つまり「からあげ棒、ありったけ」のトップページはウィジェットだけで構築されています。
「からあげ棒、ありったけ」のトップページで使用しているウィジェット一覧を記載します。
※ヘッダー、フッター、サイドバーエリアはまた別の設定となります。
追記：
使用しているウィジェットは上記画像の通りです。上記画像の中身について若干ですが追記いたします。
新着記事タイトル
新着記事タイトルは[THE]画像付き新着記事にタイトルをつけるためだけに使用しています。理由はタイトルに独自の装飾をするためです。
タイトルの装飾文字の左右にボーダー をつける
新着記事6件を表示
これは本記事掲載の通りです。
カスタマイズ新着記事を2列表示
記事一覧ボタン
これは本記事掲載の通りです。
AdSense広告
アドセンス広告のコードを入力。
おすすめカテゴリー×3
おすすめカテゴリーはショートコードのカテゴリー指定記事一覧（ランダム）を使用しています。投稿の下書きで内容を作成。テキストエディタでコードをコピーしてウィジェット[THE]スタイルテキストに貼り付けしています。
トップページの表示に変化を持たせたくランダムを使用しています。
ショートコードのカテゴリー指定記事一覧では、アイキャッチ画像/記事タイトル/記事冒頭部分が表示されます。もし記事冒頭部分が必要なければ下記のコードを追加CSSに記述してください。なお全てのショートコードに反映されるので注意。
.content .archiveScode__contents .phrase {
display: none;
}
以上です。
参考になれば幸いです。
記事ページの構成についてはこちらをご覧ください。
人気記事THE THORどこに何がある？どこで変更する？レイアウト デザインの基本
THE THOR 固定ページ を使い トップページ を自由にレイアウト
あとがき
この作業、最初の頃はなんだかわからず不安でした。
何度も作り直し、別サイトも作るようになってからやっと慣れて来ました。
やってみたけど思ったようには出来なかった・・・。
戻すのは簡単です。
ブログ形式に戻したいときは、ホームページの表示「最新の投稿」を選択。
ホームページと投稿ページの設定を「−選択−」を選んで解除すればもと通りのブログ形式となります。
※固定トップ用に設定したウィジェットなどは削除しましょう。
きちんと設定を戻さないとトップページに記事内容が全て表示されるというカオス状態になるので注意しましょう。
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント
コメント一覧 （33件）
いつも勉強させてもらっています。モバイル等で検索した際に検索結果にサイトの名前が表示されず、サイトのURLだけの表示になってしまい困っています。（ファビコンは出てきます）
固定ページをトップページに設定しているため「TOPページSEO設定」の項目が表示されず、こちらも影響しているのではないかと思うのですが、何か表示させるための良い方法はないでしょうか。
からあげ棒、ありったけサイトさんでは検索結果にサイトタイトルが表示されているため、可能でしたらご教授いただけると大変ありがたいです。一般設定でのタイトル設定は間違っておらず、影響しそうなSEO系のプラグインも入れていない状態です。
インデックス登録、キャッシュのクリア等の問題でもなかったです。
よろしくお願い致します。
コメントありがとうございます。
もし可能でしたらサイトのURLをお知らせください。
初めまして。いつもためになる情報をありがとうございます。
ずっと分からないことがあります。
固定ページのページ属性で「デフォルトテンプレート」を指定するとページの一番上にページのタイトル文字が表示されてしまいます。
固定ページのページ属性でテンプレートをLP用TPLにするとタイトルは表示されない代わりに、パンくずリストが表示されなかったり、ページ全体が細い線で囲われてしまいます。
教えてほしいことは２点あります。
①デフォルトテンプレートでタイトルを非表示にする方法が知りたいです
②LP用TPLでページ全体が細い線で囲われてしまうのですが、その線を非表示にしたい。
以上、お忙しいところ恐縮ですが、ご教授いただけると助かります。
ゆみさん、コメントありがとうございます。
1. こちらのタイトルは H1 のタイトルなのでSEO的に削除しないほうが良いと思います。CSSを使い非表示にすることもできますがおすすめできません。
2. 固定ページの細い線は以下のCSSで削除が可能です。ただし全ての固定ページに適用されます。また余白などは別途調整が必要となります。参考までに。
.u-border {border: none;}
ご確認ください。
いつも有益な情報をありがとうございます。
こちらの記事と以下の記事を参考に、
https://karaagebow.com/archives/11366
「ショートコードのカテゴリー指定記事一覧」を利用して、トップページをカテゴリー毎の新着記事が表示される様にカスタマイズをしました。
そうすると、アイキャッチが拡大されてぼやけてしまいました。
これはcssをカスタマイズすることで修正可能でしょうか？
けんさん、コメントありがとうございます。
実際のサイトをみてみないと何とも言えませんが、画像がぼやけるのは何か設定が良くない場所があるように思えます。
はじめまして。
質問があります。
the tthorでは、投稿記事の中で、選択的に一定の記事だけアドセンス広告を外すということはできますでしょうか。
アフィリリンクを貼っている記事でアドセンス広告を外したい場合どうしたら外すことができますか？
もし不可能であれば、固定ページで作成するしかないでしょうか。
お忙しいところ申し訳ありません。
よろしくお願いいたします。
ルッチさん、コメントありがとうございます。
返信遅くなりました。ごめんなさい。
特定記事でアドセンスを無効化する方法ですが、アドセンス広告の貼り方によって方法があると思います。
一番手軽で個人的にオススメなのは自動広告を利用することです。
アドセンス自動広告を設定し、THE THOR での広告設定（最初のH2など）をなしにします。
あとはアドセンスのほうで除外ページを設定すればOK
当サイトではトップページのアドセンスを除外しています。
ご検討ください。
からあげ棒さん、いつも楽しみに参考にさせていただいております。
２つお教えいただければと思うのですが、
Ｑ1.なぜTOPページの４つのボタンをクリックした場合のパンくずリストに「記事一覧」が入ってこないのでしょうか？
→からあげ棒さんの現在のTOPページの上部にある4つの「THOR」「LittleCub」などをクリックすると、クリックした先のパンくずリストは、「home→ワードプレス→THOR」となっています。
新着記事をクリックすると、「home→記事一覧→ワードプレス→THOR」となっています。
Ｑ2.そのTOPページの4つのボタンはどのように作成されているのでしょうか？
→直接カテゴリーに飛ぶので、固定ページのほうをいじっていらっしゃるのでしょうか？
お教えいただければ幸いです。
どうぞよろしくお願いいたします。
ブログ初心者さん、コメントありがとうございます。
凄い！細かいところ見てますね。
A1.4つのボタンはカテゴリーにリンクしています。
A2.現在のトップページはウィジェットの積み重ねではなく固定ページに記述しています。4つのボタンの部分は THE THOR のカラムを利用しています。
また何か気になる部分があればお気軽にどうぞ。
からあげ棒さん
早速のお返事ありがとうございます。とても端的にわかりやすくご回答いただき、ありがとうございます。
また気になることがありましたら、字義通りお言葉に甘えさせていただくと思いますので、その際もどうぞよろしくお願いいたします。
からあげ棒さんのTHORのカスタマイズ、新着記事、引続き楽しみにしています。
とても参考になりました☆ありがとうございます。
YUTAROさん
参考になったようで良かったです。
トップページのデザインがオリジナルになるとさらに自分のサイトに愛着がわきますよね！
からあげ棒さんの現在のトップページはどのようにすれば、マネできますでしょうか。また、カテゴリーの一覧はどのように作っているのでしょうか？教えていただけると、うれしいです。
JBさん、コメントありがとうございます。
質問の内容が幅が広すぎて答えるのが難しいです。
トップページはワンカラムで固定ページを利用。
カテゴリー一覧はカテゴリー新着記事をカスタマイズです。
質問の幅が広すぎましたね。
申し訳ありません。
具体的に言うと、ホームの3記事表示されるのはどのようなカスタマイズを行っているのかお聞きしたいなと思っています。
また、新着記事の2列表示カスタマイズを導入してみたのですが、ウィジェットの表示・非表示設定が機能しなくなりました。こうした問題は、起こりえるものでしょうか。
ご確認お願い致します。
2列表示の記事に追記をおこないました。参考にしてください。
https://karaagebow.com/archives/11366
ウィジェットの表示・非表示設定は当サイトでは機能したことがありませんので詳細はわかりません。カスタマイズをしていないサイトでも動作しません。
いつも参考にさせてもらっています。
からあげ棒さんと同じようなトップページにしたいのですが
ショートコードでカテゴリー指定記事一覧を表示させた時のデザインを変更は設定でされてますか？
私もカードデザインにしたいのですが設定の所で探したのですが見つかりませんでした。
cssでカスタマイズされてるのでしょうか？
お手数お掛けしますがよろしくお願いします。
ウィジェット[THE]カテゴリ人気記事も併用しています。
当サイトの場合だと、ウィジェット[THE]カテゴリ人気記事で３件、ショートコードで２件表示しています。
自分の思い通りにできました。
からあげ棒さんのサイトがすごく役立ちました。
本当にありがとうございます。
いつも参考にさせて頂いてます。
この記事のようにカテゴリーをショートコードを使って追加しました。
そうするとアイキャッチ画像と記事のタイトルと記事の序盤の部分が表示されるのですが
この記事の序盤の部分を消す方法はございますか？
お手数お掛けしますがよろしくお願いします。
記事に追記をしたのでご確認ください。
ご対応ありがとうございます。
からあげ棒さん
いつもブログを拝見して、参考にしております。
１点質問なのですが
スタイルテキストウィジットの「記事一覧ページへのリンクボタン」を貼り付けるとありますが
リンクボタンの作成はどの様に行えば良いでしょうか。
初歩的な質問で申し訳ございませんが
お手すきの際に教えて頂ければ幸いです。
何卒よろしくお願いします。
キタローさん、コメントありがとうございます。
通常の記事内でボタンを作成することは可能でしょうか？
普段の投稿のように記事内でボタンを作成します。テキストエディタでそのボタンのコードをコピーして
ウィジェット[THE]ステイルテキストに貼り付ければ完成です。
記事一覧ページのURLは固定ページなどで確認してコピーしてください。
お試しください。
よくわからないければまたコメントをいただければと思います。よろしくお願いいたします。
からあげ棒さん
ご丁寧にありがとうございました！
無事にボタンの意味を理解して、設置ができました！
ありがとうございます！
有益な情報をありがとうございます。
質問なのですが、
「追加したいコンテンツをウィジェットを駆使して配置していくだけ」とのことですが、固定ページで作成した投稿ページは、どこにウィジェットを配置して作成するのかが分かりません。トップページは、「ウィジェット」項目のトップページ上部やトップページ下部だと分かったのですが。ご教示頂けると助かります。
すずさん、コメントありがとうございます。
固定ページで作成した投稿ページはウィジェット[THE]スタイルテキストでリンクを作り配置します。
当サイトでいうと新着記事のあとにある黒いボタンが投稿ページへのリンクになります。
回答どうもありがとうございます。
有り難く大変感謝しております。
続きでまた質問があります。
ウィジェットのスタイルテキストでリンクのボタンを設置させることは、理解したのですが、固定ページで作成した投稿ページ（スラッグがlist_articles）は、固定ページで作成したトップページと同じように真っ白でしょうか？
作成したボタンからリンクして表示する記事一覧ページ（固定ページで作成した投稿ページ）には、何をすれば記事が表示されるようになるでしょうか？
まったくの初心者で、私は大前提が理解出来ていないかもしれず、大きな勘違いをしているかもしれません。お忙しいところ恐縮ですが、何とぞご教示お願いしたいです。
記事を書くと自動的に記事一覧ページに表示されるようになります。
なので固定ページで作成した投稿ページには特に何もする必要はありません。
試しに書いてみるとわかりやすいかもしれませんね。
親切なご回答をどうもありがとうございました。
手順通りに作業したところ、記事ページ一覧に記事が表示されました。
仕組みはよくわからず不思議ですが、表示されて嬉しいです！
大変助かりました。どうもありがとうございました！
初心者かつ無知な私にとって、追加CSSでのカスタマイズは簡単なので、からあげ棒さんの記事にとても助けられています。今後も記事を楽しみにしています！
どうもありがとうございました！！
からあげ棒さん、The Thorのカスタマイズを参考にさせて頂いています。
この記事の、ウィジェットで画像付き新着記事の6記事を2列で表示する方法を教えて頂けないでしょうか。
もし宜しければお願い致します。
逆立ち旅ブロガーさん
遅くなりました。記事をアップしたので良かったら見てください。
https://karaagebow.com/archives/11366