博客分类
接下来呢
我们再来讲一下关于blog博客博客
这里呢
其实我们要做的是两两大类的模板
一类呢是你的博客分类的模板
其实就跟产品分类的模板一样
这个就这样的页面
它是你的所有博客的文章它都显示你
或者你做一些分类
然后另外一个
就是单个单篇博客的一个模板
好我们现在开始
首先来做博客分类的模板
在后台template这里
save的template添加一个新的模板
这里呢有一个
这里没有post ARCHIVE
所以我们要用的是这个ARCHIVE
然后呢我可以啊命名一下
这里其实也有一些现成的模板
你可以用的
那么
我觉得好像这里没看到什么喜欢的
好我关掉
然后呢我们还是啊
为了确保样式的统一性呢
我还是就是随便找一个页面
然后关键是我要这个banner的这个显示
我把这个banner再复制粘贴一下
然后这个标题改成什么block
标题是block啊
然后还需要一个面包穴导航
好面包穴导航
然后我们接下来呢
就是去放我们的博客的这个分类了
那博客分类呢
我们来做一个左右两边的
就左边是你的几大类的博客分类
右边是你对应分类的
这个分类里面的一些博客
我们来增加一个容器
增加是左右两列的啊
用这样的一个左右两列的比例
然后呢呃
先还是把这个was调整一下
然后左边现在是33.33
还还是有点太宽了
调整为20
右边调整为80
然后呢让这
两个里面
两个容器之间呢
我们要留一个要要留点空隙
所以我们选中这个第一层级的大容器
让里面有20的空隙
好然后我们接下来呢
我们要在这里面添加一个
嗯先加一个
标题
标题是一个category
并且呢呃
确保是H2啊
呃反正不要H1
你可以是H2也可以是H3
啊我就让他H2
可能层次更清晰一点
然后把这个标题的文字改小一点
改成可能20就够了
好然后呢
我22BUFF稍微大一点点
然后我在这个category下面
我要增加一个
菜单
菜单我要用的是呃
WordPress menu
就是我们
我我我我们先加进来
然后一会会告诉大家
怎么去创建这个博客的菜单
那么可这里可以看到
我们现在这里可以看到呢
它的样式是有问题的
我们要调整的啊啊
首先我们看这个menu name啊
我就不用管它
关键是这里有一个menu
我这里是
现在我的网站上仅有这几个菜单
这几个菜单分别用在了main menu
是我的首页这部分
然后呢是我的页尾
company menu products menu
policy menu
然后我现在要为我的这个博客分类
这里我要创建一个菜单
所以我要怎么做
我其实要首先去创建一下这个菜单
对吧我先这里publish一下
然后我不加任何条件
先保存一下
然后去到我们的WP的后台
嗯好
然后呢在这个appearance
啊要创建美女的话
我们首先得要有菜单啊
有有有博客类目的这个名称
我们先来
看一下我的post
博客是在这个post的这个呃设置里面
先来看一下啊
我目前all post里面其实没有博客的
这个是hello world是呃
它的一个默认的第一篇文章
然后呢在category这里我们是没有的
只有一个默认的一个uncalgorized
所以我要先创建几个博客文章的分类
对吧好
比如说我创建一个news啊
NEWS1创建一下
创建这个分类
跟创建产品分类其实是一样的
NEWS2创建一下
NEWS3创建一下
NEWS4创建
然后呢我们再来到appearance这里的menu
我们来创建一个博客的menu
点击这个create a new menu这里点击它
然后呢menu name vlog
点击create menu在这个下面有一个categories
categories这个这里指的是博客的category
然后下面产品呢
是专门是一个产品的category
然后我将category这里1234全部都加过来
加到博客这里面
这个这个菜单下面保保存一下菜单
保存完菜单之后呢
然后我们再回到
刚刚我编辑博客分类的这个模板
我刷新一下
刷新一下之后呢
然后
我们再选中这个WordPress menu的这个控件
然后我们在menu这里左边menu这里
它这里已经出现了博客好
我们选中一下
现在它显示是横向排列
对吧这里有一个layout布局
它horizontal呃
这个改成vertical
垂直的好
那么1234然后呢
它目前就是呃
这个有一个pointer
pointer就是你鼠标放上去的时候
它怎么指
它这个是默认是underline
就是有一个下划线
那我们可以改成
嗯
改成background也可以吧
就这样吧
好那反正你的样式都可以调
你甚至就是比如说你point这里
你应该是可以改成noun
然后呢你你你就是改成鼠标放上去
它有这个变色的效果
那你就选中空间之后
在style这里
你可以在在这个啊
你看一下
比如说这个main menu typography hover
我改成如果改成白色
看一下哎
看一下我的鼠标好
因为我这里改成offer效果
就鼠标悬浮状态
我的鼠标放到相应的类目上的时候呢
它会改变成白色的
那我们改成红色啊
改成绿色会更显眼一点
可以看到它会变成绿的
但是我觉得这样不好看
我还是就用它这个嗯
背景background好了
我就用这个好了
好然后这个是博客类目
然后呢另外就是如果你的博客很多
你可以增加个搜索对吧
别人可能通过类目找你的博客太累了
人家可能希望有个搜索框
那么你就在左边控件里面
你找一下
找一个色区
把这个色区拖到category下方
但它的样式目前不好看
所以我们要调整一下这个样式哈
要调整一下样式
那么我们选中这个空键
然后呢这里呃
我们来呃这个submit
这里trigger这里它有一个submate button嘛
就是有这个按钮
我觉得太呃不好看
我给它改成enter
就敲回车就可以了
然后呢在这个啊
我们先预览一下
他是这样一个框
在这个框里
呢我想再增加一个图标
增加一个放大镜的
那么icon这里就是我可以增加一个呢
在这边啊
icon library左边这里icon library我搜索
search好增加这个
然后呢呃
他这里就是type to start
search这个我觉得太啰嗦了
我就search就好了嘛
就这样不是简单一点
对吧呃
然后results这里
它其实有一个life results
这个是什么意思呢
就是呃
用户搜索一个东西
它是实时的
会一些匹配结果
它会实时跳出来
那么你可以把它开启
嗯
然后在样式这里看一下啊
我看看能不能把图标放到右边来
因为可能比较符合我们习惯一点
看来是不能放
那么我们就就这样吧
好点击publish save
关掉面板
预览一下好
这是
呃然后我们再把呃左边的news的文字
这些颜的颜色都改一下改成为
等于改成这个好了
然后呢让它们全部靠左对齐
horizon这里应该是改成0
哈 0可能太靠左了
我稍微加一点点
我们让它都尽量靠左对齐
好这里呢
他会有一个
然后呢呃
他们可能互相之间的间距
好像也有点太太太宽了
稍微呃挤挤一点好了
OK这样子
好那么左边category
然后我们可以呃所以category的名称
然后呢搜索框
然后呢我们
呃这个博客的菜单
几个类目都加好了
加好之后呢
我们再往下要再加一些东西
可能呃
是会有蛮多人会可能会会遗漏的
再加一个控件
控件加什么
加卸啊对吧
如果你的博客文章好
那么你当然希望别人能够分享到
他们的社交媒体上面
所以你在空间里面呢
你加一个这个
在呃建就是刚刚是加到最下面了
我们建议是直接加在这个类目下方
share button就是在控件里面
我们搜索share分享
然后呢share button好
然后呢
把这些三个图标的这个样式调整一下
我们呃选中这个控件之后呢
在view这里只保留icon
只保留它
只保留它的图标
哎那这样的话呢
就是用户如果它觉得你这个文章好
那它可以就很方便的
去分享到它的这个社交媒体上面了
然后除了这个
啊share button之外
你是不是还可以再加点别的呢
就还有一个
其实很多人
几乎90%的做网站的人会忽略的
尤其是我发现可能很多呃
国内的网站都会忽略的
其实你应该加一个
这个叫做author box
author box就是你这篇文章的作者
为什么要加呢
因为谷歌的Su
它有一个叫EEAT的一个评分者指南
那么这里面它其实呃就是呃
具体的我就不解释了
当然我们之后会有Su的课程
会详细来讲这个
那它这里的希望就所表达的
就是我们在文章上所写的这些内容啊
是要能够呃
就是要有有具备
就是希望网站的这个内容
创作者需是要有自己实际的一些经验
并且呢
他是在这方面他是有有所专长的
他是一些
他是他是有这方面他是专家的
就是他的这些写出来的内容
是非常专业的
就是呃EAT
他的一个评分
他就希望我们的网站上
内容是由创作者
他真实的经历
过往啊他的一些所学的专长
然后由此而去创作出来的内容
所以呃这也就代表说呢
就是我们在做SEO的时候
其实你对于作者的介绍也很重要
而且它的确会影响到SEO的呃
一些效果
所以我们就是对于also就作者的SEO
往往是很多人会忽略掉的
而且呢我就是
我发现国内的很多网站
就会有这样的一些想法
就觉得说哎
不想让自己的名字出现在网站上啊
什么的可能大家比较害羞
比较内敛
但是你看国外的很多一些网站
尤其是一些博客网站
他们会特别特别注重去宣传
这个博客主本人的一些过往经历
他的过往经历里面
文字里面他会去呃
着重突出他在于这个文章上面的一些
呃特殊的一些教育背景啊
他的过往经历啊等等
所以这里面其实蛮推荐大家
还是要加一个author box
你可以author box加完之后呢
你这里设置一下好
然后我们点击custom单独定制一下
写一下啊
我先把这个图片改一下
图片我比如说哎呀
这里没有我的icon
我就用这个吧
好然后呢
名字改成
比如说then呃link link
这里一般加什么呢
就是加你的社交媒体账号
你可能你
你呃你个人
如果你有Facebook
你有呃一些博客类的网站
你可以加上去
然后呢biography
就是你的过往经验
这里呢其实极力推荐大家要写
而且呢呃
要专注于
就是上面要布局关键词
就是在你的biography
你的个人简介里面
你要不光要写拼
并且呢
你还要去内容里面要放上你的关键词
然后现在这个图标太大了对吧
好我们在这个style这里
将image size改小一点
好可能改成
35就够了
呃
然后作者的这个名字也有点太大了
我小一点
然后下面
呃
这段biography文字也可以小一点
呃然后它这里应该有个get啊
距离啊距离
我改成5就好了
就是一篇Su优化
呃对Su友好的文章
你应该也要包含你的文章作者的信息
你甚至可能这个作者信息你肯定要
呃你肯定要往往往前一点啊
我们想看到哪里
放在哪里呢
可以放在这个地方
放在social share下方对吧
对就是你这里
其实你
你应该是要有你的作者的这个信息的
um
当然这个是文章分类页
那如果你你的这个类目的文章
你可能是由多位作者去创建的
那么你是不是可以
这里放几个不同的作者的
啊这个biography啊
你可以多放几个嘛
因为确实
大家如果看国外的一些博客文啊
一些博客网站
做的好的网站
他上面其实可能会放有
他可能会有好几个作者
他好几个作者
他都会在他对应的博客风类页上面
他都会有去展示出来的
所以大家完全可以这么做
就这一点
这个是一个细节
但是其实嗯
对于用户浏览体验来说呢
它其实也是
还啊会会加分的
然后呢对于谷歌SEO来说呢
它也是会加分的
好
我们左边侧边栏大概就是这些内容了
然后我们加完
加完之后呢
我们在右边
接下来我们就加一个
就加这个就好了啊
开post就可以了啊
当然里面目前里面还没有文章
然后我们点击publish
然后我们add condition我们加到
post啊Cave点击保存
然后我们来到前端posts categories这里
我们点击这个news这这是个类目啊
我们点击看一下
啊他模模板还没有套上去
那
可能我们这个display condition设置的不对
那么我们要
看一下啊
我们点击这个OR cab水看一下
好那就对了啊
所以我们其实博客分类的模板
我们要套在如果你是所有的
那么那个那个文章分类上
你你想多用这个
那你就是OK
哈哈开然后当然
你也可以指定这个模板
套用在某一个博客类目上
那么你这里可以点击categories
然后这里就只要输入
比如说NEWS2这个类目就可以了
你可以这么做的
我还是呃o r Cave
然后say保存一下
呃那现在我们还是看到这个
它没有
就是这个banner它没有全框对吧
嗯那我们现在就这样呢
其实看着也没什么不舒服的
我感觉看着也还可以
但是现在在右边这里啊
没有任何呃
就是这个类目的没有任何模
呃一些博客的显示
对吧所以我们加几篇博客
然后让大家来呃实际的预览一下
看看他右边是怎
么显示的
而且右边是还可以有些样式的调整
然后我们来先加一下博客的一些文章
我先加一些演示文章
好我们的博客呢
已经加好了
我加了4篇
在NEWS1的这个类目里面
我们来前端刷新看一下
好那它现在已经出现了
那么但它现在这个显示的样式呢
其实整体看还可以
但是其实我们还可以再调整的啊
我给大家看一下怎么调整啊
我这里要刷新一下
我们选中这个控件
就是右边这个控件
点开structure
叫做archivepost
然后呢选中它之后呢
在右边这里scheme这里它目前默认classic
你可以选择cards看看右边有什么变化
哎它是这样的
其实cards看起来会更加的啊
简约时尚又好看一点啊
然后呢columns这里就是你要几列
那么三列
我就是正好
然后呢要不要显示这个
我放的这个特色图片
当然是yes对吧
图片的像素建议就是medium
medium 300*300就好了
因为这样
可以让你的加载速度变得更快一点
这些其实下面这个呃
图片ratio比例啊
什么建议不用调
title要的啊
就是下面这些
嗯然后呢
这个h title
html tag你就我建议就默认H3就好了
x就是你的摘要
你的你的这个文章要不要显示摘要
那么一般来说呢
就是摘要就是这个标题下面
它会有一段话
然后你同样是在上传文章的时候
你可以加一下
那这个摘要呢
我建议其实还是可以要一下
但是你我们可以把
这个x Blance摘要的这个字数啊
我们给限制在20个单词
就这样的话呢
就是你哪怕摘要你可能写了50个单词
但是它这里它只显示20个单词
呃防止你的这个页面上
内容显摘要显示太多呢
文字太多可能会不太好
然后下面这个叫做metadata
就是这里呃
metadata就这个
就是这个地方啊
它这里显示日期评论
呃你要不要对吧
那么我可以把评论删掉
我只留这个日期就好了啊
然后作者你看要不要
你可以去加
作者的话
就是谁啊
你用了哪一个
你的网站后台账户登录去写的文章
那么它这里
自动就会显示那个作者的名称的
啊然后read more对吧
你可以要的啊
badge指的是看一下
by就指的是右上方
其实是你的这个类目的这个
呃这个这个徽标
那其实不需要的
因为我们类目就在左边
我左边选NEWS1
那它这边显示的全是NEWS1
我选NEWS2就全是NEWS2的
所以我可以不要Avat
就是是你的这个作者的这个啊
图标
那么这个就你自己决定要不要加
就是呃
你的这个作者的头像呢
是在你你你的账户的后台那里
在user这里
你可以自己去增加一个
你的这个账户的头像的
那么我们不是要做作者offer SEO嘛
所以我们其实加一下也OK的对吧
然后下面这里你可以设置什么翻页啊
还有一些高级设置等等
你可以去具体看一下
好我们就保持这样子吧
然后呢我们点击publish好点
呃在前端再显示看一下
哎看着好像会舒服一点了
那我们呃
有的人可能希望说呃
就是你可能在有些网站上
你会看到它左边的这个category
这部分啊
它会粘贴在网页上
就是右边的文章可能很多
可能每一页有有数十篇
有20篇你可能要一直往下拉
但是呢
你希望你的这个category这部分呢
你是一直能够呃
呃维持在页面的
这个部分呢
大家可以看
我这里其实已经把这个标题设置为呃
sticky to top了
对吧但是标题
光标题不够
我需要将整个部分
我要都能够粘贴在这个前端
不管我鼠标往下滚多少
那么这部分的内容
我希望一直都是保持在这个页面顶端
那么我们来教大家设置一下
这里呢呃
我们可以看
因为我刚刚呃
我就将这个标题就设置为这个
在advance motion EFFECTS这里呢
有一个叫sticky top
但是现在我要是将标题
搜索框啊
news等等这些全部都设置为顶
在顶部所以
我们其实要为它增加一个容器进去
我们要为他增加一个容器进去
好我们来往里面增加一个容器
就是在这个大容器里面
再套一个小容器
然后呢在小容器里面
我们把这些内容全部都加进去
复制粘贴
复制粘贴
复制
粘贴
然后再把上面这些多余的都去掉
删掉
好那么现在呢
因为我们容器里面又套了一个容器
然后在里面往往里面加控件
所以会导致这些空件离旁边的边距
就会距离太多了
就对不齐嘛
所以呢
我们要先选中里面这个这层容器
将它的内边距padding调整为0
然后
如果你依然觉得还不够对齐的话呢
是因为它因为外面还有一层容器
就上层还有一层容器
那么你也可以将这层
这层容器的这个padding调整为0 好
这样的话呢
他就是完全对齐啊
对齐的然后啊
我们还可以在这一层容器
我们
我们来尝试给他加一个右边的边框吧
这样的话就可以让他在右边有一条线
好我们
选中这个容器
之后呢你在style这里
style下方就是边框
在样式里面
在board这里
然后呢我们先board type选中
选择实现
然后呢
波的边框的宽
我们把这个同步调整的关掉
就只要一个右侧的
右侧我们调整为2
来看一下
他会有一条线
但是这条线太深了
我希望用一条淡颜色的灰色啊
这样子可能会看着会呃
稍微好一点点
但现在呃
大家有没有发现
这个搜索框离这条线好近
对吧
但其实这个细节我们也可以调整一下
我们怎么做
其实就是要在里面这个容器里面
加一个内边距嘛
这里稍微有点空隙对吧
好我们选中里面这层容器在内边距
呃在右侧这里我们可以增加一个
变成5 好了
好那这样子可能会看得好一点
现在呢我们最后呢来
最后再将这个容器能够呃
sticky to top就是粘贴在顶部
选中这个容器在advanced这里
之后呢呃
在advanced这里
motion EFFECTS sticky top可以看一下
我们先来预览一下啊
刷新
然后呢他粘贴住了
但是当你鼠标继续往下滚
他还会往下对不对
那我们还要再加一个设置
在sticky top这个下方呢
有一个叫stay in column
就是留在这个column之内
你把它开启
再点击publish
然后我们在前端刷新一下
好那这样的话他就到底的时候呢哎
他就跟着一起上去了
到底的时候跟着一起上去了
好那么这样子之后呢
其实我们这个博客的分类页面
就是相对就比较完善了
也其实已经做好了
然后如果你觉得这个banner图
你觉得这样子不好看
你想让它全宽的话呢
那么其实跟之前我们做产品分类页
那个banner调整一样的
呃同样还是在customize这里
大家可以看
就是customize这里
我们前面调整产品分类页那个班的
呃container是在Woocommerce对吧
那么我们现在就是在博客这里
blog这里有一个blog ARCHIVE这里呃
它的container layout它是defour
默认状态下我们也给它调成全宽
然后呢我们在news里
我再刷新一下
哎可以看到它目前就是全宽显示的
可能还是全宽看得会舒服点啊
好那我们就保持这样全宽好了
然后呃我们来看
如果我点击NEWS2
那因为我NEWS2里面是没有什么文章的
我点一下它里面就什么都没有
3和4也都没有
但是news ina我是有文章的
好
那博客分类的制作就到这里就结束了
