2015/08/0913 Shares

素人でも作れる!WordPressオリジナルテーマを自作する方法

エローラ(@uszero800)です。本業の合間を縫って Stinger3 をカスタマイズして遊んでいますが、いじればいじるほど素晴らしいテーマだなと改めて実感。

どうせなら原型を留めぬほどのカスタマイズをしようかと画策していましたが、いやそれならオリジナルテーマを作ったほうが早いなと思って現在制作準備を進めています。

追記

現在はオリジナルテーマで運営しています。ベースは無料配布中なのでよろしければご利用ください。
WordPress 無料テーマ Gush2

WordPressテーマを自作する方法

国産の WP 無料テーマはたくさんありますし、お金を払えばカスタマイズから制作までこなしてくれる方もたくさんいます。それに、頼めばタダ同然で引き受けてくれる知人もおります。

でも Naifix は完全趣味のブログで、お金をかけるほどのことじゃありません。

せっかくなので、素人がゼロから仕上げていく行程をそのままアップしてご覧いただこうと考えています。HTML と CSS がちょっとだけわかる、というレベルの素人です。

オリジナルテーマを作る方法は、大きく 2 とおり考えられます。

既存のテーマをカスタマイズしていく

ひとつは、すでに誰かが制作したテーマ(たとえば Stinger )をベースに改造を重ねていく方法。

ベースがあるので、完全オリジナルとは言えません。必ずどこかに痕跡が残ります。HTML や CSS の書き方にはインデントやコメント、サイズ単位など制作者特有のクセがあって、すべて消し去るのはけっこう難しいです。

HTML サイト用テンプレートをベースに WP テーマへ変換していく方法もありますね。この場合、無償配布でも改造に関して規約があるかもしれないので必ず目を通しておきましょう。

ゼロから作り上げていく

もうひとつは、何もないゼロの状態からデザインを考え、テーマを作り上げる方法。

基礎ができたら、今度はその HTML を WordPress テーマ用に書き換えていきます。完全自由なのでどんなデザインにもできますが、一度もサイトを作成したことがないならけっこう大変かも。

僕は今回こちらで作ります。

テーマ作成に必要なツール

色鉛筆

テーマ作成に最低限必要なのは、以下の環境。

  • WordPress 本体
  • テキストエディタ
  • FTP クライアント(ソフト)

このほか作業時間短縮に便利なアプリやツールが多数ありますが、行程途中でご紹介したいと思います。

参考WordPressレスポンシブテーマ作成で参考にした8サイト+α

WordPressはPCにインストールしたほうが便利

エックスドメイン無料サーバーなどに WordPress をインストールすればお金もかからず本体は不要ですが、自分の PC にインストールしたほうが作業は捗ります。

WP は HTML や CSS のほかに PHP という言語を使わなければなりません。この取り扱いを間違うと、一瞬でページが真っ白になって頭の中も真っ白に…… ということがよくあります。

PC 内の作業であれば原因を突き止めやすく、不測の事態にも対処しやすいのでおすすめ。

こちらのサイトが参考になります。

WordPressでWebサービスを作る方法(2:開発環境の構築)

「Instant WordPress」なら、面倒な作業なしにすぐ開発環境が整いそうです。

Instant WordPress

この2サイトを参考にするだけでテーマが作れます

環境が整ったらいざ実践。予備知識なし。その場で調べて構築という時間のかかる行程になりそうです。

まずは HTML と CSS で作っていきますが、流行となりつつあるレスポンシブデザインにする予定。WP テーマへの変換は有名な2サイトで調べながら行っていきます。

WordPress オリジナルテーマの作り方 3.0+

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

素人がゼロから挑戦すると、どんなテーマができあがるんでしょう。

Stingerはどうするの?

今のところ 1 日 30 分ほどしか時間がとれないので、完成するのは年明けになりそう。12月のイベントもあるので、しばらくはこのまま Stinger にお世話になります。

完成している記事がいくつかあるので更新には困りませんが、カスタマイズは当分お休みですね。

今年も残りあと 1 ヶ月半。趣味を楽しみつつ仕事に没頭します。さあ、デザインを考えよう・・・

記事内でご紹介した無料サーバーはこちらです。




ドメイン名取得&無料レンタルサーバーサービス『エックスドメイン』