Elementor（エレメンター）だけでなく、グーテンベルクでの編集にも対応できる「OceanWP」ですが、ブロックエディタの編集画面で、他のテーマにはあるのに表示されない項目があることが気が付きました。
それはカバーブロックのスタイル設定。ワードプレス6.1あたりから実装された機能で、カバーブロックの枠線やマージン、パディングが設定できるのですが、この部分は使っているテーマに依存する部分のようで、「OceanWP」でも表示がありません。※他のテーマからコピー＆ペーストしてきたコードは、設定を保持したまま表示されますが、カスタマイズの項目が表示されないのでカスタマイズができません。
カバーブロックで枠線が設定できると、項目を角丸のフレームで囲めるので、ブロックを使わないので便利なのです。
カバーブロックのスタイル設定でサイズや枠線、角丸が設定できる
通常ですと、ブロックエディタ画面でワードプレス標準の「カバーブロック」を挿入します。
挿入したカバーブロックを選択した状態で、右の設定画面でブロック設定を表示し、スタイルタブの中に「サイズ」の項目があります。
カバー画像の最小の高さなんかも設定できるので、ブロックエディタでレイアウトを組む時は便利ですよね。
今、この投稿を書いているのブログで使っているテーマはCocoonですので、実際にカバーブロックを作ってみますと、下のようなことができます。
これはカバーブロックです。
枠線を黄色で2px、角丸10px、パディングを上下左右4にしています。
マージンも設定できます。
ここの中にリストを入れてもいいですよね。
OceanWPではサイズの表示がない
OceanWPだけではなくて、他のテーマや古いテーマの場合も該当するかもしれませんし、カバーブロックだけではなく、他の項目でも同じようなことが考えられますが、今回は気が付いたカバーブロックで説明をしますね。
上記はOceanWPを使っているワードプレスでのグーテンベルグ編集画面で、カバーブロックを挿入し、選択した状態でスタイル設定を表示した状態です。「サイズ」の項目はあるのですが、パディングやマージン、枠線の設定が表示されません。（3点マークを展開しても項目はないです）
WordPressの6.1あたりから実装されたけど、どうやらテーマに依存する部分らしい
調べを進めてみると、どうやら使用テーマに依存するらしいです。
パディングはワードプレスver5.7から導入された部分で、functions.phpの「after_setup_theme」のフックに下の関数を追加することで表示されるようになるようです。
add_theme_support( 'custom-spacing' );子テーマの場合は、子テーマのfunctions.phpに以下を追加することで表示されるようになります。
//グーテンベルグでパディングを表示させる
function wpdc_enable_gutenberg_custom_spacing(){
add_theme_support( 'custom-spacing' );
}
add_action( 'after_setup_theme','wpdc_enable_gutenberg_custom_spacing');
パディングだけは表示されるようになった！
上記のコードを追記した後、どうなったかというと図のように「パディング」が、表示されるようになりました。
枠線や角丸を表示させるにはどうすればいいのか？
同じように枠線や角丸を使えるようにするには「theme.json」が有効になってないと表示されないらしい。
最近、耳にするようになった「theme.json」ですが、どうやら「このテーマでは、このような設定にしてね」と宣言するファイルのようで、最近のテーマにはテーマフォルダ内に「theme.json」が一緒に入っていることが多いです。
OceanWPにはもちろんなし。
他のいくつテーマ内のデータを確認しましたが、あるものとないもの、まちまちでした。
もちろん「theme.json」がないテーマについては、枠や角丸は設定できませんでした。
ちなみに、私もよく使っているLightningの有料版の「LightningG3」はtheme.jsonを有効にするかどうかの切り替えをカスタマイザーに用意されていました。※こちらOFFになっていたけど、角丸や枠線は使えていました。テーマ内に「theme.json」はあったので、このチェックは角丸や枠線以外のhtml構造についてのオンオフなのだと思います。
WordPressの公式がtheme.jsonのコードが公開されている!
ワードプレスの公式ページにtheme.jsonのコードが公開されていたので、公式テーマの「theme.json」も参考にしつつ、自分で作ってテーマフォルダにアップロードすればいけそうな気がするー！
行けそうな気がするけど、常日頃アップデートがあるテーマが対応しないのは、何か理由もありそうなので、そう簡単ではないような気もしています。
OceanWPがtheme.jsonに対応すればいいだけのこと
では、どうしたら使えるようになるのか、というと「OceanWP」（の、他、対応していないテーマが随時）theme.jsonデータを配布してくれればいいだけのことです。大体はテーマのアップデートで対応されるはずです。
したがって、OceanWPもアップデートによってtheme.jsonに対応してくれるのを待つしかありません。
それまでは、角丸や枠線が使える他のグーテンベルグのブロックで対応するのが無難かと思います。
OceanWPがtheme.jsonに対応するのか
対応を待つ、というのも手ですが、いつまで待てばいいのか、そもそも対応するのかどうかは大事なことですよね。OceanWPがtheme.jsonに対応するのかどうか調べてみました。
まず、OceanWPの公式で「theme.json」と検索してみたけど何も出てきません・・。海外テーマってこういう時不便ですね＾＾；
ただ、OceanWPはカスタマイザーなどのエクスポートができる機能もあり、それらの掃き出しデータのの種類は「json」。まぁ、聞きかじりの知識なので、theme.jsonとは全く異なるよ！と言われそうですが、遠からずの場所に・・・いるような・・気がするんだけどなぁ・・
その後、変更履歴なども探してみたのですが、分かりませんでした＾＾；
OceanWPは独自のブロックウィジェットやエレメンターの使用も推奨しているので、対応しないのか・・・なぁ・・涙
またわかり次第、更新します！
コメント