扫描二维码在手机上浏览

WordPress不用插件,用代码方式给编辑器增加功能按钮

广告位,电脑和手机可分别设置,可放任何广告代码
对了,我应该放什么广告呢?
之前我介绍过AddQuickTag插件可以在编辑器中,添加提前预设好的样式按钮,这次分享一个不通过插件,仅仅用几句代码就能实现相同功能的方法

觉得代码比较复杂的,或者不明白的可以看看这篇文章:AddQuickTag插件

-教程超简单,一步搞定
方法很简单,找到主题文件的function.php文件,在最下面添加以下代码:
function qinver_add_quicktags() {
?>
<script type="text/javascript">
if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'gaoliangdaima', '高亮代码', '<pre><code>', '</pre></code>' ); //添加分隔线
QTags.addButton( 'anniuzu', '按钮组', '<div><div style="padding: 0.4em 1em;border: 1px solid #f53334;border-radius: 100px;text-decoration: none;display: inline-block;min-width: 80px;margin: 1em;text-align: center;transition: all 0.3s ease;"><a style="text-decoration: none;color: #eb2d40;" href="#">空心按钮1</a></div><div style="padding: 0.4em 1em;border: 1px solid #1f9cd9;border-radius: 100px;text-decoration: none;display: inline-block;min-width: 80px;margin: 1em;text-align: center;transition: all 0.3s ease;"><a style="text-decoration: none;color: #0c99d4;" href="#">空心按钮2</a></div><div style="padding: 0.4em 1em;border: 1px solid #18bd4e;border-radius: 100px;text-decoration: none;display: inline-block;min-width: 80px;margin: 1em;text-align: center;transition: all 0.3s ease;"><a style="text-decoration: none;color: #12a542;" href="#">空心按钮3</a></div><div style="padding: 0.4em 1em;border: 1px solid #f77000;border-radius: 100px;text-decoration: none;display: inline-block;min-width: 80px;margin: 1em;text-align: center;transition: all 0.3s ease;"><a style="text-decoration: none;color: #f77000;" href="#">空心按钮4</a></div><div style="padding: 0.4em 1em;border: 1px solid #3342f5;border-radius: 100px;text-decoration: none;display: inline-block;min-width: 80px;margin: 1em;text-align: center;transition: all 0.3s ease;"><a style="text-decoration: none;color: #3036f9;" href="#">空心按钮5</a></div></div>', '' ); //添加分隔线
QTags.addButton( 'lansebiant', '蓝色标题', '<div style="padding: .6em 1em;background: #f3f8fb;margin: 10px 0;border-left: 4px solid #00a5e6;"><strong style="font-size: 1.3em;letter-spacing: 6px;color: #07a6e8;">-', '</strong></div>' ); //添加分隔线
QTags.addButton( 'huisebiaot', '灰色标题', '<div style="padding: .6em 1em;background: #f5f5f5;margin: 10px 0;border-left: 4px solid #757575"><strong style=" font-size: 1.3em; letter-spacing: 6px; ">-', '</strong></div>' ); //添加分隔线
QTags.addButton( 'huisek', '灰色框', '<div style="background: #f5f5f5;padding: .6em 1em;margin: 10px 0;border: 1px solid #d4d4d4;color: #757575;">标题', '</div>' ); //添加分隔线
QTags.addButton( 'hongsek', '红色框', '<div style="background: #fff7f7;padding: .6em 1em;margin: 10px 0;border: 1px solid #f1d3d3;border-radius: 4px;color: #dc3f3f;">', '</div>' ); //添加分隔线
QTags.addButton( 'lvsek', '绿色框', '<div style="background: #f7fff9;padding: .6em 1em;margin: 10px 0;border: 1px solid #b4e6b1;border-radius: 4px;color: #1d9c24;">', '</div>' ); //添加分隔线
QTags.addButton( 'lansek', '蓝色框', '<div style="background: #f7fcff;padding: .6em 1em;margin: 10px 0;border: 1px solid #b3daf1;border-radius: 4px;color: #197cb1;">', '</div>' ); //添加分隔线
QTags.addButton( 'zhongdiant', '重点文字', '<span style=" background: #ffd9d9; padding: 2px; border: .7px solid #d87474; ">', '</span>' ); //添加分隔线
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'qinver_add_quicktags' );

保存,刷新一下就可以看到效果了!

以上代码将会添加以下效果的快捷按钮
-标题1
-标题2
灰色框
红色框
禄色框
蓝色框

重点文字

此功能已经集成到我修改优化的DUX主题中了,
点此查看:DUXQ精品优化主题
广告位,电脑和手机可分别设置,可放任何广告代码
赞 9 打赏
分享海报
版权声明
分享是一种美德,转载请注明地址
文章地址:倾微博客 » WordPress不用插件,用代码方式给编辑器增加功能按钮
广告位,电脑和手机可分别设置,可放任何广告代码

评论 抢沙发

  • *
  • *
图片正在生成中,请稍后...

周三

11/20

WordPress不用插件,用代码方式给编辑器增加功能按钮

之前我介绍过AddQuickTag插件可以在编辑器中,添加提前预设好的样式按钮,这次分享一个不通过插件,仅仅用几句代码就能实现相同功能的方法 觉得代码比较复杂的,或者不明白的可以看看这篇文章:AddQuickTag插件 -教程超简单,一步搞定 方法很简单,找到主题文件的function.php文件,在最下面添加以下代码: function qinver_add_quicktags() { ?>

还不错吧!打赏支持一下呗

支付宝扫一扫打赏

微信扫一扫打赏

登录

记住我

注册