如何在 Wordpress 中滚动到 post link

Question

我的 'hero' 元素占据了首页的大部分，用户必须手动滚动它才能到达内容。

我想更改它，以便单击 link 时会滚动经过图像并向下滚动到 post 的标题。此时，单击 post 会重新加载页面，并且英雄元素位于顶部。但是如果你点击 'more' 标签，它会很好地滚动。

如何才能使单击 link 将在 Wordpress 中向下滚动页面？我不是说 'more' 标签。也许有一种方法可以更新 WP 中的 link 函数，这样 link 就会创建类似 'more' 标签的锚点？

我没有创建 link 的代码，因为它们是由 WP 创建的（它们是 post link）。

<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 Fiddle: 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 显示主页和存档，您可以执行以下操作：

<?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; ?>

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

我直接在代码中对每个步骤进行了注释和编号。

您需要对任何显示 link 的模板执行此操作（例如 archive.php）

如何在 Wordpress 中滚动到 post link

How to scroll to post link in Wordpress

wordpress

scroll

hyperlink

posts