为wordpress文章编辑器添加自定义代码按钮

2020年04月15日15:58:08 发表评论 热度560 ℃

 

在编辑文章时,我们可能需要经常重复插入一段格式化的内容,如果是用短代码的进行输入的话将极大地方便我们的编辑效率,所以为HTML编辑器的工具栏里加上各种各样的快捷标签就显得很有必要。

为wordpress文章编辑器添加自定义代码按钮

目前此方法只能在文本模式,也就是html模式下使用。

以下代码在wordpress 4.6.1亲测可以实现:

打开您的主题文件下的functions.php文件,添加以下代码(请注意备份文件,以免误操作导致网站无法正常显示。

  1. // 添加HTML按钮
  2. function appthemes_add_quicktags() {
  3. ?>
  4. <script type="text/javascript">
  5. QTags.addButton( '按钮名字1', '按钮名字1', '代码', '/代码' );
  6. QTags.addButton('按钮名字2', '按钮名字2', '代码2', '/代码2');
  7. </script>
  8. <?php
  9. }
  10. add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

以下是本站在用的几个编辑工具

此部分为我站的编辑工具,喜欢可以自行添加,方法同上

  1. // 添加HTML按钮
  2. function appthemes_add_quicktags() {
  3. ?>
  4. <script type="text/javascript">
  5. QTags.addButton( '大标题', '大标题', '<h2 style="font-family:&quot;color:#55595C;font-size:1rem;background-color:#FFFFFF;">', '</h2>' );
  6. QTags.addButton( '小标题', '小标题', '<h5 style="font-family:&quot;color:#55595C;font-size:1rem;background-color:#FFFFFF;">', '</h5>' );
  7. QTags.addButton( '按钮', '按钮', '<a class="btn btn-default" href="http://修改URL">', '</a>' );
  8. QTags.addButton( '说明框', '说明框', '<div class="article-desc">', '</div>' );
  9. QTags.addButton( '标记框', '标记框', '<div class="commentform-text">', '</div>' );
  10. QTags.addButton( '题块', '题块', '<div class="post-theme-module">', '</div>' );
  11. QTags.addButton( '加粗', '加粗', '<strong>', '</strong>' );
  12. QTags.addButton( '代码', '代码', '<pre class="prettyprint lang-js">', '</pre>' );
  13. QTags.addButton( 'p', 'p', '<p>', '</p>' );
  14. QTags.addButton( 'hr', 'hr', '<hr>', '' );
  15. </script>
  16. <?php
  17. }
  18. add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

修改完成后再修改一下对应主题下的CSS文件进行美化。

以下为网络上搜集的样式

  1. .article-desc{background-color:#FAFAFA;padding:15px 30px;font-size:14px;margin-left:-30px;margin-right:-30px;color:#999;margin-bottom:30px}
  2. .post-theme-module{margin-bottom:30px;border-top:4px solid #F2F2F4;border-bottom:4px solid #F2F2F4;padding:30px 0 30px 230px}.post-theme-module .thumb{float:left;margin-left:-230px;width:100%}.post-theme-module h3{font-weight:bold;font-size:16px;margin:0 0 7.5px}.post-theme-module h4{font-size:14px;line-height:1.4;margin:0 0 15px;color:#999}.post-theme-module .btn{margin-right:7.5px}@media (max-width: 544px){.post-theme-module{padding-left:0;text-align:left}.post-theme-module .thumb{float:none;margin-left:0;width:auto;display:block;margin-bottom:7.5px}.post-theme-module .btn{margin-right:0}.post-theme-module .btn-default{display:none}}
  3. .article-desc{margin-left:-15px;margin-right:-15px;padding:15px;line-height:1.4;color:#999}}
  4. .commentform-text{color:#999;line-height:35px;font-size:12px;background-color:#F2F2F2;border-radius:2px;padding:0 15px;display:inline-block}.commentform-text p{margin:0}

本文最后更新于:2021-04-11 16:20
瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: