[WordPressプラグイン] WP Plugin Info Cardでテーマとプラグインをカッコよく紹介する

WP-Plugin-Info-Card トップ画像

オススメのWordPress公式テーマやプラグインを紹介する時に何か効果的な方法は無いものかと探していたところ、まさにうってつけと思える良いプラグインがありました。

本当はもっと早く紹介する予定でしたがAMP対応がなかなか厄介で…結局AMPでの表示を最低限に割り切るのと、その検証に時間がかかってしまいまして。そんなわけで当エントリーではWP Plugin Info Cardの紹介と使用上の注意、AMP対応などについて書いてみたいと思います。

WP Plugin Info Cardの設定と使用方法

それでは順を追ってWP Plugin Info Cardの使い方について説明していきますが、その前にまずはこのプラグインを使うとどんな感じになるのかを見てもらった方がいいですね?

WordPressプラグインの表示例

早速このプラグインの使用例を見てもらう事にしましょう。レイアウトはCard(デフォルト)・Large・WordPressの3種類から選択出来ますが、ここでは当サイトのAMP対応との兼ね合いもあって”Large”を使用しています。

このカードのみ実際にショートコードから作成した本物で、以降のレイアウトに関しては全て画像を使ったサンプルとなってますので注意して下さいね?

Card

WP Plugin Info Card プラグイン Card(デフォルト)レイアウト

Large

WP Plugin Info Card プラグイン Large レイアウト

WordPress

WP Plugin Info Card プラグイン WordPress レイアウト

WordPressテーマの表示

こちらもプラグインと同様にレイアウトはCard(デフォルト)・Large・WordPressの3種類から選択可能です。

Card

WP Plugin Info Card テーマ Card(デフォルト)レイアウト

Large

WP Plugin Info Card テーマ Large レイアウト

WordPress

WP Plugin Info Card テーマ WordPress レイアウト

プラグインのインストールと有効化

プラグインのインストールと有効化に関してはわかる方には特に説明不要かと思います。プラグイン名をキーワードにして検索する場合はWP Plugin Info Cardをコピペすると、一覧の先頭に当プラグインが表示されるのでそのままインストール&有効化するだけです。

実はプラグインのインストール方法がまだよくわかっていない、という方にはこちらのエントリーがお役に立てば幸いです。

以降はWP Plugin Info Cardをインストールして有効化まで済んだものとして話を進めていきます。

プラグインの設定

設定画面では特にする事は無いのでとりあえずはそのままでもOKです。強いて言えばデフォルトのカラースキームを設定したい場合にイジるくらいかと思いますが、ひとまずざっくりと説明しておきます。

WP Plugin Info Cardの設定画面

ダッシュボードから設定 > WP Plugin Info Cardで設定画面に入ります。

Shortcode parameters

ビジュアルエディタから各項目を入力・設定する事でカードを表示する為のショートコードを作成出来ますが、ショートコードのパラメータを直接記述しても構いません。この画面にはそのパラメータの簡単な説明が書いてあります。

WP Plugin Info Card 設定画面 Shotcode parameters

公式サイトのドキュメントやショートコードのサンプルが見たい場合はDocumentation and examplesのリンク先に説明があります。

General options

プラグインの全体的な設定になりますが、デフォルトのままで問題ありません。

WP Plugin Info Card 設定画面 General options

Color scheme
カラースキームに関しては後ほどもう少し説明しますが、あらかじめ用意されたカラースキーム1~10の中で気に入った色があれば、プルダウンメニューから選んでデフォルトに設定する事が出来ます。
Force enqueuing CSS & JS
デフォルトの設定ではエントリー内でWP Plugin Info Cardのショートコードを使用した時のみ、プラグインのJSとCSSを読み込むようになっていますが、この項目をチェックする事で強制的に常時読み込ませる事が可能になります。普通に考えたらチェックするべきでは無い項目ですが、ウィジェットに埋め込みたい場合などに使用するのではないかと思われます。
Display a discrete credit
この項目にチェックすると「このカードはWP Plugin Info Cardで作成しましたョ」的なコメント付きのアイコンがカードに埋め込まれるようになります。

Dashboard Widget Settings

ぶっちゃけこの機能は要らないように思いますが一応書いておきますと、お気に入りのテーマとプラグインの情報をダッシュボードに表示しておけるというものです。

WP Plugin Info Card 設定画面 Dashboard Widget Settings

Enable dashboard widget
ダッシュボードウィジェットを有効化します。
Ajaxify dashboard widget
ダッシュボードウィジェットを非同期でロードします
List of items to display
リストに表示するテーマ・プラグインのスラッグを設定します。
スラッグを調べる方法については後で説明があります。

表示されるウィジェットはこんな感じ。

WP Plugin Info Card Dashboard Widget 表示例

ビジュアルエディタからショートコード作成

ビジュアルエディタの右上にこんな感じのアイコンがあるはずなので、まずはそれをクリックします。

WP Plugin Info Card ビジュアルエディタ Insertボタン

すると画像のようなダイアログがポップアップしますが、全ての項目を埋める必要はなく、赤枠で囲んだ3つの項目さえ設定すればカード表示用のショートコードを作成する事が出来ます。

WP Plugin Info Card ショートコード作成

最低限必要な設定項目

Type of data to retrieve
Plugin(プラグイン)かTheme(テーマ)を選びます
The Slug/ID
プラグイン・テーマのスラッグを入力します。

紹介したいテーマやプラグインのスラッグを調べる時はWordPress公式ディレクトリから該当するテーマ、またはプラグインのページを開いて、URLから以下の部分をコピペする方法が確実です。

プラグインの場合
https://ja.wordpress.org/plugins/この部分がスラッグ/
テーマの場合
https://ja.wordpress.org/themes/この部分がスラッグ/
Layout structure
Card(Default)・Large・WordPressの3つの中から選択します。

必要に応じて設定する項目

以降の項目はカラースキーム以外あまり利用する事は無いかもしれませんが(私は使ってません)わかる範囲でざっくり書いてみるとこんな感じでしょうか。

Color scheme (not available for WordPress layout)
カラースキームを設定します。(レイアウトにWordPressを選択した場合は無効)
Custom image URL
任意の画像を設定したい場合に画像のURLを入力します。
Cards alignment
カードを中央・左・右寄せしたい場合に設定します。
Custom container ID
divタグに使用するIDを設定します。
Custom container margin
コンテナのマージンを設定します。
Clear container float
floatの解除をコンテナの前後どちらでするか指定します。ショートコードをCardレイアウトで連続して貼ると横並びになるので、主にその解除に使うのかな?と思われます。
Cache duration in minutes (num. only)
キャッシュの有効期限を設定出来ます。
Load data async. with AJAX
プラグインのデータを非同期でロードします。
Single value to output
表示したい項目を設定出来ます…が、必要な項目は全て記述する必要があるので面倒…と言うか設定内容をミスると何も表示されなくなるので要注意です。

ベースとなるショートコードを作ったあとはコピペで

自分がいつも使うパターンさえ決まってしまえば先ほどのアイコンから毎回カードを作成しなくても、ショートコードをクイックタグにでも登録しておいて、スラッグだけコピペすると使い勝手が良いです。

カラースキームの種類

デフォルトも含めると全部で11種類あって、プラグインの設定画面からデフォルトのカラースキームを設定しておくか、カード作成時に個別で指定する事が可能です。レイアウトがWordPress以外、つまりCardとLargeの時にカラースキームは有効ですが、以下の画像の赤枠で囲んだ部分とホバーした時にうっすらと色が変わる部分に影響します。

カラースキーム対応箇所(Card)

WP Plugin Info Card カラースキームによって変わる部分 Cardレイアウト

カラースキーム対応箇所(Large)

WP Plugin Info Card カラースキームによって変わる部分 Largeレイアウト

本当はここでカラースキーム一覧的なものを作ろうかと思いましたが、さすがに11種類もあると画像だけで更にページが重くなってしまうので、そこは各自で確認していただくという事でひとつよろしくお願いしたいと思います。

気に入った色が無ければCSSで指定…と思ったら、読み込み順によるものか追加CSSやstyle.cssからではimportant指定が無いと反映されないようなので、AMP対応が必要無いならそうするか、直接プラグインのCSSをイジるか、諦めて用意されたカラースキームから選ぶかの三択になりそうです。

ちょっと気になったところ

レイアウトをWordPressにした場合、テーマ・プラグイン名の部分にH3タグを使っているせいで、TOC+(Table of Contents Plus)の目次にそれが入ってしまう(Luxeritasは大丈夫でした)事と、H3タグのスタイル(フォントやボーダーなど)が適用されてしまうというものです。

当エントリー内の画像でレイアウトがWordPressのサンプルも、よく見るとタイトル左側にグレーのボーダーが入っているのがわかるのではないでしょうか。

当サイトではAMP対応も考慮してレイアウトはLargeのみを使用する事にしたので、その件に関しては対応を考えていませんが、レイアウトをWordPressで使用したい方はその点に気をつける必要がありそうです。

WP Plugin Info CardのAMP対応

利用しているテーマによっては表示がどうのこうのと言う以前に、プラグイン自体がAMPページで利用出来ない可能性もあります。その場合はショートコードがそのまま表示されてしまう事になるので、公開する前にAMPページの確認も念入りにしておきましょう。

仮にAMPページでプラグイン本体は有効だとしてもプラグイン用のCSSが適用されないので、本当に最低限の表示(多少なりともCSSでイジらないとただ表示されてるだけというレベル)だと割り切るか、このプラグインを使用したエントリーはAMP無効にするのもありかと思います。

私は前者をとって最低限の表示で対応する事にしました。

Luxeritasの設定

当サイトで利用しているWordPressテーマLuxeritasではカスタマイザーからWP Plugin Info CardをAMPで有効化する事で利用可能になります。さすがにLuxeritasでもこれを忘れるとAMPページにショートコードがそのまま表示される事になるので注意しましょうね?

Luxeritas カスタマイザー AMP

Luxeritas カスタマイザー WP Plugin Info CardをAMPで有効化

当サイトのAMP用CSS

レイアウトはLargeのみの使用を前提に、表示項目をいくつか非表示にしてマージンの調整をした程度ですが、何もしないよりはマシかな?といった感じにはなっていると思います。

WP Plugin Info Card レイアウトLargeのみ対応 for Luxeritas
/* WP Plugin Info Card レイアウトLargeのみ対応 */
.wp-pic-asset-bg amp-img { margin-bottom: 10px; }	/* 画像下のマージン */
.wp-pic-large p { margin-bottom: 0; }			/* Pタグ下のマージン */
.wp-pic-dl-link,
.wp-pic-half-last { display: none; }			/* リンクを一部非表示 */
Luxeritas以外のテーマでは多少手直しが必要かも?

やたら画像にムダなマージンがあると思ったら画像そのものに余白が含まれてたりとかもうね…こればっかりはさすがに放置するしかありません。AMP対応は諦めが肝心です、いやマジで。

ショートコード作成時のオプションに注意

カードのショートコードを作成する時にalignmentmarginを設定すると、styleで埋め込まれるのでAMPエラーになってしまいます。なのでその辺りの調整が必要な場合はCSSで対応しましょう。

プラグイン公式ドキュメント

私のわかる範囲でひと通り説明したつもりですが、よくわからない部分があればプラグイン公式のドキュメントにも目を通していただければと思います。
参考WP Plugin Info Card Documentation and examples

プラグインWP Plugin Info Cardの紹介でした

私と同じようにWordPress関係の記事を書く事がある方にはこのプラグイン結構オススメではないかと思います。当サイトでも公式ディレクトリからのテーマ・プラグイン紹介の際は全てこのプラグインを利用していく予定です。