ウェブサイトの運営では、運営者情報が重要視されるようになってきたと聞くことが増えました。
そのため、個人のブロガーさんやアフィリエイターの方もプロフィールをサイドバーに置いている人も多いですよね。
人気の有料テーマのTHE THORでも、「著作者情報」という機能でサイドバーにプロフィールを表示できるようになっています。
しかし、THE THORの著作者情報機能って、実は動作が重いんです。
ここでは、THE THORの著作者情報を軽量化する方法についてお伝えしていきます。
THE THORの著作者情報に画像を表示する方法は2つ
上の画像は、THE THORに表示できる著作者情報とプロフィールの例です。
THE THORでは、サイドバーに表示するものを「著作者情報」、記事下に表示するものを「プロフィール」と呼んでいます。
どちらもWordpressのユーザー管理情報を利用していて、画像を登録する方法は以下の2つとされています。
- Gravatarから登録する
- WP User Avatarなどプラグインを使って登録する
プラグイン公式ページ
THE THORの著作者情報が重い原因
先ほど紹介した2つの方法のうち、Gravatarを使う方法だと、メールアドレスを登録して、アカウントを作成してからゴニョゴニョとしなければならず、とても面倒です。
しかし、この「WP User Avatar」（ProfilePress）のCSSとJavascriptファイルがページの表示速度を遅くする原因となっているのです。
下の画像は、THE THORでWP User Avatarを使って著作者情報を表示しているサイトを、PageSpeed Insightsで分析した結果です。
この「レンダリングを妨げるリソースの除外」をクリックすると、表示を遅くしているファイル一覧が表示されます。
赤枠で囲った2つのファイルが「WP User Avatar」関連のファイルです。
他にも、「使用していないCSSの削除」の項目にも、1つのファイルが該当していました。
THE THORの著作者情報の画像を軽量表示する手順
ただ、著者の画像を表示するだけのために、余計なCSSとJavascriptを読み込むのは非効率ですよね。
そこで、THE THORの著作者情報と同じデザインのHTMLを自分で用意したいと思います。
① 画像をアップロードする
Wordpressのダッシュボードから、[メディア]-[新規登録]をクリックします。
著作者情報やプロフィールに使用したい画像を選択します。
次に、アップロードした画像の情報を確認して、画面右側の[URLをクリップボードにコピー]をクリックなどして、画像のURLをメモしておいてください。
② 必要なHTMLを準備する
THE THORにある機能と全く同じデザインにする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>
<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を貼り付けます。
CTAなら、複数のライターがいてもライターごとにCTA登録して対応することができそうです。
「WP User Avatar」（ProfilePress）を利用して著作者情報を表示していた方は、WP User Avatarを「無効化」か「アンインストール」して、不要になったJavascriptやCSSを読み込まないようにしておきます。
これにによって、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」で改善手案されたファイルが消えて、スコアも改善しているはずです。
設定方法は以上です。
THE THORのプロフィール内容のカスタマイズもできる
- 読み込み速度アップ
- PageSpeed Insightsのスコア改善
- プロフィール内容の装飾が可能
ここまで、①、②についてだけがメリットのようにお伝えしてきましたが、実は③のメリットが最も大きいかもしれません。
THE THORの機能は、すでにお伝えしたとおり、Wordpressのユーザー管理をしていて、その「プロフィール情報」に記載した内容が、そのまま表示されるだけの仕様になっていて、改行すらできませんし、文字の太ささ色を変えることなどもちろんできません。
しかし、今回お伝えした方法であれば、単なるHTMLですから、記事と同じように装飾することが可能になるので、他のTHE THORユーザーとも差別化したサイトを作ることができます。