WordPress ›

AddThis の プラグインを入れると Validator に引っかかったので対処したメモ

先日、このブログのSNSのシェアボタンを JetPack から AddThis Sharing Buttons というプラグインに乗り換えてみました。で、しばらくして気付いたんですが、AddThis を導入すると、HTMLソースの中で"addthis:title"とか"addthis:url"といったカスタムな属性を持つタグが吐き出されてます。そのままではHTMLのValidatorに引っかかってしまいます。

この属性のために何か表示がおかしくなるとか遅くなるとか…　んなこと一切ないので気にしない人はほっとけば済む話ですが、そういうのダメなタチなんでね！ってことでググってみたら、だいぶ前の記事ですが同じように気になって対処されている方がいました。W3Cのバッジは貼らないしHTML5なんですが参考になります。

とりあえずこちらの記事にある「XMLの名前空間を追加」してみてもうまくいかず、途中で面倒くさくなったので海外のフォーラムで見つけた方法でプラグインのソースに手を付けることにしました。

例えばシェアボタンなら以下のような感じで"addthis:title"とか"addthis:url"という属性の付いた<div>が吐き出されます。 

<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="URL" addthis:title="記事タイトル">
〜
</div>

フォーラムでは、属性をdata-addthis-urlとdata-addthis-titleに変えて吐き出し、JavaScriptでそれぞれの値をaddthis:〜属性に差し替えるという手法が紹介されていました。 

<div class="addthis_toolbox addthis_default_style addthis_32x32_style" data-addthis-url="URL" data-addthis-title="記事タイトル">
〜
</div>

<script>
$('#wrapper').find('[data-addthis-url]').attr('addthis:url', function() {
	return $(this).attr('data-addthis-url');
});
$('#wrapper').find('[data-addthis-title]').attr('addthis:title', function() {
	return $(this).attr('data-addthis-title');
});
</script>

元ネタがどこか忘れてしまったので、実際紹介されていたコードとは異なります。確かその例では$().removeAttr()かなんかでdata-addthis-〜の属性をちゃんと削除していましたが、消さなくても困らないし無駄な処理になるだけなのでその部分は端折っています。

data-〜属性を吐き出すようにプラグインを直接編集します。

  1. インストール済みプラグイン一覧の AddThis Sharing Buttons にある編集ボタンをクリック。
    WordPress Plugin 'AddThis Sharing Buttons'
  2. 編集画面へ移動したらページ内で「addthis:」を検索。ソース内のコメントも合わせて4件ヒット。
    WordPress Plugin 'AddThis Sharing Buttons' Edit page
  3. ソース内のヒットした箇所を見ると、以下のようなコードがあるので、 
            if (!is_null($url)) {
            $identifier =  "addthis:url='$url' ";
        }

        if (!is_null($title)) {
            $identifier .= "addthis:title='$title'";
        }
    属性を書き直します。 
            if (!is_null($url)) {
            // 元 $identifier =  "addthis:url='$url' ";
            $identifier =  "data-addthis-url='$url' ";
        }

        if (!is_null($title)) {
            // 元 $identifier .= "addthis:title='$title'";
            $identifier .= "data-addthis-title='$title'";
        }

もちろんプラグインをバージョンアップしたら元に戻ってしまうので気をつけてね、自分。

関連する記事