单页 WordPress 主题

Question

我为 WordPress 网站制作了单页 HTML。有 4 个部分和 4 个菜单项。 section id 和 menu id 相同（按页面顺序排序）。

基本上是 HTML 格式，当你点击菜单时，滚动条会自动转到相关部分。当我把它变成 WordPress 时，一切都在工作，但是当我点击菜单时它却没有。

<!-- Menu section -->
<div class="col-md-8 col-sm-10 col-xs-4 main-menu text-right">
    <ul class="menu-first hidden-sm hidden-xs">
    <?php
        global $post;
        $args = array('post_type'=>'page','orderby'=>'menu_order','order'=>'ASC');
        $myposts = get_posts($args);

        foreach($myposts as $post) : setup_postdata($post);?>
            <li><a href="#<?php echo $post->post_name; ?>"><?php the_title(); ?></a></li>
        <?php endforeach; ?>
    </ul>
    <a href="#" class="toggle-menu visible-sm visible-xs"><i class="fa fa-bars"></i></a>
</div> <!-- /.main-menu -->

<!-- Service -->
<div class="content-section" id="<?php echo $post->post_name; ?>">
    <div class="container">
        <div class="row">
            <div class="heading-section col-md-12 text-center">
                <h2>Services</h2>
            </div> <!-- /.heading-section -->
        </div> <!-- /.row -->
        <div class="row">
            <?php
            global $post;
            $args = array('post_type'=>'service','orderby'=>'menu_order','order'=>'ASC');
            $myposts = get_posts($args);
            foreach($myposts as $post) : setup_postdata($post); ?>

             <div class="col-md-3 col-sm-6">
                <div class="service-item" id="service-1">
                    <div class="service-icon">
                        <i class="fa fa-<?php echo $service_icon; ?>"></i>
                    </div> <!-- /.service-icon -->
                    <div class="service-content">
                        <div class="inner-service">
                           <h3><?php the_title(); ?></h3>
                           <?php the_content(); ?>
                        </div>
                    </div> <!-- /.service-content -->
                </div> <!-- /#service-1 -->
            </div> <!-- /.col-md-3 -->
            <?php endforeach; ?>

           </div> <!-- /.row -->
    </div> <!-- /.container -->
</div> <!-- /#services -->

相关代码也位于paste bin。

Answer 1

我没有看到任何带有name 属性的锚点，您的链接实际上不会跳转到。试试这个：

<?php foreach($myposts as $post) : setup_postdata($post); ?>

    <div class="col-md-3 col-sm-6">
        <div class="service-item" id="service-1">
        <!-- Rest of markup removed for clarity -->
            <h3>
                <a name="<?php echo $post->post_name; ?>"><?php the_title(); ?></a>
            </h3>
        </div>
    </div>
<?php endforeach; ?>