1

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

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

有人可以向我解释在设计 wordpress 主题时这是如何将其创建为功能的吗？山姆

4

3 回答 3

2

得到了这个问题的答案。将此添加到我的 index.php 页面（稍作修改）。对于我添加的每个页面，都会添加一个新页面，然后我可以使用 jquery 进行锚定，显然您可以添加 n 个您自己的类和 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>';
        }
?>

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

于 2012-11-10T11:55:15.680 回答
1

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

于 2012-11-08T14:10:09.387 回答
1

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

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

例如

<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 那样立即将您带到那里。

于 2012-11-08T14:13:14.587 回答