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

Question

我在哪里可以找到学习创建响应式单页WordPress主题的副本,所以当我点击菜单项时,它向下滚动.

这是我想要的一个例子http://thememints.com/templates/?theme=Cingle%20WP.

Answer 1

我有完全相同的问题,搜索后发现这篇文章.

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

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

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

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

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

要理解的一个主要方面是Wordpress查询 - 发布功能,它允许您将多个页面内容(如家庭,关于,服务和内容)发布到单个页面上.

要创建菜单结构以滚动到不同的部分,我发现本教程很有用 - 创建一个单页的wordpress-网站

我希望这有帮助

Answer 2

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.

and a basic start for wordpress development theme :

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

EDIT 2016

Due to the many up votes at user3263807 answer I 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.

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.

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

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