日本語を記入すると文字化けした話。Commentswordpressのオリジナルテーマ作成について語ってみるテスト。ブログっぽいWebサイトテンプレートを作ったので、これを利用して作る方法を追う。同タイトルの連番シリーズになっています。合言葉は「欲しいテーマが無いなら作ればいいじゃない!」この記事は配布テンプレダウンロードからheader.phpとfooter.php作成まで。用意するものUTF-8が扱えるエディタ(PHPとHTMLの色分け表示できると見やすい)WordPress本体(ローカル環境が望ましい)XHTML/CSSテンプレート(なんでもいい)テーマのテンプレートファイル構造がいまいちよく分からないという方は事前にテンプレートファイルの仕様と構成を見ておくと分かりやすくなるとおもいます。ファイルの編集は一応wordpressのテーマエディタでも出来なくはないです。対象バージョンは2.5~2.6です。下位バージョン対策も一応します。手順はすごく・・・俺流ですサンプルデザインをそのまま使うならコピーライト消しちゃダメ貼ってあるソースそのまま使うとエラーになるかも(全角混入注意報)途中レイアウト崩壊したらXHTMLソースをチェックしよう1.ベースのテンプレートファイルを用意ベースになるテンプレートはWebサイト用テンプレートで、配布されてるのでも自分で作ったのでも何でもいいです。他のブログ用のテンプレートも使えなくはないですが、独自タグとか入ってるので消すのが面倒だと思います。Type用はタグが似てるので比較的楽かもしれない)この記事ではSiteTemplate02を使用しています。こちらのページにあるレイアウトテンプレートみたいな枠だけのでも作れます。HTMLファイル上でレイアウトが完成してる、というのがポイントでしょうか。枠だけしかないテンプレだったりする場合は、Webサイトではあまり使わない投稿日時・タグ・コメント・トラックバックURLみたいなブログならではの要素を、事前にHTMLファイル上で追加してレイアウトしておく。ブログがあるならブラウザで表示したときのソース貼ると楽ですが、これから作る場合であればインストールだけ先に済ませて初期状態で表示されるソースでもおk。いう訳でSiteTemplate02にブログっぽい中身を追加したファイルを作った▼ダウンロード»[download#29#nohits]3.パーツごとにPHPファイルへ分解して保存wordpressのテンプレートは、最小構成がindex.phpとstyle.cssです。index.phpはコンテンツ表示するとき、他のテンプレートファイルが見つからない場合(例えばカテゴリ表示でcategory.phpがない場合など)に使われます。テンプレートファイルを適当に分けるとだいたい3種類。get関数で呼び出す時に使われるファイル。一覧表示するやつcategory.php、tag.php、search.php、home.php、date.php、search.php、archive.phpこうやって並べると「中のつくりが似てる」って分かるでしょうか。※作り方次第でページ系テンプレートで一覧表示にすることは出来るし、アーカイブ系テンプレートで記事ページのように振舞わせることも出来ます。パーツ系テンプレートが用意されてるのは他のテンプレートファイルとデザインを共有しやすくするためです。分解しとくとカテゴリーごとにヘッダ変えるとかいう場合にif文で長くなっても編集しやすくなります。いうわけで、まずヘッダ、サイドバー、フッターみたいなパーツでバラしてwordpressのパーツ系テンプレートファイルと、index.phpを作成します。色分けされた部分をそのまま各ファイルへ分解すればおk。他のブログやCMSテンプレートの場合も、html→分解→タグ埋めで大体作れる。新規ファイル作成とかでphpファイルを作成して、文字コードをUTF-8にしたらソースをコピペしていきます。保存するフォルダ名はテーマ名にします。適当に名前をつけておいてください。※#contentの中身省略。index.htmlの該当部分をペーストする&lt;/div&gt;&lt;/div&gt;sidebar.phpTemplate02.exだとIDの有無で見た目が変わります。コレは後で使うのでそのままにしておく。TF&lt;/a&gt;&lt;/address&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;スタイルシートファイルheaderにあるCSSは、style.cssという名前で新しくファイルを作成してそこに移します。ファイルの一番先頭に以下をコピペして、中身を書き換えます。最低テーマの名前だけあればおk。any.ライセンスとか.*/テーマのサムネイルテーマ一覧で表示されるサムネイル画像は、テーマフォルダ直下に保存する。ファイル名がscreenshotであればjpg、png、gifなんでもOK。画像のサイズは300×225ピクセルです。(上でダウンロード出来るテンプレートには既に入ってます。)あとはこれらのPHPファイルへ、動作に必要なテンプレートタグを追加していくだけ。テンプレートタグはphpなので、HTMLとPHPの色分けが出来るエディタだと見やすいです。3.テンプレートファイルを組みなおすパーツに分解して作ったテンプレートはそのままだと全く動かないので、index.phpに各パーツを呼び出すテンプレートタグを追加します。タグを追加する場所はバラす前と同じ位置。wordpressで定義されてない自作のPHPファイルを呼び出す場合はincludeを使う。?&gt;includeはそのままPHPの関数なのでrequireとかでも動く。?&gt;SiteTemplate02はトップ3カラム・中ページ2カラムなので、index.phpを複製してsingle.phpに名前変更したらextra.phpを削除します。header.phpへテンプレートタグを追加まず先ほど作成したheader.phpへ動作に必要なタグを入れていきます。encoding=&quot;utf-8&quot;?&gt;'.&quot;\n&quot;;?&gt;htmlの開始タグを変更。/&gt;titleタグを変更。?&gt;&lt;/title&gt;ブログの名前とページタイトルを逆にする場合。?&gt;&lt;/title&gt;wp_title()の3番目の引数をrightにすると、1番目の引数で指定した文字列をページタイトルの末尾に追加します。2.5より前のバージョンならこっちで。?&gt;&lt;/title&gt;スタイルシートのlinkタグを変更。?&gt;/style.css&quot;);&lt;/style&gt;以下はRSS、Atom、pingbackなどのURLを出力します。/&gt;アーカイブへのリンク。引数にformat=link入れるとlinkタグで出力される。?&gt;プラグイン用の関数wp_head()をhead閉じタグ内に追加。これ忘れるとプラグインが動かなかったりする。?&gt;body以下の編集サイトタイトルの表示と概要の表示にはbloginfo()を使用。?&gt;&lt;/span&gt;&lt;/h1&gt;グローバルナビゲーションのところはサイトトップのリンクと、ページリンクを入れることにする。サイトトップのURLはbloginfo('home')で表示。表示されるURLは、設定で入力したものになります。テキストは_e()を使ってもいいしそのまま書いてもいいし、ってことでお好みで。_e()って何ぞ?という方はテンプレートファイル翻訳についての記事を見てください。・・・ページのURLテキストwp_list_pagesはページ一覧メニューを作るような用途のタグなので、指定したソート以外の並び替えが出来ません。自由に配置したいならthe_permalinkの使用が良いと思います。以下のソースはインストール時に作成されるAboutページとホームへのリンクを表示します。the_permalink(2);?&gt;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;footer.phpの編集ついでにfooter.phpも作る。footer.phpで一番忘れちゃならないのがwp_footer()関数です。入れる場所はbodyの閉じタグ直前がいいでしょう。コピーライトの名前とかはbloginfo()を使って表示。?&gt;&lt;/body&gt;&lt;/html&gt;他、RSSのリンクやデータベースの速度とかはDefaultのソースを参考にすると良いと思います。実際にテーマディレクトリへ置いてアクティブにすればwordpress上で確認できるようになります。分解前のhtmlとwordpressの表示が同じでなければ、何かしらタグが抜けてるはず。DesignWall.。