テーマにカスタムcssファイルを追加する方法は？

一部のテーマでは、style.cssファイルを編集せず、代わりにcustom.cssファイルを使用するように求めています。custom.cssでコードを記述すると、style.cssの同じ要素スタイルが上書きされます。これは、テーマの更新時にユーザースタイルが失われないようにするためだと思いますが、そうですか？

これはどのように機能しますか？テーマに既にcustom.cssファイルが含まれていますか？しかし、テーマに最初にcustom.cssでスタイルを探すために、このファイルがテーマにどのように含まれているのでしょうか？ありがとう。

別のcssファイルを追加する場合は、通常このコードを追加します

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

テーマメーカーは、テーマのレイアウト設計を可能な限り保持したいと考えています。そのため、カスタムcssファイルはそれほど害はありません。むしろサポートの質問だと思います。カスタムcssファイルを使用すると、メーカーはテーマをより簡単に使用できる人を支援できます。元のstyle.cssは変更されていないため、テーマメーカーはおそらくカスタムcssファイルを確認できます。

カスタムCSSを追加するためにWordPressで@importを使用することは、もはやベストプラクティスではありませんが、その方法で実行できます。

ベストプラクティスは、functions.phpの関数を使用するwp_enqueue_style()ことです。

例：

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

子テーマをアクティブにし、function.phpに次のコード例を追加します

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

私の提案は、子テーマを使用することです。実装は非常に簡単で、ユーザーが行うすべての変更（スタイルを含む）は、元のテーマから完全に分離されます。

メインテーマのCSSまたは他のファイルの上書きを防ぐために、常にWordPressで子テーマを使用する必要があります。

https://codex.wordpress.org/Child_Themes

...そして、子テーマを設定するのがどれほど簡単であっても、子テーマを使用してはならない理由はありません。

子テーマを使用すると、親から子にコピーするか、同じ名前の新しいファイルを作成するだけで、必要なメインの親テーマファイルをオーバーライドできます。

custom.cssファイルに関しては、テーマ開発者がこれを処理する多くの方法があります...それらの多くは、単に子テーマを使用したくないクライアントがメインstyle.cssファイルを編集するのを防ぐためにこれを行います...

いずれにせよ、それを心配しないでください。子テーマを使用する限り、後でテーマを更新して変更を失うことを心配する必要はありません...常に子テーマを使用する習慣を身に付けます。後で私に感謝します、私は約束します。

HTMLをそのまま残したい場合。これをcssファイルに追加できます。これは良いと思います。

@import url("../mycustomstyle.css");

また、テーマに応じて、子テーマおよび親テーマで機能します。

-cssはシーケンシャルに動作するので（同じレベルの識別子を使用している場合、既に使用されています）、ファイルの最後の部分が上書きされます。ものをオーバーライドする場合は、カスタムスタイルのインポートを下部に配置します。

最良の方法は、することがある単一の関数にすべてのエンキューのスタイルを組み合わせた後、使用してそれらを呼び出すwp_enqueue_scriptsアクションを。定義済みの関数をテーマのfunctions.phpの初期セットアップの下のどこかに追加します。

コードブロック：

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

ご注意ください ：

3番目のパラメーターは、このスタイルシートが別のスタイルシートに依存しているかどうかを参照する依存関係配列です。したがって、上記のコードでは、custom.cssはstyle.cssに依存しています

|
追加の基本：
wp_enqueue_style()関数には5つのパラメーターがあります：このように-wp_enqueue_style（$ handle、$ src、$ deps、$ ver、$ media）;
WPコーディングの実世界では、通常、次のように関数内にjavascriptファイル/ jQueryライブラリも追加します。

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

5番目のパラメーターtrue / falseはオプションです（2番目、3番目、4番目のパラメーターも最適です）が、非常に重要であり、ブール値パラメーターをtrueとして使用する場合、スクリプトをフッターに配置できます。

WordPressダッシュボードから[外観]> [CSSの編集]に移動します。

これは、基本的なCSSエディターを備えた画面です。

次に、CSSをデフォルトのテキストに直接貼り付けます。CSSがエディターにのみ表示されるように、デフォルトのテキストを削除できます。その後、スタイルシートを保存すると、CSSが有効になります。

子テーマを使用します。それが最善の策です。これにより、テーマが更新されても、作成したスタイルシートは上書きされません。

https://codex.wordpress.org/Child_Themes

このルートを行く、あなたは後で自分に感謝します。