WordPressでも、もっと美しく簡単にブログを更新する

「Page Builder by SiteOrigin」の使い方

て前回の「WordPressでもっと手軽に美しい記事を書こう!」で「Page Builder by SiteOrigin」というWordPressの記事やページの更新を劇的に手軽に、かつ直観的にさせてくれるプラグインを紹介させていただきました。 今回はその使い方を詳しく紹介させていただきます。

前回簡単に概要の説明をさせていただきましたが、「Page Builder by SiteOrigin」操作のデモ動画があったのでこちらも参考として紹介させていただきます。(※説明の為に画面をいったりきたりしているところがあるので若干ややこしく見えるかもしれませんが、触ってみるとそんなに難しいことはありません)

まずは、おさらい

だいたいこんな感じなんだなー・・ということが分かったら、実際に使っていってみましょう。 まずはおさらいとして、投稿(ページ)エディタの「Page Builder」エディタに切り替えます。

PageBuilderPlugin1 PageBuilderPlugin2

ウィジェットを利用するにはエディタ左上のボタンでしたね。まずは「+」のボタンをクリックしてウィジェット一覧を出しましょう。

  • 「+」のボタンをクリックすると使用できるウィジェット一覧がモーダルウィンドウで表示されます。
  • 「|||」のボタンをクリックするとウィジェットを配置できるエリアを追加できます。
PageBuilderPlugin3

まず最初から配置されているエリア上に、ウィジェットを置いてみましょう。「+」のボタンを押してウィジェット一覧を開きます。

PageBuilderPlugin4

利用できるウィジェットの内容は下記の通りになっています。(※ここで説明していないものはサイドバーウィジェットと内容が同じです。)

ウィジェット名 説明
テキスト プレーンテキストやHtmlを記述できます
Gallery メディアファイル内から任意の枚数を選び画像ギャラリーを表示できます。基本的にはWordPressデフォルトのギャラリーと同じですが、視覚的に若干使いやすくなっています。
Post Content 最新の投稿を「タイトルのみ」「アイキャッチ画像」を選んで表示させられます。
Image 画像を配置できますが、メディアから直接配置した場合もこちらのウィジェットが使われます。
Post Loop 「content-xx.php」形式のテンプレートファイルを読み込みます。(※ただしquery_postsが使われます+テーマによっては使用できません)
Embedded Video <embed>形式のファイル埋め込みに使います(※それ以外の形式はエラーになる)
Self Hosted Video メディアやサーバーにアップロードした動画を表示する際に使います。
Animated Image 予め用意されているアニメーションパターンの中から画像にアニメーションを付加できます。(※アニメーション開始地点などは選べず精度はイマイチ・・)
Button リンクなどを設置できるボタンを設置できます。
Call to Action 何かしらの行動を呼びかける際のウィジェットです。一行ほどのキャチコピーなどで、ボタンへのアクションを促すように使います。(寄付など)
List 改行が反映されるテキストウィジェットのようなもの。あまり使い道がないかも・・
Price Box 読んで字の如し、商品を表示するのに使えるバナー的ウィジェット。
Testimonial プロフィール表示を想定されたものと思われる。サムネイルとリンクを設置できるウィジェット

Point

  • ここで紹介したのはデフォルト状態でのウィジェットです。インストールしているプラグインにも対応している為、項目がこちらで紹介したよりも多くなる場合があります。
  • 「Embedded Video」は動画用のウィジェットではありますが、<embed>形式以外はエラーが出てしまいます。最近の埋め込み動画はたいていiframeなどになっている為、タグが<iframe>や<object>のものは「テキストエディタ」で表示させましょう。
  • 「Animated Image」はJavaScriptのscrollイベントを使っていますが、イベント受付範囲が狭く、その受付範囲を過ぎるとイベントそのものが起動しないという、ちょっと「イマイチな仕様」(※)・・。これに変わるスクリプトを自分で用意したほうがいいかもしれません。

※仕様を把握したい方用(JavaScriptの用語が入ります)
アニメーション開始地点がオブジェクト(配置した画像)のoffsetTop(画像の上辺が画面上部にきたら)かつ受付終了地点がoffetBottom(画像の下辺が画面上部にきたら)っぽいです。また、受付終了地点を過ぎた場合、何らかのかたちでこのアニメーションが開始されていなかったとするとイベントが起動しません(つまり非表示のまま)。この開始・終了地点をずらせないので反応がすこぶる悪く感じます。
※普通はoffsetTopより上でイベントを開始させ、終了地点を過ぎると強制的にイベント完了時の状態(表示状態)にする

文字だけだとややこしいかもしれませんので、実際にこれらのウィジェットを利用したサンプルも用意しました。
各ウィジェットには編集できる項目そのままの名称を書きこみましたので、この項目に記述するとどのように反映されるのかもご覧いただけます。

Sample

全部を一度に使うことはおそらくないと思います。上記の各ウィジェットの特徴を参考に作成したいページや記事の内容に応じて、効率よく作成できるウィジェットを選んでいけばよいでしょう。
実際、「テキスト」「Image」の二つのウィジェットだけでも十分作成可能ですので。

とはいえ、何気に便利なウィジェットも揃っているので、ぜひ色々触っていってみて下さい。

ビルダーを実際に使ってみよう

では、ちょっと実演として、3つのエリアを配置し、真ん中のエリアを2カラムにした、「1カラム、2カラム、1カラム」のページ(記事)をつくってみましょう。

PageBuilderPlugin_2_1 PageBuilderPlugin_2_2

右上の「||」ボタンでエリアを追加する際にカラム数を選べます。入力した数字そのままのカラム数のエリアがエディタ上に配置されるので、2カラムのエリアと1カラムのエリアを追加しましょう。

また、画像を配置する際はいちいち「Imageウィジェット」を選択する必要はなく、通常と同様メディアから直接選択しても自動的に「Imageウィジェット」として配置されます。

ビルダーの操作方法

  • PageBuilderPlugin7

    カラム幅は仕切りをドラッグすれば調整できます。

  • PageBuilderPlugin8

    配置したウィジェットはドラッグ&ドロップで移動・入れ換え可能。

  • PageBuilderPlugin6

    エリアごと移動させる際は右端のボタン部分へカーソルを持っていってドラッグ。(※「-」はエリアを削除になるので注意!)

まずは練習ということで、ウィジェットは何を配置しても構いません。お好きなものを使えば良いでしょう。
本番時はあらかじめページの内容を決めておいて、ノートパッドなどに下書きしておくと良いと思います。その内容を各ウィジェットへ分割していくといった流れで作成するとうまく作成できると思います。

  • 画像を配置したい際は、配置したいカラムを選択して、メディアファイルから挿入できます。
  • 動画や地図を表示させたい際は、「テキストウィジェット」にHtmlタグを貼り付けましょう。

ウィジェットの編集方法

  • PageBuilderPlugin_2_3

    「テキストウィジェット」は改行を反映させるさせないかを切り替えられます。(デフォルトは改行が反映されません)
    改行を反映させたい際は、ウィジェット下部の「自動的に段落追加する」にチェックを入れると記述した通りの改行で表示されるようになります。(Htmlタグを書き込む際は改行無しのほうが便利かなと思います。)

  • PageBuilderPlugin_2_4

    「Imageウィジェット」ではリンクの編集・削除も簡単に行えます。上の「Image URL」が画像のファイルURLで下の「Destination URL」がリンク先になります。

  • PageBuilderPlugin_2_5

    「Destination URL」を空にすればリンク削除になり、書き変えれば任意のリンク先へと変更できます。

PageBuilderPlugin5

だいたいこんな感じになったかと思います。
一通り作成したら「プレビュー」で実際の表示を確認してみましょう。

PageBuilderPlugin9

うまくいきましたでしょうか?

サンプルとしてこんな感じのものも用意してみました。
構成としては

  • 1段目: 「Imageウィジェット」
  • 2段目: 左「テキストウィジェット」 右「Imageウィジェット」
  • 3段目: 「テキストウィジェット」、「ギャラリーウィジェット」、「テキストウィジェット」
  • (おまけ)4段目: 2カラムに、左25%幅「テキストウィジェット」、「ボタンウィジェット」 右75%幅「テキストウィジェット」

レイアウトや構成などは色々と試していってみて下さい。

慣れたらぜひこんな感じも・・

レイアウトやページ構成は様々にできます。操作に慣れてきたら様々なパターンを試してみて下さい。

「おまけ」

※現行テーマの「Trinity」においてはVisual Diaryトピックスのデザインを未アップの状態につき、デモへのリンクを一時停止させていただいております。
アップ後に改めてリンクを再開いたします。

※このDEMOは「Page Builder by SiteOrigin」を使って作成したものではありませんが、こんな感じの構成のページなどにも是非チャレンジしてみて下さい!
ちなみに、ちゃんとレスポンシブしてます。

Comments

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証コード * Time limit is exhausted. Please reload CAPTCHA.