taccuma note

WordPress初心者がまず押さえておきたいテンプレートタグまとめ

ループ部分で使いそうなタグ

基本的なループ構造

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

ここにループさせる内容を記述

<?php endwhile; // 繰り返し処理終了
 else : ?>

ここにループさせるモノが無い場合の内容を記述

 <?php endif; ?>

ループ内に入れるテンプレートタグ(sample:index.php)

<?php get_header(); ?><!-- ※ヘッダーを読み込む -->

<div id="container">
<div id="main">

<!-- ループ部分 -->
<?php if (have_posts()) :
  while (have_posts()) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>  
<article class="clearfix">
<header>
<h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div class="post-info">
<ul>
<li class="time"><?php echo get_the_date(); ?></li>
<li class="tag"><?php the_tags('', ', '); ?></li>
</ul>
</div>
</header>

<?php the_content('続きを読む...'); ?>

</article>
</div>

<?php endwhile; // 繰り返し処理終了
 else : ?>
<div>  
   <article class="clearfix">
    <h2>記事はありません</h2>
    <p>お探しの記事は見つかりませんでした。</p>
   </article>
</div>
 <?php endif; ?>
<!-- /ループ部分 -->

<!-- pageナビゲーション -->
<div class="page-nav">
<span class="pre-page"><?php previous_posts_link('前のページへ'); ?></span>
<span class="next-page"><?php next_posts_link('次のページへ'); ?></span>
</div>
<!-- /pageナビゲーション -->

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

<?php get_sidebar(); ?><!-- ※サイドバーを読み込む -->
<?php get_footer(); ?><!-- ※フッターを読み込む -->

10行目・・・<?php the_ID(); ?>

ループしてる記事(ページ)に唯一一意の識別子をつける。通常はサンプルにあるような感じで使うけど、無理に使う必要もない。

10行目・・・<?php post_class(); ?>

ループしてる記事(ページ)に、それがどんな種類の記事(ページ)かなどのクラスをつける。通常はサンプルにあるような感じで使うけど、無理に使う必要もない。

13行目・・・<?php the_permalink() ?>

閲覧中の記事(ページ)のパーマリンク(URL)をはき出します。記事中や固定ページのタイトル中で使ったりします。

13行目・・・<?php the_title_attribute(); ?>

閲覧中の記事(ページ)のタイトルにマウスオーバーすると、タイトルがポップアップします。記事中や固定ページのタイトル中で使ったりします。

13行目・・・<?php the_title(); ?>

閲覧中の記事(ページ)のタイトルをそのまま表示させます。

16行目・・・<?php echo get_the_date(); ?>

記事や固定ページを公開した日付をはき出します。

17行目・・・<?php the_tags('', ', '); ?>

ポストした記事のタグを表示します。

ちなみに、ポストした記事のカテゴリーは・・・
<?php the_category(', '); ?>

※タグもカテゴリーも複数指定時にカンマで区切ってますが、()内を変更すればカスタマイズ可

22行目・・・<?php the_content('続きを読む...'); ?>

ポストした記事や固定ページの内容を表示します。注意したいのは…

  • index.php(トップページ)では<?php the_content('続きを読む...'); ?>
  • single.php、page.phpでは<?php the_content(); ?>

トップページのindex.phpでは記事の途中まで表示させて残りは「続きを読む」リンクを押して全部を表示させたい場合は括弧内に【続きを読む…】【read more…】などを入れる必要があります。記事作成中に<!--more-->を入れれば、その前までがトップページに表示されることになります。

()の中を空っぽにしたら続きを読むのリンクが表示されないよっ!

※()内を変更すれば、「続きを読むリンク」のテキストをカスタマイズ出来ます。

41~42行目・・・ナビゲーションタグ

index.phpには次のページ、前のページへのリンクを作ってくれる…以下のテンプレートタグをループの外へ記述します。(括弧内はカスタマイズ可能)

  • <?php previous_posts_link('前のページへ'); ?>
  • <?php next_posts_link('次のページへ'); ?>

一方でsingle.phpには次の記事、前の記事へのリンクを作ってくれる…以下のテンプレートタグをループの中に記述します。(括弧内はカスタマイズ可能)

  • <?php previous_post_link('%link', '« %title'); ?>
  • <?php next_post_link('%link', '%title »'); ?>

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

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

最近の投稿

おすすめ

タグクラウド

カテゴリー