![クロコラボ #17](/wp-content/uploads/2018/10/kurokolabo17.png)
2018年10月24日に開催した「クロコラボ #17 WordPress もくもく会」のレポートです。
ローカル環境の設置
![画像:Local by Flywheel のウェブサイトTOPページ](/wp-content/uploads/2018/10/kurokolabo17_01.png)
すでにおなじみですが、WordPressのローカル環境を構築するには「Local by Flywheel」が簡単です。以前はMacのみでしたが、今はWindowsも使えるようになっていました。
インストールには少し時間がかかりました。Windowsにインストールしたことなかったので、参加した方にインストールしてもらうときに次のようなエラーがでました。
” You can attempt to regenerate them using ‘docker machine regeratate-cents [name]’ “
これに対する直接の解決ではないと思いますが、どうやらインターネットの接続が不安定だったようで、再び試したときにはインストールできました。安定した環境でインストールする必要がありますね。
Advanced Gutenbergはとても便利
Gutenbergを試していた方に「テーブルのセルは結合できないんですか?」と聞かれました。
![画像:Gutenbergのテーブル](/wp-content/uploads/2018/10/kurokolabo17_02.png)
確かに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のところがリストでマークアップされてるので、リストのスタイルが出てしまいますね……(近々なおします!)
また、ダッシュボードからは各ブロックのカスタマイズができるし、
![Advanced Gutenbergのブロック設定画面](/wp-content/uploads/2018/10/kurokolabo17_05.png)
![タブブロックの設定画面](/wp-content/uploads/2018/10/kurokolabo17_06.png)
カスタムスタイルを作ることもできました!
![カスタムスタイルの設定画面](/wp-content/uploads/2018/10/kurokolabo17_07.png)
実際にカスタムスタイルを適応してみると、次のようになりました。
まとめ
当初自分が試そうとしていたことはできなかったのですが、新しいプラグインを試せてよかったです!Advanced Gutenbergを使えば、お客さんが更新するのに、ある程度のスタイルを用意することが容易になりそうです。
次回は11月8日(木)、WordPressではなくGoogle Maps APIをいろいろ試してみたいと思います。よかったらご参加ください!
クロコラボ #18 Google Maps APIを使ってみよう – connpass