AFFINGER5のimgタグ出力にfigureを加えて内部SEO対策にチョイ足しを

更新日:

どうも、カッパです。

見る人が見ればすぐに分かりますが、このブログで「WordPressテーマ 「WING(AFFINGER5)」を使用しています。

今回は、AFFINGER5が記事内で画像を出力する際にimgタグをfigureタグで囲えるように改良します。ほんの少しのコードで実装できます。

まずfunctions.phpに次のコードを追加します。


add_theme_support( 'html5', array( 'caption' ) );

次に、CSSを修正。

手っ取り早く済ませるには、テーマの「カスタマイズ」から「追加CSS」で下記のコードを追加します。


figure {
  margin: 0 0 24px 0;
}

これで完了です。

ざっくり解説すると、

  • function.phpに追加した「add_theme_support()」でcaptionをhtml5に対応させる
  • figureのデフォルトで設定されているマージンを調整し、画像のずれを修正

という流れです。簡単ですね。

もともとWordPressにはcaption付き画像を出力する際に「figure」と「figcaption」をつける機」能があり、前述の関数「add_theme_support()」でキャプションをhtml5に対応させるか否かでfigureの使用をコントロールしています。

AFFINGER5では、現在のところキャプション付き画像出力をhtml5非対応に設定してあったので、今回この部分を修正したというわけです。

ただ、記事内での画像のずれは修正しましたが、このテーマで画像を使用する際に、他でも影響がでる可能性は十分考えられます。そのあたりは自己責任でお願いします。

  • B!