1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。

今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。
しかし、テーマを作る記事は他にいくらでもありますので、今回は、本格的に作りたい人向けの作り方の記事を書いていこうと思っています。

WordPress のテーマ(テンプレート)を自作する上での知識

必要な知識は、HTMLとCSS、PHP、JavaScriptの知識があれば理解できると思います。
それ以外の知識は、その場その場で解説していきますので、ご安心ください。

大まかな作り方

まず、ざらっと大まかな作り方を説明します。
かなり大雑把です。

1. ローカルに WordPress の環境を整える。
2. スタイルガイドジェネレータを使って、デザインを作る。
3. メタ言語を使ってコーディング。
4. メタ言語で書かれたソースをコンパイル。
5. 3~4を繰り返し、制作。
6. サーバーにアップロード。

ちょっと分かりにくく書いてみました。
安心してください。順を追って解説していきます。

有名なツール等の紹介

まず、あると便利なツール等を紹介します。

環境 MAMP, XAMPP, Vagrant
タスクランナー gulp, grant
メタ言語(CSS) SASS, SCSS, LESS, Stylus
メタ言語(HTML) Pug(Jade), Haml, Slim, Markdown, EJS
メタ言語(JavaScript) CoffeeScript, TypeScript, Haxe, Dart, JSX
スタイルガイド KSS, Frontify, hologram, SourceJS, styledocco, sc5-styleguide
ECMAScriptコンパイラ Babel
ライブラリ jQuery, BootStrap

なんやかんやありますが、「じゃあ何を揃えればいいの!?」って話です。
中には「タスクランナーとか、メタ言語って何?」という人もいるかもしれません。

少しだけ解説しますので、知ってる人は読み飛ばしても大丈夫です。

環境について

WordPress は PHP で書かれています。HTML や CSS はブラウザさえあれば動きますが、この PHP を動かすためには、その環境を整える必要があります。
この環境を整えるツールとして有名なものに、 MAMP, XAMPP, Vagrant が挙げられます。

タスクランナーについて

タスクランナーとは、様々なタスクをあらかじめ作っておき、簡単に実行できるようにするものです。

例えば、 Sass を CSS に変換したい時、あらかじめ作っておいたコマンドを入力するだけで、簡単に変換できてしまいます。
さらに、 Sass ファイルを保存した時、自動的に変換させるなんてこともできてしまう、便利なツールです。

メタ言語について

メタ言語は、一言で言えば、言語を書くための言語です。

例えば、 HTML であれば、 Pug や Haml といった言語で記述し、それを HTML のソースに変換して使います。
「なんだか、めんどくさいことをするな」という感じですが、メタ言語を使うことによって、

記述が少なくてすむ。
バグが減る。

といったメリットがあります。
このメリットは、実際にコーディングしてみると、実感できると思います。

スタイルガイドについて

スタイルガイドとは、WEBサイトを作る上での、パーツやレイアウトなどをあらかじめ作っておき、まとめておくものです。
チームで開発する時、他の人が作ったソースでも一目で分かるようになります。

一人で開発する時でも、スタイルガイドを作っておくことで、後から見た時に分かりやすくなります。
スタイルガイドを作るツールをスタイルガイドジェネレーターと呼びます。

ECMAScriptコンパイラについて

ECMAScript で書いたソースを、古いブラウザでも動作するようにコンパイルすることができます。

ライブラリについて

ライブラリは、ソースを読み込んで使う、素材です。
jQuery を使えば、簡単にサイトに動きを与えることができますし、 BootStrap を使えば、簡単にボタンや見出しなど、様々なパーツやレイアウトのスタイルをあてることができます。

開発環境を整える


環境を整えましょう。
今回は以下のものを使って、テーマを作っていこうと思いますので、よく分からなければ、以下と同じように揃えるといいかもしれません。

環境 Vagrant(VCCW)
タスクランナー gulp
メタ言語(CSS) SASS
メタ言語(HTML) Pug (PHP を使うために少し工夫が必要なので、また紹介します)
スタイルガイド Fractal
ECMAScriptコンパイラ Babel
ライブラリ jQuery

また、ECMAScriptコンパイラを使うので、JavaScript のメタ言語は使いません。

ローカルに WordPress の環境を整える( Vagrant ( VCCW ) )

まず、ローカルに環境を整えてみましょう。

以下の記事にまとめましたので、そちらをご覧ください。
VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

もしも運用中のサイトがあり、サーバーが SSH に対応していない場合は、こちらも参考にしてみてください。
WordMove | 運用中の WordPress 環境をローカルと FTP で同期

その他のインストール

タスクランナーは gulp を使っていこうと思います。

gulp についての記事は、こちらにまとめてありますので参考にして、インストールしてください。
gulpでsassをcssにコンパイル。インストール&便利な使い方。

テーマを作成するための設定等は、次回以降の記事で書いていきます。
また、 メタ言語、スタイルガイド、ECMAScriptコンパイラ についても、次回以降の記事で順番にインストール方法も含めて紹介していきます。

jQuery はこちらからダウンロードしてください。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

コメントをどうぞ!

メールアドレスが公開されることはありません。