WordPressでもテーマをそのまま使うのではなく、デザインをカスタマイズしているという方も多いのではないでしょうか。
デザインはCSSで編集を行うと思うのですが、CSSは若干使い勝手が悪くコードの記述が長くなってしまうんですよね。コードが長くなるとあとから見返したときどこのデザインの修正をしたのか探すのに時間がかかってしまいます。
SCSSを使うとパーツごとにデザインやホバー効果などをネスト形式で記述ができて効率的にCSSを書いていくことができます。（SCSSの詳細は公式サイトをみてもらった方がわかりやすいと思います。）
今回はWordpressでSCSSの導入方法を解説します。
WordPressプラグイン「WP-SCSS」を導入
まずはwordpressアドミン ダッシュボードにアクセスし、wordpressプラグインで「WP-SCSS」を検索し、インストールを行います。
「WP-SCSS」の設定
「Scss Location」にScssファイルを格納予定のフォルダ名、「CSS Location」に書き出されたcssが格納されるフォルダ名を指定します。
「Compiling Mode」は任意ですが、ここでは「Compressed」に設定しました。
サーバにアクセスしフォルダの作成
WordPressアドミン ダッシュボードからはフォルダの作成ができないため、Wordpressを配置しているサーバにアクセスし「cyberduck」などのFTPクライアントからアクセスします。
wp-content/themes/{ テーマ名 }/ の配下に先程 WP-SCSS で設定したファイル名のフォルダを作成します。（以下画像はthemeにcocoonを使った一例です。）
そしてSCSSののフォルダ内には空のscssファイルを作成しておきます。
もし、権限エラーが出てしまった場合は、SCSSが格納される予定のフォルダを右クリック、「情報」からファイルの権限を「700」に変更してみてください。
WordPressアドミン「テーマエディタ」より編集
あとはWordpressアドミンに戻り、「テーマエディタ」を開くと先ほど追加したフォルダが追加されていると思います。
SCSSフォルダ内で自由にSCSS記法でコードを記述し保存すると自動でコンパイルされ、CSSフォルダに書き出されます。
WordPress Head内にCSS読み込みコードを記述
最後にwordpress htmlファイル のheadタグ内にcssの場所を渡してやります。
headタグ内にコードを追加する方法は「header.phpを編集する」、「テーマのヘッダ編集機能を使う」、「プラグインを導入する」など任意の方法で問題ありません。
<head>
<link rel='stylesheet' id='{任意}' href='https://{ドメイン名}/wp-content/themes/{テーマ名}/{WP-SCSSで指定したフォルダ名}/{作成したCSSファイル名}.css' media='all' />
</head>
この工程が完了すれば、CSSがサイトに適用されているはずです。サイトにアクセスして確認してみましょう。
コメント