Самозакрывающийся якорный тэг на уровне блока не работает как следует

Question

Здесь странное поведение HTML. У меня есть ссылка <a href>, обернутая вокруг всего тега, сама содержащая детали статьи. Цель состоит в том, чтобы сделать весь блок статьи кликабельным.

Однако, как только я запустил код в браузере, сам ahref сам закрывается, и многие элементы появляются вокруг каждого дочернего элемента в блоке ARTICLE. Плохая новость заключается в том, что он не делает весь блок статьи кликабельным.

article { margin-bottom: 1.5em; } 

.page-header, .entry-header { padding: 0; } 

.entry-title, .page-title { margin-top: 0; line-height: 1; padding: 1em .8em 0 .8em; } 

.entry-header { position: relative; top: 0; left: 0; width: 100%; } 

.entry-thumb { position: relative; top: 0; left: 0; background-color: rgba(70,64,60,1); } 
.entry-thumb img { width: 100%; } 

.opacity { opacity: .6; } 
.opacity:hover { opacity: 1; } 

.header-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    line-height: 1; 
    margin: 0; 
    padding: 1.5em; 
    background: linear-gradient(to bottom, rgba(70,64,60,1) 5%, rgba(70,64,60, 0) 50%); 
} 
.header-overlay.male { background: linear-gradient(to bottom, rgba(0,0,155,.5) 5%, rgba(0,0,155, 0) 50%); } 
.header-overlay.female { background: linear-gradient(to bottom, rgba(255,0,255,.5) 5%, rgba(255,0,255, 0) 50%); } 

.header-overlay h1 { 
    font-size: 2em; 
    line-height: 1; 
    color: #FFF; 
    padding: 0; 
    margin: 0 
} 

.header-overlay .entry-meta a { color: #FFF; } 
.header-overlay .entry-meta { 
    line-height: 2; 
    color: #FFF; 
    text-transform: uppercase; 
    opacity: .7; 
    font-size: .8em; 
} 

И источник КАК Я закодировал:

<a href="<?php the_permalink(); ?>" rel="bookmark"> 
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
     <header class="entry-header"> 
      <figure class="entry-thumb"> 
       <?php if(has_post_thumbnail()) { the_post_thumbnail('large', array('class' => 'opacity')); } ?> 
      </figure> 
      <div class="header-overlay"> 
       <h1><?php the_title(); ?></h1> 
       <div class="entry-meta"><?php wordpress_posted_on(); ?></div> 
      </div> 
     </header> 
    </article><!-- #post-## --> 
</a> 

Weird является то, что он выводит, что код с несколькими ahref ...

<a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"></a> 

<article id="post-26" class="post-26 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorised"> 
    <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"> 
    </a> 
    <header class="entry-header"> 
     <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"> 
      <figure class="entry-thumb"> 
       <img width="640" height="480" src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="opacity wp-post-image" alt="Blue_merle_picture"> </figure> 
     </a> 
     <div class="header-overlay"> 
      <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"> 
       <h1> 
        Blue Merle Dog    </h1> 
      </a> 
      <div class="entry-meta"> 
       <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"> 
        <span class="posted-on">Posted on </span></a> 
       <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"> 
        <time class="entry-date published updated" datetime="2015-04-24T00:26:55+00:00">24th April 2015</time> 
       </a><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost/Wordpress/author/administrator/">Admin</a></span></span> 
      </div> 
     </div> 
    </header> 
</article> 

Я бы не возражал, но не делает весь блок кликабельным, только заголовок h1 и почтовые метасы (дата и автор).

EDIT: мой php/wordpress цикл является базовым, как показано ниже.

<div id="primary" class="content-area"> 
     <main id="main" class="site-main" role="main"> 

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

      <?php /* Start the Loop */ ?> 
      <?php while (have_posts()) : the_post(); ?> 

       <?php 
        /* Include the Post-Format-specific template for the content. 
        * If you want to override this in a child theme, then include a file 
        * called content-___.php (where ___ is the Post Format name) and that will be used instead. 
        */ 
        get_template_part('content', get_post_format()); 
       ?> 

      <?php endwhile; ?> 

      <?php the_posts_navigation(); ?> 

     <?php else : ?> 

      <?php get_template_part('content', 'none'); ?> 

     <?php endif; ?> 

     </main><!-- #main --> 
    </div><!-- #primary --> 

<?php get_sidebar(); ?> 
<?php get_footer(); ?> 

С этой линии: get_template_part ('содержание', get_post_format()); вызова для вышеприведенного кода

Answer 1

Попробуйте изменить это (блок статьи.):

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

Для этого:

<a href="<?php the_permalink(); ?>" rel="bookmark" class="entry-link"> 

Затем добавьте этот CSS:

.entry-link { 
    width: 100%; 
    display: block; 
} 

.entry-link:after { 
    content: ""; 
    display: table; 
} 

.entry-link:after { 
    clear: both; 
} 

UPDATE: Только что заметил ваш выход ... можете ли вы как мы используем цикл PHP?

UPDATE 2: Удалено поплавок и добавлен метод clearfix для вашего якоря. Но, судя по вашему результату, вы все равно получаете какие-то странные якоря во всем мире, не могли бы вы показать нам свою петлю PHP?