WordPressでビジュアルリンクプレビューを作成する方法

WordPressのページや投稿を、役立つリソース、関連製品、プロモーション用のCTA、面白いキュレーションされた作品などのコンテンツで充実させることで、あなたやあなたのブランドが視聴者により多くの価値を提供できるようになります。 ただし、プレーンリンクが常にそれをカットするとは限りません。アンカーテキストと周囲の感情が十分に説得力がない限り、それらのリンクはすぐにかすめられる可能性があります。 Facebookに表示される拡張されたもののように、Webサイトの視覚的なリンクを作成することにより、訪問者が注目する魅力的でインタラクティブなコンテンツを追加できます。 WordPress用のVisualLink Previewプラグインは、リンクにさらに万能薬を追加する簡単な方法です。

このプラグインを使用する方法は次のとおりです。

• アフィリエイトリンクにCTAを追加します。
• 主張、事実、統計をバックアップします。
• 他のサイトからコンテンツをキュレートします。
• 読者が詳細を学ぶのに役立つリソースを含めます。
• eコマースショップの商品を宣伝します。

また、最も単純な形式のVisual Link Previewプラグインは、関連する投稿にリンクして、ユーザーをサイトに長くとどまらせるためのより魅力的な方法です。

プラグインを使用すると、内部リンクまたは外部リンクのビジュアルプレビューを作成できます。また、ブランドやサイトに一致するスタイルのカスタムテンプレートを作成することもできます。 次に、投稿またはページの任意の場所に合理化されたプレビューボックスを配置します。 グーテンベルクとクラシックエディターの両方でWordPressにプレビューボックスを追加する方法を見ていきましょう。

VisualLinkプレビュープラグインの検索とインストール

あなたはおそらくこれを行う方法をすでに知っていますが、念のために、新しいWordPressプラグインをインストールする方法の超高速ランスルーがあります：

• WordPressダッシュボードにサインインします。
• 左側のサイドバーから[プラグイン]を選択します。
• プラグインの下に表示されるサブメニューで[新規追加]を選択します。
• ページ右上の検索バーに「VisualLinkPreview」と入力します。
• プラグインプレビューボックスの右上にある[今すぐインストール]をクリックします。
• インストールしたら、[アクティブ化]をクリックします。

プラグインをアクティブ化すると、プラグインページにリダイレクトされ、上部にこの通知が表示されます。 （Getting Startedドキュメントでは、このページに移動します。）

設定とカスタマイズの開始

プラグインがアクティブになったら、プラグインリストを下にスクロールして見つけます。 プラグイン名の下にある[設定]リンクをクリックすると、次のページに移動します。

デフォルトでは、[カスタムスタイリングを使用]トグルはオフになっています。 オンに切り替えると、たくさんのオプションが表示されます。

次のカスタマイズがあります。

• コンテナの幅、背景色、パディング。
• 境界線の半径、幅、スタイル（実線、破線、点線など）および色。
• 画像の位置（左、右、上、下）、サイズ、境界線の半径。
• タイトルと要約フォントのサイズと色。

これらのほとんどはかなり自明ですが、画像サイズについて知っておくべきことがいくつかあります。 サムネイルサイズまたはカスタムサイズのいずれかを設定できます。 サムネイルの場合、標準サイズは「サムネイル」、「中」、「大」なので、フィールドに入力するだけです。 または、次の形式でカスタムサイズを設定できます：widthxheight（たとえば、150×150）。

今のところ、デフォルトのリンクボックスがどのように表示されるかを確認するために、すべてをそのままにしておきます。 次に、戻って微調整を行います。

グーテンベルクブロックエディターでプラグインを使用する

ブログ投稿の下書きに入り、段落の下にブロックを追加しました。 Visual Link Previewブロックは、ウィジェットの下にあります。または、ブロックピッカーの上部で検索することもできます。

Visual LinkPreviewブロックは次のようになります。

[投稿またはページを選択]ボックスをクリックしても、コンテンツのドロップダウンは表示されません。 あなたはあなたが欲しいものを検索する必要があります。 外部URLへのリンクを追加することもできます（これについては後で説明します）。

公開されたブログ投稿を選択しました。 これは、スタイルをカスタマイズしない場合の外観です。

グーテンベルクのビジュアルリンクプレビューのブロック設定

ブロックの上部にある3つのドットのスタックをクリックすると、ドロップダウンメニューが表示されます。 [ブロック設定の表示]を選択して、オプション付きの右側のサイドバーを表示します。 ここから、いくつかの変更を加えることができます。

リンクを変更します。 [リンクの変更]をクリックすると、現在のリンクがすぐに削除されるため、誤ってクリックしないように注意してください。

表示画像を変更または削除します。 表示画像を削除すると、ビジュアルリンクは次のようになります。

画像がない場合の外観が気に入らない場合は、[画像を選択]をクリックして画像を追加し直すことができます。ただし、メディアライブラリを確認するか、画像をアップロードする必要があります。自動のオプションはありません。 -最初にリンクを追加したときと同じように、注目の画像を再度追加します。

もちろん、メディアライブラリで注目の画像を見つけることはできますが、埋もれている可能性があります。 リンクを再度追加して、元のコンテンツを自動追加することもできます。

リンク設定のオンとオフを切り替えます。 新しいタブでリンクを開くことを選択できます。また、リンクをnofollowリンクに変えることもできます。

グーテンベルクとの外部リンクの追加

今回は外部リンクを追加します。 コピーして正しいフィールドに貼り付けました。

[このURLを使用]をクリックすると、内部リンクを追加した場合と同じことが起こります。 画像、タイトル、抜粋が自動入力され、右側のサイドバーで変更を加えることができます。 [コンテンツ]セクションで[画像をローカルに保存]をクリックすることもできます。URLソースから取得したプラグインの表示画像がWordPressメディアライブラリに追加されます。

再利用可能なブロックの保存

頻繁に使用するページ、ブログ投稿、または外部リンクがある場合は、一度作成してから、再利用可能なブロックとして保存して、後で簡単に追加できます。 これは、グーテンベルクの編集者、FYIでのみ機能します。

ブロックの作成が終了したら、オプションのサイドバーにアクセスするために使用したものと同じ、上部にある3つのドットのアイコンをクリックします。 次に、[再利用可能なブロックに追加]を選択します。 ブロックにタイトルを付けることができ、将来使用するためにブロックライブラリにあります。

クラシックエディタでプラグインを使用する

従来のエディターを使用して、投稿またはページに移動し、ビジュアルリンクを追加する場所に移動します。 ページ上部の[ビジュアルリンクプレビュー]ボタンをクリックします。

このボックスが表示されます：

[タイプ]ドロップダウンから、独自のリンクまたは外部リンクを追加することを選択できます。 まず、自分のリンクを追加します。 リンクするコンテンツを選択すると、グーテンベルクの場合と同様に、フィールドが自動入力されます。 ここで変更を加えます。 このウィンドウから、画像を削除して新しい画像を追加したり、タイトルを変更したり、概要を更新したりできます。 グーテンベルクと同じように、ここでプラグインのデフォルト設定またはカスタムテンプレートを使用することもできます。

クラシックエディタを使用した外部リンクの追加

今回は、外部リンクを追加します。 外部リンクのフィールドは次のとおりです。

URLを追加すると、内部リンクの場合と同じように、フィールドが自動的に更新されます。 その後、ページや投稿に挿入する前に、必要な変更を加えることができます。 従来のエディタには、[画像をローカルに保存]オプションもあります。

VisualLinkプレビューテンプレートとボックスのカスタマイズ

そのブロック設定バーの下部には、[設定]テンプレートから[デフォルトを使用]または[シンプル]テンプレートのいずれかを選択できる[スタイル]セクションも含まれています。 しかし、実際には同じものであるため、混乱を招きます。 もう少し説明します。 まず、リンクプレビューボックスをカスタマイズする方法を見てみましょう。

その[スタイル]セクションで、[テンプレートスタイルの変更]リンクをクリックします。 カスタムテンプレートを作成できる新しいページが開きます（プラグイン設定からもここにアクセスできます）。 繰り返しになりますが、カスタマイズは単純で説明的でわかりやすいので、簡単に道を見つけることができます。 いくつかのカスタマイズを試してみた後のテンプレートは次のようになります。

良くない。 問題の一部は、プレビューテキストが長すぎることです。 投稿またはページに戻り、ブロックをクリックすると、エディターが右側のサイドバーに表示されます。 次に、[コンテンツ]セクションに移動し、タイトルフィールドと抜粋フィールドをクリックして変更を加えることができます。

サムネイルを使用する代わりに、テンプレートのカスタマイズページに戻り、画像のカスタムサイズを入力すると、画像が正方形になりました（幸い、完全にトリミングされたものになりました）。 私はタイトルと抜粋のコピーをもう少し遊んで、ブロック内と写真の横でサイズが大きくなるようにしました。 これの方が良い：

適切なカスタマイズを見つけるのに多くの時間を費やす可能性があります。特に、カスタムテンプレートを1つしか作成できないため、そうする必要があります。

テンプレートのカスタマイズのプレビュー

テンプレートをカスタマイズしているときは、ライブプレビューを表示できません。 投稿またはページを新しいウィンドウで開き、テンプレートのカスタマイズページで変更を加えてから、クリックして投稿またはページに戻る必要があります。 2つのドロップダウンテンプレートオプションを切り替えます（実際には互いに違いはありません）。これにより、ボックスが更新され、最新の変更を確認できます。

デフォルトのスタイルに戻す方法

たくさんの変更を加えた後、デフォルトのスタイルを好むことに気付いたとしましょう。 テンプレート設定で[カスタムスタイリングを使用]トグルをオンのままにすると、[設定]から[デフォルトを使用]を選択するか、[テンプレート]ドロップダウンから[シンプル]を選択するかに関係なく、ページまたは投稿に戻ったときにカスタマイズされた設定が適用されます（前述のとおり、紛らわしい）。

プラグインのデフォルトに戻したい場合は、テンプレート設定ページに移動して、[カスタムスタイリングを使用]ボタンをオフに切り替えることができます。 最終的にオンに戻したい場合は、すべてのカスタマイズがそこにありますが、これにより、プラグインの外観を好む場合は、プラグインのデフォルトを使用できます。

VisualLinkプレビュープラグインのデメリット

Visual Link Previewプラグインは、それが実行すると言われていることを実行するシンプルでわかりやすいプラグインであり、使い方を学ぶのは非常に簡単です。 ただし、これは非常に基本的なものであるため、改善を使用できるいくつかの領域も不足しています。

すべてのコンテンツを含むドロップダウンメニューはありません。 リンクとして追加するブログの投稿やページの名前を覚えておく代わりに、このオプションが必要でした。

カスタマイズされたテンプレートのライブプレビューは表示されません。 それが完璧な量のパディングであるかどうか、または使用する境界線のタイプを確認するたびに、投稿とテンプレート設定ページの間を行ったり来たりするのはかなり不格好です。

作成できるカスタムテンプレートは1つだけです。 これがプラグインの最大の欠点です。 複数のテンプレートを作成してから、特定のページ、ブログ投稿、またはリンクの種類に一致させるために使用するテンプレートを選択することはできません。 また、カスタムテンプレートを使用するようにプレビューボックスを設定したり、プラグインのデフォルトを使用するようにプレビューボックスを設定したりすることはできません。どちらか一方です。

まとめ

全体として、その欠点にもかかわらず、私はVisual LinkPreviewプラグインが好きでした。 グーテンベルクとクラシックのどちらのエディターを使用する場合でも、セットアップと使用は非常に簡単です。 そして、これは間違いなく、リンクを追加するためのより美的に美しく、人目を引く方法です。これは、アフィリエイトマーケティングに携わっている場合や、ランディングページにリンクしたい場合に役立ちます。 現在、複数のテンプレートを作成することはできないため、すべての投稿とページで標準化された外観を持つWebサイトに最適です。 そのため、さまざまなスタイルのさまざまなランディングページがある場合、どこに配置しても収まる1つのプレビューボックステンプレートを作成するのは困難です。 それ以外の場合は、しかし、これはその1つの仕事をうまく行う軽量プラグインです。

アンカーリンクを使用してDiviで実行できる5つの優れた機能を備えたこの記事もお気に召すかもしれません。