ちょっとづつ学ぶWordPressテーマの作り方 1 -環境構築-

by on with コメントはまだありません

猫も杓子もメディアを持つ時代になった。ブログ、SNS、ニコニコ動画、YouTube……。分けても、ブログは個人・組織を問わず広く使われている。

はてなブログなどのブログサービスを使ってブログを作るのもいいけれど、ブログっぽくないコンテンツサイトなど、完全に好みのWebサイトにしようと思うと不自由を感じることがある。

そんな時にオススメなのがWordPressだ。W3Techsが調査したところによると、CMSでは全世界のWebサイトの約半数がWordPressで使われているという。

Usage Statistics and market share of WordPress for websites | W3Techs

今回から、法律に引っかかりそうなほど広く使われているWordPressサイトの外観を決めるテーマの作り方を紹介していく。

第一回のWordPressテーマ講座はテーマ作りのプロセスとWebサイトのデザインから。

 

WordPressテーマ作りの概要

これからステップに分けてWordPressテーマの作り方を紹介していくわけだけれど、まずは各ステップの概要を説明しておこう。全体を忘れてしまうほど細かく、深く分け入らないといけない箇所もあるから、そんな時はいつでもここに戻って来てほしい。

  1. WordPressテーマ開発環境の構築
  2. Webサイトをデザインする
  3. WordPressテーマの雛形を作る
  4. ヘッダーを作る
  5. サイドバーを作る
  6. フッターを作る
  7. トップページを作る
  8. WordPressテーマを動かす

 

1. WordPressテーマ開発環境の構築

テーマ作りの流れを確認したところで、まずは開発環境の構築から。Webサイトのデザイン、WordPressテーマの作成、WordPressテーマの動作確認それぞれで違うソフトを使う。

 

Webサイトのデザインで使うソフト

WordPressテーマの完成予想図もといゴールをはっきりさせるため、テーマを作る前にWebサイトをデザインすることからはじめる。

この段階ではWordPressは関係ないため、何らかのグラフィックデザインソフトを用意しよう。昔から使われているのはPhotoshop + Illustrator、近年人気なのがSketchだ。最終的にHTML＋CSSでデザインを形に出来ればいいため、好みのソフトをインストールしよう。

 

WordPressテーマの作成で使うソフト

WordPressテーマの制作では、先に作成したHTML＋CSSのページを分解し、PHPをわずかばかり書くことになる。そのため、HTMLとCSS、PHPの記述を楽にしてくれるエディターあるいはIDEを用意しよう。

エディターならAtom、IDEはPhpStormがオススメだ。

このシリーズではAtomを使ってWordPressテーマを作成する。Atomでテーマを作成しやすくするため、次のパッケージを入れておこう。

Emmet plugin Atom editor

HTMLとCSSを爆速で記述できるようになるパッケージ。Atomの設定画面から、あるいはapmコマンドでインストールしよう。

 

Minimap package

ドキュメントの縮小マップを表示してくれる。

 

Linter

後に紹介するHTMLやCSS、PHPソースのチェックを行うために必要な『lint』を入れる。

 

linter-htmlhint

HTML版lintを使うためのパッケージ

 

linter-csslint

CSS版lintを使うためのパッケージ

 

linter-php

PHP版lintを使うためのパッケージ

 

WordPress Core API Support

WordPress関係のスニペットを使えるようになる

 

Autocomplete WordPress Hooks

WordPress関係のオートコンプリートを使えるようになる

 

WordPressテーマの動作確認で使うソフト

MacならMAMP、WindowsならXAMPPを使ってローカルでWordPressを動かせる環境を作る。これは、Webでサイトを公開する前にWordPressテーマの見た目や動きが期待したとおりになっているかを確認するためだ。

今回はMacで開発することを想定してMAMPのセットアップ方法を紹介する。

まずはMAMPのダウンロードページへアクセスしよう。

『DOWNLOAD』をクリックし……

mamp-1.png.formatted

 

次のページでMAMPをダウンロードしよう。

mamp-2.png.formatted

 

MAMPのインストールが終わったら、ApplicationsディレクトリのMAMPを開き、MAMP.appなるプログラムを実行しよう。MAMPとMAMP PROのどちらを実行するかを聞かれるからMAMPを選ぶ。

無事にMAMPが立ち上がったら、サーバーを起動しよう。

mamp-3.png.formatted

 

サーバーが起動したら、WordPressサイトで使うデータベースを作るため、phpMyAdminを開く。

mamp-4.png.formatted

 

開かれたphpMyAdminの画面にあるタブから『データベース』を選び、データベース名に『wordpress』と入力して『Create』をクリックする。

phpMyAdmin.png.formatted

 

次に、WordPressをダウンロードしよう。

WordPress.org

落としてきた圧縮ファイルを解凍し、htdocsディレクトリにwordpressフォルダごと置く。

 

http://localhost:8888/wordpressにアクセスし、WordPressのインストール作業を進める。作成したデータベースの情報を聞かれるから、次のように入力しよう。

※wordpressという名前以外でデータベースを作っていたり、MAMP以外でローカルにサーバーを立てている場合、別の適当な設定をする。

install-wordpress.png.formatted

 

この後、ローカルで動かすWordPressサイトの名前などを入力してWordPressのインストールは完了。次回はいよいよWordPressテーマを作っていく。

 

 

WordPressテーマで儲けちゃいますか？他にはあまりない、テーマ販売についての書籍