javascript - WordPress 缩略图网格扩展预览

Question

我在这里找到了这个很棒的教程:codrops

Demo

但我不知道如何让它在 WordPress 中工作!我是 Javascript 的初学者/中级，但我真的不知道如何将其插入 Wordpress。 Wordpress Codex 提到将脚本直接放入帖子中，因为它不会在站点范围内使用。有没有人成功地让它发挥作用？你能给我指导如何做吗？

Answer 1

这是您可以做到的一种方法。通过在functions.php文件中创建一个简短的代码，您可以包含您需要的js资源。请注意，对于此实现，您必须包含此行中定义的本地资源:element.src = '/wp-content/themes/custom_name_space/js/$src';

或者您可以使用某种插件来将自定义 js 添加到帖子中。

/** you will need to include this invocation in the source file. */
$(function() {
  Grid.init();
});

<?php add_shortcode( 'custom_name_space_addJs', function ( $atts ) {
/**
 * create a javascript shortcode
 * shortcode takes an id attribute and src attribute
 * leaving src attribute blank will generate a 404 Error Code
 */

extract( shortcode_atts( array(
'id'=>'js-custom_name_space-script', 'src' => 'no-script.js', ), $atts ) ); return "
<script id='js-add-script-element'>
  (function(w, doc) {
    'use strict';

    function downloadJSAtOnload() {
        var element = doc.createElement('script');
        element.id = '$id';
        element.src = '/wp-content/themes/custom_name_space/js/$src';
        doc.body.appendChild(element);
      }
      /* Check for browser support of event handling capability */
    if (w.addEventListener) {
      w.addEventListener('load', downloadJSAtOnload, false);
    } else if (w.attachEvent) {
      w.attachEvent('onload', downloadJSAtOnload);
    } else {
      w.onload = downloadJSAtOnload;
    }
  }(window, document));
</script>"; }); ?>



<!-- Then inside a wordpress post, write the needed HTML from the tutorial and use the short code -->

[custom_name_space_addJs id="thumb-grid" src="grid.js"]