WordPressテーマ「THE THOR」でカスタマイズしている点

WordPressテーマ「THE THOR」でカスタマイズしている点

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

THE THORは標準で多くの機能を搭載している分、設定項目が多いのが特徴です。

設定によって自在にデザインや表示内容などを調整できますが、細かい部分ではちょっと物足りなかったり不満だったりする部分があり、自分でカスタマイズしたい箇所も出てきます。

そこで、ここでは、当サイトにおいてTHE THORのカスタマイズした点をまとめています。

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

WordPressテーマ「THE THOR」でカスタマイズしている点

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

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

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

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で目次を追従サイドバーに設定する手順

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

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

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

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

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

参考記事

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

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

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

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

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

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

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

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

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

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

参考記事

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

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

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

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

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

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

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

サイドバーのメニュー

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

関連記事

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

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

まとめ

以上、当サイトで行っているTHE THORのカスタマイズした点をまとめてみました。

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

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

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

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

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

関連記事

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

WordPressのログイン画面で「予期しない出力によりCookiesがブロックされました」「画面が真っ白になった」の対処方法