BLOG

すごく高機能な「VK All in One Expansion Unit」プラグイン

| WordPress、WordPressプラグイン

今回は「VK All in One Expansion Unit」という高機能なプラグインをご紹介！
どんなことが出来るかというと

  1. Bootstrap の CSS（grid/button/tableのみ）を出力
  2. fontawesome link タグを出力
  3. ファビコン設定
  4. タイトルタグの書き換え
  5. メタキーワードを出力
  6. メタディスクリプションタグを出力
  7. ソーシャルメディア連携
  8. Google Analytics
  9. ウィジェット
  10. CSSカスタマイズ
  11. 子ページの一覧表示
  12. 先祖階層からの子ページリスト表示
  13. お問い合わせ
  14. HTMLサイトマップの表示
  15. Call To Action
  16. 広告の挿入
  17. 関連記事を表示
  18. アイキャッチ画像自動挿入
  19. TinyMCE スタイルタグ
  20. 管理バーメニュー
  21. カスタム投稿タイプマネージャー

と、こんなにいっぱいのことが出来る！
ちょっと出来すぎて、逆に難しいんじゃない？って思う人もいるかもですね。
でも、設定は意外と簡単です。

機能の簡単な説明

Bootstrap の CSS（grid/button/tableのみ）を出力

BootstrapのCSSを読み込むためのタグを html head 内へ出力します。使用中のテーマ（Lightningなど）やプラグインで Bootstrap を既に読み込んでいる場合はチェックを外して下さい。

fontawesome link タグを出力

fontawesome を読み込むための link タグを html head 内へ出力します。使用中のテーマやプラグインで fontawesome を既に読み込んでいる場合はチェックを外して下さい。

ファビコン設定

ブラウザでページを表示した際にタブやウィンドウのタイトルに表示されるアイコン（ファビコン）を設定します。

タイトルタグの書き換え

head title タグ内へ出力される内容を VK EX Unit のルールで出力します。 ( VK EX Unit 側で wp_title() をフィルターフックでカスタマイズ ) 使用中のテーマやプラグインで title タグの内容を出力する場合はチェックを外して下さい。

メタキーワードを出力

ヘッダーにメタキーワードを出力します。

メタディスクリプションタグを出力

投稿画面「抜粋」欄に入力されたテキストを meta description タグとして html head 内へ出力します。使用中のテーマやプラグインで meta description タグを出力している場合はチェックを外して下さい。

ソーシャルメディア連携

  • OG タグを html head 内へ出力します。
  • Twitter カードタグを html head 内へ出力します。
  • ソーシャルブックマークボタンを表示します。
  • Facebookページプラグインウィジェット
  • Follow me box を記事コンテンツ下のエリアへ表示します。
    Main setting page から個別に機能を停止する事ができます。

Google Analytics

Google アナリティクスのトラッキングコードを出力します。有効化した後「設定」のリンクより設定画面へすすみ Google アナリティクス ID を入力して下さい。使用中のテーマやプラグインで Google アナリティクスのトラッキングコードを埋め込む場合はチェックを外して下さい。

ウィジェット

以下の機能を持ったウィジェットを追加します。各ウィジェットの設定は「外観」→「ウィジェット」の設定画面より行って下さい。

  • VK_最新記事 – 最新記事タイトルのリンクテキストと日付を表示します。
  • VK_固定ページ本文 – 固定ページのコンテンツ部分をウィジェットに表示します。
  • VK_プロフィール – ウィジェットに入力されたプロフィールを表示します。
  • VK_FB Page Plugin – Facebook ページプラグインを表示します。
  • VK_3PR エリア – 3PR エリアを表示します。
  • VK_カテゴリー/タグ リストカテゴリ・タグまたは、フォーマットリストを表示します。
  • VK_アーカイブリストアーカイブの一覧を表示します。月ごともしくは年ごとでの表示。また、ポストタイプを選択できます。

CSSカスタマイズ

テーマデザインをカスタマイズする CSS を管理画面より追加できるようになります。追加する CSS コードは「VK Ex Unit」→「CSS カスタマイズ」の画面にて入力して下さい。

子ページの一覧表示

指定した固定ページの下部へ、その固定ページの下層子ページの「ページタイトル / サムネイル / 抜粋文 / 該当ページへのリンク」をセットで一覧表示します。

先祖階層からの子ページリスト表示

現在のページの先祖階層からの子ページリストをページ本文の下に表示します。

お問い合わせ

お問い合わせ情報を本文の下に表示する

HTMLサイトマップの表示

指定した固定ページにHTMLサイトマップを表示します。

Call To Action

投稿内容の最後にCTAを表示します。
CTAは「Call To Action」の略で、ユーザーにとってもらいたい行動へ誘導するための情報を表示します。
例えば、無料サンプルのダウンロードページへの誘導のためのテキストやリンクボタンなどです。

広告の挿入

記事に広告を挿入します

関連記事を表示

関連記事を記事コンテンツ下のエリアへ表示します。

アイキャッチ画像自動挿入

アイキャッチ画像を本文の最初に表示します。各記事毎に非表示にする事も出来ます。

TinyMCE スタイルタグ

スタイルタグにTinyMCEエディタを追加する

管理バーメニュー

ExUnitのメニューを管理バーに表示する

カスタム投稿タイプマネージャー

カスタム投稿タイプやカスタム分類を追加します。

とザックリと説明を書きましたというかプラグイン設定ページの情報を移しました(´∀｀)

髭人サイトで使っている機能の説明

この中で、使っている機能を説明したいと思います。
使っていない機能もすごく便利なのですが、現状のウチのサイトには使っていないというだけです。

設定画面はこんな感じです。
必要な機能にチェックを入れて保存をする。
チェックを入れるとメイン設定なるものがあるので、そこで詳しい設定ができます。

メタキーワードを出力

現状メタキーワードはgoogleさんは「重要視してないよ」ってことなんですが、他にも検索エンジンはあるし、今後やっぱり有効だよね！って言われた時に設定し直すのもいやなので、使っています。

設定方法は、入力欄があるので,(カンマ)区切りで入れていくだけ。簡単！

メタディスクリプションタグを出力

これはページの設定なので、重要ですよね。
入力するところも何もないので特に設定はなしですね。

ソーシャルメディア連携

いまや、絶対に設定しないとダメなやつ！

  • Facebook AppIDの入力
    入力欄の下にあるリンクからAppIDを取得し、入力！
    わかりやすく書いてあるページがあったのでご紹介
    【2017年版】Facebook App ID（アプリID）の取得方法
  • デフォルトのOGPイメージの設定
    アイキャッチを設定していないページなどで使うために設定をする。
    設定ボタンをおしたら画像を選べるので、改めてアップするか、アップしてある画像を選ぶだけ！
  • twitterアカウントの設定
    アカウントを書くだけ！
  • OGタグの出力
    チェックを入れるとOG関連のタグが出力されます！チェックチェック
  • Twitterカードタグの出力
    チェックをいれるとTwitterカードタグが出力される！これチェックチェック
  • ソーシャルボタン(シェアボタン)の設定
    シェアボタンを表示するかしないか。
    表示する場合は、チェックを入れておく。
    固定ページ、投稿ページに表示させたくない場合はチェックを！そんな人おるのか？
    ページごとでも設定は可能なので記事IDをいれてみるといい。
  • Follow me box
    フォローミーのボタンがでるよ。

Google Analytics

アナリティクスのタグを出力してくれる。最近は、ほぼ使ってるんじゃないでしょうか。
タグをはっつけるんじゃなくIDのみ入力。
UA-103031898-1みたいなのがあるので、「103031898-1」のみ入力。
種類は、最近だったらデフォルトのユニバーサルアナリティクスでいいと思う。
昔からのを使う場合（ユニバーサルにアップしてない場合）はノーマルを選択するといいのかも。
ユニバーサルにしている方が、出来ることが増えるので、しておいたほういいと思います。

広告の挿入

広告を使っている人は、便利ですよ。
記事の直前 / moreタグの直後 / 記事の最後に広告を挿入できます。
２個づつ枠がありますが、２個のときだけ、分けてみるとよいですよ。１個・３個以上の場合は、１個めに入力するといいみたいですね。
その場合は、CSSで調整は必要になるかと思います。

２個の場合はこんな感じで表示されます。

関連記事を表示

その記事に関連している記事が表示されます。
こちらも設定することは特にない！

こんな感じで表示されます。

記事数がまだ少ないから３つ以上のときはどうなるんだろう(´∀｀)

アイキャッチ画像自動挿入

アイキャッチ画像が記事のトップに挿入されます。
ってことでthe_content();でアイキャッチ画像も表示ができるということですね

まとめ

このプラグインを使う前にこの機能で設定できることをぶち込んでたなどの理由で、使っていない機能はありますが、プラグイン一つでしかも簡単に設定ができるということで、このプラグインはすごく便利です。
今後も使っていくプラグインになると思います。
しかも、このプラグイン結構動作も軽いみたいです。使う前と後で速度的なところはかわった感じはしないです。
プラグインはたくさん使っちゃうと速度に影響されちゃうので高機能で軽いプラグインは助かりますね。

ブログ一覧へ
CONTACT
PAGE TOP