IT知識の貯蔵庫

夏休み中にお会いした人から後日「記事が途中までしか書かれてなくてどうやったら読めるのかわからない」との指摘がありました。おぉぅ(-_-;確かに…すみませんでした

という訳でトップページとアーカイブページの記事抜粋の下に「続きを読む」リンクを設置しました。

そうですね。やっぱないとわかり辛いですね(^_^;

設置は記事抜粋の下に新たに下のコードを追加しています。

<p class="more">
  <a href="<?php the_permalink(); ?>">続きを読む</a>
</p>

 

cssではリンクの配置とテキストの色とデコレーションを設定しています。

.more {
	text-align: right;
	text-decoration: none;
}
.more a {
	color: #066;
}
.more a:hover {
	color: #0C6;
}

 

一応index.phpの全体像はこんな感じになっています。

<?php get_header(); ?>

<!--コンテンツ開始-->
  <div id="contents_wrap">
  <div id="contents">
  <h2>新着情報</h2>
  <?php if ( have_posts()): ?>
    <ul class="posts">
    <?php while ( have_posts() ) : the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>">
          <?php if ( has_post_thumbnail() ) :
		    the_post_thumbnail('thumbnail');
		  else :
		    echo '<img src="';
			bloginfo( 'template_url' );
			echo '/images/the_post_thumbnail_default.png" alt="デフォルト画像" class="attachment-thumbnail" />';
		  endif; ?>
        </a>
        <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
        <p>
          <?php the_excerpt(); ?>
        </p>
        <p class="more">
          <a href="<?php the_permalink(); ?>">続きを読む</a>
        </p>
        <p class="meta">
          <span>日付:<a href="<?php the_permalink(); ?>"><time datetime="<?php the_time('y-m-d'); ?>"><?php the_time( get_option('date_format') ); ?></a></span>
          <span>カテゴリー:<?php the_category(','); ?></span>
        </p>
      </li>
    <?php endwhile; ?>
    </ul>
  <?php endif; ?>
    <div class="post_navi">
      <?php posts_nav_link(); ?>
    </div>
  </div>
  </div>
<!--コンテンツ終了-->
<?php get_sidebar(); ?>

<?php get_footer(); ?>

参考まで

 

カテゴリー:WordPress,テーマ タグ: WordPress, テーマ