G&W Design Life

WordPress勉強 vol 3

WPのループを理解する

記事の一覧で、投稿されたものを表示する方法をループといいます。

■WPループの基本構造

<?php if(have_posts()):
    while(have_posts()): the_post();
?>
ここに投稿された記事情報がループします
<?php
    endwhile;
endif;
?>

基本のWPのループを作成する

ulタグの中にあるliが記事1件の情報としてループさせます。

<?php if(have_posts()): ?> //記事があったら
<ul> //ulタグを表示する
    <?php while(have_posts()): the_post(); ?> //記事があるぶんだけループする
        ここに投稿された記事情報がループします
    <?php endwhile; ?> //ループ終了
</ul>
<?php endif; ?>

ループさせるタグにWPのタグを埋め込んでいく

■記事を囲んでいるarticleタグにIDとclassを出力

<article id="post-<?php the_ID(); ?>" <?php post_class('hews');?>></article>

■記事が属するカテゴリーを表示

<div class="categories">
    <?php the_category(); ?>
</div>

the_categoryを使うとulタグとliタグで表示されます。
展開されたら以下の表示のようになります。

    <ul>
        <li><a href="#">お知らせ</a></li>
    </ul>

■記事の投稿時刻を表示

<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日(1)'); ?></time>

■記事のページリンク・抜粋の表示
WPのタグを組み込む前

<h1><a href="single.html">お花見企画の予約を開始しました</a></h1>
<p>
    今年も恒例のお花見企画を行います。4月11日(土)に当ホテルの中庭にて、お花見をしませんか?
    毎年、多くのお客さまにご好評を頂いております。
</p>
<p>[<a href="single.html">続きを読む</a>]</p>

WPのタグを組んだ後

<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php the_excerpt(); ?>
<p>[<a href="<?php the_permalink(); ?>">続きを読む</a>]</p>

the_excerptは本文のまでを表示します。このが無い場合は文字制御のプラグインを有効化して110文字までを自動で表示することができます。
110文字をこえた表示になる場合は『…』が最後に表示されます。

■アイキャッチ画像の表示
WPでアイキャッチを表示するにはfunctions.phpに記述をします。
functions.phpとは使用したい機能を有効にしたり、独自のPHP関数を定義したりすることができる関数ファイルです。
index.phpと同じ階層に置いておきます。下記の記述をしてアップすると管理画面の投稿ページにアイキャッチ選択部分が表示されるようになります。

・アイキャッチ表示の関数

<?php
/**
*アイキャッチ画像を使用可能にする
*/
add_theme_support('post-thumbnails');
&#91;/html&#93;
■記事のアイキャッチ画像を表示する
WPには&#91;設定&#93;→&#91;メディア&#93;で設定したいくつかのサイズのサムネイ画像を自動で作成します。
どのサイズを表示するかはthe_post_thumbnail()のパラメーターで指定可能。
画像をクリックされた記事ページに繊維できるようにthe_permalinkも設定しておきましょう。

&#91;html&#93;
<figure>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</figure>

■表示するアイキャッチが無い場合
アイキャッチが無い場合は『No image』画像を表示するように設定します。
記事にアイキャッチがあるかどうかは『has_post_thumbnail』関数を使います。

<?php if(has_post_thumbnail()): ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
<?php else: ?>
    <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/common/noimage_180x180.png" height="180" width="180" alt=""></a>
<?php endif; ?>

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category