如何在wordpress网站添加瀑布流单页模板

<?php

/*

TEMPLATE NAME:瀑布流测试

 */

//基于Wordpress自带的2014主题

//贡献者：Suifengtec  suoling.net

if (! function_exists('coolwp_scripts_masonry') ) :

if ( ! is_admin() ) :

function coolwp_scripts_masonry() {

    //deregister built in masonry since it is old version 3.

   wp_deregister_script('jquery-masonry')

   //请自行下载

    wp_enqueue_script('jquery-10.1.js', get_template_directory_uri().'/test/jquery.js', array( 'imagesLoaded'), null, true )

       //请自行下载

    wp_enqueue_script('imagesLoaded', get_template_directory_uri().'/test/imagesloaded.pkgd.min.js', false, null, true)

       //请自行下载

    wp_enqueue_script('jquery-masonry', get_template_directory_uri().'/test/masonry.pkgd.min.js', array( 'imagesLoaded'), null, true )

       //后面我贴出来

    wp_enqueue_script('custom.js', get_template_directory_uri().'/test/custom.js', array( 'imagesLoaded'), null, true )

}

//wp_enquqe_style('masonry', get_template_directory_uri().'/test/')

add_action( 'wp_enqueue_scripts', 'coolwp_scripts_masonry' )

endif //! is_admin()

endif //! coolwp_scripts_masonry exists?

get_header() ?>

<div id="main-content" class="main-content">

<?php

if ( is_front_page() && twentyfourteen_has_featured_posts() ) {

// Include the featured content template.

get_template_part( 'featured-content' )

}

?>

<div id="primary" class="content-area">

<div id="content" class="site-content" role="main">

<?php

$args=array( 'post_type'=>'post' )

$myloop=new WP_Query( $args )

// Start the Loop.

while ( $myloop->have_posts() ) :  $myloop->the_post()

// Include the page content template.

?>

<div class="item">

<?php

 if ( has_post_thumbnail() ) : ?>

    <div class="masonry-thumbnail">

        <a href="<?php the_permalink() ?>" title="<?php the_title() ?>">

        <?php the_post_thumbnail('thumbnail') ?></a>

    </div><!--.masonry-thumbnail-->

<?php endif ?>

    <div class="masonry-details">

        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title() ?>"><span class="masonry-post-title"> <?php the_title() ?></span></a></h5>

       <!--  <div class="masonry-post-excerpt">

           <?php the_excerpt() ?>

       </div> --><!--.masonry-post-excerpt-->

    </div><!--/.masonry-entry-details -->

</div><!--/.item -->

<?php endwhile ?>

</div><!-- #content -->

</div><!-- #primary -->

<?php //get_sidebar( 'content' ) ?>

</div><!-- #main-content -->

<?php

get_sidebar()

get_footer()

custom.js代码：

var container = document.querySelector('#content')

var msnry = new Masonry( container, {

  columnWidth: 200,

  itemSelector: '.item'

})

/*alert('aaaaa')*/

将你下载到的三个js文件和上面的custom.js放在你的WP的2014主题目录下的test文件夹（自己建），然后将上面的PHP代码复制到一个英文开头的PHP文件里，把这个PHP文件放在WP的2014主题目录下，

启用这个主题，发布页面，选用“瀑布流测试”页面模板，如果你的测试WP中有文章，并且文章有缩略图，就会是这个样子：

只需要你改下查询语句和css，就可以套用到别的主题了。

可以改的，具体你可以参考我在这个问题的回复。

http://zhidao.baidu.com/question/1429827713838131139.html?oldq=1

在对应的hooks上，针对ID或者其他什么可以用来判断的条件，进行不同模板的筛选就行。

---