我在哪里可以找到一个学习创建响应式单页 WordPress 主题的资源，所以当我单击菜单项时，它会向下滚动。
问问题
24126 次
5 回答
32
我有完全相同的问题，在四处搜索后发现了这篇文章。
看到对这个问题的回答，我相当震惊。在我看来，人们在没有正确阅读问题的情况下会很快回答问题。
所有贡献者都为响应式和视差滚动网站提供了解决方案，但没有人回答真正的问题。
它不是太宽泛，也不是模糊的。他所问的只是你如何在 WORDPRESS 中创建单页主题……没有人就如何实现这一点给出任何指导。
不知道为什么这些答案被评为有用。
因此，经过反复试验，我发现以下内容可以回答有关如何创建单页 WORDPRESS 主题的问题。
要理解的主要方面之一是Wordpress 查询发布功能，它允许您将多个页面内容（例如主页、关于、服务和内容）发布到单个页面上。
要创建菜单结构以滚动到不同的部分，我发现本教程很有用 - create-a-single-page-wordpress-website
我希望这有帮助
于 2014-02-05T08:15:14.610 回答
5
正如威廉巴顿所说，这是一个广泛的问题，但据我所知，这可能会有所帮助：
http://www.designerledger.com/parallax-scrolling-tutorials/用于单页主题。
和 wordpress 开发主题的基本开始：
http://codex.wordpress.org/Theme_Development
更新：我发现这个很棒的插件可以帮助你创建全屏页面
https://github.com/alvarotrigo/fullPage.js
编辑 2016
由于user3263807 回答中的许多赞成票，我为 wordpress 制作了一个小型/基本的一页指南。对于 css/js，互联网上有很多很好的教程和插件。另外，我假设您熟悉WordPress 主题。
首先，您应该为您的一页创建一个模板文件。让我们称之为template-one-page.php。在文件中注释的模板名称是当您在管理面板中创建页面时将出现在页面属性-> 模板中的名称。之后创建一个页面，即主页，并将您的模板指定为模板。如果您希望您的页面显示为首页（当您输入 mydomain.com 时，将显示此页面）转到设置->阅读->首页显示->静态页面并将您的页面设置为首页。
// File Security Check
defined('ABSPATH') OR exit;
/*
Template Name: One Page
*/
?>
通常一页有部分。所以我们想决定我们想要什么类型的部分。它可以是页面、子页面、帖子、自定义字段（如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; ?>
或使用循环
<?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; ?>
您可以根据网站的需要查询您想要的任何内容。
于 2013-10-16T13:56:23.390 回答
1
你应该看看下面的链接：
[1] http://www.1stwebdesigner.com/css/responsive-website-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（创建时要牢记的最佳方法）
谢谢。
于 2013-10-16T13:49:07.673 回答
1
这是完整详细的视频教程，涉及从您想要的任何主题设置一页滚动 Wordpress 网站。需要加入 - 有免费试用。这使您可以“窥探”并了解如何创建另一页主题和插件的原理。
http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html
我研究了几个现成的主题，例如 Onesie 和 OneEngine，发现它们是后端管理的噩梦，对用户非常不友好。在两个主题中包含多个部分的长主页的内容不是像人们假设的那样通过“页面”部分进行管理，而是通过“外观”文件夹中的不同管理部分进行管理，没有任何常用的 Wordpress 界面控件。上面的教程正确地处理了它，真正的 Wordpress 页面由首页上的自定义循环组装，菜单的工作方式与内置的 Wordpress 菜单相同。
于 2014-12-04T22:32:32.633 回答
0
我在一页主题中使用了 localscroll 和 scrollTo jquery 插件，它工作正常。
插件链接： http: //flesler.blogspot.com
将 jquery 和 plugins 文件导入页面后，只需调用如下函数，然后单击锚链接，页面将平滑向上或向下滚动。
$.localScroll({
target:'body',
duration:1000,
queue:true,
hash:true,
easing:'easeInOutExpo',
offset: {left: 0, top: -55}
});
于 2015-07-05T20:33:37.300 回答