wordpress WordPress プラグイン Visual Composer

2014年7月28日

用意されているモジュールをドラッグ&ドロップで簡単にページレイアウトができるプラグイン Visual Composer (WordPress 用のページビルダー)のインストールや基本的な使い方についてのメモ。

目次

VisualComposer_001

オンライン・ドキュメント

Visual Composer の特徴

  • HTML や CSS の知識がなくてもモジュールをドラッグ&ドロップで簡単にページレイアウトが可能
  • 固定ページ、投稿、カスタム投稿タイプに対応
  • とのようなテーマにも対応(100% ではないと思う)
    (また、Frontend Editor の機能はテーマによっては使用できない。バグ?)
  • 用意されているモジュール(40以上あり)はデフォルトのレイアウトや色が設定されているが、それらを変更することが可能
  • レスポンシブ対応

インストール

このプラグイン:Visual Composer は有料($25)なので CodeCanyon から購入する必要がある。

既存のサイトにインストールをする場合は、万が一のためにバックアップを取っておくと良いと思う。

購入してダウンロードした Zip ファイルを解凍すると以下のようになっている。

VisualComposer_00

管理画面の左側の「プラグイン」をクリックして「新規追加」をクリック

VisualComposer_01

「アップロード」をクリック

VisualComposer_02

「参照」をクリックして、ダウンロードした中の「js_composer.zip」を選択

VisualComposer_03

「今すぐインストール」をクリック

VisualComposer_04

インストールが完了したら「プラグインを有効化」をクリック

VisualComposer_05

有効化すると、左側メニューの「設定」の中に「Visual Composer」が表示される。

VisualComposer_06

ライセンスのアクティベーション

このプラグインの自動更新やサポートを受けるにはライセンスをアクティベート(有効化)する必要がありる。

1つの WordPress サイトに1つのライセンスが必要。ライセンスの有効化は Visual Composer の Product License タブで行う。

VisualComposer_07

以下を入力して設定を保存。

  • Envato Username:購入時に作成したアカウントのユーザー名
  • Secret API Key:作成したアカウントでログインして取得

    VisualComposer_08

  • Visual Composer License Key:作成したアカウントでログインして取得

    VisualComposer_09

設定

設定は管理画面の左側メニュー「設定」→「Visual Composer」の各タブをクリックして設定。

VisualComposer_10

General Settings

Content types で Visual Composer を使用するページの種類を指定。

Visual Composer を使用するページの種類:page(固定ページ)、post(投稿)等にチェックを入れる。カスタム投稿タイプが設定されている場合は、それらもここに表示される(以下の画像では、mc-events, events, news)。

VisualComposer_11

またユーザーの種類によって Visual Composer の使用を制限できる。ユーザーグループごとに以下のオプションが設定可能。

  • Show Visual Composer & default editor(Visual Composerと通常のエディタを表示)
  • Show only Visual Composer (Visual Composer のみ表示)
  • Don’t allow to use Visual Composer(Visual Composer を表示しない)

VisualComposer_12

Design Options

Visual Composer のモジュール(要素)のスタイルを設定できる。

独自のスタイルを設定するには「Use custom design options」にチェックを入れて、それぞれの項目を設定。

VisualComposer_13

また「Custom CSS」タブでは独自の CSS を設定可能。「Shortcodes」タブでは独自のショートコードを Visual Composer で使用できるようにすることが可能。

編集画面(モード)の切り替え

General Settings で Content types を指定したページでは、エディター上部に以下のボタンが表示される。

VisualComposer_14

Backend Editor

「Backend Editor」をクリックすると固定ページや投稿の編集画面で Visual Composer を使って編集することができる。

通常の編集画面に戻るには「CLASSIC MODE」をクリック。

VisualComposer_15

Frontend Editor

「Frontend Editor」をクリックするとそのページの実際の表示に近い編集画面で Visual Composer を使って編集することができる。

「Backend Editor」をクリックすると「Backend Editor」での編集画面に戻り、右側の「X」印をクリックするとプレビュー表示になる。またモニターのアイコンをクリックすると色々なサイズのモニターのアイコンが表示され、選択したサイズでの表示で編集可能。

VisualComposer_16

Backend Editor

「Backend Editor」をクリック。

新規に作成した投稿(まだ何も書いていない)で「Backend Editor」をクリックすると以下のように表示される。

VisualComposer_17

No content yet! You should add some…
コンテンツがないので何か追加してください。。。

1 This is a visual preview of your page. Currently, you don’t have any content elements. Click or drag the button Add element on the top to add content elements on your page. Alternatively add Text block with single click.
1.これはプレビューです。現在何もコンテンツがありません。「+ Add element」をクリックまたはドラッグしてコンテンツの要素を追加してください。または「Text block」をクリックしてテキストを追加することもできます。

2 Click the pencil icon on the content elements to change their properties.
2.追加した要素のプロパティを変更するには鉛筆のアイコンをクリックしてください。

コンテンツ(要素)の追加

「行」を追加してレイアウト(何列にするか)を設定してから要素を追加するか、または「+ Add element」をクリックして直接要素を追加。

「行」を追加するには「Add row」をクリックするか、「+ Add element」をクリックして表示される要素の中から「Row」を選択。

VisualComposer_20

「Add row」をクリックすると行が追加される。

VisualComposer_21

または

VisualComposer_19

「+ Add element」をクリックすると、以下のようなポップアップが表示される。

VisualComposer_18

「Row」を選択すると行が追加される。

VisualComposer_21

「行」のアイコンにマウスオーバーすると行の種類(何列にするか)が表示されるので選択できる。

VisualComposer_22

以下は「2列」を選択した場合。

VisualComposer_23

追加した行に要素を追加するには、行の中のプラスマークのあたりをクリックすると、「+ Add element」をクリックしたのと同じポップアップが表示されるので、追加したい要素を選択する。

VisualComposer_24

Add element

「+ Add element」をクリックするか、または追加した行の中のプラスマークをクリックすると、以下のようなポップアップが表示される。

画面上部の Content, Social, Site Structure, New Elements, WordPress Widgets のいずれかをクリックすると表示される要素をフィルタする(絞り込む)ことができる。

VisualComposer_25

また Contact Form 7, Layer Slider, Revolution Slider, Gravity Forms のプラグインがインストールされているとそれらもこのポップアップウィンドウに表示されて追加することができる。

あとは自由に追加したい要素を選択して、簡単にいろいろな要素を追加していくことができる。

追加した要素の編集、削除、複製

それぞれの行に追加した要素を編集、削除、複製するには、それぞれの行の右上のアイコンをクリック。

VisualComposer_26

  • 鉛筆のアイコン:行の編集
  • ファイルのアイコン:行の複製
  • x印:行の削除

テンプレートの作成

よく使う構成はテンプレート(雛形)として保存しておくことで、次回からそれを呼び出して利用することができる。

テンプレートとして保存するには「Templates」にマウスを置くと「Save current page as a Template(このページをテンプレートとして保存)」が表示されるのでクリックして名前を付けて保存する。

VisualComposer_27

カスタム CSS

「</> CSS」ボタンをクリックすると、個々のページや投稿に独自の CSS を設定することが可能。このボタンをクリックして設定した CSS はこのページにのみ適用される。

VisualComposer_28

「</> CSS」ボタンをクリックすると、以下のようなポップアップウィンドウが表示されるので CSS を記述する。

VisualComposer_29

Frontend Editor

編集画面で「Frontend Edito」をクリックすると、ライブビューの編集画面が表示される。

但し、使用しているテーマによってはロード中のアイコンが表示され続けて編集画面が表示されないこともあるみたい。

VisualComposer_30

画面上部の「+」印をクリックすると、「Backend Editor」で「+ Add element」をクリックして表示される要素と同じものがポップアップ表示されるので「Backend Editor」同様に要素を追加して編集することができる。

VisualComposer_31

追加されている要素の上にマウスを持っていくと、「行の追加」や「列の追加」、「削除」、「コンテンツの編集(鉛筆のアイコン)」などのオプションが表示されるので、クリックして編集することができる。

VisualComposer_32

また、画面上部には「CSS(独自の CSS の設定)のボタン」や「Backend Editor に戻るボタン」、「投稿を保存」するボタンなどが表示される。

VisualComposer_33

また、モニターのアイコンをクリックすると異なるデバイスでの表示(レスポンシブ・プレビュー)が確認できる。

VisualComposer_34

 

開示情報

この記事には製品へのアフィリエイトの外部リンクが含まれています。そのリンクを通じて製品を購入された場合、当サイトにコミッションが入る可能性があります。

アフィリエイトリンクを通して購入をされたくない場合は、検索等で目的の製品のページをお探しください。