WordPress纯代码实现文章字体大小的选择

2016-10-29 19:34 阅读 33 次 评论关闭

WordPress网站建设中,尤其是WordPress新闻资讯站的网站建设中,用户的体验很重要。用户浏览页面字体大小和样式偏重个性化的今天,怎样选择一款合适的WordPress样式难倒了很多WordPress站长。有的用户喜欢小字体的清晰细腻,有的用户喜欢大字体浏览舒畅不伤眼。那如何通过纯代码实现WordPress文章字体大小的选择?

今天小编给大家推荐一款两全的办法。wordpress文章字体大小可选代码

打开主题的single.php文件即文章内容文件,在下面插入以下Js代码:

<script type="text/javascript">

function SetFont(size){

document.getElementById("logPanel").style.fontSize=size

}

</script>

在你想提供改变字体大小按钮的地方插入以下代码:

字体大小: <a href="javascript:SetFont('12px')" accesskey="1">小</a> <a href="javascript:SetFont('14px')" accesskey="2">中</a> <a href="javascript:SetFont('16px')" accesskey="3">大</a>

在你显示文章内容部分的<div></div>增加一个id="logPanel"标识,一般是这样写的:<div id="logPanel" class="content"> 显示文章内容代码</div>

也可以在single.php适当的位置,插入:

<a href="javascript:SetFont('12px')" accesskey="1">小</a>

<a href="javascript:SetFont('14px')" accesskey="2">中</a>

<a href="javascript:SetFont('16px')" accesskey="3">大</a>

<a href="javascript:SetColor(''#f8f8f8')" accesskey="1">灰</a>

<a href="javascript:SetColor('#b1d5f3')" accesskey="2">蓝</a>

<a href="javascript:SetColor('#cdcdde')" accesskey="3">褐</a>

这几行代码的意思就是选择的字体大小和颜色,要选择合适的位置插入(我把他们放在标题下方,与时间分类等在一起),这样发布出来的才会整洁美观。

最后在single.php的content的DIV层下,插入如下代码:

<div id="sizecolor">……</div>

其中省略号即为single.php中对应文章正文的代码部分,用这代码替换掉省略号即可。

操作注意:

1.一定不要使用记事本编辑php文件,否则一切后果自负!!推荐使用UltraEdit,Dreamweaver等。

2.如果对于修改代码不是很有把握,请预先备份好原来的文件,否则后果依旧自负!!

3.复制本文的代码,如果是全角符号,请自行改为半角符号,切记!!

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:WordPress纯代码实现文章字体大小的选择 | 猎微网

评论已关闭!