• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.

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

WordPress 奇跡の海 2个月前 (12-14) 9次浏览 0个评论 扫描二维码
<?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 WP_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中有文章,并且文章有缩略图,就会是这个样子:
如何在wordpress网站添加瀑布流单页模板
只需要你改下查询语句和css,就可以套用到别的主题了。


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->如何在wordpress网站添加瀑布流单页模板!在下边可以分享本文哦!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址