WordPress顶部显示问候语和日期

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>

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

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

修改styless.css文件

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

效果对比

使用后：

使用前：

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

转载注明：WordPress顶部显示问候语和日期的完美解决方法 | 星光博客