WordPressテーマDIVERで外部リンクをブログカード風に表示する方法

WordPressの人気テーマDIVERでは、内部リンクをブログカード風に表示できる機能がありますが、外部リンクでは標準機能ではアドレスを貼り付けるだけになってしまいます。この記事では、外部リンクも見やすくブログカード風に表示する方法を解説します。

DIVERテーマでの内部リンクブログカード機能

DIVERテーマでは、記事内で他の記事にリンクする際に自動でブログカード風に整形されます。カード内にはタイトル、アイキャッチ画像、抜粋が表示され、読者にわかりやすくリンクを紹介できます。

この機能は内部リンク専用で、WordPressが記事IDやメタ情報を取得できる場合に自動で作動します。

外部サイトのURLを貼る場合、DIVER標準のブログカード機能は利用できず、単純なテキストリンクとして表示されます。これではNOTEやはてなブログのようなリッチカード表示にならず、視覚的に見劣りすることがあります。

実例として、外部のニュースサイトや他ブログへのリンクは、単純なURL貼り付けだけではクリック率が低くなる傾向があります。

外部リンクもカード表示にするには、いくつかの方法があります。まず、DIVERテーマで推奨されているプラグインやショートコードを利用する方法があります。

具体例として、「External Link Card」のようなプラグインを導入すると、URLを入力するだけでタイトル、サムネイル、説明文を取得しカード形式で表示可能です。また、手動でHTMLの

やCSSを使ってカード風に装飾することもできます。

プラグインを使う場合、サムネイルやタイトル取得の精度は外部サイトの構造に依存します。サイトによっては正確に取得できない場合もあるため、必要に応じて手動調整が必要です。

また、外部リンクカードを多用するとページ読み込み速度に影響する場合があります。読者体験を損なわないよう、必要なリンクだけに適用することをおすすめします。

外部リンクをブログカード風に表示するには、プラグインやショートコードを活用するのが便利です。カード表示により視覚的にわかりやすくなるため、読者のクリック率や記事の回遊率向上にもつながります。

ポイントは、プラグイン選定、取得情報の正確さ、ページ速度への影響の3点です。これらを意識してDIVERテーマの外部リンクもリッチに見せることが可能です。