スポンサーリンク

【Word Press】サムネイル画像付きリンクが設置できるプラグイン

2018年4月8日便利なプラグイン

WordPress
  • 2020年9月23日
    「ブロックエディタで設置する」を追記しました。
  • 2020年4月12日
    プラグイン更新により「設定」がタブ切り替えとなったので少し書き換えと追記をしました。
  • 2019年3月4日
    「設定」を書き直しました。以前より少し詳しく説明しています。
  • 2019年3月4日
    「リンクカードが表示されない!?」を追記しました。

以前から記事を書いている時に、外部リンクや内部リンクを「画像付きに出来ないかなぁ」と思っていました。

今まではシンプルにテキストリンクが大半。
テキストのリンクだと書き方によっては、文章に溶け込んでしまいリンクがはられているのが分からない事があります。
私も記事を書くときにできるだけリンクだとわかるようにと貼っていますが^^;
わかりづらいリンクは、他の人のサイトへのリンクの場合、下手をすれば失礼になってしまいます。

そこで今回はサムネイル画像付きリンクが作れるプラグイン『Pz-LinkCardをご紹介します。

スポンサーリンク

プラグイン 『Pz-LinkCard』

プラグインPz-LinkCardを使うと簡単にサムネイル画像付きのリンクが作れます。

例えば、『→ Crescent Moon』こんなテキストリンク。
リンクだとわかるように、文字を太字にしたりしていましたが…これをプラグインを使ってサムネイル画像付きにすると、こんな感じにできます。

ショートコードにリンク先のURLを入力するだけで、サムネイル画像やサイト名、ページタイトルなどは自動で取得してくれるのでとても楽です。

もちろん、内部リンクもサムネイル付きのリンクが作成できます。

結耶

結耶

デザインが用意されているし、背景色を変えられるので外部リンクと内部リンクを区別することもできます。

インストール

Pz-Link Card

インストール方法

  1. WordPress管理画面から[プラグイン][新規追加]
  2. Pz-Link Card』を検索
  3. [今すぐインストール]して[有効化]する

使い方

インストール後すぐに使うことができます。使い方はとても簡単です

テキストエディタで設置する方法

投稿画面に『リンクカード』というボタンが追加されています。

[リンクカード]ボタンを押すとコードが表示されるので続けてリンク先URLを入力してください。
入力したらもう一度[リンクカード]ボタンを押して閉じれば設置完了です。

または

リンク先URLを入力し、選択範囲でURLを囲み、[リンクカード]ボタンを押せば設置できます。

[blogcard url="リンク先URL"]

ビジュアルエディタで設置する方法

ビジュアルエディタ画面のリンクカードボタンを押すと、ダイアログが表示されます。

リンク先URLを入力しOKを押せば設置できます。

2020年9月23日

ブロックエディタで設置する方法

ブロックエディタでPz-Link Cardを挿入するにはクラシックブロックを使うか、ショートコードブロックなどでPz-Link Cardのショートコードを直接入力してしてください。

クラシックブロックでの挿入方法はビジュアルエディタと同じです。

スポンサーリンク

設定

 場所  [設定][Pzカード設定]

2020年4月12日

各設定は設定画面のタブで切り替えてください。

基本の設定

[基本の設定]の中の「かんたん設定」でリンクカードの見た目を変更することができます。

■セロハン(左上と右上)

■縫い目(青と赤)

[基本の設定]には他に使い方を解説しているページへのリンクなどがあります。

配置の設定

[配置]タブをクリックすると、リンクカードの上下左右の余白の設定ができます。

カード全体をリンク」にチェックを入れるとカード全体がaタグで囲われます。

表示の設定

サムネイルの大きさや抜粋文、影を付ける、枠線の色や太さの設定できます。

続きを読むボタンやサイト名の横に表示されるSNSシェア数の表示の設定もここにあります。

文字の設定

サイト情報やタイトル、URL、抜粋文などの文字の色や大きさ、桁数の設定ができます。

自分のサイトに合わせて変更してください。

外部リンクの設定

外部リンクの背景色やサムネイルなどの設定です。

サムネイルの設定ではデフォルトでは「直接取得する」になっていますが、サムネイル画像を取得できない記事やサイトもあります。
その場合サムネイルは黒く表示されます。
うまく表示されない場合は「WebAPIを利用する」または「直接取得できない場合、WeAPIを利用する」に変更してください。

きらり

きらり

WebAPI』ってなに?
結耶

結耶

聞かないで~!難しくてよくわからないの~(^^;)

WebAPI」については以下を参考にしてください。

内部リンクの設定

内部リンクの背景色やサムネイルの設定です。

※内部リンクがうまく表示されない場合はこちら リンクカードが表示されない!?

※デフォルトでは「新しいウィンドウで開く」は「なし」になっています。内部リンクの場合は「なし」がいいと思います。

同一ページへのリンクの設定

同一ページへのリンクの背景色やサムネイルの設定

WebAPI

ここは変更するところはありません。そのままでOKです。

検査(リンク先チェックの設定)

とてもありがたい機能ですので、すべてにチェックしておいた方がいいと思います。

エディタ

ショートコードの追加やパラメーターの設定ができます。

上級者向け

上級者向けの設定ですのでそのままでOKです。

初期化

設定を初期状態に戻す時はこちらでチェックを入れて変更を保存してください。

2019年3月4日 追記

リンクカードが表示されない!?

サイトを常時SSL化したりすると、リンクカードが「表示されない」または「リンクが無効化」されることがあるようです。(内部リンク)

「リンクが表示されない」「無効化」されている場合は以下の内部リンクの設定を変更してみてください。

サムネイル

記事取得方法

きらり

きらり

結耶、少し前内部リンクほぼ全滅してたよね。
結耶

結耶

そうなの~!あれは焦ったわ!(^^;)

私も常時SSL化した影響なのか…Pz-LinkCardの内部リンクがほぼ全滅していることに少し前に気づきました(^^;)
そして上の内部リンクの設定を変更したところ直りました!

私がした変更は以下の通りです。参考までに載せておきます。

サムネイル
「直接取得する」→「直接取得できない場合、WebAPIをりようする」

記事取得方法
「カード管理画面に記録されている内容から表示する」→か「常に最新の記事内容から抜粋文を作成する」

きらり

きらり

結耶これで直ったんだね!
結耶

結耶

直りました!記事ひとつひとつ直さなきゃいけないのかと焦ったよ!

うまく表示されない場合はお試しください。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。