本文是《免费(共171篇)》专题的第 98 篇。阅读本文前,建议您先阅读前面的文章:
- 1.RiPro 主题简洁美观又好看鹿鸣的404页面模块
- 2.Ripro 主题7.20美化版
- 3.Ripro 主题8.1美化版
- 4.WordPress如何在文章或侧边栏添加网易云音乐播放器
- 5.WordPress程序修改后台登录地址教程,提高安全性
- 6.RiPro 主题美化之首页VIP介绍引导美化,样式+文件+教程
- 7.RiPro 主题添加鼠标点击特效
- 8.RiPro 主题鼠标划过文章网格加载动效 不能点击文章解决办法
- 9.RiPro 主题添加评论之星VIP等级
- 10.Adobe PS2018 CC WIN版本
- 11.RiPro 主题网站底部友情连接修改美化
- 12.RiPro 主题文章内页标题美化教程
- 13.RiPro 主题添加“常见问题FAQ”教程
- 14.RiPro 美化按钮动态变色效果教程
- 15.RiPro 主题首页简洁搜索框美化教程
- 16.WordPress实现未登录时图片模糊显示
- 17.RiPro主题给资源添加资源VIP角标
- 18.WordPress注册页添加验证码
- 19.Adobe Photoshop 修图插件
- 20.WordPress美化登录页面
- 21.B2主题创意图片广告区块教程
- 22.B2主题美化底部代码,增加运行时间及cnzz统计代码
- 23.WordPress隐藏后台左上角的logo图标
- 24.WordPress关闭自动更新
- 25.B2主题各个页面地址链接
- 26.B2主题美化之文章内容美化H标签美化
- 27.WordPress主题美化右边多色滚动条
- 28.WordPress屏蔽插件更新
- 29.WordPress设置在新窗口打开所有链接
- 30.WordPress 后台设置左上角『查看站点』从新窗口打开
- 31.WordPress如何屏蔽或者自定义后台的版权和版本信息
- 32.WordPress如何屏蔽后台的仪表盘按钮
- 33.WordPress添加自助申请友链功能
- 34.WordPress博客b2主题美化首页区块
- 35.WordPress网页“悼念模式”全站变灰/黑白色CSS代码
- 36.WordPress的B2主题打赏按钮自定义颜色
- 37.B2主题 – banner钻展
- 38.B2主题首页增加区块,六格首页菜单栏
- 39.WordPress主题制作基本模版文件以及基本函数
- 40.WordPress加密隐藏 wp-login
- 41.WordPress中主题以及插件的自动更新关闭
- 42.B2主题弹窗登录美化
- 43.WordPress自动更新网站底部 Copyright © 年份
- 44.WordPress首页小工具添加跑马灯公告
- 45.B2美化-增加黑夜模式
- 46.B2主题自定义用户等级颜色代码
- 47.B2主题会员等级美化与自定义标识
- 48.B2主题个人中心美化
- 49.B2圈子顶部添加文字滚动通知
- 50.B2文章评论新增ip归属地
- 51.B2修改认证图标
- 52.B2主题弹窗公告美化
- 53.B2主题自定义 暂无相关结果 图标
- 54.B2主题文章底部增加声明
- 55.B2主题手机区块菜单,仅手机
- 56.B2主题广告位
- 57.WordPress自定义pre样式DIY代码高亮
- 58.B2主题美化小工具“创建圈子”按钮
- 59.B2主题美化-网站增加黑夜模式
- 60.B2主题美化:VIP会员页面
- 61.B2美化-页眉菜单添加开通vip图标
- 62.B2主题网站添加添加复制透明提示框
- 63.B2自定义 暂无相关结果 图标
- 64.B2主题动态背景搜索样式
- 65.B2主题动态背景搜索样式–本网站同款
- 66.B2主题美化-代码模块美化
- 67.B2主题logo扫光特效,网站logo扫光特效纯代码
- 68.WordPress给文章添加百度是否已收录查询和显示功能
- 69.B2主题美化首页文章缩略图鼠标悬浮放大特效
- 70.WordPress添加百度API 自动提交收录
- 71.WordPress实现复制弹出提示框-美化版
- 72.WordPress的评论区加背景图片,让评论框不在单调
- 73.Ps两个或者多个钢笔路径合并 只显示大选区 的时候怎么办
- 74.B2主题美化-移动端底部导航修改美化
- 75.B2美化-首页添加动态北极熊搜索样式
- 76.B2主题美化-顶部导航条的下拉菜单美化
- 77.B2主题美化之根据时间自动切换网站背景颜色/图片
- 78.WordPress自定义网站背景图片
- 79.WordPress用代码实现刷新网页都随机变换背景图片不调用API接口
- 80.B2主题会员等级美化与自定义标识
- 81.Adobe Photoshop2023 CC WIN版本
- 82.Adobe Photoshop2023 CC MAC版本
- 83.B2主题美化给文章添加彩色角标
- 84.WordPress文章中的图片实现点击放大的效果
- 85.B2主题四栏目美化代码
- 86.WordPress如何重新排列后台管理菜单
- 87.WordPress完整的函数大全
- 88.WordPress完全美化后台登陆页面
- 89.B2主题在网站底部添加访问次数代码
- 90.B2主题添加菜单栏上下滑动特效
- 91.Win系统打开软件显示找不到MSVCR100.dll
- 92.PS2018-2024版本安装插件弹窗显示扩展未经正确签署
- 93.Windows系统中使用虚拟机安装苹果Mac OS系统
- 94.WordPress中怎么点击一个按钮后可以切换图标
- 95.WordPress中怎么点击一个按钮弹出使用Ctrl+D收藏网站
- 96.B2主题把本站第几号会员+500个
- 97.子比主题为注册的用户自动添加认证标识+VIP会员
我们常常在自己博客网站发表自己的一些文章,微语页面在这时候就起到了一个很好的作用。微语页面简单地说就像我们微信的朋友圈那样。
美化教程
1、首先在子比主题目录的functions.php里面加入以下代码:
//微语
add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '微语', 'singular_name' => 'singularname', 'add_new' => '发表微语', 'add_new_item' => '发表微语', 'edit_item' => '编辑微语', 'new_item' => '新微语', 'view_item' => '查看微语', 'search_items' => '搜索微语', 'not_found' => '暂无微语', 'not_found_in_trash' => '没有已遗弃的微语', 'parent_item_colon' => '', 'menu_name' => '微语' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author') ); register_post_type('shuoshuo',$args); }
2、然后在子比主题pages目录下新建一个weiyu.php文件,然后把下面代码放入weiyu.php文件中即可。
<?php
/**
* Template name: 微语页面
* Description: weiyu
*/
// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
<div class="content-wrap">
<div class="content-layout">
<?php while (have_posts()) : the_post(); ?>
<?php if ($header_style != 1) {
echo zib_get_page_header();
} ?>
<?php endwhile; ?>
<div class="box-body theme-box radius8 main-bg main-shadow">
<?php if ($header_style == 1) {
echo zib_get_page_header();
} ?>
<!--主体开始-->
<style type="text/css">
#shuoshuo_content{padding: 10px; /*min-height: 500px;*/} /* shuo */ body.theme-dark .cbp_tmtimeline::before{background: RGBA(255, 255, 255, 0.06);} ul.cbp_tmtimeline{padding: 0;} div class.cdp_tmlabel > li .cbp_tmlabel{margin-bottom: 0;} .cbp_tmtimeline{margin: 30px 0 0 0; padding: 0; list-style: none; position: relative;} /* The line */ .cbp_tmtimeline:before{/*content: '';*/ position: absolute; top: 0; bottom: 0; width: 4px; background: RGBA(0, 0, 0, 0.02); left: 80px; margin-left: 10px;} /* The date/time */ .cbp_tmtimeline > li .cbp_tmtime{display: block; /* width: 29%; */ /* padding-right: 110px; */ max-width: 70px; position: absolute;} .cbp_tmtimeline > li .cbp_tmtime span{display: block; text-align: right;} .cbp_tmtimeline > li .cbp_tmtime span:first-child{font-size: 0.9em; color: #bdd0db;} .cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size: 1.2em; color: #9BCD9B;} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child{color: RGBA(255, 125, 73, 0.75);} div.cbp_tmlabel > p{margin-bottom: 0;} /* Right content */ .cbp_tmtimeline > li .cbp_tmlabel{margin: 0 0 45px 65px; background: #9BCD9B; color: #fff; padding: .8em 1.2em .4em 1.2em; /* font-size: 1.2em; */ font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; transition: all 0.3s ease 0s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: pointer; display: block;} .cbp_tmlabel:hover{transform:scale(1.05); transform: translateY(-3px); z-index: 1; -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel{background: RGBA(255, 125, 73, 0.75);} /* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after{right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #9BCD9B; border-width: 10px; top: 4px;} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color: RGBA(255, 125, 73, 0.75);} p.shuoshuo_time{margin-top: 10px; border-top: 1px dashed #fff; padding-top: 5px;} /* Media */ @media screen and (max-width: 65.375em){.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size: 1.2em;} } .shuoshuo_author_img img{border: 1px solid #ddd; padding: 2px; float: left; border-radius: 64px; transition: all 1.0s;} .avatar{-webkit-border-radius: 100% !important; -moz-border-radius: 100% !important; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;} .zhuan{transform: rotateZ(720deg); -webkit-transform: rotateZ(720deg); -moz-transform: rotateZ(720deg);}
</style>
</head>
<body>
<div id="primary" class="content-area" style="">
<main id="main" class="site-main" role="main">
<div id="shuoshuo_content">
<ul class="cbp_tmtimeline">
<?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
<li> <span class="shuoshuo_author_img"><img src="https://q1.qlogo.cn/g?b=qq&nk=86512&s=640" class="avatar avatar-48" style="width:48px;height:48px"></span>
<a class="cbp_tmlabel" href="javascript:void(0)">
<h4><?php the_title(); ?></h4>
<p><?php the_content(); ?></p>
<p></p>
<p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
<?php the_time('Y年n月j日G:i'); ?>
</p>
</a>
<?php endwhile;endif; ?>
</li>
</ul>
</div>
</main>
</div>
<script type="text/javascript">
$(function () {
var oldClass = "";
var Obj = "";
$(".cbp_tmtimeline li").hover(function () {
Obj = $(this).children(".shuoshuo_author_img");
Obj = Obj.children("img");
oldClass = Obj.attr("class");
var newClass = oldClass + " zhuan";
Obj.attr("class", newClass);
}, function () {
Obj.attr("class", oldClass);
})
})
</script>
<!--主体结束-->
</div>
<?php comments_template('/template/comments.php', true); ?>
</div>
</div>
<?php get_sidebar(); ?>
</main>
<?php
get_footer();
注:微语头像只需把代码中”https://q1.qlogo.cn/g?b=qq&nk=12345
&s=640″修改成自己QQ号头像或者自己图片链接即可。
3、最后在后台—>页面—>新建页面—>找到“页面属性”选择“微语页面”—>填写标题—>发布就可以啦!
您已阅读完《免费(共171篇)》专题的第 98 篇。您可以继续阅读该专题下面的文章:
- 99.子比主题添加FPS帧率显示
- 100.子比主题添加滚动播报小工具
- 101.子比主题侧边栏添加简单的小模块
- 102.子比主题添加VIP视频在线解析页面
- 103.子比主题添加热门标签页面
- 104.B2主题使用Fancybox插件的图片灯箱效果
- 105.子比主题添加底部统计信息模块小工具
- 106.子比主题文章标签美化
- 107.子比主题网站点击彩色效果
- 108.子比主题添加侧边彩色滚动条
- 109.子比主题引用阿里巴巴矢量图标库彩色图标
- 110.子比主题添加右下角活动倒计时悬浮窗
- 111.子比主题首页文章点击更多按钮样式美化
- 112.子比主题首页文章列表悬停上浮
- 113.子比主题设置网站动态标题
- 114.子比主题添加鼠标样式
- 115.子比主题首页主内容上方添加跑马灯公告小工具
- 116.子比主题添加复制提示框
- 117.子比主题顶部添加彩色进度条
- 118.子比主题文章添加版权声明
- 119.子比主题底部可爱底线提示
- 120.子比主题文章页面添加文章字数和阅读时间
- 121.子比主题顶部导航栏添加背景图片
- 122.子比主题底部添加蓝色波浪
- 123.子比主题回到顶部悬挂猫咪
- 124.B2主题增加底部自定义友情链接
- 125.子比主题添加说说动态页面
- 126.子比主题修改go外链跳转页面
- 127.子比主题给网站挂个灯笼
- 128.子比主题侧边栏添加信息统计小工具
- 129.B2主题增加文章内显示最后编辑时间
- 130.子比主题添加文章更新或过期失效提示
- 131.子比主题评论框添加背景图片
- 132.子比主题更改文章列表样式
- 133.子比主题添加B站追番页面
- 134.子比主题底部炫酷引导卡片小工具
- 135.子比主题添加短视频聚合无水印解析页面
- 136.子比主题公告弹窗样式美化
- 137.子比主题修改主题字体(网站字体美化)
- 138.子比主题添加好看的侧边ip标签小工具
- 139.子比主题侧边在线征稿小工具
- 140.子比主题下载页面添加声明或说明
- 141.子比主题左侧菜单添加背景图片(手机才能看)
- 142.子比主题下载页面美化(简单的美化)
- 143.子比主题首页轮播图按钮样式美化
- 144.子比主题【夜/日】间模式切换小提示
- 145.子比主题设置网站的背景为图片背景
- 146.子比主题聚合热搜API对接
- 147.WordPress主题当鼠标指针滑动链接,将显示图像悬停滑动效果
- 148.WordPress添加动态版权日期
- 149.B2主题评论后自动刷新页面
- 150.B2主题美化-侧边跟随工具条
- 151.Windows的Num灯亮了右侧键盘数字却打不出来
- 152.子比主题添加滚动图片广告位html小工具
- 153.B2美化之侧边栏漂亮的会员优惠倒计时
- 154.B2主题添加右下角会员活动弹窗
- 155.B2主题网站添加用户IP归属地
- 156.WordPress添加底部滚动文章推荐条
- 157.子比主题修改粉色果冻泡泡loading加载动画
- 158.B2主题代码块添加一键复制和美化
- 159.B2主题添加个好看的底部导航
- 160.B2主题添加可自由缩放展开或关闭的底部浮动广告
- 161.子比主题添加底部导航带赞赏和常用按钮
- 162.子比主题美化go外链跳转美化代码
- 163.WordPress主题利用element-ui显示Notification通知【复制、禁用F12、右键菜单】提醒
- 164.给你的WordPress网站添加一个躲猫猫
- 165.B2美化之评论后自动刷新
- 166.B2美化之悬浮侧边栏滑动美化
- 167.B2主题文章每次访问随机增加访问量
- 168.B2主题动态滚动公告显示订单成交信息
- 169.密码保护:B2主题美化集合
- 170.B2首页背景自动换图搜索框
- 171.B2主题在网站添加悬浮动画广告