前回はレイアウトだけでしたが、今回からは 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