親テーマのfunctions.phpで読み込まれているファイルを差し替えしたい。
-
子テーマを設けてカスタマイズしていますが、親テーマのスタイルシートでimportが指定されているため上書きされず困っています。
親テーマのfunctions.phpでphpファイルに列記されたスタイルシートファイルを呼び出している部分、下記を、
子テーマのディレクトリのスタイルシートを呼び込むように差し替えたいのですが、
なにか方法がありますか?require( WL_TEMPLATE_DIR_CORE . ‘/scripts/css_js.php’ );
-
こんにちは
テーマは、enigma ですか?
親テーマのスタイルシートでimportが指定されているため上書きされず困っています。
見たところ、親テーマでは、@import rule は使われていないようですが、
通常のチャイルドテーマの、セオリーから行くと、
/* Theme Name: child enigma Author: nobody Version: 1.0 Template: enigma */ @import url("../enigma/style.css");になりますが、スタイルシートの読み込みに時間がかかるので、
functions.phpに
function load_main_stylesheet() { wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'load_main_stylesheet', 100);みたいな風にやっているんだけれども、レイアウトが崩れるという事ですよね。
それは、テーマでハードコーディングされている、以下の部分によるものです。
(ふつうは、ハードコーディングシナイことになっているんですけど、諸事情は解かりません)
header.php<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />この、get_stylesheet_uri()は、チャイルドテーマの場合は、そのスタイルを読み込み
親テーマの場合は、そのテーマのスタイルを読み込みます。なので、functions.phpで、wp_enqueue_style()しても、チャイルドのスタイルが2回読み込まれるだけなので、スタイルが崩れるのです。
ここまで解かれば、解決方法はいろいろと思いつくでしょう:)
テーマ名がわからないので的外れな可能性がありますが、似たような記述がある「Enigma」についての子テーマカスタムを記述した記事がありましたので、参考までに。
WordPressテーマ『Enigma』を色々弄ってみた話。
http://cityjumperweb.com/2014/11/18/wordpress-theme-enigma/ご回答くださった方々、ありがとうございます。
テーマはenigmaです。style.css以外にたくさんcssがあり、そのstyle.css以外の cssファイルを更新したときに親テーマのほうが優先されてしまっています。
phpに疎いので今header.phpの中で最後に子テーマのcssを直に読むようにしているのですが、
それでも親テーマでimportant!を指定いるスタイルは当然そちらが優先されてしまうので困っています。
今子テーマのfunctions.phpでは
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
と入れて親テーマと子テーマのスタイルを読むようにしていますが、
親テーマのfunctions.php内でstyle.css以外のスタイルを
requireを使って読み込んでいるため、phpでどう書いたら
子テーマのほうのスタイルを代わりに読んでくれるのかがわからないです。
書き方など教えていただけるとありがたいです。「WordPressテーマ『Enigma』を色々弄ってみた話。」のリンクのページはみてやってみましたがやり方がわるいのか、うまくいきませんでした。
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);define(‘WL_TEMPLATE_DIR_URI’,get_stylesheet_directory_uri());
define(‘WL_TEMPLATE_DIR’,get_stylesheet_directory());}
require( WL_TEMPLATE_DIR_CORE . ‘/scripts/css_js.php’ );
require()していても、それ自体は問題になりません。
なぜか?
読み込まれるcss_js.phpでは
add_action('wp_enqueue_scripts', 'weblizar_scripts');を使って、スタイルやスクリプトをロードしているので、このアクションフックを使って、ファイル内のスタイルシートの、削除、位置変更出来るためです。
詳細は、wp_enqueue_style(),wp_dequeue_style()等を調べてください。親テーマとチャイルドテーマの読み込み順についてですが、
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style') ); }これは、たくさんこのような方法が紹介されている 一般的には正しい方法です。
しかし、うまくいかないでしょう。
正しく実装されていれば、 ‘parent-style’のところの第三引数に、array(‘Courgette’)としてやれば、スタイルの読み込みの最後に並びますが、このテーマはそうなりません。
なぜか、親テーマのwp_enqueue_styleで依存関係(並び順)が定義されていないので、あっち行ったりこっち行ったりします。
「CSSまじめ」な人にとっては、残念ですが
全部の読み込み順を入れて、wp_enqueue_style()しましょう。
header.phpをコピーして、チャイルドに複製
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />を、
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/style.css'; ?>" type="text/css" media="screen" />に変更して、チャイルドテーマの場合でも親テーマのスタイルを読み込むように変更し、
チャイルドのfunctions.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('bootstrap', 'default', 'enigma-theme', 'media-responsive', 'animations', 'theme-animtae', 'font-awesome', 'OpenSansRegular', 'OpenSansBold', 'OpenSansSemiBold', 'RobotoRegular', 'RobotoBold', 'RalewaySemiBold', 'Courgette') ); }nobitaさん
ご回答ありがとうございます。
ご説明からヒントを得まして、funtions.phpに
wp_enqueue_style(‘bootstrap’, get_stylesheet_directory_uri() . ‘/css/bootstrap.css’);
というかたちで子テーマ側のスタイルを読むようにしたところうまくスタイルが反映しました。丁寧なご説明ありがとうございました。
トピック「親テーマのfunctions.phpで読み込まれているファイルを差し替えしたい。」には新たに返信することはできません。