WordPressの記事にブログカードを表示する方法
ブログカードを表示
WordPressでブログカードを表示するには、主に以下の3つの方法があります。
- プラグインを利用する
- テーマの機能を利用する
- 手動でショートコードを記述する
それぞれの方法について詳しく解説します。
1. プラグインを利用する
最も簡単で推奨される方法です。多くのブログカードプラグインが公開されており、投稿画面でURLを貼り付けるだけで自動的にブログカードを作成してくれます。
おすすめのプラグイン:
- Pz-LinkCard: 日本語対応しており、カスタマイズ性が高いプラグインです。
- Simple Link Card: シンプルで軽量なプラグインです。
- EmbedPress: YouTubeやX（旧Twitter）など、様々なメディアの埋め込みに対応しています。
使い方:
- WordPressのダッシュボードから「プラグイン」→「新規追加」に進みます。
- 上記のようなプラグインを検索してインストールし、有効化します。
- 投稿編集画面で、ブログカード化したいURLを本文に貼り付けるだけです。
2. テーマの機能を利用する
一部のテーマには、ブログカード表示機能が標準で搭載されている場合があります。この場合、プラグインをインストールする必要はありません。テーマのドキュメントや設定画面を確認してみましょう。
使い方:
- テーマのブロックエディタに専用のブロックが用意されている場合があります。
- クラシックエディタの場合、特定のショートコードが用意されていることがあります。
3. 手動でショートコードを記述する
プラグインやテーマに頼らず、自身でブログカードをカスタマイズしたい場合に有効な方法です。この方法では、ショートコードを定義し、それを記事に記述することでブログカードを表示させます。
functions.phpへの記述例:
以下のコードを、お使いのテーマのfunctions.phpファイルに追加します。
PHP
function custom_link_card_shortcode($atts) {
extract(shortcode_atts(array(
'url' => '',
), $atts));
if (empty($url)) {
return 'URLを指定してください。';
}
$html = file_get_contents($url);
$doc = new DOMDocument();
@$doc->loadHTML('<?xml encoding="UTF-8">' . $html);
$title = $doc->getElementsByTagName('title')->item(0)->nodeValue;
$og_image = '';
$og_desc = '';
foreach ($doc->getElementsByTagName('meta') as $meta) {
if ($meta->getAttribute('property') == 'og:image') {
$og_image = $meta->getAttribute('content');
}
if ($meta->getAttribute('property') == 'og:description') {
$og_desc = $meta->getAttribute('content');
}
}
return '<div class="link-card">'
. '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">'
. '<div class="link-card-body">'
. '<div class="link-card-image"><img src="' . esc_url($og_image) . '" alt="' . esc_attr($title) . '"></div>'
. '<div class="link-card-content">'
. '<div class="link-card-title">' . esc_html($title) . '</div>'
. '<div class="link-card-description">' . esc_html($og_desc) . '</div>'
. '</div>'
. '</div>'
. '</a>'
. '</div>';
}
add_shortcode('blogcard', 'custom_link_card_shortcode');
CSSの追加:
上記のショートコードに対応するスタイルを、テーマのstyle.cssファイルに追加します。
CSS
.link-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.link-card a {
text-decoration: none;
color: #333;
display: block;
}
.link-card-body {
display: flex;
align-items: center;
padding: 10px;
}
.link-card-image {
width: 120px;
height: 120px;
flex-shrink: 0;
overflow: hidden;
border-radius: 4px;
margin-right: 15px;
}
.link-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.link-card-content {
flex-grow: 1;
}
.link-card-title {
font-size: 1.1em;
font-weight: bold;
margin: 0 0 5px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.link-card-description {
font-size: 0.9em;
color: #666;
margin: 0;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
投稿画面での使い方:
記事内で以下のようにショートコードを記述します。
[blogcard url="https://example.com/your-article"]
この方法でブログカードを表示できますが、PHPやCSSの知識が必要です。手軽に実装したい場合は、プラグインの利用を強く推奨します
ブログカードを表示するときの注意点
WordPressでブログカードを表示する際に気を付けるべき点はいくつかあります。主に以下の点に注意することで、より効果的にブログカードを活用できます。
1. 表示速度への影響
ブログカードは画像やスタイル情報など、テキストリンクよりも多くのデータを読み込むため、多用するとページの読み込み速度が遅くなる可能性があります。
- 多用しない: 1ページにたくさんのブログカードを配置すると、表示が重くなる原因になります。必要な場所に絞って使用しましょう。
- テキストリンクとの使い分け: 関連性が高い記事や特に見てほしい記事にはブログカードを使い、それ以外はテキストリンクにするなど、適切に使い分けることが重要です。
2. 外部リンクと内部リンクの違い
WordPressの標準機能として提供されているブログカードは、通常、内部リンク（自分のサイト内の記事）にのみ対応しています。
- 外部リンクの場合: 外部リンクをブログカードとして表示するには、別途プラグインやテーマの機能、または
functions.phpなどをカスタマイズする必要があります。 - プラグインの活用: 多くのプラグイン（例: Pz-LinkCard, Simple Blog Cardなど）は、内部・外部リンクの両方をブログカードとして表示する機能を持っています。
3. 表示の失敗と原因
ブログカードが正しく表示されない場合、いくつかの原因が考えられます。
- URLの形式:
- URLの行にURL以外の文字（スペース、記号など）が入っていると、ブログカード化されない場合があります。URL単体で1つのブロックに配置することが基本です。
- URLに日本語が含まれていると、正しく表示されない場合があります。
- テーマやプラグインの競合:
- テーマや他のプラグインが持つブログカード機能と、新しく追加したプラグインの機能が競合して表示がおかしくなることがあります。
- テーマ側のブログカード機能を使用している場合、設定画面で有効化されているか確認が必要です。
- キャッシュ:
- キャッシュプラグインやサーバー側のキャッシュが影響して、変更が反映されないことがあります。キャッシュをクリアして再確認してみましょう。
- 相手側の問題:
- 外部リンクの場合、リンク先のサイトがOGP（Open Graph Protocol）に対応していないと、ブログカードに必要な情報（タイトル、画像、説明文など）を取得できず、正しく表示されないことがあります。
4. ユーザー体験（UX）への配慮
ブログカードは見た目が良いため、読者の興味を引き、クリック率やサイト内の回遊率を向上させるメリットがあります。しかし、使い方によっては逆効果になることもあります。
- 読みやすさ: 文章の途中にブログカードを大量に挿入すると、読みにくくなり、ユーザーの離脱につながる可能性があります。
- 広告との混同: ブログカードのデザインがバナー広告と似ていると、読者が広告だと勘違いしてクリックを避けることがあります。
5. カスタマイズと管理
プラグインやテーマによっては、デザインや表示内容を細かくカスタマイズできます。
- デザインの統一: サイト全体のデザイン（トンマナ）に合わせた色やフォント、レイアウトに変更することで、サイトの一体感を高められます。
- 表示内容の調整: タイトル、抜粋文、サムネイル画像の表示・非表示など、ブログカードに表示する情報を調整することで、より効果的に読者に情報を伝えられます。
これらの注意点を理解し、適切にブログカードを活用することで、ブログの利便性と魅力を高めることができます。
ブログカードのSEO上の口コミ・注意点
- ページの表示速度低下: ブログカードはテキストリンクに比べて表示に必要な情報が多いため、多用するとページの読み込み速度が低下する可能性があります。表示速度が極端に遅いと、SEO評価に影響する可能性もあるので注意が必要です。
- 広告と誤解される可能性: ブログカードはバナー広告と見た目が似ているため、読者に広告と誤解されてクリックしてもらえない可能性があります。特に重要なリンクやコンバージョンに関わるリンクは、テキストリンクの方が有効な場合もあります。
WordPressは使いやすい
WordPressは、一般的に使いやすいと言えます。
特に、以下のような点で評価されています。
- 直感的な操作性: プログラミングの知識がなくても、見たままの操作で記事の作成や画像の挿入、レイアウト調整などがしやすいように設計されています。
- 豊富な情報とコミュニティ: 世界中で最も使われているCMS（コンテンツ管理システム）の一つであるため、使い方に関する情報がインターネット上に豊富にあり、困ったときも解決策を見つけやすいです。
- カスタマイズの自由度: 「テーマ」と呼ばれるテンプレートや、「プラグイン」という機能拡張のためのプログラムが豊富に用意されており、デザインや機能を追加・変更しやすいです。
- 複数人での管理のしやすさ: ユーザー権限を設定することで、複数の担当者で分担してウェブサイトの更新・運用が可能です。
ただし、デメリットとして、以下のような側面もあります。
- 初期設定の手間: サーバーやドメインの契約、WordPressのインストールなど、ブログサービスなどと比べると初期設定に手間がかかる場合があります。
- セキュリティ対策の必要性: 世界的なシェアが高いため、攻撃の対象になりやすく、自身でセキュリティ対策（定期的なアップデートなど）を行う必要があります。
- カスタマイズには知識が必要な場合も: 高度なデザインの変更や、特定の機能を実現するためには、HTML/CSSなどの専門知識が必要になることもあります。
コンテンツ（記事など）の更新が中心であれば、初心者の方でも比較的容易に始められるツールだと言えるでしょう。
有料WordPressテーマは使いやすい
有料のWordPressテーマは、一般的に使いやすいと言えます。
特に初心者の方にとっては、無料テーマよりも効率よく、質の高いサイトを構築しやすいというメリットが多くあります。
使いやすさに関連する主なメリットは以下の通りです。
- プロが作ったデザインテンプレート: おしゃれで洗練されたデザインが最初から用意されており、手間をかけずに見た目の良いサイトが作れます。
- 豊富な機能とカスタマイズ性:
- SEO対策や高速表示など、サイト運営に重要な機能が標準で搭載されていることが多いです。
- コードの知識がなくても、管理画面から直感的にデザインやレイアウトのカスタマイズができるテーマが多いです。
- サポート体制の充実:
- 初心者向けのマニュアルが充実していたり、購入者専用のサポートフォーラムやメールサポートが用意されていることが多く、困った時に安心です。
- アップデートの保証: セキュリティ対策や新機能への対応など、テーマの定期的なアップデートが保証されているため、長く安心して使い続けられます。
ただし、有料テーマでも高機能ゆえに設定項目が多く、最初はどこから手を付けていいか戸惑う可能性もあります。
購入前にデモサイトやマニュアルの充実度、サポート体制などを確認し、ご自身の目的やスキルレベルに合ったテーマを選ぶことが重要です。
| テーマ名 | 主な特徴・強み | 適したサイト |
| ザ・トール (THE THOR) | 国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援 | アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト |
| エマノン (Emanon) | Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium） | コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト |
| ストークSE (STORK SE) | 「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い | 商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ |
| リキッドプレス (LIQUID PRESS) | 用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能 | メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト |
