ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマLUXE:記事一覧に「続きを読む」ボタンを追加する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.記事一覧に「続きを読む」ボタンを追加したい

ブログの「過去の記事一覧」で、記事の一部が一覧で表示されますが、各記事をクリックさせる表示が欲しいです。
例えば、記事が長い場合でも一見、続きがあると気づかず記事がクリックされにくいので、テキストの最終行に、例えば「>>記事の詳細はこちら」というようなリンクを表示させたいのですが。

確かに「続きを読む」などがあった方が分かりやすいですね!

A.下記のPHPファイルの該当箇所を編集します

編集するファイル:archive.php

編集する箇所:
before

<li class="clearfix<?php if (!has_post_thumbnail()) { echo ' no_thumbnail'; }; ?>">
    <?php if ($options['show_thumbnail'] and has_post_thumbnail()) { ?>
    <a class="image" href="<?php the_permalink() ?>"><?php  echo the_post_thumbnail('size3'); ?></a>
    <?php }; ?>
    <div class="info">
     <?php if ($options['show_date']) { ?><p class="post_date"><span class="date"><?php the_time('n.j'); ?></span><span class="month"><?php the_time('Y'); ?></span></p><?php }; ?>
     <h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
     <p class="desc"><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(150);}; ?></p>
     <?php if($options['show_date']||$options['show_comment']||$options['show_category']||$options['show_tag']||$options['show_bookmark']) { ?>
     <ul class="meta clearfix">
      <?php if ($options['show_author']) : ?><li class="meta_author"><?php the_author_posts_link(); ?></li><?php endif; ?>
      <?php if ($options['show_comment']) : ?><li class="meta_comment"><?php comments_popup_link(__('Write comment', 'tcd-w'), __('1 comment', 'tcd-w'), __('% comments', 'tcd-w')); ?></li><?php endif; ?>
      <?php if ($options['show_category']) : ?><li class="meta_category"><?php the_category(', '); ?></li><?php endif; ?>
      <?php if ($options['show_tag']) : ?><?php the_tags('<li class="meta_tag">',', ','</li>'); ?><?php endif; ?>
     </ul>
     <?php }; ?>
    </div>
   </li>

↓after

<li class="clearfix<?php if (!has_post_thumbnail()) { echo ' no_thumbnail'; }; ?>">
    <?php if ($options['show_thumbnail'] and has_post_thumbnail()) { ?>
    <a class="image" href="<?php the_permalink() ?>"><?php  echo the_post_thumbnail('size3'); ?></a>
    <?php }; ?>
    <div class="info">
     <?php if ($options['show_date']) { ?><p class="post_date"><span class="date"><?php the_time('n.j'); ?></span><span class="month"><?php the_time('Y'); ?></span></p><?php }; ?>
     <h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
     <p class="desc"><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(150);}; ?></p>
<div class="tsuzuki"><a href="<?php echo get_permalink(); ?>">続きを読む</a></div>
     <?php if($options['show_date']||$options['show_comment']||$options['show_category']||$options['show_tag']||$options['show_bookmark']) { ?>
     <ul class="meta clearfix">
      <?php if ($options['show_author']) : ?><li class="meta_author"><?php the_author_posts_link(); ?></li><?php endif; ?>
      <?php if ($options['show_comment']) : ?><li class="meta_comment"><?php comments_popup_link(__('Write comment', 'tcd-w'), __('1 comment', 'tcd-w'), __('% comments', 'tcd-w')); ?></li><?php endif; ?>
      <?php if ($options['show_category']) : ?><li class="meta_category"><?php the_category(', '); ?></li><?php endif; ?>
      <?php if ($options['show_tag']) : ?><?php the_tags('<li class="meta_tag">',', ','</li>'); ?><?php endif; ?>
     </ul>
     <?php }; ?>
    </div>
   </li>

変更点としては抜粋文を表示している部分の下に記事へと続くリンクを追加しました。

<p class="desc"><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(150);}; ?></p>

<p class="desc"><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(150);}; ?></p>
<div class="tsuzuki"><a href="<?php echo get_permalink(); ?>">続きを読む</a></div>

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事