どうも段田です。
最近、環境が変わり、自分で料理する機会が増えています。
最近じゃ クックパッド > 食べログ になりつつあります。
暴飲暴食がモットーなのに、規則正しい生活になってきました。
気を引き締めて悪玉コレステロールを貯めていかないといけませんね。
今回はWordPressプラグインの紹介をしたいと思います。
プラグイン概要
今回紹介するのは「WP Plugin Info Card」プラグインです。
これがどういうプラグインなのかは下記の記事を見ていただくとわかります。
この記事の中でプラグインの紹介をしているのですが、
下記のような表示で紹介しています。
この部分は「WP Plugin Info Card」プラグインを使って表示しています。
このプラグインが用意したショートコードを使うだけで、
上記のようなシャレオツなデザインのコンテンツカードを生成してくれます。
WordPressプラグインを紹介するときには結構便利だと思います。
※ただしWordPressの公式サイトに登録されているプラグインのみ利用可能です。
導入、設定、使い方を説明したいと思います。
導入手順
ダウンロード
まずは「WP Plugin Info Card」プラグインをダウンロードします。
ここからダウンロードするか
もしくは使っているWordPress管理画面のプラグインメニューからプラグイン新規追加画面にいきましょう。
インストール
次にインストールです。
ファイルをダウンロードした方
- ダウンロードしたらファイルを解凍し、FTPもしくはSFTPを使って、WordPressのpluginフォルダに設置する
- 管理画面のプラグインページから「WP Plugin Info Card by b*web」を有効化にする
プラグイン新規追加画面からきた方
- 検索フォームに「WP Plugin Info Card」を入力して検索
- 「WP Plugin Info Card」が表示されるので、「いますぐインストール」をクリックする
- インストールが完了したら、プラグインを有効化にする
インストールはこれで完了です。
使い方
インストールが完了すると直ぐに使えます。
投稿画面にいき、ビジュアルエディタを開くと
このようにボタンが追加されています。
ボタンをクリックすると
このようにポップアップが表示されます。
Type of data to retrieveでプラグインかテーマを選択します。
(サラッと書きましたが、公式テーマも利用可能なのです。)
The Slug/IDにプラグイン・テーマのスラッグ名を入れます。
スラッグ名はWordPressプラグインページのURLに含まれています
(下記参照)
【プラグイン】
“https://wordpress.org/plugins/ここの部分がスラッグ/”
【テーマ】
“https://wordpress.org/themes/ここの部分がスラッグ/”
各項目を設定してOKボタンを押すとショートコードが追加されます。
これで保存すると記事ページではプラグインのコンテンツカードが表示されます。
|
1 |
[wp-pic type="plugin" slug="wp-plugin-info-card" ] |
簡単ですね！
また、テーマも
|
1 |
[wp-pic type="theme" slug="twentysixteen" layout="large" ] |
このように表示されます。
設定項目
ショートコードの各設定値と先ほど説明した画面ポップアップの設定値についてまとめました。
| ポップアップ項目 | ショートコード項目 | 設定値 | 概要 |
|---|---|---|---|
| Type of data to retrieve | type | plugin, theme | 利用する形式を選択します。プラグインもしくはテーマが選択可能 |
| The Slug/ID | slug | 【プラグイン】 “https://wordpress.org/plugins/ここの部分/” 【テーマ】 “https://wordpress.org/themes/ここの部分/” |
プラグイン・テーマのスラッグ名を入れます。 |
| Layout structure | layout | card, large | 表示するレイアウトを指定します。レイアウトはcardかlargeのどちらかを選択 |
| Color scheme | scheme | default,scheme1~scheme10 | カードのカラーパターンを設定します。１０種類ほどあり。 |
| Custom image URL | image | 指定の画像URL | カードで使うロゴ画像を変更できます。画面で設定するときはアップロードから設定可能。 |
| Cards alignment | align | center, left, right | 配置を指定します。中央、右寄せ、左寄せから選択。Do not specifyで未設定。 |
| Custom container ID | containerid | 任意のID名 | カードを表示する際にカード内のdiv要素に独自のID名を設定可能。デフォルトはwp-pic-プラグイン名。 |
| Custom container margin (15px 0) | margin | 15px 0等 | カードに余白を指定します。設定はcss同様「15px 0」という形式で指定。デフォルトは余白なし。 |
| Clear container float | clear | before,after | floatのクリア処理をカードの前後で挿入するか指定します。デフォルトは指定なし。 |
| Cache duration in minutes (num. only) | expiration | 720 | カードのキャッシュ時間を指定します。秒数指定。デフォルトは720秒 |
| Load data async. with AJAX | ajax | yes, no | カードを非同期で読み込むか選択可能。デフォルトは未使用。 |
| Single value to output | custom |
【プラグイン】 url, name, icons, banners, version, author, requires, rating, num_ratings, downloaded, last_updated, download_link 【テーマ】 url, name, version, author, screenshot_url, rating, num_ratings, downloaded, last_updated, homepage, download_link |
出力する項目を指定します。 |
カードについて
上記の設定項目を踏まえて、基本デザイン、各カラーパターン、配置指定したカードを見ていきたいと思います。
あとcustom項目の１例を載せておきます。
基本デザイン
とりあえず基本から。
カード(card)
縦の長方形デザインです。
上からロゴ画像、プラグイン名、作者名、レーティングボタン、ダウンロードボタン、プラグインバージョン、More Infoボタンで構成しています。
More Infoボタンをクリックするとカードが反転して、
プラグイン画像、ダウンロードリンク、現在のバージョン、最終更新日が表示されます。
ラージ(large)
横の長方形デザインです。
上からプラグイン画像、プラグイン名、ロゴ画像、作者名、現在のバージョン、ダウンロードリンク、レーティングボタン、ダウンロードボタン、プラグインバージョンで構成しています。
カラーパターン(scheme)
設定項目「scheme」の各デザインを見てみましょう
default
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="default"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="default"] |
scheme1
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme1"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme1"] |
scheme2
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme2"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme2"] |
scheme3
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme3"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme3"] |
scheme4
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme4"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme4"] |
scheme5
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme5"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme5"] |
scheme6
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme6"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme6"] |
scheme7
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme7"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme7"] |
scheme8
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme8"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme8"] |
scheme9
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme9"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme9"] |
scheme10
|
1 2 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" scheme="scheme10"] [wp-pic type="plugin" slug="wordpress-seo" layout="large" scheme="scheme10"] |
配置（align）
設定項目「align」の各デザインを見てみましょう。
当サイトのコンテンツ内の幅の関係からレイアウトはcardのみにしています。
また、そのまま表示させた場合、float部分で崩れてしまったので、それぞれfloat項目指定でクリアしています。
また、スマホでは画面サイズの関係ですべて同じ位置で表示されているかもしれません。
中央（center）
|
1 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" align="center" clear="after"] |
左寄せ（left）
|
1 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" align="left" clear="after"] |
右寄せ（right）
|
1 |
[wp-pic type="plugin" slug="wordpress-seo" layout="card" align="right" clear="after"] |
custom
customで用意された項目を指定すると、項目の情報が表示されます。
下記ではプラグインの名前とダウンロード回数を表示しています。
|
1 |
[wp-pic slug="wordpress-seo" custom="name"] プラグインは [wp-pic slug="wordpress-seo" custom="downloaded"] 回ダウンロードされました |
Yoast SEO プラグインは 70,215,691 回ダウンロードされました
まとめ
というわけで、プラグインの説明は以上になります。
各設定項目は抜粋した形になってしまい、申し訳ないです。
（ページ量考慮しました・・・）
今後、段田商会でプラグインを紹介する際は「WP Plugin Info Card」を使っていきます。
みなさんも自分のWordPressでプラグインの紹介などする場合は、是非とも使ってみてください。
それでは〜。