如何创建具有可滚动效果的响应式一页 WordPress 主题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19405017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Create Responsive One Page WordPress Theme with scrollable effects?
提问by user2632980
Where can I find a soucre that learn to create a Responsive One Page WordPress Theme so when I click on the menu item it scroll down.
我在哪里可以找到学习创建响应式单页 WordPress 主题的源代码，因此当我单击菜单项时，它会向下滚动。
Here is an example of what I want http://thememints.com/templates/?theme=Cingle%20WP.
回答by user3263807
I have had exactly the same question and after searching around found this post.
我有完全相同的问题，并在四处搜索后找到了这篇文章。
I was rather shocked to see the responses to this question. It seem to me like people are quick to answer questions without properly reading the question.
看到这个问题的回答，我感到相当震惊。在我看来，人们在没有正确阅读问题的情况下很快就回答了问题。
All the contributors have given solutions to responsive and parallax scrolling websites but not one has answered the real question.
所有贡献者都给出了响应式和视差滚动网站的解决方案，但没有一个人回答了真正的问题。
It is not too broad, and it is not vague. All he is asking is how you go about creating a Single page theme in WORDPRESS.... no one gave any direction as to how to accomplish this.
它不是太宽泛，也不是模糊不清。他所问的只是您如何在 WORDPRESS 中创建单页主题.... 没有人就如何实现这一点给出任何指示。
Not sure why these answers got rated as usefull .
不知道为什么这些答案被评为有用。
So after digging around with trial and error I found the following to answer the question as to how you go about to create a single page WORDPRESS theme.
因此，经过反复试验，我发现以下内容可以回答有关如何创建单页 WORDPRESS 主题的问题。
One of the major aspect to understand is the Wordpress query-post functionwhich allows you to post multiple page content such as home , about, service and content onto a single page.
要理解的主要方面之一是Wordpress 查询-发布功能，它允许您将多个页面内容（例如 home 、about、service 和 content）发布到单个页面上。
To create the the menu structure to scroll to the different sections I found this tutorial to be usefull - create-a-single-page-wordpress-website
要创建滚动到不同部分的菜单结构，我发现本教程很有用 - create-a-single-page-wordpress-website
I hope this helps
我希望这有帮助
回答by Laxmana
As William Patton said this is a broad question but as far I can understand this may help :
正如威廉巴顿所说，这是一个广泛的问题，但据我所知，这可能会有所帮助：
http://www.designerledger.com/parallax-scrolling-tutorials/for the one page theme.
http://www.designerledger.com/parallax-scrolling-tutorials/为一页主题。
and a basic start for wordpress development theme :
以及 wordpress 开发主题的基本开始：
http://codex.wordpress.org/Theme_Development
http://codex.wordpress.org/Theme_Development
Update :I found this awesome plugin that helps you create full screen pages
更新：我发现了这个很棒的插件，可以帮助您创建全屏页面
https://github.com/alvarotrigo/fullPage.js
https://github.com/alvarotrigo/fullPage.js
EDIT 2016
编辑 2016
Due to the many up votes at user3263807 answerI made a small/basic one page guide for wordpress. For css/js there are plenty good tutorials and plugins over the internet. Also I assume you are familiar with WordPress Themes.
由于在user3263807 答案中获得了很多投票，我为 wordpress 制作了一个小型/基本的一页指南。对于 css/js，互联网上有很多很好的教程和插件。此外，我假设您熟悉WordPress 主题。
First of all you should create a template file for your one page. Let's call it template-one-page.php. The template name, commented inside the file, is the name that will appear in Page Attributes -> Template when you creating a page inside admin panel. After that create a page, ie Home, and assign as template your template. If you want your page to appear as front page (when you enter mydomain.com this page will be shown) go to Setting->Reading->Front page displays->A static page and set as front page your page.
首先，您应该为您的一个页面创建一个模板文件。让我们称之为template-one-page.php。在文件中注释的模板名称是在管理面板中创建页面时将出现在页面属性 -> 模板中的名称。之后创建一个页面，即主页，并将您的模板指定为模板。如果您希望您的页面显示为首页（当您进入 mydomain.com 时，将显示此页面）转到设置->阅读->首页显示->静态页面并将您的页面设置为首页。
// File Security Check
defined('ABSPATH') OR exit;
/*
Template Name: One Page
*/
?>
Normally a one page has sections. So we want to decide what type of sections we want. It could be pages, child pages, posts, custom fields (like a repeater from ACF) etc.
通常一页有部分。所以我们要决定我们想要什么类型的部分。它可以是页面、子页面、帖子、自定义字段（如来自ACF的转发器）等。
<?php
$id = get_the_ID(); // The page id
$sections = get_posts(array('post_type' => 'page', 'post_parent' => $id)); // get all child pages
foreach ($sections as $key => $section):
?>
<section id="page-<?php $section->ID; ?>" <?php post_class('', $section->ID); ?>>
<h1><?php echo get_the_title($section->ID); ?></h1>
</section>
<?php endforeach; ?>
Or with a Loop
或者用一个循环
<?php
$id = get_the_ID(); // The page id
$query = new WP_Query( array('post_type' => 'page', 'post_parent' => $id) ); // get all child pages
if($query->have_posts()):
while ( $query->have_posts() ) : $query->the_post();
?>
<section id="page-<?php the_ID() ?>" <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
</section>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
You can query what ever you want depending the need of your site.
您可以根据网站的需要查询任何您想要的内容。
回答by Krunal Shah
you should take look at below link:
你应该看看下面的链接：
[1] http://www.1stwebdesigner.com/css/responsive-website-tutorial/
[1] http://www.1stwebdesigner.com/css/responsive-website-tutorial/
[2] http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/
[2] http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/
[3] http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~okrhufNGLHp1mh(Best one to keep points in mind while creating )
[3] http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~okrhufNGLHp1mh（最好在创建时牢记要点）
Thanks.
谢谢。
回答by Natalia
Here is full detailed video tutorial that deals with setting a one-page scrolling Wordpress website from any theme you want. Need to join - there is a free trial. This allows you to "peek under the hood" and understand the principle of how the other one page themes and plugins were created.
这是完整详细的视频教程，涉及从您想要的任何主题设置一页滚动 Wordpress 网站。需要加入 - 有免费试用。这使您可以“深入了解”并了解其他页面主题和插件的创建原理。
http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html
http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html
I have looked into several ready-made themes, such as Onesie and OneEngine, and found them a nightmare to manage on the back end, very user unfriendly. The content of the long home page with several sections in both themes is managed not through the Pages section, like one would assume, but through a different admin section in the Appearance folder, with none of the usual Wordpress interface controls. The tutorial above deals with it properly, with the real Wordpress Pages assembled by a custom loop on the front page and menus working in the same way as built-in Wordpress menus.
我研究了几个现成的主题，例如 Onesie 和 OneEngine，发现它们是后端管理的噩梦，对用户非常不友好。包含两个主题中多个部分的长主页的内容不是通过“页面”部分进行管理，就像人们假设的那样，而是通过“外观”文件夹中的不同管理部分进行管理，没有任何常用的 Wordpress 界面控件。上面的教程正确地处理了它，真正的 Wordpress 页面由首页上的自定义循环组装，菜单的工作方式与内置的 Wordpress 菜单相同。
回答by BadJohnny
I used localscroll and scrollTo jquery plugin in my one page theme, it's working fine.
我在我的单页主题中使用了 localscroll 和 scrollTo jquery 插件，它工作正常。
The plugins link:http://flesler.blogspot.com
插件链接：http: //flesler.blogspot.com
After you imported the jquery and plugins files into your page, just call the function like below, then if you click a anchor link, the page will scroll up or down smoothly.
将 jquery 和 plugins 文件导入页面后，只需调用如下函数，然后单击锚链接，页面将平滑地向上或向下滚动。
$.localScroll({
target:'body',
duration:1000,
queue:true,
hash:true,
easing:'easeInOutExpo',
offset: {left: 0, top: -55}
});
