Question

在哪里可以找到学习创建响应式单页WordPress主题的来源，以便当我点击菜单项时向下滚动。

以下是我想要http://thememints.com/templates/?theme=Cingle%20WP的例子。

Answer 1

我有完全相同的问题，在搜索后找到了这篇文章。

看到对这个问题的回答，我感到非常震惊。在我看来，如果没有正确阅读问题，人们很快就能回答问题。

所有贡献者都为响应式和视差滚动网站提供了解决方案，但没有一个人回答了真正的问题。

它不是太广泛，也不含糊。所有他要问的是你如何在WORDPRESS中创建单页主题......没有人就如何实现这一点给出任何指示。

不确定为什么这些答案被评为有用。

因此，在经过反复试验后，我发现以下内容可以回答关于如何创建单页WORDPRESS主题的问题。

要理解的一个主要方面是Wordpress query-post function，它允许您将多个页面内容（如家庭，关于，服务和内容）发布到单个页面上。

要创建菜单结构以滚动到不同的部分，我发现本教程非常有用 - create-a-single-page-wordpress-website

我希望这会有所帮助

Answer 2

正如William Patton所说，这是一个广泛的问题，但据我所知，这可能有所帮助：

http://www.designerledger.com/parallax-scrolling-tutorials/用于单页主题。

是wordpress开发主题的基本开端：

http://codex.wordpress.org/Theme_Development

更新：我找到了这个可以帮助您创建全屏页面的精彩插件

https://github.com/alvarotrigo/fullPage.js

2016年编辑

由于在user3263807 answer投票很多，我为wordpress制作了一个小/基本单页指南。对于css / js，互联网上有很多很好的教程和插件。我还假设你熟悉WordPress Themes。

首先，您应该为您的一个页面创建一个模板文件。我们称之为template-one-page.php。在文件内部注释的模板名称是将出现在页面属性中的名称 - ＆gt;在管理面板中创建页面时的模板。之后创建一个页面，即Home，并将模板指定为模板。如果您希望页面显示为首页（当您输入mydomain.com时，将显示此页面），请转到设置 - ＆gt;阅读 - ＆gt;首页显示 - ＆gt;静态页面并将其设置为首页。

// 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; ?>

或使用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; ?>

您可以根据网站的需要查询您想要的内容。

Answer 3

你应该看看下面的链接：

[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（创建时记住要点的最佳方法）

感谢。

Answer 4

以下是完整的详细视频教程，介绍如何从任何您想要的主题设置单页滚动Wordpress网站。需要加入 - 有一个免费试用版。这让你可以在引擎盖下窥视＃34;并了解如何创建其他页面主题和插件的原理。

http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html

我已经研究了几个现成的主题，比如Onesie和OneEngine，发现它们是后端管理的噩梦，非常不友好。在两个主题中包含多个部分的长主页的内容不是通过“页面”部分来管理，就像人们假设的那样，而是通过Appearance文件夹中的不同管理部分来管理，没有通常的Wordpress界面控件。上面的教程正确处理它，真正的Wordpress页面由首页上的自定义循环组装而菜单的工作方式与内置的Wordpress菜单相同。

Answer 5

我在one page theme中使用了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}
       });

如何创建具有可滚动效果的响应一页WordPress主题？

5 个答案: