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 テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

小学生から始めるプログラミング入門。プログラミングってなぁに?

2020年から小学校でプログラミングが必修(ひっしゅう)となりますが、「プログラミングなんてやったことないし、何から初めていいのか分からない」といった方も多いのではないでしょうか。 プログラミン

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

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

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

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

コメントをどうぞ!

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