子テーマ作成投稿記事一覧
日別の投稿記事一覧
【子テーマ】background-imageのパスが通らない
自作のテーマを親テーマとし、子テーマを作成した。
子テーマをカスタムする時に初めて、親テーマでの画像の使い方に背景画像が多いのが判明。
パスが全然通らなくてちょっと困った。。。
でも次のサイト様のおかげで解決に至りました。
★【WordPress】style.cssでbackground-imageの画像のURLはどう記述する？
私の場合、まさにこの2番だった!
2.テーマ直下パスで指定したい場合
background-image: url(/wp-content/themes/theme-name/images/sample.jpg);
ちなみに親テーマでは、
background-image: url(../images/sample.jpg);
ってなっています。
【WordPress】子テーマのCSSが反映されない
無料テーマの『Mantra』の子テーマを作成した。
手順通り、style.cssファイルとfunctions.phpファイルをアップロードしたが、CSSが反映されない〜(泣)
なかなか一筋縄ではいかんのう…。
結局、次のサイト様を参考に、
★WordPress子テーマの作り方とCSS等が反映されない原因を解説
<?php
'add_action'( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
'wp_enqueue_style'( 'child-style', get_template_directory_uri() . '/style.css');
}
'add_action'( 'admin_menu', 'theme_admin_styles' );
function theme_admin_styles() {
'wp_enqueue_style'( 'parent-admin-style', get_template_directory_uri() . '/admin/css/admin.css' );
}
上のようなfunctions.phpをアップロードしたら成功しました!
4行目の’child-style’ってところ、なぜ’parent-style’から変わっているのかわからないです。
また勉強します😔
子テーマの作成
なぜ「子テーマ」を作るかというと、オリジナルテーマを色々いじって無事自分好みにカスタマイズできたとしても、親テーマがアップデートされた途端にそれらがすべて無に期すという悲劇を防ぐために他なりません。
気に入ったオリジナルテーマでサイトを始めるときは、まず最初に子テーマを作成し、子テーマで運営するようにしましょう。
★手順1
「親テーマフォルダ」と同じ階層に、空の新規「子テーマフォルダ」を作る。
★手順2
「親テーマ」のstyle.cssをまるっとコピーして、新しく作った「子テーマ」フォルダの中に貼り付ける。
★手順3
そのstyle.cssをテキストエディタで開き、次のように書き換える。(必須なものだけにしました)
Theme Name：テーマ固有の名前 (‘〜 Child’がわかりやすい) Template：親テーマが保存されているフォルダー(テーマ名ではなくフォルダー名を使用。これを記述しないと、テーマは子テーマとして機能しない) Template Version：バージョン番号
注意したいのは、Template。
ここは「親テーマ」のテーマ名ではなくフォルダ名が入るので、最初の一文字が大文字にならないようにする。
★手順4
functions.phpファイルを作り、テキストエディタで下記のように書き込む。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
そして付け加えたい機能があれば、随時書き加えていく。
私の場合、これは常に書き加えておきたい。
/*==============================
固定ページカテゴリ追加用コード
==============================*/
add_action( 'init', 'my_add_pages_categories') ;functionmy_add_pages_categories(){register_taxonomy_for_object_type( 'category', 'page') ;}add_action( 'pre_get_posts', 'my_set_page_categories') ;functionmy_set_page_categories( $query){if( $query->is_category== true && $query->is_main_query()){$query->set( 'post_type', array( 'post', 'page', 'nav_menu_item')) ;}}
以上です。
なお、次のサイトさんが非常に参考になりました。ありがとうございました。
WordPressで子テーマを作成する方法（詳細ガイド）
https://kinsta.com/jp/blog/wordpress-child-theme/#c
