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

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

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

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

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

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

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

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

コメントをどうぞ!

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




オリジナルゲーム.com