THE THOR(WordPressテーマ)のTOPページの設定

2018年11月の下旬にインストールして使い始めたWordPressテーマ「THE THOR」

THE THORは、機能が多いだけに設定項目が多いのが特徴です。

無料版のライオンブログを使いこなしていた人であれば設定の仕方も馴染みがあり、少しは当たりがつくと思うのですが、テーマをはじめて使う人やあまり慣れていない人は最初は難解に感じるのではないかと思います。

そこで初心者や慣れていない人の作業効率を上がるようにと、このサイト風にするためにどこをどう設定したかを簡単に解説したいと思います。

何となく感覚を掴んで作業効率をあげて頂ければ幸いです。

とはいえ、設定項目は結構な量です。

ここでは、TOPページで見える部分、特にヘッダーの設定などを中心に解説します。

少しでも参考になればと思います。

THE THORの設定「TOPページ」

TOPページ・ヘッダーの設定

まずは、TOPページのヘッダーからです。

THE THORの場合、設定する項目の殆どは、「外観」-「カスタマイズ」にあります。

以降は「カスタマイズ」内にあるメニューで解説していきます。

ヘッダー部分は「共通エリア」-「ヘッダーエリア設定」で設定

ヘッダー部分とは、このサイトのTOPページでは下図の矢印の部分です。

尚、下記の図は当サイトを立ち上げた当初の画面です。現在は、「TUKAERU-LAB」を「使えるラボ」に変更し、画像(メインビジュアル)も削除しています。

以下の説明は旧画面をもとに進めます。

ヘッダーの設定は、TOPページだけでなく全てのページで共通です。

ヘッダーエリア

ヘッダーの設定は「カスタマイズ」の、

「共通エリア設定」-「ヘッダーエリア設定」で行います。

このサイトの例は、

「ヘッダーのテキストカラー」で「白文字」(TUKAERU-LAB)を選択し、

「ヘッダーの背景色」を「006699」に設定しています。

その他はデフォルトのままです。

尚、ヘッダーにロゴ画像を設定する場合は、

「基本設定」-「サイトロゴの設定」の「サイトロゴ画像を登録」で設定します。

参考:THE THOR、画像・カラーの設定(ヘッダーにロゴ画像を設定)

但し、このままでは、ヘッダーエリアの色とサイドエリアのタイトル部分の色との均衡が取れないため、これを合せるために、サイドエリアのタイトル部分の色も変更します。

サイドエリアのタイトル部分の色の変更は、

「基本設定」の「基本スタイル設定」で「テーマカラーを指定」の部分を変更します。

「投稿内テキストリンク色」の指定も「全体の背景色」の指定もここで行います。

グローバルメニューを表示する方法

グローバルメニューとは、ヘッダーの黄色い枠に表示されるメニューです。

グローバルメニュー

グローバルメニューを表示する場合も、

「共通エリア設定」-「ヘッダーエリア設定」で行います。

とはいえ、デフォルトで表示するようになっていますので、実際にグローバルメニューを表示したい場合は、WordPress管理画面の「外観」-「メニュー」でメニューを作成し、「メニューの位置」で「ヘッダーエリア」にチェックを入れます。

メニュー作成

同様にフッター部分に表示したい場合は、フッターエリアにチェックを入れます。

「共通エリア設定」の「ヘッダーエリア設定」はPCやスマホで表示させたくない場合に機能します。

当サイトでは、グローバルメニューは表示していません。

メニューパネルを表示する方法

メニューパネルとは、画面右上にある三本線のところをクリックすると表示されるメニューのことです。

メニューパネル

こちらは、別のページで解説していますのでそちらを参照して下さい。

参考:THE THORのメニューパネルの設定の仕方

TOPページのメインビジュアルは「TOPページ設定」の「メインビジュアル設定」で設定

メインビジュアル画面

ヘッダーの下に画像がありますが、ここの画像は、

「TOPページ設定」の「メインビジュアル設定」で設定します。

「メインビジュアルを表示するか選択」で「表示」にし、

「メインビジュアルの表示モード設定」で「静止画」を選択、

「静止画の設定」で画像を貼りつけます。

ここでは、好みに応じてスライドショーも表示設定可能です。

画像の表示サイズは、PC、スマホ別に設定できます。

ちなみに当サイトでは、スマホ時の表示サイズを「170」に、PCでの表示サイズを「1」に設定しています。つまり見かけ上、PCでは画像を表示せず、スマホでは画像を表示するようにしています。

※逆に、PCで表示してスマホでは非表示にする場合は、メインビジュアルの表示選択で「スマホは非表示にする」にチェックすることで対応できますが、この場合は、下で設定する「メインビジュアル下のお知らせ部分」も表示されなくなります。

スマホでメインビジュアルは表示せずにメインビジュアル下お知らせを表示させたい場合などは表示サイズで調整します。

ヘッダー下のお知らせは「TOPページ設定」の「メインビジュアル下お知らせ設定」で設定

TOPページのヘッダー下に「スタートページはこちらです!」という文字とボタンを表示していますが、これは「TOPページ設定」の「メインビジュアル下お知らせ設定」を使っています。

お知らせ設定画面

「メインビジュアル下の注目エリア設定」で

「キャッチコピー」に「スタートページはこちらです!」という文字を、

「ボタンのテキストを入力」に「スタートページ」を、

「ボタンのリンク先」に「TOPページのリンク先URL」

を入力しています。

流れるお知らせは「共通エリア設定」の「ヘッダーボトムエリア設定」で設定

尚、TOPページだけではなく全てのページでヘッダーエリアの下に流れるお知らせの文字を表示したい場合は、

「共通エリア設定」の「ヘッダーボトムエリア設定(検索窓・お知らせ)」を使います。

文字とリンク先を設定できます(ボタンは無し)。

流れるお知らせはヘッダーの下、メインビジュアル下のお知らせはメインビジュアル下への表示です。従ってメインビジュアルを表示した場合、流れるお知らせは、ヘッダーとメインビジュアルの間に表示されます。

必要に応じてカルーセルスライダーを設定

カルーセルスライダーとは、TOPページに画像を順次回転させながら表示させる機能です。

よく画像が数秒ごとに左に流れて表示されるあれです。当サイトでは表示させていませんが、必要に応じて「カルーセルスライダー設定」で表示させることができます。

その他、TOPページには、「ピックアップ3記事設定」、「記事ランキング設定」、「カテゴリ最新記事設定」などもあります。当サイトではこれらは表示させていません。

TOPページ中央エリアの設定

次にTOPページの中央部分(下図の矢印の部分)です。

画面中央

TOPページのこの部分は、予め「固定ページ」を表示するか「最新の投稿」を表示するかの設定がありますが、当サイトでは「最新の投稿」(デフォルト)を設定しています。

どちらを表示するかは、「カスタマイズ」の「ホームページ設定」で指定できますが、WordPress管理画面の「設定」-「表示設定」で指定することをおすすめします。

「カスタマイズ」の「ホームページ設定」で指定するとメインビジュアル画面の表示と干渉することがあるようです。

記事が横に2列並んだ表示になっていますが、これは、

「アーカーブ設定」の「コントローラー設定」で「レイアウト切り替えボタンの初期checkedを選択」で、

「カードレイアウト」を選択します。

また、カードのコントラストを浮き上がらせるために、

「アーカーブ設定」の「記事一覧リスト設定」において、

「記事一覧リストのフレームを選択」で「シャドウフレーム」を選択しています。

TOPページ・フッターの設定

最後にフッターです。

フッターもヘッダー同様、TOPページだけでなく全てのページで共通の設定です。

デフォルトでは、THE・THOR製作者のFITさんへのリンクが表示されていますが、これを非表示にするためには、「共通エリア設定」の「フッターエリア設定」で、コピーライト下のリンクを非表示にします。

固定フッターエリアの設定

最後に、スマホでは、固定フッターエリアを表示しています。

スマホの固定フッターエリア

この表示の設定は、「共通エリア設定」の「固定フッターエリア設定(スマホ専用)」で行います。

「スマホ用固定フッター表示するか選択」で「表示」を選択し、ここに表示するボタンの項目を選択または排除します。

まとめ

以上、WordPressテーマTHE THOR(ザ・トール)のTOPページ周りの設定を解説してみました。

これらの設定で当サイトの80%ほどの設定ができていると思います。

言うなればたったこれだけで、とりあえず、このようなサイトが出来上がる訳です。

WordPressテーマをTHE THOR(ザ・トール)にした理由