WordPress博客顶部显示问候语和日期的完美图文教程

2020年4月25日10:52:56 发表评论 82 次浏览

WordPress博客顶部显示问候语和日期的完美图文教程

在【仙踪小栈】看到此教程,感觉非常好看和人性化,也是我想要的效果,所以立马转帖过来分享给大家使用。代码理论上适用任何类型的站点,可自定义。关于错位问题,我用火狐、IE11,没发现此问题。大家可以自己测试下。

代码部署

知更鸟Begin主题5.2版本为例

添加代码至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、在上面代码后面添加下面的代码

温馨提示: 此处内容需要 评论本文刷新本页 即可查看

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

友情提示

我经过测试后发现,这段显示“问候语+日期的代码”在添加到 /inc/user/user-profile.php文件

WordPress博客顶部显示问候语和日期的完美图文教程

后,只有在知更鸟主题基本设置里面设置“显示登陆按钮”才可以显示这段话。反之,则不显示。

WordPress博客顶部显示问候语和日期的完美图文教程

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

WordPress博客顶部显示问候语和日期的完美图文教程

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

 

修改styless.css文件

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

 

知更鸟Begin主题LTS版本为例

其实跟5.2版本的区别就是主题目录下/inc/user/user-profile.php文件,查找的代码不同

  1.     <div class="nav-set">
  2.         <div class="nav-login">
  3.         <?php if ( is_user_logged_in()){ ?>
  4.         <?php } else { ?>
  5.             <div class="show-layer" data-show-layer="login-layer" role="button"><i class="be be-timerauto"></i><?php _e( '登录', 'begin' ); ?></div>
  6.         <?php } ?>
  7.         </div>
  8.     </div>
  9. <?php } ?>
  10. ?php } ?>

如下图:

WordPress博客顶部显示问候语和日期的完美图文教程

效果图:

WordPress博客顶部显示问候语和日期的完美图文教程

weinxin
小Q年
关注公众号,获取前沿分享
smallQ

发表评论

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