WordPressプラグインRinker（リンカー）で表示される商品画像にalt属性を入れる方法を解説します。
今回紹介するのはRinker（リンカー）で表示される商品画像に空のalt属性（alt=””）を自動的に入れる方法です。
JavaScriptを使い、img要素がalt属性を持っていない場合に空のalt属性を自動追加を行います。
プログラミング知識がない方でも問題ございません。
後ほど紹介するコードをWordPressサイト内に挿入するだけで、Rinkerで表示される商品画像1つ1つに個別で設定を加える必要はなく、一括でalt属性を挿入できます。
WordPressプラグインRinkerで表示される商品画像にalt属性を入れると何が良いのか
Rinkerの商品画像にalt属性を入れることでサイトパフォーマンス計測ツール「Lighthouse」のユーザー補助スコアが向上します。
サイトパフォーマンスが向上すると、検索順位の上昇が狙えますので、サイトパフォーマンスはできるだけ高くなるようにしましょう。
WordPressプラグインRinkerで表示される商品画像にalt属性を入れる方法
WordPressプラグインRinkerで表示される商品画像にalt属性を入れる方法を解説します。
筆者はWordPressテーマ「SANGO」を利用しているため、「SANGO」を利用している場合としていない場合で解説を分けております。
Rinkerの商品画像だけにalt属性を入れるのはもったいない気がしたので、alt属性が入っていない画像にも自動的にalt属性が入る仕様のコードとなります。
WordPressテーマ「SANGO」を利用している場合
下記に記載したJavaScriptのコードをWordPress管理画面にある「SANGO設定」から挿入するだけです。
1.WordPress管理画面のサイドバーにある「SANGO設定」を選択
2.画像内の赤枠で囲んだ「詳細設定」を選択
3.下記に記載したJavaScriptのコードを画像内赤枠の箇所に挿入後、ページ下部にある「詳細設定を保存」ボタンをクリックして保存
<script>
const imgs = document.getElementsByTagName('img');
Array.from(imgs).forEach(function(img){
if(!img.hasAttribute('alt')){
img.setAttribute('alt', '');
}
});
</script>
WordPressテーマ「SANGO」を利用していない場合
下記に記載したJavaScriptのコードをbody閉じタグ（</body>）直前に挿入するだけです。
「SANGO」のようにWordPress管理画面からJavaScriptコードを挿入できるテーマを利用されている場合は、利用テーマの挿入手順に沿ってコードを挿入していただければ問題ございません。
<script>
const imgs = document.getElementsByTagName('img');
Array.from(imgs).forEach(function(img){
if(!img.hasAttribute('alt')){
img.setAttribute('alt', '');
}
});
</script>
WordPressプラグインRinker（リンカー）で表示される商品画像にalt属性を入れる方法まとめ
WordPressプラグインRinker（リンカー）で表示される商品画像にalt属性を入れる方法を解説しました。
導入する手間もほとんどなく、Rinkerで表示される商品画像に一括でalt属性を挿入できたかと思います。
JavaScriptを活用できるようになれば、自分の好きなようにalt属性を自動挿入できたりと、作業の効率化に役立ちます。
JavaScriptを学ぶうえでおすすめの講座を記載しておきますので、よろしければご覧ください。
JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】
