[Pz-LkC][2.0.0]リンクをカード形式で表示するプラグイン更新。エディタのボタン追加など。

Pz-LinkCard
この記事は約5分で読めます。

リンクをカード形式で表示するWordPressプラグイン「Pz-LinkCard」。

最新版ver2.0.0を公式プラグインディレクトリで公開しました。

ver1.8.2→ver2.0.0修正点

2017年7月6日に公開したver1.8.2からのバージョンアップです。

URL指定パラメータに「href」を追加しました

URLの指定には「url」パラメータを使うのが基本となっていますが、HTMLのAタグっぽく使いたい要望がありそうなので「href」でも反応するようにしました。

ちなみに「url」を読み間違えたり打ち間違えて「ur1」(ユー・アール・いち)や「uri」(ユ・アール・アイ)も反応するようになっています。

テキストエディタにクイックタグを追加しました

テキストエディタに「リンクカード」ボタンを追加しました。

  1. URLをなぞって、「リンクカード」ボタンを押す。
  2. ショートコード1ではさまれます。

なぞらないで押すとショートコードの「開け」と「閉じ」が挿入できます。

  1. 1回目に押したときにショートコードの「開け」が挿入されます。
  2. 手入力もしくは貼り付けでURLを入力します。
  3. 2回目に押したときに「閉じ」が挿入されます。

本当は「img」のボタンみたいにURLを入力するウィンドウを表示したかったのですが、やり方が分からなかったので見送りです。

ショートコードは1番目に設定されているものが使用されます。

ビジュアルエディタにボタンを追加しました

ビジュアルエディタのときにもショートコードを挿入するボタンを追加しました。

  1. リンクカードのアイコンを押す。
  2. URLを入力するダイアログが表示されます。
  3. 手入力か貼り付けでURLを入力します。
  4. 「OK」を押すとショートコードが挿入されます。

ショートコードは1番目に設定されているものが使用されます。

テキストリンクだけの行をリンクカードにする機能

テキストリンクだけの行をリンクカードにする設定を追加しました。

チェックを入れると、「テキストにリンクを張っただけの行」がリンクカードに変わります。

例では「ぽぽづれで公開中のWordPressでリンクをカード形式で表示するPz-LinkCard」と書いた行をまるまるリンク設定しています。

「テキストリンク行の変換」を有効にすると、リンクカードに変換されます。

なお、入力されていたテキストは表示されません。

URLだけの行をリンクカードにする機能

URLだけが書かれている行をリンクカードにする設定を追加しました。

チェックをすると「リンク設定をせずにURLだけが書かれた行」がリンクカードに変わります。

日本語が含まれていると「URLのみ」と判断されずカードにはなりませんが、エンティティ化されているURLであればカードになります。

404 Not Found のときURLが見え消しになってリンクされない

リンク先が無い場合、カードは表示しますがクリックしてもリンクされないようにしました。

リンクカードは「記事を投稿した当時」の情報も大事と考えているため、タイトルや抜粋文はそのまま表示されます。

(2017/8/19追記)
通常にアクセスできるものの、ステータスには404が返ってくるサイトがあるとのことなので、ver2.0.3にて設定が変更できるように修正しました。

カード管理画面でタイトルや抜粋文を太文字表示

WordPress管理画面の「設定」→「Pz カード管理」と入っていく、カード管理画面の一覧でタイトルや抜粋文に変更があった場合、太文字表示するようにしました。

基本的には「取得時」から変更がある場合、太文字になります。

具体的には、

  • リンク先サイトでタイトルや書き出しを変更した。(「分かり易いタイトルに変更した」「誤字・脱字を修正した」など)
  • 編集画面で自分でタイトルや抜粋文を変更した。
  • リンク先が削除された。

といった場合に太文字になります。

IDNA ASCIIドメインに対応しました

いわゆる「日本語ドメイン」の表示に対応しました。

リンクカードの「ドメイン名」「URL」、カード管理画面の「ドメイン」「URL」の部分が日本語などで表示されます。

ver2.0.0→ver2.0.0.1修正点

IDNA ASCIIをUnicodeへ変換する関数 idn_to_utf8() が実装されていないPHPバージョンの場合にエラーが出ていたのを修正しました。

ver2.0.0.1→ver2.0.0.2修正点

実際には使用されていないJavaScriptを読み込もうとしていたため、サーバーログに「404 Not Found」が多量に出ていた問題に対応しました。

ver2.0.0.2→ver2.0.0.3修正点

ver2.0.0.2の修正を加える際、ver2.0.0.1に修正を行わず、修正中の時期公開バージョンに修正を加えて公開してしまったため、修正が中途半端な状態となり、内部リンクの記事内容が取得できていない状態となってしまいました。

最終公開バージョンに修正を加えることで不具合に対応しました。

その他

今回、エディタのボタンやカード管理画面の細かい修正、日本語URL対応、URLとテキストリンクのカード化などけっこうあちこち手を付けたので、ver1.x.xからver2.x.xへメジャーバージョンを上げることにしました。

コミットしてからプラグインディレクトリに反映されるまでに50分ほどかかりました。修正、が多かったからなのか混みあっていたのかな…?

お気づきの点などありましたら、コメント欄や、ツイッターアカウント「ぽぽろん@ぽぽづれ。(@popo68k)」もしくは「ぽぽづれ。(@popozure)」までご報告ください。

では、この辺で。(^-^)o

コメント

  1. はじめまして。
    先日導入させていただいたのですが、URLのみの行をカード化する機能が使いこなせません。
    具体的には、内部リンクに関して、wordpressのembed機能が働いてしまってスマホに対応できない巨大なカード(?)が生成されてしまいます。
    皆さんはpzリンクカードが表示されているのでしょうか。

    • dngrさん、ご利用&コメントありがとうございます。

      WordPress4.4からブログカード機能が備わっていますが、無効にするには「wordpress oembed 無効」といったキーワードで出てくるサイト等を参考にするとよいと
      思います。
      Pz-LinkCardとしては他のプラグインへの乗り換えや置き換えがし易いショートコードでの利用をお勧めしています。

  2. 今朝パソコンを開けてビックリ。LINK CARD内の文字が、サイトタイトルだらけになっていました。クリックすればリンク先へ飛ぶので、CARD内の表示に不具合が出ているようです。もし原因が分かりましたら、ご教授お願い致します。

    • コメントありがとうございます。

      こちらでも現象を確認できたので原因の究明は置いておいて、まずは対応版のver2.0.0.3をリリースしました。

      • 早速の対応で症状改善しました。有難うございました。

        • 解消されたようで良かったです。また何か不具合などありましたらお知らせいただけると早めに対応できると思います。よろしくお願いします。

  3. ver2.0.0.2にアップグレードした影響かどうかわかりませんが、現在内部リンクの記事タイトルとサムネイルが表示されず、サイトタイトルが表示されている状況です。ちょうど今確認してみたら、貴サイトでも内部リンクで同様の症状が起きています。原因が判明したらご教示願います。

    • コメントありがとうございます。

      こちらでも現象を確認できたので原因の究明は置いておいて、まずは対応版のver2.0.0.3をリリースしました。

      • ver2.0.0.3のバージョンアップで解決することができました。素早い対応ありがとうございます。

        • 不具合をお知らせいただけたので早めの対応をとることができました。解消されたとのことで良かったです。
          また何かありましたらよろしくお願いします。

  4. ぽぽろんさま、お忙しい中、丁寧な説明をしてくださり、ありがとうございます。
    サムネイルはすでに「あり」にしており、その他の設定もあっていたようですが、どうもうまくいかないようです。

    説明べたで申し訳ないですが、サムネイルは出るのですが、いわゆる関連記事(プラグイン)などで、勝手に出る、アイキャッチとかではなく、該当記事のPC版の上部分(サイドバーなども含まれる)が出てしまうのです。

    (だから、画像としては、何が書いてあるか小さくてわからない感じ)

    私は有料テンプレートを使っており、なにか、アイキャッチが出るのを阻害しているのかもしれません。

    (URLを直接打ちこむ、ワードプレスのブログカードは、綺麗にアイキャッチが出ます。ただ、このブログカードは、サイズが大きいなぁと)

    サムネイル、あり、なしの、切り替えをやったときも、すぐに反映されず、(スーパーリロードをかけても)、パソコンの電源を、立ち上げた後、「おお、反映されてる」といった具合なんです。

    ちょっと手がなさそうなので、しばらく、「じ~~っ」と様子を見てみようと思います。

    木目の細かい、かゆいところに手が届く素晴らしいプラグインで、ぜひ活用はしたいのですが。

    お手を煩わせ、申し訳ありませんでした。

    • 出来れば、実際のサイトのURLを教えていただけると現象を確認することができます。
      ・ツイッターアカウントがあればダイレクトメッセージで送っていただく。
      ・こちらからメールで画像を送って貰うためのメールアドレスを教える。
      ・こちらのコメント欄でURLを記述していただく。
      といった方法があります。URLとともに、現象が起きている状態の画面のコピーもあると対応しやすいと考えています。

      • ぽぽろんさま、ご親切にありがとうございます。
        眼から、大量の汗があふれてきております。

        http://yes-youtube.com/%E3%81%8A%E3%81%84%E3%81%8A%E3%81%84%E3%81%8A%E3%81%84%E3%81%8A%E3%81%84/

        新しいブログで記事もないので、仮記事としてアップしました。

        ワードプレスのブログカードと、ぽぽろんさまのブログカードを、いくつかの記事において、比べ置いてみました。

        ワードプレス(標準の)ブログカードの表示も、ボーダー線が不表示だったり、抜粋文の長さも違いますね。こんなものなんだろうか・・・。

        ただ、ワードプレスブログカード表示の何記事かには、綺麗にアイキャッチが示されているものがあると思います。

        @@このブログは、30個くらい記事を上げて、終わりでいいかなと思っており、(多用はしないので)テキストリンクでも、良いかなぁと考え始めております。

        わたしのブログのみの不具合、不統一表示の可能性もあり、どうか時間をかけませんよう、お願い申し上げます。

        • 「WordPress標準のブログカード」と「はてなブログカード」、そして当サイトで公開している「Pz-LinkCard」の表示を比べていただいているのだと思います。
          この3種類はそれぞれの仕組みでタイトルや抜粋文を取得しているので、たまたま同じような抜粋文になったとしても、同じ結果にはなる保証はありません。
          さて、なおさんのお困りの点が今ひとつ分かりませんでしたが、私なりに解釈した「お困りの点と思われる点」に回答してみます。

        • ■「はてなブログカード」の枠が下の線が消えてしまうことがある
          ⇒「はてブカードの仕様なので当サイトではお答えしかねる」というところではありますが、一応見てみたところ、「縦が184pxという高さで表示されないといけないのに、150pxしか表示されていない」のが原因です。iframeという要素に対する高さがそうなっているのだと思います。WordPressテーマを変更すると改善されるかも知れません。

        • ■「WordPress標準ブログカード」が上側半分しか表示されないことがある。
          ⇒WordPress標準ブログカードもiframeという仕組みを利用しており、WordPressテーマとの相性の可能性があります。ただ、今、なおさんのサイトを拝見したところ、ちゃんと表示されているように見えます。

        • ■「WordPress標準ブログカード」と「Pz-LinkCard」で抜粋文の長さがが違う。
          ⇒Pz-LinkCardではfacebook向けのOGP、Twitter向けのツイッターカード、HTMLの標準であるdescriptionという情報を使って抜粋文を表示しています。そのため、どの位の長さの抜粋文が表示されるからはサイト次第ということになります。また、いずれも設定されていないサイトの場合、Pz-LinkCardでは抜粋文は表示されません。

        • ■「WordPress標準ブログカード」の抜粋文が長いことがある。
          ⇒WordPress標準ブログカードの場合、抜粋文では無く、本文そのものから表示しています。そのためアイキャッチが横長で画像が占める領域が狭い場合、抜粋文の方が長くなる可能性があります。

        • ■「Pz-LinkCard」のサムネイル部分にキャプチャー画像が表示される。
          ⇒「WebAPIを利用する」の設定にしている場合、「そのサイトをブラウザで見たときのようなキャプチャー(スクリーンショット)画像にする」というWebAPIを利用しています。このため、これは正常な動作です。また、「直接取得する」としている場合、facebook向けのOGP、Twitter向けのツイッターカードを設定している場合にはその画像が表示されます。リンク先のサイトが利用しているアイキャッチ画像と同一である保証は無いため、これも正常な動作となります。

        • これらのいずれかで疑問を解消する手がかりは何かありますでしょうか。

          パソコンでサイトを見に行ったときみたいな画像(キャプチャー画像)が気持ち悪い場合には「WebAPIを利用する」を設定せずに、「直接取得する」とかの方が良いと思います。

          • ぽぽろんさま、何通ににもわたる噛み砕いた説明をしていただき感謝しかありません。

            なるほど。
            仕組みは理解できました。
            やはりテーマとの相性もあるんですね。

            ただテーマは変えずにやっていきたいので、はてなブログの記事はリンクしないとか、完璧を目指さずやっていこうと思います。

            それと「直接取得する」への変更もしようと思います。

            本当に、親身なアドバイス、ありがとうございました。

            • また何かありましたらお気軽にどうぞ。では!

  5. ぽぽろんさま、はじめまして。
    プラグインを導入して、使用させていていただいております。
    ただ、ちょっとうまくいかないことがありまして。

    サムネイルが、うまく表示されないのです。
    指定した記事URLの、記事そのものが、(記事の上半分のキャプチャーとして)表示されてしまうというか・・。

    APIとはなんぞや?レベルくらいの、素人でありまして、解説も今、半分程度にしか理解できてないのですが、(指定された)アイキャッチそのものの表示は可能でしょうか?

    単にURLを打ちこんで、表示される(ワードプレス標準機能の)ブログカードでは、ちゃんとアイキャッチが、出ております。

    下手な説明で申し訳ありません。

    • なおさん、ご利用&コメントありがとうございます。

      外部サイトへのリンクのサムネイルが表示されないということで良いでしょうか。WordPress管理画面の「設定」→「Pz カード設定」と入っていって、少し下の方へスクロールさせると「外部リンク」という項目があって、導入時はサムネイルは「なし」になっています。
      これを「直接取得できない場合、WebAPIを利用する」などに変更することで外部サイトのサムネイルも表示されるようになります。

タイトルとURLをコピーしました