You are here: Home » WordPress » Page Builder by SiteOriginのちょっと高度な使い方

Page Builder by SiteOriginのちょっと高度な使い方

最近Wordpressの優秀なプラグインPage Builder by SiteOriginを結構つかってるので、解説とか注意点を残しておきます。

Page Builder by SiteOriginのちょっと高度な使い方

目次

ウィジェットをコンテンツ部分に簡単に入れることができます。

SiteOrigin Features

SiteOrigin Features画像やアイコンを入れるときの注意点

Featuresの画像の場合

Featuresのアイコンの場合

SiteOrigin Slider

SiteOrigin Slider画像の入れかた

SiteOrigin Post Carousel

SiteOrigin Button

Widget Styles

Attributes

カスタム CSS

Switch to Editorは危険なダイヤログ

スポンサーリンク




Page Builder by SiteOriginとは

Page Builder by SiteOriginとはブログソフトのワードプレスを簡単にウェブサイトっぽくしてくれる優れものです。ワードプレスを使ったことがある人なら、一度は使ったことがあるプラグインだと思います。

ウィジェットをコンテンツ部分に簡単に入れることができます。

ウィジェット

ワードプレスにはウィジェットと呼ばれる便利な機能があるのですが、これはどのテーマにも標準でサイドバーなどの装備されているはずですが、コンテンツ部分にも入れることが可能です。その場合、function.phpとかsidebar.phpなどを自分でカスタマズする必要があるのですが、ワードプレス初心者の人には結構面倒な作業です。

それを、コンテンツ部分のどこにでも、function.phpとかsidebar.phpをいじらずに簡単に設置可能にしてくれるのが、Page Builder by SiteOriginです。

Page Builder by SiteOriginウィジェット Page Builder by SiteOriginのおおよその初期ウィジェットです。

例えば、

Page Builderカレンダー

カレンダー入れると

Page Builderカレンダーレイアウト

こんな感じで表示されます。こんな使い方はみんなしないですが。

その中でも便利なSiteOriginウィジェットをいくつか紹介します。下の画像の青の歯車のウィジェットです。

SiteOrigin New Widget

青の歯車のウィジェットを使う場合、青歯車ウィジェットをクリックすると、ポップアップ画面にInstalling SiteOrigin Widgets Bundleこのリンクが出てくるはずです。クリックすると、それ用のウィジェットをダウンロード&インストールしてページをリロードすると使用可能になります。

SiteOrigin Widgets Bundle

上の画像のリンクが出てくるはずです。

SiteOrigin Features

SiteOrigin Features

最初このFeaturesの意味が全くわからなくて困りましたが、簡単に言うとRow内に画像やアイコンを複数表示できます。

Choose Mediaで画像をいれる事ができ

 SiteOriginFeaturesIconIcon image

Choose Iconで下の画像のアイコン(かなりたくさんある)を入れることができます。

 SiteOriginFeaturesIcon

SiteOrigin Features画像やアイコンを入れるときの注意点

SiteOrigin Features link

more linkという項目があるのですが、その中のでカスタマイズするのは、Container shapeとContainer sizeとIcon sizeとFeatures per rowの部分です。ほかはあんまり触らなくてよいと思います。

Featuresの画像の場合

画像の場合Container shapeの項目をnoneにします。しないと、画像にバックグランドに背景がついてしまうので、こんな感じになってしまうことがあります。

SiteOrigin Features Container shape

その場合、Container sizeを小さくしてIcon sizeを大きくすると画像にふちどりはされないのですが、noneにしたほうが

キャqqqqqプチャ

上の画像のような感じになりやすいし、安全だと思います。

さらに、画像の場合は縦、横の幅が同じ長さになるようにしたほうが安全でした、

Featuresのアイコンの場合

上のように、Container shapeをnoneにするとバックグラウンドに模様がつかないのですが、、アイコンの場合だとバックグラウンドに模様ないと格好悪いのでContainer sizeを大きくしてIcon size小さくしたほうが良いと思います。

SiteOrigin Featuresアイコン

TitleとTextの項目がありますが、個人的にあんまり使う機会はなかったです。

Features per rowは画像はアイコンの数に合わせておきます。画像が二つなら2、アイコンが三つなら3な感じで。

Features per row

スポンサーリンク




SiteOrigin Slider

SiteOrigin Sliderはそのままスライダーです。スライダーと言えば画像を中心に考えそうですが、動画も入れる事が出来ます。正直動画と画像のスライダーって使いづらいイメージですが、サイト作成に幅が広がるとは思いました。

SiteOrigin Slider画像の入れかた

まず画像の入れ方です。

SiteOrigin Slider

ほとんどの場合、最初にForeground imageで画像を入れ、そのあと、Addで階層を増やして、再度違う画像を追加していきます。用途の合わせてBackground imageを入れていきます。この辺は簡単です。悩まずできると思います。

SiteOrigin Slider04

少し扱いづらいの動画のが設定だと思います。もってる動画ファイルをいれる事も、youtubeのリンクで動画を再生することもできましたが、vineのリンクは入れれませんでした。

以下は例です。

SiteOrigin Post Carousel

SiteOrigin Post CarouselのCarousel(カルーセル)は直訳すると回転木馬なんですが…簡単に言うとスライドショーやスライダー のことです。

ですが、Post Carousel(ポストカルーセル)です。ポスト=記事なので記事のスライドショー的なイメージで良いと思います。

SiteOrigin Post CarouselクリックするとBuild posts queryのボタンがでてきます。ここでどの記事をスライダーに入れるか決めれます。

Build Posts Query

Select postsをクリックしてAdd post のフォームをクリックすると記事一覧がプルダウンで出てくるので、そこから記事を選んでスライダーに入れることができます。

SiteOrigin Post Carousel

以下は例です。

SiteOrigin Button

SiteOrigin Button

SiteOrigin Buttonは任意で簡単にボタンを作ることができます。ボタンの作り方は、上に書いたFeatures と同じ要領で作ることができます。

SiteOrigin Button01

SiteOrigin Button02

気になったのがOther attributes and SEOの項目はjavascriptのOnclickを入れることができるらしいのですが、使い方がわからんかった。普通に直書きでコードで書いたほうが早いかもしれない。

Widget Styles

Widget Stylesはウィジェットのスタイルとかcssを指定できます。

Attributes

SiteOriginAttributes

Attributesは属性の意味なのですが、Widget Classにaとかh2とか入れてCSS Stylesでcssを指定します。

aにcolor: blueを入れた結果 aにcolor: blueを入れた結果

SiteOrigin Features Layout

Layoutでpadding指定できます。

SiteOrigin design

designでさまざまなデザインができます。

でも、仕様がいまいちわかりずらいので、function.phpに

カスタム CSS

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
endwhile; endif;
rewind_posts();
}
}

これを追加して記事編集画面でcssを別ファイルで読み込ませるようにしてます。僕の場合は。

カスタムcss

WordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法

Switch to Editorは危険なダイヤログ

危険なダイヤログ

Page Builderの管理画面にSwitch to Editorというボタンがあるのですがクリックすると、上のダイヤログが出てきます。間違ってもOKはクリックしないほうが良いです。OKをクリックすると、今までのPage Builderでの編集がリセットされてしまうようです。

質問

Page Builderでも他のプラグインでも、見たことないセレクタ(data-sow-icon)とか使われています、なんのことですか?font-style:  star;って知ってる人います??いたら教えてください。

スポンサーリンク




SiteOrigin Google Maps

SiteOrigin Google MapsはGoogle Mapsを入れることができるのですが簡単すぎてビックリしました、Map centerに場所の名前をいれるだけでした、日本語には対応しないらくし、英語でいれると認識してくれます。

SiteOrigin Google Maps

コメントを残す