web-dev-qa-db-ja.com

子テーマの機能を理解する。php

here および here に記載されている情報を使用して、Emmet Lite templateの子テーマを正常に作成しました。

子テーマのCSSファイルは次のようになります。

/*
Theme name: Emmet Child
Theme URI: http://www.example.com/
Description: This is a child of Emmet Lite theme
Author: Motopress
Author URI: http://www.getmotopress.com/
Template: emmet-lite
Version: 1.0
*/

/* Adjustments to the Emmet Lite template start here */

.top-header {
display: none;  
}

.site-header {
background-color: #FFC421;
}

私は最初に@import関数を追加しました、しかしそれは私のために働きませんでした。私が読んだのは、親のCSSが子の後にロードされたので、最後のものが勝ったということです。これに対処するために、私は子フォルダにfunctions.phpを追加し、@importを削除しました。これはこんな感じです：

<?php
function my_theme_enqueue_styles() {

$parent_style = 'parent-style';

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 )
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

ですから、すべてが正しく機能しているので、子フォルダのstyle.css内で行った変更/上書きは、私のWebサイトにも正しく適用されます。

状況を理解する：

私の質問は：

親のEmmetテーマは、style.cssとは異なる方法で呼び出されたCSSファイルを使用します。このテンプレートで使用されている名前は...

  • emmet-style.min.css
  • emmet-style.css

（テーマフォルダのパス：emmet-lite/css/emmet-style.cssにあります）

それはWoocommerce、Buddypress、Bootstrapのための他のスタイルのセットも含みますが、私が編集に使用する唯一のファイルはemmet-style.min.cssです。

たとえすでにうまくいっていても、ここで何をしているのか理解したいのですが。私はPHPに慣れていないので、私の理解からこのコード行は間違ったCSSを呼び出しますが、それでも動作しますか？

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

Style.cssはemmet-style.min.cssであるべきですか、それが常にstyle.cssであるかは関係ありません。 functions.phpパスを正しいCSSパスに変更することに言及しているstyle.cssを開発するとき、私はドキュメンテーションに何も言及されていません。だから私はおそらくPHPをここで誤解しているでしょう。

誰かが私がfunctions.phpの中で子供のテーマと与えられた経路のために何が起こっているかについてより詳細に説明するのを手伝うことができますか？

phpcsschild-themewp-enqueue-style
3
WPasman

私が読んだのは、親のCSSが子の後にロードされたので、最後のものが勝つということです

テーマ開発者がスタイルシートをロードする順番に依存します。

通常、WordPressは最初に子テーマのfunctions.phpをロードし、次に親テーマのfunctions.phpをロードします。

親Emmetテーマは、Style.cssとは異なる方法で呼び出されたCSSファイルを使用します。

はい、そうです。テーマのルートフォルダ内のstyle.cssは、WordPressがそのヘッダからテーマを正しく識別するためののみ必要です。

テーマヘッダ以外のCSSプロパティがない場合はstyle.cssキューに入れる必要はありません _。

スタイルシートに他の名前を使用してそれらを異なる方法でロードすることができますが、WordPressによってテーマとして識別されるためにはテーマヘッダを持つstyle.cssがルートフォルダにある必要があります。

通常、一部のテーマ開発者はすべてのスタイルシートをcssフォルダーにまとめることを好みますが、これはEmmet Liteテーマ開発者によっても使用されるケースです。

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css'     );

cSSのルールがないため、上記の親style.cssをエンキューする必要はありません。単なるオーバーヘッドです。

では、現在どのように機能していますか？

親テーマの functions.php を見ると、次の順序でスタイルシートがロードされていることがわかります。

  • Bootstrap
  • 素晴らしいフォント
  • フレックススライダー
  • メインスタイル（/css/emmet-style.min.css）
  • ...
  • ...
  • 最後にスタイルシートのURI（基本的にアクティブなテーマのstyle.cssを意味します）

そのため、ここでは親テーマが必要な/css/emmet-style.min.cssファイルを最初にロードしてからstyle.cssをロードしています。これはアクティブテーマのstyle.cssです。あなたの場合は子テーマのstyle.cssです。すでに親テーマによって行われています。

wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style )
);

パス

3
bravokeyl