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

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

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

こういうのです。

全米50州 州名・略号・州都・英語表記
アメリカ全50州の州名、略号と州都の一覧です。 コピペ用にどうぞ。IA アイオワ Iowa デモイン Des Moines AR アーカンソー Arkansas リトルロック Little Rock ID アイダホ Idaho ボイシ Boise AK アラスカ Alaska ジュノー JuneauAL アラバマ Alabama モンゴメリー Montgomery AZ アリゾナ Arizona フェニックス Phoenix IL イリノイ Illinois スプリングフィールド Springfield IN インディアナ Indiana インディアナポリス Indianapolis WI ウィスコンシン Wisconsin マディソン Madison WV ウェストバージニア West Virginia チャールストン Charleston OK オクラホマ Oklahoma オクラホマ・シティ Oklahoma City OH オハイオ Ohio コロンバス Columbus OR オレゴン Oregon セイラム Salem CA カリフォルニア California サクラメント Sacramento KS カンザス Kansas トピカ Topeka KY ケンタッキー Kentucky フランクフォート Frankfort CT コネチカット Connecticut ハートフォード Hartford CO コロラド Colorado デンバー Denver SC サウス・カロライナ South Carolina コロンビア Columbia SD サウスダコタ South Dakota ピア Pierre GA ジョージア Georgia アトランタ Atlanta TX テキサス Texas オースティン Austin TN テネシー Tennessee ナッシュビル Nashville DE デラウェア Delaware ドーバー Dover NJ ニュージャージー New Jersey トレントン Trenton NH ニューハンプシャー New Hampshire コンコード Concord NM ニューメキシコ New Mexico サンタ・フェ Santa Fe NY ニューヨーク New York オールバニ Albany NV ネバダ Nevada カーソンシティ Carson City NE ネブラスカ Nebraska リンカーン Lincoln NC ノースカロライナ North Carolina ローリー Raleigh ND ノースダコタ North Dakota ビスマーク Bismarck VA バージニア Virginia リッチモンド Richmond

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

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

Pz-LinkCardの使い方

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

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

Pz-LinkCardプラグインの追加

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

Pz-LinkCardインストール

Pz-LinkCardの設定

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

Pz-LinkCardの設定

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

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

硬い鍵穴にシリコンスプレーを使って25,000円損した話
鍵穴が固くなって鍵がスルっと入らなくなることがあります。そんな時シリコンスプレーを使うと、一時的には滑りがよくなりますが、ゴミや砂を吸着しやすくなるので、結局はますます悪化します。鍵穴にシリコンスプレーは厳禁です。必ず専用スプレーを使ってください。

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

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

です。

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

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

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

Pz-LinkCardを記事に挿入する

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

[blogcard url="記事URL"]

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

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

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

AddQuicktagについてはこちらに

【AddQuicktag】 WordPressにタグや定型文を簡単に入れるプラグイン
ワードプレスの新規投稿画面上で、いつものタグをパっと打てるようにするプラグインが「AddQuicktag」です。 このプラグインは、タグだけでなく定型文を記憶させておくこともできて便利です。使用頻度の高いタグを登録しておく方法です。「開始タグ* と終了タグ(s)」欄では、上段に開始タグ()、下段に終了タグ()を入れます。

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桁の箇所を好きなカラーコードに変えてください。

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