Photosynthesic blog

Twenty Nineteenの子テーマ de Gutenberg対応してみた

2019-04-10

こんにちは、みみです。

WP ZoomUP っていう最近イチオシのオンライン勉強会があるんですけど、先日そこでGutenberg Handbookのススメみたいな小話をしまして、そのために作ったものです。その日のレポートは「WordPressの新エディターGutenbergをもっと知ろう」WP ZoomUP #13 レポート – WP ZoomUPをご参照ください。

話したら満足してしまって、記事にするのをすっかり忘れていましたが、きちんとレポートを書いてくださったので思い出せました、有難う。

弊スライド

そもそもはこのブログの 自作テーマをGutenbergに対応させる の内容を話したら?というところから急にお話することになったのですが、私の駄文をみながらお話するとか参加者のみなさんにも私にもハイリスク・ローリターン過ぎると思って、公式ハンドブックの良さをお伝えすることにしました。

スライド見てもらえば分かると思うのですが、ただ、Theme Support – The new Gutenberg editing experience — WordPress の内容をなぞっただけです。で、文字だけだと分かりにくいかなと思って、Twenty Nineteenの子テーマでカスタム例を作っていったので、それを一応GitHub(https://github.com/miminari/19childja)にあげています。

ほんとは関係性を図解出来てたらより良かったなと今は思うけれど、1週間しかなかったという言い訳でお許しください。

ついでにやり方は見知ってるだけだった翻訳の仕組みとかおさらいしたり、色設定を一箇所で済ませる機能持たせようとしたりしていて、ちょっとゴチャついているけれど、dev以下は無視していただければ大丈夫かと。

とはいえ、サンプルソースなんでどうでも良いのです、聞いてくださった方に知ってほしかったのは、一介のユーザーのブログ読むよりも、Google翻訳を通した公式ハンドブックを読むのが一番の近道だということです。

そして、別に最初からReactを触らなくても大丈夫ということです。

まあ某カリスマ開発者の方は「ソース」が一番だと仰っていましたし、うちにいるガチプログラマもソース検索をかけるのが一番の近道だと事あるごとに言います。私もまあそうだなあとは思うのだけれども、ソースを読むのは漢文読み下しが出来るみたいなもので、慣れが必要です。ガチ理系の彼に今話題の万葉集から本歌取りをしてみせよと言うのが無茶振りなように、いきなりソースを読めというのは初見殺し過ぎる。

公式もそれが分かっているから、ハンドブックを作っているわけですね。でも、こんな充実した公式の教科書があるのに、日本語検索では中々辿り着けない。勿体無いなあと思ってご紹介してみました。

VueにしろReactにしろ、公式のドキュメントがちゃんとしているのが当然の世の中になってきているので、何かを知りたいと思ったらまずは公式サイトから入るのが一番の近道だと思います。英語の壁の7割はGoogle先生が壊してくれます。

…子テーマの話全然してなかった。

(ギャラリーのfigcaption入れた場合のデザイン、チェックしてなくて今気が付いたけど、なんでこんな攻めてるの。あとで変えよう…)

最後になりましたが、今回作った子テーマ、というのは烏滸がましい、子テーマの形でのサンプルソースについて。全然大したことはしていなくて、functions.phpにこう書くと指定したCSSが反映されるよ、というだけのものです。(子テーマを推奨しているわけでもなくて、子テーマだと違いが分かりやすいからそうしてみただけです。)

Twenty Nineteen、そのまま使うシーンは中々無いかもしれないけれど(でもWordCamp Paris 2019 のサイトは凄くうまく使っている)、やはり新エディタ(Gutenberg)の特色をしっかり使えるテーマだし、今の(正確にはちょっと前の)流行りのデザインを抑えているし、触ってみると色々と学びが多いテーマだと思うので、子テーマを作りつつ触ってみると良いのではないでしょうか。その一助になれば幸いです。

https://github.com/miminari/19childja

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter