WordPress:Genesis Framework を使ったテーマ制作(3)

「WordPress:Genesis Framework を使ったテーマ制作」の3回目です。



テストデータの導入

投稿されたデータがありませんとテーマの作りようがありませんので、まずテストデータを入れます。「WordPress Codex 日本語版」の「テーマユニットテスト」に解説があります。


下のリンク先からダウンロードし、ツール -> インポート -> WordPress をインストールしてテストデータを導入します。導入方法の手順は上記リンク先にありますし、ググれば丁寧に解説されているサイトがあります。


導入したテストデータを Genesis Sample Theme で見てみますとフロントページはこんな感じです。

f:id:ausnichts:20220401095917j:plain


これから作っていく Genesis Sample に切り替えますと、CSS を何も指定していませんのでこうなります。

f:id:ausnichts:20220401095808j:plain


Sass とリセットCSSの導入

これから style.css に一からスタイルを書き込んでいくわけですが、Sass を使いますとかなり楽になりますので、私はプラグインの WP-SCSS を入れています。できれば gulp を使った開発環境を整えたいと思っていますが、なかなか時間が取れずにまずはプラグインでという状態です。この WP-SCSS は、ファイルの保存ではなくその後ページをリロードしたタイミングでコンパイルされます。


設定をこのようにしていますのでコンパイルすると子テーマ直下に style.css を書き出します。

f:id:ausnichts:20220402202549j:plain


ファイルの階層構造はこのようにしています。

f:id:ausnichts:20220401095419j:plain


続いて、リセットCSS を入れます。私は Destyle.css を使っています。実際にすべてのブラウザを確認したわけではありませんが、ブラウザ間の違いをほぼ取り去ってくれるらしいです。


destyle.css を導入しますとこうなります。見事に文字列だけになりました。

f:id:ausnichts:20220401095709j:plain


これに一から CSS を指定していくわけですが、思うほど大変ではありません。文字サイズや各ブロックのマージンやパディングを指定していけば読みやすいページになります。

WordPress や Genesis の設定もサイトをつくりながらやっていきます。次回です。