[WordPressプラグイン] 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種類から選択出来ます。
https://ja.wordpress.org/plugins/wp-plugin-info-card/Card
Large
WordPress
WordPressテーマの表示
こちらもプラグインと同様にレイアウトはCard（デフォルト）・Large・WordPressの3種類から選択可能です。
Card
Large
WordPress
プラグインのインストールと有効化
プラグインのインストールと有効化に関してはわかる方には特に説明不要かと思います。プラグイン名をキーワードにして検索する場合はWP Plugin Info Cardをコピペすると、一覧の先頭に当プラグインが表示されるのでそのままインストール＆有効化するだけです。
実はプラグインのインストール方法がまだよくわかっていない、という方にはこちらのエントリーがお役に立てば幸いです。
https://unlimitedchaos.net/uc/how-to-install-wordpress-plugi...以降はWP Plugin Info Cardをインストールして有効化まで済んだものとして話を進めていきます。
プラグインの設定
設定画面では特にする事は無いのでとりあえずはそのままでもOKです。強いて言えばデフォルトのカラースキームを設定したい場合にイジるくらいかと思いますが、ひとまずざっくりと説明しておきます。
WP Plugin Info Cardの設定画面
ダッシュボードから設定 > WP Plugin Info Cardで設定画面に入ります。
Shortcode parameters
ビジュアルエディタから各項目を入力・設定する事でカードを表示する為のショートコードを作成出来ますが、ショートコードのパラメータを直接記述しても構いません。この画面にはそのパラメータの簡単な説明が書いてあります。
公式サイトのドキュメントやショートコードのサンプルが見たい場合はDocumentation and examplesのリンク先に説明があります。
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
ぶっちゃけこの機能は要らないように思いますが一応書いておきますと、お気に入りのテーマとプラグインの情報をダッシュボードに表示しておけるというものです。
- Enable dashboard widget
- ダッシュボードウィジェットを有効化します。
- Ajaxify dashboard widget
- ダッシュボードウィジェットを非同期でロードします
- List of items to display
- リストに表示するテーマ・プラグインのスラッグを設定します。
スラッグを調べる方法については後で説明があります。
表示されるウィジェットはこんな感じ。
ビジュアルエディタからショートコード作成
ビジュアルエディタの右上にこんな感じのアイコンがあるはずなので、まずはそれをクリックします。
すると画像のようなダイアログがポップアップしますが、全ての項目を埋める必要はなく、赤枠で囲んだ3つの項目さえ設定すればカード表示用のショートコードを作成する事が出来ます。
最低限必要な設定項目
- 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）
カラースキーム対応箇所（Large）
本当はここでカラースキーム一覧的なものを作ろうかと思いましたが、さすがに11種類もあると画像だけで更にページが重くなってしまうので、そこは各自で確認していただくという事でひとつよろしくお願いしたいと思います。
気に入った色が無ければCSSで指定…と思ったら、読み込み順によるものか追加CSSやstyle.cssからではimportant指定が無いと反映されないようなので、AMP対応が必要無いならそうするか、直接プラグインのCSSをイジるか、諦めて用意されたカラースキームから選ぶかの三択になりそうです。
ちょっと気になったところ
レイアウトをWordPressにした場合、テーマ・プラグイン名の部分にH3タグを使っているせいで、TOC+（Table of Contents Plus）の目次にそれが入ってしまう（Luxeritasは大丈夫でした）事と、H3タグのスタイル（フォントやボーダーなど）が適用されてしまうというものです。
当サイトではAMP対応も考慮してレイアウトはLargeのみを使用する事にしたので、その件に関しては対応を考えていませんが、レイアウトをWordPressで使用したい方はその点に気をつける必要がありそうです。
WP Plugin Info CardのAMP対応
利用しているテーマによっては表示がどうのこうのと言う以前に、プラグイン自体がAMPページで利用出来ない可能性もあります。その場合はショートコードがそのまま表示されてしまう事になるので、公開する前にAMPページの確認も念入りにしておきましょう。
仮にAMPページでプラグイン本体は有効だとしてもプラグイン用のCSSが適用されないので、本当に最低限の表示（多少なりともCSSでイジらないとただ表示されてるだけというレベル）だと割り切るか、このプラグインを使用したエントリーはAMP無効にするのもありかと思います。
私は前者をとって最低限の表示で対応する事にしました。
Luxeritasの設定
当サイトで利用しているWordPressテーマLuxeritasではカスタマイザーからWP Plugin Info CardをAMPで有効化する事で利用可能になります。さすがにLuxeritasでもこれを忘れるとAMPページにショートコードがそのまま表示される事になるので注意しましょうね？
当サイトのAMP用CSS
レイアウトはLargeのみの使用を前提に、表示項目をいくつか非表示にしてマージンの調整をした程度ですが、何もしないよりはマシかな？といった感じにはなっていると思います。
/* 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; } /* リンクを一部非表示 */
やたら画像にムダなマージンがあると思ったら画像そのものに余白が含まれてたりとかもうね…こればっかりはさすがに放置するしかありません。AMP対応は諦めが肝心です、いやマジで。
ショートコード作成時のオプションに注意
カードのショートコードを作成する時にalignmentやmarginを設定すると、styleで埋め込まれるのでAMPエラーになってしまいます。なのでその辺りの調整が必要な場合はCSSで対応しましょう。
プラグイン公式ドキュメント
私のわかる範囲でひと通り説明したつもりですが、よくわからない部分があればプラグイン公式のドキュメントにも目を通していただければと思います。
参考WP Plugin Info Card Documentation and examples
プラグインWP Plugin Info Cardの紹介でした
私と同じようにWordPress関係の記事を書く事がある方にはこのプラグイン結構オススメではないかと思います。当サイトでも公式ディレクトリからのテーマ・プラグイン紹介の際は全てこのプラグインを利用していく予定です。