自分のサイト内での内部リンクを表示するのに以前はブックマークレットを利用して html を取得して貼るみたいな手間を掛けて、サムネイルとタイトル、冒頭部分を表示させるなどしていました。
が、その後利用するブラウザが変わったり等あって、いつの間にかシンプルにテキストリンクのみになってしまっていました。ちょっと素っ気ないですよね。
最近また内部リンクを貼ることが多かったのですが、その後の WordPress の進化で簡単にクールなリンクカード / ブログカード形式のリンクを貼れるようになっていました。調べるのに遠回りしてしまったので、同じことをしたい方のご参考になればと思い上げておきます。
目次/Contents
実現したかったこと：リンクカード、ブログカード
調べ物などしていて見るウェブサイトでクールな関連記事を紹介するリンクカードを見て、「これ、どうやって実現しているんだろう？ オレもやりたいな」と思っていました。
こういうヤツ ↓ です。
で、調べるといわゆるリンクカードやブログカードと呼ばれているようでした。
実現したかったのは、
- 記事中の任意の位置に表示
- 表示させる記事は自分で手動で選択
- 数は一つずつ
- 記事タイトルとサムネイル、記事冒頭部分または要約を表示
です。
これじゃない！：関連記事の自動取得・表示
僕が見たブログカードには「関連記事」と表示されているものが殆どでした。また、「プラグインで実現しているんだろうな？」と思い、「wordpress 関連記事 プラグイン」などでググったのですが、欲しいものは全然出来てきませんでした、、
(´・ω・｀)
これで出てきたものは概ね、
- 関連記事を何らかのアルゴリズムで自動取得
- 記事の末尾にリスト形式やグリッド表示で複数を自動表示
というプラグインでした。
これじゃない。。。
実際僕も Jetpack でサイドバーや、Milliard Related Page で記事の末尾に関連記事を表示させていますが。
一番近かったのが記事中の任意の位置に自分で選択した記事へのリンクを表示できる Inline Related Posts というプラグインでしたが、これはテキストリンクのみでサムネイルもディスクリプションも表示できなかったのでパスしました。
プラグイン、見つからなくて良かった～
もっとシンプルな方法があったのですから。
WordPress 標準の Embed、oEmbed 機能で簡単に実現できるリンクカード / ブログカード
結論、その後 WordPress に標準で装備されている Embed、oEmbed 機能を自サイト内部リンクに使うとブログカード形式で表示されることが分かりました、、、
なんて簡単な。。
本文欄に表示させたいリンク先の URL を書くだけです。
注意点としては次の 2点のみ。
- URL は独立した行に書くこと
- 投稿表示時にクリックできるようなハイパーリンクにしないこと
上の例の場合、次のように URL を貼るのみです。（実際にブログカード形式にならないように頭の h を省いています）
ttps://www.yoshiyukiharigae.com/digital-gadget/casio-edifice-eqb-900tr-2-beautiful-design-coloring/
僕自身も確かに Twitter や YouTube の oEmbed 機能を利用していました。
URL を貼るだけでツイートがカード形式で表示されたり、YouTube ビデオが埋め込まれたり。
それを自サイト内で行うとリンクカードになるとは知らず、、目から鱗でした。
今後はゴリゴリ使っていこうと思いますｗ
・