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

THE THORのTOPページの設定

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

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

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

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

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

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

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

その他のカスタマイズについては、下記ページを参照して下さい。

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、カスタマイズ項目が多いのが特徴です。そのため、THE THORをはじめて使う人やテーマの[…]

THE THORで施しているカスタマイズ一覧

THE THORの設定「TOPページ」

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

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

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

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

THE THORのカスタマイズメニュー

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

尚、下図は当サイトを立ち上げた当初の画面です。

ヘッダーエリア

現在は、「TUKAERU-LAB」の部分を「使えるラボ」に変更し、メインビジュアル(画像部分)も変更しています。

以下の説明は当サイトを立ち上げた当初の画面をもとに進めます。

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

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

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

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

このサイト(上図)の例では、

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

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

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

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

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

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

グローバルメニューを表示する設定

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

下の図では、表示されていませんが、グローバルメニューを表示するように設定できます。

グローバルメニュー

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

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

とはいえ、デフォルトで表示するようになっていますので、実際にグローバルメニューを表示したい場合は、WordPress管理画面の「外観」-「メニュー」でメニューを作成します。

そして、「メニューの位置」で「ヘッダーエリア」にチェックを入れます。

メニューの作成

同様にフッター部分にグローバルメニューを表示したい場合は、フッターエリアの箇所にチェックを入れます。

カスタマイズの「共通エリア設定」の「ヘッダーエリア設定」では、PCやスマホで表示させる、させないをコントロールするために使います

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

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

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

メニューパネル

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

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

サイドエリアのタイトル部分の色合いもあわせる

ヘッダーエリアの背景色を変更しましたが、このままでは、ヘッダーエリアの背景色とサイドエリアのタイトル部分の背景色との均衡が取れていません。

ホームページ全体の配色のバランスを合せるために、ここでサイドエリアの各ウィジェット部分のタイトル部分の色も変更します。

サイドエリアのウィジェット部分のタイトル部分の色の変更は、

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

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

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

メインビジュアル画面

ヘッダーの下に画像(メインビジュアル)がありますが、ここの画像は、

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

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

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

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

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

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

ちなみに当サイトでは、スマホ時の表示サイズを「170」に設定し、PCでの表示サイズを「220」に設定しています。見かけ上、PCでは画像を表示せず、スマホでは画像を表示するといったことも可能で、この場合は、スマホ時の表示サイズを「170」に、PCでの表示サイズを「1」にすることで対応できます。

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

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

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

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

お知らせ設定画面

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

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

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

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

を入力しています。

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

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

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

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

流れるお知らせはヘッダーの下

メインビジュアル下のお知らせはメインビジュアルの下

への表示です。

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

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

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

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

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

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

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

画面中央

TOPページのこの部分は、予め、

固定ページを表示するか
最新の投稿を表示するか

の設定がありますが、上図の例では「最新の投稿」(デフォルト)を設定しています。

※当サイトは、2019年5月に固定ページへ変更

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

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

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

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

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

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

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

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

最後にフッターです。

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

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

フッターメニューは「外観」-「メニュー」で設定

フッターのメニューは、「外観」-「メニュー」で作成し、「フッターエリア」にチェックを入れることで表示されます。

メニューでフッターエリア作成

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

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

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

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

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

まとめ

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

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

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

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