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