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

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

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

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

<a href=“#login” class=“flatbtn” id=“login-main”>
<i class=“be be-timerauto”></i>
<?php _e( ‘登录‘, ‘begin’ ); ?>
</a>
<?php } ?>
</div>
</div>

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

<script type=“text/javascript”>today = new Date();
var day;
var date;
var hello;
hour = new Date().getHours();
if (hour < 6) {
hello = ‘ 凌晨好! ‘;
} else if (hour < 9) {
hello = ‘ 早上好!’;
} else if (hour < 12) {
hello = ‘ 上午好!’;
} else if (hour < 14) {
hello = ‘ 中午好! ‘;
} else if (hour < 17) {
hello = ‘ 下午好! ‘;
} else if (hour < 19) {
hello = ‘ 傍晚好!’;
} else if (hour < 22) {
hello = ‘ 晚上好! ‘;
} else {
hello = ‘夜深了! ‘;
}
function GetCookie(sName) {
var arr = document.cookie.match(new RegExp(“(^| )” + sName + “=([^;]*)(;|$)”));
if (arr != null) {
return unescape(arr[2])
};
return null;
}
var Guest_Name = decodeURIComponent(GetCookie(‘author’));
var webUrl = webUrl;
if (Guest_Name != “null”) {
hello = Guest_Name + ‘ , ‘ + hello + ‘ 欢迎回来。’;
}
document.write(‘ ‘ + hello);</script>
<script type=“text/javascript”>var d, s = “”;
var x = new Array(“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”);
d = new Date();
s += d.getFullYear() + “年” + (d.getMonth() + 1) + “月” + d.getDate() + “日 “;
s += x[d.getDay()];
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顶部显示问候语和日期的完美解决方法

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

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

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