教你WordPress后台编辑器增加按钮与文本框

小编这个站的文章经常要发布链接,但是直接发布链接显得不美观,B2主题也只有一个附件按钮。

根据B2主题群友纸工场分享的WordPress后台编辑器增加按钮的实例,新增了两个按钮。

文本框样式来自钻芒博客分享的天空之境效果。

使用说明

将php代码和CSS样式放入主题或子主题的functions.php,style.css即可。

需要使用时在WordPress后台的编辑文章页,点击文本,才会显示按钮。

效果展示

按钮效果

文本框效果

PHP代码

/*提示框 开始 */
function toc($atts, $content=null){
 return '<div id="wmh_tkzj">'.$content.'</div>';
}
add_shortcode('v_tkzj','toc');

/*下载按钮*/
function sg_down($atts, $content = null) {
 extract(shortcode_atts(array(
 "href" => 'http://'
 ) , $atts));
 return '<a class="sgbtn_down" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_down', 'sg_down');

/*演示按钮*/
function sg_see($atts, $content = null) {
 extract(shortcode_atts(array(
 "href" => 'http://'
 ) , $atts));
 return '<a class="sgbtn_see" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_see', 'sg_see');

//后台编辑器 短代码按键
function appthemes_add_quicktagss() {
?> 
<script type="text/javascript"> 
    //提示框
    QTags.addButton( 'v_tkzj', '天空之境', '<div id="wmh_tkzj">天空之境</div>\n', "" );
    //按钮
    QTags.addButton( 'sgbtn_down', '下载按钮', "[sgbtn _down href='']下载按钮", "[/sgbtn_down]\r" );
    QTags.addButton( 'sgbtn_see', '演示按钮', "[sgbtn _see href='']演示按钮", "[/sgbtn_see]\r" );
    //为了保证演示效果,上方演示代码中添加了空格,请自行去除 [sgbtn 后面的空格
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktagss' );

CSS样式

/*编辑器中添加的文本框样式*/
#wmh_tkzj{
    font-size: 14px;
    width: 100%;
    color: #555555;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 15px 15px 15px 35px;
    border-radius: 10px;
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background: linear-gradient(40deg,#e0c3fc,#8ec5fc);
    background-image: -webkit-linear-gradient(40deg,#e0c3fc,#8ec5fc);
}

/*编辑器中添加的 下载按钮&演示按钮&赞赏按钮 样式*/
.sgbtn_down,.sgbtn_see{
	float: left;
    background: #0061a8;
    color: #fff!important;
    line-height: 34px;
    padding: 0 15px;
    border-radius: 5px;
    box-shadow: 0px 8px 20px -5px #0061a8d9;
    transition: all .3s ease-in 0s;
    font-size: 12px;
    border: 0;
    margin: 20px;
}

人已赞赏
DEEDECMS模板

[织梦模板]古典复古木材木门木业类网站模板(带手机端)

2020-7-17 14:42:44

WordPress教程

元素插件及其终极扩展出现Bug可能会给一百万网站带来风险

2020-8-25 18:13:38

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索