WordPressで初めてオリジナル（自作）テーマを作ろうと思ったら読んで欲しい

投稿日：2019-09-23

ナカジ(@cp_nakajun)です。

先日、当ブログは自作のテーマにてリニューアルをしました。

立ち上げ当初は無料テーマを活用し、約一年半前にようやっと「STINGER」という有料テーマを導入して運営してきましたが

やっと自分でテーマを作りました。

なぜテーマを作ることにしたか？という僕の理由は

機能的にも見た目(デザイン)的にも「こういうことがやりたい」と思った時に高機能の有料テーマをカスタマイズするのは複雑で、それなら
自分で作った方がシンプルだし今後も便利なんじゃないかと思ったからです。

逆になんで今までテーマを作ってみなかったかと言うと
単純に無料・有料で優れたテーマがたくさんあるから選べばいいじゃんって思っていたのと

なんとなく難しそうに感じていたこと。
PHPとか勉強したこともないし…みたいな

ですが、先の理由で「作ってみよう」と決め、いろいろ調べながら作ってみたら

思ってたより簡単に作れた！

という感想です。

もちろん「配布」するような色んな人も使えるようなテーマを作るレベルではありません。

自分が管理するサイトで使うぐらいのものです。

そうは言ってもWordPressのテーマを作ることのイメージができないと何から手をつけてよいかわかりません。

今回はテーマ作りの概要と僕が参考にさせて頂いたサイトをご紹介させていただきます。

WordPressのテーマを作れる知識・技術レベル

そもそも単純に僕の知識不足だし、少し考えればわかるかもしれませんが

WordPressのテーマを作るのに必要な知識・技術レベルがどんなものかということがわかってなかったことが
テーマを作るって難しそうだなと勝手に思ってた原因でした。

では、どのぐらいの知識や技術レベルが必要か？ですが

自分で使う用途、最低限のテーマを作るならば

普段、WordPressでサイトを運営している
Html + CSS でページレイアウトと簡単な装飾ができる

というぐらいでテーマ作りに挑戦可能だと思います。

PHPのコードは出てきますが、PHP自体を理解している必要はとりあえず無いと思います。

WordPressのテーマを作る３つのステップ

では、ものすごく簡単にですがWordPressのテーマを作る流れを書きます。

1.トップページを作る(コーディングする)

恥ずかしながら、僕の盲点がコレでした。

最初にすることは「トップページをhtml+CSSでコーディングする」ことです。

トップページと記事ページを同じデザインにする場合は「index.htmlとstyle.css」のように本当に１枚ペラのページを準備します。

トップページと記事ページを別々のデザインにするならもう１つ「.html」のファイルを用意しておくとスムーズかと思います。

ものすごく極端なことを言えば「ヘッダー」「ボディ」「フッター」がある程度コーディングできてる状態であれば十分だと思います。

ちなみに僕は手っ取り早く利便性を考えて、ページデザインに「Bootstrap」を活用しました。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。(wiki)

汎用的なCSSを読み込むことになるので「ページの表示速度」に対する懸念もあるようですが、当ブログでは今のところその影響はないようです。