html で土台を作る


前回はレイアウトだけでしたが、今回からは html と CSS を使っていきます。アヤシイところもあるかと思いますので、ご遠慮なくツッコミお願いします。

最初は基本のレイアウトを html でつくります。もちろんスタイルシートも。ざざっと骨組みだけで OK。細かいところは後でやれるので、ホントにざっくり。

文字コードは WordPress 本体に合わせておきます。デフォルトなら UTF8 です。

思ったようにレイアウトできたら、ここから少しずつ WordPress のテーマにしていきます。

ところでテーマはどんな名前にしますか?

まずはこれから作るテーマ名等でフォルダーを作り(アップロードするので半角英数で)その中へ html ファイルとスタイルシートを入れてください。そしてそれぞれの名前をindex.php と style.css へ変更します。html から php へは名前の変更だけで大丈夫です。

ちなみにこのフォルダの中身全部をあわせてテーマ、php ファイルをテンプレートと呼びます。

次にテーマとして認識させる=テーマ選択画面に表示されるようにするために style.css へ以下の内容を記述します。

/*
Theme Name: テーマの名前
Theme URI: テーマのホームサイトの URI
Description: 簡単な説明
Author: 作者
Author URI: 作者の URI
Version: バージョン番号(オプション)
.
コメント/利用許諾の記述(オプション)
.
*/

位置の指定は特にありませんが、先頭近くのほうがわかりやすいかと思います。

この記述を追加することで管理画面のテーマ一覧で選択できるようになります。もちろん wp-content/themes/ へのアップロードが必要です。

アップロードが完了すると「テーマの管理」画面に作成中のテーマが追加されているのを確認してください。もちろん適用も出来ますが、プレビューまでで十分でしょう。

スタイルが適用されていない、白黒(?)な表示になっていると思いますが、今はそれで OK です。さらに文字化けしてる、という場合は index.php の文字コードが違っています。名前をつけて保存で文字コードを指定して上書きしてみましょう。

テーマ一覧で画像を表示したいときは screenshot.png を用意します。サイズは 300*225 のようです。でも、これは出来上がってから作ったほうがいいんじゃないかな。

次はスタイルが適用されるようにして、記事を表示します。

今回使ったファイル:01html


コメントを残す

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