Webの記録

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

投稿日:2011年10月24日 更新日:

この記事は約 5 分で読めます。

現在のサイトのキャプチャ画像WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。

今までのテーマは、デフォルトであった「twentyten」や「coraline」に少しだけ手を加えたものでした。
せっかくWordpressを使っているのだから、もう少し自分なりに使えるようにしたいので、オリジナルテーマ作りにチャレンジです。
【2014.10】少し加筆・修正しています。

しかし私、オリジナルテーマ作りは初めてなので・・・多少時間はかかると思いますが、作り方をここにメモしておこうと思います。(今後の自分の為にも~♪)
一気には書けないので、何回かに分けてメモしていきます。
(多分、私の作業が進み次第、更新していく感じになります。)
まず今回は、準備編。
 

オリジナルテーマの制作の流れ。

  1. html+cssで作ったサイトをWordpressへアップする ←今回はココ。
  2. html+cssをWordpressへアップしたものをパーツテンプレートへ切り分ける
  3. header・footerを作成
  4. index.phpで各ページのベースを作成
  5. sidebar.phpでサイドバーを作成
  6. single.phpで記事の個別ページを作成
  7. page.phpで固定ページを作成
  8. トップページを作ってみる

 

下準備1

通常のサイトを作る感じで、Photoshopでカンプを作り、(x)html+cssでコーディングしていきます。
ひとまず、現在のサイトのトップページのようなイメージで「index.html」を作り、記事をクリックした時のページを「single.html」を作りました。スタイルシートは、「style.css」1つにしています。

下準備2

スタイルシート「style.css」の一番上に以下のテーマに関する情報を記述します。
これがある事でWordpressがテーマとして認識してくれます。
テーマ名の指定だけは省略出来ないようです。(テーマ名や説明を日本語でする事が出来ますが、その場合エンコードはUTF-8にする必要があるようです。)

/*
Theme Name: テーマ名
Theme URI: テーマのURL
Description: テーマの説明
Version: テーマのバージョン
Author: テーマの著作者(自分の名前)
Author URI: テーマの著作者のURL
*/


下準備3

screenshotサムネイル画像を準備する。(下準備2までで作ったサイトのキャプチャ画像)
横300px、縦225pxにして、「screenshot.jpg」か 「screenshot.png」という名前で保存。
保存先は、index.htmlと同じ階層。(imagesフォルダーに入れない)

下準備4

いきなり本番サーバーで作業するのは、とても怖いのでローカルで作業します。
Windowsなら「XAMPP」 、MacならXAMPPまたは「MAMP」をインストールして、ローカル環境を作ります。
ここにWordpressをセットアップし、Wordpressが使える状態にします。

WindowsでXAMPPを導入する場合の記事「WordPressテスト環境をXAMPPで作ってみた♪(Windows)」を書いています。良かったらこちらもどうぞ♪

(詳しい説明を「クリエイターボックス」さんがされていたので、こちらを参考にしました。)

下準備5

下準備4で作ったローカル環境の中に、下準備3までに作ったものを入れます。
私はXAMPPを今回使っているので、ファイルの置き場所は
「xampp → htdocs → wordpress → wp-content → themes」の中に新たにフォルダを入れ込みます。
入れ込む物は、「style.css」と、下準備3で作ったサムネイル画像。
新たに「index.php」を空の状態で作り、これも一緒に入れ込みます。

下準備6

独自テーマがWordpressに認識されました♪
ここまで入れてWordpressの管理画面に戻り、 外観のタブの「テーマ」を開くと・・・。
作成した独自テーマがちゃんと表示されて、選択出来るようになります!!
何だか、ここまで来ると嬉しいです~♪
もちろん、有効化しましょう~♪
 

やっとこさ、Wordpressに触れるようになりました。
さて、ここからまたひと頑張りです!!

 

下準備7

この状態では、まだ何も表示されません。。。
下準備5で作った空の「index.php」に 下準備1で作った「index.html」をそのまま貼り付けます!
この段階でブラウザ表示すると、スタイルシートが設定されてない状態で表示されます。

なので・・・。index.phpの中のスタイルシートのリンク部分を書き換えます。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />

ここで、またブラウザ表示をしてみました。
おおまかには表示出来たのですが、一部画像が表示されてません。

下準備7までの表示結果。
これはパスの問題なので、index.phpの中にある画像のパスを書き換えると表示されます。
私の場合、src=”images/●●.png”のimagesの前に以下の分を加えたらOKでした。

<?php echo get_template_directory_uri(); ?>


【2014.10】
以前は、bloginfoを使っていましたが、現在推奨なのは上記の記述のようですね。ちょっと見ない間に、変わっていました。。。


ここまで出来たら、ブラウザ表示がキレイに出来るようになりました!!
しかし、まだこれではWordpressの記事が投稿されても反映されません。

ここからは、Wordpressのテンプレートタグやphpを調べつつ・・・書き換える作業に入ります。
まだまだ完成までには遠い道のりです~。

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Evernote Site Memoryボタンを付けてみた♪

この記事は約 1 分で読めます。日頃、いろいろな情報をEvernoteにまとめています。 使い始めるとホントに便利で、無くてはならない存在になっています。 ・・・で、Evernoteで便利な方法はない …

no image

気になるブラウザサイズ 集計結果。

この記事は約 2 分で読めます。 最近、Webサイトを作るのにどれ位の幅で作れば良いのかとても迷ってきました。 いろんな方のサイトをいじらせてもらいながら、表示確認をしていて驚く事もしばしば・・・。 …

no image

Facebookページ コメント返信機能の設定をしてみた!

この記事は約 1 分で読めます。 Facebookページにコメントに対するコメントの返信、どのようにされてましたか? 私は都度相手の名前を入れて、誰に対する返信なのかを表示していました。 今回「返信機 …

no image

MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる

この記事は約 1 分で読めます。 以前、ローカル環境では「XAMMP」と「MAMP」の環境を作ってみました。 今回は、MacでもWindowsでも使える「AMPPS」でローカル環境を作ってみました。 …

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …