【综合原创】不用插件只用代码让WordPress字体大小自由缩放


阅读文章,最怕的就是文章的字体太小。还好,现在科技发达,数码的技术一日千里,两根手指头就能让整个屏幕的字体整体自由缩放。这样的技术,在现在来说,已经成为几个应用平台厂家在设计任何硬体时,不必考虑但是却是必须加入的一个具备的功能。

但是,这种整体的字体缩放功能,还是有其缺憾和不完美之处。我在另外一篇文章《字体整体放大?局部放大?一个人体工程学里的迷思》里,已经有详细的说明,这里就不再赘述。

我这篇文章里,要说的是文字局部的缩放问题。

要在WordPress里,添加和实现局部文字(只是文章的内容部分)的缩放,是可以通过代码来实现。

我遍寻各种不同的解决方案。当然,在测试中,好几次都让我的WordPress“死去”了,必须通过备份覆盖了再活回来。真的是焦头烂额,死去活来。

最后,一位江湖中的神人大哥的代码,简单又好用。设置了之后,文字缩放自如,要多大有多大,要多小就有多小,绝对不是那种只有大、中、小三个预设固定的缩放而已,实在真正做到要多大有多大,要多小有多小,完全由您自己临场来设定的那种。这就达到我个人的要求:随心所欲,自由缩放的目的。

真的是——赞!

要达到这样的功能,只要添加两段代码。

第一步:

第一段代码,可以添加在header.php(页头)或者footer.php(页尾)里,您自己可以决定。

以管理员身份,登录您的WordPress,进入控制面板中心(原译为仪表盘),进入主题选项,选择编辑。

右边的面板会出现您目前启用的主题,一般上是替您打开了style.css这个文件。我们不必这个文件,我们要修改的是header.php或者footer.php文件。在编辑器的右边,您可以看到一大串的文件名。仔细查找,找到footer.php(我是添加在页尾)后,点按一下这个文件。这时,编辑器应该显示这个文件的代码。您可以小心的确定一下,在您的编辑器的上头,应该可以看到footer.php(页尾)这个文件的名称。确定了之后,把鼠标指针安置在这个文件的最尾端,把下面这段代码复制了粘贴在footer.php里:


<script type="text/javascript">// < ![CDATA[
function resizeText(multiplier) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
// ]]></script>

确定粘贴在正确的位置之后,在编辑器的下面,点按保存文件。千万要记得保存。

第二步:

把下面的第二段代码添加在您目前启用的主题的另外一个文件里,达到启用的目的,我是把它粘贴在content.php里。根据江湖大哥说是贴在single.php里,您自己测试,因为不同的主题,粘贴在不同的文件里。我用的是WordPress 3.9自带的原装TwentyFourteen主题,是贴在content.php里。

我是准备把这个显示按钮,放置在发布日期等资料那里,所以,我找到了那个位置,就粘贴在它们之间:


<!--?php <br ?--> endif;

edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
?&gt;

// 第二段代码粘贴在这里。

<!-- .entry-meta -->
<!-- .entry-header -->

您找到了吗?

把下面这段代码,粘贴在上面我注明的那个位置上:


<a id="plustext"></a>大字显示   | <a id="minustext"></a>  小字显示   |

如果您觉得,在:“大字显示 | 小字显示”之间不要有任何空格,那就把那几个“  &nbsp”删除即可。每一个“&nbsp”就是一个空格。

当然,如果您不要“大字显示 | 小字显示”这样的文字,您也可以自己修改,悉听尊便。

粘贴好这段代码之后,在编辑器的下面,点按保存文件。千万要记得保存。

到您的页面看看,这个“大字显示 | 小字显示”的功能应该已经在那里了。点按“大字显示”,要多大就多大,自由自在。

完成,收工。

就是这么简单。祝您成功。

这个《Wordpress初学记》系列,是我折腾学习Wordpress的学习笔记,是记录我自己的学习历程。资料都是从网络上或者书籍中,大量阅读之后,通过“临床”折腾测试后得到的结果。我是个电脑技术的门外汉,不会写代码更看不懂代码。因此,千万不要问我问题,或者问我为什么,我是无法回答的。文中即使有错误,那也是我的造化,错有错着,竟然可以瞒骗程序过关。

注意:

修改任何文件或者代码,记得事前必须备份。

一般上,我们修改任何文件或者代码,都必须是在主题的子模板(child theme)上修改。不然,主题版本一晋级,就会把您这些苦心修改的部分全部覆盖——没了!

“子模板(child theme)”?知道是什么吧?!

设立网站选择好主题之后,第一件事儿,就是添加自己的“子模板(child theme)”。有任何修改或者添加,都应该修改或者添加在“子模板(child theme)”上。切记。

 

资料来自:代码原作者:wpbeginner.com
How to Change Font Size onClick in WordPress with JavaScript

Print Friendly, PDF & Email

有问题或评论?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

文章月度归档