1時間で学べる！WordPressテーマ作成(作り方)

tatuo — Sun, 18 Apr 2010 06:52:12 +0000

久しぶりの更新となりますが、いよいよWordPress(ワードプレス)用の
テーマの作り方について解説していこうと思います。

この数カ月、ローカル環境で色々試してみて、自分でもある程度作れるようになってきまして、
一通り皆さまに説明できそうな感じがしますので、私が一番したかったことテーマ作成の具体的手順について解説してきます。

テーマ作成にあたり、基本的な知識(html、css)が全くない状態ですと、正直しんどい作業になると思いますので、一度html.cssなどに軽く触れておくことを勧めます。

最近は、初学者向けに、簡易な説明で解説してくれてる書籍が沢山ありますので、ご自分に合ったものを選んで勉強してみてください(当サイトでは、html.cssの知識がない方でも作成できるように工夫はしております)正直言って、これ以上ないぐらいかみ砕いて説明していますので、サクサクっと作業を勧められるのではないかなぁ・・と思います。

ローカル環境でテーマ作成を行うのが基本ですが、サーバー上で修正しながら作業を行っても構いません。自分のやりやすい方法でお試しください。

ローカル環境で作業を進めたい方は、過去記事の、XAMPP上ににWordPressをイントールする方法を参考にしてください。

テーマ作成するにあたり、簡単ではありますが、大まかな流れを最初に説明しておきます。
制作に取り掛かる前に、作業全体の流れを把握しておきますとスムーズに作業できます。

※図も参照してみてください。(全体図)

一、テーマを作成するにあたり、XAMPP、若しくはレンタルサーバー上にwordpressをインストールします。

二、自分が今後作成していく、テーマ作成用のフォルダを作る。
今後はこの中に、あなた自身が作りたいデザインタグなどを記載していきます。

三、大まかなデザインを作り、ブラウザ上で確認。
修正。確認。修正。確認。
ひたすらこの作業の繰り返しです。

難しいように感じていたthemeの作り方ですが、上記を繰り返すだけです。
細かい部分は、適時説明していきます。

楽しみながら作成することが、完成させる上でのポイントですので、公開できる日を頭に描きながらモチベーションを保ちましょう。

自分専用の独自のテーマが作れるとめっちゃ感動もんですよ！

まず始めにすること！

自分用のテーマフォルダを作成します。
今後はこの中に全てのファイルを入れることになります。

テーマ用のフォルダ名は何でも良いのですが、自分の分かりやすい名前にしてください。
続いて、index.phpファイルを作成します。

私は、エムエディターを用いてファイル作成をしています。
エディターはなんでも良いですが、メモ帳だけはやめてください。文字化けの原因となります。
文字化けしないように、UTF-8でファイルを統一してください。

index.phpの中には、とりあえず何も記載せず空のファイルを作ってください。
index.phpを作ったら、今度はstyleシートを作ります。
style.cssですね。

screenshotがあったほうが良い方は、それらの画像も同じフォルダに作成します。

ここで一旦話をまとめます。
必要なファイルは、以下三つとなります。
index.php
style.css
screenshot.png(jpgでも良いです)

これでとりあえず準備は万端です。

意味がよく分からなかった方のために、私が作ったファイルをダウンロードできるようにしておきます。
ご参考ください。

themeファイルダウンロード

さて、上記のファイルを作った後、以後、index.php、style.cssにタグを記載していきます。

上記のフォルダを作ってどこにアップすればいいのか？と思う方のために、念のため説明しておきますが、
WordPressのthemeフォルダに入れてください。

WordPressのthemeフォルダは、wp-contentの中のthemesの中に入れます。
分からない方のために、WordPressのフォルダの位置を示した画像を示しておきますのでご参考ください。

今後は私も皆さんと一緒に作りながら、WordPressのテーマ作成方法について解説していきます。
焦らずじっくりいきましょう！

随時記事はここに記載していきますので、定期的に見に来るといいかも。

国内のWordPress無料厳選テーマ７

tatuo — Fri, 13 Nov 2009 16:26:43 +0000

WordPress利用時に、デフォルトのtheme以外も使ってみようと
思っている方がいると思いますので、機能性、デザイン性に優れた
国内の無料テーマを紹介しようと思います。

実際に使われるときは、必ず作成者さんの規約を守るようにしてくださいね！

Vicuna

WordPressのテーマ配布サイトとしてはかなり有名。
Web上でも、Vicunaを使用している方はかなり多い気がします。

Vicuna – WordPress テーマ

カスタマイズするときに、参考にできる関連書籍もあるようで、
WordPress初心者の方にもお勧めです。
シンプルでありながら、洗練されたデザインはきっとあなたを虜にするでしょう。
スキンも豊富。フォーラムがある配布サイトって珍しいのではないでしょうか。

e.b.i.f

プラグインを利用せず、
フォトログに特化したthemeです。
サムネイルが自動で作成され凄くお洒落！

e.b.i.f » WordPress Photolog Theme: Photo-Biyori

自作の写真を公開したい方にはうってつけのテーマだと思います。

小粋空間

カスタマイズ性に優れたテーマです。
設定の仕方など細かく記載されているので、初心者の
方にも扱いやすいthemeだと思います。

小粋空間: WordPress テーマ（テンプレート）

Lovelog+*

女性の方ならではの、温かみあるデザインが
特徴です。

Lovelog+* | WordPress テーマ

設定方法も詳しく解説されているので
導入もしやすいかと思います。

Webサイトもとても綺麗ですね！

straightline™

グリッドレイアウトで表現されているテーマです。
縦書きのレイアウト構成なんて初めて見ました。
凄くカッコイイ！

GRID wordpress theme – straightline™

Liner Note

一カラムで表現しているテーマ
今まであまり僕も使ったことのないタイプのテーマですが、
実際使ってみた感想として、とても見やすい感じ。
シンプルだけど洗練されてますね。

Liner Note WordPress　theme

使用時に必須のプラグインがありますので、導入時に要チェック。

WPNP

新聞によく似たデザイン。

WPNP – WordPress 新聞作成プラグイン/テーマ

新聞のようなデザインでWordPressが使えるって凄く面白くないですか？
他のサイトで、実際に導入して運用させてもらっているテーマです。

以上、七点です。
その他　素晴らしいテーマは沢山ありますが、自分で実際に使って見て、
気に入った無料のthemeを紹介させてもらいました。
勿論、これら七つ意外にも、素晴らしいテーマは沢山あります。
機会があれば、次回紹介しようと思います。

海外にも綺麗なテーマは沢山ありますが、英語をきちんと理解できないと、
後々の運用に問題が生じる気がするので紹介はしませんでした。
(規約、著作権など)

今回の紹介が参考になれば幸いです。

WordPress【ワードプレス】初心者の部屋～使い方知っとこ？ » theme

1時間で学べる！WordPressテーマ作成(作り方)

国内のWordPress無料厳選テーマ７