WordPressにCSSを追加する方法：5つの方法

公開: 2021-12-11

CSSを適用して、サイトのスタイルを編集しますか？ もしそうなら、この投稿はあなたのためです。 このガイドでは、 WordPressにCSSを追加して、Webサイトをカスタマイズし、訪問者に印象を与えるさまざまな方法を紹介します。

WordPressには使用できるテーマやテンプレートがたくさんありますが、サイトの外観を変更したい場合は、遅かれ早かれCSSコードを追加することになります。

WebサイトにCSSを追加するのは非常に簡単です。 ブラウザ開発者ツールを使用してCSSを適用する方法は以前に見てきましたが、他の方法もあります。 これらのさまざまな方法にはすべて長所と短所があるため、初心者が特定の状況にCSSを追加するための最良の方法を理解するのは難しい場合があります。 そのため、このガイドでは、WordPressWebサイトにCSSスタイルを追加するさまざまな方法を紹介します。

WordPressにCSSを追加する方法

CSSスタイルをWordPressサイトに適用する方法はいくつかあります。

  1. テーマカスタマイザー経由
  2. 子テーマファイルの編集
  3. 独自のCSSファイルをアップロードする
  4. フックを使用してヘッダーにCSSを適用します
  5. CSSをバックエンドに追加する

それぞれの方法を見てみましょう。あなたに最適な方法を選択できます。

注：この投稿ではCSSの構造について詳しく説明しません。そのため、CSSの基本を理解して、問題なくこのガイドに従うことができるようにすることをお勧めします。

CSSを適用する前の手順として、ブラウザ開発者ツールを使用して、変更する特定のHTML要素を見つけることをお勧めします。 その方法がわからない場合は、ブラウザ開発者ツールを使用してCSSを適用する方法に関するガイドをご覧ください。

1）テーマカスタマイザーでCSSを適用する

カスタムCSSコードをWordPressに追加する最も簡単で最速の方法は、テーマカスタマイザーの追加CSSエディターに挿入することです。 これは組み込みのWordPressCSSエディターであり、デフォルトですべてのWebサイトに表示されます。 ただし、一部のテーマとプラグインはこの機能を無効にする場合があることに注意してください。

テーマカスタマイザーを使用してCSSを適用するには、ダッシュボードに移動し、 [外観]> [カスタマイズ] > [追加のCSS]に移動してCSSエディターを開きます。 そこに、サイトのCSSコードが表示され、コードを追加できるようになります。

カスタムCSSを適用すると、テーマカスタマイザーの追加のCSSエディターに挿入されます。

この方法の最大の利点の1つは、CSSのカスタマイズの結果を画面の右側でリアルタイムにプレビューできることです。

コードを追加すると、データベースの* _postsテーブルのcustom_css投稿タイプに保存されます。 ここではあらゆる種類のカスタマイズを適用できますが、パフォーマンス上の理由から、CSSルールの大規模なリストにはお勧めできません。

2）子テーマファイルの編集

WordPressにCSSスタイルを追加する別の方法は、子テーマのCSSファイルを編集することです。 このメソッドは、データベースからコードを取得する必要なしにロードされるため、カスタマイザーから直接コードを適用するよりもパフォーマンスが優れています。

ほとんどの子テーマにはstyle.cssファイルがあるため、そこにカスタムCSSを追加するだけです。 子テーマのstyle.cssファイルを見つけるには、WordPressダッシュボードで[外観]> [テーマエディター]に移動します。 次に、右上のドロップダウンを押して子テーマを選択し、以下に示すようにstyle.cssファイルをクリックします。

子テーマファイルにCSSコードを含める

子テーマにstyle.cssファイルまたは拡張子が.cssのその他のファイルがない場合は、次のセクションで説明するように、それを作成して適用できます。

または、一部の子テーマには、いくつかのファイルを含むCSSフォルダーがあります。 その場合は、正しいstyle.cssファイルを編集してください。

3）独自のCSSファイルをアップロードします

大きなカスタムCSSコードをWordPressに追加する場合は、別のファイルに入れて、サーバー上のWebサイトファイルにアップロードすることをお勧めします。 ステップバイステップでそれを行う方法を見てみましょう。

3.1）コードエディタを使用してCSSファイルを作成します

これを行うには、Visual Studio Code、Sublime text、またはCSSファイルをサポートするその他のコードエディターを使用する必要があります。

CSS拡張子を使用して新しいファイルを作成し、そこにコードを貼り付けます。 この例では、ファイルにmy-styles.cssという名前を付けています。
コードエディタを使用してCSSファイルを作成します

コードを貼り付けたら、ファイルを保存して、次の手順に進みます。

3.2）ファイルを子テーマフォルダにアップロードします

子テーマにCSSディレクトリがある場合は、ファイルをコピーしてそこに貼り付けるだけです。 または、メインの子テーマディレクトリに直接アップロードすることもできます。 子テーマフォルダ内の場所は気にしないでください。次のステップでファイルパスをターゲットにします。

次に、cPanelまたはFileZillaなどのFTPクライアントを使用してファイルをアップロードします。

ローカルホストサーバーを使用している場合は、ローカルホストサーバーのパブリックフォルダーにある子テーマフォルダーにファイルをコピーして貼り付けるだけです。

この例に従って、 my-styles.cssファイルを子テーマに貼り付けます。

ファイルを子テーマフォルダーにアップロードします。

3.3）カスタム.CSSファイルをエンキューします

次に、カスタムCSSファイルを子テーマのfunctions.phpファイルにエンキューして機能させる必要があります。 関数.phpに存在するコードの後に​​次のPHPスクリプトを貼り付けますファイル。

 関数my_styles（）{
wp_register_style（ 'my-styles'、get_stylesheet_directory_uri（）。 '/ my-styles.css'）;
wp_enqueue_style（ 'my-styles'）;
}
add_action（ 'wp_enqueue_scripts'、 'my_styles'）;

新しく作成されたファイルが、テーマディレクトリ内のファイルの場所に応じたパスによって適切に呼び出されることを確認してください。 また、ファイルの名前（この例ではmy-styles.css ）を変更することを忘れないでください。

次のスニペットを使用して、パスが正しいかどうかを確認できます。

 add_action（ 'wp_head'、function（）{
echo get_stylesheet_directory_uri（）。 '/my-styles.css';
}）;

カスタムCSSファイルをキューに入れます

それでおしまい！ このようにして、独自のCSSファイルをアップロードしてCSSをWordPressに適用できます。

4）フックを使用してヘッダーセクションにCSSを適用します

コーディングのスキルがある場合は、フックを使用してサイトにCSSを追加することもできます。

wp_head()フックは、Webサイトを開発するときに非常に役立ちます。 <head> HTMLタグにスクリプトを含めるために使用することはお勧めしませんが、迅速なテストとデバッグを行うことができます。

複数のCSSスタイルシートまたは複雑なWebサイトで作業していて、何かが期待どおりに機能しない場合は、このフックを使用して<head>セクションにCSSコードを追加できます。

 add_Action（ 'wp_head'、 'my_head_css'）;
関数my_head_css（）{
エコー "<スタイル>
.site-branding {
    背景：赤;
    幅：200px;
    パディング：11px;
    border-radius：23px; }
</ style>
";}

たとえば、このスクリプトでは、見出しのサイズ、背景色、境界線、およびパディングを変更しています。

このようにして、CSSスクリプトが他のCSSファイルよりもフロントエンドに適用されていること、または他の方法でWebサイトに含まれていることを確認できます。

5）バックエンドにCSSを追加します

最後に、CSSスタイルをWordPressに追加するもう1つの方法があります。 次のようにadmin_head()フックを使用して、カスタムCSSをバックエンドに適用できます。

 add_Action（ 'admin_head'、 'my_custom_fonts'）;
関数my_custom_fonts（）{
エコー '<スタイル>
#adminmenu {
    背景：＃602e93;}
</ style> ';
}

この例では、背景色（＃602e93）を変更しています。

方法4と5は非常に便利で、 <head> HTMLセクションにCSSスクリプトを挿入することで時間を節約できます。 ただし、これは推奨される方法ではないため、スタイルを永続的に適用するためにこの方法を使用しないでください。

結論

全体として、CSSを少し使用することで、サイトの外観をカスタマイズできます。 CSSの追加は簡単ですが、いくつかの方法があるため、どの方法を使用すべきかを判断するのは難しい場合があります。

このチュートリアルでは、WordPressサイトにCSSを追加するための5つの異なる方法を示しました。

  1. テーマカスタマイザー経由
  2. 子テーマファイルの編集
  3. 独自のCSSファイルをアップロードする
  4. フックを使用してヘッダーにCSSを適用します
  5. CSSをバックエンドに追加する

それぞれの方法には長所と短所があります。 たとえば、テーマカスタマイザーからCSSを追加するのは簡単で、リアルタイムのプレビューが付属しています。 ただし、CSSルールのリストが多い場合はお勧めしません。 または、子テーマのファイルを編集するか、独自のCSSファイルを子テーマにアップロードすることもできます。

推奨される方法ではありませんが、フックを使用して<head> HTMLタグにスクリプトを含め、サイトをすばやくテストしてデバッグすることができます。

あなたのウェブサイトにCSSを追加しましたか？ どの方法を使用しましたか？ 私たちが含めるべき他の方法を知っていますか？ 以下のコメントでお知らせください！