0

WordPress 文章新增插入下载按钮_自定义按钮样式

资源网站一般都会提供下载链接或者演示地址,如果默认直接插入超链接的话体验并不好,怎么给WordPress文章插入一个漂亮的下载按钮呢?分享一个纯代码版本,适用于经典编辑器,实现方法如下:

主题根目录style.css文件里加入以下代码:

.downloads {
		border-radius: .10667rem;
	        transition: all .2s;
		background-color: #f60;
		color: #fff!important;
		font-size: 14px!important;
		display: inline-block;
		margin-right: 15px;
		margin-bottom: 15px;
		padding: 5px 15px;
		text-decoration: none!important;
		text-indent: 0!important;
		width: 100%;
		text-align: center;
}

发布文章时,切换到文本模式下插入以下代码:

<a class="downloads" href="https://item.taobao.com/item.htm?id=649479749951&amp;1$GcAIXNi0zy4$://" target="_blank" rel="noopener">观看产品视频,前往淘宝购买</a>

每次维护文章都要手动插入代码都要加一个class="downloads"到链接里面,显得很麻烦。因此,改进一下编辑器,使用AddQuicktag增强编辑器。在functions.php里添加如下代码:

// 使用AddQuicktag增强编辑器
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( '淘宝信息', '淘宝信息', '<a class="downloads">', '</a>' );
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

具体样式如下:

体验可访问:https://chenpot.com/tqn-chuanlu.html

   
微信 支付宝    

如果文章对您有帮助,欢迎打赏作者!

欢迎评论