【準備編】ワードプレス オリジナルテーマの作成方法

ワードプレスのテーマの種類は非常に多くクオリティーも凄く高いものばかりです。

ですが、有料・無料問わず配布されているテーマは絶対に誰かと被ります。人と同じのは嫌だと思い、勉強の為にもワードプレスのオリジナルテーマを自作してみました。

今回は、ワードプレスにオリジナルテーマを自作する前の準備編を紹介して、本番環境で稼動するまでの道のりを数回に分けて紹介します。

ワードプレス、オリジナルテーマ自作の記事最終回でオリジナルテーマの適用を行います。

自分と同じように「ワードプレスのテーマを自作したいけど作り方がわからない」という方は参考にしてみて下さい。

ワードプレスオリジナルテーマ作成の前提知識

ワードプレスでオリジナルテーマを自作する為には、前提知識が必要です。

  • html5/css3/jQuery
  • cssフレームワーク(知っていると作業が捗ります)
  • PHP

上記の基本知識は知っておく必要があります。

ワードプレスオリジナルテーマ作成 前提知識①html5/css3/jQuery

html5はwebサイトの土台を作成する為に必要な知識です。

インターネット上サーバーとパソコンがデータのやり取りをする際にwebページの上にある文章や画像を正確に認識して表示させるのに必要な知識になります。

つまり、「これは見出しです」、「これは画像です」など目印をつけてwebページを表示させるものです。

ですが、html5だけでwebページを作成すると、上から順番に文字や画像が並んでいるだけで、読みにくく、かっこ悪いのでcss3で見た目を綺麗にまたは、かっこよく飾り付けをします。

html5だけで作成したwebページ

少し強引かもしれませんが例えるなら、html5はクリームも何も塗っていない焼き上がったケーキで、css3が焼きあがったケーキにクリームを塗ったりイチゴを置いたりする飾り付けという感じです。

ワードプレスオリジナルテーマ作成 前提知識② jQuery

jQueryはwebページにちょとした動きを簡単に与える事ができるプログラミング言語です。

有名な場所では、スマホでwebページを観覧すると良く右上か左上にメニューの意味である三本線のマーク(ハンバーガーメニュー)があると思います。

三本線をタップすると、「お問い合わせ」「カテゴリー」などメニューが開閉されますが、この動作をJQueryで作成されている事が多いです。

厳密に言えば、スマホのメニューを作るのに全てのページでjQueryが使用されているわけではありません。

ですが、jQueryで簡単に実装する事が出来るので、使用されている事が多いです。

ワードプレスオリジナルテーマ作成 前提知識③ cssフレームワーク

html5とcss3を覚える時に出来れば一緒に覚えておくと、webページを作る時に凄く重宝します。

webサイトを作成する時は、画像や各コンテンツが横に並んでいるサイトがあります。

横に並べたり、文字を真ん中や右側に寄せたりなどレイアウトやデザインに関係するものは全てcss3で行います。

ですが、横に並べる場合も表示される横幅を計算して綺麗に表示するようにしたり高さを揃えないといけない時など微調整が必要です。

この微調整で時間が掛かる事があり、慣れるまでは凄く大変な作業に感じます。

ですが、cssフレームワークを利用する事で、細かく計算された枠組みがあるので、使用したい枠組みの名前を呼び出すだけで、簡単に横並びを実現してくれたりします。

また、スマホとパソコンの表示に合わせて上手く表示してくれるので、自分でコードを書く量がかなり少なくなります。

cssフレームワークに慣れると作業が何時間分も短縮することが可能です。

今回は「Bootstrap」というフレームワークを使用しました。

ワードプレスオリジナルテーマ作成 前提知識④ PHP

jQueryと同じでプログラミング言語になります。

ブログの記事一覧を表示したり、各記事の内容を表示したりワードプレスの動作はPHPで行われています。

ワードプレスのオリジナルテーマを自作する場合、最低限の知識が必要になります。

ですが、ワードプレスとPHPに関する情報は、かなり集めやすいので都度調べながら行えば時間は掛かりますが、オリジナルテーマを自作する事はできます。

ワードプレスオリジナルテーマ作成の準備

ワードプレスでオリジナルテーマを自作する時に、いきなりワードプレスでオリジナルテーマを自作するのは、不都合が起きた時に危険な気がしたので、別の開発環境を用意して、サンプルページを作成しました。

今回ワードプレスに適用する予定のオリジナルテーマです。

デザインセンスがない素人が作成したので、完成度は残念な仕上がりですが、私自身は気に入ってます。

動作デモ

作成(準備)した手順を紹介します。

まずはワイヤーフレームでイメージを作る


まずは、ブログのイメージを掴む為にもワイヤーフレームというものを作成しました。

ワイヤフレームとはwebサイトの初期設計図です。初めての作成なので、とにかくシンプルに行うように心掛けました。

ワイヤーフレームを作った理由は、イメージを掴む為です。イメージを掴めれば作成がスムーズに出来ると本に書いてあったので、ワイヤーフレームでイメージを作りを行いました。

完成イメージ画像を作ってみる


次に「フォトショップ」や「Gimp」などの画像処理ソフトで、完成イメージ画像を作成します。

実際は自分のブログを作成する為にわざわざ、完成イメージ画像まで作成する人は少ないと思います。

ですが、私は優柔不断なところがあるので、自分の中で決めたイメージがブレない為にも完成イメージを想像しながら作成しました。

 

完成イメージ図を見ながらコーディング

完成イメージ画像が完成したら、完成イメージ画像を元に実際にwebサイトを作成していきます。

完成イメージ画像があったおかげで、スムーズにwebページを作成する事ができました。

ですが、スムーズに作成したと言っても丸1日ほど掛かっているので早くはないと思います。

コーディングしたhtml5のコードを今後の為に張ります。

コード

万が一コードをコピメして使うという方は、念のためにお伝えしておきますが、上記のコードは、独学で学んだ素人が書いたコードです。お世辞でも上手とは言えません。

また<section>や<aside>というタグの使いどころを間違っている可能性もあり、動作自体は、不都合などなく動きますが、コピメして使用する場合の責任は負いません。

ワードプレス オリジナルテーマ作成準備の環境

オリジナルテーマを自作した時の環境を紹介します。

ほとんどの方がワードプレスを自分のパソコン上にインストールして、サーバーに公開しないテスト環境を作成して開発を行うと思いますが、私の場合、以前勉強用に登録したcloud9を使用してコーディングを行いました。

cloud9は開発環境をパソコン上に作成する事なくブラウザー上で簡単に開発できるので、個人が運営するブログのオリジナルテーマを自作する程度でしたら、最適です。

ですが、cloud9は登録方法が少し面倒になったみたいなので、別の機会にcloud9の登録方法も紹介したいと思います。

ワードプレスオリジナルテーマの完成イメージ画像はフォトショップで

普段はwebライターとして活動していますが、記事に挿入する画像を加工するのに便利なのでフォトショップを購入しています。

フォトショップの知らない機能を少しでも覚える為という意味でも、今回、ブログの完成イメージ画像を作成しました。

まとめ:次はワードプレス オリジナルテーマのコーディング

次はサンプルとして作成したオリジナルテーマをワードプレスで稼動するように開発していきます。

作成中に一番悩んだのは、<section>や<aside>の使い方にかなり悩みました。

私が今回作成したワードプレステーマは古いブラウザーの事を考えずに作成しましたが、古いブラウザーに対応する場合、<section>タグなどには、<section class=”hoge”>などクラスやIDをつけない方が良いとネットで書いてありました。

慣れもあると思いますが、まだまだ勉強する事が山積みです。