WordPressの記事にブログカードを表示する方法

ブログカードを表示

WordPressでブログカードを表示するには、主に以下の3つの方法があります。

• プラグインを利用する
• テーマの機能を利用する
• 手動でショートコードを記述する

それぞれの方法について詳しく解説します。

1. プラグインを利用する

最も簡単で推奨される方法です。多くのブログカードプラグインが公開されており、投稿画面でURLを貼り付けるだけで自動的にブログカードを作成してくれます。

おすすめのプラグイン:

• Pz-LinkCard: 日本語対応しており、カスタマイズ性が高いプラグインです。
• Simple Link Card: シンプルで軽量なプラグインです。
• EmbedPress: YouTubeやX（旧Twitter）など、様々なメディアの埋め込みに対応しています。

使い方:

1. WordPressのダッシュボードから「プラグイン」→「新規追加」に進みます。
2. 上記のようなプラグインを検索してインストールし、有効化します。
3. 投稿編集画面で、ブログカード化したい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評価に影響する可能性もあるので注意が必要です。
• 広告と誤解される可能性: ブログカードはバナー広告と見た目が似ているため、読者に広告と誤解されてクリックしてもらえない可能性があります。特に重要なリンクやコンバージョンに関わるリンクは、テキストリンクの方が有効な場合もあります。

【THE THOR（ザ・トール）】 は、企業におすすめのWordPressテーマです。特に、デザイン性とSEO対策を重視する企業にとって、優れた選択肢となります。また、初心者でも比較的簡単に高品質な企業サイトを構築できる点が評価されています。

記事の本文中に他の記事へのリンクを挿入する際、URLを貼り付けるだけで自動的にアイキャッチ画像、タイトル、抜粋文などが表示される、視覚的に魅力的なブログカードが簡単に作成できます。

この機能を使うことで、読者の興味を引き、サイト内の回遊率を高める効果が期待できます。