カスタマイズは子テーマに対して行うことでテーマのアップデートの影響を軽減することができます。
※カスタマイズの内容によっては影響があります
全体的なスタイル
通常はサイトエディターのスタイル(タイポグラフィ、色、レイアウト)にてサイト全体のスタイルを行います。
必要に応じてtheme.jsonやstyle.cssを使用します。
ブロックのスタイル
通常はサイトエディターのスタイル(ブロック)にてブロック別のスタイルを行います。
必要に応じてブロックに応じたcssファイルを作成し、functions.phpで読み込むようにします。
ナビゲーションブロックをcssでスタイルする場合
core-navigation.cssを作成
子テーマのassets/blocks/にcore-navigation.cssを作成し追加したいスタイルを記述してください。
その他のブロック名はCore Blocks Referenceを参照してください。
functions.phpに以下を追加
子テーマのfunctions.phpに以下の記述を追加してください。
他のブロックの場合は”navigation”の部分を置換してください。
※”hariko_blog”の部分は子テーマ名に置き換えてください。
add_action( 'init', 'hariko_blog_enqueue_block_styles' );
function hariko_blog_enqueue_block_styles() {
wp_enqueue_block_style('core/navigation', 'hariko_blog-block-navigation');
wp_enqueue_style('hariko_blog-block-navigation', get_theme_file_uri("assets/blocks/core-navigation.css"));
}独自のCSSを追加する場合
style.cssに記載するか/assets/css/に任意のcssファイルを追加し、functions.phpに以下を追加してください。
※/assets/css/style.cssを追加した場合の例
※”hariko_blog”の部分は子テーマ名に置き換えてください。
add_action( 'wp_enqueue_scripts', 'hariko_blog_enqueue' );
function hariko_blog_enqueue() {
$style_css_path = get_theme_file_path('style.css');
$style_css_uri = get_stylesheet_uri();
wp_enqueue_style('hariko_blog-style', $style_css_uri, [], filemtime($style_css_path));
$global_css_path = get_theme_file_path('assets/css/style.css');
$global_css_uri = get_theme_file_uri('assets/css/style.css');
wp_enqueue_style('hariko_blog-global-style', $global_css_uri, [], filemtime($global_css_path));
}エディタのスタイルが必要な場合
エディターとプレビュー(または本番)のスタイルは必ずしも一致しません。
エディター側のスタイルも調整が必要な場合はeditor.cssにて調整します。
editor.cssを作成
子テーマの直下にeditor.cssを作成し追加したいスタイルを記述してください。
functions.phpに以下を追加
子テーマのfunctions.phpに以下の記述を追加してください。
※”hariko_blog”の部分は子テーマ名に置き換えてください。
add_action( 'after_setup_theme', 'hariko_blog_add_editor_styles' );
function hariko_blog_add_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( array( 'style.css', 'editor-style.css' ) );
}