dotinstallを手本にしてWordPressのテーマを作成してみる

2019/4/21 プログラミング

WordPressをいじっていくためのローカル環境ができあがったので、これからWordPressがどういう仕組みで動いているのかを学んでいきたいと思います。

何か参考になるサイトがないかなと検索をしていたら、だいぶ以前の動画ですが、dotinstallさんに動画があったので、まずはこれの流れに沿ってテーマを作成してみます。私がこの記事を書いている日時では無料で見れるので、もしwordpressの勉強をしている人は参考にしてください。

https://dotinstall.com/lessons/basic_wordpress

まずは、WordPressを下記コマンドでサーバーからpullしてきて、WinSCPで中身を確認しながらいじっていきます。 

vagrant up
vagrant ssh
$ cd /vagrant/
$ wordmove pull --all

テーマ作成の流れ

動画を見ながら確認した大まかな流れは下記になります。

  1. HTML、CSS、画像ファイルなど、サイトデザインのベースとなる、index.html、style.css等を作成する。
  2. pcにpullしてあるwp-content/themes に新しいtheme用のフォルダを作り、ベースとなるhtml、css, 画像ファイル等を入れる。cssには、Theme Stylesheetを先頭に追記すると、 管理画面のテーマ選択でそのテーマが表示される。index.htmlはindex.phpにリネームする。
  3. index.phpを、例えば、header.php fotter.php sidebar.php等々、
    各部分に分割する。 それぞれ分割したファイルへ、 テンプレートタグを適用していく。 テンプレートタグとは、管理画面から入力する情報を引っ張ってきてくれるタグで、既に定義されている。また、functions.phpを作成して、カスタマイズに必要な関数を記述していく。 index.phpが完成すると、デフォルトでは、トップの画面となる。
  4. single.php（各記事の画面）、page.php（固定ページの画面）をindex.phpをもとに作成する。テンプレート階層という仕組みにより、これだけで必要最低限のページが出来上がる。
  5. 必要であればショートコードをfunctions.phpに登録する。
  6. 困ったら、https://codex.wordpress.org/でまずは検索する。

一か所だけ仕様が変わったところがあったようで、エラーがでる箇所がありました。 functions.phpにregister_sidebarを記入する際、引数の配列にidを渡す必要があります。 下記サイトのようにすれば解決します。

https://minimalwp.com/14094/

少し時間がかかりましたが、やっと出来上がりました。 サーバーに下記コマンドでupして、早速テーマを適用してみます。

$ cd /vagrant/
$ wordmove push -t

折角作ったので、このテーマをベースに発展させていこうと思います。