广告投放

WordPress页面添加字体大小切换cookie版

目录

    Wordpress页面添加字体大小切换cookie版
    为Wordpress页面添加字体大小切换Cookie版

    上篇《WordPress主题添加字体大小切换按钮》中的方法,当浏览者刷新页面后,不能将设置保存到浏览器cookie中,需再次选择字体大小,不够人性化,有童鞋提出能不能选择一次,刷新后不用再次选择,下面就以 Prower V4主题 为例,将浏览者选择的字号大小信息保存到浏览器cookie的方法,添加到Wordpress主题中。

    步骤一,在 Prower V4主题主题目录中新建一个名称为:js 的文件夹,将下载的jquery.min.js和styleswitch.js放进去。

    所需JS文件下载:jquery.min和styleswitch(提取码:ap61)

    再新建一个名称为:css 的文件夹,并在其中新建名称为:c1.css、c2.css、c3.css三个样式文件。

    打开三个样式文件分别在其中输入:

    在第一个中输入:#post_content {font-size: 14px;}   
    在第二个中输入:#post_content {font-size: 16px;}   
    在第三个中输入:#post_content {font-size: 18px;}  

    其中:post_content 为主题正文部分的DIV选择器,可视不同主题作适当修改。

    步骤二,打开主题header模版,在:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  

    下面添加:

    <link title=css1 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c1.css" />   
    <link title=css2 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c2.css" />   
    <link title=css3 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c3.css" />  

    在</head>标签上面添加:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/styleswitch.js" ></script>  

    步骤三,打开主题single模版,在:

    <div class="meta"><?php the_time('Y-m-d'); ?></div>  

    下面添加:

    <div span="fontsize">   
        <a class="styleswitch" style="cursor: pointer" title="小" rel=css1>小</a>   
        <a class="styleswitch" style="cursor: pointer" title="中" rel=css2>中</a>    
        <a class="styleswitch" style="cursor: pointer" title="大" rel=css3>大</a>   
    </div>  

    折腾完成。

    浏览者只要不清空浏览器cookie,刷新后或者再次浏览你的站点,将会继续显示之前选择的字号。

     上面的方法只用于改变字号,有点大材小用,可以通过定义不同的样式让浏览者选择整体布局和风格,就看你的想像力和创造力了!

    原文地址:www.5che2.com

    声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

    给TA打赏
    共{{data.count}}人
    人已打赏
    广告位招租919838898
    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索