SWELLでVK All in One Expansion Unitプラグインを使用する

コーポレートサイトを飛躍的に作りやすくするために、SWELLでVK All in One Expansion Unitプラグインを使用してみます。

本プラグインを使用すると、かゆいところに手が届きやすくなります。

ただし、そのままでは表示が崩れる部分がありますのでCSSで調整を行います。本記事はそのCSSサンプル付きです。

この記事は未完成で、後に需要の高そうな子ページ一覧の部分やカスタム投稿の部分も更新します。

インストールと有効化

プラグインは以下のURLからダウンロードもしくは、プラグイン > 新規追加で検索します。

WordPress.org

VK All in One Expansion Unit This plug-in is an integrated plug-in with a variety of features that make it powerful your web site.

ExUnitを使用する上でのお作法

ExUnitを使用する上でのオススメ（お作法）は、まずインストールして有効化した後に、一旦すべての機能をOFFにすることです。理由は、SEO機能などの被っている機能があるからです。

ExUnitに含まれている機能

一部ですが、以下の機能があります。

• ウィジェット拡張
• ブロックの追加
  • HTMLサイトマップ
  • 古ページ一覧
  • お問い合わせ先（電話・メール）表示機能
• Font Awesomeアイコン表示機能（SWELL本体と被っている）
• CSSカスタマイズ機能
• ソーシャルメディアブックマーク機能（SWELL本体と被っている）
• SEO機能（SEO SIMPLE PACKプラグインなどと被っている）
  • Google Analyticsタグ
  • メタキーワード、メタディスクリプション、タイトルタグ機能
  • noindex出力機能
  • OGタグ、Twitterカードタグ機能
• カスタム投稿管理機能

その他の機能は、公式サイトから確認してください。

お問い合わせ先表示

VK EXUNIT BLOCKS > お問い合わせから、以下のようなブロックの呼び出しが可能です。

この部分のコンテンツ設定は、ExUnit > メイン設定から行います。

SWELL運用上の注意点

• SWELL設定 > Font Awesomeから、Font Awesomeを読み込む設定にしておきます。
• そのままではボタンが表示されないので、サンプルとして以下のCSSを使用して調節しています。

@media (max-width: 1200px) {
.veu_card .veu_card_inner p {
    margin-bottom: 1.5rem;
}
}
.veu_contact .contact_bt {
background-color: #dd3333;
border-radius: 4px;
text-align: center;
}

HTMLサイトマップ

VK EXUNIT BLOCKS > サイトマップから、以下のブロックの呼び出しが可能です。

ExUnitのHTMLサイトマップからLPを非表示にするカスタマイズ

私は現在LPを構築していないので、以下のCSSをサイトマップの固定ページの カスタムCSS & JSのCSSに挿入して非表示にしています。

.sitemap-post-type-lp {
display :none;
}