web-dev-qa-db-ja.com

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

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

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

theme-developmentthemescss
11
jay

カスタム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'));
24
Fil Joseph

子テーマをアクティブにして、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());
}
2
Abhishek K R

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

2
p.a.

メインテーマのCSSや他のファイルの上書きを防ぐために、あなたは常にWordPressで子テーマを使うべきです。そうしないと、大きな頭痛と問題を引き起こすだけです。

https://codex.wordpress.org/Child_Themes

...そして子テーマを設定するのがいかに簡単であるとしても、あなたがそれを使うべきではない理由はありません。

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

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

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

0
sMyles

WordPressダッシュボードから[外観]> [CSSの編集]の順に選択します。 enter image description here 

これが基本的なCSSエディタの画面です。 enter image description here 

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

0
suthanalley

最善の方法はすべてのエンキューされたスタイルを単一の関数にまとめるそして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として使用すると、スクリプトをフッターに配置できます。

0
perfectionist1

HTMLを残しておきたい場合これをあなたのcssファイルに追加することができます。これはもっといいと思います。

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

また、あなたのテーマに応じて、それは子供と親のテーマで動作します。

- 覚えておいてください、cssはシーケンシャルに動作します（すでに使われているのと同じレベルの識別子を使うとき）ので、あなたのファイルの最後のものは上書きされます。あなたがものを上書きしたいのであればあなたのカスタムスタイルのインポートを一番下に置いてください。

0
woony