附加在WordPress

Question

使用jQuery我想在我的WordPress博客使用此代码选择元素之后的链接，但它不工作：

(function ($) { 
    $.fn.extend({ 
     raw: function (options) { 
     this.defaultOptions = { 
      className: 'raw-link', 
      eventBased: true 
     }; 
     var settings = $.extend({}, this.defaultOptions, options); 
     return this.each(function() { 
      var $this = $(this), 
      data = 'data:;base64,' + unescape(btoa($this.text())); 
      if (settings.eventBased) { 
      $link = $('<a href="#" class="' + settings.className + '">Raw</a>'); 
      $this.after($link); 
      $link.on('click', function (e) { 
       e.preventDefault(); 
       window.open(data); 
      }); 
      } else { 
      $this.after('<a href="' + data + '" target="_blank" class="' + 
          settings.className + '">Raw</a>'); 
      } 
     }); 
     } 
    }); 
    })(jQuery); 
    jQuery(document).ready(function() { 
    $('pre').raw(); 
    }); 

它所做的是追加pre所选元素后一个链接，点击时，将在新窗口中打开这样的pre的原始代码。

我试着通过将代码添加到我现有的JavaScript文件中header.php文件中，并通过创建一个新的JS文件，但仍然无法正常工作。

该代码是正确的，我在jsFiddle上进行了测试。只是不在WordPress的工作。

任何人都可以请帮我解决这个问题吗？

Answer 1

Wordpress通常在noConflict模式下加载jQuery，在这种情况下，通过shortHand $无法访问jQuery。

改变这一点：

jQuery(document).ready(function() { 
    $('pre').raw(); 
    }); 

到

jQuery(document).ready(function() { 
    jQuery('pre').raw(); 
    }); 

或

jQuery(document).ready(function ($) { 
    $('pre').raw(); 
    });