あなた自身のWordPressのテーマ、それの親から子テーマを作成したり、テーマを編集する場合は、独自のCSSカスタムスタイルシートを追加する必要が発生します。 ほとんどの場合、デフォルトのテーマのスタイルシートからいくつかのスタイルを上書きしたいと思うでしょう。
独自のスタイルを追加したり、デフォルトのスタイルを上書きしたりするには、いくつかの方法があります。 それでは、それを行う最良の方法は何ですか？ 開発者は、独自のカスタムCSSファイルを作成し、作業しているWordPressテーマに埋め込むことに同意します。
WordPressテーマにカスタムCSSコードを追加する方法
html要素にCSSスタイルを追加する方法や、<スタイル>ブロックを追加する方法については説明しません。 今日では、この方法は開発者によって放棄されています。 また、彼らは今日気にする重要な問題である、SEOフレンドリーではありません。
私たちも、テーマの元のCSSスタイルシート（通常はスタイルを編集することをお勧めしません。css）、またはそれにカスタムコードを追加します。 このファイルは、多くの場合、非常に大きく、管理が困難です。 その中に小さな入力ミスや構文エラーがあると、サイト全体がクラッシュする可能性があります。
この記事では、カスタムCSSファイルを作成し、WordPressのテーマに埋め込む方法を紹介します。
WordPressのテーマにカスタムCSSコードを追加するには、いくつかの方法があります。 ベストプラクティスは何ですか？
wp_register_style()とwp_enqueue_style()を使用してWordPressのテーマにカスタムスタイルシートファイルを追加する方法
WordPressにカスタムCSSファイルを埋め込む最初のステップは、テー FTPクライアントまたはcPanelsファイルマネージャを使用して、テーマフォルダを見つけて開きます。 これで、たとえばカスタムで新しいファイルと名前を作成することができます。cssまたはお使いのコンピュータからCSSファイルをアップロードします。 WPテーマに複数のCSSファイルを追加する必要がある場合は、この手順を繰り返します。
この手順を正しく完了した場合は、カスタムCSSファイルまたはWordPressのインストールテーマエディタにファイルが表示されます。
カスタムCSSファイルをリンクするサイトのheadセクション
カスタムCSSファイルをWPテーマフォルダに追加したので、ファイルをサイトの<head>セク このようにして、サイトはカスタムスタイルを要素に適用できます。
<link>要素をサイトの<head>セクションに追加するだけで、</head>タグを閉じる直前にすることができます。 このようにして、カスタムCSSスタイルは最後にロードされ、デフォル サイトの<head>セクションは、通常、テーマフォルダヘッダーにあります。phpファイルとWordPressのテーマエディタの谷にアクセス可能です。
サイトがサーバーのルートフォルダーの”test-site”フォルダーにある場合、テーマフォルダーは”test-theme”、CSSファイルは”custom”と呼ばれます。css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">この単純な解決策は正常に動作しますが、CSSファイルをWordPressサイトに埋め込むのはベストプラクティスではありません。
wp_register_style()とwp_enqueue_style()関数を使用してCSSファイルをWordPressに埋め込む
WordPressサイトにカスタムCSSファイルを埋め込むには、スタイルシートをWPテーマの関数に登録することをお勧めします。wp_register_style()およびwp_enqueue_style()関数を使用したphpファイル。 このようにして、wp_headアクションがトリガーされた瞬間にCSSファイルがロードされます。 あなたのスタイルシートは、テーマのデフォルトのスタイルシートの直後に配置されます。 そして、あなたはデフォルトのスタイルを上書きすることができます。
最初に行うことは、テーマの機能を見つけることです。phpファイル。 これは、WordPressのテーマエディタ内に位置しています。 また、FTPまたはcPanelsファイルマネージャを使用して行うこともできます。 子テーマで作業している場合は、親テーマではなく、子テーマ関数ファイルを編集します。 このようにして、親テーマを更新するときにカスタムコードが失われないようにします。 関数の一番下までスクロールします。phpと次のコードスニペットを追加します:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );スニペットのカスタマイズ:上記の例では、登録関数に”additional_stylesheets”という名前を付け、”custom”という名前のスタイルシートCSSファイルを登録しました。css”、以前に私たちのテーマフォルダにアップロードしました。 あなたが好きなように関数に名前を付け、snipetの上部と下部の行に関数名を置き換えることができます。 スタイルシートファイルの名前がcustomとは異なる場合。cssは、snipetのcustomという単語を独自のファイル名に置き換えます。
すべてを正しく行った場合は、スタイルシートに独自のCSSコードを書き始めることができます。 変更を保存してページをリロードすると、スタイルがサイトに影響を与えることに気付くでしょう。 ページを更新するときは、ブラウザのキャッシュをきれいにすることを忘れないでください。
複数のカスタムスタイルシートCSSファイルを関数に埋め込みます。wp_register_style()とwp_enqueue_style()
を使用したphp WPテーマに複数のCSSファイルを追加する前に、サイトの読み込み速度に影響を与えるサイトの読み込み中にサーバーリク できるだけ少ないスタイルシートを使用してみてください。
さて、customという名前のデスクトップスタイル用の別のスタイルシートファイルがあるとしましょう。cssとresponsiveという名前の第二のスタイルシートファイル。モバイルデバイス用のcss。 両方のスタイルシートを関数に埋め込む。phpファイルは単純で、上記の単一のファイルスニペットをわずかに変更する必要があります:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );単一のファイルスニペットをカスタマイズするのと同じように、状況に応じてファイル名を変更します。
wp_register_style()およびwp_enqueue_style()関数の詳細
wp_register_style()およびwp_enqueue_style()関数を使用してスタイルシートを登録する方法の詳細については、専用のWP Codexページを参照してくださ