WordPressでリンクをカード形式で表示するプラグイン「Pz-LinkCard ver0.0.1」をお試し公開してみます。
これは何？
WordPressで記事を書いていると、参考になったサイトへのリンクを書いたりします。
通常だとリンク先のサイト名を記述してリンク設定して、枠で囲んだり、文字の大きさを変更したりしていると思います。
文字だけだとさみしいので、URLからサムネイル画像を取得してくれるプラグインを組み合わせたり、ブックマークレットでブログカード形式で表示できるHTMLを出力していることもあると思います。
このプラグインは、記事内にショートコードを記述すると、リンク先をブログカード形式で表示してくれるものです。
こんな感じで記事を書くと、
こんな感じで表示してくれます。
基本は、ショートコードにurlを指定するだけ
標準ではショートコード「blogcard」が指定されているので、
ぽぽづれ。 ぽぽづれ。 「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽろんのパソコンつれづれ日記（ぽぽづれ）』へようこそ。 |
という感じで、url=”リンク先URL” を指定します。
外部サイトの場合は、クリックすると「新しいウィンドウ（タブ）」で開きます。
自サイト内の場合は、そのままページが切り替わります。
カードの外見を変更できる
このプラグインでは、このブログカード形式のものを「リンクカード」と呼びます。
設定画面があって、このリンクカードの外見を変更することができます。
リンクカードのまわりの余白を調整したり、幅と高さが変更できます。
枠の太さや、リンクカードの四隅を丸めたり、影を付けることができます。
サイト名（ドメイン名）後ろ、もしくはタイトルの後ろに、「ツイッターのツイート数」「フェイスブックのシェア数」「はてなブログのブックマーク数」を表示させることができます。
（ツイッターのツイート数は2015年10月から使用できなくなるようです。その場合、表示されないか、最後に取得した状態の数字が出続けます。）
タイトル文字、URL、抜粋文、サイト名を表示する文字の色や、サイズが変更できます。
そして、「外部リンク」と「内部リンク」とで、カードの背景色を別々に設定することができます。
標準では「外部リンク」は青→白のグラデーション、「内部リンク」は黄土色→白のグラデーションです。
背景画像にはCSSの background-image に指定するものがそのまま使用できるため、標準のようにグラデーションを設定したり、画像URLを指定することで好きな画像で表示できます。
内部リンクの場合にはマスコットキャラの画像を使う、といったことができます。
設定画面の入り方
プラグインを有効化すると、「設定」メニューの中に「Pz カード設定」という項目が増えます。
ここから、外見などの設定を行えます。
また、「ツール」メニューの中に「Pz カード管理」という項目が増えます。
こちらからは、キャッシュされているリンクカードの内容が確認できます。
ページングしていないので、取得されただけ「ズラー」っと表示されます。
「記事ID」には最初に表示されたときの記事IDが表示されています。他の記事でも使われている可能性はありますが、1つしか表示されません。
「Delete」を押すと、その行のリンクカードの内容が削除されて、次に表示されるときに取得されなおします。
選択削除、全削除は今のところありませんが、プラグインをアンインストールすると、キャッシュのテーブルは削除されます。
サムネイル画像とサイトアイコン（ファビコン）の取得
自サイト内の記事については、サムネイル画像としてアイキャッチ画像、サイトアイコンはWordPressの関数により取得しています。
WordPressテーマによりアイキャッチ画像を設定していない場合などは、キャプチャ画像を作成するWebAPIを利用することができます。
外部サイトについては、サムネイルは「取得しない」、サイトアイコンは「WebAPIを利用する」が標準になっています。
サムネイル画像についても「WebAPIを利用する」に変更することで、リンクカードに画像を表示することができます。
サムネイル画像の取得には、「HeartRails Capture」を利用するURLを記述してあります。
「WebAPIを利用する」にする場合には、プラグイン利用者（もしくはサイト）がサービスを利用することとなりますので、利用規約などを確認してから使うようにしてください。
ほかのWebAPIを利用することもできます。
たとえば、WordPressのキャプチャ画像作成APIを利用する場合には、「サムネイル画像の取得API」を「http://s.wordpress.com/mshots/v1/%URL%?w=100」に書き換えます。
サイトアイコン画像の取得には、「Hatena::Fivicon」を利用するURLを記述してあります。
WebAPIによって取得できるサイトと取得ができないサイトがあるので、ほかのAPIに変更することができます。
GoogleのAPIにしてみる場合には、「ファビコンの取得API」を「http://www.google.com/s2/favicons?domain=%DOMAIN%」に書き換えます。
リンクカードの中身はDBに記録しておきます
ショートコードにはURLしか書いていないのですが、実際には「タイトル」「抜粋文」なども表示されます。
URLを元にリンク先サイトから取得してくるのですが、リンクカードを表示するたびにリンク先へアクセスしているのでは、相手サイトへ負荷をかけることとなります。
そこで、一度取得した「タイトル」や「抜粋文」は、データベースに保存しておき、次回の表示からは相手サイトへアクセスせずに表示します。
また、「ツイート数」「シェア数」「はてブ数」などのソーシャルカウントを取得するのにも非常に時間がかかるため、一度取得したソーシャルカウントは一定期間、データベースへ記録しておきます。
このため、相手サイトが閉鎖・移転をした場合にも、「タイトル」「抜粋文」は当時のものが残り続けます。ソーシャルカウントについても、数時間～数日は実際のものと異なる場合があります。
注意点
当プラグインは「Pz-HatenaBlogCard」を使っていた場合に、そのまま乗り換え、または戻ることができることを想定しています。
「Pz-LinkCardをインストール→有効化→ショートコードが違う場合には今まで使っていたものに変更→Pz-HatenaBlogCardを停止」という手順で行うことで、カードが表示できない時間を最低限にできます。
戻る場合も、「Pz-HatenaBlogCardを有効化→Pz-LinkCardを停止」という手順で切り替えられます。
Pz-LkCへ切り替えた直後は、リンクカードを初めて表示するたびに、相手サイトへのアクセスが発生します。
同じサイトの複数のページへリンクしている場合には、負担をかけることとなるので、ご注意ください。
そして、初回表示するリンクカードが多い場合、しばらくの間、自分のサイトが非常に重くなることがあります。
まずはお試し
当サイトでしばらく使用してみました。
その際に見つかった細かなバグなどは修正しましたので、とりあえず公開してみます。
下記リンクからZIPファイルをダウンロード後、ダッシュボードの「プラグイン」→「新規追加」→「プラグインをアップロード」として、ダウンロードしたZIPファイルを指定してインストールしてください。
| 現在、ここからはダウンロードできません 公式プラグインディレクトリからダウンロード願います |
一応、動作確認はしていますが、アクセス数の多いサイトなどで同時アクセスがあった場合の挙動など、当サイトでは実験できないこともあるため「お試し版」として公開します。
念のためサイトのバックアップなども取ってから使っていただけると、なお良いと思います。（心配性）
不具合や要望などありましたら、この記事にコメントか、ツイッター「@popozure」までお知らせいただければ、なるべく対応したいと思っています。
コメント