整篇文章鏈接到實際文章。怎麼樣？

Question

我剛剛開始在骨架「框架」的主題，並且我想使frontpage文章預覽鏈接到帖子，而不是僅僅鏈接到<h1>。

我該如何實現這一目標？使整個預覽鏈接可點擊的div？

這是該部分的樣機！ :)

<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article"> 

          <header class="article-header"> 

           <h1 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> 

           <p class="byline vcard"><?php _e('Posted', 'bonestheme'); ?> <time class="updated" datetime="<?php echo the_time('Y-m-j'); ?>" pubdate><?php the_time(get_option('date_format')); ?></time> <?php _e('by', 'bonestheme'); ?> <span class="author"><?php the_author_posts_link(); ?></span> <span class="amp">&</span> <?php _e('filed under', 'bonestheme'); ?> <?php the_category(', '); ?>.</p> 

          </header> <!-- end article header --> 

          <section class="entry-content clearfix"> 
           <?php the_content(); ?> 
          </section> <!-- end article section --> 

Answer 1

您可以隨時使用的JavaScript解決方案可以與CSS組合：

<article style="cursor:pointer;" onclick="window.location='<?php the_permalink(); ?>'"> 
    ... 
</article> 

Answer 2

不知道這是否與HTML5規範的規定，但你可以嘗試移動包所有的文章..：

<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article"> 

<!-- move <a> to here --> 

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> 

           <header class="article-header"> 

            <h1 class="h2"><?php the_title(); ?> </h1> 

            <p class="byline vcard"><?php _e('Posted', 'bonestheme'); ?> <time class="updated" datetime="<?php echo the_time('Y-m-j'); ?>" pubdate><?php the_time(get_option('date_format')); ?></time> <?php _e('by', 'bonestheme'); ?> <span class="author"><?php the_author_posts_link(); ?></span> <span class="amp">&</span> <?php _e('filed under', 'bonestheme'); ?> <?php the_category(', '); ?>.</p> 

           </header> <!-- end article header --> 

           <section class="entry-content clearfix"> 
            <?php the_content(); ?> 
           </section> <!-- end article section --> 
<!-- close </a> here --> 
    </a>