WP記事内に別エントリをブログカード風に表示するプラグインPz-LinkCard

記事内に別のエントリーのリンクを貼ることがあると思います。

シンプルにリンクだけを貼るのが好きでしたが、最近はスマホで見る人が多く、青字のテキストリンクでは、タップしにくいかな?と思って、ワードプレスでブログカード風に別エントリーを紹介できるプラグインを探してみました。

こういうのです。

プラグインの新規追加画面で「blog card」と入れて検索したところ「Pz-LinkCard」なるプラグインが見つかったので導入してみました。

スポンサーリンク
スポンサーリンク

Pz-LinkCardの使い方

Pz-LinkCardのインストールと有効化

ワードプレス左側ダッシュボードの「プラグイン」から「新規追加」へ

Pz-LinkCardプラグインの追加

「キーワード」に「Pz-LinkCard」と入れると、プラグインが表示されるので、「今すぐインストール」を押して、続けて「有効化

Pz-LinkCardインストール

Pz-LinkCardの設定

プラグインを有効化したら、左メニューの「設定」から「Pzカード設定」へ

Pz-LinkCardの設定

ここでは、カードのデザインやカード内に表示するもの(URLや抜粋文を入れるかだとか)を設定できます。

ここではひとまずこんな風にしました↓

この見た目にするための設定を例として書いておきます。

  • かんたん書式設定=なし
  • 配置設定=「下の余白」だけ「16px」に変更
  • 外観設定=「サイト情報」を上側で「サイト名称を使用」にチェック
    その下の項目は、「抜粋文を表示する」「影を付ける」「角を丸める 」にチェック
  • 枠線の太さ=色を「#e2e2e2」に変更

です。

設定画面の中でプレビューできないのがちょっと面倒ですが、好きなデザインになるように色々試してみてください。

うちでは、Broken Link Checkerを入れているので、もっと下の方にある「リンク先のチェック」の「リンク切れチェック」もはずしました。

…と、一通り設定しましたならば…

Pz-LinkCardを記事に挿入する

カードを記事に表示するには、ショートコードを貼ればOKです。

[blogcard url="記事URL"]

↑このショートコードのURL部分を、リンクしたい記事のURLに変えて記事作成のビジュアルモードで貼り付けるだけです。

ショートコードを簡単に挿入するにはAddQuicktag

毎回ショートコードを打つのは面倒なので、AddQuicktag でショートコードを登録しておくといいです。

AddQuicktagについてはこちらに

AddQuicktagをインストールして有効化したら

ダッシュボード左の「設定」→「AddQuickTag」で設定画面に行って、

  • ボタンのラベルを好きな名前…「Pzカード」とか
  • 開始タグと終了タグでは、開始タグ(上の欄)にショートコードを入れて
  • ビジュアルエディターは、タグを使いたいものすべて(全部で問題ないです)にチェック

Pz-LinkCardのショートコードをAddQuickTagにre

 

と入力したら「変更を保存」

こうしておくと編集画面に「Quicktags」というボタンが出るようになるので、プルダウンして「Pzカード」をクリックすれば、ショートコードが自動で入ります。

AddQuickTagをプルダウン

“ ”にURLを入れればカード完成です。

記事URLをくくる「” ”」←は半角です。全角だと機能しないので気を付けてください。

つづきを読むボタンの色を変える

Pzリンクカードがアップデートされて、「つづきを読む」というボタンが設置できるようになりました。

設置するには、Pzリンクカード設定画面から

「続きを読むボタン」という項目で好きなボタンを選ぶだけです。

Pzリンクカード続きを読むボタン設置

「続きを読む」のテキストリンクとシンプルなボタン、ブルー、ダークのボタンがあります。

ボタンの色を好きな色にカスタマイズするには

/*Pzリンクカード続きを読むボタン色*/
.lkc-more-text {
    background-color: #d81c41 !important;
    border: 1px solid #d81c41 !important;
}

この#6桁の箇所を好きなカラーコードに変えてください。