【WordPress】超軽量アフィリエイト(amazon&アリエク)リンク埋め込み

たまにはサイトの裏側の小技を記事にしてみる回パート2

当サイトのインプレ記事ではAmazonアソシエイトリンクを末尾に入れて、読んだ人が買えるようになっています。わざわざウチのAmazonのリンクから買ってくださる方がときどきいるみたいで、大変感謝です。サーバー代・ドメイン代に充てさせていただいています。
でもAmazonって代理店税とられるからアリエクで買うより高いですよね。安心を買ってるといってもいいのでしょうが2倍くらい金額差が付いてることもありますし、新製品は軒並みアリエクにしかないことも多いですよね。そういうわけですから~~ドケチ~~貧乏人としては可能な限りアリエクで買うようにしていますし、ウチのサイト見に来てくださる読者の皆様もたぶんアリエクで買ってる人が多いんじゃないでしょうか。

わたしがユーザーだったらサイトリンクからアリエクで買えたらいいのにって思うよなぁ、ということから、重い腰を上げてアリエクのアフィリエイター登録を行いました。~~更新費用が想像以上に痛い出費だっただけ~~
あっさり審査は通過したので、各記事にアリエクのリンクも差し込んでみました。

CCA C12 インイヤーメタルヘッドフォン 5BA + 1DD ハイブリッド HiFi IEM イヤホン 12 ドライバーユニットノイズ分離ステレオ有線イヤホン 2Pin

Amazonで見る AliExpressで見る

こんな感じでふたつのリンクが表示されます。

軽量化よりも作業簡略化が目的

何年も活動を続けている有名レビュアーのサイトから検索順位を奪いたい…わけではないですが、SNSをほとんど運用していない以上、検索流入をしっかりとらないと誰にも見てもらえません。趣味の記録なんだからそんな必死になんなくていいじゃん、とかもう一人の自分が言っている気がします。でもできるのにやらないのってめっちゃモヤモヤするんですよね。

Googleはページの表示速度をとても重要な指数として評価しているので（コアウェブバイタル）、アフィリエイトリンクを埋め込むときの表示には結構気を使います。
公式埋め込みバナーやAPIを使うとページロードするたびに画像・商品名・価格などを読むことになります。まぁ便利ではありますがそんなことしたらロード時間のせいでスコアがモリモリ下がりますので、ウチでは基本的に外からとらないようにしているわけです。

あと記事書くときの作業の軽減。リンク入れて画像入れてそれをタグで囲ってクラスも当てて…とか毎回いちいちやってられません。
むしろこっちの省力化のほうが本命です。

特徴

API不要
- 激速：外部と通信せずに本文のテキストを整形するだけなので、表示速度への影響がありません。
- メンテナンスフリー：APIキーの期限切れや、Amazon・アリエクの仕様変更を考慮する必要がありません。
執筆コストの削減：必要なのは画像・商品名・リンクの3行だけ。記事内に差し込めば自動で完成します。
レスポンシブ対応：PC・スマホそれぞれのデバイスに最適化されたレイアウトで出力されます。

動作ロジック

記事本文内からAmazon（amzn.to）またはAliExpressのURLをスキャンします。
リンク行が見つかったら、その前後3行以内にもう一方のURLがないか探索。あれば統合、なければ単独ボタンとして処理します。
リンク行の前後2行にあるタグなし行から、最も文字数が多い行を自動的に商品名に採用します。
リンク行の前後2行に含まれるimgタグを上方一致で取得し、サムネイル画像にします。
抽出したデータでカード型の表を生成し、使用した元のデータ行（URLやテキスト）は自動で非表示にします。

導入は自己責任でお願いします。サポートも一切しませんのであしからず。

functions.php

直接書いてもいいですが、わたしはAmazon.phpとしてモジュール化して、functionsからrequire しています。

<?php
// ----------------------------------
// 投稿ページ・Amazon & AliExpressカード
// ----------------------------------
// 本文中のリンクをカードに変換する処理
add_filter('the_content', function ($content) {
    if (is_admin() || is_feed() || is_preview() || is_page()) return $content;
    if (strpos($content, 'data-hybrid-card="1"') !== false) return $content;

    $is_amz = stripos($content, 'amzn.to/') !== false;
    $is_ali = (stripos($content, 'aliexpress.com/') !== false || stripos($content, 's.click.aliexpress.com') !== false);
    if (!$is_amz && !$is_ali) return $content;

    $lines = preg_split("/\r?\n/", $content, -1);
    $converted = false;

    for ($i = 0; $i < count($lines); $i++) {
        $amz_rx = '~https?://amzn\.to/[A-Za-z0-9]+~i';
        $ali_rx = '~https?://(?:s\.click\.aliexpress\.com/e/|[\w.]+\.aliexpress\.com/item/)[A-Za-z0-9?=._&/-]+~i';

        $found_amz = preg_match($amz_rx, $lines[$i], $m1) ? $m1[0] : null;
        $found_ali = preg_match($ali_rx, $lines[$i], $m2) ? $m2[0] : null;

        if (!$found_amz && !$found_ali) continue;

        $converted = true;
        $trigger_index = $i;
        $amazon_url = $found_amz;
        $aliexpress_url = $found_ali;

        for ($d = -3; $d <= 3; $d++) {
            if ($d === 0) continue;
            $j = $i + $d;
            if ($j < 0 || $j >= count($lines)) continue;
            if (!$amazon_url && preg_match($amz_rx, $lines[$j], $m)) { $amazon_url = $m[0]; $lines[$j] = ''; }
            if (!$aliexpress_url && preg_match($ali_rx, $lines[$j], $m)) { $aliexpress_url = $m[0]; $lines[$j] = ''; }
        }

        $meta_idxs = [];
        for ($d = -2; $d <= 2; $d++) {
            $j = $trigger_index + $d;
            if ($j >= 0 && $j < count($lines)) $meta_idxs[] = $j;
        }

        $img_url = ''; $img_idx = null;
        foreach ($meta_idxs as $j) {
            $candidate = hybrid_pick_img_url($lines[$j]);
            if ($candidate) { $img_url = $candidate; $img_idx = $j; break; }
        }

        $best_title = ''; $title_idx = null;
        foreach ($meta_idxs as $j) {
            $plain = trim(strip_tags($lines[$j]));
            if ($plain === '' || hybrid_has_url($lines[$j])) continue;
            if (mb_strlen($plain, 'UTF-8') > mb_strlen($best_title, 'UTF-8')) { $best_title = $plain; $title_idx = $j; }
        }
        if (!$best_title) $best_title = '商品リンク';

        $lines[$i] = hybrid_render_card($amazon_url, $aliexpress_url, $img_url, $best_title);
        if ($img_idx !== null && $img_idx !== $i) $lines[$img_idx] = '';
        if ($title_idx !== null && $title_idx !== $i) $lines[$title_idx] = '';
    }
    $rendered = implode("\n", $lines);
    return $converted ? '<div data-hybrid-card="1">' . $rendered . '</div>' : $rendered;
}, 9);

function hybrid_pick_img_url($line) {
    if (preg_match('~<img[^>]*\s+src=["\']([^"\']+)["\']~i', $line, $m)) return $m[1];
    if (preg_match('~https?://[^\s"\'<>]+\.(?:png|jpe?g|webp)~i', $line, $m)) return $m[0];
    return '';
}
function hybrid_has_url($line) {
    return preg_match('~https?://|amzn\.to|aliexpress~i', $line);
}

function hybrid_render_card($amz_url, $ali_url, $img_url, $title) {
    ob_start(); ?>
    <div class="hybrid-card">
        <div class="hybrid-thumb">
            <?php if ($img_url): ?><img src="<?php echo esc_url($img_url); ?>" alt="" loading="lazy"><?php endif; ?>
        </div>
        <div class="hybrid-body">
            <div class="hybrid-title"><?php echo esc_html($title); ?></div>
            <div class="hybrid-btns">
                <?php if ($amz_url): ?><a href="<?php echo esc_url($amz_url); ?>" class="btn-amz" target="_blank" rel="nofollow noopener">Amazonで見る</a><?php endif; ?>
                <?php if ($ali_url): ?><a href="<?php echo esc_url($ali_url); ?>" class="btn-ali" target="_blank" rel="nofollow noopener">AliExpressで見る</a><?php endif; ?>
            </div>
        </div>
    </div>
    <?php return ob_get_clean();
}

// CSSファイルロード
add_action('wp_enqueue_scripts', function () {
    $handle = 'hybrid-cardcss';
    $path   = get_stylesheet_directory() . '/css/amazon.css';
    $uri    = get_stylesheet_directory_uri() . '/css/amazon.css';
    $ver    = file_exists($path) ? filemtime($path) : null;

    wp_enqueue_style($handle, $uri, [], $ver);
}, 20);

100

101

<?php

// ----------------------------------

// 投稿ページ・Amazon & AliExpressカード

// ----------------------------------

// 本文中のリンクをカードに変換する処理

add_filter('the_content', function ($content) {

if (is_admin() || is_feed() || is_preview() || is_page()) return $content;

if (strpos($content, 'data-hybrid-card="1"') !== false) return $content;

$is_amz = stripos($content, 'amzn.to/') !== false;

$is_ali = (stripos($content, 'aliexpress.com/') !== false || stripos($content, 's.click.aliexpress.com') !== false);

if (!$is_amz && !$is_ali) return $content;

$lines = preg_split("/\r?\n/", $content, -1);

$converted = false;

for ($i = 0; $i < count($lines); $i++) {

$amz_rx = '~https?://amzn\.to/[A-Za-z0-9]+~i';

$ali_rx = '~https?://(?:s\.click\.aliexpress\.com/e/|[\w.]+\.aliexpress\.com/item/)[A-Za-z0-9?=._&/-]+~i';

$found_amz = preg_match($amz_rx, $lines[$i], $m1) ? $m1[0] : null;

$found_ali = preg_match($ali_rx, $lines[$i], $m2) ? $m2[0] : null;

if (!$found_amz && !$found_ali) continue;

$converted = true;

$trigger_index = $i;

$amazon_url = $found_amz;

$aliexpress_url = $found_ali;

for ($d = -3; $d <= 3; $d++) {

if ($d === 0) continue;

$j = $i + $d;

if ($j < 0 || $j >= count($lines)) continue;

if (!$amazon_url && preg_match($amz_rx, $lines[$j], $m)) { $amazon_url = $m[0]; $lines[$j] = ''; }

if (!$aliexpress_url && preg_match($ali_rx, $lines[$j], $m)) { $aliexpress_url = $m[0]; $lines[$j] = ''; }

}

$meta_idxs = [];

for ($d = -2; $d <= 2; $d++) {

$j = $trigger_index + $d;

if ($j >= 0 && $j < count($lines)) $meta_idxs[] = $j;

}

$img_url = ''; $img_idx = null;

foreach ($meta_idxs as $j) {

$candidate = hybrid_pick_img_url($lines[$j]);

if ($candidate) { $img_url = $candidate; $img_idx = $j; break; }

}

$best_title = ''; $title_idx = null;

foreach ($meta_idxs as $j) {

$plain = trim(strip_tags($lines[$j]));

if ($plain === '' || hybrid_has_url($lines[$j])) continue;

if (mb_strlen($plain, 'UTF-8') > mb_strlen($best_title, 'UTF-8')) { $best_title = $plain; $title_idx = $j; }

}

if (!$best_title) $best_title = '商品リンク';

$lines[$i] = hybrid_render_card($amazon_url, $aliexpress_url, $img_url, $best_title);

if ($img_idx !== null && $img_idx !== $i) $lines[$img_idx] = '';

if ($title_idx !== null && $title_idx !== $i) $lines[$title_idx] = '';

}

$rendered = implode("\n", $lines);

return $converted ? '<div data-hybrid-card="1">' . $rendered . '</div>' : $rendered;

}, 9);

function hybrid_pick_img_url($line) {

if (preg_match('~<img[^>]*\s+src=["\']([^"\']+)["\']~i', $line, $m)) return $m[1];

if (preg_match('~https?://[^\s"\'<>]+\.(?:png|jpe?g|webp)~i', $line, $m)) return $m[0];

return '';

}

function hybrid_has_url($line) {

return preg_match('~https?://|amzn\.to|aliexpress~i', $line);

}

function hybrid_render_card($amz_url, $ali_url, $img_url, $title) {

ob_start(); ?>

<?php if ($img_url): ?><img src="<?php echo esc_url($img_url); ?>" alt="" loading="lazy"><?php endif; ?>

</div>

<?php if ($amz_url): ?><a href="<?php echo esc_url($amz_url); ?>" class="btn-amz" target="_blank" rel="nofollow noopener">Amazonで見る</a><?php endif; ?>

<?php if ($ali_url): ?><a href="<?php echo esc_url($ali_url); ?>" class="btn-ali" target="_blank" rel="nofollow noopener">AliExpressで見る</a><?php endif; ?>

</div>

<?php return ob_get_clean();

}

// CSSファイルロード

add_action('wp_enqueue_scripts', function () {

$handle = 'hybrid-cardcss';

$path = get_stylesheet_directory() . '/css/amazon.css';

$uri = get_stylesheet_directory_uri() . '/css/amazon.css';

$ver = file_exists($path) ? filemtime($path) : null;

wp_enqueue_style($handle, $uri, [], $ver);

}, 20);

Amazon.css

子テーマにCSSディレクトリを作ってそこに突っ込んでください。

/* カード本体 */
.hybrid-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: .8rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: .8rem 0;
}

/* サムネ */
.hybrid-thumb {
  width: 120px;
  flex: 0 0 120px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f8;
  border-radius: 14px;
  overflow: hidden;
}
.hybrid-thumb img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display: block;
}

/* テキストエリア */
.hybrid-body {
  flex: 1 1 auto;
  min-width: 0;
}
.hybrid-title {
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .4rem;
  font-size: 1rem;
}

/* ボタンコンテナ - 横並びと隙間の設定 */
.hybrid-btns {
  display: flex;
  gap: .6rem;
  margin-top: .6rem;
  flex-wrap: wrap; /* ボタンが入り切らない時に折り返す */
}

/* ボタン共通設定 */
.btn-amz, .btn-ali {
  display: inline-block;
  color: #111 !important;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.2;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  text-align: center;
}

.btn-amz:active, .btn-ali:active {
  transform: translateY(1px);
}

/* Amazonボタン */
.btn-amz {
  background: #FFD814;
  border: 1px solid #FFD814;
}
.btn-amz:hover {
  background: #F7CA00;
  border-color: #F7CA00;
}

/* AliExpressボタン */
.btn-ali {
  background: #FF4747;
  border: 1px solid #FF4747;
  color: #fff !important;
}
.btn-ali:hover {
  background: #e63939;
  border-color: #e63939;
}

/* スマホ表示最適化 */
@media (max-width: 600px) {
  .hybrid-card {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;
    text-align: center;
  }
  .hybrid-thumb {
    width: 150px; /* スマホでは少し大きく */
    flex-basis: 150px;
    margin-bottom: .4rem;
  }
  .hybrid-btns {
    flex-direction: column; /* ボタンを縦に */
    width: 100%;
  }
  .btn-amz, .btn-ali {
    width: 100%; /* ボタンを横幅いっぱいに */
    box-sizing: border-box;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

/* カード本体 */

.hybrid-card {

display: flex;

gap: .8rem;

align-items: flex-start;

border: 1px solid #eee;

border-radius: 12px;

padding: .8rem;

background: #fff;

box-shadow: 0 1px 2px rgba(0,0,0,.04);

margin: .8rem 0;

}

/* サムネ */

.hybrid-thumb {

width: 120px;

flex: 0 0 120px;

aspect-ratio: 1/1;

display: flex;

align-items: center;

justify-content: center;

background: #f6f7f8;

border-radius: 14px;

overflow: hidden;

}

.hybrid-thumb img {

max-width: 92%;

max-height: 92%;

object-fit: contain;

display: block;

}

/* テキストエリア */

.hybrid-body {

flex: 1 1 auto;

min-width: 0;

}

.hybrid-title {

font-weight: 600;

line-height: 1.4;

margin-bottom: .4rem;

font-size: 1rem;

}

/* ボタンコンテナ - 横並びと隙間の設定 */

.hybrid-btns {

display: flex;

gap: .6rem;

margin-top: .6rem;

flex-wrap: wrap; /* ボタンが入り切らない時に折り返す */

}

/* ボタン共通設定 */

.btn-amz, .btn-ali {

display: inline-block;

color: #111 !important;

font-weight: 700;

font-size: .85rem;

line-height: 1.2;

padding: .55rem 1.1rem;

border-radius: 999px;

text-decoration: none;

white-space: nowrap;

transition: background .15s ease, border-color .15s ease, transform .05s ease;

text-align: center;

}

.btn-amz:active, .btn-ali:active {

transform: translateY(1px);

}

/* Amazonボタン */

.btn-amz {

background: #FFD814;

border: 1px solid #FFD814;

}

.btn-amz:hover {

background: #F7CA00;

border-color: #F7CA00;

}

/* AliExpressボタン */

.btn-ali {

background: #FF4747;

border: 1px solid #FF4747;

color: #fff !important;

}

.btn-ali:hover {

background: #e63939;

border-color: #e63939;

}

/* スマホ表示最適化 */

@media (max-width: 600px) {

.hybrid-card {

flex-direction: column; /* 縦並びに変更 */

align-items: center;

text-align: center;

}

.hybrid-thumb {

width: 150px; /* スマホでは少し大きく */

flex-basis: 150px;

margin-bottom: .4rem;

}

.hybrid-btns {

flex-direction: column; /* ボタンを縦に */

width: 100%;

}

.btn-amz, .btn-ali {

width: 100%; /* ボタンを横幅いっぱいに */

box-sizing: border-box;

}

おわりに

相変わらずオチはないので、1曲聴きながらどういうコードになるか見てってください。

いい感じ

Ketsumeishi – Topic

このように表示されます。

KZ Saga 有線イヤホンステージライブモニタースポーツヘッドフォン HiFi ステレオ

Amazonで見る AliExpressで見る

▼投稿画面の入力

▼実際に表示される内容

<div class="hybrid-thumb">
            <img decoding="async" src="https://iem.5103ch.jp/wp-content/uploads/2025/09/saga-150x150.png" alt="KZ Saga Bass インプレ｜特盛低域と滑らかボーカルの調和" loading="lazy">        </div>
<div class="hybrid-body">
<div class="hybrid-title">KZ Saga 有線イヤホンステージライブモニタースポーツヘッドフォン HiFi ステレオ</div>
<div class="hybrid-btns">
                <a href="https://amzn.to/3KbXvKK" class="btn-amz" target="_blank" rel="nofollow noopener">Amazonで見る</a>                <a href="https://s.click.aliexpress.com/e/_c3lYpWQT" class="btn-ali" target="_blank" rel="nofollow noopener">AliExpressで見る</a>            </div>
<p></p></div>
<p></p>

<div class="hybrid-title">KZ Saga 有線イヤホンステージライブモニタースポーツヘッドフォン HiFi ステレオ</div>

<a href="https://amzn.to/3KbXvKK" class="btn-amz" target="_blank" rel="nofollow noopener">Amazonで見る</a> <a href="https://s.click.aliexpress.com/e/_c3lYpWQT" class="btn-ali" target="_blank" rel="nofollow noopener">AliExpressで見る</a> </div>

<p></p>

たまにはサイトの裏側の小技を記事にしてみる回パート2

軽量化よりも作業簡略化が目的

特徴

動作ロジック

functions.php

Amazon.css

おわりに

5103chことみ

この著者の最新の記事

KZ AS16 Pro X インプレ｜スリムな像が浮き上がるハイテンショ…

音を語る以前の、あまりにしょうもない騒ぎについて

GK KUNTEN インプレ｜優しさを伝える万能ハイコスパ機

KZ Duonic インプレ｜DDのパワーと平面の情報量を掛け合わせた個…

FUNLOGY Wired Earbuds インプレ｜音全体が柔らかく溶…

TRN MT5 インプレ｜輪郭の張りでボーカルを面で押し出す、明快サウン…

コメント

最新の記事

目次

お気に入り機種

絞り込み検索

価格帯

メイン帯域

音の温度感

音場サイズ

定位

分離

低域：量感

低域：質感

中域：ボーカルタイプ

中域：透明感

高域：粗密・滑らかさ

高域：刺さり感

登録リンク

耳で旅するイヤホンの世界

イヤホンやヘッドホンを通して覗いた「音の世界」をことばにします。

【WordPress】超軽量アフィリエイト(amazon&アリエク)リンク埋め込み

たまにはサイトの裏側の小技を記事にしてみる回パート2

軽量化よりも作業簡略化が目的

特徴

動作ロジック

functions.php

Amazon.css

おわりに

5103chことみ

この著者の最新の記事

KZ AS16 Pro X インプレ｜スリムな像が浮き上がるハイテンショ…

音を語る以前の、あまりにしょうもない騒ぎについて

GK KUNTEN インプレ｜優しさを伝える万能ハイコスパ機

KZ Duonic インプレ｜DDのパワーと平面の情報量を掛け合わせた個…

FUNLOGY Wired Earbuds インプレ｜音全体が柔らかく溶…

TRN MT5 インプレ｜輪郭の張りでボーカルを面で押し出す、明快サウン…

コメント

最新の記事

#ezw_tco-8 .ez-toc-title{ font-size: 120%; font-weight: 500; color: #000; } #ezw_tco-8 .ez-toc-widget-container ul.ez-toc-list li a{ font-size: 120%; font-weight: 500; color: #000; } #ezw_tco-8 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 目次

お気に入り機種

絞り込み検索

価格帯

メイン帯域

音の温度感

音場サイズ

定位

分離

低域：量感

低域：質感

中域：ボーカルタイプ

中域：透明感

高域：粗密・滑らかさ

高域：刺さり感

登録リンク

耳で旅するイヤホンの世界

イヤホンやヘッドホンを通して覗いた「音の世界」をことばにします。

目次