- 27
- 9 415
Aki Hamano
Japan
เข้าร่วมเมื่อ 29 เม.ย. 2012
WordPress の theme.json について知ろう vol.3 テーマ設計・スタイリング編
※この動画は、2024年7月9日にオンラインで開催した「WordPress の theme.json について知ろう vol.3 テーマ設計・スタイリング編」のアーカイブ配信となります。
connpass.com/event/322285/
【イベントの目的】
WordPress5.8で、新しいツールである `theme.json` が導入されました。
これにより、テーマやブロックがサポートする機能・レイアウト・スタイルなどの多くを、このJSONファイル一つで一元的にコントロール出来るようになりました。
一方、設定項目が非常に多いため、どのように作成・編集すればよいか分かりにくい場合があります。
このイベントでは、theme.json に対する理解を深め、テーマ開発・カスタマイズに役立てる事を目的としています。
00:00:00 イベントのご挨拶・ご説明
00:01:27 前回の復習
00:02:36 テスト環境について
00:05:43 基本的な設定・準備 - テストデータのインポート
00:08:33 基本的な設定・準備 - コンテンツ幅の決定
00:10:37 基本的な設定・準備 - appearanceToolsをオプトインするかどうか
00:13:44 プリセットの設計 - カラープリセット
00:18:37 プリセットの設計 - フォントサイズプリセット
00:27:16 プリセットの設計 - スペーシングプリセット
00:33:27 スタイリング - サイト全体のスタイリング
00:44:01 スタイリング - 基本的なブロックのスタイリング
00:50:22 スタイリング - コンテキストに応じたスタイリング
00:51:52 スタイリング - カスタムCSSの追加
00:53:44 その他 - Create Block Themeプラグインを試してみる
00:56:32 その他 - デフォルトテーマのtheme.jsonの解析
01:04:32 参考資料について
01:05:42 次回イベントのご案内
connpass.com/event/322285/
【イベントの目的】
WordPress5.8で、新しいツールである `theme.json` が導入されました。
これにより、テーマやブロックがサポートする機能・レイアウト・スタイルなどの多くを、このJSONファイル一つで一元的にコントロール出来るようになりました。
一方、設定項目が非常に多いため、どのように作成・編集すればよいか分かりにくい場合があります。
このイベントでは、theme.json に対する理解を深め、テーマ開発・カスタマイズに役立てる事を目的としています。
00:00:00 イベントのご挨拶・ご説明
00:01:27 前回の復習
00:02:36 テスト環境について
00:05:43 基本的な設定・準備 - テストデータのインポート
00:08:33 基本的な設定・準備 - コンテンツ幅の決定
00:10:37 基本的な設定・準備 - appearanceToolsをオプトインするかどうか
00:13:44 プリセットの設計 - カラープリセット
00:18:37 プリセットの設計 - フォントサイズプリセット
00:27:16 プリセットの設計 - スペーシングプリセット
00:33:27 スタイリング - サイト全体のスタイリング
00:44:01 スタイリング - 基本的なブロックのスタイリング
00:50:22 スタイリング - コンテキストに応じたスタイリング
00:51:52 スタイリング - カスタムCSSの追加
00:53:44 その他 - Create Block Themeプラグインを試してみる
00:56:32 その他 - デフォルトテーマのtheme.jsonの解析
01:04:32 参考資料について
01:05:42 次回イベントのご案内
มุมมอง: 267
วีดีโอ
WordPress の theme.json について知ろう vol.2 プリセット編
มุมมอง 2456 หลายเดือนก่อน
※この動画は、2024年6月18日にオンラインで開催した「WordPress の theme.json について知ろう vol.2 プリセット編」のアーカイブ配信となります。 connpass.com/event/320043/ 【イベントの目的】 WordPress5.8で、新しいツールである `theme.json` が導入されました。 これにより、テーマやブロックがサポートする機能・レイアウト・スタイルなどの多くを、このJSONファイル一つで一元的にコントロール出来るようになりました。 一方、設定項目が非常に多いため、どのように作成・編集すればよいか分かりにくい場合があります。 このイベントでは、theme.json に対する理解を深め、テーマ開発・カスタマイズに役立てる事を目的としています。 00:00 イベントのご挨拶・ご説明 00:48 前回の復習 01:47 イベント本...
WordPress の theme.json について知ろう vol.1 概要編
มุมมอง 4597 หลายเดือนก่อน
※この動画は、2024年5月28日にオンラインで開催した「WordPress の theme.json について知ろう vol.1 概要編」のアーカイブ配信となります。 connpass.com/event/319395/ 【イベントの目的】 WordPress5.8で、新しいツールである `theme.json` が導入されました。 これにより、テーマやブロックがサポートする機能・レイアウト・スタイルなどの多くを、このJSONファイル一つで一元的にコントロール出来るようになりました。 一方、設定項目が非常に多いため、どのように作成・編集すればよいか分かりにくい場合があります。 このイベントでは、theme.json に対する理解を深め、テーマ開発・カスタマイズに役立てる事を目的としています。 【タイムライン】 00:00 イベントのご挨拶・ご説明 00:59 イベント本編 - テス...
WordPress6.5を試してみよう
มุมมอง 34910 หลายเดือนก่อน
※この動画は、2024年2月26日にオンラインで開催した「WordPress6.5を試してみよう」のアーカイブ配信となります。 connpass.com/event/310586/ 【概要】 2024年3月26日に、WordPress 6.5のリリースが予定されています。 イベント当日の時点では、ベータ2がリリースされている段階の予定ですが、いち早くWordPress6.5をチェックしてみたいと思います。 【イベントの目的】 WordPress5.0で、コンテンツをブロックベースで構築していくブロックエディターが登場しました。 WordPress5.9では、サイト全体をブロックベースで構築していくフルサイト編集（サイトエディター）が登場しました。 メジャーリリースを経るにつれ、目まぐるしく変化していくWordPressの最新情報をチェックし、お互いにスキルアップしていくことを目的とし...
カスタムブロック道場 vol.17 ～カスタムブロックを作らない事を考える その2～
มุมมอง 17010 หลายเดือนก่อน
※この動画は、2024年2月19日に開催した「カスタムブロック道場 vol.17」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/310152/ 【概要】 前回のイベント「カスタムブロックを作らない事を考える」では、WordPress/Gutenbergの機能を最大限に生かしつつ、カスタムブロックを作らないでやりたい事を実現するために、どのようなアプローチがあるのかを探ってみました。 今回の第2弾では、さらなるアプローチを探るために、WordPress6.5で実装される予定である「Pattern Overrides」「Custom Fields API」を使って、出来るだけコードを書かずにどのような事が出来るかを探ってみたいと思います。 番外編として、同じくWordPress6.5で実装される予定である「Interactivit...
カスタムブロック道場 vol.16 ～カスタムブロックを作らない事を考える～
มุมมอง 211ปีที่แล้ว
※この動画は、2023年11月14日に開催した「カスタムブロック道場 vol.16」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/300666/ 【概要】 これまでのイベントでは、カスタムブロックを作るための知識・技術・開発方法等を中心に開催してきました。 ブロックを開発する事はとても楽しく、やりたい事をより自由に実現出来るものではありますが、その一方でReactやJavaScriptの知識が必要となり、また作ったあとのメンテナンスも大変です。 今回のイベントでは、WordPress/Gutenbergの機能を最大限に生かしつつ、カスタムブロックを作らないでやりたい事を実現するために、どのようなアプローチがあるのかを探ってみたいと思います。 【タイムライン】 00:00 ご挨拶・ご説明 00:50 導入（なぜカスタムブロックを...
WordPress6.4を試してみよう
มุมมอง 385ปีที่แล้ว
※この動画は、2023年10月14日にオンラインで開催した「WordPress6.4を試してみよう」のアーカイブ配信となります。 connpass.com/event/297400/ 【概要】 2023年11月7日に、WordPress 6.4のリリースが予定されています。 イベント当日の時点では、ベータ3がリリースされている段階の予定ですが、いち早くWordPress6.4をチェックしてみたいと思います。 【イベントの目的】 WordPress5.0で、コンテンツをブロックベースで構築していくブロックエディターが登場しました。 WordPress5.9では、サイト全体をブロックベースで構築していくフルサイト編集（サイトエディター）が登場しました。 メジャーリリースを経るにつれ、目まぐるしく変化していくWordPressの最新情報をチェックし、お互いにスキルアップしていくことを目的と...
WordPress6 3を試してみよう
มุมมอง 432ปีที่แล้ว
※この動画は、2023年7月4日にオンラインで開催した「WordPress6.3を試してみよう」のアーカイブ配信となります。 connpass.com/event/287959/ 【概要】 2023年8月8日に、WordPress 6.3のリリースが予定されています。 イベント開催時点では、まだベータ版がリリースされている段階ですが、いち早くWordPress6.3をチェックしてみたいと思います。 【イベントの目的】 WordPress5.0で、コンテンツをブロックベースで構築していくブロックエディターが登場しました。 WordPress5.9では、サイト全体をブロックベースで構築していくフルサイト編集（サイトエディター）が登場しました。 メジャーリリースを経るにつれ、目まぐるしく変化していくWordPressの最新情報をチェックし、お互いにスキルアップしていくことを目的としています...
カスタムブロック道場 vol.15 ～WordPress 6.2とブロック開発～
มุมมอง 295ปีที่แล้ว
※この動画は、2023年3月18日に開催した「カスタムブロック道場 vol.15」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/276614/ 【概要】 2023年3月28日に、WordPress 6.2のリリースが予定されています。 様々な機能追加・変更が行われますが、今回のイベントでは細かいコードに関する事ではなく、コアブロックがどのように変わるかを、実例を交えて主に取り上げてみたいと思います。 【タイムライン】 00:00 導入のご挨拶・ご説明 01:53 これまでのイベント 02:29 今日やること 03:17 WordPress6.2のリリーススケジュール 04:49 コアブロックに関するトピック (概要) 07:18 参考資料について 11:38 ローカル環境の説明 12:48 コアブロックに関するトピック Par...
カスタムブロック道場 vol.14 ～実務におけるブロック開発の流れとポイント～
มุมมอง 2002 ปีที่แล้ว
※この動画は、2023年1月14日に開催した「カスタムブロック道場 vol.14」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/269589/ 【概要】 今回のイベントでは、 「プラグインディレクトリに公開するためにブロックを作ってみたい」 「仕事やプロジェクトでブロックを開発する事になった」 といった時に、具体的にどうやって開発していけばよいのか、実践的な流れを追ってみたいと思います。 ローカル環境のセットアップ (Docker, wp-env, Node.js) GitHubでのコード管理 他のプラグイン、ブロックとの衝突を避ける 一つのプラグインに複数のブロックを作る などのポイントを取り上げる予定です。 【タイムライン】 00:00:00 導入のご挨拶・ご説明 00:01:19 前回の復習 00:08:38 今日やるこ...
カスタムブロック道場 vol.13 ～ダイナミックブロック開発の基本～
มุมมอง 2892 ปีที่แล้ว
※この動画は、2022年12月17日に開催した「カスタムブロック道場 vol.13」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/262794/ 【概要】 今回のイベントでは、フロントエンドでコンテンツを動的に表示する「ダイナミックブロック」を開発します。 基本的な開発方法を確認するために、「現在の時刻を表示する」というシンプルなブロックを作ってみたいと思います。 また、WordPress6.1 から利用可能となった、最新でよりシンプルなアプローチ(block.jsonのrenderプロパティ)を使って開発してみたいと思います。 【タイムライン】 00:00 導入のご挨拶・ご説明 03:27 前回の復習 06:58 ダイナミックブロックとは 09:56 雛形の作成 16:19 各ファイルの解説とブロックのビルド 27:36 フ...
カスタムブロック道場 vol.12 ～アコーディオンブロックの追加開発～
มุมมอง 2222 ปีที่แล้ว
※この動画は、2022年11月26日に開催した「カスタムブロック道場 vol.12」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/262793/ 【概要】 前回のイベント(vol.11)で、基本的なコンポーネントのみを使った具体的なブロック開発の例として、シンプルなアコーディオンを作りました。 今回のイベントでは、このブロックをより使いやすくするために、 コンテンツ部分にブロックを挿入出来るようにする(InnerBlocks) サイドバーに設定項目を追加する(InspectorControls) などの追加開発を行ってみたいと思います。 【タイムライン】 00:00 導入のご挨拶・ご説明 03:28 前回の復習 07:50 サイドバーに設定を追加する 23:07 サイドバーの設定をブロックに反映させる 37:32 コンテンツに...
カスタムブロック道場 vol.11 ～アコーディオンブロックの開発～
มุมมอง 2332 ปีที่แล้ว
※この動画は、2022年11月6日に開催した「カスタムブロック道場 vol.11」のアーカイブ配信となります。 custom-block-dojo.connpass.com/event/262792/ 【概要】 今回のイベントでは、基本的なコンポーネントのみを使った具体的なブロック開発の例として、detailsとsummaryタグを使ったシンプルなアコーディオンを作ってみたいと思います。 ・どのような順番で開発していけばよいか ・block.jsonの設計方法 ・HTMLをどのようにブロックに組み込むのか などを取り上げてみたいと思います。 【タイムライン】 00:00 導入のご挨拶・ご説明 01:39 前回の復習 06:20 今日やること 08:07 使用するHTML要素の確認 11:12 エディター側の開発 30:06 attributesの適用 38:23 フロントエンド側の開...
カスタムブロック道場 vol.10 ～WordPress 6.1とブロック開発～
มุมมอง 1972 ปีที่แล้ว
カスタムブロック道場 vol.10 ～WordPress 6.1とブロック開発～
Version3のプリセットの方法を知りたいと思い動画を拝見しました。 オリジナルのtheme.jsonのデフォルトをfalseにしているのですが、動画のとおりにならないような気がしています。 何が原因なのかまた検証してみます。 なかなかブロックテーマの動画や書籍も少ない中、大変参考になります。 ありがとうございました。😃
私にとってちょうど旬な内容で、大変分かりやすい内容でした。 視聴数が少ないのが信じられない。有料でも見たい内容！ 続きの動画も引き続き見てみます。 ありがとうございます！
全3回大変勉強になり、自分でも実践してみてとても楽しかったです。 出来ないと思っていた管理画面のカスタマイズがこんなに出来たのだと感動しました。ありがとうございました。 気になったのが、theme.jsonをテーマ直下にアップすると管理画面だけでなくフロントエンド側もCSSが当たってしまうのですが、そういうものなのでしょうか。 例) "contentSize": "620px”,がそのままフロントエンド側のコンテンツ幅という形で上書きされてしまったような形です。 CSS↓ body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; } 同じようにstyles: {}で定義した内容などもそうなってしまうのですが、回避する方法はありますでしょうか。 elementsの中のlinkに定義した色が、影響を出したくない他のaタグのカラーにもなってしまっている。(ヘッダーナビゲーションなど) 長文失礼いたしました。
視聴ありがとうございます。 >theme.jsonをテーマ直下にアップすると管理画面だけでなくフロントエンド側もCSSが当たってしまうのですが、そういうものなのでしょうか。 はい、そういうものです。theme.jsonで定義されたCSS変数やスタイルは、エディターとフロントエンドの両方で出力されます。 エディター・フロントエンドで別々にスタイルを定義する事なく一括で行えるということが、theme.jsonを導入する事の大きなメリットだと思います。 > elementsの中のlinkに定義した色が、影響を出したくない他のaタグのカラーにもなってしまっている。(ヘッダーナビゲーションなど) styles.elements.linkの色がすべてのaタグに対して適用されるのは仕様なので、影響を与えたくないaタグがあれば別途上書きする必要があります。 例えば、ナビゲーション内のaタグの色のみを変えたい場合は、styles.blocks.core/navigation.elements.linkを使用します。
@@akihamano2805非常に丁寧に解説いただきありがとうございます。 確かにフロントエンドと管理画面を同一の見た目にできることが魅力ですね。管理画面側の機能のオンオフはフックなどで部分的にやってみたいと思います。
学びの多い動画のアーカイブを残していただきありがとうございます！１点私の環境では異なる点がありましたので、ご教示いただけましたら幸いです。エラー表示画面が動画内のデザインのように表示されないのですが、なにかエラー解析のためのツールなどが必要なのでしょうか。よろしくお願いします。🙇
ご視聴ありがとうございます。「エラー表示画面」との事ですが、動画内の何分何十秒の箇所に写っている画面の事か教えていただければ幸いです。
@@akihamano2805 お返事ありがとうございます！18:48頃の画面です。ご確認よろしくお願いいたします🙇
@@村井勇-q6v PHPのエラー画面についてですね。どのようなフォーマットでPHPエラーが表示されるかはローカル環境やサーバの設定に関係しますが、動画を録画した当時は自分の環境でXdebugが有効になっていたため、このようにテーブル形式で表示されたのだと思います。 形式が違っても、同じエラーメッセージが出ていれば問題ありません。 動画のようにテーブル形式でエラーを表示する方法や、そもそもXdebugとは何かを詳しく知りたい場合は「Xdebug PHP」などで調べてみてください。
@@akihamano2805Xdebug は使ったことがありませんでした！ご丁寧にありがとうございます！
こんにちは。とても貴重な動画をありがとうございます。 ローカル環境にてcreate-blockして確かにCode is Poetryとでてプラグインも出てきたのですが、有効化してもグーテンベルクエディターにブロックが出てきません。 wpのバージョン下げたり試行錯誤してるのですが原因わかりますでしょうか😢
こんにちは。これは、create-blockコマンドで実行される処理の中で「@wordpress/scripts」というライブラリがあるのですが、この最新バージョンで互換性に関する問題があるからです。 このscriptsのバージョンを27.9.0に下げれば解決すると思います。 create-block を実行した後に、生成されたディレクトリの中で「npm install -D @wordpress/scripts@27.9.0」を一度実行してください。 問題の詳細は、こちらのGutenbergリポジトリのissueで確認できます。 github.com/WordPress/gutenberg/issues/62202
@@akihamano2805 ありがとうございます！ まだうまくいっていないのですがもしかするとnodeのバージョンが現在の最新のものなので高すぎるのかもしれません。 少し情報を集めてみます。
大変勉強になります。 ありがとうございます。
これは独自のブロックが作れるようになるための一筋の光なのか、、、
今reactとnextjsを学んでるからこそ見返したらとても有難い動画の内容をありがとうございます。 リアタイできたら今後も見ていきたいです。
コメントありがとうございます。今のところ次の開催は未定ですが、開催する事が決まった場合はぜひご参加お待ちしております。
分かりやすい解説ありがとうございます。 開発には ・windows ・local ・vscode ・wsl2 の環境で行われているでしょうか？ また、本番環境へのファイル更新などはどう行われていますか？ 根本的な開発環境のおすすめを教えて頂けると幸いです。よろしくお願いします。
こんにちは。 開発環境ですが、OSはWindows11、コードエディターはVSCodeです。 ローカル環境については、ホストPC上ではLocal (by Flywheel)、WSL2上ではwp-envと使い分けています。 （この配信では、ホストOS上でLocalを使用しています。） 今後本格的な開発を見据えるなら、Windowsの場合はWSL2上でwp-envを使用する事をお勧めします。 本番環境へのデプロイについては、wp-scriptのplugin-zipコマンドまたは自前でzipファイルを作成して、管理画面のプラグイン新規追加からそのzipをアップロードすれば、更新出来ると思います。
@@akihamano2805 ありがとうございます。ほかの言語でも開発をしていて、仮想化の方法には悩んでもいました。 今はVMのWin上でLocal (by Flywheel)、git、VSCodeを動かしています。 あんまり思うように動かないので、WSL2を使ってみようと思います。 gitはubuntuに入れて、VSCodeにgit branchを入れたら見やすいですかね。。。 wp-envはDockerのようですね。ありがとうございます。 デプロイはsshでファイルをそのままサーバーにあげていました。。。 ありがとうございます。さらに調べてみます。
勉強になっております
サバイバルTypeScriptの著者のひとりです。本書を取り上げていただけて大変嬉しいです！
こちらこそ、素敵なドキュメントをありがとうございます！
░p░r░o░m░o░s░m░