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

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

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

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

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

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

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

チェックが面倒なAlt属性とMetaタグ内容を手軽に確認できるChrome拡張「Alt ＆Meta viewer」

僕は記事投稿時、画面上には出ないけど、SEO的に有利だと信じてやっていることがあります。それが以下の2つ。画像の...

nelog.jp

2014-11-29 17:19

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

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

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

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

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

主な手順

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

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

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

jCaptionのダウンロード＆設置

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

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

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

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

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

js/jcaption.min.js

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

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

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

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

<?php
//jCaptionでAlt属性値をキャプション化する
if ( is_singular() ): //投稿・個別ページのみで表示?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jcaption.min.js"></script>
<script type="text/javascript">
(function($){
  $(document).ready(function(){
    $('.entry-content img').jcaption({
      copyStyle: true,
      animate: true,
      show: {height: "show"},
      hide: {height: "hide"}
    });
  });
})(jQuery);
</script>
<?php endif ?>

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

$('.entry-content img')

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

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

$('.entry-content img').not('.entry-content .blog-card img')

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

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かと思います。

/************************************
** jCaptionのスタイル
************************************/
div.caption {
  position: relative;
}

div.caption img{
  vertical-align: bottom;
}

div.caption p {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: .7;
  font-size: .9em;
  padding: 5px 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #000;
  color: #fff;
}

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

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