SCSSをwordpressで使用する方法

CSS SCSS

SCSSをwordpressで使用する方法

WordPressでSCSSを使用するためには、SCSSファイルをCSSにコンパイルするプロセスが必要です。
以下の手順でSCSSをWordPressテーマに組み込むことができます。

1. 必要なツールのインストール

まず、SCSSをCSSにコンパイルするために、Node.jsとnpm（Node Package Manager）をインストールします。
これにより、SCSSをコンパイルするためのツールである「Sass」を使用することができます。

  • Node.jsのインストール

Node.jsの公式サイトからインストーラーをダウンロードしてインストールします。
nodejs.org

  • Sassのインストール

ターミナルやコマンドプロンプトで以下のコマンドを実行して、Sassをグローバルにインストールします。

npm install -g sass

2. テーマのディレクトリ構造の設定

WordPressテーマのディレクトリ構造を整理し、SCSSファイルを管理できるようにします。
一般的な構造は以下のようになります。

your-theme/
│
├── css/
│   ├── style.css
│
├── scss/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _base.scss
│   ├── style.scss
│
├── functions.php
├── style.css
└── index.php

3. SCSSファイルの作成

scssディレクトリ内にSCSSファイルを作成します。
例えば、style.scssファイルを作成し、全てのSCSSコードをここに記述します。

scss/style.scssの例:

// _variables.scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

// _base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

// style.scss
@import 'variables';
@import 'base';

4. SCSSのコンパイル

SCSSファイルをCSSにコンパイルするには、ターミナルで以下のコマンドを実行します。
これにより、scss/style.scssがcss/style.cssにコンパイルされます。

sass scss/style.scss css/style.css

5. WordPressテーマにCSSを追加

functions.phpファイルにスタイルシートを読み込むコードを追加します。
これにより、コンパイルされたCSSファイルがWordPressテーマで利用されます。

functions.phpの例:

function my_theme_enqueue_styles() {
  wp_enqueue_style('main-style', get_stylesheet_directory_uri() . '/css/style.css');
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

6. SCSSの自動コンパイル（オプション）

SCSSファイルが変更されるたびに手動でコンパイルするのは面倒なので、ファイル変更時に自動的にコンパイルされるように設定します。
以下のコマンドでウォッチモードを有効にすると、SCSSファイルが変更されるたびに自動でコンパイルされます。

sass --watch scss/style.scss:css/style.css

これで、WordPressテーマでSCSSを使用する準備が整いました。
SCSSの変更が自動的にCSSに反映されるようになるので、テーマのスタイリング作業が効率的になります。