WordPress给文章内超链接添加一个按钮 – WordPress 教程

2022年 10月 24日 发表评论
腾讯云正在大促:点击直达 阿里云超级红包:点击领取
免费/便宜/高性价比服务器汇总入口(已更新):点击这里了解

Wordpress给文章内超链接添加一个按钮 – WordPress 教程
WordPress

主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(DIV),几行CSS样式就可作出这个效果,现在就教大家如何添加这个按钮效果.

Wordpress给文章内超链接添加一个按钮 – WordPress 教程

首先,在编辑日志时切换到代码模式(HTML),在适当位置加入以下代码:

<div id="demo"><a href="https://xxx.com/">主题演示</a></div><div id="download"><a href="https://xxx.com/">主题下载</a></div>

接着再把以下样式文件加到主题的style.css中:

#download {background: url(images/dd.png) no-repeat;width:105px;height:25px;color: #fff;padding-left:15px;}#demo {background: url(images/dd.png) no-repeat 0 -25px;width:105px;height:25px;color: #fff;padding-left:15px;}

把下面这张按钮图片上传到主题的图片目录中,一般是images文件夹

具体参数可作适当修改

用table表格进行定位,完整代码如下:

<table border="0" width="240" align="center"><tbody><tr><td width="120" height="25"><div id="demo"><a href="http://demo.xingkongweb.com/">主题演示</a></div></td><td width="120" height="25"><div id="download"><a href="https://xingkongweb.com">主题下载</a></div></td></tr></tbody>
小咸鱼

发表评论

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