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

&lt;?php
/*
TEMPLATE NAME:瀑布流测试
 */
//基于<a href="http://www.seaomc.com/archives/tag/wordpress" title="查看更多关于 WordPress 的文章" target="_blank">Wordpress</a>自带的 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(); ?&gt;
 
&lt;div id=&quot;main-content&quot; class=&quot;main-content&quot;&gt;
 
&lt;?php
    if ( is_front_page() &amp;&amp; twentyfourteen_has_featured_posts() ) {
        // Include the featured content template.
        get_template_part( 'featured-content' );
    }
?&gt;
    &lt;div id=&quot;primary&quot; class=&quot;content-area&quot;&gt;
        &lt;div id=&quot;content&quot; class=&quot;site-content&quot; role=&quot;main&quot;&gt;
 
            &lt;?php
                $args=array( 'post_type'=&gt;'post' );
                $myloop=new <a href="http://www.seaomc.com/archives/tag/wp" title="查看更多关于 WP 的文章" target="_blank">WP</a>_Query( $args );
                // Start the Loop.
                while ( $myloop-&gt;have_posts() ) :  $myloop-&gt;the_post();
 
                    // Include the page content template.
?&gt;
 
&lt;div class=&quot;item&quot;&gt;
&lt;?php
 if ( has_post_thumbnail() ) : ?&gt;
    &lt;div class=&quot;masonry-thumbnail&quot;&gt;
        &lt;a href=&quot;&lt;?php the_permalink() ?&gt;&quot; title=&quot;&lt;?php the_title(); ?&gt;&quot;&gt;
        &lt;?php the_post_thumbnail('thumbnail'); ?&gt;&lt;/a&gt;
    &lt;/div&gt;&lt;!--.masonry-thumbnail--&gt;
&lt;?php endif; ?&gt;
    &lt;div class=&quot;masonry-details&quot;&gt;
        &lt;h5&gt;&lt;a href=&quot;&lt;?php the_permalink(' ') ?&gt;&quot; title=&quot;&lt;?php the_title(); ?&gt;&quot;&gt;&lt;span class=&quot;masonry-post-title&quot;&gt; &lt;?php the_title(); ?&gt;&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;
       &lt;!--  &lt;div class=&quot;masonry-post-excerpt&quot;&gt;
           &lt;?php the_excerpt(); ?&gt;
       &lt;/div&gt; --&gt;&lt;!--.masonry-post-excerpt--&gt;
    &lt;/div&gt;&lt;!--/.masonry-entry-details --&gt;
&lt;/div&gt;&lt;!--/.item --&gt;
    &lt;?php endwhile; ?&gt;
        &lt;/div&gt;&lt;!-- #content --&gt;
    &lt;/div&gt;&lt;!-- #primary --&gt;
    &lt;?php //get_sidebar( 'content' ); ?&gt;
&lt;/div&gt;&lt;!-- #main-content --&gt;
 
&lt;?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，就可以套用到别的主题了。