将CSS动画作为预加载器添加到WordPress

时间:2015-12-14 作者:Snazzy Sanoj

我在上找到了一个CSS动画片段Codepen, 并且想在我的WordPress站点中添加它来预加载动画,但我找不到任何相关的帮助或插件,允许我添加带有自定义CSS动画的预加载程序。

我试着用谷歌搜索,但我所能找到的只是接受“GIF动画”的插件。但是,我想使用“CSS动画”而不是“GIF动画”。

有什么建议吗?

P、 我对WordPress只有一点了解。

1 个回复
最合适的回答,由SO网友:jgraup 整理而成

您可以通过在主体上设置一个类并在加载页面时使用JS将其删除来实现这一点。这只是一个基本的例子,但它会开箱即用。

 // Add specific CSS class by filter
add_filter( \'body_class\', \'my_class_names\' );
function my_class_names( $classes ) {
    // add \'class-name\' to the $classes array
    $classes[] = \'preloader-visible\';
    // return the $classes array
    return $classes;
}

// Add preloader style
add_action(\'wp_head\', function(){ ?>
  <style>
    /** let\'s every child  of body know there is a loader visible */
    body.preloader-visible {
      background:red;
    }

    /** by default loader is hidden */
    body > .loader {
       display:none;
    }

    /** when loader is active the loader will show */
    body.preloader-visible > .loader {
       display:block;
    }
  </style>
  <?php
});

// Remove preloader when document is ready
add_action(\'wp_footer\', function(){ ?>
  <script>
    (function($){

      $(function () {

          $(\'body\').removeClass(\'preloader-visible\');

      });

    })(jQuery);
  </script>
  <?php
});

相关推荐

如何将.css文件应用于虚拟页面?

如果使用以下插件在保持主题完整的情况下创建虚拟页面wp-virtual-page-tutorial, 怎么可能。css文件是否应用于此虚拟页面?如何使用将虚拟页名称用作条件的if语句来实现这一点?任何帮助都将不胜感激。以下是创建虚拟页面的代码:Class VPTutorial { function __construct() { register_activation_hook( __FILE__, array( $this, \'activate\' ) );&#