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

【问题标题】：Single page wordpress template. How to create new section in css单页 wordpress 模板。如何在css中创建新部分
【发布时间】：2012-10-28 17:39:18
【问题描述】：

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

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

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

【问题讨论】：

标签： css wordpress themes singlepage

【解决方案1】：

得到了这个问题的答案。将此添加到我的 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>';
        }
?>

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

【讨论】：

【解决方案2】：

这与 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 那样立即把你带到那里。

【讨论】：

也许我在再次查看后误读了问题 - 您的意思是主题自动创建页面锚链接和具有正确 id 的 div？
嘿@Andy，你是对的，我的意思是，当您创建新页面时，主题似乎会动态创建锚点和 div。有什么想法吗？

【解决方案3】：

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

【讨论】：