如何控制WordPress中部分<pre>元素显示复制按钮？

元素显示复制按钮的方法 #

方案一：排除不需要复制按钮的代码块 #

1. 编辑文章时，给不需要显示复制按钮的<pre>标签添加no-copy类，示例：

<pre class="no-copy">
// 这段代码不需要复制按钮
console.log("Hello World");
</pre>

2. 修改jQuery脚本，将原选择器$('pre')替换为$('pre:not(.no-copy)')，让脚本跳过带no-copy类的代码块。修改后的完整脚本如下：

$(document).ready(function($) {
  var copyid = 0;

  // 只处理不带no-copy类的pre元素
  $('pre:not(.no-copy)').each(function() {
    copyid++;
    $(this).attr('data-copyid', copyid).wrap('<div class="pre-wrapper"/>');
    $(this).parent().css('margin', $(this).css('margin'));
    $('<button class="copy-snippet">Copy</button>').insertAfter($(this)).data('copytarget', copyid);
  });

  $('body').on('click', '.copy-snippet', function(ev) {
    ev.preventDefault();

    var $copyButton = $(this);

    $pre = $(document).find('pre[data-copyid=' + $copyButton.data('copytarget') + ']');
    if ($pre.length) {
      var textArea = document.createElement("textarea");

      // 固定在屏幕左上角，不受滚动影响
      textArea.style.position = 'fixed';
      textArea.style.top = 0;
      textArea.style.left = 0;

      // 设置小尺寸避免闪现
      textArea.style.width = '2em';
      textArea.style.height = '2em';

      // 清除样式
      textArea.style.padding = 0;
      textArea.style.border = 'none';
      textArea.style.outline = 'none';
      textArea.style.boxShadow = 'none';
      textArea.style.background = 'transparent';

      // 填充要复制的内容
      textArea.value = $pre.text();

      document.body.appendChild(textArea);
      textArea.select();

      try {
        document.execCommand('copy');
        $copyButton.text('Copied').prop('disabled', true);
      } catch (err) {
        $copyButton.text('FAILED: Could not copy').prop('disabled', true);
      }
      setTimeout(function() {
        $copyButton.text('Copy').prop('disabled', false);
      }, 3000);
    }
  });
});

方案二：只给需要复制按钮的代码块添加功能 #

1. 给需要显示复制按钮的<pre>标签添加has-copy类，示例：

<pre class="has-copy">
// 这段代码需要复制按钮
console.log("Hello World");
</pre>

2. 修改脚本选择器为$('pre.has-copy')，仅处理带该类的代码块。修改后的完整脚本如下：

$(document).ready(function($) {
  var copyid = 0;

  // 只处理带有has-copy类的pre元素
  $('pre.has-copy').each(function() {
    copyid++;
    $(this).attr('data-copyid', copyid).wrap('<div class="pre-wrapper"/>');
    $(this).parent().css('margin', $(this).css('margin'));
    $('<button class="copy-snippet">Copy</button>').insertAfter($(this)).data('copytarget', copyid);
  });

  $('body').on('click', '.copy-snippet', function(ev) {
    ev.preventDefault();

    var $copyButton = $(this);

    $pre = $(document).find('pre[data-copyid=' + $copyButton.data('copytarget') + ']');
    if ($pre.length) {
      var textArea = document.createElement("textarea");

      // 固定在屏幕左上角，不受滚动影响
      textArea.style.position = 'fixed';
      textArea.style.top = 0;
      textArea.style.left = 0;

      // 设置小尺寸避免闪现
      textArea.style.width = '2em';
      textArea.style.height = '2em';

      // 清除样式
      textArea.style.padding = 0;
      textArea.style.border = 'none';
      textArea.style.outline = 'none';
      textArea.style.boxShadow = 'none';
      textArea.style.background = 'transparent';

      // 填充要复制的内容
      textArea.value = $pre.text();

      document.body.appendChild(textArea);
      textArea.select();

      try {
        document.execCommand('copy');
        $copyButton.text('Copied').prop('disabled', true);
      } catch (err) {
        $copyButton.text('FAILED: Could not copy').prop('disabled', true);
      }
      setTimeout(function() {
        $copyButton.text('Copy').prop('disabled', false);
      }, 3000);
    }
  });
});

说明 #

两种方案核心都是通过CSS类筛选控制脚本处理的目标元素，复制功能逻辑完全保留。如果大部分代码块需要复制按钮，选方案一（排除少数不需要的）；如果只有少数需要，选方案二（只处理需要的）。

内容的提问来源于stack exchange，提问作者user19519558