前々から作ってみたかったWordPressのテーマ。
０から開発してみました。
WordPressテーマ「Zero」は黒、青、白をベースカラーに、ダークモードをイメージしたシンプルなエンジニア向けのテーマです。
目次
LocalとPHP
ローカルで開発環境を作るためにMacに「Local」をダウンロードします。
Local内にWPのサイトを作成。
管理画面に入って、適当に記事や固定ページを複数作成。
次に、PHPのコードで、記事のタイトルや内容を取得して表示する。
PHPを使ってWordPressを操る際には、以下の本がとても参考になりました。
WordPressで必要なPHPファイルは決まっているのです。
- function.php
- header.php
- sidebar.php
- footer.php
- page.php
- single.php
- etc
本を参考にしながら、これらを作ればOK。
Webデザイン
しかし、このままだと、Webデザインがダメダメなので、CSSを使ってスタイリングをしていきます。
CSSのスタイリングについては以下の本を参考にしました。
この本の開発者ツールの使い方がとてもタメになりました。
ブラウザの開発者ツールを使うと、padding,marginなどの調整がブラウザ上で確認しながらできるんですよ。
ブラウザでチェックできるんで開発スピードめっちゃアップです！
スタイルシートは０から書き始めて、300行程度記載。
PCとスマホで適用するスタイルシートを変えるメディア・クエリーという仕組みがとても便利でした。
最後に
2冊の本を読みながらWordPressのテーマを作成するのは、最高に楽しい時間でした。
PHPやHTML、CSSの学習にもなりました！
得られた知見をどこかでアプトプットできたら良いなと思います。
