SSブログ

WordPressによるサイト運営[6] [WordPress]

「一覧表示のテンプレート化」

 

複数の投稿を一覧表示するアーカイブ表示のテンプレート化を行う。

1.アーカイブのタイトルを表示

single_archieve_titleカスタムテンプレートタグを用いて、カテゴリー名、タグ名、年や月を一括表示する。

<header class="page-header">
    <h1 class="page-title"><?php single_archive_title(); ?></h1>
</header>

2.カテゴリーの説明文表示に対応させる

アーカイブのタイトルの下にカテゴリーの説明文も合わせて表示させる。

<?php if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>

3.ループの組込みとテンプレートタグの置き換え

①ループの組込み

記事をループで括る。

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

<article class="hentry">
    <header class="entry-header">
        中略
    </footer>
</article>
<?php endwhile; endif; ?>

②タイトル、投稿日をテンプレートタグに置き換える

the_titleタグでタイトル、the_timeタグで登校日を表示させる。

<header class="entry-header">
    <h1 class="entry-title">
        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </h1>
    <div class="entry-meta">
        <span class="sep">投稿日:<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
            <time class="entry-date" datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate="<?php the_time( 'Y-m-d' ); ?>">
                <?php the_time( get_option( 'date_format' ) ); ?>
            </time>
        </a></span>
中略

    </div>
</header>

③投稿者をテンプレートタグに置き換える

the_authourテンプレートタグで作成者名を表示する。get_authour_posts_url タグと get_the_authour_meta(‘ID’)で作成者名アーカイブのリンクを得ている。

<span class="author vcard">投稿者:<a title="<?php the_author(); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" class="url fn n">
    <?php the_author(); ?>
</a></span>

 

4.サイズの違うアイキャッチ画像を表示

get_post_thumnailタグのパラメータで、大きなサイズのアイキャッチ画像を表示する。

<p><a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) :
        the_post_thumbnail( 'large_thumbnail' );
    else :
        echo '<img src="' . get_default_image( 'default/post-thumbnail-default.png' ) . '" class="attachment-large_thumbnail wp-post-image" alt="" />';
    endif; ?>
</a></p>

 

5.抜枠を表示

the_exceptテンプレートタグにより冒頭の一部もしくは抜粋専用のテキストを表示する。

<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="more-link">続きを読む<span class="meta-nav">&gt;</span></a>

 

6.カテゴリーとタグの表示をテンプレート化

the_tagsテンプレートタグでタグを表示する。

<span class="cat-links">カテゴリー:<?php the_category( ', ' ); ?></span>
<span class="tag-links"><?php the_tags( 'タグ:' ); ?></span>

 

7.ページナビを表示

http://kazu-oyaji.com/wp/

image

 

参考資料


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。