Question

我只是好奇这是如何完成的，因为最终我想开发自己的单页wordpress主题。

我看过所有主题都在一个页面上但只是向下滚动，当你添加一个新的菜单项（或页面）时，它会向页面添加一个新的css部分。在此模板演示中可以看到一个示例：Wordpress In-Motion theme如您所见，您可以单击菜单链接，它会将您带到该部分。在CSS中它添加#news或＃about-us

在设计wordpress主题时，有人可以向我解释这是如何创建的吗？萨姆

Answer 1

得到了答案。将其添加到我的index.php页面（稍加修改）。对于我添加的每个页面，添加了一个new，然后我可以使用jquery进行锚定，显然你可以添加你自己的类和ID来控制div的外观。

<?php
$pages = get_pages( array ( 'sort_order' => 'asc', 'sort_column' => 'menu_order', 'depth' => 1));

        foreach ( $pages as $page ) {  
            $page_section = str_replace( " ", "", strtolower( $page->post_name ) );
            echo '<div id="' . $page_section . '" ></div>';
        }
?>

希望这对某人有帮助，萨姆

Answer 2

这是通过JavaScript完成的。据我所知，他们使用了一个名为onePageNav的jQuery插件，该插件处理向下滚动到所选菜单部分，并在向下滚动时向正确的菜单项添加current类。

Answer 3

这与Wordpess无关。它只是使用锚点将你带到页面上或向上。

如果页面上的元素具有唯一ID，您可以创建一个锚标记以链接到该ID（并且它会将您带到页面上）

e.g。

<div id="anchor">...</div>
<div id="something-else>...</div>

<a href="#anchor">Click here to go to id=anchor div</a>
<a href="#something-else">Clicker to go to something-else id div</a>

你给出的一个例子的Wordpress主题也有Javascript或jQuery平滑 - 所以它会很好地滚动到锚点，而不是像普通的HTML那样立即将你带到那里。

单页wordpress模板。如何在css中创建新的部分

3 个答案: