Question

我的英雄＆＃39; element占据了首页的大部分，用户必须手动滚动才能访问内容。

我想更改它，以便点击链接将滚动浏览图像并向下滚动到帖子标题。在这一刻，点击帖子重新加载页面，英雄元素在顶部。但是如果你点击“更多”＆＃39;标签，它滚动得很好。

如何点击链接以在Wordpress中向下滚动页面？我不是故意更多＆＃39;更多＆＃39;标签。也许有一种方法来更新WP中的链接功能，这样链接就会创建类似于更多＆＃39;标记

我没有创建链接的代码，因为它们是由WP创建的（它们是帖子链接）。

<div class="big">

</div>

<article><div class="post">
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
</div></article>

.big {
  height: 1200px;
  width: 900px;
  background-color: grey;
}

JS小提琴：https://jsfiddle.net/tvue1mwo/

single.php代码：

<?php
if (is_single()) {
    // Currently using get_header('posts'), so I can hide hero element by css and unhide it with js

    get_header('posts');

    // If I understand right, here should go the ANCHOR link?
}
else {
    // Loads normal hero withou extra css class
    get_header();
}
?>
<div class="main-section wrapper">
<?php
    if (have_posts()) :
        while (have_posts()) : the_post(); ?>
    <div class="post-content u-cf">
        <h2 class="post"><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?></a></h2>
            <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
                <?php 
                $categories = get_the_category(); 
                $separator = ", ";
                $output = '';
                if ($categories) {
                    foreach ($categories as $category) {
                        $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                    }
                    echo trim($output, $separator);
                }
                ?>
                |
                <i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
            </p>
            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
            <?php the_content(); ?>
        <?php endwhile; ?>
    </div>
    <?php
    else :
        echo '<p> No Content found</p>';
    endif; ?>
</div>
<?php get_footer(); ?>

的index.php：

<?php 
if (have_posts()) :?>
<?php $count = 1; 
while (have_posts()) : the_post(); ?>

<div class="post-content u-cf">

    <?php if (has_post_thumbnail()) {
        ?>
        <div class="post-thumbnail u-cf"><a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('small-thumbnail')  ?></a>
        </div>
        <?php } ?>

        <h2 class="post">
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
        </h2>

        <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
            <?php 
            $categories = get_the_category(); 
            $separator = ", ";
            $output = '';

            if ($categories) {

                foreach ($categories as $category) {
                    $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                }

                echo trim ($output, $separator);
            }
            ?>
            |<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
        </p>

        <?php the_content(); ?>
        <hr>

        <?php   if ( 2 === $count ) { ?>

        <div class="main-content-advert">
            <p>Lorem ipsum</p><p>Lorem impsum</p>
        </div>
        <hr>

        <?php }

        $count++; ?>  
    <?php endwhile; ?>

</div>
<?php
else :
    echo '<p> No Content found</p>';

endif; ?>

Answer 1

如果您使用index.php来显示主页＆amp;档案，您可以执行以下操作：

<?php 
/* 1. define the name of the anchor to jump to */
$anchorname = "skipheroimage"; 
$count = 0;

if (have_posts()) :
    while (have_posts()) : the_post(); 
    ?>
        <?php 
        $count++; /* increment the count so that each anchor is unique on the page */
        /* 2. add the anchor to the permalink so it will jump directly to the anchor  */
        $linkwithanchor = get_permalink()."#".$anchorname.$count; 
        ?>

        <div class="post-content u-cf">
            /* 3. use our $linkwithanchor variable to create the link */
            <h2 class="post"><a href="<?php echo $linkwithanchor; ?>"> 
            <?php the_title(); ?></a></h2>


            /* no change to the code that was here, so keep it as it was...
               ... I just removed it to make my changes easier to find */


            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>

             /* 4. add our anchor - this is where the link will jump to */
            <a id="<?php echo $anchorname.$count; ?>" name="<?php echo $anchorname.$count; ?>"></a>
            <?php the_content(); ?>
        </div> /* NOTE  - you had this in the wrong place. */
   <?php endwhile; ?>
<?php
else :
    echo '<p> No Content found</p>';
endif; ?>

这将在横幅图像后直接创建一个锚点，并将锚点名称添加到链接中，以便它直接跳转到它。

我已直接在代码中对每一步进行了评论和编号。

您需要为显示链接的所有模板（例如archive.php）

执行此操作

如何滚动到Wordpress中的帖子链接

1 个答案: