2018年10月24日に開催した「クロコラボ #17 WordPress もくもく会」のレポートです。
ローカル環境の設置
すでにおなじみですが、WordPressのローカル環境を構築するには「Local by Flywheel」が簡単です。以前はMacのみでしたが、今はWindowsも使えるようになっていました。
インストールには少し時間がかかりました。Windowsにインストールしたことなかったので、参加した方にインストールしてもらうときに次のようなエラーがでました。
” You can attempt to regenerate them using ‘docker machine regeratate-cents [name]’ “
これに対する直接の解決ではないと思いますが、どうやらインターネットの接続が不安定だったようで、再び試したときにはインストールできました。安定した環境でインストールする必要がありますね。
Advanced Gutenbergはとても便利
Gutenbergを試していた方に「テーブルのセルは結合できないんですか？」と聞かれました。
確かにGutenbergでセルを結合する機能はないようです。Classic Editorでは「TinyMCE Advanced」というプラグインを使っていましたが、Gutenbergでは「Advanced Gutenberg」にある「Advanced Table」を使うと、セルの結合や分割ができるようです。
Advanced Gutenbergは、他にもたくさんの機能があります。公式プラグインのAdvanced Gutenbergのページにある動画を見ると、英語だけど何ができるかわかりやすいと思います。
次のようなアコーディオンやタブが設置・編集できるのは、簡単に実装できていいなと思いました。
アコーディオン
Header 1
Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated
Header 2
Description 2
Header 3
Description 3
タブ
Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.
Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.
Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.
ただ、テーマでちゃんと対応してないと、上のタブみたいにTab1、Tab2、Tab3のところがリストでマークアップされてるので、リストのスタイルが出てしまいますね……（近々なおします！）
また、ダッシュボードからは各ブロックのカスタマイズができるし、
カスタムスタイルを作ることもできました！
実際にカスタムスタイルを適応してみると、次のようになりました。
Blue message
Green message
まとめ
当初自分が試そうとしていたことはできなかったのですが、新しいプラグインを試せてよかったです！Advanced Gutenbergを使えば、お客さんが更新するのに、ある程度のスタイルを用意することが容易になりそうです。
次回は11月8日（木）、WordPressではなくGoogle Maps APIをいろいろ試してみたいと思います。よかったらご参加ください！
クロコラボ #18 Google Maps APIを使ってみよう – connpass