qrac / qroko Goto Github PK

• Webhooksを1ボタンで起動させられるようにする
• Webhooks URL設定画面の設置
• できれば動作反応

Snow Monkey Blocksなどのカスタムブロックを使った場合のCSS崩れを修正する。

• Snow Monkey Blocks – WordPress テーマ Snow Monkey

各サイトに入れたテーマをアップデートして回るのが大変なので、公式ディレクトリにあげてみる。また、その際に見た目以外のテーマファンクションは入れられないと予想されるため、プラグインとして分離させて公式ディレクトリにあげる。

• 開発ディレクトリ：develop
• 分離させるプラグイン（仮）：qroko-functions

ページ新規作成時のテキストエリア（Placeholder）が明朝体なのでゴシック体にする。

.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
  font-family: "Noto Serif",serif;
}

一応実装。new.cssと同じ形で出力。タイトルをリンクにしないため、Homeは固定。

全部WPアイコンなのも微妙なので。

デフォルトだと折り返さずレイアウトを崩している。

Gutenbergは投稿画面に下余白が40vhあり、記事内容をスクロールして確認しやすい。下に余白が無いと下部の文章を読むのが辛くなる。このWordPressテーマは記事確認用でフッターコンテンツも無いため、余白を追加した方が良いと考える。

• ディレクトリ構成をCompota（Reactプロジェクト）に寄せる
• Qroko Blocksの利用を想定したCSS調整
  • CSS Variablesへのプレフィックス付与
  • CSS Variablesのフォールバック機能を活用

単純にPタグ出力されてるので、薄めて小さくする。更新日も表示させておく。

WordPressで何もプレビューできないのは不便だったので、Gutenbergで組んだものがだいたいどんなものになるのか、最低限プレビューできるようにしておきたい。

headless CMSとしての運用ではコメントを扱わない場合がほとんどなので、管理画面のコメント関連メニューは非表示にする。もしくは切り替えるオプションを実装。

• Headless Mode – WordPress プラグイン | WordPress.org 日本語

上記プラグインを使わなくてもリダイレクトできないかテスト。

new.css JetBrains Mono を導入しデザイン・CSS構成を見直し。

• new.css
• JetBrains Mono

デフォルト値がテーマ有効化時点で効いていないのでnullに設定し直す。

初動としては良かったものの、new.cssをそのまま利用していくには辛い部分も見えてきた。

• box-sizing: border-box; になっていない部分が他のブロックプラグインに影響を与えている
• ヘッダーが日本語だと絵的に締まらない感じになっている
• テキスト選択CSSが少し不自然

依存を解除して独自CSSで書き直す。もしくは別途CSSフレームワークを作る。

WordPress v5.4.2時点では、テーマのみで管理画面のダークモードを実現させるのは現実的でない。

• WordPress本体が対応していない
• 各ブロックプラグインがダークモードに対応していない

WordPress本体をダークモード対応させるプラグインを使いつつ、対応していないブロックプラグインを排除。その上でテーマのダークモードCSSを出力すれば満足なダークモードになるだろう。

現時点では不確定要素が多く、自動でダークモードCSSを出力すると管理画面の色味がチグハグになりがちなので、オプションとして切り分けておいた方が良いと考える。

ビルド後サイトと近いサイト幅をカスタマイザーで設定できるようにする。Gutenberg・プレビューに反映。

• 変数をQroko Blocksなどで使いやすい形に調整
• ファンクションを無名関数メインに書き換え
• ディレクトリ構成を最近の制作業務に寄せる

• サイトメタデータ
• メニュー
• ウィジェット（使うかまだわからない）
• カスタマイザー（使うかまだわからない）

固定ページのプレビューが index.php を参照してしまっているので修正する。

デプロイ先によってはアイキャッチをトップに設置する場合があるため、イメージしやすくする。

管理画面の配色がライトテーマだとJAMstack Deploymentsのデプロイボタンが見えないので、オーバーライドCSSを書いておく。

ACFの日本語メニューが「カスタムフィールド」となっていて、長くダサいので「ACF」に修正する。もしくは修正できるオプションを実装。

基本的に本番はSans-serifが多いので設定で見た目を切り替えたい。