WordPressタグ記事一覧

[WordCamp Osaka 2018] Gutenbergで作るランディングページ改定版

今日、2018年6月2日に開催されるWordCamp Osaka 2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。

WordBench Osaka & Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました（大変でしたっ）。

使用したスライド

【WordCamp Osaka 2018】Gutenbergで作るランディングページ from takashi ono

Gutenbergってなんだ？

GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。
エディターインターフェースといったほうがしっくり来るかも。

今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。

パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。

WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。

そういった環境の変化にユーザーは敏感です。より簡単な方に流れていくのは人の真理でもあります。

今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。

その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。

Gutenbergの使い方

当日は、デモサイトを利用して参加者に触っていただく機会を設けました。

Gutenberg 対応のテーマの作り方

ここが半年前と大きく異なる部分でした。

add_theme_support の gutenberg がなくなり、それぞれがテーマサポートとして独立しました。

// Gutenberg Wide Alignment
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment
add_theme_support( 'align-wide' );

// Gutenberg Wide Alignment

// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment

add_theme_support( 'align-wide' );

// Gutenberg custom colors disable 
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#disabling-custom-colors-in-block-color-palettes
add_theme_support( 'disable-custom-colors' );

// Gutenberg custom colors disable

// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#disabling-custom-colors-in-block-color-palettes

add_theme_support( 'disable-custom-colors' );

// Gutenberg color palette
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes
add_theme_support( 'editor-color-palette',
    array(
        'name' => 'Blue',
        'color' => '#21759b',
    ),
    array(
        'name' => 'Orange',
        'color' => '#d54e21',
    ),
    array(
        'name' => 'Gray',
        'color' => '#464646',
    ),
    array(
        'name' => 'White',
        'color' => '#ffffff',
    )
);

// Gutenberg color palette

// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes

add_theme_support( 'editor-color-palette',

array(

'name' => 'Blue',

'color' => '#21759b',

array(

'name' => 'Orange',

'color' => '#d54e21',

array(

'name' => 'Gray',

'color' => '#464646',

array(

'name' => 'White',

'color' => '#ffffff',

)

);

/**
 * カラーパレットの背景色を定義
 * https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes
 */

.has-blue-background-color {
    background-color: #21759b;
}

.has-blue-color {
    color: #21759b;
}

.has-orange-background-color {
    background-color: #d54e21;
}

.has-orange-color {
    color: #d54e21;
}

.has-gray-background-color {
    background-color: #464646;
}

.has-gray-color {
    color: #464646;
}

.has-white-background-color {
    background-color: #ffffff;
}

.has-white-color {
    color: #ffffff;
}

/**

* カラーパレットの背景色を定義

* https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes

.has-blue-background-color {

background-color: #21759b;

}

.has-blue-color {

color: #21759b;

}

.has-orange-background-color {

background-color: #d54e21;

}

.has-orange-color {

color: #d54e21;

}

.has-gray-background-color {

background-color: #464646;

}

.has-gray-color {

color: #464646;

}

.has-white-background-color {

background-color: #ffffff;

}

.has-white-color {

color: #ffffff;

}

GutenbergChallenge

Gutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。

実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます！

http://wb.onocom.net/

GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。

https://github.com/onocom/gutenberg-challenge-introduction

感想

ワークショップ盛り上がってすごく嬉しかったです！

WordCamp Osaka 2018最高でした！

[WordPress] Gutenbergで作るランディングページ！Gutenbergの使い方やテーマ対応方法！

WordPressの次期エディタ「Gutenberg」について学ぼう

あけましておめでとうございます。今年もよろしくお願いします！

新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg（グーテンベルク）」のお話をさせていただきました。

このポストは、WordBench京都&大阪の振り返りポストです。

WordBench京都&大阪 1月 WordPressとWebマーケティングことはじめ

https://wb-kyoto.connpass.com/event/70848/

大阪のたこ焼き美味しかったです！

セッションスライド

当日利用したスライドです。

※ デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。

Gutenbergってなんだ？

Gutenberg（グーテンベルク）とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。

現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。

Gutenbergでは、ブロックと言う単位でコンテンツを構成します。

ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。

Gutenbergを試してみたい！

Gutenbergは現在プラグイン形式で開発中です。

Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。

※ 鋭意開発中なので本番環境などで使わない方がいいです。

Gutenberg Plugin

Gutenberg

Gutenbergを無効化したい！

Gutenbergの導入は怖い！Gutenbergを利用したくない！無効化したい！

という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。

※ 現在鋭意開発中なので本番環境などで使わない方がいいです。

Classic Editor Plugin

Classic Editor

Gutenbergの使い方を知りたい

Gutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。

そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。

画面キャプチャを交えて簡単に使い方を紹介します。

編集画面

編集画面上部

上部左側には、ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。

上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え（グーテンベルクとクラシックエディタを切り替えるボタン）が配置されています。

右サイドバー

右サイドバーには、DocumentタブとBlockタブがあります。

Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。

Blockタブでは、選択中のブロック固有のスタイルやCSS ID・クラスの設定等ができます。

コンテンツエリア

見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。

左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン（プラスボタン）を押してブロックを追加していきます。

どんなブロックが存在するの？

デフォルトでは、以下のブロックが定義されています。

多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。

カラムレイアウト（3列や4列）には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい！

数多くの埋め込みにも対応しています。

ブロックのデータはどうやって保存されるの？

各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。

表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。

これから改善されていくところやメモなど

パーマリンクの設定箇所がない

投稿一覧クイック編集から編集するしかなさそう。

この件について、Githubで議論されている。

https://github.com/WordPress/gutenberg/pull/3418

カラムを柔軟に作れない

今のところ柔軟なカラム設定出来ない。

https://github.com/WordPress/gutenberg/issues/219

カスタム投稿タイプで動作させるためには

register_post_typeする際に、‘show_in_rest’ => true が必要。

編集画面が真っ白になることがある

ローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。

管理画面の設定→パーマリンク設定

画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。

テーマをGutenbergに対応させるには

以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。

functions.php の編集

add_theme_supportに’gutenberg’を指定します。

wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。

colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。

<?php
/**
 * Theme Support
 */
function lp_setup_theme() {
    
    // Gutenberg support
    add_theme_support( 'gutenberg', array(
        'wide-images' => true,
        'colors' => array(
            '#21759b', /* WordPress Blue */
            '#d54e21', /* WordPress Orange */
            '#464646', /* WordPress Grey */
            '#ffffff'  /* White */
        )
    ) );
    
}
add_action( 'after_setup_theme', 'lp_setup_theme' );

<?php

/**

* Theme Support

function lp_setup_theme() {

// Gutenberg support

add_theme_support( 'gutenberg', array(

'wide-images' => true,

'colors' => array(

'#21759b', /* WordPress Blue */

'#d54e21', /* WordPress Orange */

'#464646', /* WordPress Grey */

'#ffffff' /* White */

)

) );

}

add_action( 'after_setup_theme', 'lp_setup_theme' );

style.css の編集

add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。

そのクラスに対してテーマとしての振る舞いを定義します。

/**
 * ワイド幅、全幅のスタイル定義
 */

.alignwide {
    width: calc(100% + 200px);
    margin: 0 0 1rem -100px;
}

.alignfull {
    width: calc(100% + 100vw);
    margin: 0 0 1rem -50vw;
}

.alignfull img {
    display: block;
    margin: 0 auto;
    max-width: 100vw;
    height: auto;
}

/**

* ワイド幅、全幅のスタイル定義

.alignwide {

width: calc(100% + 200px);

margin: 0 0 1rem -100px;

}

.alignfull {

width: calc(100% + 100vw);

margin: 0 0 1rem -50vw;

}

.alignfull img {

display: block;

margin: 0 auto;

max-width: 100vw;

height: auto;

}

Gutenbergについて理解を深めたい！

Gutenbergについて理解を深めるには、実際に使ってみるのが一番！

Gutenberg Challenge

ということで、WordBench京都&大阪では、「Gutenberg Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。

これからGutenbergを触って見ようかな！と思っている方、以下のリポジトリからGutenberg Challengeに挑戦してみてください！

https://github.com/onocom/gutenberg-challenge

WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

searchform.php をテーマフォルダに追加
searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置
検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ（以下例だとpref）をご自身のサイトに付け加えてあげてください。

<?php
/* 
 * 検索ボックスのカスタマイズ
 *   カスタムタクソノミーを検索条件に追加する
 */
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">検索キーワード</span>
        <input type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" />
    </label>
    <label>
        <span class="screen-reader-text">都道府県で絞り込み</span>
        <?php
            $selected = get_query_var("pref",0);
            $args = array(
                        'show_option_all' => '都道府県で絞り込み',
                        'taxonomy'    => 'pref',
                        'name'        => 'pref',
                        'value_field' => 'slug',
                        'hide_empty'  => 1,
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>
    <input type="submit" class="search-submit" value="検索" />
</form>

<?php

* 検索ボックスのカスタマイズ

* カスタムタクソノミーを検索条件に追加する

<label>

<span class="screen-reader-text">検索キーワード</span>

</label>

<label>

<span class="screen-reader-text">都道府県で絞り込み</span>

<?php

$selected = get_query_var("pref",0);

$args = array(

'show_option_all' => '都道府県で絞り込み',

'taxonomy' => 'pref',

'name' => 'pref',

'value_field' => 'slug',

'hide_empty' => 1,

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

</form>

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル（例：都道府県）
■■■・・・タクソノミーの名前[半角英数]（例：pref）

  <label>
        <span class="screen-reader-text">●●●で絞り込み</span>
        <?php
            $selected = get_query_var("■■■",0);   // 選択状態となるタクソノミースラッグを取得
            $args = array(
                        'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）
                        'taxonomy'    => '■■■',   // タクソノミーの名前
                        'name'        => '■■■',   // タクソノミーの名前
                        'value_field' => 'slug',   // タクソノミーのスラッグをセレクトボックスのオプションに設定する
                        'hide_empty'  => 1,        // 空のタクソノミーは非表示(0にすると表示)
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>

<label>

<span class="screen-reader-text">●●●で絞り込み</span>

<?php

$selected = get_query_var("■■■",0); // 選択状態となるタクソノミースラッグを取得

$args = array(

'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）

'taxonomy' => '■■■', // タクソノミーの名前

'name' => '■■■', // タクソノミーの名前

'value_field' => 'slug', // タクソノミーのスラッグをセレクトボックスのオプションに設定する

'hide_empty' => 1, // 空のタクソノミーは非表示(0にすると表示)

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート（sidebar.php等）に以下のコードを記載します。

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた！

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。

【WP】WordPressのPress This機能を応用して超個人的なブックマークサイトを作った話

どうも、小野です。個人的なブックマークサイトを作りました。

onocom.bookmark
http://onocom.net/bookmark/

私がネットサーフィンをする中で見つけたサイト、デザインの参考になりそうなサイト、Amazonの面白かった動画等をざっくばらんにブックマークし、後日私が活用するためのサイトです。

ブックマークをいかにしやすくするかといところに焦点をおいた結果、Press Thisという機能を活用するに致しました。

今回はこのサイトを作る過程で肝となった「Press This」という機能とそのカスタマイズ方法をご紹介致します。

WordPressのPress Thisという機能をご存知ですか？

WordPressにひっそりと佇むPress Thisという機能をご存じでしょうか？

この機能の画面を見たことはあるけど、使ったことがない！という人がほとんどなのではないでしょうか？かくいう私も全然使っていませんでした。

ちなみに、Press Thisには以下のようにアクセスします。
管理画面 → ツール → 利用可能なツール

Press Thisとは

PressThisとは、外部サイトの紹介記事など書く際に、引用等の負担を減らし、効率よく記事を書くためのツールのことです。

WordPressのCODEX日本語版には以下のような説明がされています。

Press This
「Press This」とは、Web ブラウザのブックマーク（お気に入り）を使って WordPress に素早く投稿・発信できる機能です。「Press This」を使うにはツール画面からブックマークレットを作成し、Web サイトを見ている間に引用したいテキスト、画像、動画などを見つけたら、そのブックマークレットを選択して起動します。

Press Thisの使い方

せっかくなのでPress Thisの使い方を動画にしてみました。

途中エラーになったりしていますが取り敢えずPress This、なんかの役にたちそうやなぁっていうのはご確認頂けるのではないでしょうか？

Press Thisを活用して簡単にブックマーク記事を投稿出来るサイトを作った

今回、このPress Thisの機能を使って個人的なブックマークサイトを作ったのでご紹介したいと思います。

onocom.bookmark
http://onocom.net/bookmark/

なぜこんなサイトを作ったかと言うと、Chromeのブックマークバーのブックマークが多くなりすぎて、同じサイトのブックマークを何個もしていることがあったから。そんな状況では、そもそもブックマークの意味が無い。

自分のブックマークを横断的に調べられたらいいなぁというのと、面白そうやなぁということで、こんなサイトを作りました。

はてなブックマーク使えば解決するのかもしれませんが、まぁ要するに自己満足です。

このサイトはウェブサービスでもなんでもなく、ただのWordPressのサイトを更新しやすくしただけなので、以下に書き記すことは、onocom.bookmarkの閲覧者には何のメリットももたらしません！

肝になるプログラム

このサイトの肝はPress Thisの本文からPress ThisしようとしてるサイトのURLを取得し、画面キャプチャを自動挿入しているところです。

そうすることで、ブックマークしたいURLにリンクする手間や画面キャプチャを取る手間を省き、一言コメントを入れつつブックマークする(投稿する)事が可能になります。

ブックマークするだけなのにいちいちURLをコピーして・・・なんてやってられないですからね。

それを可能にしたのは、【 press_this_save_post 】というフィルターフックです。

該当のフィルターフックを使ってPress Thisで投げられたコンテンツ（本文）を以下のように書き換えています。

また、自動で対象のサイトからメディアを取得するのを防ぐために【enable_press_this_media_discovery】フィルターフックをfalseに設定しています。

<?php
add_filter( 'enable_press_this_media_discovery', '__return_false' );
add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {
    
    $url = "";
    // 本文からURLを抽出する
    $content = trim($post_data['post_content']);
    $pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';
    $result = preg_match($pattern, $content, $match);
    
    if( $result !== 0 && $result !== false ) {
        // デフォルトの情報源という表示は消して、別の方法でリンクを表示
        $content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);
        $url = $linkurl = $match[0];
        $html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';
        
        // サイトのサムネイルをwordpress.comのサービスを利用して取得
        $html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';
        
        // 保存するコンテンツを組み立てる
        $post_data['post_content'] = $content . $html;
    }

    return $post_data;
}

<?php

add_filter( 'enable_press_this_media_discovery', '__return_false' );

add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {

$url = "";

// 本文からURLを抽出する

$content = trim($post_data['post_content']);

$pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';

$result = preg_match($pattern, $content, $match);

if( $result !== 0 && $result !== false ) {

// デフォルトの情報源という表示は消して、別の方法でリンクを表示

$content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);

$url = $linkurl = $match[0];

$html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';

// サイトのサムネイルをwordpress.comのサービスを利用して取得

$html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';

// 保存するコンテンツを組み立てる

$post_data['post_content'] = $content . $html;

}

return $post_data;

}

たったこれだけでPress Thisを使いやすくカスタマイズ出来ました。

めっちゃ簡単！

実際にブックマークする（投稿する）様子を動画にしました。

上記のカスタマイズのおかげで、簡単にブックマークを投稿できるサイトが出来上がりました。しかも画面キャプチャ付きだから、分かりやすい！

https://youtu.be/fabm28w6FKs

地味な機能を弄る喜び

Press This使っている人に出会ったことがないのですが、このブックマークサイトを作ってみて、これは何か他にも使えそうな予感がしました。

そして、誰もいじっていないであろう地味な機能をカスタマイズするっていうのは自己満足するにはピッタリでありました。

皆様も参考に頂ければ幸いです。

【WP】［Beaver Builder － WordPressページビルダー］プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder－ WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを２カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか！と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

［Beaver Builder-WordPressページビルダー］のプラグインページはこちら

Beaver Builderで何ができるのか？

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。（翻訳してくださった方ありがとうございますm(_ _)m）

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ？」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

<script>
<?php
    
echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array(
    'ajaxNonce'                     => wp_create_nonce( 'fl_ajax_update' ),
    'colorPresets'                  => FLBuilderModel::get_color_presets(),
    'customImageSizeTitles'         => apply_filters( 'image_size_names_choose', array() ),
    'debug'                         => ( defined( 'WP_DEBUG' ) && WP_DEBUG ),
    'enabledTemplates'              => 'core',
    'help'                          => FLBuilderModel::get_help_button_settings(),
    'homeUrl'                       => home_url(),
    'isRtl'                         => is_rtl(),
    'isUserTemplate'                => false,
    'lite'                          => true === FL_BUILDER_LITE,
    'modSecFix'                     => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ),
    'newUser'                       => FLBuilderModel::is_new_user(),
    'postId'                        => $post_id,
    'postStatus'                    => get_post_status(),
    'postType'                      => get_post_type(),
    'simpleUi'                      => $simple_ui ? true : false,
    'upgradeUrl'                    => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ),
    'userCanEditGlobalTemplates'    => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ),
    'userCanPublish'                => current_user_can('publish_posts'),
    'userTemplateType'              => FLBuilderModel::get_user_template_type(),
    'googleFontsUrl'                => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family='
) ) ) . ';';

<?php

echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array(

'ajaxNonce' => wp_create_nonce( 'fl_ajax_update' ),

'colorPresets' => FLBuilderModel::get_color_presets(),

'customImageSizeTitles' => apply_filters( 'image_size_names_choose', array() ),

'debug' => ( defined( 'WP_DEBUG' ) && WP_DEBUG ),

'enabledTemplates' => 'core',

'help' => FLBuilderModel::get_help_button_settings(),

'homeUrl' => home_url(),

'isRtl' => is_rtl(),

'isUserTemplate' => false,

'lite' => true === FL_BUILDER_LITE,

'modSecFix' => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ),

'newUser' => FLBuilderModel::is_new_user(),

'postId' => $post_id,

'postStatus' => get_post_status(),

'postType' => get_post_type(),

'simpleUi' => $simple_ui ? true : false,

'upgradeUrl' => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ),

'userCanEditGlobalTemplates' => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ),

'userCanPublish' => current_user_can('publish_posts'),

'userTemplateType' => FLBuilderModel::get_user_template_type(),

'googleFontsUrl' => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family='

) ) ) . ';';

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

// テンプレート選択画面を非表示にする
add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting');
function onocom_set_pagebuilder_setting($settings) {
    
    if( isset($settings["enabledTemplates"]) ) {
        $settings["enabledTemplates"] = "disabled";
    }
    
    return $settings;
}

// テンプレート選択画面を非表示にする

add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting');

function onocom_set_pagebuilder_setting($settings) {

if( isset($settings["enabledTemplates"]) ) {

$settings["enabledTemplates"] = "disabled";

}

return $settings;

}

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

/* ツールバーのボタン等を非表示にするCSS(多分動く) */
.fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */
.fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */
.fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */
.fl-builder-blocks .fl-builder-modules-cta   /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */
{
    display: none; 
}

/* ツールバーのボタン等を非表示にするCSS(多分動く) */

.fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */

.fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */

.fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */

.fl-builder-blocks .fl-builder-modules-cta /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */

{

display: none;

}

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。