wordpress运行代码功能非插件完美版

2021-05-22 0 1,106 百度已收录

运行代码功效估量需要的人不多,然则博客写前端代码的人应该就需要,由于能够预览代码这样子体验异常好。网上针对WordPress 运行代码的插件和非插件版的方式都已经由时了,最主要的问题照样加入运行框中的代码会自动插入换行符,这直接导致了代码无法运行。网上有许多这样子的例子。然则基本上都是错误的,横竖我没要找到准确的,主要缘故原由就是wordpress会自动添加分段标签p,br等等,导致代码不能够预览,信托人人都对这个wordpress自念头制感应很绝望,下面我们来看看怎么来做,下面这个方式完善解决的这些问题。

一、首先准备JS代码:

JS函数控制运行代码按钮和全选按钮。

  1. //JS代码
    
  2. function runCode(objid) {
    
  3. 	var winname = window.open('', "_blank", '');
    
  4. 	var obj = document.getElementById(objid);
    
  5. 	winname.document.open('text/html', 'replace');
    
  6. 	winname.opener = null; 
    
  7. 	winname.document.write(obj.value);
    
  8. 	winname.document.close();
    
  9. }
    
  10. function selectCode(objid){
    
  11.     var obj = document.getElementById(objid);
    
  12.     obj.select();
    
  13. }

二、functions代码:

网上的大多数设施,都没法逃避wordpress的自动过滤机制,若是代码预览中js存在html标签,那么运行代码将失效,经由我多次研究,写了一个自动替换的短代码方案,这个着实后期举行匹配过滤的,完全可以所见所得。

  1. $RunCode = new RunCode();
  2. add_filter('the_content', array(&$RunCode, 'part_one'), -500);
  3. add_filter('the_content', array(&$RunCode, 'part_two'),  500);
  4. unset($RunCode);
  5. class RunCode
  6. {
  7.     var $blocks = array();
  8.     function part_one($content)
  9.     {
  10.         $str_pattern = "/(\<runcode(.*?)\>(.*?)\<\/runcode\>)/is";
  11.         if (preg_match_all($str_pattern, $content, $matches)) {
  12.             for ($i = 0; $i < count($matches[0]); $i++) {
  13.                 $code = htmlspecialchars($matches[3][$i]);
  14.                 $code = preg_replace("/(\s*?\r?\n\s*?)+/", "\n", $code);
  15.                 $num = rand(1000,9999);
  16.                 $id = "runcode_$num";
  17.                 $blockID = "<p>++RUNCODE_BLOCK_$num++";
  18.                 $innertext='<h3>代码预览</h3><textarea id="'.$id.'" class="runcode">'. $code . '</textarea><input type="button" value="运行代码" onclick="runCode(\''.$id.'\')"/><input style="margin-left: 47px;"type="button" value="全选代码" onclick="selectCode(\''.$id.'\')"/>';
  19.                 $this->blocks[$blockID] = $innertext;
  20.                 $content = str_replace($matches[0][$i], $blockID, $content);
  21.             }
  22.         }
  23.         return $content;
  24.     }
  25.     function part_two($content)
  26.     {
  27.         if (count($this->blocks)) {
  28.             $content = str_replace(array_keys($this->blocks), array_values($this->blocks), $content);
  29.             $this->blocks = array();
  30.         }
  31.         return $content;
  32.     }
  33. }

参考CSS:

  1. .runcode{
  2. width: 100%;
  3. font-size:13px;
  4. padding:10px 15px;
  5. color:#eee;
  6. background-color: #263540;
  7. margin-bottom:5px;
  8. border-radius:2px;
  9. overflow:hidden
  10. }

运行方式

在撰写文章时切换到html模式,输入以下标签即可:

  1. <runcode>//这里贴要运行的代码</runcode>

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 wordpress运行代码功能非插件完美版 https://zhutizhen.com/14398.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章