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

  • WordPress顶部显示问候语和日期的完美解决方法已关闭评论
  • 6,822 次浏览
  • A+
所属分类：网站相关

不能登陆请看公告！请看公告！请看公告！

为防止盗发或传播，本站部分软件做了特殊处理，如你下载后发现与本站不一致，请看公告！

本教程以知更鸟begin主题5.2版为例，效果参考本站。代码理论上适用任何类型的站点，可自定义。关于错位问题，我用火狐、IE11，没发现此问题。经过测试，在使用E语云的方法后，只有在设置“登录”按钮后才可以显示这段“提示语”，所以对代码的添加位置做了调整，大家可以自己测试下。
WordPress顶部显示问候语和日期的完美解决方法

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

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

  1. <ahref=“#login”class=“flatbtn”id=“login-main”>
  2. <iclass=“bebe-timerauto”></i>
  3. <?php_e(‘登录‘,‘begin’);?>
  4. </a>
  5. <?php}?>
  6. </div>
  7. </div>

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

  1. <scripttype=“text/javascript”>today=newDate();
  2. varday;
  3. vardate;
  4. varhello;
  5. hour=newDate().getHours();
  6. if(hour<6){
  7. hello=‘凌晨好！‘;
  8. }elseif(hour<9){
  9. hello=‘早上好！’;
  10. }elseif(hour<12){
  11. hello=‘上午好！’;
  12. }elseif(hour<14){
  13. hello=‘中午好！‘;
  14. }elseif(hour<17){
  15. hello=‘下午好！‘;
  16. }elseif(hour<19){
  17. hello=‘傍晚好！’;
  18. }elseif(hour<22){
  19. hello=‘晚上好！‘;
  20. }else{
  21. hello=‘夜深了！‘;
  22. }
  23. functionGetCookie(sName){
  24. vararr=document.cookie.match(newRegExp(“(^|)”+sName+“=([^;]*)(;|$)”));
  25. if(arr!=null){
  26. returnunescape(arr[2])
  27. };
  28. returnnull;
  29. }
  30. varGuest_Name=decodeURIComponent(GetCookie(‘author’));
  31. varwebUrl=webUrl;
  32. if(Guest_Name!=“null”){
  33. hello=Guest_Name+‘,‘+hello+‘欢迎回来。’;
  34. }
  35. document.write(‘‘+hello);</script>
  36. <scripttype=“text/javascript”>vard,s=“”;
  37. varx=newArray(“星期日”,“星期一”,“星期二”,“星期三”,“星期四”,“星期五”,“星期六”);
  38. d=newDate();
  39. s+=d.getFullYear()+“年”+(d.getMonth()+1)+“月”+d.getDate()+“日“;
  40. s+=x[d.getDay()];
  41. document.writeln(s);</script>

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

友情提示

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

所以，我后来把添加的这段代码的位置给调整了下，添加到了如下位置，可以在不选择“登录”按钮的情况下就可以显示出来了。

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

修改styless.css文件

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

效果对比

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

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

该教程已经本站测试，使用效果完美！

原创文章，转载请注明： 转载自心语家园

本文链接地址: WordPress顶部显示问候语和日期的完美解决方法

分享到QQ空间
分享到微信

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
分享到豆瓣
分享到人人
保存至印象笔记
分享到Google+
发送给朋友
  • 官方微信公众号
  • 扫一扫关注微信公众号，如果你觉得本站帮到了你，请通过下面的赏字按钮捐赠本站，谢谢！
  • weinxin
  • 本站官方头条号
  • 扫一扫关注官方头条号，新老用户扫描下载抖音极速版，可领取最高269元现金，每天使用都可领钱。
  • weinxin