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

リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。

当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています。

はじめに

WordPressで記事を書いているときに、参考になったサイトへの「リンク」を設置したいと思うことが多いはずです。

 

ブログを始めた頃だと、一番お手軽なリンク先のサイト名などを記述してリンク設定する「テキストリンク」にすることが多いと思います。

「テキストリンク」の例

スマートフォンで雑誌読み放題のサービスが良さげ！ dマガジンを試してみた（ふたたび）→継続決定｜ぽぽづれ

慣れるに従って、枠を付けたり、文字の大きさを変えてみたりすると思います。

 

そして、今度は「画像を添えたいなぁ」となってくると思います。

テーマによってはURLを記述するとブログカードに置き換えてくれたり、ブログカード形式のHTMLを作成してくれるブックマークレットなんかも見つかると思います。

 

その次には、「見た目（デザイン）をカスタマイズしたいなぁ」となってくることもあると思います。

でも、過去記事にいくつも設置された「ブックマークレットで作成されたHTML」を置き換えることはほぼ不可能です。

 

このWordPressプラグイン「Pz-LinkCard」を使うと、ショートコードというキーワードを使ってリンク先のURLを記述すると、カード形式で表示されるようになります。

こんな感じで記事内に書いておくと、

エディタ上での記述例

スマートフォンで雑誌読み放題のサービスが良さげ！ [blogcard url="https://popozure.info/20141213/5906"]

こんな感じで表示します。

見た目の設定を変更すれば全ての記事の書式が変更されるため、テーマ変更したときに過去記事の見た目も統一させることが出来ます。

カンタン、キレイなリンクカードです。

基本は、ショートコードにURLを指定するだけ

標準では「blogcard」という文字がショートコードとして指定されているので、その文字と組み合わせて、url=”リンク先URL” という感じでリンク先を指定します。

[blogcard url="https://popozure.info"]

記事が初めて表示されるときに、リンク先のタイトルや記事内容を取得します。

このため、普段よりもページの表示が遅く感じるかも知れません。

このときに取得した情報はWordPressのデータが入っているのと同じデータベースへ保存（キャッシュ）しておきます。

2回目以降の表示にはキャッシュから読み込んで表示するので、相手サイトへの負担も少なく、表示も高速です。

 

標準では自サイト以外へのリンク、「外部リンク」の場合は、クリックすると基本的に「新しいウィンドウ（タブ）」で開きますが、スマートフォン等モバイル端末の場合はそのままページが切り替わります。

同じく標準では自サイト内へのリンク、「内部リンク」の場合は、そのままページが切り替わります。

外部リンクか内部リンクかはURLから自動判定するので、自分でリンクを設定していたときのように「新しいウィンドウで開く」ために target=”_blank” といった記述を自分でする必要がありません。

ショートコードを手軽に入力するボタン

記事作成にテキストエディタを使用している場合

「リンクカード」ボタンで手軽に入力ができます。

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

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

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

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

記事作成にビジュアルエディタを使用している場合

「リンクカード アイコン」ボタンで手軽に入力ができます。

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

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

ショートコードを使わない方法

テキストリンクを書いただけの行をリンクカードにする

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

エディタでの記述例

dマガジンを試してみた（ふたたび）

URLを書いただけの行をリンクカードにする

「URL行の変換」にチェックを入れると、URLを書いただけの行がリンクカードになります。

エディタでの記述例

https://popozure.info/20141213/5906

見た目を色々選べる細かく設定できる

設定画面からデザイン（カードの背景色や背景画像、表示する幅など、ある程度のレイアウト）変更ができます。

カードの「背景画像」と「背景色」については、外部リンクと内部リンクで別々に設定できます。（それ以外の枠線などの設定は共通です。）

レイアウト変更の例

「標準」。外部リンクは青、内部リンクは黄色。

はてなブログカード風の「シンプル」。

WordPress標準ブログカード風の「スクエア」。

枠を無くしてShareHTMLメーカー風。

ストライプ。かわいらしく。

プラグインのインストール

WordPress公式プラグインディレクトリに登録されているので、WordPress管理画面からインストールすることができます。

インストールが正常に行えて有効化した後は、設定画面で好きな外観にして、記事中にショートコードを記述していくだけです。

新規インストールの場合

1. WordPress管理画面から、「プラグイン」→「新規追加」と選んでいきます。
   
2. 「プラグインの検索」と書かれているところに、「pz」や「linkcard」といったキーワードを入力して検索します。
   
3. プラグイン名と作者を確認して「今すぐインストール」を押します。
   プラグイン名：Pz-LinkCard
   作者：poporon
   
4. インストールが開始されるのでしばらく待ちます。
5. 「インストール中」の表示が消えたら「有効化」を押してプラグインを有効化します。
   
6. 「インストール済みプラグイン」の一覧で有効化されていることを確認します。
   

プラグイン一覧から更新する場合

1. WordPress管理画面から、「プラグイン」→「インストール済みプラグイン」と選んでいきます。
   
2. 「今すぐ更新してください。」を押して更新します。
3. 「更新しました。」と表示されて更新終了です。
   

ダッシュボードから更新する場合

1. WordPress管理画面の「更新」を選びます。
   
2. 「プラグイン」のところで、更新するプラグインにチェックを付けて「プラグインを更新」を押します。
   
3. メンテナンスモード有効→更新→メンテナンスモード無効→完了となって更新の完了です。
   

設定画面でできること

インストールすると、「設定」に「Pz カード設定」という項目が追加されます。

プラグイン一覧のプラグイン名のところからも「設定」画面を開くことができます。

エラー表示

記事内のショートコードのURLパラメーターが不完全な記事が表示されたときに、WordPress管理画面に「pz-linkcard: URLパラメーターの指定が無効です→」のメッセージと共に記事のURLを表示します。

• 「URL指定エラー」
  チェックを外して「変更を保存」を押すと管理画面のエラー表示が消えます。ショートコードのパラメーターが修正されていない場合、次回その記事が表示されたときに再度エラー表示がされます。

 基本の設定

• 「かんたん書式設定」
  細かい設定をしなくても、ざっくりと見た目を変更します。標準では「なし」になっています。この項目を設定するとほかの設定項目より優先して適用されます。
• 「使い方」
  この説明ページを開きます。

配置の設定

カードの配置に関する設定を行います。

• 「BLOCKQUOTEタグを使用する」
  ブログカードを <blockquote>～</blockquote> で囲んで、「引用文」扱いとします。リンクカードに使うblockquoteのCSSはクリアするので、見た目は変わりません。
• 「カード全体をリンク」
  チェックが入っていると、カード枠内のどこをクリックしてもリンク先を開きます。チェックが入っていない場合は、タイトル、URL、サムネイル、サイト名称のテキストをクリックしたときリンク先を開きます。

配置の設定／余白の設定

余白とカードの幅と高さの設定を行います。

• 「上の余白」
  カードの上に余白を設けます。標準では「4px」になっています。
• 「右の余白」
  カードの右に余白を設けます。標準では「16px」になっています。
• 「下の余白」
  カードの下に余白を設けます。標準では「16px」が設定されています。
• 「左の余白」
  カードの左に余白を設けます。標準では「4px」になっています。
• カードの内側／「上の余白」
  カード内側の上余白を設定します。標準では「設定しない」（7px）になっています。
• カードの内側／「右の余白」
  カード内側の右余白を設定します。標準では「設定しない」（7px）になっています。
• カードの内側／「下の余白」
  カード内側の下余白を設定します。標準では「設定しない」（7px）になっています。
• カードの内側／「左の余白」
  カード内側の左余白を設定します。標準では「設定しない」（7px）になっています。
• 「カードの横幅」
  ブログカードの最大幅を指定します。単位は「px（ピクセル・省略可能）」と「%」が使用できます。空欄にすると「100%」を指定したときと同じになります。標準では「500px」が設定されています。
• 「カードの高さ」
  記事情報（タイトル、URL、記事、サムネイル）が表示されている領域の高さを指定します。単位は「px（ピクセル・省略可能）」が使用できます。空欄にすると記事内容に合わせて大きさが変わります。標準では「108px」が設定されています。
• 「中央に寄せる」
  チェックを付けると、左右に余白を設けて、行の中央に表示します。

表示の設定／外観設定

カード外観（デザイン）に関する設定を行います。

• 「サイト情報」
  サイト名称等の表示位置を変更できます。「上側」か「下側」、「なし」が設定できます。標準では「上側」が設定されています。
• 「サイト名称を使用」
  ドメイン名の代わりにサイト名称を表示します。標準ではチェックありが設定されています。
• 「区切り線」
  サイト情報と記事情報の間に区切り線を付けます。
• 「リンク先URLの表示」
  リンク先URLを表示位置を変更できます。「タイトルの下」「サイト情報の後ろ」「なし」が設定できます。標準では「タイトルの下」が設定されています。
• 「記事情報に枠を付ける」
  記事情報の部分に枠を付けて、内側に影を付けます。「ウィンドウ」のような表示にすることができます。
• 「抜粋文を表示する」
  チェックを付けると抜粋文が表示されます。標準ではチェックありが設定されています。
• 「内側に影を付ける」
  カード内側に影の効果を付けます。へこんで見えたり、紙の影のように見えます。標準ではチェックなしになっています。
• 「影を付ける」
  カードの右下に影の効果を付けて浮いているように見せます。標準ではチェックありが設定されています。
• 「角を丸める」
  カードの四隅を丸くします。「なし」「4px」「8px」「16px」「32px」「64px」が設定できます。標準では「なし」が設定されています。
• 「マウスでポイントしたときに表示を薄くする」
  マウスカーソルがリンクカードの上に来たときに表示を薄くします。
• 「サムネイル」
  サムネイルの表示位置を変更できます。「左側」か「右側」、「なし」を設定できます。
• 「サムネイル／幅」
  サムネイルの幅を設定できます。標準では「100px」が設定されています。
• 「サムネイル／高さ」
  サムネイルの高さを設定できます。標準では「108px」が設定されています。
• 「サムネイル／影を付ける」
  サムネイル画像に影を付けます。

表示の設定／枠

カードの枠に関する設定を行います。

• 「枠線の太さ／色」
  枠線の色を設定します。
• 「枠線の太さ／枠線の種類」
  枠線の書式を設定します。「実線」「点線」「破線」「二重線」「立体（へこみ）」「立体（隆起）」「立体（押したボタンのような効果）」「立体（ボタンのような効果）」が設定できます。標準では「実線」が設定されています。
• 「枠線の太さ／幅」
  枠線の太さを設定できます。標準では「1px」が設定されています。

表示設定／CSSリセット

• 「CSSリセット（img）」
  使用テーマによっては画像に余白を設定してある等、レイアウトがずれることがあります。それらのCSSを上書き設定します。テーマのCSSに合わせたい場合、チェックを外します。

表示設定／続きを読むボタン

抜粋文のあとに「続きを読む」ボタンを表示する設定を行います。

この設定を使用するときは抜粋文を非表示にするか、カードの高さを空欄にしないと上手く表示されないことがあります。

• 「続きを読むボタン」
  「なし」、「テキストリンク」、「シンプルなボタン」から選べます。標準では「なし」に設定されています。

表示設定／ソーシャルカウント設定

WebAPIを利用してソーシャルカウントを取得します。

カウントはバックグラウンド処理で取得してデータベースにキャッシュされます。

リアルタイムでは無い分、反映されるまで時間差がありますが高速に表示ができます。

• 「シェア数を表示する」
  「サイト情報の後ろ」、「タイトルの後ろ」、「なし」から選べます。「なし」以外を設定した場合、バックグラウンドでシェア数の取得を行います。標準では「サイト情報の後ろ」に設定されています。
• 「ツイッター」
  Twitterのツイート数を取得します。
• 「フェイスブック」
  facebookのシェア数を取得します。
• 「はてなブックマーク」
  はてなブログのブックマーク数を取得します。

文字の設定

それぞれの項目において、「文字色」、「縁取りの有無」、「縁取りの色」、「文字の大きさ」、「行の高さ」、「省略されるまでの文字数」の設定を行います。

濃い色の画像を背景に設定した場合、縁取りを設定することで文字が見やすくなります。

縁取りなし
縁取りあり

• 「サイト情報」
  「サイト情報」を表示したときのサイト名称等の文字の設定をします。標準では「黒色」「縁取りなし」「大きさ12px」「高さ12px」「文字数45桁」が設定されています。
• 「付加情報」
  内部リンク、外部リンク、同ページのときに表示するテキストの文字の設定をします。標準では「黒色」「縁取りなし」「大きさ12px」「高さ12px」が設定されています。
• 「タイトル」
  リンク先のタイトルを表示する文字の設定をします。標準では「黒色」「縁取りなし」「大きさ16px」「高さ24px」「文字数80桁」が設定されています。
• 「URL」
  「リンク先のURLを表示する」にチェックを入れたときに表示されるURLの文字の設定をします。標準では「青色」「縁取りなし」「大きさ10px」「高さ10px」が設定されています。桁数の制限は無く、カード幅をはみ出すまで表示します。
• 「抜粋文」
  「抜粋文を表示する」にチェックを入れたときに表示される抜粋文の文字色と大きさ、省略される桁数を設定します。標準では「黒色」「縁取りなし」「大きさ11px」「高さ17px」「文字数250文字」が設定されています。
• 「続きを読むボタン」
  続きを読むボタンを表示させたときの文字の設定をします。標準では「黒色」「縁取りなし」「大きさ12px」「高さ40px」が設定されています。
• 「幅に合わせて縮小」
  スマートフォンで表示している場合など、画面幅が小さい場合にサムネイルと文字の大きさを小さくします。

外部リンクの設定

自サイト内では無いURLを指定したときの表示に関する設定を行います。

• 「背景色」
  カードの背景色を設定します。標準では白色が設定されています。
• 「背景画像」
  画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
• 「サムネイル」
  サムネイルの取得方法として「なし」か「WebAPIを利用する」が設定できます。標準は「なし」に設定されています。
• 「サイトアイコン」
  サイトアイコン（ファビコン）の取得方法として「なし」か「WebAPIを利用する」が設定できます。標準は「WebAPIを利用する」になっています。
• 「サイト情報」
  サイト名の横に表示する文字列を指定します。（例．「（外部サイト）」）
• 「続きを読むボタンの文字」
  続きを読むボタンに表示する文字列を指定します。（例．「このサイトを見てみる」）
• 「新しいウィンドウで開く」
  クリックしたときに新しいウィンドウまたはタブで開く設定を行います。標準では「モバイル端末以外」になっています。
• 「記事取得方法」
  「カード管理画面に記録されている内容から表示する」から変更はできません。
• 「nofollowを付与する」
  外部リンクの場合に「rel=”nofollow”」を付与します。敢えて付与したい理由が無い場合は非推奨です。
• 「はてなブログカードを利用する」
  チェックを付けると、外部リンクを「はてなブログカード」で表示することができますが、「はてブカード」を使いたい場合は Pz-HatenaBlogCard の利用をお勧めします。

内部リンク

自サイト内のURLを指定したときの表示に関する設定を行います。

• 「背景色」
  カードの背景色を設定します。標準では白色が設定されています。
• 「背景画像」
  画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
• 「サムネイル」
  サムネイルの取得方法として「なし」か「直接取得する」、「WebAPIを利用する」が設定できます。標準は「直接取得する」になっています。
• 「サイトアイコン」
  サイトアイコン（ファビコン）の取得方法として「なし」か「直接取得する」、「WebAPIを利用する」が設定できます。「直接取得する」はWordPress4.3.0以降で有効です。標準は「直接取得する」になっています。
• 「サイト情報」
  サイト名の横に表示する文字列を設定します。（例．「（サイト内）」）
• 「続きを読むボタンの文字」
  続きを読むボタンに表示する文字列を設定します。（例．「この記事を見てみる」）
• 「新しいウィンドウで開く」
  クリックしたときに新しいウィンドウまたはタブで開く設定を行います。標準では「なし」になっています。
• 「記事取得方法」
  内部リンクの記事の取得方法を指定します。「抜粋文が設定されている投稿はそちらを優先する」を指定すると抜粋文が設定されている記事はそちらから表示されます。「カード管理画面に記載されている内容から表示する」を指定すると外部リンク同様、キャッシュから表示します。標準では「常に最新の記事内容から抜粋文を作成する」が設定されています。
• 「記事URLの再取得」
  URLから記事IDが取得できなかった場合、リダイレクト先のURLから記事IDを再取得します。パーマネントリンクを変更するプラグインを利用している場合など、上手く内部リンクのカードが表示されないときに使用します。

同ページへのリンク

記事と同一のURLを指定したときの表示に関する設定を行います。

設定できない項目は「内部リンク」の設定と共通です。

• 「背景色」
  カードの背景色を設定します。標準では淡い灰色が設定されています。
• 「背景画像」
  画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
• 「サイト情報」
  サイト名の横に表示するテキストを設定します。

画像取得APIの設定

画像取得に使用するWebAPIに関する設定を行います。

• 「ファビコンの取得API」
  ドメイン名の左側に表示するサイトアイコンの画像URLを指定します。通常は画像取得WebAPIのURLを記述しますが、自分で用意した画像URLを指定することもできます。標準ではGoogleのファビコン取得APIのURLが設定されています。
• 「サムネイル画像の取得API」
  サムネイルの取得方法を「WebAPI」に設定した場合、このURLを使用して画像を取得します。

次の文字列は、置き換えて使用されます。 %DOMAIN_URL% 「http://」や「https://」から始まるドメイン名に置き換わります。（例．https://popozure.info） %DOMAIN% 「http://」や「https://」を抜いたドメイン名に置き換わります。（例．popozure.info） %URL% esc_urlによってURL文字列に変換されたリンク先URLに置き換わります。 置き換えルールは「ファビコン取得」「サムネイル取得」のいずれにも有効です。 サムネイル取得のWebAPIについては、下記リンクを参照ください。 ぽぽづれ。 （このサイト）   4 tweets 1 pocket 2015.10.04 [Pz-LkC]Pz-LinkCardで外部リンクのサムネイル画像を表示する方法 https://popozure.info/20151004/9317 リンクをカード形式で表示するWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリにて公開しました。外部リンクのサムネイル画像外部リンクのサムネイル画像について、インストール・有効化した直後は表示されない設定になっています。画像ファイルの...

リンク先チェックの設定

リンク先の記事内容を取得するときの設定項目です。

• 「エラーのときリンクしない」
  チェックされていると、リンク先がエラーの場合にリンクを無効にします。
• 「SSL検証を無効」
  SSLサイトなどで記事内容を取得できない場合にチェックを入れると取得できる可能性があります。
• 「リダイレクトの処理」
  リンク先が移転している場合に追跡します。
• 「リファラーの通知」
  リンク先を取得する際にリファラーを設定します。
• 「ユーザーエージェントの通知」
  ユーザーエージェントがブラウザのもので無いと取得できないサイトがある場合にチェックを外すと取得できる可能性があります。
• 「リンク切れチェック」
  リンク先を定期的にチェックして、最新のステータスを取得して「Pz カード管理」で確認できるようにします。
• 「リンク切れカウント」
  チェックを入れるとWordPress設定画面の「ツール」を開いたときに「Pz カード管理」の右側にリンク切れの件数を表示します。
• 「サブディレクトリを外部リンクにする」
  サブディレクトリ型のマルチサイトにしている場合、メインサイトからサブサイトを外部サイトと判定します。

エディターの設定

エディターを使用するときに関係する設定を行います。

• 「ショートコード 1」
  使用するショートコードを設定します。大文字と小文字を区別します。標準では「blogcard」が設定されています。
• 「ショートコードで囲んだ文字列」
  ショートコードに囲まれた文字列の扱いを設定します。リンク先から取得したタイトルや抜粋文の代わりに、ショートコードで囲まれた文字を使用します。標準では「使用しない」です。（この設定はショートコード1のみに適用されます）
  
• 「ショートコード 2」
  複数パターンでショートコードを使用したい場合に設定します。大文字と小文字を区別します。
• 「ショートコード 3」
  複数パターンでショートコードを使用したい場合に設定します。大文字と小文字を区別します。
• 「テキストリンク行の変換」
  一行のテキストにリンクしただけの行をカード形式で表示します。
• 「URL行の変換」
  URLを記述しただけの行をカード形式で表示します。
• 「外部リンクのみ変換」
  「テキストリンク行の変換」および「URL行の変換」を外部サイトのみ行うようにします。
• 「リンクカードボタンを追加」
  ビジュアル エディタにリンクカードを挿入するボタンを追加します。
• 「クイックタグを追加」
  テキスト エディタにリンクカードを挿入するボタンを追加します。

詳しい人向けの設定

通常は設定する必要の無い項目です。

• 「末尾のスラッシュ」
  URL末尾のスラッシュを省略する設定です。「そのまま」「ドメイン名のときだけ削除」「常に削除」が選べます。
• 「追加するスタイルシート」
  自分で追加するスタイルシートを記述できます。
• 「PCのときに追加するクラス名」
  モバイル端末でない場合、リンクカードに指定したクラス名を付加します。テーマによっては特殊効果を付けることができます。
• 「モバイルのときに追加するクラス名」
  モバイル端末の場合、リンクカードに指定したクラス名を付加します。テーマによっては特殊効果を付けることができます。
• 「ショートコード実行」
  リンク・URLから変換したリンクカードが上手く表示されないときにチェックを入れます。
• 「URLによるAMP判断」
  アクセスされた記事のURL末尾が「/amp」「/amp/」「/?amp=1」のときに簡易表示することでGoogle AMP規格に適応します。通常はチェックを入れなくても自動的に簡易表示されます。
• 「IDNAドメインの表示」
  いわゆる日本語ドメインの表示に対応します。phpのバージョンによっては使用できないようです。
• 「実行時間の表示」
  HTMLソース内にタグを生成するのに要した時間や、試験に必要な情報を出力します。通常使用時にはチェックを外してください。

初期化

設定を全て初期状態に戻します。

書式がうまく反映されない、ブラウザでCTRL＋F5を押してキャッシュクリアしてもうまく反映さない場合等、いったんリセットしてみるとうまくいく場合があります。

• 「設定を初期状態へ戻す」
  チェックを付けて「変更を保存」を押すと、設定内容を全て初期状態に戻します。

管理画面でできること

インストールすると、「ツール」に「Pz カード管理」という項目が追加されます。

プラグイン一覧のプラグイン名のところからも「設定」画面を開くことができます。

「Pz カード管理」を開くと、キャッシュされている内容の一覧が表示されます。（キャッシュされていないリンクは表示されません。）

スマートフォンやタブレットなど、横幅が狭いと画面から表示がはみ出してしまいます。

情報量が多いため、PC横画面での使用を推奨します。

表示項目の選択

表示する対象を選択します。

選択すると、ソート順とドメインの絞り込みがクリアされます。

• 「すべて」
  キャッシュされているすべてのリンクが表示されます。
• 「内部リンク」
  キャッシュされている内の、内部リンクのみを表示します。
• 「外部リンク」
  キャッシュされている内の、外部リンクのみを表示します。
• 「更新あり」
  キャッシュされた後にアクセスが出来なくなっているなど、ステータスが変更されたリンクのみを表示します。
• 「リンク切れ」
  404エラーが返ってきているリンクのみを表示します。

ドメインの絞り込み

ドメイン名で絞り込みを行うことができます。

「すべてのドメイン」と表示されている部分をクリックすると、キャッシュされているすべてのドメイン名が表示されています。

() 内に使用されているリンク数が表示されています。

「絞り込み検索」を押すと、そのドメインのもののみが表示されます。

チェックを一括処理

「選択してください」と表示されている部分をクリックすると、一括処理のメニューが表示されます。

「適用」を押すと、「チェック」を付けたキャッシュに対して処理を実行します。

• 「記事内容を再取得する」
  チェックが付いているリンク先にアクセスを行い、タイトルや記事内容、結果コードを更新します。空欄だった項目が取得できる場合もありますが、手入力していた項目が「404 Error」などで上書きされる場合もあります。
• 「ソーシャルカウントを再取得する」
  チェックが付いているキャッシュのソーシャルカウントを再取得します。
• 「リンクが有効化チェックする」
  チェックが付いているリンク先にアクセスを行い、結果コードを更新します。記事内容は更新しません。
• 「キャッシュから削除する」
  チェックが付いているキャッシュを削除します。リンクカードのショートコードが残っている場合、記事が表示されたときに再取得されます。

見出しクリックで並び替え

見出しをクリックすると、その項目順に表示します。

項目を押すと「▼」マークが付いて、「降順」になります。（新しい日→古い日、z→a、9999→0 という並び。）

「▼」マークが付いている項目をもう一度クリックすると「▲」マークが付いて、「昇順」になります。（古い日→新しい日、a→z、0→9999 という並び。）

たとえば、「タイトル」や「抜粋文」を昇順で並べると、空欄のものが上にくるので、取得がうまくできていないものを探すことができます。

表示される項目

• 「URL」
  URLとタイトルは2列を使用して一緒に表示されます。内部リンクの場合、リンクが設定されます。
  
• 「タイトル」
  タイトルが表示されます。自動取得したものから変更されている場合、太文字表示されます。
• 「インラインメニュー」
  「編集」「再取得」「削除」といったメニューが表示されます。そのキャッシュ単体に対して編集などを行います。
• 「抜粋文」
  抜粋文が表示されます。自動取得したものから変更されている場合、太文字表示されます。
• 「文字セット」
  取得したときの変換元文字セットが表示されます。データベースへはUTF-8に変換してから格納されています。また、手動で編集すると「edit」という文字が入ります。
• 「ドメイン」「サイト名称」
  ドメイン名が表示されます。サイト名称があった場合には、併記されます。
  
• 「Tw」「fb」「B!」
  取得できているソーシャルカウントで、それぞれ「ツイッター」「フェイスブック」「はてなブックマーク」の数です。
• 「登録日時」
  リンク先の情報を取得した日時が表示されます。
• 「記事ID」
  リンク先の情報を取得したときに表示された記事のIDが表示されます。
• 「結果コード」
  リンク先の情報を取得したときのHTTPステータスコードが表示されます。取得そのものが出来なかった場合「999」もしくは「負の値（-1など）」が入っています。

インラインメニュー

URLとタイトルの項目に、メニューが表示されます。

• 「編集」
  タイトルや抜粋文を編集する画面が表示されます。
• 「再取得」
  リンク先にアクセスして、タイトルや抜粋文等を再取得します。
• 「削除」
  キャッシュから削除します。

編集画面

インラインメニューから「編集」を選ぶと、編集画面になります。

一覧画面の上部に表示されるため、編集を行わない場合、そのまま一覧を操作してもかまいません。

「サイト名称」「タイトル」「抜粋文」を変更することができます。

一部の項目についてはダブルクリックすることでロックを外して変更することができます。

「更新」を押すと修正した内容がデータベースに記録されます。

既知の不具合や気になる点など

• WordPressのピンバックが飛ばない。
  • Aタグを直接記述するわけでは無いため、リンク先にWordPressのピンバックは飛びません。
• カード管理の一覧で表示される件数が少ない。
  • 実際に何件もキャッシュの更新を行うと、サイト表示そのものも重くなる現象があったため、1ページ10件としています。
• 内部リンクの場合、「非公開」や「パスワード付」にしたもののタイトルや抜粋文が表示される。
  • 内部リンクのタイトル・抜粋文の取得には post_get() を使用しているため、非公開記事でもタイトルや抜粋文が表示されます。現在、これは仕様となっています。公開記事内に非公開記事のリンクは作成しないようにしてください。（「パスワード付記事のリンクカードでタイトルと100文字程度の抜粋文を見せておいて、実際に見るにはパスワードが必要」という使い方はできます。）
• 「カテゴリページ」「タグページ」を内部リンクした場合、タイトルと抜粋文がサイト名とサイト説明になる。
  • 現在のところ、仕様ではありますが、何かかしら対応したいと考えています。（ver2.0.1対応）
• WordPressテーマによっては表示が崩れる。
  • レスポンシブなテーマや、!important 指定を積極的にしているテーマなど、全てに対応するのは難しそうです。
• ショートコードを正しく記述しているがリンクカードにならない。
  • ある程度の記述ミスは読み替えるようになっていますが、しっかり半角で書いているのにも関わらずどうしてもURLエラーになってしまう場合、他のプラグインとの相性が悪い可能性があります。

その他

接頭辞の「Pz-」って何かというと、普通に「Popozure（ぽぽづれ）」から取ったものです。

一応、「Pz-」と表記したときには「ピーズィー」と読みますが、「ピーゼット」でも「ぽぽづれ」でも「ポポジュァ（Popozure）」でも、お好きに読んでいただいてかまいません。

Twitterなどで告知する際には「Pz-HatenaBlogCard」（ピーズィー・ハテナブログカード）は「Pz-HBC」、「Pz-LinkCard」（ピーズィー・リンクカード）は「Pz-LkC」と略しています。

 

表示のズレ、不具合などありましたら、履歴から使用しているバージョンの記事へ飛び、コメント欄などで報告していただけると可能な限り対応いたします。

ツイッターアカウント(@popozure）も用意しましたので、DM（ダイレクトメッセージ）などで報告いただいても対応いたします。

あくまでも個人の趣味でやっているものなので、返答に数日かかる場合もあります。また、長期的・専門的なサポートは行えない場合がありますので、ご了承ください。

 

「自分で直してみたいけど、どの辺直すといい？」といった質問もサポートしようと思っています。

報告の際には、テーマ名やスクリーンショット、もしくは実際に不具合を起こしている状態のURLなどを教えていただけると対応できる可能性があがります。

コメント欄では画像の添付が行えないので、画像を送付いただける場合にはTwitterにてDMをしていただけると助かります。

履歴

• 2019/07/07 ver2.2.4
  • WordPress 5.2.2 での動作確認を行いました。
  • ショートコードごとにnofollowを設定できる機能を追加しました。
  • スタイルシートの取得方法を変更しました。
  • 内部リンクのサムネイル画像のURLからスキームを省略しました。
• 2019/05/25 ver2.2.3
  • WordPress 5.2.1 での動作確認を行いました。
  • ショートコードの強制実行機能を追加しました。
• 2019/04/20 ver2.2.2
  • ビジュアル エディタの挿入ボタンの仕組みを変更しました。
• 2019/03/10 ver2.2.1
  • WordPress 5.1 での動作確認を行いました。
  • 警告エラーを修正しました。
  • ショートコード記述エラーに解除方法を表示させました。
• 2018/12/09 ver2.2.0
  • WordPress 5.0 での動作確認を行いました。
  • 警告エラーを3点修正しました。
• 2018/09/08 ver2.1.9
  • 相対指定URLに対応しました。
• 2018/09/04 ver2.1.8.4
  • 「続きを読む」ボタンの不具合を修正しました。
• 2018/09/03 ver2.1.8.3
  • 警告エラーの修正をしました。
  • 「続きを読む」ボタンの不具合を修正しました。
• 2018/09/02 ver2.1.8.2
  • リンク切れチェックの期間を長くしました。
  • 編集画面に次回のリンク切れチェック日時を表示しました。
• 2018/09/01 ver2.1.8.1
  • フィルター優先度を明示しました。
• 2018/09/01 ver2.1.8
  • かんたん書式設定に「見出し」を追加しました。
  • かんたん書式設定の名称変更をしました。
  • かんたん書式設定の微調整をしました。
  • かんたん書式設定「シンプル」を追加しました。
  • サイト情報の位置に「タイトルの上」を追加しました。
  • 設定画面の「サイト情報」を「付加情報」に名称変更しました。
  • カード管理画面の並び順の表示が昇順になっていたのを修正しました。
  • ソーシャルカウントに「Pocket」を追加しました。
  • リンク文字の装飾を無効にする設定を追加しました。
• 2018/08/13 ver2.1.7.1
  • 「かんたん書式設定」に「見出し」を追加しました。
• 2018/08/13 ver2.1.7
  • 外部・内部・同一ページの判定方法を修正しました。
  • 機能要望に応えました。外部のみ変換する機能を追加しました。
  • 文字コードの判定方法を修正しました。
• 2018/08/11 ver2.1.6.2
  • 不要なアンダーラインが表示されてしまうのを修正しました。
• 2018/08/10 ver2.1.6.1
  • 警告エラーが出ていたのを修正しました。
• 2018/08/09 ver2.1.6
  • 設定画面にツイッターアカウントを表示しました。
  • タイトルの取得方法を修正しました。
  • アンカー文字のアンダーラインを除去しました。
• 2018/08/05 ver2.1.5
  • 初期設定を見直しました。
  • 角を丸めるサイズを増やしました。
  • カードの余白を増やしました。
  • いくつかのAPIのURLをhttpsのものに変更しました。
  • シェア数を押したときの挙動を変更しました。
  • 付加情報を見出し表示する機能を追加しました。
• 2018/08/03 ver2.1.4.2
  • WordPress 4.9.8での動作確認を行いました。
• 2018/07/29 ver2.1.4.1
  • URL記述エラーを許容するように修正しました。
• 2018/07/28 ver2.1.4
  • 文字セット取得方法を修正しました。
  • カード管理の表示方法を修正しました。
• 2018/04/13 ver2.1.3
  • 機能要望に応えました。リンク切れの件数を表示する機能を追加しました。
• 2018/04/07 ver2.1.2
  • 直接取得のサムネイルのサイズを200pxに変更しました。
  • 横幅に合わせて縮小表示させるときの行間を調整しました。
  • リンク先URLの表示位置を追加しました。
  • カード管理画面に文字列検索を追加しました。
  • カード管理画面の一括メニューに「サムネイルの再取得」を追加しました。
• 2018/04/04 ver2.1.1.1
  • WordPress 4.9.5での動作確認を行いました。
• 2018/03/16 ver2.1.1
  • 設定画面に「続きを読む」ボタンの文字色とサイズを追加しました。
• 2018/03/07 ver2.1.0.1
  • 設定画面にバージョンを表記しました。
  • 設定画面の設定項目を再配置しました。
  • 設定画面の誤記を修正しました。
  • 「続きを読むボタン」を表示できるように修正しました。
  • 機能要望に応えました。ビジュアル エディタへリンクカードボタンを追加するかどうか選ぶ設定項目を追加しました。
  • 機能要望に応えました。テキスト エディタへリンクカードボタンを追加をするかどうか選ぶ設定項目を追加しました。
  • カード管理画面に「リンク切れ」の項目を追加しました。
  • スタイルシートを読み込まないときに簡易表示するように修正しました。（Google AMP対応）
• 2018/02/07 ver2.0.8
  • WordPress 4.9.4での動作確認を行いました。
  • JavaScriptと画像ファイルのディレクトリーを整理しました。
  • 設定画面に追加するスタイルシートを記述する項目を追加しました。
  • 設定画面でショートコードを入力すると記述例にも反映されるように修正しました。
  • 管理画面でphpエラーが出ていたのを修正しました。
• 2018/01/17 ver2.0.7.2
  • WordPress 4.9.2での動作確認を行いました。
  • 設定画面の一部が日本語表記になっていなかったのを修正しました。
• 2017/12/16 ver2.0.7.1
  • PHPエラーが出る不具合を修正しました。
• 2017/11/22 ver2.0.7
  • 一部のURLをエラー表示から除外しました。
  • サブディレクトリ型マルチサイトに対応しました。
• 2017/10/21 ver2.0.6
  • URLパラメーターの記述に誤りがあるときに管理画面にエラーを表示する機能を追加しました。
• 2017/10/09 ver2.0.5
  • 機能要望に応えました。記事IDが取得できない場合、リダイレクト先のURLを取得する設定を追加しました。
• 2017/10/03 ver2.0.4.1
  • ドキュメントの誤字を修正しました。
  • AMP対応するURLを追加しました。
• 2017/10/02 ver2.0.4
  • WordPress4.8.2で動作確認しました。
  • URLパラメータの記述ミスに対応しました。
  • はてなブログカードのURLをSSL対応のものに変更しました。
  • 「押しピン」の画像を変更しました。
  • かんたん書式設定に「スクエア」を追加しました。
  • サムネイルの位置に「上側」を追加しました。
• 2017/08/19 ver2.0.3
  • 404エラーのときでもリンクを有効にする設定を追加しました。
  • 内部リンクの抜粋文が取得できていなかった不具合を修正しました。
  • 外部リンクのサムネイル取得が出来なくなる不具合を修正しました。
• 2017/08/08 ver2.0.2
  • サイトアイコンのURLを取得するように修正しました。
  • サムネイル画像、サイトアイコンの相対パスに対応しました。
  • URLパラメータの記述ミスに対応しました。
• 2017/08/01 ver2.0.1
  • ver2.0.0.1～2.0.0.3の修正を取り込みました。
  • カテゴリーページに対応しました。
  • タグページに対応しました。
• 2017/07/28 ver2.0.0.3
  • Ver2.0.0.2で発生した内部リンクが取得できない不具合を修正しました。
• 2017/07/27 ver2.0.0.2
  • 未実装のJavaScriptの呼び出しがあったので修正しました。
• 2017/07/12 ver2.0.0.1
  • IDNAドメインで警告が出る不具合に対応しました。
• 2017/07/11 ver2.0.0
  • URLのパラメータとして「href」も使えるように修正しました。
  • テキストエディタにクイックタグを追加しました。
  • ビジュアルエディタにボタンを追加しました。
  • テキストリンクだけの行をリンクカードにする機能を追加しました。
  • URLだけの行をリンクカードにする機能を追加しました。
  • Not Foundのときにリンクさせない機能を追加しました。
  • カード管理画面で変更部分が分かるように修正しました。
  • IDNAドメイン（日本語ドメイン）に対応しました。
• 2017/07/06 ver1.8.2
  • かんたん書式設定の初期状態を「シンプル」に変更しました。
  • InstantWPにインストールした際、文字化けしてしまうのを修正しました。
  • サイトをSSL化してもサイトURLを元のままにしていた場合にスタイルシートが適用されない現象に対応しました。
  • 外部サイトのサムネイルの保存ディレクトリを変更しました。
  • 管理画面のレイアウトを見直しました。（サムネイル表示、文字セット列削除、ソーシャルカウントの列を整理、スマートフォンで見たときの崩れ対応）
• 2017/06/19 ver1.8.1
  • サムネイルの取得方法を修正しました。
  • 外部サイトのサムネイルを直接取得できるように修正しました。
  • かんたん書式設定に「シンプル」を追加しました。
• 2017/02/13 ver1.8.0
  • かんたん書式設定に「押しピン」を追加しました。
  • Google AMPに仮対応しました。
  • 設定画面のカラーコード入力にエラーチェックを追加しました。
• 2017/01/22 ver1.7.9.1
  • 抜粋文のサイズが正しく設定されない不具合を修正しました。
• 2017/01/22 ver1.7.9
  • キャッシュ用テーブルが作成されない不具合を修正しました。
  • METAタグの取得方法を修正しました。
  • 内部リンクが取得できない際に高負荷になる不具合を修正しました。
• 2017/01/21 ver1.7.8
  • キャッシュ用テーブルが作成されない不具合を修正しました。
• 2017/01/20 ver1.7.7
  • アイキャッチ画像が設定されていないテーマの場合にエラーが発生していたのを修正しました。
• 2017/01/19 ver1.7.6
  • かんたん書式設定に「縫い目」を追加しました。
  • 管理画面に用例を追加しました。
  • サムネイルのサイズを指定できるように修正しました。
• 2017/01/16 ver1.7.5
  • リンク切れのチェックを行うように修正しました。
  • リンク切れ時、クリックできないように修正しました。
  • 設定画面を整理しました。
  • URLの末尾のスラッシュを除外する設定を追加しました。
• 2016/10/19 ver1.7.4
  • 新規インストールした際にデータベースが作成されず、タイムオーバーが頻発する不具合を修正しました。（ver1.7.3から発生）
• 2016/08/22 ver1.7.3
  • ドメイン名が正常に取得できない不具合を修正しました。
• 2016/08/21 ver1.7.2
  • WordPress 4.6での動作確認をしました。
  • 幅に合わせてサムネイル画像だけでなく文字のサイズも小さくするように修正しました。
  • 管理画面で記事内容を再取得したときにソーシャルカウントがリセットされてしまう不具合を修正しました。
  • 内部リンクがキャッシュされない不具合を修正しました。
• 2016/08/11 ver1.7.1
  • リンク先の記事内容（タイトルと抜粋分）がキャッシュされない不具合を修正しました。
  • サムネイルが取得できなさそうなリンク先のサムネイルを取得しないように修正しました。
  • 次回実装に向けて内部的な修正を行いました。
• 2016/07/30 ver1.7.0
  • ドメイン名のみのとき、最後のスラッシュを無効にする機能を追加しました。
  • 枠線の設定に「小麦色」を追加しました。
• 2016/07/12 ver1.6.9
  • 「幅に合わせて縮小」を初期選択するように変更しました。
  • Twitterのツイート数をディジティ・ミニミ社の「count.jsoon」を利用するようにしました。
  • サイトアイコンを設定していない場合、内部リンクのサイトアイコンを直接取得しないように修正しました。
  • 機能要望に応えました。内部リンクのとき、サムネイル（アイキャッチ）画像を用意していない投稿の場合、WebAPIを利用する設定を追加しました。
• 2016/05/22 ver1.6.8
  • バグ修正。リンク先の内容によってFatalエラーが表示されてしまうのを修正しました。
  • 内部的な修正。（PHP警告エラーの修正、PHPショートタグの廃止など）
• 2016/02/14 ver1.6.7
  • 機能要望に応えました。内部リンク時に抜粋文が設定されている場合、そちらを優先的に取得する機能を追加しました。
• 2015/12/23 ver1.6.6
  • 機能要望に応えました。モバイルで閲覧時にサムネイルが大きくてタイトルや記事内容がはみ出してしまうため、ブラウザの幅に合わせてサムネイルを小さくする機能を追加しました。
• 2015/12/20 ver1.6.5
  • バグ修正。フェイスブックのURL間違いを修正しました。
  • 文字のふちどり機能を追加しました。背景画像によって文字が見づらくなるのを防ぎます。
• 2015/12/06 ver1.6.4
  • バグ修正。フェイスブックのシェア数が0か1しか表示されていませんでした。
  • 機能要望に応えました。DIV要素に任意のクラス名を追加できるように修正。DigiPress等でアニメーション効果を付ける目的で追加しました。
• 2015/11/21 ver1.6.3
  • ツイート数が取得できなくなったのが確認できたため、ツイート数取得の処理を削除。
  • 管理画面からソーシャルカウント再取得を行うと2度処理してしまう不具合を修正。（ver1.6.0から発生していました）
• 2015/11/20 ver1.6.2
  • ツイート数の取得がまだ行えたため、日付で判定して停止する機能を削除。
• 2015/11/19 ver1.6.1
  • ツイート数を取得しない判定が早めに動いてしまったので一日延長。
• 2015/11/18 ver1.6.0
  • charsetの取得方法を変更。
  • ソーシャルカウントの取得・再取得をバックグラウンドで行うように修正。
  • カード内側の余白を指定する設定項目を追加。
• 2015/11/17 ver1.5.8（未公開）
  • バックグラウンド取得の取得間隔調整。
  • ソーシャルカウントの再取得に関する処理を修正。
• 2015/10/28 ver1.5.0（未公開）
  • ソーシャルカウントの取得を、wp-cronを利用したバックグラウンド取得へ変更。
  • charset取得方法の変更。HTMLソース内の指定を優先し、指定が無い場合には今までどおり、変換テストして自動判断、自動判断ができなかった場合、PHPにおまかせ変換。
• 2015.10.27 ver1.4.0（未公開）
  • リンク先の取得を wp_remote_get() から cURL へ変更したため、リダイレクトされているサイトの取得が可能になりました。（たとえば短縮URLでもその先のサイトが取得できます）
  • cURLが使用できないサーバーの場合は wp_remote_get() を使用します。
• 2015/10/26 ver1.1.1
  • METAタグ・OGP情報のパース方法を見直し。
• 2015/10/17 ver1.1.0
  • 「新しいウィンドウで開く」機能に「モバイル端末以外」を追加。PCでは新しいウィンドウ／タブが開きますが、スマートフォンやタブレットではタブが開かないように設定できます。
  • 2015年11月20日以降、ツイート数を取得しないように変更。
• 2015.10.13 ver1.0.3
  • キャッシュ保存時に、キー値を作成していない場合があったのを修正。
  • 定型書式「紙めくれ」を変更。（テーマによっては表示が崩れる場合があります）
  • 定型書式「テープ＆紙めくれ」を追加。（テーマによっては表示が崩れる場合があります）
  • 管理画面で「編集」を押してもドメイン選択が解除されないように修正。
• 2015/10/10 ver1.0.0
  • プログラムのつくりを見直しました。
  • 囲み文字をショートコード1のみに適用されるように変更。
  • URLの判定方法を改善。
  • 文字コードの判定方法を改善。
  • 管理画面の機能強化。
    • 10件ごとに改ページされるように変更。
    • 一括処理にキャッシュの再取得を追加。
    • ドメインでの絞り込み機能を追加。
    • 一覧に表示されているすべての項目で、昇順／降順での並び替えできるように変更。
• 2015/10/07 ver0.1.3
  • content=”になっているOGP情報は無視するように修正。
  • サムネイル取得APIをWordPress.comのものを初期値に変更。
  • metaタグ表記にシングルクォートが使われている場合、取得できていなかったため対応。
  • タイトルや抜粋文をパラメータ等で設定した場合にもHTML等を除去するように変更。
  • 「カード管理」の画面のセキュリティを強化。
  • 定型書式「Pzカード標準書式」の文字色を一部変更。
  • 設定画面の「サイト情報」項目を「抜粋文」項目の上へ移動。
  • 設定画面にサイト情報と記事内容の間を区切るための「区切り線」を追加。
• 2015/10/04 ver0.1.2
  • 設定画面に「新しいウィンドウで開く」を追加。
• 2015/10/04 ver0.1.0
  • 公式プラグインディレクトリで公開しました。
• 2015/09/30 ver0.0.1
  • 当サイトにて「Pz-LinkCard」をお試し公開。