WordPressで直感的にページを自由にデザイン、レイアウトできるプラグイン「Visual Composer」を紹介しましょう。いつものような写真や文字だけのレイアウトが単調な記事ページもこいつを使えば、htmlやcssなどの知識がない人でもいつもとは一味も二味も違う記事が作成できちゃうわけです。

「Visual Composer」はcodecanyonで$34での有料プラグインですが、その機能は有料でも充分に満足のいくものですよ。

とにかくサクサクイケてるレイアウトを作成できちゃいます。また最近流行りのアニメーションなどのエフェクトも気軽に使用できるわけです。

 

Visual Composerを日本語化しよう

「Visual Composer」はデフォルトでは日本語にならないのですが、プラグインフォルダをよく見ると日本語用の言語ファイルが用意されています。

plugins/js_composer/locale

上記にあります「js_composer-ja_JP.mo」を「js_composer-ja.mo」にリネームして、アップロードしましょう。

でもこの日本語の言語ファイルは100%翻訳はされていません。また先にも言ったように直感的に操作することができるので、英語のままでも意外とすんなり使えましたよ。

 

 

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

このプラグインは有料です。ですんでちゃんとライセンスを入れてアクティベート(有効化)してやりましょう。これをやっておかないとアップデートとかできませんからね。たまにwordpressのバージョンあげるとこの子使えなくなったりしますんで。。。

Product_License_‹_somosomo_me_—_WordPress

Envato_Account

Envato Username: プラグイン購入時に作成したアカウントのユーザー名

Secret API Key:作成したアカウントでログインして取得したもの

 

 

STEP2. 詳細設定

デフォルトだと個別ページ(page)でのみ使用できるようになっています。もちろんそれでもいい人はいいですが、せっかくだから投稿(post)にも使ってみたいよ!って人は以下の設定をしてください。カスタム投稿も同様です。

Role_Manager_‹_somosomo_me_—_WordPress

ユーザーによってこのプラグインの機能を使用させないなんていう、もっと細かな設定もあるんですがそこは、はしょっちゃいますね。

 

STEP3. 実践!記事を作成

それではいよいよ「Visual Composer」の実力ってやつをみていきましょう!

投稿もしくは個別ページの記事編集画面にいくとタイトル欄下に、見慣れる紺色のボタン「BACKEND EDITOR」と「FRONTEND EDITOR」があります。

新規投稿を追加_‹_somosomo_me_—_WordPress

試しに「BACKEND EDITOR」を押してみましょう。すると本文を入力する箇所がまたまた見慣れる3つのボタン。

「Add Element」「Add Text Block」「Add Template」。ものは試しに「Add Element」を押してみましょう。

新規投稿を追加_‹_somosomo_me_—_WordPress

するとなにやら、いろんなコンテンツのボタンがこれでもかってぐらい並んでいます。

そう、つまりこの並んだ数だけいろんなコンテンツをHTMLやらCSSやら打ち込まずとも作れちゃうわけです。

タブ、アコーディオン、スライダー、カルーセルスライダー、Q&A形式のコンテンツ、ギャラリー、動画、Googleマップ、グラフ、ボタン….とにかくすっごいあります。

  • Contact Form 7
  • RowPlace content elements inside the row
  • Text BlockA block
  • IconEye catching icons from libraries
  • SeparatorHorizontal separator line
  • Separator with TextHorizontal separator line with heading
  • Message BoxNotification box
  • Facebook LikeFacebook
  • Tweetmeme Button
  • Google+ Button
  • PinterestPinterest button
  • FAQToggle element for Q&A block
  • Single ImageSimple image with CSS animation
  • Image GalleryResponsive image gallery
  • Image CarouselAnimated carousel with images
  • TabsTabbed content
  • TourVertical tabbed content
  • AccordionCollapsible content panels
  • Pageable ContainerPageable content container
  • Custom HeadingText with Google fonts
  • ButtonEye catching button
  • Call to ActionCatch visitors attention with CTA block
  • Widgetised SidebarWordPress widgetised sidebar
  • Posts SliderSlider with WP Posts
  • Video PlayerEmbed YouTube/Vimeo player
  • Google MapsMap block
  • Raw HTMLOutput raw HTML code on your page
  • Raw JSOutput raw JavaScript code on your page
  • Flickr WidgetImage feed from Flickr account
  • Progress BarAnimated progress bar
  • Pie ChartAnimated pie chart
  • Round ChartPie and Doughnat charts
  • Line ChartLine and Bar charts
  • Empty SpaceBlank space with custom height
  • Post GridPosts, pages or custom posts in grid
  • Media GridMedia grid from Media Library
  • Post Masonry GridPosts, pages or custom posts in masonry grid
  • Masonry Media GridMasonry media grid from Media Library
  • Team MembersList your members
  • Service BoxDescription with icon
  • HeadingTitle and description
  • Scroll BoxContent with scrollbar
  • ClientsPartners/clients logos
  • Social NetworksSocial network links
  • Alert BoxTheme styled alerts
  • ButtonInsert button link
  • Contact FormInsert AJAX form
  • MapInsert Google Map
  • Portfolio ItemsShow portfolio items
  • Masonry PortfolioCustom portfolio boxes
  • Dribbble GalleryProfile shots
  • Auto TypeAnimated text typing
  • Blog PostsShow blog posts
  • DividerText or plain divider
  • Pricing TableInsert a pricing content table
  • Advanced Custom FieldAdvanced Custom Field
  • WP 検索A search form for your site
  • WP メタ情報Log in/out, admin, feed and WordPress links
  • WP 最近のコメントThe most recent comments
  • WP カレンダーA calendar of your sites posts
  • WP 固定ページYour sites WordPress Pages
  • WP タグクラウドYour most used tags in cloud format
  • WP カスタムメニューUse this widget to add one of your custom menus as a widget
  • WP テキストArbitrary text or HTML
  • WP 最近の投稿The most recent posts on your site
  • WP カテゴリーA list or dropdown of categories
  • WP アーカイブA monthly archive of your sites posts
  • WP RSSEntries from any RSS or Atom feed
 ね、すっごいいっぱいでしょ。
詳しいVisual Composerの使い方は下記のサイトを見てもらえると分かりやすいと思います。

 

アドオンでさらに自由度がアップ!

「Visual Composer」には、さらに使いやすくするためのアドオンも用意されています。

Ultimate-Addons
Ultimate Addons for Visual Composer($18)

とにかく楽です!デザインやコーディングに自信のないあなた!騙されたと思って買ってみてくださいよ。