u-days

PHP初心者でもWordPressテーマの開発は簡単にできるぞ!

はじめに

僕は2020年新卒フロントエンドエンジニアです。今みなさんがご覧になっているこのブログは、僕が開発した独自のWordPressテーマとなっています。今回はWordPressテーマ開発についてのお話をしたいと思います。

僕のバックエンドの経験はRuby on Railsチュートリアルの実践、Djangoで自己満アプリケーションを実装したことがある程度です。ましてやPHPは文法が気持ち悪いという理由でほとんど触ったことがありませんでした。

そんな僕がWordPressテーマを開発した経緯と、プログラミング初心者がWordPressテーマを開発する敷居を下げられるような話をできたらと思っています。

目次

WordPressテーマを開発した経緯

仕事で有料テーマの改修をした

無料、有料問わず豊富なWordPressテーマが公開されているにも関わらず、「なぜWordPressテーマを開発するのか」と疑問に思う方もいるかと思います。しかもPHPをまともに使った経験すらないのに。

そのきっかけは仕事でWordPressを扱う機会があったことです。

その仕事はデザインの改修と使われていない膨大なCSSを削除して表示速度を最適化するというものでした。表示速度が低下している理由は他にもありましたが、多くの無駄なCSSが存在したことは確かです。

そこで、「そんな無駄なCSSが記述されているくらいなら自分で作ってしまえ!」と思ったのがひとつのきっかけです。

WordPressって意外と簡単

仕事ではデザインの改修とCSSの最適化でしたが、そのときにPHPのコードを眺めることもあったので、WordPressテーマ開発の概要が見えてきました。

そこで気づいたことがWordPressテーマの開発が意外と簡単であるということでした。

その後ドキュメントやWeb上の記事などを眺めて少し学習した結果、WordPressの構成自体は複雑ですが、WordPressテーマを開発する上で作る必要なファイルはごく少数であることがわかりました。

それを知ったことで開発のモチベーションが上がりました。

WordPressテーマの開発に必要な知識

ここでは必須の知識とあると役立つ知識についてお話していきたいと思います。また、この記事では各知識の詳細は省略したいと思います。

開発に必須の知識

  • HTML
  • CSS

本当に最低限の知識をあげると以上のものになるかと思います。最低限これらの知識さえあれば、少し勉強するだけでWordPressのテーマを開発できるようになるかと思います。

開発するうえで知っておくと役立つ知識

  • ifforなどの基礎的なプログラミングの文法(PHPならなおよし)
  • WordPress利用者側の仕様(記事の作成方法やカテゴリの仕組みなど)
  • 検索力

WordPress内部はPHPで作られているため、PHPの文法で条件分岐などを書いていくことになります。ただ、使う文法はifforなどの基本的な文法ばかりで、複雑な処理はWordPressが用意している関数で実装できるので、他の言語を学んでいる方でも困ることは少ないと思います。

また、WordPressの利用者側の仕様を知っておくことで、「ここにこういう要素を配置したい」といときに調べやすかったり、迷わずに実装することができるので開発の役に立つと思います。

最後に検索力ですが、WordPressはインターネット上に多くの情報が転がっているがゆえに、古い情報や不正確な情報があったりします。また、テーマ開発ではなく運用面での情報も多く存在するため、的確な情報を見つけるのに、検索力が必要になってきます。プログラミング用語やWordPressの用語などをうまく絡めて上手に検索できるとグッと開発が楽になると思います。

WordPressテーマの開発の流れ

ここでは、初めてWordPress開発をする人向けの開発の流れを僕なりに教えていけたらと思います。慣れてきたらもう少し効率的に開発ができると思います。

ざっくりした流れは以下になります。

  1. HTML/CSSで記事一覧ページと記事ページをマークアップする
  2. WordPressの仕様に合わせてファイルの分割をする
  3. WordPressの仕様に合わせて要素の置換をする

これだけです。それでは、もう少し詳しく説明していきたいと思います。

HTML/CSSでマークアップ

まずは記事一覧ページと記事ページをマークアップします。CSSファイルは任意で作成してください。どちらのページから始めても構いません。また、ここでいう「記事一覧ページ」は本ブログのトップページタグページ、「記事ページ」については本ページを参考にしてください。

トップページタグページの若干のデザインの違いがあったりしますが、最初のうちは気にせずに一覧ページを作成してください。ただ、変更しやすいようにマークアップしておくと後から楽かもしれません。

ファイルの分割

次はWordPressの仕様に合わせてファイルの分割と要素の置換をしていきます。

WordPressに必要なファイルは以下のファイルになります。仕様上はindex.phpstyle.cssのみで実装できるそうですが、現実的ではないのでひとつだけファイルを加えています。また、拡張子がphpになっていますが、要素の置換をするまではPHPの文法は使わないので、HTMLの内容はそのままで、拡張子をphpに変えるだけでOKです。

  • index.php
  • style.css
  • singular.php

index.phpは記事一覧ページ、style.cssはテーマ情報とスタイル、singular.phpは記事ページにあたります。WordPressサイトを運営したことがある人は、以下のページを見ると各ページの詳細がわかるかもしれません。

WordPress Codex 日本語版:テンプレート階層

他にも下記のファイルなどに分割すると便利ですが、分割の方法がよくわからない上記のままでも問題ありません。

  • header.php(ヘッダー部分)
  • footer.php(フッター部分)
  • single.php(投稿ページ)
  • page.php(固定ページ)

要素の置換

最後に一番重要な要素の置換です。記事の一覧をループで表示したり、記事タイトルや記事本文などの情報をPHP(WordPressが用意している関数)を使って表示していきます。

今までの流れで作った簡単なページで必要な置換をざっくりとあげると以下のようになると思います。

  • 記事一覧のループ
  • 記事情報の表示
  • ページネーション

これさえあれば最低限のテーマは作れると思います。実際、このブログを開設した当時のテーマも、この処理に少しアレンジを加えた実装しかしていません。

各処理の詳しい実装方法については別記事を用意したいと思っています。詳しく知りたい方はWebで「WordPress 記事一覧 実装方法」、「WordPress 記事タイトル 出力方法」などで調べていただければと思います。

最後に

この記事では詳しい実装方法を紹介していないので、想像が付きづらい部分もあるかと思いますが、みなさんのWordPressテーマ開発へのハードルを下げられていたら幸いです。

みなさんもぜひオリジナルのテーマを開発して、WordPressライフを楽しみましょう。

また、WordPress関連の情報も随時更新予定です。