【子比小功能】绑定键盘按键显示隐藏内容【最终版】-知新网

这个功能怎么说呢，就是突发奇想然后拿着自己大学学习的JS知识就捣鼓了一下，至于为什么想弄这个，听我解释就知道了。

因为国内的环境，懂得都懂，版权是被大佬玩的明明白白，我想分享点资源，刚开始是没人会注意你的，但是资源分享多了，就总会有某逼会去官方跳脸，然后导致资源被封，搞不好也会连累自己。

我想要的功能就是隐藏网页资源的下载信息，通过触发键盘指定按键显示隐藏内容，以达到防采集和某生或某逼的搞事。

效果展示

隐藏效果

下载设置的是评论可见

电脑端设置方向键上上下下左右左右解锁隐藏内容

移动端设置的点击页面任意地方三次显示隐藏内容

解锁之后

经典编辑器的隐藏DIV框的class属性和古腾堡编辑器的隐藏DIV框的class属性，加上我本人现在不喜欢去后台些文章，所以该代码只对经典编辑器写的文章有用。

如果你要修改，可参考代码进行修改。

至于要不要使用就看个人，我只是想防住没技术的采集和那种猴急搞事的。

教程

思路

在WordPress编辑器中添加隐藏内容：可以在WordPress编辑器中添加隐藏内容，并使用CSS样式将其隐藏。例如：

<div class="hidden-content" style="display: none;">
  这里是隐藏内容
</div>

在WordPress主题中添加JavaScript代码：可以在WordPress主题的JavaScript文件中添加以下代码：

jQuery(document).ready(function($) {
  $(document).keydown(function(e) {
    if (e.key === 'h') { // 将“h”替换为需要绑定的按键
      $('.hidden-content').toggle();
    }
  });
});

子比代码

CSS代码：

.hidden-box{  display: none;}

JS代码【单个按键】：

jQuery(document).ready(function($) {
  $(document).keydown(function(e) {
    if (e.key === 'h') { // 将“h”替换为需要绑定的按键
      $('.hidden-box').toggle();
    }
  });
});

JS代码【多个按键】：

var keys = ['a', 'b', 'c']; // 定义需要绑定的按键数组
var index = 0; // 定义当前按键索引
jQuery(document).ready(function($) {
  $(document).keydown(function(e) {
    if (e.key === keys[index]) { // 判断按键是否匹配
      index++; // 更新当前按键索引
      if (index === keys.length) { // 判断是否匹配完成
        $('.hidden-box').toggle();
        index = 0; // 重置当前按键索引
      }
    } else {
      index = 0; // 重置当前按键索引
    }
  });
});

后台添加即可：

6月17日更新

由于对移动端不友好所以增加一个达到点击次数显示隐藏内容

var click_count = 0;
var max_click = 8; //连续点击次数
document.addEventListener("click", function(){
click_count++;
if(click_count < max_click) {
console.log("点击了 " + click_count + " 次");
}
if(click_count == max_click) {
$('.muted-box').toggle();
console.log("点击了 " + click_count + " 次, 显示隐藏内容");
}
});

.muted-box是附件DIV的Class元素，如果想隐藏其它div，自行F12查找该DIV的class元素。

最终版

CSS：

.tinymce-hide{
  display: none;
}
.tips{
  display: block;
}
.file-download-box{
  display: none;
}

JS：

此处内容已隐藏，请评论后刷新页面查看.

该教程来自子比主题社区用户小怪兽

文章版权归作者所有，未经允许请勿转载。

THE END

子比主题网站/配置/代码