WordPress Customize NOTE > WordPress オリジナルテーマの作り方目次 > エントリー（記事）部分の作成その1

WordPress オリジナルテーマを作るエントリー（記事）部分の作成その1

スポンサードリンク

「index.php」を編集します。投稿された記事のタイトルをリストアップするには、以下のテンプレートタグを使います。

Pick up: <?php if(have_posts()): while(have_posts()): the_post(); ?> ～内容～ <?php endwhile; endif; ?>

これはループと呼ばれるタグで、「～内容～」の部分に記事の型を書くと、型を繰り返して、投稿されたそれぞれの記事を表示します。では、「～内容～」の部分に記事のタイトルを表示するテンプレートタグを書いてみます。以下が、記事のタイトルを表示するタグです。

タグを使って記事のタイトルを表示させます。<h2>タグでタイトルを囲んでいますが、お好みで変更してください。

編集: index.php: <?php get_header(); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile; endif; ?> <?php get_footer(); ?>

記事のタイトル「Hello world!」が出現！

現在ブログに投稿されている、すべての記事のタイトルが表示されましたか？ここではデフォルトの記事「Hello world!」のタイトルのみ表示されていますが、適当に新しい記事を使ってみると新しい記事のタイトルが表示されます。今回は「新たな投稿、出現！テスト投稿です」というタイトルの記事を作りました。

新たな記事タイトルが出現！

記事タイトルを記事の個別ページへのリンクにします。以下のテンプレートタグが、記事の個別ページへのリンクアドレスになります。

以下のようにします。

編集: index.php: <?php get_header(); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php endwhile; endif; ?> <?php get_footer(); ?>

記事タイトルに個別ページへのリンクがつきました。

記事それぞれの個別ページへリンク

各記事ごとに記事の本文を表示します。記事の本文を表示するには以下のタグを使います。

編集: index.php: <?php get_header(); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <?php endwhile; endif; ?> <?php get_footer(); ?>

これで投稿した記事の内容も一緒に表示されるようになります。
あとはお好みで、<div>タグを使ってグループ化してください。CSSでデザインしやすくなります。今回は「container」「contents」「entry」「entry_main」の4つのidで<div>グループ化します。

編集: header.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> …（省略）… <body> <div id="container"> <div id="header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1> <p><?php bloginfo('description'); ?></p> </div>

編集: index.php: <?php get_header(); ?> <div id="contents"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="entry"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry_main"> <?php the_content(); ?> </div> </div> <?php endwhile; endif; ?> </div> <?php get_footer(); ?>