2024年3月 WordPress Meetup 開催情報

2024年3月に開催される WordPress Meetup をご紹介します。

オンラインイベントではエリア外からの参加者を積極的に歓迎しているグループもありますので、気になるトピックがあれば詳細を確認してみることをおすすめします。

今後追加されるイベントについては、ダッシュボードウィジェットやお近くの WordPress Meetup グループもチェックしてみてください。

以下に、2月と1月に開催されたイベントの情報もご紹介します。


2024年2月に開催された WordPress Meetup


2024年1月に開催された WordPress Meetup


#community, #learn-wordpress, #meetup

Locale Manager & GTE の変更について

2024年1月から、@nao および @odysseygate さんの2名が Local Manager (ロケール管理者) の役割を離れ、新たに @atachibana さんと @nukaga さんをお迎えすることとなりました。合わせて GTE (General Translation Editor/一般翻訳編集者) の交代も行いました。お二人はこれまでも翻訳やコミュニティなどの分野で長年、コントリビュートをされてきました。今後もよろしくお願いします。

参考資料

今後もコミュニティの持続と発展のため、コミュニティ役務の新しい担当者を増やし役割分担を進めていく予定です。

2024年2月 WordPress Meetup 開催情報

2024年2月に開催される WordPress Meetup をご紹介します。

オンラインイベントではエリア外からの参加者を積極的に歓迎しているグループもありますので、気になるトピックがあれば詳細を確認してみることをおすすめします。

今後追加されるイベントについては、ダッシュボードウィジェットやお近くの WordPress Meetup グループもチェックしてみてください。

以下に、1月と12月に開催されたイベントの情報もご紹介します。


2024年1月に開催された WordPress Meetup


2023年12月に開催された WordPress Meetup

#community, #meetup

2024年1月 WordPress Meetup 開催情報

2024年1月に開催される WordPress Meetup をご紹介します。

オンラインイベントではエリア外からの参加者を積極的に歓迎しているグループもありますので、気になるトピックがあれば詳細を確認してみることをおすすめします。

今後追加されるイベントについては、ダッシュボードウィジェットやお近くの WordPress Meetup グループもチェックしてみてください。

以下に、12月と11月に開催されたイベントの情報もご紹介します。


2023年12月に開催された WordPress Meetup


2023年11月に開催された WordPress Meetup


#community, #meetup

ja.wordpress.orgのデザイン調整について

今年の夏頃からWordSlack( wpja.slack.com ) 上で相談していた新しい wordpress.org テーマの日本語へのローカライズについて、12月13日に有志数名でオンラインミーティングを行い今後の方針を話し合いました。その内容と、今後の方針について共有します。

ミーティングの参加者:

@nao, @nukaga, @atachibana, @wildworks, @rocketmartue, @mimitips

これまでの経緯

すでに、英語版のWordPress.org (https://wordpress.org/)で適用されている新テーマについて、そのGitHubリポジトリ上でさまざまな相談が行われています。その一つのIssueのコメントで以下の投げかけがありました。

既存のタイポグラフィが(ロゼッタ)サイトにとって機能しない場合、代替案を追加したり、より良いフォールバックを追加したりすることができると思います。問題があるサイトはありますか?

https://github.com/WordPress/wporg-main-2022/issues/266#issuecomment-1652271431

これに対し、ロゼッタサイトのひとつである日本語版(ja.wordpress.org)において、文字のサイズやline-height等を調整するデザイン案を作成し、独自のCSS等を当てる調整をしたい要望を提案しています。

さらに詳しい経緯を知りたい方は該当のIssueの続きを参照してください。
https://github.com/WordPress/wporg-main-2022/issues/266#issuecomment-1652271431

この議論を前に進めるために、オンラインMTGを行いました。その内容は以下の通りです。

議事録

以下、議論の内容を主に箇条書きでまとめます。

そもそもロゼッタサイトとはなにですか?

  • xxxx.wordpress.orgxxxxja, de, es とかの多言語化されたものを指す
    https://make.wordpress.org/polyglots/handbook/for-locale-managers/rosetta-expectations/#what-is-a-rosetta-site-what-about-forums

各ローカルコミュニティの管理権限の現状について

  • 誰が担当者かなどは以下に一覧がある https://make.wordpress.org/polyglots/teams/?locale=ja
  • ロケールマネージャー等の権限ではサイトのデザインに関する変更の権限は現状無い様子
    • 追加CSSなどの機能が使えない状態であることが判明

期限とコストの問題について

  • 新しいテーマをなるべく早くja.wordpress.orgに適用したい
  • ある程度時間が立つと(デザインが崩れていようがいまいが)新しいテーマに切り替えられる予定である
  • 日本語版のみの問題を解決する方法をまずは探ったほうが短期的な解決には良さそう
  • 長期的に見ると、今後多言語化の機能の話をするのであれば、もっと非ラテン言語でのこれらの現状について積極的に声を上げる必要があるのではないか?
  • 短期的な方法を現実的な方法として進めて、(余裕があれば)長期的なアプローチも検討してみるのが良いのでは?

どのようにローカル用のスタイルを適用するべきか

下記の3通りの方法が相談されました。

  1. 該当のテーマのリポジトリに言語で切り分けてスタイルを追加するプルリクエスト(以下PR)を作成する
  2. wordpress.orgのWordPress上のカスタマイザーまたは(サイト)エディター上の追加CSSを使用できるように掛け合ってみる
  3. 専用のプラグインを作成し、wordpress.orgのリポジトリへPRを作成する
    • 過去、ローカルのサイトにプラグインの追加等GUI上で直接CSSの追記ができるように許可されたことは?
      • 記憶の限りでは無いはず
    • 全体の問題を解決する方法として良いアプローチだが現状を踏まえると様々な調整が必要で実行には時間がかかりそう

スタイルをどこまで書くか

  • CSSの変数を書き換えればある程度調整効くのでは?
    • ex. --wp--preset--font-size--heading-cta: 90px;
  • 加えて、まずはトップページだけは調整するのが良いのでは
  • 残りの下層ページについては時間をかけるかさらにコントリビューターを募って進めていけたら

TODO

  • Issueでtest.wordpress.orgの権限を相談してみる – 濵野さん @wildworks
    • 承認されたら、GUIの追加CSSを有効化する手段を探る
  • デザイン等で貢献したい人には呼びかける (この記事)
    • トップページのテスト
    • 下層ページのテスト、CSS 提案
    • 翻訳の調整(必要であれば)
  • デザイン(Figma): トップのデザインでリードの長いバージョンに合わせて調整しなおす – 順子さん @nukaga
  • CSSを共同で書き始める場所を作る – @mimitips

作業を手伝いたい方を募集しています

というわけで、なるべく早く新デザインに移行するために上記の方針で作業を進める予定ですが、今後に向けて、以下のような作業が必要となる見込みです。これらについて協力してくださる方があると助かります。

デザイン提案や動作テスト

下層ページのスタイルを確認し、不具合や必要な調整がないかチェックします。必要であれば、追加のデザインの提案する作業が発生する可能性があります。

CSSを記述する

上記に関連して実際のCSSを記述してPRを作成する作業が発生する可能性があります。

翻訳について

CSSのみで修正できないスタイルについて、GlotPress上で調整する作業が発生する可能性があります。

今後について気になる方、手伝ってみたい方がいらっしゃいましたらぜひ該当のSlackチャンネル等でお声がけください。日本語のSlackチャンネルの参加方法はこちらを参照ください

#design

2023年12月 WordPress Meetup 開催情報

2023年12月に開催される WordPress Meetup をご紹介します。

オンラインイベントではエリア外からの参加者を積極的に歓迎しているグループもありますので、気になるトピックがあれば詳細を確認してみることをおすすめします。

今後追加されるイベントについては、ダッシュボードウィジェットやお近くの WordPress Meetup グループもチェックしてみてください。

以下に、11月と10月に開催されたイベントの情報もご紹介します。


2023年11月に開催された WordPress Meetup


2023年10月に開催された WordPress Meetup


#community, #learn-wordpress, #meetup

2023年11月 WordPress Meetup 開催情報

2023年11月に開催される WordPress Meetup をご紹介します。

オンラインイベントではエリア外からの参加者を積極的に歓迎しているグループもありますので、気になるトピックがあれば詳細を確認してみることをおすすめします。

今後追加されるイベントについては、ダッシュボードウィジェットやお近くの WordPress Meetup グループもチェックしてみてください。

以下に、10月と9月に開催されたイベントの情報もご紹介します。


2023年10月に開催された WordPress Meetup


2023年9月に開催された WordPress Meetup


#community, #learn-wordpress, #meetup

Core Contributor Handbook の日本語版が公開されました

Core Contributor Handbook の 日本語版作成がこちらの記事で提案されましたが、全ページの翻訳が完了し、日本語版ハンドブックとして公開されました。

原文との差異や誤りを見つけた方は、ぜひ コアハンドブック翻訳用 GitHub リポジトリまたは WordPress 日本語 Slack の #docs チャンネルでご連絡ください。

関連リンク


賛辞: 翻訳作業に貢献された @atachibana さん、 @azuma3derive さん、 @mimitips さん、 @nano195 さん、 @nao さん、 @nukaga さん、 @osamunize さん、 @torikumo さん。そして、GitHub 上での翻訳作業のために使用した wp-handbook-converter の開発者である @mirucon さん。

#docs

theme.json でのカスタム設定の追加と利用

原文
https://developer.wordpress.org/news/2023/08/adding-and-using-custom-settings-in-theme-json/
Justin Tadlock
2023年8月31日

私が theme.json で気に入っている機能のひとつが、「カスタム設定」のサポートです。ブロックシステム上での最も強力な構築方法のひとつですが、テーマ作成コミュニティではあまり活用されていません。

他のほとんどの theme.json プロパティとは異なり、カスタム設定は、インターフェイスのコントロールや、ユーザーが操作できる何かとは結びついていません。その動きを考えると「設定」という言葉さえ、少し無理を感じます。

カスタム設定が行っているのは実際には、WordPressがエディターやフロントエンドで出力する、CSSカスタムプロパティ (別名 CSS 変数) の設定です。

この記事では、カスタム設定がどのように機能し、何ができるのかを一緒に探索します。また実践的な例も見ていきます。この記事を読み終える頃には、その可能性を理解し、自分のテーマ内でユーザーに提供可能な限界に挑戦し始めることを願っています。

カスタム設定の動き

テキストシャドウに、サイト全体でひとつのグローバルな値を使いたいとします。伝統的なスタイルシートであれば、以下のようにCSSを記述します。

body {
	--text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.3 );
}

そうしたければ、この書き方を続けても何の問題ありません。しかし、私は WordPress 流の方法をお勧めします。

早速、試してみましょう。まず、theme.json ファイルに以下のコードを追加します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"custom": {
			"textShadow": "2px 2px 2px rgba( 0, 0, 0, 0.3 )"
		}
	}
}

WordPress は自動的に CSS カスタムプロパティを生成し、フロントエンドとエディターの両方に読み込みます。結果のCSSコードは次のようになります。

body {
	--wp--custom--text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.3 );
}

カスタム CSS と WordPress が生成する CSS の違いはなんでしょう ? それは CSS カスタムプロパティの名前です。

この名前は theme.json から来る他のプリセット (カスタムフォントサイズ、スペーシングスケール、色など) に従います。例えば、パレットにある色の CSS カスタムプロパティ名は --wp--preset--color--{$slug} です。

つまりこの機能は、標準的な命名規則に従った CSS カスタムプロパティを作成します。

ヒント: WordPress は生成された CSS の中で、自動的にキャメルケースのプロパティをハイフン形式に変換します。たとえば textShadow は text-shadow になります。数字も大文字と同じように扱われることに注意してください。

なぜ WordPress 規約に従うのか ?

CSS のカスタムプロパティを作成するだけなのに、なぜ WordPress の標準に従わなければならないのでしょう ? 自分しか使わないのに。

経験則から言うと、できる限り WordPress の組み込み機能を使うべきです。そうすればより多くの機能やツールにアクセスできます。カスタム設定も同じです。

いくつか例を挙げてみます。きっとメリットがわかるはずです !

グローバルスタイルのバリエーションと子テーマでの上書き

カスタム設定を使用すると、グローバルスタイルのバリエーションや子テーマで、簡単に値を上書きできます。

上の text-shadow の例を思い出してください。テーマのバリエーションから上書きしてみましょう。新しい /styles/example.json ファイルを作成し、次の JSON コードを追加します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Example",
	"settings": {
		"custom": {
			"textShadow": "2px 2px 2px rgba( 0, 0, 0, 0.7 )"
		}
	}
}

「外観」 > 「エディター」 > 「スタイル」で、例のスタイルバリエーションを保存すると、WordPress は /styles/example.json の settings.custom.textShadow の値を使用して、以下の CSS を出力します。

body {
	--wp--custom--text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.7 );
}

上書きはほんの始まりに過ぎません。カスタムバリエーションや子テーマのために (そして子テーマの中で)、まったく新しいプロパティも定義できます。

ブロックごとのカスタムプロパティ

WordPress の方法で行うことで、特定のブロックのためのカスタムプロパティも書けます。自身のグローバル設定をブロックレベルで上書きすることさえできます。

例えば、見出しブロックが使用されているときに text-shadow プロパティを変更したいとします。それには、settings.blocks[core/heading].custom.textShadow を使用します。以下を試してみてください。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"custom": {
			"textShadow": "2px 2px 2px rgba( 0, 0, 0, 0.3 )"
		},
		"blocks": {
			"core/heading": {
				"custom": {
					"textShadow": "2px 2px 2px rgba( 0, 0, 0, 0.7 )"
				}
			}
		}
	}
}

WordPress は以下の CSS を生成します。

body {
	--wp--custom--text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.3 );
}

.wp-block-heading {
	--wp--custom--text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.7 );
}

theme.json データのフィルタリング

より高度な使用例として、theme.json 関連のフィルターフックと関数を通して、設定にアクセスできます。例えば、wp_theme_json_data_theme をフィルタリングして、動的にデータを変更できます。

詳しくは「サーバーサイドフィルタを使用して theme.json データを変更する方法」を参照してください。

カスタム設定とブロックプラグインの統合

ブロックプラグインの中には、テーマが CSS カスタムプロパティのデフォルト値を定義できるものもあります。もちろん、プラグインはカスタムプロパティを使用し、 theme.json と互換性のある方法で名前を付けなければなりません。

ここで、架空のサードパーティ製ブロック「Super Duper」のサポートを追加したいとします。その CSS にはカスタムプロパティがあり、ブロックのデフォルトの高さを設定し、CSS フィルタを適用します。

.wp-block-super-duper {
	height: var( --wp--custom--super-duper--height, 1rem );
	filter: var( --wp--custom--super-duper--filter, blur( 8px ) );
}

まず最初に、テーマのことを考え、CSS カスタムプロパティを名前空間化してくれた、プラグイン作者に感謝しましょう。

サードパーティのブロックが存在すれば、theme.json でheight と filter プロパティをカスタマイズできます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"custom": {
			"superDuper": {
				"height": "1.5rem",
				"filter": "grayscale( 100% )"
			}
		}
	}
}

このテクニックを使用したブロックプラグインはあまり見かけませんが、ないわけではありません。私の希望は、これがブロック開発のスタンダードになることです。

ヒント: あなたはブロック開発者ですか ? テーマの作者たちは、あなたのコードと簡単に統合できることを熱望しています。このテクニックの詳細については、「ブロックのスタイリング: CSS カスタムプロパティでユーザーに力を」の「テーマの互換性に関する注意」を参照ください。

実際的なユースケース: フォーム入力のスタイリング

theme.json 内でいくつかのベースとなる要素やブロックをスタイリングするだけでも、かなりのことが可能です。しかし、WordPress のコア内で得られるデザインツールに限られます。それ以上を望むのであれば、カスタム設定の利用が必要です。

たとえば theme.json は標準的なデザイン機能でのフォーム要素のスタイリングをサポートしていません。実はこれは私の悩みの種の1つでもあります。

より良いフォーム処理に努めているコントリビューターもいます。しかし、目の前に締め切りが来ている状況では、次のリリースを待ってはいられないでしょう。そこで、settings.custom で基本的なサポートを追加する方法を説明します。

theme.json 内でのカスタムプロパティの作成

サンプルコードが複雑にならないように、少ない色数で試します。ここでは <input><select><textarea> 要素にテキスト色、背景色、ボーダー色を追加します。もちろん、これをタイポグラフィや影、他の任意の CSS 仕様に拡張できます。

まず、使いたい3色を選びましょう。ここではグレーのミックスにします。

ログインフォームの例。青い背景、白いフォーム、グレーの入力フィールド

theme.json の settings.custom.formInput オブジェクトの下に色を追加します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"custom": {
			"formInput": {
				"color": "#000000",
				"background": "#f1f5f9",
				"borderColor": "#e2e8f0"
			}
		}
	}
}

コードの中の変化に気づきましたか ? これまでの例では settings.custom オブジェクトの直下にカスタムプロパティと値をネストしていました。この theme.json コードでは、別のネストオブジェクトを追加し、フォーム入力用のすべての CSS カスタムプロパティをまとめてグループ化しています。

そして、これが WordPress が出力するCSSです。

body {
	--wp--custom--form-input--color: #000000;
	--wp--custom--form-input--background: #f1f5f9;
	--wp--custom--form-input--border-color: #e2e8f0;
}

WordPress は適切な入れ子で、プロパティ名を生成します。すべての正しいレベルを順番に追加し、2つのハイフンでつなぎます。

settings.custom の中には、好きなだけネストを増やせます。しかし、あまりやり過ぎない方がいいでしょう。レベルが増えれば増えるほど、CSS カスタムプロパティ名は長く複雑になります。

CSS でのカスタムプロパティの使用

次のステップはこのカスタムプロパティを使用する番です。つまり、CSS ファイルのどこかにコードを貼り付けます。ところでこのチュートリアルではスタイリングに必要なすべてを、テーマのプライマリ style.css ファイルで読み込むと仮定しています。

ですので、以下のコードをテーマの style.css に追加します。

input:where( :not( [type=checkbox] ):not( [type=radio ] ) ),
select,
textarea {
	color: var( --wp--custom--form-input--color, inherit );
	background: var( --wp--custom--form-input--background, transparent );
	border: 1px solid var( --wp--custom--form-input--border-color, currentColor );
	/* Other CSS rules... */
}

もちろんフォーム全体のスタイリングを整えるには、おそらく CSS を刷新したいところでしょう。このコードは、サンプルとして定義したカスタムプロパティの使い方を紹介することのみを目的としています。

テストでは「Login/out」コアブロックを使用しています (フォーム表示のためログアウトした状態)。サンプルとしてはちょっとまずい選択だったかもしれません。WordPress 6.3 でも、このフォームのスタイリング (の欠如) はいまイチです。

今できるところを対処しましょう。以下の CSS を使用して、Login/out ブロックのレイアウトを使えるものにします。

.wp-block-loginout form {
	display: grid;
	grid-template-columns: repeat( 1, 1fr );
	gap: var( --wp--style--block-gap );
}

.wp-block-loginout form > * {
	margin: 0;
}

.wp-block-loginout form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
	box-sizing: border-box;
	display: block;
	width: 100%;
}

ただしこのコードはブロックのレイアウト問題を修正するだけです。その他のスタイルルールは、あなたの宿題とします。

子テーマ、またはスタイルバリエーションでの上書き

子テーマの theme.json ファイル、またはテーマの /styles フォルダ内のグローバルスタイルバリエーションで調整してみましょう。どちらの方法でも同じ結果になります。

ここでは以下の JSON コードを、任意の子テーマの theme.json に追加しました。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"custom": {
			"formInput": {
				"background": "#f0ebe4",
				"borderColor": "#e9e1d8"
			}
		}
	}
}

コードをよく見ると、親テーマの theme.json で定義されていた settings.formInput.color プロパティが欠けていますが、これは意図的なものです。WordPress の theme.json システムは階層構造になっていて、プロパティは親レベルから継承されます。

WordPress は親と子の両方の theme.json ファイルからデータを取得して、以下の CSS を生成します。

body {
	--wp--custom--form-input--color: #000000;
	--wp--custom--form-input--background: #f0ebe4;
	--wp--custom--form-input--border-color: #e9e1d8;
}

子テーマを有効化するとフォームは以下のようになります。

ログインフォームの例。紅褐色の背景、明るい茶色のフォーム、少し暗い入力フィールド

この方法は私がテーマでカスタムスタイルルールを追加する際に、常用するテクニックのひとつになりました。私は常に子テーマの作者が、この簡単なカスタマイズ方法を理解することを希望します。これは非常に柔軟性のある強力な機能です。あなたのテーマでも試してみてください。

Props to @marybaum and @bph レビューとフィードバックに対して

タグ:

Block themesClassic themestheme.json

FSE プログラムのテスト募集 #26: 最後の仕上げ

以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #26: Final touches」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


これは26回目の、そしておそらくはタイトルが示すとおり、最後のフルサイト編集アウトリーチプログラムのテスト募集です。この実験的なプログラムについての詳細情報は FAQ と 今後の展開 を参照ください。 楽しく参加するために Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などが共有されます。

概要

WordPress 6.4のリリースを目前に控え、今回のテスト募集では、このリリースで実装される主要な機能の多くを紹介します。

フレーム作り

あなたは新しい写真のポートフォリオを立ち上げることにしました。今後数ヶ月をかけて、さらにコンテンツを追加する予定ですので、あらかじめきちんと整理し、将来、新しいフォントやパターンを使用した変更や追加に対応したいところです。しかしサイトを立ち上げたばかりでどのように完成させればよいのか、そのビジョンはまだありません。

テスト手順

Gutenberg のバージョンが短期間で切り替わるため、このテストではあらかじめ準備された構築済みのサイトを使用してください。

  1. 次のリンクを1度だけ開く: https://app.instawp.io/launch?t=fse-testing-call-26&d=v2
  2. このリンクを何度も開かないでください。開くたびに新しいサイトが作成されます。作成できるサイトには50の制限があります。
  3. 「Launch Demo」が表示される場合は、これをクリックする。
  4. 最大24時間使用できるサイトが起動します。「Magic Login」をクリックして、管理画面にログインする。
  5. 「Settings」 > 「General」にアクセスし、「Site Language」で「日本語」を選択し、「Save Changes」をクリックする。画面表示が日本語に切り替わります。
  6. 「ダッシュボード」 > 「更新」にアクセスし、末尾の「翻訳を更新」をクリックする。 注意: それでも一部、日本語への翻訳が追いついていないものがあります。
  7. テスト中に再度アクセスできるように、サイトへのリンクを保存する。

フォントの管理

  1. 「外観」 > 「エディター」 > 「スタイル」にアクセスし、鉛筆アイコンを選択し、スタイルパネルを開く。
  2. 「タイポグラフィ」を選択してアクティブなフォントのリストを表示し、「Aa」アイコンをクリックして「フォントの管理」を開く。
  3. ドラッグ & ドロップで新しいフォントファイルをアップロードする。https://fonts.google.com/ からフォントをダウンロードできます。
  4. フォントマネージャーから、アップロード済みのフォント「Inclusive Sans」を選択し、「削除」を選択してアンインストールする。
  5. フォントマネージャーを終了し、見出しとテキストのフォントオプションをアップロードした新しいフォントに変更する。
  6. 変更を保存する。

サイトの整理

  1. 「Command + K」を押すか、トップツールバーフィールドをクリックしてコマンドパレットを開き、これを使用してリストビューを開く (詳細な手順は意図的に省略します)。
  2. 「Want to work with me?」を含むカラムブロックを選択し、再びコマンドパレットを使用して、このブロックをグループ化する。
  3. この段階でページ上には、2つの異なるグループブロックが表示されるはずです。それぞれを選択し、リストビューの縦の3点リーダーメニューを使用して「名前を変更」オプションから、それぞれに異なる名前を付けます。

パターンの作成

  1. 新しく名前をつけた「Want to work with me?」グループブロックを選択し、ブロックの設定を開く。
  2. 「スタイル」タブで、メディアライブラリから白黒の背景画像を追加する。必要に応じてテキストの色を調整する。
  3. 縦の3点リーダーメニューを使用して「Want to work with me?」用の新しい同期パターンを作成し、好みのカテゴリーを追加する。

ポートフォリオページの仕上げ

  1. コマンドパレットを使用して、固定ページの下書きで、タイトル「Portfolio」を開く。これからこのページに「人物あり」、「人物なし」、「モノクロ」の3つのセクションを作成し、このセクションに沿ってすでにリストされているすべての写真を紹介します。
  2. 好きな方法で、非同期パターンの「Portfolio section」を追加する (左上の「+」ボタンをクリックしてインサーターを使用するか、または「/」オプションのクイックインサーターを使用する)。
  3. このパターンと提供されるデフォルトのコンテンツを使用して、それぞれの詳細を記入する。適切な見出し、説明、他の画像と同じ縦横比に設定した画像、残りのギャラリー項目など。サンプルの画像がこちらにあります。
  4. 上の手順に従って、3つのセクションをすべて作成する。 「人物あり」、「人物なし」、「モノクロ」。
  5. 各見出しのフォントを、スタイルで最初に設定したグローバルオプションとは異なるものに変更する (そしてすべてのオプションが表示されることを確認する)。
  6. リストビューを開き、画像とギャラリーのプレビューを参考に、ドラッグ & ドロップで各セクションを別の順番に並べ替える。
  7. 仕上げとして、各セクションの最初の単一の画像を選択し、ブロック設定サイドバーを開き、「クリックで展開」オプションをオンにする。

テンプレートの切り替え

  1. 完了したら「ブロック設定」を開き、「ページ」タブで「テンプレート」の隣にある「固定ページ」を選択する。
  2. 「テンプレートを編集」または「テンプレートを交換」オプションが表示されます。「テンプレートを交換」を選択し、「Portfolio」オプションを選択する。
  3. 保存する前に、ページのステータスを「公開」に変更する。
  4. 変更を保存する。
  5. コマンドパレットを使用してサイトを表示する。新しいポートフォリオページが自動的にメニューに含まれています。また各セクションの最初の画像にカーソルを合わせると、拡大して単独で表示するオプションがあります。

新しいポートフォリオのアナウンスと、Like ボタンの削除

  1. サイトエディターに戻り、コマンドパレットを使用して、新しい投稿を追加する。
  2. 投稿のタイトルを「ポートフォリオのアナウンス」とし、簡単な説明を書き、リストブロックで各ポートフォリオセクション 「人物あり」、「人物なし」、「モノクロ」を並べる。このときブロックツールバーがリスト内の個々の項目ではなく、常にリスト全体の上部ににとどまっていることに気づいてください。
  3. 投稿を公開して、参照し、投稿にコメントを残す。「Like」ボタンがあることに注意してください。
  4. 投稿エディターに戻り、コマンドパレットを使用して、個別投稿テンプレートを開く。
  5. リストビューを使用してコメントテンプレートを選択し、ブロック設定を開く。「プラグイン」セクションの「Like」ボタンオプションがオンになっているので、このオプションをオフにして、変更を保存する。

さらにその先へ

サイトを表示し、あちらこちらをクリックし、自由に追加、変更を加えてください。新しい投稿を作成したり、新しいパターンを作成したり、サイトのスタイルを調整したり。6.4で追加される新機能を中心に、さらにいろいろと探索してみてください。

注意する点:

  • どこかでクラッシュしませんでしたか ?
  • 保存した際、正しく保存できましたか ?
  • テストで困った点、イライラした点はありませんか ?
  • テストで楽しかった点、いいねと思った点はありますか ?
  • もっとサイトの構築や新しいコンテンツの執筆が楽になるには何があればよいですか ?
  • 作成したページは、サイトで表示された場合にマッチしていますか ?
  • キーボードだけで動作しましたか ?
  • スクリーンリーダーだけで動作しましたか ?
  • 携帯デバイスだけで動作しましたか ? 問題があれば、@nomadskateboarding を呼んでください !

フィードバックをお願いします (2023年10月9日まで)

#fse-testing-call


Thanks!

この記事は、 @mimitips の協力により公開することができました。ありがとうございます。