WordPressのテーマを自作自演してみたまとめ
2009 年 10 月 28 日
どうやって構築するか
とりあえすコーディングが面倒くさいので、一旦HTMLとしてDreamWeaverでコーディングしてからPHPのタグを入れる手法をとりました。
DreamWeaverCS3とかだとWrodPressのタグが入れれるプラグインがあるんだけど、CS4にはないのね。
はじめてのWordPressのテーマ構築なのでファイル構成はシンプルにしました。
| index.php | トップページ |
|---|---|
| single.php | 単一記事（いわゆる中面） |
| archive.php | アーカイブページ用 |
| header.php | ヘッダーパーツ |
| footer.php | フッターパーツ |
| comments.php | コメントパーツ |
| style.css | メインスタイルシート |
| jsディレクトリ | JSをまとめて |
| imgディレクトリ | 画像をまとめて |
ヘッダーでよく使うタグ
<php bloginfo('url'); ?>
ブログのURL
例：http://hogehoge.jp/blog/
<php bloginfo('template_url'); ?>
テーマが入っているところまでのURL
例：http://hogehoge.jp/blog/wp-content/themes/テーマの名前
<php bloginfo('stylesheet_url'); ?>
メインのStyleSheeｔのURL
例：http://hogehoge.jp/blog/wp-content/themes/テーマの名前/style.css
他にもあるけどたいていこれで乗り切れます。
トップページの最新とそうでないやつの設定
とりあえず最新はwhileを一回だけ回しました。
<php if (have_posts()) : ?>
<php query_posts("showposts=1"); ?>
<php while (have_posts()) : the_post(); ?>
ここに書きたいHTML要素を入れる
<php endwhile; ?>
<php endif; ?>
んで、最新以外の記事はこんな感じ。
<php if (have_posts()) : ?>
<php query_posts("showposts=7"); ?>
<php while (have_posts()) : the_post(); $counter++; ?>
<php if ($counter != 1) : ?>
ここに書きたいHTML要素を入れる
<php endif; ?>
<php endwhile; ?>
<php endif; ?>
while文にカウントつけてif分で一つ目は除外。
なんか、スマートじゃないなー。教えてｴﾛい人ヽ(`Д´)ﾉ
次の記事・前の記事
<php next_post_link('%link') ?>
<php previous_post_link('%link') ?>
この2つでそれぞれとってこれます。
ちなみに
<php Next : next_post_link('%link') ?>
とか書くと、
Next : ほげほげ
っていう感じに文字もついてきます。
カスタムフィールドの呼び出し
画像をカスタムフィールドに設定してブログ内に表示したい場合は以下の要領で呼び出せます。
<php $image = get_post_meta($post->ID, 'single_image', true); ?>
カスタムフィード・”single_image”に定義されている画像のパスが返される仕組み。
SyntaxHighlighter
これについてはikekouさんのブログのほうが詳しいかな。
jp.ikekou.blog.Main ｜ WordPressのSyntaxHighlighterがActionScriptに対応してました
あとは普通にCSSかな
フッター固定はCSSだけで実装してます。
ここを見るほうが早いと思います。
CSSだけで触れるとポップアップするフッターを作る（IE6対応） | CSS-EBLOG
CSS3のWebKitアニメーションを使ってます。
SafariとChromeはアニメーションするけどFirefoxはまだ対応してないから動かない。
IEは残念ながら対応してないです。でもまぁいまのとこをいいかなと。
GoogleアナリティクスをみるとIEからのアクセスは低いのでIEは残念ながら非対応です。
もちろんずっとこのまま非対応というわけにはいかないので、調整していきます。
とりあえず一旦こんな感じ。
そのほかのタグについては以下を参照にするといいかも。見にくいけど。
テンプレートタグ – WordPress Codex 日本語版
