WordPress缩略图网格展开预览

Wordpress thumbnail grid expanding preview

本文关键字：网格 略图 WordPress      更新时间：2023-09-26

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

演示

但是我不知道如何让它在 Wordpress 中工作！我是Javascript的初学者/中级，但我真的不确定如何将其插入Wordpress。Wordpress Codex提到将脚本直接放入帖子中，因为它不会在整个站点范围内使用。有没有人成功地让这个工作？你能给我说明怎么做吗？

这是您可以做到的一种方法。通过在函数.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"]

相关文章：