【WordPress】１からオリジナルテーマを制作してみた話 （コーディング〜WordPress実装）
前回のブログからかなり間あいてしまいました。
さて仕切り直しです。
前回は、WordPressのオリジナルテーマ制作のデザイン制作編でした。
今回は、デザインを元に、コーディング～WordPress組み込みまでをまとめました。
目次
コーディング開始・・その前に
早速コーディングを開始していこうと思いますが、事前準備編でも書いたように、gulpを使用してコーディングをしていきます。
今回は下記のプラグインを使用してコーディングを進めます。
- gulp-sass・・・sassを使う
- gulp-autoprefixer・・・ベンダープレフィックスを自動的につけたい
- gulp-sass ・・・sassを使うため
- gulp-autoprefixer・・・ベンダープレフィックスをつける
- browser-sync・・・データ保存毎にブラウザ再読み込み
- gulp-plumber・・・sassの強制停止を防止
- gulp-notify・・・エラー通知を出す
各々の使い方は、下記を参考にしています。
さて、gulpを使って効率的にコーディングができるようになったので、ゴリゴリコーディングを進めていきます。
主要ページのコーディング
コーディングを行なったのは以下のページ。
- front-page.html
- single.html
- page.html
上から順番に作成していきました。
ベースはfront-page.htmlなので、ここを作れば後はコピーして他のページを作っていきます。
front-page.html作成の段階で、header、footer、sidebarなど、テンプレート化する部分をきちんと作っておけば、変更するのは各ページのコンテンツだけです。なのでどんどんコーディングを進めていきます。
WordPress組み込み
コーディングが終わったら、WordPressを組み込んでいきます。
事前準備でも書いたように、ローカル開発環境はMAMPを使います。
実装作業順に書いていきます。
MAMPをダウンロード
MAMPの公式サイトからダウンロードします。
WordPressをダウンロード
WordPressの公式ページから、データ一式をダウンロードします。
ダウンロードしたデータは、/Application/MAMP/htdocsに移動します。
これでMAMP上でWordPressが使えるようになります。
wp-content/themesにコーディングしたファイルをフォルダごと移動
タイトルのように、wp-content/themesフォルダに、コーディングしたファイルをフォルダごと入れてしまいます。
僕の場合、「0-1growth」というフォルダでコーディングを行なっていたので、それをそのまま入れ込みました。
CSSを読み込ませる
コーディングしたデータをwordpressに入れ込んだだけではCSSがきちんと反映されません。
CSSファイルを読み込むには、functions.phpというファイルを作成して読み込み設定を行います。
下記のサイトを参考にさせていただきました。
必要なプラグインをダウンロードする
WordPressを組み込む前に必要なプラグインをダウンロードします。
このブログの場合、下記のプラグインをダウンロードしています。（デザインに関係するものだけ抜粋）
- Easy Table of Contents ・・・記事の目次を表示
- Simple Share Buttons Adder・・・シェアボタンを表示
- WP Sitemap Page・・・サイトマップを表示
- Contact Form 7・・・お問い合わせフォームを実装
WordPress組み込み開始
ここから組み込みを本格的に行っていきます。
①拡張子の変更を変更
front-page.htmlをfront-page.phpに、single.htmlをsingle.phpに、page.htmlからpage.phpに変更します。
②テンプレートファイルを作成
front-page.phpから一部分を抜き出し、「header.php」「footer.php」「sidebar.php」作成します。
同じようにsingle.phpから「comments.php」を作成します。
③WordPressのタグを埋め込み
get_header、get_footer、get_sidebarでテンプレートファイルをfront-page.phpとsingle.php、page.phpに埋め込みます。
記事を表示させるhave_posts、タイトルを表示させるthe_titleなど、いろんなタグを埋め込んでいきます。
下の書籍を見て作成していきました。
④front-page.phpを元に「archive.php」「index.php」を作成
共通部分が多いページは、コピペで増やします。
⑤functions.phpの編集
グローバルメニューやウィジェットを使用できるようにしたり、WordPressが標準で読み込む不要な設定を外したり、管理画面の不要な項目を非表示にしたりなどなど、必要に応じて設定していきます。
その都度、ネットで調べて実装していきました。
⑥本番環境に実装。手直し
本番環境にコーディングしたデータ、プラグインなどのデータを入れていきます。
動作がおかしな点や表示崩れが起きている点を確認します。
一通り実装を行なってみて
合間を縫いながら制作を行い、１ヶ月くらい？で公開しました。
その中で反省点がいくつかありました。
１、WordPress実装段階で、gulpをうまく使えなかった。
コーディングの段階では問題なくgulpを使えていましたが、WordPress実装段階に来たとき、phpとうまく連携させることができませんでした。
browser-syncとで立ち上がるlocalhostと、MAMPで立ち上がるlocalhostの二つを使ったわけのわからない状態で実装を進めていました。
デザイン変更の確認はMAMPで立ち上げたlocalhostで確認していたので、結局手動で再読み込みしていました。
２、コーディングのルールをもっと固めておくべきだった。
ある程度コーディングのルールは決めていたが、後から追加が必要な部分が出て来た場合に適当にクラス名をつけたりしたため、混乱してしまいました。
次回は、ここら辺の環境をしっかり整備してWordPress構築をしていきたいと思います。
終わりに
３回にわたって、オリジナルテーマ作成について書きました。
もっと根詰めて構築を進めれば時間短縮はできるかなと。
まだまだ効率化できるよりはありそうです。
このデザインに飽きるまで、少しずつ改良を加えていこうと思います。
細かい部分に関しては、少しづつ書いていこうと思います。
