WordPress添加字体切换大小按钮、添加访问次数小工具

给自己的网站WordPress添加字体切换大小按钮吧,这样方便读者阅读文章,一般网页字体大小都在12-16PX之间,中文最新的就是12PX了,当然还可以再小,不过就几乎看不见了,

这里分享一个代码的方法,给WordPress的文章页面添加一个字体控制按钮,这里也附上美化样式,实现方法如下:

WordPress添加字体切换大小按钮

将此JS代码添加到single.php中:

<script type="text/javascript"> function doZoom(size) { var zoom = document.all ? document.all['entry'] : document.getElementById('entry'); zoom.style.fontSize = size + 'px'; } </script>

这里需要注意的就是,上面代码的entry指的是正文内容的div id,必须根据主题的实际情况进行修改即可。

前端调用html(在文章适当页面加入即可一般都是single.php):

<div id="fschange"> <span id="font_title">字号:</span> <span id="fs_dec"><a href="javascript:doZoom(12)" title="缩小">-</a></span> <span id="fs_n"><a href="javascript:doZoom(14)" title="恢复">o</a></span> <span id="fs_inc"><a href="javascript:doZoom(16)" title="增大">+</a></span> </div>

然后是美化的css代码,加入主题文件中即可:

/* 字体大小 */ #fschange {float:right; margin:0; padding:0;} #fschange #font_title{margin-top:2px;} #fschange span {display:inline; float:left; margin-left:4px;} #fschange span a {border-bottom:#c8c8c8 1px solid; text-align:center; border-left:#c8c8c8 1px solid; width:16px; display:block; height:18px; border-top:#c8c8c8 2px solid; border-right:#c8c8c8 1px solid;} #fschange span a:hover {background:#ebebeb; text-decoration:none;}

完成以上操作,马上看看是否已经成功的为自己的WordPress添加了字体大小的按钮了呢?点击可以随时切换。

给WordPress小工具添加访问次数

把下面代码添加到后台,外观,小工具,(如begin主题)用增强小工具放进去,确定即可,代码里的查询代码是php,不能用文本小工具,其它主题自己折腾吧。

<div style="text-align:center;border-width: 2px;border-style:ridge;border-color: #e4c666;"><script type="text/javascript""> if(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1}else{localStorage.pagecount=1}document.write("你第"+localStorage.pagecount+"次来我的小小博客!"); </script></div><div class="table-r"><table width="100%">
<tbody><tr><td style="text-align:center;border-color: #e4c666;border-width: 1.5px;" width="50%">页面加载<?php timer_stop(1); ?>秒</td>            <td style="text-align:center;border-color: #e4c666;border-width: 1.5px;" width="50%">页面查询<?php echo get_num_queries(); ?>次</td>        </tr></tbody></table></div>

 

相关文章