Visual ComposerがWPBakeryページビルダーに変わったね
概要
Visual Composerのビデオデモ
プラグインのインストール
既にこのプロセスは多くのサイトで語られているので、Visual Composerのインストールは、他のプラグインのインストールプロセスと変わりません。知らない場合は、以下の手順に従ってください。
- あなたのウェブサイトにログイン
- プラグイン -> 新規追加
- アップロードリンクをクリックします
- プラグインのzipファイルを参照し（それはあなたがCodeCanyonからダウンロードしたアーカイブに配置されている）、ファイルを選択します。ファイル名はjs_composer.zipです。
- 「今すぐインストール」ボタンをクリックしてください
- プラグインがあなたのサーバーにアップロードされてるまで待ちます。
- 「プラグイン有効化」ボタンをクリックしてください
それで完了！
私たちのビデオ・アカデミーを訪問
Visual Composerのインストール方法の詳細なビデオチュートリアル
ビジュアルコンポーザーはあなたがページ、ポストまたは両方のためのVisual Composerを使用する場合のいずれかを選択できます。
今、あなたは[設定]ので設定する事ができます。また、カスタムポストをVisual Composerを使用することができます。方法についてのビデオをVisual Composerの使用量の設定を編集しますで確認する事ができます。
概念
Visual Composerのプラグインをインストールし、有効にした後、あなたのレイアウトの作成を開始することができます。あなたが知っておくべき1つのコンセプト/デザインパターンがあります。
Visual Composerのエディターモードでは、あなたがあなたのページにコンテンツブロックを追加または行に、作業キャンバスにクリックまたはドラッグする必要があります。ボタンで「要素の追加」を行います。
「要素を追加」ボタンをクリックすると、コンテンツ要素の選択メニューが表示されます。コンテンツのブロックは（カテゴリに分類され、すべてを表示、コンテンツ、ソーシャル、構造、WordPressのウィジェット）を追加する事ができます。
行
行が列を持つ論理ブロックにあなたのページを分割するために使用されます。列は後でコンテンツブロックを開催します。行が（例えば1/2 + 1/2、1/3 + 1/3 + 1/3。など）のレイアウトに分割することができます。あなたのページには、行の数に制限はありません。行の位置を変更するには、クリック＆ドラッグを行のドラッグハンドラ（左上行の隅）とドラッグの行の周りの（縦軸）。
カラム
列は、行の一部であり、彼らはその中のコンテンツの要素を保持します。列を並べ替えることができます。クリックして、列（横軸）にドラッグし手追加する事ができます。あなたは、グループの論理グループ内の要素（再配置）で、あなたはマウスでそれらをドラッグすることができます。
以下の行と列を操作する方法のビデオ見てください
コンテンツ要素
コンテンツ要素
これは、作業キャンバス上または列の内側に配置することができます利用可能なコンテンツ要素の一覧です。
ブロックと考えます。これらのブロックを使用して、あなたのレイアウトを構築しています。コンテンツ要素のほとんどは、彼らは鉛筆アイコンをクリックして設定するためのオプションがあります。変更内容を保存するには、保存ボタンをクリックします。
利用可能なコンテンツ要素
- 行
- テキストブロック
- セパレーター
- テキストとセパレーター
- メッセージボックス
- Facebookのボタン
- Tweeterのボタン
- Google+のボタン
- Pinterestのボタン
- FAQ（トグル）
- 単一像
- 画像ギャラリー
- 画像カルーセル
- タブ
- ツアーセクション
- アコーディオン
- 投稿グリッド
- 回転木馬
- 投稿スライダー
- Widgetisedサイドバー
- ボタン
- アクションボタンに呼び出し
- ビデオプレイヤー
- グーグルマップ
- Flickrのウィジェット
- 生のHTML
- 生のjs
- プログレスバー
- 円グラフ
- +ワードプレスに付属しているすべてのデフォルトのウィジェット
サードパーティプラグインのサポート
Visual Composerは、人気のあるサードパーティ製のプラグインをサポートするように拡張されます。現在、以下のサードパーティのプラグインがサポートされています。
- レイヤスライダー
- Slider Revolution
- Contactform7
- Gravityform
作業キャンバス（ページ）にコンテンツ要素を配置した後、この特定のショートコード（コンテンツ要素）で使用可能なオプションを表示するには、鉛筆のアイコンをクリックします。
テンプレート
テンプレートは、要素の定義済みのセットを保存してテンプレートとして、それを次の必要になるときにそれを再利用して時間を節約することができます。テンプレートシステムについての詳細。
テンプレートシステムを最大限に活用するために、お勧めのアドオンを紹介します。Visual ComposerのためのTemplateraアドオン。Templateraはビジュアルコンポーザのためのテンプレートシステムです。
テーマの統合
あなたがテーマの作者であり、あなたのテーマにビジュアルコンポーザを統合する方法を探している場合、このページを参照してくださいテーマの統合。
<?php
/**
* Include the TGM_Plugin_Activation class.
*/
require_once dirname( __FILE__ ) . '/class-tgm-plugin-activation.php';
add_action( 'tgmpa_register', 'my_theme_register_js_composer_plugins' );
/**
* Register the required plugins for this theme.
*
* The variable passed to tgmpa_register_plugins() should be an array of plugin
* arrays.
*
* This function is hooked into tgmpa_init, which is fired within the
* TGM_Plugin_Activation class constructor.
*/
function my_theme_register_js_composer_plugins() {
/**
* Array of plugin arrays. Required keys are name and slug.
* If the source is NOT from the .org repo, then source is also required.
*/
$plugins = array(
// This is an example of how to include a plugin pre-packaged with a theme
array(
'name' => 'WPBakery Visual Composer', // The plugin name
'slug' => 'js_composer', // The plugin slug (typically the folder name)
'source' => get_stylesheet_directory() . '/js_composer.zip', // The plugin source
'required' => true, // If false, the plugin is only 'recommended' instead of required
'version' => '3.7', // E.g. 1.0.0. If set, the active plugin must be this version or higher, otherwise a notice is presented
'force_activation' => false, // If true, plugin is activated upon theme activation and cannot be deactivated until theme switch
'force_deactivation' => false, // If true, plugin is deactivated upon theme switch, useful for theme-specific plugins
'external_url' => '', // If set, overrides default API URL and points to an external URL
)
);
// Change this to your theme text domain, used for internationalising strings
$theme_text_domain = 'tgmpa';
/**
* Array of configuration settings. Amend each line as needed.
* If you want the default strings to be available under your own theme domain,
* leave the strings uncommented.
* Some of the strings are added into a sprintf, so see the comments at the
* end of each line for what each argument will be.
*/
$config = array(
'domain' => $theme_text_domain, // Text domain - likely want to be the same as your theme.
'default_path' => '', // Default absolute path to pre-packaged plugins
'parent_menu_slug' => 'themes.php', // Default parent menu slug
'parent_url_slug' => 'themes.php', // Default parent URL slug
'menu' => 'install-required-plugins', // Menu slug
'has_notices' => true, // Show admin notices or not
'is_automatic' => false, // Automatically activate plugins after installation or not
'message' => '', // Message to output right before the plugins table
'strings' => array(
'page_title' => __( 'Install Required Plugins', $theme_text_domain ),
'menu_title' => __( 'Install Plugins', $theme_text_domain ),
'installing' => __( 'Installing Plugin: %s', $theme_text_domain ), // %1$s = plugin name
'oops' => __( 'Something went wrong with the plugin API.', $theme_text_domain ),
'notice_can_install_required' => _n_noop( 'This theme requires the following plugin: %1$s.', 'This theme requires the following plugins: %1$s.' ), // %1$s = plugin name(s)
'notice_can_install_recommended' => _n_noop( 'This theme recommends the following plugin: %1$s.', 'This theme recommends the following plugins: %1$s.' ), // %1$s = plugin name(s)
'notice_cannot_install' => _n_noop( 'Sorry, but you do not have the correct permissions to install the %s plugin. Contact the administrator of this site for help on getting the plugin installed.', 'Sorry, but you do not have the correct permissions to install the %s plugins. Contact the administrator of this site for help on getting the plugins installed.' ), // %1$s = plugin name(s)
'notice_can_activate_required' => _n_noop( 'The following required plugin is currently inactive: %1$s.', 'The following required plugins are currently inactive: %1$s.' ), // %1$s = plugin name(s)
'notice_can_activate_recommended' => _n_noop( 'The following recommended plugin is currently inactive: %1$s.', 'The following recommended plugins are currently inactive: %1$s.' ), // %1$s = plugin name(s)
'notice_cannot_activate' => _n_noop( 'Sorry, but you do not have the correct permissions to activate the %s plugin. Contact the administrator of this site for help on getting the plugin activated.', 'Sorry, but you do not have the correct permissions to activate the %s plugins. Contact the administrator of this site for help on getting the plugins activated.' ), // %1$s = plugin name(s)
'notice_ask_to_update' => _n_noop( 'The following plugin needs to be updated to its latest version to ensure maximum compatibility with this theme: %1$s.', 'The following plugins need to be updated to their latest version to ensure maximum compatibility with this theme: %1$s.' ), // %1$s = plugin name(s)
'notice_cannot_update' => _n_noop( 'Sorry, but you do not have the correct permissions to update the %s plugin. Contact the administrator of this site for help on getting the plugin updated.', 'Sorry, but you do not have the correct permissions to update the %s plugins. Contact the administrator of this site for help on getting the plugins updated.' ), // %1$s = plugin name(s)
'install_link' => _n_noop( 'Begin installing plugin', 'Begin installing plugins' ),
'activate_link' => _n_noop( 'Activate installed plugin', 'Activate installed plugins' ),
'return' => __( 'Return to Required Plugins Installer', $theme_text_domain ),
'plugin_activated' => __( 'Plugin activated successfully.', $theme_text_domain ),
'complete' => __( 'All plugins installed and activated successfully. %s', $theme_text_domain ), // %1$s = dashboard link
'nag_type' => 'updated' // Determines admin notice type - can only be 'updated' or 'error'
)
);
tgmpa( $plugins, $config );
}
/**
* Force Visual Composer to initialize as "built into the theme". This will hide certain tabs under the Settings->Visual Composer page
*/
add_action( 'vc_before_init', 'your_prefix_vcSetAsTheme' );
function your_prefix_vcSetAsTheme() {
vc_set_as_theme();
}
?>
ライセンスについて疑問に思いますか？あなたは「拡張ライセンス」を持っていて、ThemeForestに置き、それぞれ1つのアイテムの「在庫がある」ライセンスに変換するために適用する必要があります。詳細をご覧くださいライセンスと用語テーマ作者のために。
Visual Composerのを拡張
Visual Composerバージョン3.5 から、容易にサードパーティ製のプラグインやテーマを拡張することができます。ここでは、より高度なものを読んでください。
また、このページをチェックしてください。
Visual Composerのアドオン
Visual Composerは、Visual Composerのチームとサードパーティの開発者によって開発されたいくつかのプレミアムクラスのアドオンを提供しています。
独自のアドオンを開発することによって、ビジュアルコンポーザを拡張することができます- 私たちのアドオン開発政策を についてを読む
よくある質問
ここでは、Visual Composerのについてのよくある質問への回答を見つけることができます。
私はこのエラーを得続ける：「プラグインが有効なヘッダーを持っていません」
あなたがダウンロードした元のファイルを解凍することを確認してください。それの内には、ドキュメントを見つけて、あなたのサイトにアップロードする必要があります。ワードプレスによる、プラグインのインストール指示を確認してください。
利用可能なビジュアルコンポーザの新しいバージョンでは、どのように私はそれを取得し、自分のサイト上でそれを更新することができますか？
バージョン3.6.9 からVisual Composerの自動更新オプションをスタート。ログイン設定 ->Visual Composer -> 製品ライセンスおよび必要な資格情報を入力してください。その後、あなたはWordPressの自動更新メカニズムを使用することができます。Visual Composerの新バージョンが利用できるようになると、WP Dashboard-> PluginsページでVisual Composerの下にあるリンク「Visual Composerの今すぐを更新」をクリックする必要があります。
ご注意：これは、その後、Visual Composerのはあなたのテーマに統合されてきた場合、直接ビジュアルコンポーザを購入したユーザーに対してのみ働く無料の自動更新を得るために直接またはライセンス購入してをVisual Composerのを更新するために、あなたのテーマのプロバイダに依頼します。
古いバージョンからVisual Composerのを更新するには、この手順に従ってください。まず、CodeCanyonで、あなたのプロフィールクリックでログインしダウンロードのリンク。Visual Composerのを再ダウンロードして解凍します。今すぐあなたのWordPressの管理エリア内のプラグインメニューに移動します。ビジュアルコンポーザを無効にしそれを削除します。そしてダウンロードした新しいバージョンをアップロードします。ビジュアルコンポーザをアクティブにします。
更新しようとしたとき、私は「アップデートパッケージは利用できません」というメッセージを受け取ります
ネイティブWordPressのアップデートページにはwordpress.orgの最新の更新プログラムを探していて、Visual Composerのについては何も受信されません。代わりに以下の2つのオプションがあります。
あなたは手動でVCを更新したい場合は – プラグイン/インストールされたプラグインに行くと「CodeCanyonからダウンロード]を選択します。
最初の設定/ビジュアルコンポーザ/製品ライセンスに行く – あなたは自動アップデートを設定する場合。すべての必須フィールドに入力し、を押して「保存」してから「有効化」。それはプラグイン/インストールされたプラグインに移動し、代わりに「CodeCanyonからダウンロード」の後には、自動更新の通知が表示されます。更新プログラムがインストールされますするためのリンクをクリックします。
私は、テーマでそれを購入した場合、私は、Visual Composerのを更新することはできますか？
Visual Composerの最新の更新を受信するためには、あなたがCodeCanyon経由で購入することができます個別のライセンス持っている必要があります。購入していない場合には、ビジュアルコンポーザの更新は、あなたは最新バージョンを使用するためには、あなたのテーマの作成 者の更新を待つ必要があります。
私たちのサポートシステムは、直接ビジュアルコンポーザを購入した人のためのものです。あなたがテーマに同梱されているビジュアルコンポーザーを使用しているテーマを購入している場合は、テーマのサポートへ作者に連絡してください。
私は、サードパーティ製のショートコードを挿入することはできますか？
はい。WYSIWYGエディタでは、いつものように[ショートコード]挿入することができます。基本的なシナリオ：コンテンツ要素部からの挿入テキストブロックは、[編集]ボタンをクリックし、エディタで、あなたのショートコードを入力するか、既存のテキストの内容との間に配置します。
サードパーティ製のショートコードを追加するための別のオプションは、ショートコードマッパーを使用して利用可能なバージョン4.1.0から、簡単に再利用のための要素一覧にショートコードのいずれかのタイプを追加することができます- 。ショートマッパーを使用する方法のビデオ鑑賞してください。
（あなたがVisual Composerか、あなたのテーマに同梱拡張したい場合には）独自のショートコードのセットを追加する方法もあります。高度なドキュメントの確認してください（これはPHPの開発者によって行われるべきものです）。
ライセンスを無効にし、再アクティブ化するには？
あなたは>設定の下にボタンを「非アクティブ化」でVisual Composer -> 製品ライセンスタブで、Visual Composerのライセンスを無効化することができます。
あなたは、サーバー上のVisual Composerのアクティブ化と、その後のすべてのファイルを削除した場合。（Envatoユーザ名、シークレットAPIキー、Visual Composerのライセンスキー、ちょうど同じドメイン/ディレクトリにもう一度Visual Composerのインストール設定に移動 -> Visual Composer -> 製品ライセンスタブ、すべてのフィールドに記入 – あなたが心配する必要はありません）を押して「有効化」ボタンを押します。
行間の垂直方向のスペースを小さくする方法
バージョン3.6から、あなたは設定 -> Visual Composerに訪れることができます -> デザインオプションセクションで、要素間の垂直間隔を調整します。以前のバージョン（3.5.5以下）の場合：（あなたのテーマは1を持っている場合）あなたのテーマのstyle.cssにファイルまたはカスタムCSSエリアにこのCSSコードを挿入します。デフォルト35pxの値を変更します。
body .wpb_content_element, body ul.wpb_thumbnails-fluid > li, body .last_toggle_el_margin, body .wpb_button { margin-bottom: 35px; }バージョン4.1から始めて、あなたが行、列、画像やテキストのマージン、ボーダーやパディングを制御するために、デザインオプションに建て使用することができます。要素の設計オプションを使用する方法をビデオチュートリアルをご覧下さい。
ビジュアルコンポーザでCSSを管理する方法？
Visual Composerのは、CSSと対話するユーザーのために、いくつかの方法が用意されています。
まず：あなたは設定 -> ビジュアルコンポーザにアクセスし、コンテンツ要素のデフォルトの色とマージン/パディング設定を変更するには、「デザインオプション」タブに移動することができます。ビデオチュートリアルを詳細みる。
第二：下”設定- >Visual Composer->カスタムCSS」タブでは、独自のカスタムCSSスタイル規則を追加することができます。詳細ウォッチビデオチュートリアル。
第三：あなたは、正確なページまたはポストのカスタムCSSルールを追加することができます。ページまたはポストの編集ウィンドウでは、あなたは、この特定のページまたはポストのカスタムCSSルールを配置することができ、フォームを開くために、それをクリックし、ビジュアルコンポーザウィンドウの右上上側にCSS]ボタンが表示されます。ビデオチュートリアルを詳細みる
第四：あなたは異なる特定のコンテンツ要素のスタイルをしたい場合は、あなたの要素の編集ウィンドウの「エクストラCSSクラス名」に入力することによって、あなたのページまたはポストに正確な要素のクラス名を追加することができます。重要：あなたが直接「エクストラCSSクラス名」フィールド内でCSSコードを追加することはできません-このフィールドはクラス名のみです。CSSコードは、詳細なウォッチ（VCの設定ページであなたのテーマのcssファイル、カスタムCSSフィールドなど）適切な場所に格納する必要があります。ビデオチュートリアル。
第五：あなたはWordPressの使用する必要がありますVisual Composerのコンテンツ要素に適用されるクラス名上書きするに
add_filter("vc_shortcodes_css_class").
私はVisual Composerで作成したレイアウトを持っており、「複製」は、他のページ/ポストで使用するために、私はそれをどのように追加したいですか？
グレートな質問！あなたは、「テンプレート」を作成し、他のページに挿入することができます。方法は次のとおりです。
- あなたのレイアウトを設計します。
- 「テンプレート」メニュー選択し、「テンプレートとして現在のページを保存します」。
- テンプレートの名前を入力します。
- 次に、開いている（または新規作成）あなたはそのテンプレートを配置するページを開きます。
- 「テンプレート」メニューからテンプレートを選択します。
- これは、現在のページに追加されます。
別の方法。クラシックモードに切り替えて、Visual Composerはあなたのために生成されたショートコードをコピーし、新しいページを作成し、それらを貼り付け、Visual Composerのモードに切り替えます。あなたのレイアウトがコピーされているはずです。
また、チェックアウトしてください“Templatera”排他的なアドオンを Visual Composerのアドオンです。
私は自分のショートコードのセットを追加できますか？
高度なドキュメントファイルを確認してください（これはPHPの開発者によって行われるべきものです）。それとも、PHP / WPコーディングとそれほど慣れていない場合は、私たちの新しいチェックショートコードマッパーで設定 -> Visual Composer -> マイショートコードセクションの下。
あなたは、最新のWordPressのバージョンを実行していることを確認してください。
私は、Visual Composerのをインストールしようとしていますが、WordPressは「パッケージがインストールできませんでした。有効なプラグインが見つかりませんでした。」
あなたがダウンロードした元のファイルを解凍したことを確認してください。その中には、ドキュメントを検索し、js_composer.zipファイルをプラグインにインストールします（それがあなたのサイトにアップロードする必要があります）。
詳細ウォッチビデオチュートリアル。
コンテンツは、ポスト/ページの更新後に保存されていません
最初に確認すること。自分のプロフィールページ（Users->プロフィール）を訪問し、「ビジュアルエディタを無効にする」にチェックされていないことを確認してください。
Visual Composerはビジュアルエディタを置き換えて動作します。
リサイズ::未定義のメソッドWP_Errorの呼び出し（）
あなたが最新のワードプレス（3.5以上～）を実行していることを確認してください。
ほとんどの場合これはあなたのサーバーにインストールされているページスピードプラグインが原因で起こっています。あなたの.htaccessファイルにこれを追加してみてください：
ModPagespeed off
以上が、ざっと Visual Composerの基本マニュアルを翻訳したものです。
