WordPress縮略圖網格擴展預覽

Question

我在這里找到了這個很棒的教程： codrops

演示版

但我不知道如何在Wordpress中使用它！ 我是Java的初學者/中級，但是我真的不確定如何將其插入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"]