私はWordpressのテーマ開発にはまったく慣れていないので、テーマを最初から作成してみることにしました。
Localhostにインストールして、CDNからBootstrap.min.cssをロードするためにfunctions.phpファイルにコードを追加し、次にBootstrap以外の要素をスタイルするための私自身のCSS呼び出しを追加しました。
私が直面している問題は、Bootstrap CSSがカスタムCSSファイルよりも優先されているように思われることです。たとえば、ページの上部に32pxの余白があります。
私のfunctions.phpは次のとおりです。
<?php
//Load CSS Files
function enqueue_theme_styles() {
wp_enqueue_style( 'Bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style( 'Custom-Theme', get_template_directory_uri() . '/css/theme-style.css' );
}
add_action('wp_enqueue_scripts', 'enqueue_theme_styles');
?>
私は周りを見回して、ロード順の問題を解決するために依存関係を追加する提案があったので、私は私の子供のテーマの最後に以下を追加しようとしました:
, array('Bootstrap');
これも役に立ちませんでした。
それがだれにでも役立つならば、私は私のheader.phpファイルの<?php wp_head(); ?>
を通してこのコードを呼んでいます(私が知っている限りでは、これは標準です)。
これを手伝ってくれる人はいますか。
依存関係を追加するとうまくいくはずです。
ただし、テーマスタイルファイルを正しく呼び出していません。 theme-style.css
ファイルをテーマ自体のルートフォルダに移動し、style.css
という名前を付ける必要があります。
したがって、関数は次のようになります。
function my_enqueues() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style( 'theme-css', get_stylesheet_uri(), array( 'bootstrap-css' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueues' );
これは、 CSSとJavaScriptを含む のテーマハンドブックの節にも当てはまります。