WordPress 外部リンクを画像付きで表示したい! その方法は?

皆さんこんにちは。

しうです。

今回は自分がブログを書いていて疑問に思っていたこと・その解決方法について書いていこうと思います。

目次

はじめに

みなさんブログ作成の時に内部リンク・外部リンクを使っているでしょうか?

内部リンク・外部リンクは自分の言いたいことを補強するのにとても便利です。

そんなリンク方法については大まかに分けて以下の2通りのやり方があります。

  • 画像無しの内部・外部リンク
  • 画像付きの内部・外部リンク

今回はこれらの方法について紹介していきます。

画像無しの内部・外部リンク

画像無しの内部・外部リンクとはこんな感じのリンク方法になります。

(よく見る青下線で示されるやつです。ちなみに上のリンクはホームに飛びます。)

これに関してはブロックエディタなら共通で設定をすることができます。

STEP
まずリンクを作成したい場所を網掛けします
STEP
ツールバーにあるリンクマークを選択
STEP
(内部リンクの場合)ブログタイトル等から検索
STEP
(外部リンクの場合)リンクしたいURLをコピペする

するとこんな感じで指定した文字にリンクを作成することができました。

画像付きの内部リンクについて

これに関しては非常に簡単です。

ブロックエディタ上で表示したいページのURLを普通の段落上にコピペするだけです。

↓こんな感じ

あわせて読みたい
allbirds Men’s Tree Dasher Relayを2か月履いた感想 今回は先日買ったallbirdsの靴のレビュー記事となります。 私は以前の記事でボーナスが入った時に会社通勤用の運動靴としてAllbirdsの靴を購入したという話をしました。...

↓ブロックエディタ上では以下のように表示されています

この時リンク貼り付けで貼り付けると画像無しでの文字リンク(URL)となります。

そのため画像付きの内部リンクを表示させる場合は書式なしの貼り付けにしてください。

またWordPressテーマのSWELLでは以下の方法でも表示させることができます。

STEP
左上のプラスマークをクリック
STEP
「SWELLブロック」にある関連記事をクリック
STEP
下の検索窓で記事タイトルを検索して選択

画像付きの外部リンクについて

これは一般的にはプラグインで機能を追加することになります。

外部リンク作成プラグインとしては「Pz-LinkCard」が有名です。

本プラグインを利用した外部リンクの手順としては

STEP
ショートコードを選択
STEP
ショートコード内に以下の様に入力

↓こんな感じ

↓表示させるとこんな感じになります。(例としてGoogleを表示させました。)

またSWELLなら画像付き外部リンクについても拡張プラグインなしでブロックエディタ上で作成できます

方法としてはSWELLの画像付き内部リンクと同様にメニューの中から「関連記事」を選択し、外部リンクに切り替えてURLを入力するだけです。

↓こんな感じ

まとめ

今回この記事を作ったのは前回allbirdsの靴のレビューをしたときに、画像付きで商品ページのリンクを出したいなーと思って調べたことがきっかけです。

その時はプラグインを追加しなければできないのか―と思っていましたが、この記事を書いているときに、SWELLの「関連記事」メニューの中に外部リンクが存在することを知りましたw

(今まで過去の記事を表示させるときに「関連記事」を使用してたのになぁ…)

しかもSWELLの方がシンプルでデザインが良いです。

こういう細部まで配慮が行き届いているのがSWELLの良さですね。

なんだかSWELLの販促みたいなまとめになってしまいましたが、今回はここまでにしておこうと思います。

それでは次の記事で。

目次