ワードプレスの記事内に画像付きで過去記事を表示できるプラグイン
画像付きで過去記事を紹介しているブログを見かけて、格好いいな。と思って見つけたワードプレスのプラグイン「Pz-LinkCard」を紹介します。
プラグイン「Pz-LinkCard」
Pz-LinkCardはショートコードを記事内に書いてリンク先URLを記述するだけで格好いいリンク先表示ができるプラグインです。
[ショートコード url=”URL”]デザインのカスタマイズもできるので、自分好みの表示が可能です！
Pz-LinkCardのデフォルトデザイン
Pz-LinkCardのデフォルトデザインはこんな感じ。
デフォルトではグラデーションや影を使った立体的なデザインで表示されます。
カスタマイズ例
このブログのテーマ（テンプレート）に合わせた（合ってるかな？）雰囲気にカスタマイズしてみました。
他にも枠と画像の角を丸めたり文字色や文字サイズの変更も可能です。
Pz-LinkCardの導入方法
- プラグインの新規追加
- プラグインの検索⇒Pz-LinkCard
- 今すぐインストール
- プラグインを有効化
ワードプレスに慣れている方は、これだけで大丈夫だと思いますが、不慣れな方のために画像つきで解説します。
不要な方は「Pz-LinkCardの設定方法」にお進みください。
1.プラグインの新規追加（インストール）
ワードプレスの管理画面、左サイドバーの「プラグイン」⇒「新規追加」をクリック。
2.プラグインの検索⇒Pz-LinkCard
画面右上のキーワードに「Pz-LinkCard」を入力してEnterキーを押します。（キーワードには「」はいりません）
3.今すぐインストール
プラグイン名「Pz-LinkCard」を確認して「今すぐインストール」をクリック。
4.プラグインを有効化
インストールが完了しました。
と表示されたら「プラグインを有効化」をクリックでインストールは完了です。
Pz-LinkCardの設定方法
プラグインのインストールが完了したら、次は設定に入ります。
デフォルトデザインのままで良い場合は、設定の必要がありませんので、「Pz-LinkCardの投稿方法」にお進みください。
基本設定
ワードプレスの管理画面、左サイドバーの「設定」⇒「Pzカード設定」をクリックで設定画面に入ります。
ショートコードの設定
Pz-LinkCardを記事内に表示するためのショートコードを設定します。
設定したショートコードとリンク先URLを記事内に記述することで、記事中にPz-LinkCardを表示できます。
ショートコードはデフォルトの「blogcard」のままでOKです。
定型書式の設定
定型書式の設定は12種類の表示デザインから選択して設定します。
自分好みのデザインにしたい場合は「なし」を選択します。
配置設定
配置設定は表示の余白を設定する項目です。
自分の好みに合わせて上下左右、内外の余白を調節できます。
カード全体をリンク
Pz-LinkCardの表示全体をリンクにするか、しないかの設定です。
チェックマークを入れると、表示のどこをクリックしてもリンク先が開きます。
枠線の太さ
枠線を「なし」と「12種類のデザイン」から選べます。
外観設定
表示する項目やサムネイル（画像）などを設定する項目です。
シェア数を表示する
TwitterやFaceTimeなど、SNSのシェア数を表示する設定です。
文字設定
タイトルや抜粋文などの文字色や文字サイズを設定する項目です。
外部リンク
他サイトを表示するときの設定です。
背景色やサムネイル（画像）などの設定ができます。
こんな感じでおすすめの本を紹介しても良いかもしれませんね。
ワードプレスを始めるならこちらの本がおすすめ！
サムネイル（画像）はデフォルトで「なし」の設定ですが、表示したい場合は「WebAPI」を利用する」に設定します。
内部リンク
自サイトのURLを指定したときに表示される設定です。
同ページへのリンク
同ページへのリンクは、ページ内リンクのことです。
例えば、記事に「目次」などを入れて同ページ内にリンクを貼る場合に使います。
画像取得APIの指定
ファビコンとサムネイル画像取得のAPIを指定する項目ですが、わからない場合はデフォルトでOKです。
詳しい人用（Debug）
文字通り「詳しい人用」で、より細かな設定ができる項目です。
こだわらなければ特に設定を変える必要はありません。
Pz-LinkCardの投稿方法
Pz-LinkCardの投稿は設定したショートコードとリンク先URLを記述します。
ショートコードが「blogcard」の場合なら、
と記述します。
そうすると、このように表示されます。
カスタマイズ例の設定値
一応ですが、最初にお見せしたカスタマイズ例の設定値をまとめましたので、よろしければご利用ください。
基本設定
定型書式「なし」、他はデフォルトです。
表示設定
カードの横幅「580px」は当サイトの本文表示の幅に合わせた数値です。
他の数値は画像通りに設定変更をしてあります。
カード全体をリンク、枠線の太さ、外観設定
文字設定
その他の設定はデフォルトです。
CSSの追加
デザインのバランスを整えるために「CSS」を追加します。
CSSを知らない人にとっては難しそう。。と思うかもしれませんが、順番通りに設定してもらえれば大丈夫です！
1.CSSのエディター画面を開く
ワードプレスの管理画面、左サイドバーの「外観」⇒「エディター」をクリック。
2.CSSを記述
エディター画面を開いたら一番下までスクロールします。
以下のコードをコピペしてCSSの一番下に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* Pz-LinkCard */ .lkc-internal-wrap { margin: 0 0 20px 0; } .lkc-content { border-top: none } .lkc-domain { padding: 0 0 0 4px; } .lkc-title { display: block; padding:0 0 5px 5px; border-bottom: 4px solid #e8e8e8; } .lkc-excerpt { line-height: 1.6em; padding: 0 0 0 5px; } |
ファイルを更新して完成です、お疲れ様でした。
WordPressのカスタマイズの参考になれば幸いです。
☆本日の良さげなもの
仕事がはかどる超ワイドモニター
