THE THORのカスタマイズまとめ

THE THORのカスタマイズまとめ

現在、当サイトでは、WordPressテーマに「THE THOR(ザ・トール)」を使用しています。

THE THORは標準で多くの機能を搭載している分、設定項目が多く、使いこなせるようになるまで少し時間がかかります。

また、ある程度、THE THORの標準の使い方がわかるようになると、今度は、標準の設定では少し物足りなかったり不満だったりする部分が見えてくるようになります。

ここでは、THE THORをインストールしてから行う主な初期設定のカスタマイズや、標準では少し物足りなかったり不満だったりする部分を自分でカスタマイズする方法をまとめています。

標準ではない自分でカスタマイズした点は、THE THORに手を加えたら順次追加・更新していく予定です。

THE THORのカスタマイズ:初期設定編

THE THORをインストールして最初に行うべきカスタマイズ

THE THORの親テーマ、子テーマをインストールして子テーマを有効化した後に最初に行うべきカスタマイズを解説しています。

例えば、ユーザーIDは、最初にカスタマイズ画面で設定しなければTHE THORのバージョンアップ情報を受け取ることができません。

忘れずに必ず設定するようにしましょう。

ユーザーIDの設定画面

また、フッターエリアもデフォルトのままだとFITとWordPressへのリンクが貼られています。

フッター画面

各ページ全てからFITとWordPressへ発リンクされますのでSEO対策の面からも非表示にします

以下で、ユーザーIDの設定の仕方やフッター部分の発リンクの削除の仕方、また、SEO設定、サイトマップを表示させる設定などを解説しています。

参考記事

ここでは、WordPressテーマ「THE THOR」をインストールした後に最初に行うべき設定(初期設定)について解説しています。 THE THORの初期設定 THE THORの場合、設定する項目の殆どは、「外観」-[…]

THE THORの初期設定

THE THORのトップページのカスタマイズ

ホームページの顔ともいえるトップページ。

THE THORのトップページ画像

トップページから見える項目(設定できる部分)には、

  • ヘッダーのサイトロゴ画像
  • グローバルメニュー
  • メニューパネル
  • メインビジュアル
  • お知らせ設定
  • 流れるお知らせ
  • カルーセルスライダー
  • 中央エリア
  • フッターエリア

などがあります。

下記では、これらのカスタマイズ設定の仕方を、このサイトを例にとって解説しています。

参考記事

2018年11月の下旬にインストールして使い始めたWordPressテーマ「THE THOR」 THE THORは、機能が多いだけに設定項目が多いのが特徴です。 THE THORの前身とも言える無料版のライオ[…]

THE THORのトップページの設定

THE THORの画像とカラーのカスタマイズ

THE THORの、

  • 画像(サイトアイコン・サイトロゴ・メインビジュアル・アイキャッチ画像など)や
  • カラー(ヘッダーカラー・テーマカラー・ウィジェット見出し・テーブルカラー・ボタンカラー・カテゴリーのイメージカラーなど)

という切り口からそれぞれのカスタマイズ設定の仕方を解説しています。

トップページとともに画像とカラーを詰めていくことで、ホームページのデザインを確立させ、オリジナリティのあるホームページを作成していくことができます。

参考記事

ここでは、WordPressテーマ、THE THOR(ザ・トール)の画像やカラーの設定・変更について解説しています。 THE・THORでは、画像やカラーに関する設定・変更は、全てWordPress管理画面の「外観」[…]

THE THOR(ザ・トール)、画像とカラーの設定

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

メニューパネルとは、ページ右上の3本の横線で構成されたハンバーガーメニューをクリックすると表示されるメニューのことです。

ハンバーガーメニューとメニューパネル

メニューパネルを表示する、しないは任意ですが、スマホなどでカテゴリーなどを表示させるとユーザーにとって利便性が高くなります。

メニューパネルには、任意のメニュー表示を設定させることができます。

以下のページでは、このメニューパネルのカスタマイズ設定の仕方を解説しています。

参考記事

WordPressテーマ「THE THOR」には標準でメニューパネルが装備されています。 メニューパネルとは、ページ右上の3本の横線で構成されたハンバーガーメニューをクリックすると表示されるメニューのことです。 […]

THE THOR(WordPressテーマ)のメニューパネルの設定の仕方

THE THORのSEO対策のカスタマイズ

今どきのWordPressテーマ(特に有料のテーマ)は、必要最小限のSEO対策を施しています。

THE THORは、特に独自のSEO対策としてカスタマイズ画面にSEO設定という項目を設け、ページの表示速度に関する様々な設定ができるようにしています。

THE THORのSEO設定画面

以下のページでは、

  • CSSやimgの非同期読み込み設定
  • htaccess設定
  • HTML圧縮設定
  • AMP設定やPWA設定

といったものの意味やその設定の仕方を解説するとともに、THE THORが搭載しているSEO対策機能を解説しています。

必須のカスタマイズ項目ではありませんが、設定次第でホームページの表示速度を高めたり、SEO対策に役立てることができます。

参考記事

圧倒的にSEOに強く抜群に上位表示されやすいと謳っているWordPressテーマTHE THOR。 THE THORは実際にSEOに強いのか。 ここでは、THE THORがカスタマイズ画面で用意しているSEO[…]

THE THORのSEO設定やSEO対策について

THE THORでランキングページを作成するカスタマイズ

THE THORにはランキングページ作成機能が標準搭載されています。

例えば、アフィリエイトなどで比較・ランキングサイトなどを作成する場合に活用できます。

以下では、THE THORでランキングページを作成する手順を解説しています。

参考記事

商品の比較やおすすめランキングなどのサイトは成果に結び付けやすいとあって多くのアフィリエイターが比較やランキング形式で商品を紹介する手法をとっています。 しかし、WordPressでユーザー自らランキングページを作[…]

WordPressテーマ「THE THOR」でランキングのページを作成する手順

THE THORのカスタマイズ:オリジナル編

当サイトでは、THE THORに標準で備わっているカスタマイズ設定では対応できないもの

  1. 文字のサイズを修正するカスタマイズ
  2. 追従サイドバーに該当ページの目次を表示するカスタマイズ
  3. カテゴリーやタグページなどのアーカイブページをnoindexにするカスタマイズ
  4. フレームをPCでは表示させてスマホでは表示させないようにカスタマイズ
  5. カテゴリーごとにサイドバーのメニューや人気記事を変えて表示させるカスタマイズ
  6. メインカラムの最大幅を変えるカスタマイズ

の6点のカスタマイズを行っています。

cssやphpに直接手を加えてカスタマイズしていますので必要に応じて参考にして下さい。

文字のサイズを修正するカスタマイズ

THE THORでは、「基本設定」-「基本スタイル設定」のスマホ全体とPC全体のフォントサイズを修正することができます。

しかし、この標準設定だけでは、カバーしていないバランス的に文字の大きさが気になる箇所が何箇所かあります。

例えば、

  • TOPページのメインビジュアルに添えるタイトルの文字や
  • カテゴリーやタグのページで表示される記事一覧の文字サイズ

などがそうです。

メインビジュアルに添えるタイトルの文字とは下図の白枠で囲まれた箇所のことです。

メインビジュアルに添えるタイトルの文字

カテゴリーやタグのページで表示される記事一覧の文字とは下図の赤枠で囲まれた箇所のことです(特にスマホで見た時には文字が大きく感じます)。

カテゴリーやタグのページで表示される記事一覧の文字

文字数にもよりますし、個人の感性にもよりますが、このサイトの文字数の場合はデフォルトのままだとPCでは大きい、スマホでは小さいといった文字のサイズのバランスが悪いように感じましたのでそれぞれで少しサイズを変えました。

文字の大きさのカスタマイズは、THE THOR CHILD(子テーマ)の、style-user.cssにコードを追加することで可能ですのでテーマがバージョンアップしても有効です。

文字サイズのカスタマイズは以下で説明していますので必要に応じて参考にして下さい。

他のあらゆる文字も、以下の容量でザイズを変えることができます。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。 THE THORを使用していると、特定の箇所の文字のサイズを調整したいと思っている人も少なくないはず。 ここでは、当サ[…]

THE THORで文字のサイズを修正するカスタマイズ

追従サイドバーに目次を設定するカスタマイズ

このページをパソコンやモバイル端末で見ると、サイドバーにこのページの目次が追従して表示されると思います。

THE THORでは、標準の機能で追従サイドバーに目次を表示させることはできませんが、簡単なカスタマイズで投稿記事の追従サイドバーに該当ページの目次を表示することができます。

記事によっては、5,000文字から1万文字といったものもありますし、画像を配置するとより縦長になりますので、目次を常に目に見える位置に配置すると親切かもしれません。

投稿記事の追従サイドバーに該当ページの目次を表示

カスタマイズは、目次が表示されるプラグイン「Table of Contents Plus」をインストールし、追従サイドバーエリアへセット。

但し、このままではスマホでも表示されますので、ウィジェットに条件分岐タグを指定できるプラグイン「Widget Logic」をインストールし、スマホでは表示されないように条件指定。

そして、見栄えをよくするために子テーマのcssにコードを追加しています。

このカスタマイズもプラグインのインストールとTHE THOR CHILD(子テーマ)の、style-user.cssにコードを追加することで可能ですのでテーマがバージョンアップしても有効です。

目次を追従サイドバーに表示させるカスタマイズは以下で説明していますので必要に応じて参考にして下さい。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。 ここでは、当サイトで施しているカスタマイズのうち、 ・THE THORの目次を追従サイドバーエリアに表示するカスタマイ[…]

THE THORの目次をカスタマイズ(追従サイドバーに表示させる)

カテゴリーなどのアーカイブページをnoindexにするカスタマイズ

カテゴリーやタグページなどのアーカイブページは品質が低いページとしてnoindexにした方がSEO対策として有効とする見解があります。

そのため、WordPressテーマによっては、アーカイブページを任意でnoindexできるものもありますが、THE THORは全てindexされる仕様となっています。

SEO対策としてどちらが有効かという議論は他でやるとして、当サイトでは、スッキリ整理をする意味で、カテゴリ-の2ページ目以降とその他のアーカイブページの全てをnoindexすることに加えてTOPページから2ページ目以降もnoindexにしています

尚、THE THORでは、カテゴリーページたタグページも投稿記事並みに編集が可能ですので、有効に活用できればSEO対策としてのパフォーマンスも高くなると考えられます。

THE THORでカテゴリーなどのアーカイブページをnoindexにするカスタマイズは以下で説明していますので必要に応じて参考にして下さい。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。 ここでは、当サイトで施しているカスタマイズのうち、 ・アーカイブページ(カテゴリー・タグ・日付等のアーカイブ)のnoi[…]

THE THORでカテゴリーなどのアーカイブページをnoindexにするカスタマイズ

フレームをPCで表示させてスマホで表示させないカスタマイズ

THE THORは、TOPページや記事などにフレームを表示するか否かの設定ができますが、「表示する」と設定をした場合は、PC・スマホどちらの表示でもフレームが表示されます。

しかし、フレームありの設定をすると、スマホでの表示の場合、スマホ本体のフレームと被ってどうもしっくりきません。

フレームをPCで表示させてスマホで表示させない

フレームがあるとフレームの外側の余白が無駄な余白にも感じてしまいますし、逆にフレームなしではページの余白を無駄なく使え、広々と見せることができます。

実際、多くのWordPressテーマでは、PCではフレームが表示されてもPCでは表示されない仕様になっています。

そこで、当サイトでは、PCではフレームを表示させて、スマホではフレームを表示させないようにカスタマイズしています。

実際、このページもPCで見るとフレームが表示されていますが、スマホで見た時はフレームは表示されないようにしています。

THE THORでフレームをPCでは表示させてスマホでは表示させないカスタマイズは以下で説明していますので必要に応じて参考にして下さい。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。 ここでは、当サイトで施しているカスタマイズのうち、 ・フレームをPCで表示させてスマホで表示させないカスタマイズ […]

THE THOR フレームをPCで表示させてスマホで表示させないカスタマイズ

THE THORでカテゴリーごとにサイドバーのメニュー(人気記事)を変えるカスタマイズ

様々なカテゴリーを持つブログやサイトを運用している場合、サイドバーに表示されるメニューや人気記事をカテゴリーごとに変えて表示したい場合があります。

記事とは異なるカテゴリーのメニューや人気記事が表示されるのはしっくりきません。

そこで、当サイトでは、カテゴリーごとにサイドバーのメニューや人気記事を変えて表示させるカスタマイズを行っています。

例えば、このページはWordPressのテーマに関する記事を書いていますので、サイドバーにはWordPressに関する人気記事を表示させています。

サイドバーのメニュー

標準ではできませんので、ウィジェットに条件分岐タグを指定できるプラグイン「Widget Logic」をインストールして条件指定をしてメニューや人気記事を表示させています。

記事の属するカテゴリーごとにサイドバーのメニューを変えるカスタマイズは以下で説明していますので必要に応じて参考にして下さい。

参考記事

サイドバーの表示内容をページ毎に変えたいということはないでしょか? 例えば様々なカテゴリーを持つブログやサイトを運用している場合、サイドバーに表示されるメニューをカテゴリーごとに変えて表示したいといった場合がありま[…]

THE THORで記事のカテゴリーごとにサイドバーのメニューを変えるカスタマイズ

尚、2020年3月末にTHE THORのバージョンが2.0.0にアップデートされ、カテゴリ人気記事のウィジェットでプラグイン「Widget Logic」を使うと不具合が発生するようになりました。

現在は、カスタムHTMLにリンク先を入力し、プラグインで条件指定をしてメニューや人気記事を表示させています。

THE THORのメインカラムの最大幅を変えるカスタマイズ

THE THORで作成したサイトをPCで表示した場合、メインカラムの最大幅が長すぎると感じる人もいるようです。幅が長い場合は、文字が横に連なり、読みづらく感じる人もいます。

このサイズを調整したいという需要が多いのか、標準でこれを好みの幅に修正できるWordPressテーマも少なくありません。

PCで表示した場合のメインカラムの最大幅

しかし、THE THORでは、標準では最大幅が1170pxに固定されており調整ができません。

このサイズを変えるには自分でカスタマイズする必要があります。PCでの表示における最大幅カスタマイズは以下で説明していますので必要に応じて参考にして下さい。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。 THE THORで作成したサイトをPCで表示した場合のメインカラムの最大幅は、個人的にはしっくりいっており、WordPres[…]

THE THORのメインカラムの最大幅を変えるカスタマイズ

その他のカスタマイズ

このサイトでは、他にも、

  • 見出しの幅を変えるカスタマイズや
  • SEO対策としてトップページの<h1>タグをタイトルに合わせるカスタマイズ

なども行っています。

特に、固定ページをトップページに設定している場合、<h1>タグをタイトルに合わせるカスタマイズは、SEO対策面からも重要です。

自分のトップページの<h1>タグが意図した通りになっているか確認してみて下さい。

THE THORのカスタマイズ時のトラブル

WordPressのバージョンが5.3になってカスタマイズ画面が表示されない時

WordPressのバージョンが5.3になって、

  • カスタマイズ画面が表示されずに遷移できない
  • メディアボタンを押しても画像が表示されない
  • ビジュアルエディタとテキストエディタの切り替えボタンが効かない

といった事象が発生しています。

これに対して、THE THORでは、対策を施したバージョンのテーマを配布していますので、これまでTHE THORを使ってきた人は、テーマのアップデートを実施し、それでも同じ事象が続けば全てのプラグインを停止してブラウザキャッシュをクリアして下さい。

THE THORを購入したばかりの人で、テーマのバージョンアップができない人は、WordPressのバージョンを一旦ダウングレードしてからTHE THORのバージョンを最新バージョンにする必要があります。

以下でその手順を解説していますので必要に応じて参考にして頂ければと思います。

参考記事

WordPressをサーバーにダウンロードして、早速購入したTHE THORをインストール。 カスタマイズをしようとしたら、カスタマイズ画面に、「読み込み中」と表示されたっきり、遷移できなくなった。 また、こ[…]

THE THORでカスタマイズ画面が表示されない時の対処方法

THE THORをカスタマイズした後にエラーになるときの対処方法

カスマイズしている時に、WordPressのログイン画面で「予期しない出力によりCookiesがブロックされました」というエラーメッセージが表示されたり、ログイン画面が「画面が真っ白になった時」は、以下の対処方法を参照して下さい。

参考記事

WordPressの管理画面を開こうとしたところ、 ・「予期しない出力により Cookies がブロックされました」というエラーが表示されたり ・画面が真っ白になったり して管理画面にログインすることができ[…]

予期しない出力によりCookiesがブロックされました・画面が真っ白になった、の対処方法

THE THORのカスタマイズまとめ

以上、THE THORをインストールしてから行う主なカスタマイズ設定や標準では少し物足りなかったり不満だったりする部分を自分でカスタマイズする方法をまとめてみました。

自分で行うカスタマイズにはプラグインを利用しているものもありますので、環境によっては、テーマや他のプラグインと干渉して不具合を起こす可能性もあります。

また、cssやphpを直接扱うカスタマイズについては予期せぬ障害が起きる場合もあります。

従って、何か問題が起こった時にすぐに復旧できるように必ず事前にバックアップをとっておくことをおすすめします。

尚、カスタマイズは、環境も違いますので自己責任でお願いします。

参考記事

このサイトは、THE THOR(ザ・トール)という有料のWordPressテーマを使用しています。 ここでは、THE THORの評判や評価はどうなのか、と思っている人に、筆者が実際にTHE THORを1年以上使って[…]

THE THORの評判と評価レビュー