前回のブログ「Dreamweaverを使ったWordPressのテーマ制作-制作編-」でHTMLファイルをWordpressに変換する作業が終わりましたので今回の記事はもっと制作をしやすくなるための編集をガンガン行っていきたいと思います。

前回の記事はこちらから↓

Dreamweaverを使ったWordPressのテーマ制作-制作編-

前回から記載を始めた「Dreamweaverを使ったWordPressのテーマ制作-導入編-」の続きです。 前回の記事はこちらから↓ 今回からD…

今回のテーマは応用編です。

Dreamweaverの便利機能

CSSプリプロセッサー機能

Dreamweaverはもっと作業効率を上げるために「CSSプリプロセッサー機能」が標準で付いています。
「CSSプリプロセッサー機能」とはSCSSで作ったファイル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内の共通の変数やクラスをインクルードして取り込むようにしています。（各ファイルの記載の時は変数なので、変数で記載したところはvariable.scssの一か所を編集しコンパイルするだけで一気に変わるようにしています。）

各パーツのSCSSファイルが作成出来たらmain.scssでcssファイルをコンパイルしてfunctions.phpで読み込む…ということをやっています。

前回のブログではmain.cssをfunctions.phpで読み込むということをすでに記載しているので、まとめたファイルをコンパイルする度にブラウザで開いているテーマをスーパーリロードしてレイアウトの調整を行っています。

なぜ、style.scssに記載しないのか

それにも理由があってコンパイル先はDreamweaverの設定でcssファイルを指定してしまっているのでstyle.cssに直接記載をしてしまうとcssフォルダにstyle.cssファイルが行ってしまうことが問題でした。

WordPress上のルールとしてstyle.cssはルートディレクトリに置かなければいけないことがあるため、都度ルートディレクトリに変更するのは面倒くさいし…ということで考えたのが別の読み込みファイルを作ってしまうという結果になりました。

scssファイルがひとつだけであればルートディレクトリにコンパイルすることで問題ないかと思います。
その場合、ルートディレクトリにscssファイルが残りますが…。

Bootstrapの導入

ワードプレス内にCSSフレームワークで有名な「Bootstrap」を入れてサイトをレイアウトしたいという方もおられると思います。

僕も最初はBootstrapってWordpress上のプラグインから導入するの？と考えていましたが普通に導入することが出来ましたのでこちらに記載をしたいと思います。

導入方法は2パターンありますので好きな方を選んでください。

ダウンロードしてファイルを読み込む方法

ファイルに落とすには公式サイトから一式ダウンロードを行ってください。

ファイルは読み込めればどこでも良いのですが今回は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' );
?>

ダウンロードしたboootstrapファイルのすべての機能を取り入れるとサイトが重たくなってしまうことがあるためレイアウトだけ使いたいなどは適宜読み込むファイルを変更してください。

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に特化した共有サーバーからファイルを取り込む方が速度向上につながるという…

さいごに

Dreamweaverを使ったWordPressのテーマ制作は全3回にわたり紹介してきました。

この流れはサイトを制作するうえで必ず必要になりますのでこれからサイト制作をDreamweaverで行っていく方々には是非とも参考にしていただきたいと思っております。

また、次の機会ではDreamweaverの便利機能の紹介やWordpressの制作についてのあれこれの情報を発信したいと思いますので気に入っていただけたらSNS投稿などをよろしくお願いいたします。