プラグインタグ記事一覧

[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

【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ページビルダー】。これからも活用していきます。