Question

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

但我无法弄清楚如何让它在Wordpress中运行！我是Javascript的初学者/中级人员，但我真的不确定如何将其插入Wordpress。 Wordpress Codex提到将脚本直接放入帖子中，因为它不能在站点范围内使用。有没有人成功地让这个工作？你能告诉我如何做的指示吗？

Answer 1

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

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

＆＃13;

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

＆＃13;

<?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"]

＆＃13;

Wordpress缩略图网格扩展预览

1 个答案: