[WordBench三重] Gutenbergで作るランディングページ 再改定版+Gutenbergのカスタムブロックを作る

WordCamp Osakaでお話した内容を再改定してWordBench三重でお話をさせていただきました。

使用したスライド

変更点

エディタカラーパレットの設定

ブロックスタイル

 



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

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

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

使用したスライド

Gutenbergってなんだ?

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

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

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

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

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

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

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

Gutenbergの使い方

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

Gutenberg 対応のテーマの作り方

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

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

 

 

 

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のデモ記事が生成されます。

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

編集画面

Gutenberg編集画面

編集画面上部

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

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

右サイドバー

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

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

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

コンテンツエリア

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

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

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

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

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

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

グーテンベルクのブロック一覧

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

グーテンベルクのブロック一覧2

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

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

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

Gutenbergのデータ保持方法

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

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

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

この件について、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のテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。

style.css の編集

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

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

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

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

Gutenberg Challenge

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

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

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



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

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

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

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

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

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

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

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

  3. 検索ボックスを呼び出し

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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



[制作者向け] WAFが正常なJavaScriptもエラーにしてしまう場合の.htaccessによる対応方法(CPIシェアードプランACE01の場合)

WordPressやconcrete5等のCMSを使うなら絶対あったほうが良いWAF

WordPressに対する不正攻撃からサーバを守ってくれるWAF(Webアプリケーションファイアウォール)。

CPIのレンタルサーバ シェアードプランACE01にはWAFが標準装備されていて、クロスサイト・スクリプティングやSQLインジェクション等のサイバー攻撃を未然に防いでくれます。

詳しくはCPIの以下のページに分かりやすい解説が載っています。

https://www.cpi.ad.jp/shared/detail/waf.html

CPIは、ジェイピー・セキュア社のSiteGuard Liteを導入しているようですね。

WAFがある安心感は非常に大きく、利用しないのはもったいない!というかWAFが使えるなら絶対に使ったほうが良い機能です。

しかしながら、WAFがしっかりと動作しすぎるために、サイト構築時に悪意のないJavaScriptもエラーになるケースも割りと多かったりします。

GoogleAnalyticsのコードをconcrete5の管理画面にペーストして保存しようとすると以下のようなエラーになり上手く保存が出来ないことも。

WAF(SITEGUARD)エラー

.htaccessでWAFの設定を変更・無効にできる

そんなときに私は、JavaScriptを貼り付けて保存する間だけ.htaccessを使ってWAFを無効化しています。

手順とは言いながら、.htaccessに以下の一行を付け加えるだけです。

これで、WAFを無効に出来ます。この行を削除すると有効化されます。

無効化して作業が終わったら、すぐに有効化をしましょう!

すぐに有効化をしましょう!

大事なので2回言いました。

また、ON(有効)・OFF(無効)の2択ではなくて、より柔軟にWAFの除外設定をすることも可能です。

その解説は以下のCPIスタッフブログに詳しく書かれていますのでご一読下さいませ。

知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法
http://shared-blog.kddi-web.com/webinfo/129#setting

2017年2月24日追記

あれから色々と調べていたら、以下サイトに記載されていた、IPアドレスによりWAFの除外設定をする方法がCPIでも使えました。

192.168.1.1 の部分を自分のIPアドレスに変更すると、該当IPアドレスからのアクセスの場合、WAFのフィルタリングから除外されます。

【誤検知】WAFのSiteGuard Liteで閲覧をブロックされてしまった場合の除外設定の方法
http://spot-web.jp/blog/2700/

 

感想

WAFがサイト構築の足かせにならないように、WAFと仲良く付き合っていきたいですね。

CPI LOVEなページを作りました

4年以上愛用しているCPIの共用レンタルサーバー ACE01について、褒めたり、愛のこもった文句を言うページを作りました。CPIサーバをご検討されている方は、もし良ければこちらもご覧ください。