【SANGO】WordPressプラグイン「Rinker」で表示される商品画像にalt属性を入れる

記事には広告が含まれています

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のコードを画像内赤枠の箇所に挿入後、ページ下部にある「詳細設定を保存」ボタンをクリックして保存

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コードを挿入できるテーマを利用されている場合は、利用テーマの挿入手順に沿ってコードを挿入していただければ問題ございません。

JavaScript

<script>
const imgs = document.getElementsByTagName('img');
Array.from(imgs).forEach(function(img){
if(!img.hasAttribute('alt')){
img.setAttribute('alt', '');
}
});
</script>