韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り5(home.phpを編集)

1、ワードプレスループで記事を表示する

トップページは、記事の一覧にしたいので、ワードプレスループで記事の概要を繰り返し表示させます。
ワードプレスループとは、下のようなコードです。

<?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ): ?>
  <?php the_post(); ?>
  <!-- ここに処理を書く -->
 <?php endwhile; ?>
<?php endif; ?>

この、「<!– ここに処理を書く –>」の部分に、繰り返したいコード(記事の概要1つ分)を書きます。
このブログの場合は、↓この部分を繰り返し表示したいので、この部分のHTMLを、この中に入れます。

スポンサーリンク

2、様々な書き換え

・サムネイルは、the_post_thumbnail(‘thumbnail’);と書き換え。(imgタグは要らない)
・記事のタイトルは、the_title();と書き換え。
・記事のリンクは、the_permalink();と書き換え。
・記事のカテゴリー名は、the_category(‘, ‘);と書き換え。

※複数あったときに、「, 」で区切ります。
※自動的にa要素で囲まれます。(リンク付きになります。)リンクなしにしたい場合は、
$cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; }
と書きます。

・記事の抜粋分は、the_excerpt();と書き換え。
・記事の投稿日は、<time datetime=”<?php the_time(‘Y-m-d’); ?>”><?php the_time(‘Y年m月d日’); ?></time>と書き換え。

次のようなソースコードになります。

<?php while ( have_posts() ): ?>
 <article class="gaiyou clearfix">
  <?php the_post(); ?>
  <div class="gaiyou__left-box">
   <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
  </div>
  <div class="gaiyou__right-box">
   <h2 class="gaiyou__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
   <div class="gaiyou__info clearfix">
    <time class="gaiyou__time" datetime="<?php the_time('Y-m-d'); ?>"><i class="fa fa-clock-o"></i><?php the_time('Y年m月d日'); ?></time>
    <p class="gaiyou__cat"><i class="fa fa-folder"></i><?php the_category(', '); ?></p>
   </div>
   <p class="gaiyou__text"><?php the_excerpt(); ?></p>
  </div>
 </article>
<?php endwhile; ?>

3、抜粋分の最後に付く[…] を「続きを読む」に変更

【参考サイト】TwentyTwelveに「続きを読む」を設置するカスタマイズ
こちらの記事に書いてあるコードそのまま利用させていただきました。
functions.phpに下のコードを記述します。

//記事の抜粋に「続きを読む」を表示
/**
 * Sets the post excerpt length to 40 words.
 * 
 * To override this length in a child theme, remove the filter and add your own
 * function tied to the excerpt_length filter hook.
 */
function twentytwelve_excerpt_length( $length ) {
    return 40;
}
add_filter( 'excerpt_length', 'twentytwelve_excerpt_length' );
 
if ( ! function_exists( 'twentytwelve_continue_reading_link' ) ) :
/**
 * Returns a "Continue Reading" link for excerpts
 */
function twentytwelve_continue_reading_link() {
    return ' ' . __( '続きを読む', 'twentytwelve' ) . '';
}
endif; // twentytwelve_continue_reading_link
 
/**
 * Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and twentytwelve_continue_reading_link().
 *
 * To override this in a child theme, remove the filter and add your own
 * function tied to the excerpt_more filter hook.
 */
function twentytwelve_auto_excerpt_more( $more ) {
    return ' …' . twentytwelve_continue_reading_link();
}
add_filter( 'excerpt_more', 'twentytwelve_auto_excerpt_more' );
 
/**
 * Adds a pretty "Continue Reading" link to custom post excerpts.
 *
 * To override this link in a child theme, remove the filter and add your own
 * function tied to the get_the_excerpt filter hook.
 */
function twentytwelve_custom_excerpt_more( $output ) {
    if ( has_excerpt() && ! is_attachment() ) {
    $output .= twentytwelve_continue_reading_link();
    }
    return $output;
    }
add_filter( 'get_the_excerpt', 'twentytwelve_custom_excerpt_more' );

4、ページネーションをプラグイン「WP-PageNavi」で実装

プラグイン「WP-PageNavi」をインストールし有効化します。
ページネーションを表示したいところに、<?php wp_pagenavi(); ?>と書きます。
管理画面→設定→PageNaviで、表示するページ数などを設定できます。
設定は、このようにしました。


最後に、自動でクラス名が付けられているので、クラス名を確認しながら、CSSでスタイルを調整します。
このブログの場合は、下のようなCSSを書いています。

/* ページネーション */
.pagenation {
  text-align: center;
  margin-bottom: 20px;
}

.wp-pagenavi span.pages{
  border: none;
  font-size: 14px;
}

.wp-pagenavi a {
  padding: 8px 10px;
  font-size: 14px;
  border: solid 1px #F4AEC1;
  margin-left: 5px;
  margin-right: 5px;
}

.wp-pagenavi span.current {
  font-weight: normal;
  padding: 8px 10px;
  font-size: 14px;
  border: solid 1px #F4AEC1;
  background-color: #F4AEC1;
  margin-left: 5px;
  margin-right: 5px;
}

.wp-pagenavi a:hover {
  background-color: #F4AEC1;
  border: solid 1px #F4AEC1;
}

スポンサーリンク