WordPressには、記事の編集画面で内部・外部のURLをそのまま貼り付けると自動的にブログカード形式でリンクが表示される『Embed(埋め込み)』機能があります。
▼URL貼り付けるだけでサムネイル画像付きリンクが生成される。
しかし最近のWordpressアップデートの影響を受けてか、Embed機能が正常に動作せずリンクカードの表示がくずれたり、デザインが反映されないという不具合が起きています。
▼URLを貼り付けてもサムネイルが表示されず、リンク先のタイトルだけになってしまったり...
▼たまに正常に表示されたかと思いきや、自身で設定したデザインが反映されず初期状態のまま表示されてしまう。
このようにリンクカードの表示がうまくいっていないと、少なからずクリック数に影響してしまいます。特に内部リンクに関してはサイトの回遊率の低下にも影響してくるため、早急にこのような問題を解決する必要があります(´・ω・`)
そこで今回、Embed機能の代わりを果たしてくれるプラグインとしてオススメするのが...
『Pz-LinkCard』です!
▼ワードプレスメニュー画面の『プラグイン』⇒『新規追加』より『Pz-LinkCard』で検索してインストールしてください。
このプラグインを入れると、▼以下のようなリンクカード(レスポンシブ対応)を、エラーもなく簡単に設置することができます。
-
【マイクラ】物理ベースレンダリング(PBR)対応の超高精細リソースパック『StratumPack』に有料アーリーアクセスが可能!
マインクラフトではブロックなどテクスチャの外見を変える『リソースパック』と呼ばれるものが数多く配布されています。 外見をリアルにするものからコミカルにするもの、あとはネタ的なものなど色々な種類がありま ...
続きを見る
今回はこのプラグインについて、利用方法やテンプレートの種類、そして私のおすすめ設定も含めて紹介していきます!
表示エラーも皆無!リンクカードを簡単に設置できる『Pz-LinkCard』
Pz-LinkCardを導入すると、内部・外部リンクのリンクカードを簡単に設置することができます※。
※プラグイン導入以前にEmbed機能で設置したURLには反映されないため、既に投稿した記事については本プラグインを使って新たに貼り直す必要があります。
使い方は簡単。まずプラグインを導入したら、ワードプレスメニュー画面の『設定』⇒『Pzカード設定』を選択します。
すると以下のような設定画面が出現します。ここでPz-LinkCardで設置されるリンクカードのデザイン設定を行います。
▼『かんたん書式設定』ですでに用意されているテンプレートからデザインを選べるほか、自分で自由にカスタマイズすることも可能。
上記の画面の『かんたん書式設定』で、すでにプラグイン側で用意されているリンクカードのデザイン(テンプレート)から好きなものを選択するか、もしくは『配置の設定』以降で自分の好きなデザインを作ることも出来ます。
設置したいリンクカードを選択した後『変更を保存』をクリックして設定は完了です。
次に『投稿の編集』画面で、メニューバーに新しく追加された『Insert Pz-LinkCard』ボタンをクリックします。
▼『ビジュアル』タブにボタンが追加されています。
クリックすると以下のようなウィンドウが出現するので、リンクカードとして貼り付けたい記事のURLを入力し『OK』をクリック。
すると投稿編集画面上に、下記のようなコードが挿入されます。
これだけでリンクカードの設置は完了です!『ビジュアル』の編集画面ではただのコードにしか見えませんが、記事をプレビューしてみると、きちんと下のようにリンクカードが設置されています。
-
【マイクラ】物理ベースレンダリング(PBR)対応の超高精細リソースパック『StratumPack』に有料アーリーアクセスが可能!
マインクラフトではブロックなどテクスチャの外見を変える『リソースパック』と呼ばれるものが数多く配布されています。 外見をリアルにするものからコミカルにするもの、あとはネタ的なものなど色々な種類がありま ...
続きを見る
非常に簡単ですね!(゚∀゚)ちなみにこのプラグインを使って設置したリンクカードはデフォルトでスマホ・タブレットでの表示に対応(レスポンシブ)しているほか、表示がくずれることもありません。非常に有用なプラグインと言えます。
『かんたん書式設定』で用意されているテンプレート一覧
上述したように、本プラグインにはすでに初めからリンクカードのデザインテンプレートが複数用意されており、設定画面の『かんたん書式設定』から選択することで、本プラグインで設置した全てのリンクカードにデザインを反映することができます。
▼デザイン変更後は『変更を保存』をクリックすることを忘れずに。
以下に、用意されているデザインテンプレート一覧を紹介しているので、利用する際は参考にしてみてください。
※『個人ビジネス部』様の記事(https://businessdepartment.jp/wordpress/pz-linkcard/)を参照させていただいております。
【Pz リンクカード 標準書式】
【シンプル】
【スクエア】
【セロハンテープ(中央)】
【セロハンテープ(左上と右上)】
【セロハンテープ(長め)】
【紙がめくれた効果】
【セロハンテープと紙めくれた効果】
【縫い目(青と赤)】
【縫い目(緑と黄色)】
【インフォメーション オレンジ】
【ニュートラル ブルーグリーン】
【エンライテド グリーン】
【レジスタンス ブルー】
【斜め】
【3D回転】
【押しピン】
(引用元:https://businessdepartment.jp/wordpress/pz-linkcard/)
シンプルなものから個性的なデザインまでが揃っているため、自身のサイトに合ったデザインを見つけることが出来ると思います!
私の『オリジナルデザイン』についてカスタマイズ方法を紹介
ちなみに私は、Pz-LinkCardの設定画面にてリンクカードのカスタムを行っています。私のデザインでは下画像のようなカードが設置されます。
▼横幅は記事幅に対応(レスポンシブ)。サイト名・サムネ画像・タイトル・抜粋分・Twitterのリツイート数を表示しています。
我ながら、中々シンプルで見やすい感じにできたと思っています(゚∀゚)
今回は参考までに、私のデザインについてカスタマイズ設定方法を紹介します!非常に簡単にできるため、よければ参考にしてください。
Pzカード設定
『設定』より『Pzカード設定』を開き、各設定を以下のようにしてください。
※クリックで拡大。設定をいじっている部分のみ公開しています。
以上でPzカード設定は完了です!設定終了時は、忘れずに『変更を保存』をクリックしてください。
CSSに行を追加
続いてデザインを微調整するため、CSSに行を少しだけ追加します。
ワードプレスのメニュー画面より『外観』⇒『テーマエディター』を選択し、ワードプレステーマの『style.css』の編集画面を出します。
そして『style.css』の中に、以下の2行をそのまま貼り付けてください。
.lkc-thumbnail{padding:0 10px 10px 0 !important;}
.lkc-title{padding-bottom:10px !important;padding-top:10px !important;}
- 1行目の『.lkc-thumbnail』はサムネイル画像周りの余白を調整しています。
- 2行目の『.lkc-title』は記事タイトル周りの余白を調整しています。
貼り付けたら『ファイルを更新』をクリックしてstyle.cssを保存します。
以上でスタイルのカスタマイズは完了です!
あとは上で紹介したように、記事編集画面でPz-LinkCardを使用してコードを貼り付けると、私のデザインが反映されていると思います!
※仮にcssが反映されていない場合はキャッシュが残っている可能性があるので、キャッシュの削除を行うか、一定時間経ってからページを更新してみてください。
内部リンクのクリック率増加でSEO改善効果も!
このように『Pz-LinkCard』を導入することで、デザインが崩れて困っていたEmbed機能に頼らずとも、リンクカードの貼り付けを簡単に行うことが出来ます。
リンクカードのカタチを整えることで訪れた人のクリック率が増加し、結果、サイト全体のSEO改善効果も期待できます。
リンクカードの生成プラグインを探している方は是非導入してみてくださいね!(゚∀゚)