テーマにカスタム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ファイルを調べることができます.

I usually add this piece of code if I want to add another css file

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

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

WordPressで@importを使用してカスタムcssを追加することは、もはやベストプラクティスではありませんが、その方法で行うことができます.

ベストプラクティスは、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'));
 

Using @import in WordPress for adding custom css is no longer the best practice, yet you can do it with that method.

the best practice is using the function wp_enqueue_style() in functions.php.

Example:

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());
}
 

Activate the child theme and add the following example code in the 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());
}

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

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.

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

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

テーマによっては、子と親のテーマでも機能します.

-cssはシーケンシャルに機能するため(同じレベルの識別子を使用している場合、すでに使用されている)、ファイルの最後にあるものが上書きされることに注意してください. したがって、ものをオーバーライドする場合は、カスタムスタイルのインポートを下部に配置します.

If you want to leave your html along. you can add this to your css file. I think this is better.

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

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential (when using the same level of identifier, already used ) , so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

メインテーマのCSSやその他のファイルの上書きを防ぐために、WordPressでは常に子テーマを使用する必要があります...そうしないと、大きな頭痛や問題が発生するだけです.

https://codex.wordpress.org/Child_Themes

...子テーマの設定が非常に簡単なので、子テーマを使用しない理由はありません.

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

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

どちらの方法でも、子テーマを使用している限り、後でテーマを更新して変更を失うことを心配する必要はありません...常に子を使用する習慣を身に付けてください.テーマ、後で私に感謝します、私は約束します.

To prevent overwritting of main theme CSS or other files, you should ALWAYS use a child theme in WordPress ... not doing so will only cause you major headaches and problems down the road.

https://codex.wordpress.org/Child_Themes

... and with how easy it is to setup a child theme, there is no reason you shouldn't be using one.

Using a child theme will then allow you to override any of the main parent theme files you want, simply by copying from parent into your child, or by creating a new file with the same name.

Regarding the custom.css file there's numerous ways that theme developers handle this ... a lot of them do this simply to try and prevent clients who don't want to use a child theme, from editing the main style.css file ....

Either way you shouldn't be worried about that, as long as you use a child theme you shouldn't have to worry about updating your theme later on and losing your changes ... get in the habit of always using child themes, you will thank me later, i promise.

最善の方法は、キューに入れられたすべてのスタイルを1つの関数に結合してから、 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として使用すると、スクリプトをフッターに配置できます.

The best way is to combine all enqueued styles into a single function and then call them using wp_enqueue_scripts action. Add the defined function to your theme's functions.php somewhere below the initial setup.

Code Block:

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' );

Please Note :

3rd parameter is the dependency array which refers to whether or not this stylesheet is dependent on another stylesheet. So, in our above code custom.css is dependent on style.css

|
Additional Basic:
wp_enqueue_style() function may have 5 parameters: like this way - wp_enqueue_style( $handle, $src, $deps, $ver, $media );
In real world of WP Coding, usually we also add javascript files/jQuery libraries inside that function like this way:

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

The 5th parameter true/false is optional (2nd, 3rd and 4th params are also opt.) but very essential, it allows us to place our scripts in footer when we use the boolean parameter as true.

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

これが基本的なCSSエディターの画面です.

CSSをデフォルトのテキストに直接貼り付けます.デフォルトのテキストを削除して、CSSがエディターにのみ表示されるようにすることができます.次に、スタイルシートを保存すると、CSSが公開されます.

Go to Appearance > Edit CSS from your WordPress Dashboard.

Here is the screen with basic CSS editor.

Now paste your CSS directly to the default text. You can delete the default text so that your CSS only appears in the editor. Then save the stylesheet and your CSS will be live.

Webブラウザのキャッシュの問題を回避したい場合は、この例に示すように、ファイルバージョンを含める必要があります.

 wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));
 

この場合、最終変更日をUNIX時間でクエリパラメータとして記述します.

If you want to avoid web browser cache problems, you need include the file version, like in this example is shown.

wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));

In this case, I write the last modification date in unix time as a query param.

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

https://codex.wordpress.org/Child_Themes

このルートに行くと、後で感謝します.

Use a child theme. It's your best bet. This way if the theme is ever updated, you won't override the stylesheets you've created.

https://codex.wordpress.org/Child_Themes

Go this route, you'll thank yourself later.