1時間で学べる！WordPressテーマ作成(作り方)
久しぶりの更新となりますが、いよいよ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のテーマ作成方法について解説していきます。
焦らずじっくりいきましょう！
随時記事はここに記載していきますので、定期的に見に来るといいかも。
タグ
2010年04月18日 コメント&トラックバック(4) | トラックバックURL |
カテゴリ: テーマ(theme)の作り方
トラックバック&コメント
トラックバック
-
[...] http://www.tatuo-web.com/wordpress/theme-sakusei/theme1/ [...]
ピングバック投稿者: 1時間で学べる！WordPressテーマ作成(作り方) | お役立ちサイト集 — 2010年12月13日
-
[...] 1時間で学べる！WordPressテーマ作成(作り方) http://www.tatuo-web.com/wordp……ei/theme1/ asklife｜IT&Life > コンピュータ・IT > wordpress > [...]
ピングバック投稿者: WordPressテンプレートを作る時に役に立つまとめ記事４選 — 2011年04月14日
コメント
[...] http://www.tatuo-web.com/wordpress/theme-sakusei/theme1/ [...]
[...] 1時間で学べる！WordPressテーマ作成(作り方) http://www.tatuo-web.com/wordp……ei/theme1/ asklife｜IT&Life > コンピュータ・IT > wordpress > [...]
初めまして！
現在、ワードプレスを始めたばかりのものです。
質問なのですが、現在、エックスサーバにてワードプレスをインストールし、記事などはテスト的投稿出来るのですが、フォルダの件です。
index.php
style.css
screenshot.pngとデータフォルダを上記の名前の設定で、ドライブＣに作りました。
しかし、エックスサーバでインストールした場合、wp-contentの場所は何処で探してよいか分かりません。
また、エックスサーバからインストールした場合は、ワードプレスの管理画面だけで行うだけなのか？
分かりません・・・・
教えて下さい！！
はじめまして
宜しくお願いしますね。
>エックスサーバでインストールした場合、wp-contentの場所
エックスサーバーにFTP接続して、使用しているドメインのpublic_html内にあります。
>エックスサーバからインストールした場合は、ワードプレスの管理画面だけで行うだけなのか？
何を行うのでしょうか？