WordPressのoEmbed、表示されない時があって不安定?なのでプラグインPz-LinkCardにしてみたよ。設定超簡単。

公開日:  最終更新日:2017/12/06

SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。

WordPressで作成された記事やYoutubeなどへのリンクをかっこよくカード風に表示してくれる「Embed」機能ですが、WordPressからだと妙に表示が不安定なのでプラグインで表示するようにしてみました。

WordPressのブログカード風リンク表示機能

WordPress4.4よりWordPressそのものもoEmbedに対応しており、本文欄にWordPressで作成された記事のURLを書くだけで、ブログカードのような書式でリンク先の紹介情報を表示してくれるようになりました。

SiSO-LABでは、他の方が運営しているサイトへのリンクには使っていませんが、自サイト内の記事紹介に使うのも便利なので、楽しく使っています。
SiSO-LAB☆WordPress Embed表示。

しかし、なんか動きが不安定なのです。ある時、ふと引用表示+URLへの記事リンクだけの表示になってしまったり。
SiSO-LAB☆WordPress Embed表示。うまく表示されない。

本文欄に書いてあるのは記事へのURLのみであることから、記事タイトルは取得できていてそれ以外の情報が取得できていない、或いは取得しても表示に反映されないようです。

このoEmbed機能、調べてみると、最初にURL検出をしたらまずは引用文として表示、その後、表示用コンテンツのリクエストを非同期に行い、その後embedカードを表示するとのことです。

そんなわけで、何らかの理由で表示用のJAVAスクリプトが動作していない、或いは表示用コンテンツの取得に失敗しているっぽいです。また、表示のたびに相手先にアクセスに行くため、場合によってはアクセス負荷で相手に迷惑をかけてしまう可能性もあるかも、とのこと。

うーむ、だからといってどうすれば???と悩んでも回答見つからず、でも便利な機能なので、手っ取り早く、既にリリースされているプラグインを利用することにしました。

WordPressでリンクをカード形式で表示する Pz-LinkCard

見つけてきたのは、WordPressのプラグインの中でも日本の方が開発されている、「Pz-LinCard」というプラグインです。既に使い始めていますが、今のところトラブルなく快調に動作しています。また、キャッシュを使うので先方への負荷も軽いとのこと。

使い方は簡単で、ちょっとした設定とリンク先のURLとショートコードを本文中に書くだけで、リンクをブログカード形式で表示させることができます。使い方については、開発者様の記事にて詳しい書かれています。

Pz-LinCardはWordPress用プラグインとして公開されていますので、WordPressにインストールして有効化、あとは記事本文の中にリンクしたいURLの前後に少しショートコードを書いてあげるだけです。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。

さらにPz-LinkCard、なかなか至れり尽くせりなプラグインで、設定からかなりのカスタマイズを行うことができます。枠の隙間なんかもここから設定することができます。設定項目の詳細は開発者様のサイトで詳しく解説されています。ここでは、「しっかり設定項目あるよ~」とわかるようなスクリーンショットを貼っておきます。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。設定画面。

Pz-LinkCard、結局、デフォルトのシンプルな奴がお気に入り

実際にPz-LinkCardプラグインを導入してリンク表示させてみたところ、結局、何も設定していない状態のデザインが気に入ってしまったので、現状、何も設定変更せずに使っています。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。

リンク表示をさせるためは、本文欄にショートコードでリンク先のURLを囲って書くだけです。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。記事欄への記載方法。

これはサイト内リンクの例ですが、このようにリンクがブログカードのように表示されます。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

簡単書式設定にはいくつかの設定がはいっており、まずはPz-LinkCardおすすめ?の「Pzリンクカード標準書式」です。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

お、なんかちょっとリッチな感じです。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

続いて「スクエア」です。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

アイキャッチ画像が大きく表示されます。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

ん?「セロハンテープ(中央)」って何でしょう?
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

わお、シンプルなブログカードデザインにセロハンテープ留めです。おしゃれですね~。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。表示サンプル。

URLだけの行もリンクカードに変換可能

WordPressのoEmbedをすでに多用している場合、できればURLだけ書かれている行をそのまま変換してくれるとありがたいですよね。Pz-LinkCardにも「URL行の変換」という設定項目があります。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。Embed置き換え。

これを有効化したら、本来、WordPressのoEmbed機能の代わりにPz-LinkCardがカード表示をしてくれるっぽいです。それでは、えい!
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。Embed置き換え。

あら、ブログカード表示にならず、恐らくWordPressのoEmbed機能が動作(中途半端ですが)したようです。
SiSO-LAB☆WordPressプラグインPz-LinkCard。手軽にブログカード風表示。Embed置き換え。

開発者様のサイトを確認したところ、どうやらWordPressのEmbed動作を無効化しないといけないようです。ちょっと調べてみたのですが、Embded機能を無効化するにはfunction.phpをちょっといじってあげないといけないようです。

また、開発者様的にはプラグインの乗り換えの可能性を考えて、ショートコードでの利用を勧められています。確かに、SiSOは現在Embed使用前提で書いていたURLを過去記事から探すのに、特定のキーワードが無いことから苦労しています。

おススメどおり、ショートコード+リンク先URLで行こうと思います。

 

今日の一言二言三言

 

簡単に 好みのカード デザインが

でてきてうれし Pz-CardLink

 

いろいろな表示設定が簡単にできるPz-CardLinkですが、結局、何も設定しないカード表示が一番好みでした。でも、セロハンテープとか似合うようなちょっとおしゃれ風なブログってのもいいなぁって思います。現在は20世紀をイメージしたブログデザインにしているのですが、そろそろテンプレートもGush4にして、ブログイメージも一新してみようかな?

  • このエントリーをはてなブックマークに追加
  • Pocket

関連前後記事

Comment

  1. kiiroinya より:

    この記事を参考に導入してみました!

    • SiSO より:

      kiiroinyaさん>
      コメントありがとうございます。うちも3サイト、全部、導入しました。Embedは便利ですが、Pz-LinkCardの開発者さんが言われているように、ショートコードで入れる方が後々の記事メンテナンスが楽ですね…。現在、ちまちまっとEmbedからPz-LinkCardに入れ替え中です。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑