<?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(); ?> <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 <a href="http://www.seaomc.com/archives/tag/wp" title="查看更多关于WP的文章" target="_blank">WP</a>_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,就可以套用到别的主题了。