WordPress Visual Link Previewの代替案：HTMLとCSSでリンクプレビューを実装する

Last Updated：2024年03月28日| | コメントを残す

ティーストーリー、 Naver ブログや Naver カフェ、 Facebook、カカオトークなどでリンクを入力すると、サムネイルやタイトル、サマリーをプレビューできるように表示されます。 WordPressで内部リンクを埋め込むと、埋め込み機能が無効になっていない場合 Facebook スタイルのリンクプレビューが表示されますが、外部リンクを埋め込むと機能しません。

WordPressこのようなスタイルのリンクプレビューを実装したい場合は、Visual Link Previewプラグインを使用すると便利です。

💡Facebook 投稿共有スタイルでクリック率を上げる方法！

ここでは、プラグインに依存せずにHTMLとCSSでビジュアルリンクプレビューを実装する方法について説明します。

より簡単な方法でパターンやショートコードで作って活用できます。パターンとショートコードの部分をこの記事の下部で別々に説明しました。

WordPress Visual Link Previewの代替案：HTMLとCSSでリンクプレビューを実装する

HTMLとCSSを使用すると、次のスタイルのリンクプレビューを実装できます。 この方法では、プラグインを使用する必要はありません。 プラグインを使用すると、自動的にサムネイルとタイトル、サマリーを呼び出して表示されますが、以下の方法では直接サムネイルのURL、タイトル、サマリーを入力する必要があります。 面倒ですが、表示されるタイトルや要約文などを変更したい場合は、まともな方法かもしれません。

スタイル1：PCではサムネイルが左側に表示され、モバイルではサムネイルがタイトルの上に表示されます。

ChatGPTでブログ画像を作成する
ChatGPTでブログ画像を作成する
私はChatGPTのプレミアムバージョンがリリースされるとすぐにサインアップして有料バージョンを使用しています。 先週、GPT-4はDALL Eとブラウジング、データ分析機能と統合され、これらの機能を一緒に使用することが可能になりました。 それ以前は、各機能は別々に別々に提供されていました。
もっと見る

スタイル2：下のスタイルは、PCとモバイルの両方のサムネイルがタイトルの上に表示されます。

WordPress ハングルスペルチェック方法5つ
WordPress ハングルスペルチェック方法5つ
ブログ記事を作成した後、スペルチェックを行った後に公開することをお勧めします。 どんなに良い記事でも、スペルが間違っている部分が多いと信頼が落ちるでしょう。 WordPressでは、ハングルスペルチェック機能は提供されていません。 いくつかの方法でスペルチェックを行います...
もっと見る

スタイル1：PCではサムネイルが左に、モバイルではサムネイルが上部に表示

CSSコード：

/* 비주얼 링크 프리뷰 - 가로 and 세로 버전 */
.link-preview-container {
    background-color: white;
    border: 1px solid #ddd; 
    border-radius: 5px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 15px;
    transition: box-shadow 0.3s ease; 
}

.link-preview-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.link-preview-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.link-preview-image {
    flex-shrink: 0;
    width: 200px;
    height: auto; /* 또는 정사각형으로 표시할 경우 200px; */
    overflow: hidden;
}

.link-preview-image img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}

.link-preview-content {
    flex: 1;
    padding: 0 10px;
}

.link-preview-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.link-preview-description {
    color: #888;
    margin-bottom: 10px;
    font-size: 0.9em;
      margin-top: 10px;
}

.link-preview-button {
    background-color: #007BFF;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    transition: background-color 0.3s ease;
}

.link-preview-button:hover {
    background-color: #0056b3;
}

.link-preview-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
}

.link-preview-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .link-preview-container {
        flex-direction: column;
    }

    .link-preview-image {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .link-preview-content {
        padding: 0;
    }

    .link-preview-top {
        flex-direction: column;
    }
}

HTMLコード：

<div class="link-preview-container">
    <a href="{{LINK_URL}}"></a>
    
    <div class="link-preview-top">
        <div class="link-preview-image">
            <img src="{{THUMBNAIL_URL}}" alt="Article Thumbnail">
        </div>
        
        <div class="link-preview-content">
            <div class="link-preview-title">{{ARTICLE_TITLE}}</div>
            <div class="link-preview-description">{{ARTICLE_DESCRIPTION}}</div>
        </div>
    </div>
    
    <div class="link-preview-bottom">
        <div class="link-preview-button">더보기</div>
    </div>
</div>

スタイル2：PCとモバイルの両方のサムネイルが上部に表示

CSSコード：

/* 비주얼 링크 프리뷰 - 세로 버전 */

.lp-container {
    background-color: white;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
    margin: 10px 0;
    display: flex;
    flex-direction: column; /* This ensures the thumbnail is on top */
    position: relative;
    padding: 15px;
}

.lp-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    border: none;
    outline: none;
    text-decoration: none;
    background: none;
}

.lp-image {
    flex-shrink: 0;
    width: 100%; /* Full width of container */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; /* Space between the image and content */
}

.lp-image img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}

.lp-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lp-title {
    font-weight: bold;
}

.lp-description {
    color: grey;
    margin-top: 10px;
    margin-bottom: 5px;
	  font-size: 0.9em;
}

.lp-button {
    background-color: #007BFF;
    color: white;
    text-align: center;
    border-radius: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 3px;
}

HTMLコード：

<div class="lp-container">
    <a href="{{LINK_URL}}"></a>
    <div class="lp-image">
        <img src="{{THUMBNAIL_URL}}" alt="Article Thumbnail">
    </div>
    <div class="lp-content">
        <div class="lp-title">{{ARTICLE_TITLE}}</div>
        <div class="lp-description">{{ARTICLE_DESCRIPTION}}</div>
        <div class="lp-button">더보기</div>
    </div>
</div>

適用方法

CSSコードは ルックス » カスタマイズ » 追加 CSSに追加します（1回だけ追加できます）。

HTMLコードは、ブロックエディタでカスタムHTMLを追加してHTMLコードを入力するだけです。 カスタムHTMLブロックは、ブロックエディタでスラッシュ（ "/"）を入力して選択できます。

WordPress Visual Link Previewの代替案：HTMLとCSSによるリンクプレビューの実装3

カスタムHTMLブロックが表示されない場合 /htmlを入力して選択できます。

WordPress Visual Link Previewの代替案：HTMLとCSSによるリンクプレビューの実装4

HTMLコードでいくつかの変数を実際の値に置き換えます。

  • {{LINK_URL}}: 投稿リンク URL
  • {{THUMBNAIL_URL}}: サムネイル URL
  • Article Thumbnail: サムネイル ALT テキスト
  • {{ARTICLE_TITLE}}: 投稿のタイトル
  • {{ARTICLE_DESCRIPTION}}: 概要

ショートコードを使う

カスタムHTMLブロックを使用してHTMLコードを挿入するのが面倒な場合は、ショートコードを作成するとより簡単に入力できます。 （より簡単な方法で、以下の「パターンで作成して活用する」部分を参考にしてパターンを作成できます。）

次のコードを使用しているテーマの関数ファイルに追加します。 （チャイルドテーマを作成して作成してください。）

function link_preview_shortcode($atts) {
// Extract the attributes from the shortcode
$args = shortcode_atts(array(
'url' => '#',
'src' => '',
'alt' => 'Article Thumbnail',
'title' => '',
'description' => ''
), $atts);

// Create the HTML structure and replace the placeholders with the provided attributes
$output = '<div class="link-preview-container">
<a href="' . esc_url($args['url']) . '"></a>
<div class="link-preview-top">
<div class="link-preview-image">
<img src="' . esc_url($args['src']) . '" alt="' . esc_attr($args['alt']) . '">
</div>
<div class="link-preview-content">
<div class="link-preview-title">' . esc_html($args['title']) . '</div>
<div class="link-preview-description">' . esc_html($args['description']) . '</div>
</div>
</div>
<div class="link-preview-bottom">
<div class="link-preview-button">더보기</div>
</div>
</div>';

return $output;
}

// Register the shortcode
add_shortcode('preview', 'link_preview_shortcode');

FTPを介してWebサーバーにアクセスして、テーマの関数ファイル（functions.php）に追加できます。

これで、ビジュアルリンクプレビューを表示する場所に次のショートコードを使用できます。

[preview url="{{LINK_URL}}" src="{{THUMBNAIL_URL}}" alt="{{Article Thumbnail}}" title="{{ARTICLE_TITLE}}" description="{{ARTICLE_DESCRIPTION}}"]

パターン化して活用する

他の方法をパターン（再利用可能ブロック）にすることで簡単に挿入できます。

再利用可能ブロック（パターン）

パターン生成ポップアップウィンドウで 同期済み(Synced) オプションは無効にします。

パターン生成

パターンの詳細については、次の記事を参照してください。

最後に、

以上で Facebook スタイルでリンクプレビューを実装したい場合 WordPressは Visual Link Preview プラグインを使用できます。 ビジュアルリンクプレビュープラグインを使用せずに同様の効果を得たい場合は、この記事で紹介する方法を参照してください。

参照

コメントを残す

コメント