Amazonアソシエイト ツールバーから 画像リンク 生成機能が消えて間もなく、既存の 画像リンク も 廃止 でリンク切れ状態に。このまま WodrPress ブログ内に大量のリンク切れコンテンツを内包することは、SEOの観点から低質なコンテンツと見なされ兼ねないので、スクリプトで 画像リンク を 一括 非表示 する仕組みを考えました。
Amazonアソシエイトの全画像リンク壊れる
前回の記事で、せっかくAmazonアソシエイトツールバーから消えた画像リンクを自前で生成するスクリプトを組んだのもつかの間、画像リンクのリダイレクト先ドメインからレコードが削除され、既存の画像リンクが全てリンク切れになってしまいました。
大量のリンク切れをサイト内に放置しておくのは宜しくないので、WordPress管理画面でこれまでに書いた記事のうち、Amazon画像リンクを含むものを抽出してみると、既に公開済み記事で280弱。
これ一つ一つ手作業で対応するにも莫大な時間が掛かることから、スクリプトでコンテンツを一括置換して対処する方法を考えます。
ページロード時にJavaScriptで非表示に
まずは、WordPressに限らず汎用的な仕組みをJavaScriptで組んでみました。
Amazon画像リンクは <iframe></frame> タグで構成されています。一方、ページ内には他にも <iframe> タグがいるかも知れませんが、 class や id は含まれていないので src 属性のURLから類推して、Amazon画像リンクの場合は src 属性を削除します。
1 2 3 4 5 6 7 8 |
jQuery(function(){ const iftags = document.getElementsByTagName('iframe'); for (const iftag of iftags) { if ( iftag.src.includes('asins=') ) { iftag.removeAttribute('src'); } } } |
WordPressでは、 functions.php に次の記述を加えて、JavaScriptファイルをロード、実行するように設定します。
1 2 3 4 5 6 7 |
// Amazon Pic-Link iframe src remover $post_type = get_post_type(); if ( !is_admin() ) { add_action( 'wp_enqueue_scripts', function() { wp_enqueue_script('amaiframe', get_stylesheet_directory_uri().'/js/amaiframe.js', array(), '1.0', true); }); } |
wp_enqueue_script の最後のオプションを後読みにして、htmlの </body> を読んでからロードするようにしないと、期待通りに動いてくれません。
スクリプトの適用結果は以下の通り。 <iframe> は存在したままなので不自然な空白は残ったまま。
サーバ側PHPでiframeタグを削除
次はもう少し手前、サーバサイドのPHPでWordPressがhtmlを組み立てる時に、Amazon画像リンクの <iframe></iframe> を一括置換削除する方法です。
functions.php に加える次の記述では、記事の内容が格納された the_Content 変数の中身を、 preg_replace() 関数で置換削除しています。
1 2 3 4 5 6 7 |
// Amazon Pic-Link iframe src remover add_filter('the_content', function ($text){ if( !is_admin() && is_single() && $text != null ){ $text = preg_replace('/\<iframe .+asins\=.*\>\<\/iframe\>/', '', $text); } return $text; }); |
こちらは <iframe> タグごと削除しているので、空白はありません。
その他には試していませんが、WordPressのSearch Regexプラグインを使って、データベース内の投稿記事を正規表現で一括変換してしまうのが、もしかすると一番スッキリする方法かもしれません。
ともあれ、これでリンク切れを晒すことは回避できたので、急ぎ代替プラグインの導入へ取り組みたいと思います。