WordPress顶部显示问候语和日期的完美解决方法

2018年1月13日13:42:42 20 6.8K 2134字阅读7分6秒
这段代码自己添加过,但一直认为不够完美。在【语云博客】看到此教程,感觉非常好看和人性化,也是我想要的效果,所以立马转帖过来分享给大家使用。本教程以知更鸟begin主题5.2版为例,效果参考本站。代码理论上适用任何类型的站点,可自定义。关于错位问题,我用火狐、IE11,没发现此问题。经过测试,在使用E语云的方法后,只有在设置“登录”按钮后才可以显示这段“提示语”,所以对代码的添加位置做了调整,大家可以自己测试下。

添加代码至user-profile.php文件

1、打开主题目录下/inc/user/user-profile.php文件,查找以下代码(请仔细查找,不要全部复制进行查找,因为格式不同会提示查找不到。)

  1. <a href="#login" class="flatbtn" id="login-main">
  2.   <i class="be be-timerauto"></i>
  3.   <?php _e( '登录', 'begin' ); ?>
  4. </a>
  5.   <?php } ?>
  6. </div>
  7. </div>

2、在上面代码后面添加下面的代码

  1. <script type="text/javascript">today = new Date();
  2.     var day;
  3.     var date;
  4.     var hello;
  5.     hour = new Date().getHours();
  6.     if (hour < 6) {
  7.         hello = ' 凌晨好! ';
  8.     } else if (hour < 9) {
  9.         hello = ' 早上好!';
  10.     } else if (hour < 12) {
  11.         hello = ' 上午好!';
  12.     } else if (hour < 14) {
  13.         hello = ' 中午好! ';
  14.     } else if (hour < 17) {
  15.         hello = ' 下午好! ';
  16.     } else if (hour < 19) {
  17.         hello = ' 傍晚好!';
  18.     } else if (hour < 22) {
  19.         hello = ' 晚上好! ';
  20.     } else {
  21.         hello = '夜深了! ';
  22.     }
  23.     function GetCookie(sName) {
  24.         var arr = document.cookie.match(new RegExp("(^| )" + sName + "=([^;]*)(;|$)"));
  25.         if (arr != null) {
  26.             return unescape(arr[2])
  27.         };
  28.         return null;
  29.     }
  30.     var Guest_Name = decodeURIComponent(GetCookie('author'));
  31.     var webUrl = webUrl;
  32.     if (Guest_Name != "null") {
  33.         hello = Guest_Name + ' , ' + hello + ' 欢迎回来。';
  34.     }
  35.     document.write(' ' + hello);</script>
  36. <script type="text/javascript">var d, s = "";
  37.     var x = new Array("星期日""星期一""星期二""星期三""星期四""星期五""星期六");
  38.     d = new Date();
  39.     s += d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 ";
  40.     s += x[d.getDay()];
  41.     document.writeln(s);</script>

经过上面的步骤,基本功能都已经实现了,保存后刷新站点首页看看是不是有效果^_^

友情提示

我经过测试后发现,这段显示“问候语+日期的代码”在添加到 /inc/user/user-profile.php文件Wordpress顶部显示问候语和日期的完美解决方法后,只有在知更鸟主题基本设置里面设置“显示登陆按钮”才可以显示这段话。反之,则不显示。Wordpress顶部显示问候语和日期的完美解决方法

所以,我后来把添加的这段代码的位置给调整了下,添加到了如下位置,可以在不选择“登录”按钮的情况下就可以显示出来了。Wordpress顶部显示问候语和日期的完美解决方法

我是小白,对于这种方法,如不正确,请各位指正!

但是,有一个小问题,主题默认css文件中,在该处设置的宽度太窄,如果你用小屏的平板电脑打开网页,这个地方就会自动换行,影响页面美观。所以,我们需要修改style.css文件相应代码。

修改styless.css文件

打开主题根目录下的style.css文件,查找#user-profile {代码,修改其中的宽度width属性,主题默认的是35%,我们修改成45%即可,数字不要太大,否则会把后面的内容挤掉。

效果对比

使用后:Wordpress顶部显示问候语和日期的完美解决方法

 

使用前:Wordpress顶部显示问候语和日期的完美解决方法

 

 

该教程已经本站测试,使用效果完美!

继续阅读
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
匿名

发表评论

匿名网友 填写信息

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

评论:20   其中:访客  10   博主  9   引用   1
    • 夏日博客 夏日博客 0 来自天朝的朋友 谷歌浏览器 Windows 7 北京市大兴区 联通

      wp添加问候语,是个实用的小功能。

        • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

          回复 夏日博客 添加以后显得人性化、美观些!

        • ZAERA博客 ZAERA博客 1 来自天朝的朋友 谷歌浏览器 Windows 10 河南省许昌市 电信

          在好多站点都看到了类似的功能,一直不知道怎么实现,受教了

            • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36 山东省 移动

              回复 ZAERA博客 网上多数教程不是很详细。我是小白,在E语云看到就分享给大家。此教程比较详细、直观。

            • 懿古今 懿古今 1 来自天朝的朋友 谷歌浏览器 Windows 7 广西贵港市 移动

              这个办法不错,挺实用的

                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                  回复 懿古今 谢谢站长认可!

                • 跨境电商培训 跨境电商培训 0 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省 电信

                  非常不错!!!!

                    • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                      回复 跨境电商培训 谢谢来访!

                    • 精斑检测试纸 精斑检测试纸 1 来自天朝的朋友 谷歌浏览器 Windows XP 浙江省杭州市 阿里云计算有限公司

                      很实用的分享

                        • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心

                          回复 精斑检测试纸 这用户名亮了,666 ٩(๑>◡<๑)۶

                            • 精斑检测试纸 精斑检测试纸 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

                              回复 BG4PGR 不要笑我

                                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                                  回复 精斑检测试纸 没有没有。第一次听说比较惊奇,原来还有这“玩意儿” :eek:

                            • 道玄 道玄 1 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 移动

                              谢谢站长,教了我很多哈

                                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                                  回复 道玄 我们的目标是:同学习,共进步! :wink:

                                • 企鹅seo 企鹅seo 1 谷歌浏览器 Windows 7 日本

                                  就保存下

                                    • 企鹅seo 企鹅seo 1 谷歌浏览器 Windows 7 日本

                                      回复 企鹅seo 为么我的ip是日本的

                                        • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Unknow Os 山东省潍坊市 联通

                                          回复 企鹅seo 可能是IP地址数据未更新的原因,数据有点旧了。

                                      • 二龙博客 二龙博客 1 来自天朝的朋友 谷歌浏览器 Windows 10 内蒙古呼和浩特市 电信

                                        有点复杂,先留言以后在搞

                                          • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 10 中国 移动

                                            回复 二龙博客 看似挺复杂,但实际操作一次后发现是很简单的。