前回のブログ「Dreamweaverを使ったWordPressのテーマ制作-制作編-」でHTMLファイルをWordPressに変換する作業が終わりましたので、今回の記事ではもっと制作をしやすくなるための編集をガンガン行っていきたいと思います。
今回のテーマは応用編です。
Dreamweaverの便利機能
CSSプリプロセッサー機能
Dreamweaverにはもっと作業効率を上げるために「CSSプリプロセッサー機能」が標準で付いています。
💡 CSSプリプロセッサー機能とは
SCSSで作ったファイルを保存のたびに自動でコンパイルし、CSSに変換してくれる便利な機能です。手動でコンパイルする手間がなくなります。
SCSSとは？
以下のようにUdemyメディア様が解説されています。
「Sass（サス、サース）」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。従来のCSSにデザイナーやプログラマーが抱いていた不満を解消するスタイルシートといえます。
Udemy メディア｜【入門編】Sassの意味は？SASS・SCSSとは？読み方から使い方まで解説より
CSSの主な悩みといえば…
- 同じクラスを何回も記入する必要がある
- 同じようなコードがたくさんあって見にくい
それらを解決するために開発されたのがSCSSです。すなわち、すごいバージョンのCSSという事ですね！ぜひ、コーディングを極めたい方なら覚えていただきたいメタ言語です。
SCSSでの編集のコツ
完全に独学ではございますが、どんな感じでサイトの構成をしているのかを公開したいと思います。
僕の場合だとSCSSのフォルダを設け、その中にパーツごとに分けたファイルと変数をまとめたファイルを操作してテーマを制作しています。
sample
├ plugins（フォルダ）
├ scss （フォルダ）
│ ├ header.scss
│ ├ footer.scss
│ ├ top.scss(index.php用)
│ ├ page.scss
│ ├ archive.scss
│ ├ single.scss
│ ├ variable.scss(変数用)
│ └ main.scss(一つにまとめる用)
├ css （フォルダ）
│ └ main.css(コンパイルされたファイル)
├ style.css
├ functions.php
├ header.php
├ footer.php
├ index.php
├ page.php
├ archive.php
└ single.php💡 この構成のポイント
variable.scss に共通の色やスタイルを格納しておき、各SCSSファイル内でインクルードして取り込みます。変数を使っているので variable.scss の一か所を編集してコンパイルするだけで、サイト全体のスタイルが一気に変わります。
各パーツのSCSSファイルが作成出来たら main.scss でCSSファイルをコンパイルして functions.php で読み込む…ということをやっています。
前回のブログでは main.css を functions.php で読み込むということをすでに記載しているので、まとめたファイルをコンパイルするたびにブラウザで開いているテーマをスーパーリロードしてレイアウトの調整を行っています。
なぜ style.scss に記載しないのか
それにも理由があります。コンパイル先はDreamweaverの設定でCSSフォルダを指定してしまっているので、style.css に直接記載をしてしまうとCSSフォルダに style.css ファイルが行ってしまうことが問題でした。
⚠️ 注意
WordPress上のルールとして style.css はルートディレクトリに置かなければならないため、都度ルートディレクトリに変更するのは面倒です。そこで、別の読み込みファイル（main.css）を作ってしまうという方法を取りました。SCSSファイルがひとつだけであればルートディレクトリにコンパイルすることで問題ありません。
Bootstrapの導入
WordPress内にCSSフレームワークで有名な「Bootstrap」を入れてサイトをレイアウトしたいという方もおられると思います。
僕も最初はBootstrapってWordPress上のプラグインから導入するの？と考えていましたが、普通に導入することが出来ましたのでこちらに記載をしたいと思います。導入方法は2パターンありますので好きな方を選んでください。
方法① ダウンロードしてファイルを読み込む
ファイルに落とすにはBootstrap公式サイトから一式ダウンロードを行ってください。
ファイルは読み込めればどこでも良いのですが、今回は plugins フォルダを設けその中にBootstrapを配置します。特に重要なのは bootstrap.min.css になります。
sample
├ plugins
│ └ bootstrap ←ここに配置しました
│ └ bootstrap.min.css ←このファイルが必要
├ style.css
├ functions.php
├ header.php
├ footer.php
├ index.php
├ page.php
├ archive.php
└ single.phpもちろんのことですが、この配置だけではファイルは動きません。次に functions.php で必要ファイルを読み込む設定を行っていきましょう。
<?php
function theme_name_scripts() {
//以下の二つはテーマ必須のスタイルと通常レイアウトスタイルを読み込んでいます
wp_enqueue_style( 'style-css', get_stylesheet_uri() );
wp_enqueue_style( 'main-css', get_template_directory_uri() . '/css/main.css' );
//jQueryの読み込み
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', true );
//ここからbootstrapの読み込み
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/plugins/bootstrap/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/plugins/bootstrap/js/bootstrap.bundle.min.js', array( 'jquery' ), '5.1.3', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>💡 パフォーマンスについて
ダウンロードしたBootstrapファイルのすべての機能を取り入れるとサイトが重たくなることがあります。レイアウトだけ使いたい場合は、適宜読み込むファイルを変更してください。bootstrap.bundle.min.js はドロップダウン・ツールチップ・ポップオーバーなどのJSライブラリです。
方法② CDNで読み込む
functions.php に先ほどと同じように記載していきます。
<?php
function theme_name_scripts() {
//以下の二つはテーマ必須のスタイルと通常レイアウトスタイルを読み込んでいます
wp_enqueue_style( 'style-css', get_stylesheet_uri() );
wp_enqueue_style( 'main-css', get_template_directory_uri() . '/css/main.css' );
//jQueryの読み込み
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', true );
//ここからbootstrapの読み込み
wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js', array( 'jquery' ), '5.1.3', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>ダウンロードするのもCDNにするのもどちらでも構いませんが、近頃はCDNの利用を推奨しているようですね。契約しているサーバー会社よりもCDNに特化した共有サーバーからファイルを取り込む方が速度向上につながるという利点があります。
さいごに
✅ シリーズ全3回のまとめ
① 導入編 — ローカルサーバーの構築とDreamweaverの設定
② 制作編 — テーマの基本ファイル作成とヘッダー・フッターの反映
③ 応用編 — SCSS（CSSプリプロセッサー）とBootstrapの導入
Dreamweaverを使ったWordPressのテーマ制作は全3回にわたり紹介してきました。この流れはサイトを制作するうえで必ず必要になりますので、これからサイト制作をDreamweaverで行っていく方々にはぜひとも参考にしていただきたいと思っております。
また、次の機会ではDreamweaverの便利機能の紹介やWordPressの制作についてのあれこれの情報を発信したいと思いますので、気に入っていただけたらSNS投稿などをよろしくお願いいたします。
この記事を書いた人
