過去に、WordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにするという記事を書きました。横着したかっただけなのですが、意外とご好評いただいているようです。今回は、これを応用して、内部リンク、外部リンクの URL を WordPress の本文に貼り付けるだけで、オシャレなリンクをいとも簡単に生成できるようにしてみます。
オシャレなリンクを勝手に生成してくれる「Embedly」
簡単にオシャレなリンクを生成するためには、はてなブログで実装されている「はてなブログ oEmbed」を使用するという事も考えられます。その方法は、下記のサイトで詳しく紹介されていました。しかし、下記のサイトでも注意点として記述されているように、この方法には問題があります。今回は、この問題を解消した別の方法をご紹介します。
https://mbdb.jp/hacks/hatenablog-blogcard-ogp-correspondence.html
はてなブログカードの問題点
かの有名な「はてなブログ」では、リンク貼り付け時に自動的にサムネイル付きのオシャレなリンクを生成してくれます。「ブログカード」と呼ばれているものです。これは、「はてなブログ」に限った話ではありません。WordPress や Movable Type などで運用しているサイトでも適用できます。方法は単純です。
</iframe>
紹介したいサイトの「URL」を、上記の[url]に挿入して、ブログに貼り付けるだけです。実際に適用した場合、以下のように表示されます。適度に本文が抜粋され、サムネイル付きで、おまけにはてなブックマーク数まで表示してくれます。
ただし、この方法には冒頭のサイトでも紹介されているように、問題点があります。
- リンク先のアクセス解析の参照元がすべて「hatenablog-parts.com」になる
- RSS 配信時に表示が乱れる
- はてなブログがサービス終了すると使用できなくなる
3 点目については、独自に実装しない限りどうしようもないのですが、とくに 1 点目が致命的です。今回は、3 点目については目をつぶるとして、1 点目、2 点目を解消する方法を考えます。
オシャレなリンクを生成してくれる「Embedly」
そこで登場するのが、以下のサービスです。当サイトはすべてこのサービスを使用しています（つい最近、使用し始めました）。
この Web サービスを使用して、リンクを生成すると、Embed Code Generator | Embedlyのような感じになります。実際に生成されるコードは以下の通りです。<a>タグに、embedly-cardクラスを付与して、普通にリンクを生成すれば良いことがわかります。また、JavaScript を別途読み込む必要があることがわかります。
OTTAN.XYZ</a>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
この「Embedly」を使用して表示したイメージは、現在ご覧いただいているページを見ていただければわかりやすいかと思います。
投稿記事の本文に URL を貼り付けたら自動的に展開する
というわけで、「Embedly」を最大限に使用するために、投稿記事の本文に URL を貼り付けたら、自動的に「Embedly」で展開されるようにした結果が、こちらです。
ポイントは、WordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにするでご紹介した方法と同様です。wp_embed_register_handler()に、「http〜」から始る文字列を登録します。
逆に言うと、WordPress の本文中に貼り付けられた、「http〜」から始まる行はすべてこのクラスによって、オシャレなリンクに変身します。
使い方
functions.phpに、以下のコードを追加してください。パスやファイル名は適宜置き換えてください。
require_once 'class-embed-link-builder.php';
また、JavaScript を読み込むために、</body>タグの直前に以下を挿入してください（大抵の場合、footer.phpあたりでしょうか）。この場合、「Embedly」を使用しない場合も、不要な JavaScript が読み込まれてしまいますが、「非同期（async）」だしいいかな…。厳密にやりたい場合は、is_single()やis_page()を使って、必要な場合だけ読み込むようにするといいと思います（意外と実装に考慮が必要であったため、公開しているクラス内では実装していません）。
</script>
注意点
記事内で何回もご紹介したWordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにするで公開しているクラスと思い切り競合するなど、使い方には注意点があります。
wp_embed_register_handler()で登録したいハンドラー（「http〜」から始まる文字列）がある場合は、先にそちらのコードを読み込んでください（今回ご紹介しているソースコードは、「http〜」から始まるすべての文字列を対象とするため）- 「Embedly」サービスが終了すると使用できなくなります
- たとえば、投稿記事内に以下のような記述があると、勝手にオシャレなリンクが生成されてしまいます
例
https://ottan.jp/itunes-not-sync-backup-4733/
この記事オススメだよ！
2 行目が「http〜」から始まる文字列であると解釈されてしまうため、勝手に「Embedly」によってオシャレなリンクに生まれ変わります（前後の空白は無視されます）。このように意図しない動きをすることがあります。「http〜」から始まる文字列の前に空白以外の文字列、たとえば、「 」を挿入するなど、その行が「http〜」から始まらないようにしてください（上記の例でもそのように対処しています）。<p>タグなどで囲んでも OK です。
後は、投稿記事の本文内に URL を貼り付けるだけで勝手にオシャレなリンクに早変わりです！万が一、「Embedly」がサービスを終了しても、リンクの扱いを外出し（クラス化）しておくことで、あとでいかようにでも対応できます。
参考リンク
下記のサイトが大変参考になりました。