*当サイトのリンクにはAmazonアソシエイトやアフィリエイトリンクが含まれております。

welcartのusces_the_itemImageに構造化データやaltを付けるメモ

毎度毎度もweb系のネタでスイマセンm(uu)m
書いておかないと忘れてしまいますし、何処かの誰かのお役に立つこともあるかもですし、welcartのご発展に1mm位は貢献出来ればと。僕程度のレベルでは0.1ミクロン位かもですが(汗)

広告

welcartのimgタグをもっと自由に使ってみる

welcartに備わっているusces_the_itemImageという関数。とても便利ですが、構造化データやaltを任意に付けるとなると面倒ですよね?
altならfunctions.phpにフックすればある程度決めて出力出来るようなのですが、構造化データの属性?はどう出力すれば良いのか分かりませんでした。
当店で使用させていただいておりますwelcartテーマBlancではJSで追加されているのですが、構造化テストツールで調べると、どうやらJSで追加された構造化データーは無効になってるッポイいんですよねー。なので、attachment_idを取得して、attachment_image_srcを出力すれば可能になるはずとやってみました。

welcartのusces_the_itemImageの出力方法を参考にする

usces_the_itemImageではattachment_imageで3パターンの大きさの画像に分けて出力してくれているワケですが、どう出力しているのかプラグインのphpをじっくり拝見して、同じ方法でattachment_image_srcを取得しました。
コードはこんな感じ↓

<?php global $usces;
    $post_id = $post->ID;
    $code =  get_post_meta($post_id, '_itemCode', true);
    $pictid = (int)$usces->get_mainpictid($code);
    $image_src = wp_get_attachment_image_src( $pictid,array(600,600) ); ?>
 <img itemprop="image" src="<?php echo $image_src[0]; ?>" width="<?php echo $image_src[1]; ?>" height="<?php echo $image_src[2]; ?>" alt="<?php usces_the_itemName(); ?>"/>

コレが0番の画像になります。要はメイン画像です。
上のコードではaltがusces_the_itemNameになっているので、商品名がaltに入ります。
画像の説明を入れたければusces_the_itemImageDescriptionとかでしょうかね。上のコードではclassは吐き出しませんので、必要な人は任意で追加です。array(600,600)のトコロは縦横のサイズです。

次は複数画像の場合ですが、利用中のBlancの場合の書き方です↓

<?php
    $pictids = $usces->get_pictids($code);
    $ind = $id - 1;
    $pictid = ( isset($pictids[$ind]) && (int)$pictids[$ind] ) ? $pictids[$ind] : 0;
    $image_src = wp_get_attachment_image_src( $pictid,array(600,600) ); ?>
    <img itemprop="image" src="<?php echo $image_src[0]; ?>" width="<?php echo $image_src[1]; ?>" height="<?php echo $image_src[2]; ?>" alt="<?php usces_the_itemName(); ?>"/>

Blancの場合、商品画像がスライダーの中にありforeachで回されているのでこんな感じになります。
welcartのusces_the_itemImageとほぼ同じ出力方法なので問題ないと思いますが、もし間違いがあったらご指摘下さい。
この方法でスキーマのitempropを入れたトコロ全画像データとして認識されました。アクセス等に効果があるかは不明ですが、せっかく作者様がスキーマのベースを作って下さっているのですからフル活用してみても良いかもです。

特にwebサイトは構築当初はアクセスが非常に悲しいので藁にもすがる思いでやってみました。
ついでにattachment_image_srcの関数はwordpressの関数なので、似た使い方でwordpressのサムネイルとかにスキーマのデータを入れたり独自の属性をつけるのに役立つと思われます。

ちなみに、コレを書きながらfunctions.phpに書けば良かった気もしたのですが、商品のシングルページでしか使わないので まっ良いかって事で。
ではでは。


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください