デフォルトではaタグ(リンク)で貼り付ければ可能ですが、タグ毎に関連する書籍等を表示したい場合、テーマを拡張する必要があります

環境

Ghost v1.25.2
CasperTheme Version 2.3.3

目的

投稿記事に設定されたタグに該当するAmazonの商品を列挙して表示する
ただしGhostのプラグインとしては実装せず、単純なjsonpとすることで他プラットフォームへ容易に移植できるように実装する

背景

お勧めの書籍等をタグ毎にまとめたい
コンテンツと広告をできるだけ別として管理したい
将来的にGhostから移行しても楽にしておきたいからGhostに依存するコードは書きたくない

解決策

Ghostに依存しないように実装するため、今回は単純なjsonpのモデルとjqueryによるレンダリングで実装する
やることは、投稿を表示する際に投稿タグに紐付いたamazon商品を表示するだけ

1. テーマのダウンロード

[Design]から対象のテーマをダウンロードする
デフォルトのcasperテーマは管理画面上からは上書きできないため、カスタムのテーマを所有してない場合はcasperをダウンロードして、それを改変後、別名にしてアップロードする

2. モデル(jsonp)の作成

jsonで実装してもよいですが、ローカルデバッグが面倒なのでjsonpで実装
jsonpといってますが実態はjsです
下記はfusion360のタグに対して表示するモデルのサンプルの抜粋

assets/js/amazon.jsonp

var _amazon = {
    'ads':{
        'fusion360':[
             {category:'book', element:'<a target="_blank"  href="https://www.amazon.co.jp/gp/product/480071141X/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=480071141X&linkCode=as2&tag=zync-22&linkId=02a0fd8f666e910b35309f4470f6f2e9"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=480071141X&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=zync-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=zync-22&l=am2&o=9&a=480071141X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />'}
            ,{category:'book', element:'<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4800712157/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4800712157&linkCode=as2&tag=zync-22&linkId=ab97ea8d0e29effa061bc4352ef3b798"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4800712157&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=zync-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=zync-22&l=am2&o=9&a=4800712157" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />'}
            ,{category:'book', element:'<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4877834168/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4877834168&linkCode=as2&tag=zync-22&linkId=056d8702f59a1305edd870e8cddd2f27"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4877834168&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=zync-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=zync-22&l=am2&o=9&a=4877834168" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />'}
            ,{category:'book', element:'<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4877833900/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4877833900&linkCode=as2&tag=zync-22&linkId=5d7c44a6a03359de9f4f4a69f0f1dd31"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4877833900&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=zync-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=zync-22&l=am2&o=9&a=4877833900" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />'}
            ,{category:'book', element:'<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4877834311/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4877834311&linkCode=as2&tag=zync-22&linkId=1252d402b79bb64fcfd1a7258e53f781"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4877834311&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=zync-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=zync-22&l=am2&o=9&a=4877834311" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />'}
            ,{category:'book', element:'<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4774193984/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4774193984&linkCode=as2&tag=zync-22&linkId=bf52f068781ac8e672cceaa16aade636"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4774193984&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=zync-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=zync-22&l=am2&o=9&a=4774193984" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />'}
        ]
    }
}

3. cssの作成

広告を表示する領域のスタイルを作成する
今回はcasperテーマからの派生なので、元々あるスタイルを踏襲しますが必ずしもcasperテーマであるとは限らないので、別のcssファイルとして定義した

assets/css/extension.css

.post-full-ads {
    margin: 0 auto;
    max-width: 840px;
}

.post-ads {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -20px;
    padding: 40px 0 0;
    display: flex;
}

.post-ad {
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    margin: 0 20px 40px;
    min-height: 300px;
    background: #fff 50%;
    background-size: cover;
    border-radius: 5px;
    box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
    transition: all .5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

4. default.hbsの修正

上記のjsonpとcssを読み込むように修正する

default.hbs

    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/extension.css"}}" />
    <script type="text/javascript" src="{{asset "js/amazon.js"}}"></script>

5. post.hbsの修正

投稿タグを取得して必要があれば広告枠のルートDOMを生成させ、DOM準備が出来たタイミングでjQueryでレンダリングする

下記の広告枠DOMの生成処理を、

{{#if tags}}
<section class="post-full-ads">
    <div class="inner">
        {{#foreach tags}}
        <div class="post-ads {{name}}">
        </div>
        {{/foreach}}
    </div>
</section>
{{/if}}

<footer class="post-full-footer">
    ...
</footer>

の下に追加する

さらに下記の広告表示処理を、

    $('.post-ads').each(function(){
		var target = $(this);
        var target_class = $(this).attr("class");
        var classes = target_class.split(" ");
        for(var i = 0; i < classes.length; i++) {
            if(!_amazon || !_amazon['ads'])
                continue;
            var amazon_ads = _amazon.ads[classes[i]];
            if(amazon_ads) {
                for (var l = amazon_ads.length - 1; l >= 0; l--) {
                    var rand = Math.floor( Math.random() * ( l + 1 ) );
                    [amazon_ads[l], amazon_ads[rand]] = [amazon_ads[rand], amazon_ads[l]]
                }
                amazon_ads.forEach(function(amazon_ad) {
                    target.append('<article class="post-ad">' + amazon_ad.element + '</article>');
                });
            }
        }
    });

post.hbsの下の方にある、

// NOTE: Scroll performance is poor in Safari
// - this appears to be due to the events firing much more slowly in Safari.
//   Dropping the scroll event and using only a raf loop results in smoother
//   scrolling but continuous processing even when not scrolling
$(document).ready(function () {
....

の下に追加する

6. zip圧縮する

アーカイブして、フィル名をテーマ名に変更し、管理画面の[Design]->[upload]で上書きして適用する

確認

サイトにアクセスしてamazonの商品が表示されたらOK

課題

今回はてっとりばやくテーマに組み込んで実装してしまった
そのため、外部からモデルの更新ができない（しづらい）
次回はモデルamazon.jsをテーマから切り離して実装するように変更したい

GhostでAmazonアソシエイト広告の機能を追加する

zienchan

zienchan

環境

目的

背景

解決策

1. テーマのダウンロード

2. モデル(jsonp)の作成

3. cssの作成

4. default.hbsの修正

5. post.hbsの修正

6. zip圧縮する

確認

課題

DockerのGhostにlocalhost:2368で接続できない

Ghostでコードをシンタックスハイライトする - Prism.js

Ghostに問い合わせフォーム(Google Form)を追加する

Googleのマテリアルアイコンセットを使う

PhotoShopやIllustratorなどを使うと高確率でWHEA_UNCORRECTABLE_ERROR (0x00000124) になる問題