ループを設置


とりあえずテーマとして認識されるようになったので、今度はちゃんと動くようにしていきます。

まず、CSS が適用できるようにします。CSS が適用されていない理由は表示されているページの url はブログのトップなのに CSS ファイルはテーマディレクトリに置かれているからです。

というわけで

<link rel="stylesheet" type="text/css" href="style.css"></link>

こんな感じになっている CSS 指定部分を

<link rel="stylesheet" type="text/css" href="http://サーバー名/wp-content/themes/テーマ名/style.css"></link>

とすればスタイルが適用されます。

でも、これじゃサーバーごとに書き換えなきゃいけません。そんなんじゃテーマ配布なんて出来ません。というわけでちゃんとうまくやってくれる仕組みが用意されています。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"></link>

index.php へこう書くと <?php echo get_stylesheet_directory_uri(); ?> の部分がスタイルシートが置かれているディレクトリへの URL に変換されて出力されます。ページのソースで確認してみてください。

これは <php ? 〜 ?> の内側がプログラムというかスクリプトでその結果を出力するという仕組みです。テンプレートタグと呼ばれ、中身を変えるといろんなことが出力できます。複数行でアレをこうしてああして、なんてことも。この先ガンガンでてくるのでお楽しみ(?)に。

ループ The Loop

無事にスタイルが適用できたのでいよいよ記事を表示するためにループを設置します。ループとは WordPress が記事を呼び出すための仕組みです。まずは記事が表示される予定の部分を以下のようにしてください。

<div id="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>



<?php endwhile; else: ?>
<p>< ?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

</div><!-- main -->

空行を入れてますが、div 内部の4行がループ。#main が記事表示用の領域です。領域内の1行目で記事を呼び出していますので、空行のところにどんな形式で記事を表示するか書き込みます。次の行は「ここまでが記事表示形式」の合図です。

3行目はエラーの場合に「該当記事がありません」と表示してくれます。エラーページを専用で作ることも出来ますが、今ここでは触れません。4行目は終わりの挨拶です。

これだけでは何も表示されませんので、とりあえずタイトルと本文を表示させてみましょう。

<div id="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php endwhile; else: ?>
<p>< ?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

</div><!-- main -->

繰り返しになりますが最初に追加した4行をループといいます。WordPress の最重要項目といっていいはず。WordPress はループで記事をデータベースから呼び出して表示します。またテンプレートタグの中にはループの中でしか使えないものなどもありますので、とりあえずループというものがあることだけはしっかりおぼえておいてください。

次はテンプレートタグで表示項目を増やしていきます。

今回使ったファイル:loop01

参照ページ

関数リファレンス/get stylesheet directory uri – WordPress Codex 日本語版

The Loop – WordPress Codex 日本語版


コメントを残す

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