リンクをカード形式で表示させる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” といった記述を自分でする必要がありません。
ショートコードを手軽に入力するボタン
記事作成にテキストエディタを使用している場合
「リンクカード」ボタンで手軽に入力ができます。
- URLをなぞって、「リンクカード」ボタンを押す。
- ショートコード1で挟まれます。
なぞらないで押すとショートコードの「開け」と「閉じ」が挿入できます。
- 1回目に押したときにショートコードの「開け」が挿入されます。
- 手入力もしくは貼り付けでURLを入力します。
- 2回目に押したときに「閉じ」が挿入されます。
ショートコードは1番目に設定されているものが使用されます。
記事作成にビジュアルエディタを使用している場合
「リンクカード アイコン」ボタンで手軽に入力ができます。
- リンクカードのアイコンを押す。
- URLを入力するダイアログが表示されます。
- 手入力か貼り付けでURLを入力します。
- 「OK」を押すとショートコードが挿入されます。
ショートコードは1番目に設定されているものが使用されます。
ショートコードを使わない方法
テキストリンクを書いただけの行をリンクカードにする
「テキストリンク行の変換」にチェックを入れると、テキストにリンクを設定しただけの行がリンクカードになります。
| エディタでの記述例 |
| dマガジンを試してみた（ふたたび） |
URLを書いただけの行をリンクカードにする
「URL行の変換」にチェックを入れると、URLを書いただけの行がリンクカードになります。
| エディタでの記述例 |
| https://popozure.info/20141213/5906 |
見た目を色々選べる細かく設定できる
設定画面からデザイン（カードの背景色や背景画像、表示する幅など、ある程度のレイアウト）変更ができます。
カードの「背景画像」と「背景色」と「枠線の色」については、外部リンクと内部リンクで別々に設定できます。（それ以外の枠線の太さなどの設定は共通です。）
| レイアウト変更の例 |
「標準」。外部リンクは青、内部リンクは黄色。 |
はてなブログカード風の「シンプル」。 |
WordPress標準ブログカード風の「スクエア」。 |
枠を無くしてShareHTMLメーカー風。 |
ストライプ。かわいらしく。 |
プラグインのインストール
WordPress公式プラグインディレクトリに登録されているので、WordPress管理画面からインストールすることができます。
インストールが正常に行えて有効化した後は、設定画面で好きな外観にして、記事中にショートコードを記述していくだけです。
新規インストールの場合
- WordPress管理画面から、「プラグイン」→「新規追加」と選んでいきます。
- 「プラグインの検索」と書かれているところに、「pz」や「linkcard」といったキーワードを入力して検索します。
- プラグイン名と作者を確認して「今すぐインストール」を押します。
プラグイン名：Pz-LinkCard
作者：poporon
- インストールが開始されるのでしばらく待ちます。
- 「インストール中」の表示が消えたら「有効化」を押してプラグインを有効化します。
- 「インストール済みプラグイン」の一覧で有効化されていることを確認します。
プラグイン一覧から更新する場合
- WordPress管理画面から、「プラグイン」→「インストール済みプラグイン」と選んでいきます。
- 「今すぐ更新してください。」を押して更新します。
- 「更新しました。」と表示されて更新終了です。
ダッシュボードから更新する場合
- WordPress管理画面の「更新」を選びます。
- 「プラグイン」のところで、更新するプラグインにチェックを付けて「プラグインを更新」を押します。
- メンテナンスモード有効→更新→メンテナンスモード無効→完了となって更新の完了です。
設定画面でできること
インストールすると、「設定」に「Pz カード設定」という項目が追加されます。
プラグイン一覧のプラグイン名のところからも「設定」画面を開くことができます。
詳細について
管理画面でできること
インストールすると、「ツール」に「Pz カード管理」という項目が追加されます。
プラグイン一覧のプラグイン名のところからも「管理」画面を開くことができます。
「Pz カード管理」を開くと、キャッシュされている内容の一覧が表示されます。（キャッシュされていないリンクは表示されません。）
スマートフォンやタブレットなど、横幅が狭いと画面から表示がはみ出してしまいます。
情報量が多いため、PC横画面での使用を推奨します。
詳細について
既知の不具合や気になる点など
- 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をしていただけると助かります。
修正履歴
こちらのページをご覧ください。
