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

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

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

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

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

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

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

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

トップページのカスタマイズ設定

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

トップページ画像

トップページから見える部分(設定できる部分)

・ヘッダーのサイトロゴ画像
・グローバルメニュー
・メニューパネル、また、
・メインビジュアルや
・お知らせ設定
・中央エリア
・フッターエリア

のカスタマイズ設定の仕方を解説しています。

参考記事

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

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

画像とカラーのカスタマイズ設定

THE THORの

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

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

参考記事

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

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

メニューパネルのカスタマイズ設定

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

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

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

参考記事

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

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

ランキングページを作成するカスタマイズ設定

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で文字のサイズを修正するカスタマイズ

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

当サイトでは、投稿記事の追従サイドバーに該当ページの目次を表示するようにしています。

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

このページもPCやモバイル端末で見ると右側に目次が追従して表示されるかと思います。

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

THE THORでは、標準の機能で追従サイドバーに目次を表示させることはできません。

そこで、目次が表示されるプラグイン「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(ザ・トール)を使用しています。 ここでは、当サイトで施しているカスタマイズのうち、 ・アーカイブページ(カテゴリー・タグ・日付等のアーカイブ[…]

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で記事のカテゴリーごとにサイドバーのメニューを変えるカスタマイズ

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

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

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

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

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

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

参考記事

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

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

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

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

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

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

THE THORでは、対策を施したバージョンのテーマを配布しています。

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

THE THORを購入したばかりの人で、インストールして有効化することができない場合は、WordPressのバージョンを一旦ダウングレードしてからTHE THORのバージョンを最新バージョンにする必要があります。

以下でその手順を解説しています。

関連記事

WordPressをサーバーにダウンロードして、早速購入したTHE THORをインストール。 カスタマイズをしようとしたら、画面がストップして遷移しなくなった。 また、これまでTHE THORを使っ[…]

THE THORでカスタマイズ画面へ遷移できない時の対処方法

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

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

関連記事

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

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

まとめ

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

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

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

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

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