WordPress侧面栏创作者信息内容实用工具

2021-04-07 01:35 jianzhan

雅兮网是根据WordPress构建的,跟大多数数时尚博主一样,小编想提升这一作用第一件事便是去检索一下有木有相近的实用工具。这儿插一句,小编是是非非向阳睐启用实用工具的,可视性化的实际操作使各类作用都简易便捷,也有利于维护保养编码。

针对前端开发实际效果,在看过很多款式后,小编决策做一个略微时尚潮流一点的实际效果,参照了许多出色的主题风格,最后实际效果以下。

WordPress侧边栏作者信息小工具

创作者信息内容实用工具编码
 ?php
Widget Name:文中创作者 

Version:1.0 
Author:雅兮网 
Author URI:img/post-lz.png" 
 div 
 a href=" ?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ? " title=" ?php the_author(); ? " rel="author" 
 ?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }? 
 /div 
 div 
 ?php the_author_posts_link(); ? 
 a href=" ?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ? " target="_blank" ( ?php the_author_posts(); ? 一篇文章) /a 
 span 网站站长 /span 
 /div 
 div 
 ?php the_author_description(); ? 
 /div 
 div 
 span 
 a href=" ?php the_author_url(); ? " rel="nofollow" target="_blank" i /i blog /a 
 /span 
 span 
 a href=" ?php the_author_meta('weibo'); ? " rel="nofollow" target="_blank" i /i 新浪微博 /a 
 /span 
 /div 
 /div 
 ?php
? 

还可以立即免费下载小编搞好的文档 .php

css编码(放进主题风格款式表格中)
/* 文中创作者实用工具 */
.{
 width: 100%;
 color: #888;
 font-size: 12px;
 background: url(img/author-banner.png) #fff center top no-repeat;
 position: relative;
.zuozeipc {
 width: 50px;
 position: absolute;
 top: -1px;
 left: 10px;
.author-avatar{
 padding-top: 30px;
.author-avatar a{
 display: block;
 width: 80px;
 height: 80px;
 margin: 0 auto;
 background: #C9C9C9;
 border-radius: 50%;
 border: 3px solid #fff;
 -webkit-border: 3px solid #fff;
 -moz-border: 3px solid #fff;
.author-avatar .avatar {
 width: 74px;
 height: 74px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
.author-name {
 height: 26px;
 line-height: 26px;
 margin: 10px 0;
 font-weight: bold;
 font-size: 16px;
 text-align: center;
.author-name span {
 font-size: 12px;
 background: #CECECE;
 color: #FFFFFF;
 padding: 2px 6px;
 margin-left: 5px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 position: relative;
.author-des {
 padding: 10px;
 background: #DFDBDB;
 text-indent: 2em;
.author-social {
 text-align: center;
 padding:20px 10px;
.author-social span{
 margin-right: 10px;
 border-radius: 2px;
 display: inline-block;
.author-social span:hover {
 background-color: #1b1b1b;
.author-social span a {
 padding: 4px 15px;
 font-size: 14px;
 color: #fff;
.author-social span a i {
 margin-right: 5px;
.author-social .author-blog {
 background-color: #ff5e5c;
.author-social .author-weibo {
 background-color: #19b5fe;
}

应用方式:将所述编码放进你的实用工具文档中,由于每一个主题风格启用实用工具的方式不绝同样,小编也没法详尽的表述,总而言之便是将所述实用工具布署在你的主题风格中,随后在后台管理启用实用工具,前台接待更新就可以见到实际效果了。

下边一部分2个按键是读取后台管理客户本人材料填好的站点和新浪微博,有些人会问,为什么我的后台管理材料处沒有新浪微博这一选择项呢?这一是能够自定本人信息内容选择项的,只必须在function.php加上以下编码就可以,同样能够加上例如电話、详细地址等信息内容;因此本实用工具必须自定一下新浪微博。

//提升本人介绍信息内容
function my_new_contactmethods( $contactmethods ) {
 $contactmethods['weibo'] = '新浪微博';
 return $contactmethods;
add_filter('user_contactmethods','my_new_contactmethods',10,1);

非常提示:因为每个主题风格不绝同样,小编不可以确保极致呈现.有疑惑热烈欢迎留言板留言一起沟通交流。

2016.11.11图发奇想:原文中提及想完成创作者真实身份信息内容,但苦于沒有涵数适用。即然能够自定本人介绍,则彻底能够提升一项“真实身份”选择项,可设定管理方法员、总编、网编这些,随后再用the_author_meta涵数輸出就可以,这大部分能够完成真实身份了,缺憾是创作者自身能够在后台管理改动真实身份信息内容,但即然是有权利限出文的,大部分是自身人了,因此“僭越”真实身份这类事儿无须担忧啦...

有必须的能够自主改动一下编码,小编就暂未改动原文中编码了,自身动手能力衣食无忧嘛 [得意]


朋友善,我依照您说的碾磨结束,发觉创作者信息内容显示信息在别的实用工具的最正下方,有木有方法将创作者信息内容栏显示信息在检索框一下,如同您的网站。


@Biebb技: 你这一段编码很贴心,能够显示信息创作者的管理权限了,收下了,表明谢谢。可是WordPress后台管理这一管理权限做的其实不是非常健全。我本人现阶段是趋向于本人材料设定岗位,随后前台接待启用,那样个性化化强一点! [呲牙]


高新科技迷、外设控、WordPress喜好者,高新科技更改日常生活,用力中的键鼠将IT的快乐共享给大量的人!