はじめに
このサイト（WordPress）でも利用している外部リンクをカード形式で表示させる方法について記載します
利用している Bookmark Card プラグインについて
このサイトでは Bookmark Card プラグインを利用しています。
このプラグインの特徴は WordPress のブロックエディタ（Gutenberg）上でカードリンクを挿入することができます。
他プラグインとの比較
カードリンク形式で外部リンクを表示する事ができるプラグインに Pz-LinkCard があります。Pz-LinkCard はショートコード形式で書く必要があります。
ショートコードを用いる方法は古くから存在するため多くの WordPress で利用できます。しかし、 WordPress やプラグインの更新でうまく動作しなくなることもあります。
ブロックエディタを利用したくない方は、Bookmark Card ではなく Pz-LinkCard の利用をおすすめします。
Bookmark Card のメリット
Bookmark Card はブロック追加時にリンク先情報を取得して HTML に変換してから保存しています。リンクカードを含んだページ表示を行う時にデータを取得する処理が無くなります。そのためページの表示スピードにプラグインが影響しません。
また、 HTML 形式で保存されているため、リンクカードに表示する情報を書き換えることも可能です。最近は同一 URL で多言語対応している Web ページが多く、リンクカードに表示する情報を取得した際に英語になってしまうことも少なくありません。そう言った場合に日本語に書き換えるなど柔軟に対応することが可能になります。
Bookmark Card のデメリット
Bookmark Card のデメリットは、スマートフォン向けの WordPress アプリなどでリンクカードの挿入を行うことができません。
WordPress 投稿の編集をパソコンで行う場合は問題ありませんが、スマートフォンアプリから記事内のリンクカードの編集をしたい場合は、パソコン同様Webブラウザから、エディタを開き編集する必要があります。
Bookmark Card のインストール
Bookmark Card のインストールに特別必要なものはありません。利用中の WordPress にプラグインのインストール制限がかかっていないことを確認してください。
インストールは 「プラグイン」→ 「新規追加」ページに遷移し、 Bookmark Card と検索フォーム入力すると Bookmark Card プラグインが表示されています。
Bookmark Card プラグインの使い方
最後に、 Bookmark Card プラグインを利用してリンクカードを追加する方法をお伝えします。
Bookmark Card ブロックを追加する
Bookmark Card のブロックを追加する方法は 1 つだけです。ただし、ショートカットを使うことでより簡単に追加することができるのでその方法もお伝えします。
ブロック選択画面からブロックを選択する
ブロックエディタを開き ➕ を押します。
➕ を押すとブロックを選択する画面が表示されます。画面内から Bookmark Card を見つけ、ブロックを追加します。
ブロックを選択すると リンクを入力する画面が表示されるので、リンクを入力し保存ボタンを押します。
保存ボタンを押すと、リンクカード形式に表示が切り替わります
ショートカットを使ってブロックを選択する
ブロック選択画面からでも不自由なく追加できますが、ブロックエディタには沢山のショートカットが存在します。
今回は / （スラッシュ）を使い Bookmark Card のブロックを選択します。
ブロックを選択できたらブロック選択画面から Bookmark Card のブロックを選択した時と同様に URL を入力して送信すると、リンクカード形式に表示が切り替わります。
Bookmark Card のブロックを編集する
ブロックの編集は 他 ブロック同様に 📝 Edit 画面から行います
URL の変更が完了したら “Submit” を押し表示を変更しましょう。
Bookmark Card の表示形式を変更する
Bookmark Card は 「デフォルト」「Horizontal」2種類の表示方法が存在します。
挿入する記事や好みによって スタイルを変更しても良いでしょう。
最後に
Bookmark Card について、他プラグインとの比較や、メリット・デメリット。プラグインのインストール方法などをまとめました。
とても使いやすいプラグインなので是非利用してみてください。