求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

トップページを表示 - カスタムテーマ

テンプレートタグの読み込み順序

https://cdn-ak.f.st-hatena.com/images/fotolife/w/webmaster-web/20160709/20160709212342.png

  • 「index.php」には、ダッシュボードで指定された数だけ投稿記事が表示されています
  • その数を超えた場合に表示された表示されるのが「ページャー」です
  • しかし、投稿記事の一覧には、「次の記事」「前の記事」という概念はありません
  • 「次の記事」「前の記事」という概念は、「単独記事(投稿個別ページ)」のページにのみ必要になります

トップページとは

  • 投稿記事が、ダッシュボードで設定された数だけ表示されるページ
前後の記事へのリンクを出力しないようにする
  • is single()
  • この 条件分岐タグ は、添付ファイルや固定ページを除く個別の投稿を表示しているかどうかをチェックします
  • 前後の記事へのリンクを個別ページのみ出力するようにする
<?php if( is_single() ): ?>

<div class="pagenav">
<span class="old">
<?php previous_post_link( '%link', '<i class="fa fa-chevron-circle-left"></i> %title'); ?>
</span>
<span class="new">
<?php next_post_link( '%link', '%title <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>
記事の個別ページヘのリンクを設定する
  • 各記事の個別ページヘのリンクは、「」で出力します
<article <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

f:id:web-0220:20190407144451g:plain

記事の個別ページのタイトルにはリンクされないようにする
<?php if( is_single() ): ?>
<h2><?php the_title(); ?></h2>
<?php else: ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>

f:id:web-0220:20190407145240g:plain

1ページに表示する記事の数を変更する
  • 「設定」→「表示設定」で「1ページに表示する最大投稿数」を「3」にする

f:id:web-0220:20190407145553g:plain

前後のページヘのリンクを表示する
  • 投稿記事が設定されている最大数(3)を超えた場合には、「ページネーション」を表示する
<?php endwhile; endif; ?>

<?php if( $wp_query -> max_num_pages > 1 ): ?>
<div class="pagenav">
<span class="old">
<?php next_posts_link(); ?>
</span>
<span class="new">
<?php previous_posts_link(); ?>
</span>
</div><!-- /.pagenav -->
<?php endif; ?>

</body>

f:id:web-0220:20190407150101g:plain

リンクの表記を変更して矢印のアイコンを表示する
  • 前後の記事へのリンクを出力する記述と、パラメーターの指定方法が異なります
<?php if ( $wp_query->max_num_pages > 1 ): ?>

<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>
<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>

f:id:web-0220:20190407150513g:plain

記事の一覧と前後のページのリンクをグループ化する
<body <?php body_class(); ?>>
<div class="container">

  略

<?php endif; ?>
</div><!-- /.container -->

</body>
ここまでの記述まとめ
<body <?php body_class(); ?>>
<div class="container">

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

<article <?php post_class(); ?>>

<?php if( is_single() ): ?>
<h2><?php the_title(); ?></h2>
<?php else: ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>

<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>

<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( '' ); ?>
</span>
</div><!-- /.postinfo -->


<?php the_content(); ?>

<?php if( is_single() ): ?>

<div class="pagenav">
<span class="old">
<?php previous_post_link( '%link', '<i class="fa fa-chevron-circle-left"></i> %title'); ?>
</span>
<span class="new">
<?php next_post_link( '%link', '%title <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>

</article>

<?php endwhile; ?>
<?php endif; ?>

<?php if ( $wp_query->max_num_pages > 1 ): ?>

<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>
<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>

</div><!-- /.container -->
</body>

トップページのデザインを指定する

記事の間隔を広くする
/* 記事 */
article {
  margin-bottom: 40px;
}
記事のタイトルを黒色にする
/* 記事 */
article h2 a {
  color: #000;
  text-decoration: none;
}
横幅の最大値を指定する
.container {
  max-width: 650px;
}
中央に揃えて表示する
  • この段階で、記事の左右に余白を追加して読みやすくする
.container {
  max-width: 650px;
  margin: 0 auto;
  padding: 0 15px;
}

トップページ
《プレビュー》

f:id:web-0220:20190407152807g:plain


個別記事ページ
《プレビュー》

f:id:web-0220:20190407152942g:plain