WordPressブロックテーマ勉強会を開催中
WEBサイト構築のノーコード化の流れで、世界で一番サイト構築に使われているCMSであるWordPressでも、ブロックテーマというものが登場しました。ブロックテーマは、管理画面上でどのページも簡単に編集できるのでクライアントさんに重宝されます。僕自身は、昨年からすべてのサイトをブロックテーマで構築してます。 でも日本語の資料が少ないためか、なかなか興味持ってくれる人がいなくて少し寂しい…最近になってようやく、ブロックテーマの解説動画や書籍も出始めました。しかしながら、多くはテンプレートとしての活用に限った話であり、デザイナーさんにオリジナルで作ってもらったデザインには対応しにくいため、僕たちは『どんなデザインでもブロックで開発』する専用テーマ開発と並行して、勉強会をやることにしました！
そもそもWordPressブロックテーマってなに？
まだ新しい言葉で、日本語の資料が少ないから無理もありません。あと概念が分かりにくいかも…
ざっくり言うと、WordPressの編集を全てノーコードツールっぽく使える機能です。HTMLに変わり、レイアウトを『ブロック』の組み合わせで作れるようになり、この機能のみでサイト構築するのがブロックテーマです。
ブロックテーマって使われてるの？
WordPress公式のデフォルトでインストールされる最新の公式テーマ、Twenty Twenty Four もブロックテーマです。ノーコードでサイト構築できますし、文章変更も簡単にできます。WixやStudioと比較すると、サーバーに設置さえすれば、月々の費用はサーバーとドメイン代のみで低コストですし、制限もありません。
ブロックテーマのメリット
最も重宝されるのは、管理画面とフロント画面の見た目を一致させることで、文章・画像などを直感的に編集できる点です。つまり、誰でもサイト情報の更新ができる。これは記事ページに限った話ではなく、TOPページ、会社概要、サービス概要など、常設的に置くページに対しても可能といつことです。 例えば、サイトに掲載されている実績、サービス概要文、会社の住所、代表者名なども、わざわざコーダーに依頼することなく、簡単に編集できます。
ブロックテーマのデメリット
フルカスタマイズするには、少々扱いづらい点があるからです。なので、Webデザイン案件で躊躇されがちだと思います。このデメリットを克服するため、ブロックテーマでどんなデザインでも表現できるよう、独自スターターテーマを開発しました。 ブロックテーマの難点 オリジナルデザインで、どんなデザインも管理画面とフロント画面を一致させるには、以下の技術が必要です。 ・管理画面のブロックエディタにフロント画面のCSSを適用 ・ブロック開発(既存ブロックで表現できない部分) ・動的表現の対応(モーダル画面、アコーディオンなど) かくして、 PINKFREAKでブロックテーマの開発が始まりました。
避けて通れない『管理画面へのフロントCSS適用』
ブロックを使うと、管理画面でフロントを色々いじることができますが、デフォルトのままでは複雑なデザインを表現できません。しかし、管理画面にフロントのCSS適用させればどんなデザインでも管理できます。
しかしながら、これをやるといくつか大きな問題が。
まず、ブロックエディタのサイドメニューのデザインにもフロントのCSSが適用されてしまい、管理画面がおかしくなります。他にも、動的なものをブロックでどう表現すればいいか、例えば
・モーダル画面
・アコーディオン
・カルーセル
などなどは管理画面の構築自体にも悩まれるはずです。
公式テーマTwenty Twenty Fourをベースにテーマ開発
そこで、PINKFREAKではWorPress公式テーマTwenty Twenty Fourをベースに、案件で使いやすいような、フルカスタマイズを前提とした専用テーマを開発し、管理画面を強制的に元に戻すCSS開発（WordPressの管理画面のHTML構造を頑張って読み解いて実装したもの）と、動的な表現などはクラス名に命名規則をつけて機能を仕込んでおくことで、簡単に呼び出せるようにしました。
つまり、ブロックテーマをフルカスタマイズする上での技術的障壁を、ある程度なくすことに成功したのです。これにより、50P以上のサイトが2週間以内に実装できるほどの、PHPテーマではありえないような超速テーマが爆誕しました。
高頻度の勉強会を開催中！
ブロックテーマ自体の価値が多く伝わっていないため、いろんな方々にこれを使ってもらいながら、テーマをブラッシュアップしながら、これをもっともっと広めていきたいなと考えています。サイト構築が早く、しかも管理画面で文言や画像を変えることができるので、かなり重宝します。
勉強会は、週2回の高頻度でやっております。ご興味ある方は、XまたはPINKFREAKの公式サイトから、お気軽にご連絡ください✨
X
https://twitter.com/KuroTakuyo
PINKFREAKの公式サイト
https://pink-freak.com/form/
この記事が気に入ったらサポートをしてみませんか？