面倒なTHE THORのプロフィールを軽量化する方法 | プラグイン無し

the thorのプロフィールを軽くする

ウェブサイトの運営では、運営者情報が重要視されるようになってきたと聞くことが増えました。

そのため、個人のブロガーさんやアフィリエイターの方もプロフィールをサイドバーに置いている人も多いですよね。

人気の有料テーマのTHE THORでも、「著作者情報」という機能でサイドバーにプロフィールを表示できるようになっています。

しかし、THE THORの著作者情報機能って、実は動作が重いんです。

ここでは、THE THORの著作者情報を軽量化する方法についてお伝えしていきます。

今回のカスタマイズでは、THE THORのデザインはそのままに、著作者情報の表示を軽くし、さらにプロフィール内容に改行や、一部の文字の色や大きさを変更することができるようになります。

THE THORの著作者情報に画像を表示する方法は2つ

THE THORの著作者画像の例
上の画像は、THE THORに表示できる著作者情報とプロフィールの例です。

THE THORでは、サイドバーに表示するものを「著作者情報」、記事下に表示するものを「プロフィール」と呼んでいます。

どちらもWordpressのユーザー管理情報を利用していて、画像を登録する方法は以下の2つとされています。

  1. Gravatarから登録する
  2. WP User Avatarなどプラグインを使って登録する
「WP User Avatar」は、現在「ProfilePress」と名前が変わっています。
プラグイン公式ページ
管理人吹き出し画像
この記事では、別の方法で画像を表示するため、上記2つの手順については説明しません。

THE THORの著作者情報が重い原因

先ほど紹介した2つの方法のうち、Gravatarを使う方法だと、メールアドレスを登録して、アカウントを作成してからゴニョゴニョとしなければならず、とても面倒です。

管理人吹き出し画像
プロフィールに画像を表示するだけで、わざわざアカウントを作るって非効率すぎますよね。
ですから、2つ目の「WP User Avatar」(ProfilePress)を使う人が多いです。

しかし、この「WP User Avatar」(ProfilePress)のCSSとJavascriptファイルがページの表示速度を遅くする原因となっているのです。

下の画像は、THE THORでWP User Avatarを使って著作者情報を表示しているサイトを、PageSpeed Insightsで分析した結果です。

PageSpeed Insights改善できる項目
この「レンダリングを妨げるリソースの除外」をクリックすると、表示を遅くしているファイル一覧が表示されます。

PageSpeed Insightsレンダリングを妨げるリソースの除外
赤枠で囲った2つのファイルが「WP User Avatar」関連のファイルです。

他にも、「使用していないCSSの削除」の項目にも、1つのファイルが該当していました。

管理人吹き出し画像
これらのファイルの読み込みをしないことで、ウェブサイトの表示が速くなり、PageSpeed Insightsでのスコアの改善が期待できます。

THE THORの著作者情報の画像を軽量表示する手順

ただ、著者の画像を表示するだけのために、余計なCSSとJavascriptを読み込むのは非効率ですよね。

そこで、THE THORの著作者情報と同じデザインのHTMLを自分で用意したいと思います。

① 画像をアップロードする
Wordpressのダッシュボードから、[メディア]-[新規登録]をクリックします。
画像アップロード
著作者情報やプロフィールに使用したい画像を選択します。

画像は、120×120以上の正方形の画像を使用してください。

次に、アップロードした画像の情報を確認して、画面右側の[URLをクリップボードにコピー]をクリックなどして、画像のURLをメモしておいてください。
著作者情報用画像情報

② 必要なHTMLを準備する
THE THORにある機能と全く同じデザインにするHTMLを下記に用意しましたので、コピーして必要な部分を編集してください。

著作者情報のHTML

<div class=”widgetProfile”><div class=”widgetProfile__img”><img width=”120″ height=”120″ src=”https://○○.com/wp-content/uploads/photo.jpeg” alt=”画像の概要”></div>
<h3 class=”widgetProfile__name”>著者の名前</h3>
<p class=”widgetProfile__text”>プロフィール内容</p></div>

プロフィールのHTML

<aside class=”profile”>
<div class=”profile__author”>
<div class=”profile__text”>この記事を書いた人</div>
<img src=”https://○○.com/wp-content/uploads/photo.jpeg” alt=”画像の概要” width=”80″ height=”80″>
<h2 class=”profile__name”>著者の名前</h2>
</div>
<div class=”profile__contents”>
<div class=”profile__description”>プロフィール内容</div>
</div>
</aside>

上記コードの「<img src=」以下のURLを、①でメモしたURLへ変更してください。

その他、「著者の名前」や「プロフィール内容」の部分については、あなたの自由に編集してください。

管理人吹き出し画像
上のコードをコピーして、貼り付けると「”」が全角になってしまうようです。
ご使用の際は「”」が半角になるよう置換して使用してください。

③ HTMLを貼り付ける
ダッシュボードの[外観]-[ダッシュボード]をクリックします。

著作者情報の場合

[サイドバーエリア]に[カスタムHTML]を追加します。

[カスタムHTML]を開いて、[タイトル]の欄には、表示させたい見出し(「管理人」など)を入力します。
[内容]の欄には、②で編集したHTMLを貼り付けます。

プロフィールの場合

[投稿ページ下部エリア]に[カスタムHTML]を追加します。

[カスタムHTML]を開いて、[タイトル]の欄を空白にし、[内容]の欄には、②で編集したHTMLを貼り付けます。

管理人吹き出し画像
[投稿ページ下部エリア]だけでなく、CTAに登録するのも良いかもしれません。
CTAなら、複数のライターがいてもライターごとにCTA登録して対応することができそうです。
④ WP User Avatarを無効化またはアンインストールする
「WP User Avatar」(ProfilePress)を利用して著作者情報を表示していた方は、WP User Avatarを「無効化」か「アンインストール」して、不要になったJavascriptやCSSを読み込まないようにしておきます。

これにによって、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」で改善手案されたファイルが消えて、スコアも改善しているはずです。

設定方法は以上です。

THE THORのプロフィール内容のカスタマイズもできる

HTML化したメリット

  1. 読み込み速度アップ
  2. PageSpeed Insightsのスコア改善
  3. プロフィール内容の装飾が可能

ここまで、①、②についてだけがメリットのようにお伝えしてきましたが、実は③のメリットが最も大きいかもしれません。

THE THORの機能は、すでにお伝えしたとおり、Wordpressのユーザー管理をしていて、その「プロフィール情報」に記載した内容が、そのまま表示されるだけの仕様になっていて、改行すらできませんし、文字の太ささ色を変えることなどもちろんできません。

しかし、今回お伝えした方法であれば、単なるHTMLですから、記事と同じように装飾することが可能になるので、他のTHE THORユーザーとも差別化したサイトを作ることができます。

THE THORプロフィール内容カスタマイズ例
「THE THORのプロフィール内容カスタマイズ例」
管理人吹き出し画像
プロフィール内容に改行を入れたり、一部の文字の大きさや色を変えるなどのカスタマイズもできるのは良いですね。

満足できる!!
レンタルサーバー集

実際に使ってわかった初心者にもおすすめできるサーバー集

これで戦える!
WordPressテーマ集

ブログも!アフィリエイトも!おすすめのテーマ徹底比較