WordPressでブログカードを実装する4つの方法

ブログカードとは元々はてなブログから始まった機能で、ブログ記事のタイトルや概要、アイキャッチ画像などをまとめて表示した埋め込み形式の発リンク（あるいはそれを表示する機能）を指します。

通常のアンカーテキストを使った初リンクよりも見栄えが良くて目立つので、ユーザーにも喜ばれてサイトの回遊率upに役立つ…その結果、SEO的にも有利になると言われています。

では、このブログカードをどうやって自分のサイトに表示させようか？という話になりますが…

方法1：WordPressに標準搭載されたブログカード作成機能を使う

実はバージョン4.4以降のWordPress（ワードプレス）には標準装備されていて、同じサイト内のページへの内部リンクを貼るときに、ページURLを埋め込むだけでブログカードを作成できるように設定されています。実際にGutenbergでブログカードを表示させてみると、こんな感じです…

でも、実際にサイトを運営している人の中で、WordPress標準搭載のブログカードがうまく表示されない…という人も結構います。その原因として一部のテーマやプラグインとの相性の悪さが言われていて、例えばAdvanced Editor Tools（旧TinyMCE Advanced）というプラグインとの相性が悪いことはよく知られています。

このAdvanced Editor Toolsというプラグインもサイトを魅力的に見せるには非常に効果的なプラグインなので、WordPress標準のブログカード機能とどちらを取るか悩ましいところです。僕もこのプラグインを使っていて、悩んだ挙句にWordPressの標準ブログカード化機能は諦めました。

でも大丈夫。ブログカードを表示させる方法は、まだまだ他にもあります…

方法2：プラグイン・Pz-LinkCardをインストールする

WordPressサイトにブログカードを表示させるための2つ目の方法は、Pz-LinkCardというプラグインをインストールすることです。このプラグインはリンクをカード形式で表示させるためのプラグインで、ショートコードを使って簡単にブログカードをリンクカードを挿入できるようになるメリットがあります。

また、このプラグインを使えば、内部リンクだけでなく外部リンクもブログカード化できるようになりますし、ブログカードの幅やデザインの型などをコードの知識なしで編集することもできます。一方、サイトがかなり重くなるという難点も指摘されていて、読み込み時間が遅くなるのが嫌であればプラグインなしで表示させる方法を選ぶことになります。

方法3：ブックマークレットを利用してコードを作成する

WordPressでブログカードを作成する3つ目の方法は、ブックマークレットを利用してコードを作成する方法です。この方法はグランフェアズという会社のwebサイト内で紹介されていて、慣れてきたら自分でCSSコードをいじってオリジナルのブログカードを作成できるというメリットがあります。

下にstyle.cssに書き込むCSSコードの例はこちらで取得できます。このコードをstyle.cssファイルにコピペした状態で（管理画面から「外観 >> カスタマイズ >> 追加CSS」を開けて、空欄にコードをペーストします）、上のリンクからグランフェアズさんのサイトに飛び、ブックマークレット用のリンクをブックマークバーへ追加しましょう。

ブログカードにしたいページを開いた状態で「ブックマークレット」をクリックすると、ポップアップでブログカード用のHTMLが出力されます。このHTMLをページ内の必要なところにコピペすれば完了です。

この方法で作ったブログカードは、こんな感じ…

方法4：ブログカード用のコードを作成する

4つ目の方法は、ブログカード用のコードを作成することです。「コードを作成する」というとかなりハードルが高そうに感じますが、実際はサンプルコードを自作してネットで公開してくれている方がいるので、特別デザイン等にこだわらなければその方のコードをコピペするだけでOKです。

例えばmacoblogさんのサイト。リンク先で紹介されているコードを、function.phpファイルとstyle.cssファイルにそれぞれコピペすれば作業完了です。

この方法もPz-LinkCardと同じく、ショートコードでブログカードを表示させます。毎回ショートコードを入力するのはちょっと手間ですが、プラグインを追加してサイトを重くしてしまうよりはずっとマシです。

まとめ

いかがでしたか？今回はWordPressサイトでブログカードを作成・表示させる4つの方法をご紹介しました。標準機能と相性の悪いテーマやプラグインを使っていて、どうにかしてブログカードも表示できないか…と考えていた人のお役に立てれば嬉しく思います。