一个比较炫的js实现的效果插入WordPress

静态效果如下

可以随着鼠标在背景的移动产生一系列的“多线体”:


操作

  1. wordpress是通过主题显示页面的,就导致我们不能“直接”通过类似修改index.php的方式增加script标签,在理解主题创建方式后,总结如下操作以wordpress 4.5.3 2016主题为例
  2. 下载js文件备用链接一,链接二
  3. 将canvas-nest.min.js加入到你的网站目录下的~/wp-content/themes/twentysixteen/js文件夹中
  4. 修改~/wp-content/themes/twentysixteen/functions.php文件:找到 function twentysixteen_scripts()函数里面增加如下代码
    if ( is_home() ) {
        wp_enqueue_script( 'canvas-nest', get_template_directory_uri() . '/js/canvas-nest.min.js', array(), '20160816', true );
    }
    
    说明一下:
    • is_home()表示只在首页增加这个js,不然每个页面都有,人会疯掉的;
    • wp_enqueue_script大致是注册js并把js放入队列;
    • 配合add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' )把该js加入前端
  5. 修改css,背景纯白色会把效果遮挡。css文件位于~/wp-content/themes/twentysixteen/style.css。把背景色改为透明
    .site {
    background-color: rgba(255, 255, 255, 0);
    }
    
  6. 重新进入主页看看
  7. 不建议弄太多这个js,还是比较占用资源的。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.