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

投稿日:2019-09-23



ナカジ(@cp_nakajun)です。

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

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

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

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

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

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

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

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

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

という感想です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.WordPressのテーマに作り変える

ここからようやく本番です。

先に作ったHTMLをWordPressのテーマにしていきます。

WordPressの管理画面で[外観]→[テーマエディター]を見たことある人はなんとなくわかるかもしれませんが、PHPのファイルを用意していきます。

使ってるテーマによっては膨大な数のPHPファイルが存在しているかもしれませんが、とりあえず最低限WordPressらしく使うのに必要なのは

  1. index.php:トップページなど
  2. header.php:ヘッダー
  3. footer.php:フッター
  4. sidebar.php:サイドバー
  5. single.php:記事ページ
  6. functions.php:テーマ用関数
  7. style.css:スタイルシート

最低限とはいえ、こう書くと複数のファイルになるので難しく感じるかもしれませんが、実は単純で

先に作ったhtmlを「ヘッダー」や「フッター」など、パーツに分解するだけというイメージです。

分解することで使い回すことができます。
例えば「ヘッダー」を修正したい場合は「header.php」を修正することで全てのページに適応される、といった具合です。

では、どうやって「置き換える」のか?ですが

基本はWordPressで用意されているPHPコードに置き換える作業になります。

ですが、先にも書きましたがPHPを理解している必要はありません。

僕も参考にさせて頂いたサイトですが
日本語版 WordPress チートシート:WEBクリエーターボックス
のようにWordPressのタグを調べ、必要な場所に置き換えていくことで

WordPress(CMS)らしい機能を備えていきます。

3.機能の追加やデザインのカスタマイズ

3つのステップの最後は機能の追加やデザインのカスタマイズ。

先の項目で「置き換える」とは書いたものの、その具体的なやり方等の説明はしませんでした。

それは機能とその実装方法は膨大なやり方があり、必要な機能は人それぞれなので今回は割愛しました。

でも、それだとさびしいのでこの後、僕が参考にさせて頂いたサイトをいくつか紹介させていただきます。

最後のステップは、機能を実装しながらCSSでデザインを作って詰めていく作業になります。

WordPressテーマ作りの参考サイト

超役に立った2つ

上記の2つでテーマ作成の「根幹」を知ることができると思います。

次に、僕が欲しい機能とかを装備する際にお世話になったサイトです。

本当に基礎から勉強したい場合は

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



おすすめのクリエイティブ・コーディング関連カテゴリー

ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します