秋硕学习笔记 美化 纯代码为wordpress文章编辑器添加链接按钮

纯代码为wordpress文章编辑器添加链接按钮

纯代码为wordpress文章编辑器添加下载按钮方法: 1、将下列代码添加到主题目录functions.php…

纯代码为wordpress文章编辑器添加下载按钮方法:

1、将下列代码添加到主题目录functions.php文件中。

//添加下载按钮
function appthemes_add_quicktags() {
?&gt;<script type="text/javascript">// <![CDATA[
QTags.addButton( 'downs', '下载按钮', '</p>
<p>
</p>
<div class="sg-dl"><span class="sg-dl-span"><a href="','" target=_blank title="文件下载" rel=nofollow><button type="button" class="btn-download">点击下载</button></a></span></div>
<p>
</p>
<p>' );
// ]]></script><!--?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );&lt;br ?-->

2、修改自定义按钮的颜色和大小。可以通过修改CSS样式代码来实现。代码添加到主题CSS文件中。

.btn-download{color:#fff;background:#169FE6;border-top:0;border:2px solid #fff;padding:10px 16px;font-size:14px;line-height:1.33;border-radius:5px;opacity:.8;text-indent:0;margin-top:5px;margin-bottom:5px;display:inline-block;font-weight:300;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;} .btn-download:hover{color:#169FE6;background-color:#fff;border-color:#169FE6;} .sg-dl{margin:20px 0 10px 0;text-align:center;} .sg-dl .sg-dl-span{margin:0 auto;}

3、按钮演示


声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若本站内容侵犯了原著者的合法权益,请联系我们进行处理。本文地址:https://wparticle.cn/425.html

作者: wordus

记录生活感悟,分享网络资源,交流学习体会,感受美好人生。秋硕学习笔记,记录分享学习、生活、工作、旅游、健身、爱好的个人博客。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

返回顶部