最低限度ブログ的なレベル

2010年2月19日 金曜日 takafumi

WordPress ループ – The Loop

今回は最低限ブログ的、というタイトルなので、まずは前回の index.php の中身をそんな感じにしてみましょう。
ヘッダとサイドバーとフッタを作ってよくあるブログなレイアウトを作ります。

<html>
<head>
<link rel='stylesheet' href="./wp-content/themes/tutorial/style.css" type="text/css">
</head>
<body>
<div id="header">
Hello WordPress theme!!
</div>
<div id="main">
mmmmmmmmmm mmmmmmmmm mmmeeeeee eeeeeeeee eeeeeeeeeiiii iiii iii iiiiiii iiiinn nnnnnnnnn nnnnnnee eeeeeee eeeeee
</div>
<ul id="sidebar">
<li>
<h2>sidebar</h2>
<p>sidesid esi des idesidesi desidesidesi desi de sidesi deside</p>
</li>
</ul>
<div id="footer">
fooooooooooooooooooooooooooooooooooot
</div>
</body>
</html>

サンプルファイル:tutorial02pre

※ サイドバーだけ ul なのは WordPress での伝統みたいなものです。div でもかまいませんがウィジェットを使うときにオプションを指定する必要が出てくるので今回は ul で話を進めます。もちろん ul の外に div をかぶせるのは問題ありません。

適当にこんな感じで。もちろんこれでは記事は表示されません。記事を表示させるためにはおまじないが必要です。

いくつかのおまじない

記事を表示させたい場所、このソースだと div#main 内部に

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
表示したい記事
<?php endwhile; else: ?>
ごめんっ!適当な内容が見つかりませんでしたっっ!!
<?php endif; ?>

というおまじないを書き込みましょう。
これは WordPress ループ(The Loop)と呼ばれるものです。
書いてある文字でなんとなーくわかるかもしれませんが「表示したい記事」のトコロにブログの記事が流し込まれ、ごめんっ!以下はいわゆる 404 not found な状態の時に表示されます。

というわけでいよいよ記事を表示させ…る前に、もうチョットだけおまじないを追加します。
プラグインとサイドバーウィジェットのためのおまじないです。

<?php wp_head(); ?>
<head> 内部で OK ですが </head> 直前がいいでしょう。
<?php wp_footer(); ?>
ページが読み込まれる最後、なので </body> 直前に。

※ もしサイドバーウィジェットを使わないという場合、以下は必要ありません。

サイドバーの部分はそれぞれ <ul> の直後と </ul> の直前に入れます。

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<ul> の直後
<?php endif; ?>
</ul> の直前

さらに functions.php というファイルを作って内容を

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

としておきます。
もし、これをコピペしてエラーが出た場合はファイル末尾の改行をチェックしてみてください。改行の有無でエラーが出ることがあります。

というわけで最終的にはこんな感じ。

<html>
<head>
<link rel='stylesheet' href="./wp-content/themes/tutorial/style.css" type="text/css">
<?php wp_head(); ?><!-- プラグインとか用おまじないその1 -->
</head>
<body>
<div id="header">
Hello WordPress theme!!
</div>
<div id="main">
<!-- ↓ここから WordPress ループ 開始 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">表示したい記事
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p></div>
<?php endwhile; else: ?><!-- ↑が記事表示部分 ↓がエラーの時の表示 -->
ごめんっ!適当な内容が見つかりませんでしたっっ!!
<?php endif; ?>
<!-- ↑ここまで WordPress ループ -->
</div>
<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><!-- サイドバーウィジェット開始用おまじない -->
<li>
<h2>sidebar</h2>
<p>sidesid esi des idesidesi desidesidesi desi de sidesi deside</p>
</li>
<?php endif; ?><!-- サイドバーウィジェット終了用おまじない -->
</ul>
<div id="footer">
fooooooooooooooooooooooooooooooooooot
</div>
<?php wp_footer(); ?><!-- プラグインとか用おまじないその2 -->
</body>
</html>

これで完成です。

表示したい内容を呼び出す

<?php the_title(); ?> と <?php the_content(); ?> の部分へそれぞれ記事のタイトルと内容が流し込まれます。
また「表示したい記事」という部分や div.post など直接書き込んでいる部分は記事の数だけ表示されているトコロにも注目です。
タイトルと内容につけた h2 と p のタグはほかのものでもかまいません。
ここまでくればあとはhtmlとcssを思う存分いじってください。

とはいえタイトルと内容だけじゃ味気ない、投稿時間やタグも、というのが当然です。
投稿時間を表示させるには <?php the_time ?> タグを表示させるには <?php the_tags ?> を使います。
あと、たぶん忘れさせてくれないトラックバックurlは <?php trackback_url ?> で表示できます。
…と全部書くのは無理ですので、表示させたい内容は WordPress Codex の テンプレートタグのページからピックアップしましょう。
指定できるオプションなども解説されていますので、とりあえずブックマークしておくのが吉。

テンプレートタグ – WordPress Codex 日本語版

ちなみにテンプレートタグ一覧中にある「ループ中」という表記はそのテンプレートタグが WordPress ループ の内側でだけ使えることを示しています。

これで最低限度ブログ的な表示になりました。
コメントは?という声が聞こえるような気もしますが、聞こえないふりをしつつ今回はココまで。

あ、コメントは最低限度を超えるってことにしとこう。

サンプルファイル:tutorial02

次:最低限度 CMS 的なレベル

カテゴリー:

コメントを残す