Question

我有一个构建的模板，包含在其他元素中的元素等。当页面加载时，wordpress正在改变我模板的结构。

<?php
get_header();
?>
<div class="container bt-news-archive-container">
    <div class="row bt-news-archive-wrapper">
        <?php
        if ( have_posts() ) {
      while ( have_posts() ) : the_post();
          ?>
                <div class="col-xs-12 col-sm-6 col-md-4 bt-news-post-container">
                    <a href='<?php echo get_the_permalink(); ?>' class="bt-news-post-wrapper">
                        <div class='bt-news-post-img-wrapper'>
                            <?php echo $filterPostThumbnail; ?>
                            <span class="bt-news-post-img-overlay"></span>
                        </div>
                        <h3 class="bt-news-post-title"><?php echo get_the_title(); ?></h3>
                        <p class="bt-news-post-date"><?php echo get_the_date() ?></p>
                        <p class="bt-news-post-excerpt"><?php echo get_the_excerpt(); ?></p>

                        <a href="<?php echo get_the_permalink(); ?>" class="btn btn-default bt-read-more-btn" role="button">
                            <span class="bt-read-more-text">Read More</span>
                            <i class="bt-read-more-icon fa fa-arrow-right"></i>
                        </a>
                    </a>
                </div>
          <?php
        endwhile;
      } else {
        ?>
        <div class"row bt-news-archive-wrapper"><p>No News Posts Found</p></div>
        <?php
      };
        ?>
    </div>
  <?php
  wp_reset_postdata();
  ?>
</div>
<?php get_footer(); ?>

加载后，read more按钮周围的锚点将作为包装锚点的兄弟加载。它有时也用其他东西做到这一点。为什么呢？

Answer 1

这可能是由浏览器渲染嵌套在锚点中的锚点引起的。许多浏览器都会尝试更正无效的html。

不需要读取更多锚点。您可以将其设为span标记。你的包装锚标签包含了所有内容，所以你应该没事。

我会这样做以避免奇怪的无链接间隙：

    <div class="col-xs-12 col-sm-6 col-md-4 bt-news-post-container">
         <div class='bt-news-post-img-wrapper'>
            <?php echo $filterPostThumbnail; ?>
            <span class="bt-news-post-img-overlay"></span>
         </div>
         <h3 class="bt-news-post-title"><?php echo get_the_title(); ?></h3>
         <p class="bt-news-post-date"><?php echo get_the_date() ?></p>
         <p class="bt-news-post-excerpt"><?php echo get_the_excerpt(); ?></p>
         <div class="button-wrapper">
              <span class="bt-read-more-text">Read More</span>
              <i class="bt-read-more-icon fa fa-arrow-right"></i>
         </div>
         <a href='<?php echo get_the_permalink(); ?>' class="bt-news-post-wrapper"></a>
    </div>

和css：

.bt-news-post-container{
    position:relative;
}

.bt-news-post-wrapper{
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
}

这样你的锚就会覆盖整个盒子，所以无论你在哪里点击，你都会被带到固定链接。另外，read more有一个包装器，可以用来确保你的图标正确对齐。

Wordpress正在改变我的模板结构

1 个答案: