画像にAltテキストを見やすく表示して入力漏れをチェックするWordPressカスタマイズ方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Alt属性のSEO効果って、それなりにあると思います。

もちろん、僕はGoogleの中の人ではないので、その重要度までは分かりません。

けれど、当然入力してないよりは、入力してあったほうが良いのは間違いないと思っているので、毎回Alt属性には「画像の内容を説明するテキスト」を入力しています。

ただ、Alt属性って結構入力し忘れてしまうんですよね。

入力し忘れても通常のテキストのように表示されるのであれば、公開前に読み返したときに大抵気づきます。けれどAlt属性値の場合は、ブラウザでページを表示しただけではチェックできません。

一般的には、チェックにはソースを見るか、ブラウザの開発ツールを利用するか、以下のようなAlt属性チェックツールを使うかと思います。

チェックが面倒なAlt属性とMetaタグ内容を手軽に確認できるChrome拡張「Alt &Meta viewer」
僕は記事投稿時、画面上には出ないけど、SEO的に有利だと信じてやっていることがあります。 それが以下の2つ。 画像のAlt属性...

ただ、毎回こういったツールでチェックするのは面倒くさいんですよね。

できれば、Wordpressの投稿ページでAlt属性値が設定された画像が表示されたらデフォルトで、Alt属性値をチェックできる仕様にしたいです。

そこで、何か良いものはないかと探したら、Alt属性値をキャプションとして表示するjCaptionという良いjQueryプラグインを見つけました。

ということで今回は、これを利用した「Altの内容をチェックできる仕組みを作るためのWordpressカスタマイズ方法」を紹介したいと思います。

例えば、以下のように画像があったら、マウスカーソルを乗せるとAltテキストのキャプションが表示されます。

我が家

スポンサーリンク
レクタングル(大)広告

主な手順

今回の「Alt属性値キャプション化」カスタマイズに必要な主な手順は以下です。

  1. jCaptionのダウンロード&設置
  2. フッターにJavaScript呼び出しコードを書く
  3. style.cssにスタイルシートを書く

基本的にほぼコピペで行えるので、それほど難しいカスタマイズではないかと思います。

jCaptionのダウンロード&設置

まずは、jCaptionからプラグインをダウンロードします。

ページの下の方にある「Download a zip of the plugin and the sample.」をクリックしてzipファイルをダウンロードしてください。

ファイルのダウンロードリンク位置

「jcaption.zip」というzipファイルがダウンロードされると思うので展開(解凍)してください。

jcaption.zip

中には、以下のようなファイルがありますが、この中から「jcaption.min.js」のみを取り出して利用します。

jcaption.min.jsファイルを利用

取り出した「jcaption.min.js」ファイルを、子テーマに以下のように配置します。

  • js/jcaption.min.js
子テーマフォルダ直下にjsフォルダがない場合は、作成してください。

フッターにJavaScript呼び出しコードを書く

次に、jCaptionファイルと、jCaptionの呼び出しコードをページのフッターに記入します。

フッターを記入するテンプレートファイル(大抵はfooter.php)の</body>手前に以下のようにコピペしてください。

コードをコピペしたら、以下の部分のCSSセレクタを、テーマに合わせたものに変更してください。

通常は、「本文部分の画像」のみに適用されるようなCSSセレクタを記入します。

何か除外したい要素がある場合は、notを使用して以下のように記入してください。

この時点で既に、画像にマウスを乗せると、キャプションが表示される仕組みはできます。

まだスタイルが適用されていないjCaption動作

is_singular()で条件分岐しているのは、投稿・固定ページのみで利用するため、その他のページで余計なスクリプトを読み込まないためにです。
管理者(Wordpressログインユーザー)のみチェックできれば良いという場合は、if文の条件分岐にis_user_logged_in()を追加してください。条件分岐は「is_singular() && is_user_logged_in()」になります。
親テーマを直接カスタマイズする場合は、get_stylesheet_directory_uri()の部分をget_template_directory_uri()に変更してください。
本来、Wordpressでスクリプトを呼び出す場合は、wp_enqueue_script()を利用すべきかもしれませんが、説明の簡略化のため、直接呼び出す書き方をしています。

参考 画像にALTに記述したキャプションを表示するスクリプト「jCaption」 | CSS Lecture

style.cssにスタイルシートを書く

画像のキャプションを表示する仕組みができたので、あとはキャプションの表示部分のスタイルを調節するだけです。

スタイルシートは、style.cssにでもコピペしておけばOKかと思います。

利用しているテーマによっては、上記のCSSをさらに調節する必要はあるかもしれません。

スタイルを適用することによって、画像の下部にキャプションが重ねて表示されます。

jCaptionを適用後の画像キャプション表示

動作確認

今回のカスタマイズを行うことで、本文中に掲載された画像は以下のような動作をします。

imgタグのみにAlt記入

マウスカーソルを乗せるとキャプションが表示されます。

モン・サン=ミシェル

画像へのリンクつきimgタグにAlt記入

マウスカーソルを乗せるとキャプションが表示されます。

ノイシュヴァンシュタイン城

imgタグのみ(Alt属性値の記入なし)

Altが記入されていない画像では、表示されません。

まとめ

今回のカスタマイズは上記のように、ファイルを1つ設置して、コードを2回コピペするだけで、ほぼできてしまいます(CSSセレクタの設定は必要)。

このカスタマイズを行うことで、これまでデベロッパーツールや拡張などを動かして、Alt属性値の内容をチェックしていた場合は、画像にマウスを乗せるだけで手軽にチェックできるようになるかと思います。

というわけで「Alt属性値のチェックが面倒くさい」とか「訪問者への説明のための画像キャプションとSEO向けのAltを毎回打ち込むのが二度手間」なんて場合には、今回のカスタマイザーおすすめかもしれません。

Simplicityのv2.2.5から既にこの同様の機能は実装されているのであえてカスタマイズする必要ないかもしれません(全く同じカスタマイズではありません)。

サイト jCaption