Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブロックテーマをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress M...

tbshiki
January 25, 2025

ブロックテーマをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2025 01 25

【大阪】Kansai WordPress Meetup@大阪『新年スペシャルLT大会+α』登壇資料です。

このスライドはToro_Unit さんの
ブロックエディタをゴリゴリに使い倒してサイトを作った話
https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23
をオマージュさせていただきました。
Special Thanks❢
Toro_Unit (Hiroshi Urabe)
https://speakerdeck.com/torounit

tbshiki

January 25, 2025
Tweet

More Decks by tbshiki

Other Decks in How-to & DIY

Transcript

  1. • Kansai WordPress Meetup ◦ もくもく会を担当しています。 ◦ 2/28 @Osaka(予定) Wikimedia

    Commons/ File:August 2007, Yodo River seen from Umeda Sky Building 5.jpg Author:Syced.License:Creative Commons Zero, Public Domain Dedication 大阪市淀川区からきました
  2. • WordPress を使って小さな Web サービス作るのが好きです。 • Kansai WordPress Meetup の

    オーガナイザーしてます。 • オレオレプラグインを つくることがたまにあります。 • イベントで喋ったりお酒飲んだり WordCamp の実行委員をしたり 釣りしたりたまにボランティアス タッフしたりしてます。
  3. • 先方さん「更新続けられるかなー」 • でも育てることができるWeb サイトにしたい。 • 発信しないとWeb サイトの意味がない。 • 更新しないとCMS

    の意味がない。 ◦ 更新しないなら静的サイトでいい。 ◦ 難しいものは触りたくない。 ◦ わかりやすいと触ることができる。 ◦ かっこいいと触りたくなる。
  4. DesignStudio 35mm 三宅 敦(みやけ あつし) 福岡でホームページ制作をしています。 主にデザイン・コーディング・WordPress の構築を行っていますが、 WordPress はクラシックテーマばかりでheader.php

    やront-page.php など テンプレートファイルを用意したり、固定ページはコーディングしておいた html をエディタ内に貼り付けるという方法で作っていました。 今回つぶさんに制作をご相談したところ「それたぶん全部ブロックテーマで 出来ますよ」と言われ、はじめてブロックテーマで作ることになりました。 自然の中が好きで時々森で仕事しています。 Web : https://www.designstudio35mm.com/ X : @ds_35mm
  5. アクセシビリティしたこと • カードデザインの内部のテキスト以外のリンクは 一部を除いてtext-decoration: none; しない。 ◦ あえてアンダーラインがついたまま残す。 • 英単語をデザインとして大文字で表示したかった。

    ◦ HTML で大文字で表記するとスクリーンリーダーが 略語として認識してしまうやつ。 ◦ text-transform: uppercase; で対応。 • 勝手にギュンギュン動かさない。触って動くのはOK。 • 🌙
  6. 結果 • ダークモード対応が楽できた。 • 結構WYSIWYG になった。 • クエリーループブロックほんと便利。 • ショートコード作るPHPちょっと書いた。

    • メディアクエリに依存するCSSちょっと書いた。 • カスタムフィールド使わなかった。 • カスタムフィールド使わなかった。
  7. ブロックテーマと相性良さそうなプラグインを見つけた Advanced Query Loop https://ja.wordpress.org/plugins/advanced-query-loop/ クエリーループブロックのクエリーをごにょごにょできる。 カスタムフィールドでクエリーをフィルタする的なことも できるはず。 Hyperlink Group

    Block https://ja.wordpress.org/plugins/hyperlink-group-block/ 囲んだブロックを<a></a>でラップできるブロック。 クエリーループブロック内でクエリーのリンクをあてた グループブロックみたいなブロックが追加される。
  8. WordPress 6.7.1 テーマ : unitone 結果 使用プラグイン : Advanced Query

    Loop All-in-One WP Migration Custom Post Type UI Microsoft Clarity My unitone One User Avatar SEO SIMPLE PACK Snow Monkey Editor Snow Monkey Forms SVG Support unitone TOC WP Dark Mode WP Mail SMTP WP Multibyte Patch XO Security Yoast Duplicate Post 実装時にお世話になったプラグイン : Simple Custom CSS and JS User Switching
  9. 違和感潰し • デザインのちょっとしたズレ。 • 見えづらい要素。 • タップしにくい、クリックしにくい。 • 人間はすぐ順応してしまう。 •

    制作者はずっと見てるから違和感も当たり前になってしまう。 • Web 制作って違和感潰しの繰り返しだったりしませんか。
  10. • ブロックテーマを使った制作を三宅さんに知ってもらいたかった。 • カスタムフィールド製造業からの脱却。 WordCamp Tokyo 2019 しずみさんのセッション https://www.youtube.com/watch?v=Q6NQbBI9jtw •

    管理・運用・保守にできるだけコストがかからないようにする。 ◦ なにかある度にコードをいじるならWordPress じゃなくていい。 ◦ コアもテーマもプラグインも自動更新。 ◦ 崩れたら直しましょうの精神の共有。 これからのためにデザイナーさんとの連携強化
  11. この5年6年と少しくらいでの変化 WordPress がWeb サイトを作る上で 『一番簡単で手軽なツールだった時代』は終わりを遂げました。 • フロントエンドなら、Next.js / Astro +

    microCMS とか。 • ブログなら、note とか。 • ノーコードなら、Wix / STUDIO / Squarespace とか。 • AI 開発なら、replit / bolt.new + Supabase / v0 とか。
  12. • 最先端やトレンドをすべて把握してくれとはいわない。 • わからないことがあったら 使って、調べて、真似て、つくって、とにかく触って。 • 横着をしない。 • したいことを明確にした上で AI

    に聞くなり、課金するなり、代替案に変えたりしよう。 • 使いやすいように実装できれば勝ち! • スキルがなくてもOK、調べ尽くせ! • そうしたらしたいことがを実現できるスキルが身につくから。
  13. Thanks❢ Github / X / WP.org and more... : @tbshiki

    tbshiki.com Special Thanks❢ Toro_Unit https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23