見目よいASPリンク・カッテネをカスタムフィールドとショートコードでアレンジした備忘録

2022年03月08日
WordPress

こんばんは、いとです。

デザインのドリルを利用したデザイン学習記事に、カッテネをアレンジしたアフィリエイトリンクを挿入しました。
参考：デザインのドリルの記事一覧

備忘録も兼ねて、やり方を公開してみようと思います。

そもそもカッテネ、とは？

カッテネは、感情資本化ブロガーのたいさんが作成された「一つの商品に対して、複数のASPやショッピングサイトのリンクを貼る」ことができるサービスです。
有名どころであるカエレバやヨメレバと異なり、知識があれば自由にデザイン変更ができ、そのまま使用してもASP以外の出口（リンク先）のない、アフィリエイターにとって非常に優秀なサービスです。多分。

参考：
カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ
カッテネの使い方を誰でもできるように画像60枚以上使って超詳しく説明します

公式でプラグインが提供されているのですが、JSONデータを毎回扱う必要があるので、ちょっと面倒です。
少し余分に消してしまうと動かなくなってしまいますし、扱いにくい。
一度ならまだしも、毎回、となると、個人的にはソースを破壊しないか恐怖を感じます。

そこで、WordPressの標準機能である「カスタムフィールド」と「ショートコード」を利用してアレンジしてみました。

表示イメージは下記の通りです。

See the Pen カッテネアレンジ表示イメージ by いと (@ykllog) on CodePen.

作成方法

まず、ふたつのphpファイルを作成します。

▼function.php
ショートコードを追加するためのソースコードです。

function shortcord_book() {
        // 出力バッファリングを有効化する
        ob_start();
        // 外部ファイルを読み込む
        // 「.php(拡張子部分)」は不要
        get_template_part('shortcode-parts/book-affiliate');
        // 出力バッファを削除する
        return ob_get_clean();
    }
    add_shortcode('book', 'shortcord_book');

参考：
WordPressにショートコードを使ってPHPを埋め込む方法

▼shortcode-parts/book-affiliate.php
ソートコード内で呼び出すファイルです。
カッテネの内容をカスタムフィールドで呼び出せるよう、そしてわたしが使いやすいよう書き換えています。

<div class="kattene">
  <div class="kattene__imgpart">
    <img src="<?php echo post_custom('画像のURL'); ?>">
  </div>
  <div class="kattene__infopart">
    <div class="kattene__summary">
      <div class="kattene__title"><?php echo post_custom('商品タイトル'); ?></div>
      <?php if(post_custom('商品説明')): ?>
        <div class="kattene__description"><?php echo post_custom('商品説明'); ?></div>
      <?php endif; ?>
    </div>
    <div class="kattene__btnArea">
      <?php if(post_custom('AmazonのURL')): ?>
        <div><a class="kattene__btn orange" target="_blank" rel="noopener" href="<?php echo post_custom('AmazonのURL'); ?>">Amazon</a></div>
      <?php endif; ?>
      <?php if(post_custom('KindleのURL')): ?>
        <div><a class="kattene__btn blue" target="_blank" rel="noopener" href="<?php echo post_custom('KindleのURL'); ?>">Kindle</a></div>
      <?php endif; ?>
      <?php if(post_custom('楽天のURL')): ?>
        <div><a class="kattene__btn red" target="_blank" rel="noopener" href="<?php echo post_custom('楽天のURL'); ?>">楽天</a></div>
      <?php endif; ?>
      <?php if(post_custom('Yahoo!のURL')): ?>
        <div><a class="kattene__btn green" target="_blank" rel="noopener" href="<?php echo post_custom('Yahoo!のURL'); ?>">Yahoo!</a></div>
      <?php endif; ?>
    </div>
  </div>
</div>

参考：
カスタムフィールドの値を表示する[get_post_meta][wpautop]
カスタムフィールドの入力の有無を判定して表示・非表示

上記ふたつのファイルを作成したら、次はカスタムフィールドの設定です。
（CSSはイメージとして載せたCodePenから抜き出してもいいですし、自分用にアレンジしていただいてもいいと思います）

①（初回のみ）デフォルトのカスタムフィールドを表示
参考：WordPressでカスタムフィールドを設定・表示する方法

②画像のURL、商品タイトル、商品説明、AmazonのURL、KindleのURL、楽天のURL、Yahoo!のURL、というカスタムフィールドの名前を作成

③それぞれの名前に対応する値を入力する

④カッテネを挿入したい箇所に、ショートコード：bookと記入する。

これで、WordPress上にいい感じにカッテネが表示されるようになります。

最初のとっかかりは大変なのですが、一度作成してしまえばあとの運用はかなり楽になります。
同一ページ内に同一の内容を複数挿入する時は同じショートコードを使いまわせばいいですし、別の内容を複数挿入する場合はその数の分だけショートコードを作成して使用してください。
その時、カスタムフィールドの値を別のもの（画像のURL2など）にすることを忘れないようにしてくださいね。

解説もなく、本当に自分用の備忘録ですがまとめてみました。
これで好きな商品を好きなように好きなだけ紹介できると思います。

先人の知恵に感謝！