NokkunBlog

Keep technology simple.

WordPressのテーマを0から開発してみた

text

前々から作ってみたかったWordPressのテーマ。

0から開発してみました。

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などの調整がブラウザ上で確認しながらできるんですよ。

ブラウザでチェックできるんで開発スピードめっちゃアップです!

スタイルシートは0から書き始めて、300行程度記載。

PCとスマホで適用するスタイルシートを変えるメディア・クエリーという仕組みがとても便利でした。

最後に

2冊の本を読みながらWordPressのテーマを作成するのは、最高に楽しい時間でした。

PHPやHTML、CSSの学習にもなりました!

得られた知見をどこかでアプトプットできたら良いなと思います。