[ 解決済 ] Hタグのスタイルデフォルト設定について

[恭一橋本]

■ WordPress のバージョン
6.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.34.1

■ 期待する動作
ワードプレスのビジュアルエディターにて新規投稿を行っている際、Hタグをつけた際に、H2なら色背景、H3なら下線というようにあらかじめ設定しておいたスタイルが適用されるようになってほしい。
現在はフォントやサイズのみタグと連動しており、スタイルは都度右から選ぶ仕様かと思います。

■ 自分で試した事
外観＞エディター＞スタイル＞タイポグラフィー＞要素＞見出し
にてフォントとサイズを調整
装飾については選択肢がありませんでした。

■ 症状が発生するブラウザ
chrome

■ 実際の症状
Hタグに装飾をつける際は都度、右から装飾を選ぶ必要がある。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。

まずは残念ながら現状の WordPress の機能ではありません。
と、言いますか私もそれは既にできるようになったと思っていました。

ただ、要望の多い機能かと思いますので、WordPress 本体の方で改善されるとは思います。

裏技的な感じですが、
外観 > エディタ > テンプレート > （適当にテンプレート選ぶ） > グローバルスタイルボタン > ブロック > 見出し
からなら色は指定できるのですが、見出しレベル毎に指定できないので意味がありません。

やはり一般的に
外観 > エディタ > テンプレート > 適当にテンプレート選ぶ） > グローバルスタイルボタン > ３点アイコンから追加CSS に

h2 {
background-color:var(--wp--preset--color--bg-secondary, #efefef);
padding:.6em .7em .5em;
border-radius: 4px;
}
h3 {
border-bottom: 1px solid #333;
padding:.6em 0 .5em;
}

のように書くのが一番てっとり早いのが現状です。

ちなみに別の回りくどいやりかたとしては
以下のようなコードを my-block-theme-plugin.php など適当な名前で保存して zip に圧縮して、
プラグイン > 新規追加 からアップロード＆有効化するという方法もあります。

<?php
/*
Plugin Name: My Block Theme Plugin
Description: A custom plugin for block theme enhancements.
Version: 0.0.0
Author: 
License: GPL2 or later
*/

// theme.json スタイル設定を上書き
add_filter( 'wp_theme_json_data_user', function( $theme_json ) {
    $data = $theme_json->get_data();
    // h2 の背景色を上書き
    $data['styles']['elements']['h2']['color']['background'] = 'var(--wp--preset--color--bg-secondary, #efefef)';
    $data['styles']['elements']['h2']['spacing']['padding'] = '.6em .7em .5em';
    $data['styles']['elements']['h2']['border']['radius'] = '4px';
    // h3 の下線（ボーダー）を3pxの黒線に
    $data['styles']['elements']['h3']['border']['bottom']['color'] = '#333';
    $data['styles']['elements']['h3']['border']['bottom']['width'] = '1px';
    $data['styles']['elements']['h3']['border']['bottom']['style'] = 'solid';
    $data['styles']['elements']['h3']['spacing']['padding'] = '.6em 0 .5em';
    $theme_json->update_with( $data );
    return $theme_json;
});

Attachments:

You must be logged in to view attached files.

[恭一橋本]

石川様

お世話になります。
X-T9のHタグの件ですが、ご教示いただきありがとうございます。
ワードプレス側の仕様なのですね。。石川様からいただいたコードを追加CSSに入れ、無事、Hタグのスタイルを選ばなくても反映されるようになりました！

引き続きよろしくお願いいたします。

[投稿者]

投稿