WordPress自动标签插件
Wordpress建站教程:美化Wordpress默认的H标签样式
作者:悦然wordpress建站(悦然建站)
(此处已添加小程序,请到今日头条客户端查看)?继续分享wordpress建站教程,今天我们给wordpress站点默认的H标签修改样式,让它好看一点。如果你的网站文章内容比较长,那么大概率会用到H标签,至少会有H2标签,或者是H3标签,这样可以让网站内容显得更有条理,对网站SEO优化也有不少好处。但是wordpress默认的H标签样式是比较难看的,只有一个又大又粗的样式。接下来我们就开始对H标签样式进行简单的美化。
步骤一:找到当前网站的H标签样式有人可能尝试过直接代别人分享出来的CSS样式,但是直接使用时却没有生效,因为不同的网站不同的主题,它原来的CSS样式ID是不一样的,所以我们需要先找到当前网站的H标签CSS样式。
?先打开一篇含有H标签的文章,浏览中按F12进入开发者模式,选中H标签,从代码中找到当前H标签的CSS样式,如上图右边,我们确定了当前网站的H2样式ID为【.blog-details .details-content h2】。然后我们只需要把写好的CSS样式添加进去就可以了。同样的方法我们可以找到H3标签为【.blog-details .details-content h3】。
步骤二:编写CSS样式接下来我们可以直接在浏览器在调试CSS样式,如果不懂也可以直接让别人写好的来修改,最终悦然建站确定好的样式如下:
.blog-details .details-content h2 { font-size: 22px; margin-top: 20px; padding-left: 10px; position: relative; border-bottom: 1px #eee solid; border-left: 5px solid #fcab03; margin-bottom: 10px;}.blog-details .details-content h3 { font-size: 18px; margin-top: 20px; padding-left: 10px; position: relative; border-bottom: 1px #eee solid; border-left: 3px solid #fcab03; margin-bottom: 10px;}步骤三:添加CSS代码
最后我们只需要把上面的CSS代码添加到当前使用的wordpress建站主题中即可,悦然建站之前的一篇文章给大家介绍过修改CSS的方法,大家没看过的可以先去了解一下。
WordPress建站教程:为什么修改CSS不能立即生效?如何解决?
?这里悦然建站推荐添加额外的CSS代码,不要直接修改主题的CSS文件。上面的代码可以直接添加到主题的【额外CSS】功能中,或者是添加到其它的CSS插件中。部分主题在添加上面的CSS代码时需要使用style标签闭合。
?最终的H标签效果如上图所示,上面分别是H2和H3标签的效果,这样会比原来的H标签样式好看一些。
总结今天的wordpress建站教程就分享到这里。这里要提醒一点,虽然CSS样式可以实现很多漂亮的效果,但是如非必要,CSS样式还是不要太多,多了反而影响效果。
?
2021年Wordpress博客装修美化(二)
使用古腾堡来排版页面废话不多说,我们直接开始吧,今天主要来聊聊如何使用Wordpress自带的可视化页面编辑器。我相信只有驾驭最基础的可视化排版,后面才能对高级版本的扩展可视化编辑器elementor有着更深刻的理解。
图文排版1,登录WP后台管理页,找到文章,去添加一个文章。如图(我把之前的示例清空了),
添加之后,列表会出现在下面。
进入添加文章之后,先把标题添加上,固定链接,最好自己设置,方便SEO,分类的话,我这边先写个案例。以方便演示,后面会讲分类的设置。设置完成后,我们可以先点击一下保存草稿。WP默认也会实时地保存。
下面为了避免版权问题,我们先去找一个神器,[狗屁不通文章生成器],随机生成一篇文章。生成好文章后,按照下面的方式添加进去
也可以按左侧的添加板块,将需要的板块拖拽到内容区域。
我们可以直接从左侧操作栏拖拽一个图片放在文档的开头。图片可以来自URL,也可以媒体库。
如果我们需要添加图片与文字的组合,我们可以使用列,
在文章的任意地方,我们可以添加一个列,根据需要,来进行对列的选择。比如,我们选择7/3分。
我们在第一列选择图片,第二列选择文字,
其实这样的多列看起来总是缺乏很多的违和感,我们还可以用古腾堡提供的媒体图文块,
调整一些排版,就可以像这样。
就这样,看起来就像杂志的排版。下面,我们来组多图插入,做一个画廊,
直接拖拽过来,从媒体库选择一组图片。古腾堡会自动进行图片排版。
最后,我们来为文章插一个封面,
发布一下,我们回到博客主页看看,
好了,到现在为止,图文排版差不多就这样了。还有更多的板块,同学们可以自由去发挥,比如插入视频,图表,子标题,链接到别的网站等内容。
Qubely古腾堡的神兵利器去插件下载一个qubely,完成安装激活。我们只需要使用其免费功能即可。
激活后,我们来添加一个主页,作为我们打开博客页面的门面。如下图
此时,我们打开主页进行编辑,发现很多高级块,可以随意拖拽到内容区体验下。
我们现在可以拖拽一个图片过去,并更改页面模板,为全宽(Qubely Full Width),如下,
我们选中图片区块,在右侧的操作栏,可以看到区块的样式,并从此处去选择媒体库中的图片,
这里只是一个示例,现在我们可以把图片删掉,添加一个行块,来增加更复杂的组块。如下图,
我们可以在高级你们设置内边距,外边距等。我们也可以为行块添加一个背景图片,使其更有层次感。照着自己的感觉去调整。
调整完成后,我们可以直接把我们刚才的文章,添加到我们的首页,
根据自己的需要,完成一些调整设置后,我们点击发布。发布完成后,我们可以去自定义网站,将该页面设置为我们的网站首页。步骤如下,
确认无误后,点击发布,即发现,现在的首页已经是我们设计的啦。(如果觉得自己做的首页不好看,不设置,也没有关系,我们后面有机会还会讲更强大的网页编辑器,只需要简单地拖拽,就可以完成随心所欲的页面)
我做的页面感觉实在不好看,我给删了,用默认的页面
分类和标签分类,即是把文章按照树形结构进行排列分组。可以对分类进行父子关系的组合。而标签,主要的目的是提取文章的核心关键词,以便搜索引擎索引。一篇文章的核心关键词不建议超过五个。
设置分类,建议别名使用英文,方便SEO
我这边按照我的编程计划,设置一些内容。完成类别的设置后,我们去自定义菜单,将分类作为菜单。
我们先创建一个主菜单。
在管理位置中,将菜单添加至页眉的菜单
这样,我们回到首页,便可以看见菜单已经配置到我们的主页面头部了。
我已经在菜单中,调整过想要展示菜单的顺序了。
页眉和页脚设置简介关于页眉与页脚,这期只简要提到一下,不做深入讲解。我贴几张图,从左往右,大家去操作一下,即刻能明白其中的意思。比如页头,
页脚也这样,
我们可以对具体的内容进行编辑。比如对社交媒体进行编辑。
尾记至此,一个基本的属于自己的博客网站,已经差不多设置完成了,剩下的功能,需要同学们自己去多折腾折腾。我自己在操作的过程中也一直再思考一个问题,要不要把博客的风格再升级的花里胡巧一些。后来都被我否定了。
对于我们核心的目的是写内容,存储内容,我想这样简简单单,用户看完内容就走。不去设置各种弹窗广告去骚扰。也不要添加过多的插件,避免影响网站的稳定性等问题。
然?就这?结束了?
No,这怎么可能。我的意思是说,作为一个博客网站的基本功能,现在已经具备了,我们需要花一些时间填充一些文章。直到我们遇到下一个问题。比如运营过程需要对SEO进行优化。对访问进行统计。需要表单对反馈信息进行收集等。甚至,我们需要销售一些自家的产品,等等。
既然我们的主线是电商,下一篇开始Woocommerce咯。
给WordPress文章和页面添加背景图片图文教程
你想给你的网站进行美化吗?一种方法是在你的WordPress页面上添加一个背景图片。毕竟背景图片是放在页面内容后面的图片或设计,以美化页面。如何给WordPress文章和页面添加背景图片?在WordPress网站上添加背景图片有不同的方法。
原文引用:给WordPress文章和页面添加背景图片图文教程 - 搬主题
在本图文教程中,搬主题将介绍三种很容易做到的方法。
一、为什么要在WordPress中添加背景图片简单地说,它们美化了你的网站。相对于在整个网站上使用普通的背景,在你的网站背景上显示一个图像会增加一些美感和专业性。
在过去,人们试图保持他们的网站设计尽可能的简单。虽然这在当时很有效,但后来情况发生了变化。随着全球网站数量的增加,确保你在竞争中脱颖而出是很重要的。实现这一目标的方法之一是改善你的网站设计。使用背景图片就可以为你的WordPress网站做到这一点。
二、添加背景图片的弊端正如一切有优点的事物一样,如果使用不当,也必然会有弊端。下面我们将讨论其中的一些问题。
首先,一些背景图片可能会出现在完全不合适的地方,并扰乱你的页面内容。这将导致用户错过你打算在你的页面上传递的信息。其次,不对移动端负责的背景图片可能会影响你网站的移动可用性。大多数用户从他们的移动设备访问互联网。出于这个原因,作为一个网站所有者,移动友好性应该是你最关心的问题。
最后,如果你使用的是大文件尺寸的图像,这可能会增加你网站的加载时间。因此,加载时间的增加会导致高跳出率,这反过来又会影响你的页面SEO。当然,你可以通过使用图像压缩插件或在上传到你的网站之前简单地在线压缩图像来避免这种情况。
三、如何在你的WordPress文章和页面上添加背景图片有三种方法可以在WordPress网站上添加背景图片。那就是使用默认的主题选项、使用插件或使用自定义CSS代码。下面,我们将告诉你如何使用它们中的每一个。
1、默认主题选项一些WordPress主题支持使用图片作为页面的背景。如果你的主题支持它,你可以在你的管理面板上的自定义页面启用它。首先登录到你的WordPress仪表板,然后进入外观>>自定义。这将会出现WordPress主题定制器页面。
在右边,你会看到你的网站的实时预览和最近的变化。左边的面板包含了你的主题所提供的各种自定义功能。要设置背景图片,请点击背景。
在 "背景"菜单上,你可以使用一个图像或颜色作为你的背景。要使用图像,请点击 "选择图像"按钮。
接下来,从你的WordPress媒体库中选择一张图片。要上传一个新的图像,选择 "上传文件 "标签。然后点击 "选择文件",从你的电脑中选择图像。
将图像上传到你的网站后,点击选择图像按钮。
要改变图像的大小和显示,请点击 "预设 "下拉菜单并从可用的选项中选择。你可以测试每个选项,以确定哪个选项对你的图像效果最好。
在 "图像位置 "下,你可以选择你想要对齐图像的角度。当你完成了对图像的定制后,点击 "发布"来实现这些变化。你可以访问你网站上的任何一个页面,看看背景看起来如何。
默认主题背景选项的弊端使用大多数主题提供的默认背景选项的弊端是它没有提供很大的灵活性和控制背景图片在你的页面上的外观。此外,背景图片是全局性的,适用于你整个网站的帖子和页面。因此,如果你想为其他页面和帖子使用不同的背景,你可能会发现这很困难。幸运的是,有了WordPress的添加背景图片的插件,你在为网站的任何部分或页面添加背景照片时,可以得到很大的控制和灵活性。
2、使用WordPress插件如果你的主题设置中没有添加背景图片的选项,你可以使用一个插件来添加它。在本节中,我们将展示如何使用两个插件来做到这一点。
如何用Elementor在WordPress中添加背景图片Elementor是WordPress最受欢迎的拖放式页面生成器插件之一。该插件有很多功能,让你使用交互式仪表盘建立一个完整的网站,而不需要写一行代码。
在这里,我们将使用背景功能为WordPress网站上的部分添加背景图片。要开始,你需要从你的WordPress仪表板上安装并激活Elementor插件。
这里可以从搬主题站点下载汉化中文版《Elementor Pro完美汉化中文版|页面拖动自定义设计WordPress插件介绍》
激活该插件后,你可以使用直观的仪表盘来编辑你的WordPress文章和页面。首先,进入页面>>所有页面,然后在你想修改的页面下面选择编辑。
在页面编辑器上,点击 "用Elementor编辑 "按钮,打开仪表板。Elementor仪表板有很多功能,可以帮助你编辑网站的任何部分。你可以在 "内容 "选项卡中添加文本、标题、图片、视频等。
假设我们想在你的页面上的某个部分添加一个背景图片,点击六点图标,突出整个部分,如下图所示。
在 "风格"选项卡上,点击背景下拉菜单。接下来,选择钢笔图标,然后点击选择图像。
现在从你的WordPress媒体库中选择一张图片或上传一张新图片。
添加背景叠加
在选择图像后,你可以添加一个背景覆盖,这样图像就不会扰乱你的内容。为此,点击背景叠加下拉菜单。
然后在 "颜色 "部分选择你要使用的颜色。
当你完成添加图像和效果后,点击更新按钮,保存你的变化。通过这种方法,你可以在网站的任何部分或页面添加无限的背景图片。只需选择页面,然后用Elementor插件编辑,添加你的背景图片。
Advanced WordPress Backgrounds(AWB)插件添加背景图片另一个你可以用来在WordPress中添加背景图片的插件是Advanced WordPress Backgrounds插件。除了添加背景图片外,你还可以使用视频作为你的背景元素。这些视频可以来自你的媒体库、YouTube或Vimeo视频。
还有一些特殊的效果,你可以应用到你的图片上,如视差滚动效果。在这里,我们将专注于添加一个背景图片,但如果你想了解更多关于背景效果的信息,请查看我们关于在WordPress添加视差效果的详细指南。要开始,你需要在你的WordPress仪表板上安装和激活该插件。为此,进入插件>>新增。在搜索框中,输入 "advanced WordPress backgrounds"。接下来,点击立即安装按钮,在安装完成后激活该插件。
如何使用AWB插件要使用这个插件,请进入页面>>所有页面。然后在你想添加背景的页面下面选择编辑。
在编辑器上,点击添加块图标,然后在搜索框中输入 "AWB"。当它出现时,选择背景(AWB)块。
接下来,在右侧选择你想添加的背景类型。你可以使用背景颜色、图像或视频。选择 "图像 "选项卡并点击选择图像。
之后,从你的媒体库中选择一张图片。
你可以分别使用 "尺寸 "和 "背景尺寸 "选项来改变图像和背景的大小。添加图片后,点击 "更新 "按钮,保存你的更改。如果你使用的是经典编辑器,导航到你想添加背景图片的页面或帖子。一旦到达那里,点击高级WordPress背景图标。
在 "常规 "选项卡上,点击背景类型下拉菜单,然后选择图像选项。
接下来,点击选择图像按钮,然后从你的WordPress媒体库中选择一个图像。
你也可以更新图像的大小和位置。如果你想添加一个覆盖层,点击 "覆盖颜色 "下面的 "选择颜色"。接下来,选择你想使用的颜色。
而现在,在自定义背景图片后,点击插入。
这将生成一个短码,并自动将其插入你的编辑器中。在这个简码中,你可以输入你希望在背景图片上显示的文字。一旦完成,点击 "发布/更新 "按钮就可以实现改变。现在你可以在你的网站上查看该页面,看看背景图片的样子。
3、使用CSS手动添加背景图片如果你是技术控,你可以使用自定义CSS代码来为你的网页和文章添加自定义背景。使用自定义CSS可以让你对图像的外观和位置有很大的灵活性和控制。
使用CSS方法,有许多背景图片的位置可供选择。首先,我们可以创建一个全局性的CSS背景图片,它将显示在所有页面上。很像一些WordPress主题所提供的选项。另外,我们可以添加特定类别的背景图片,或者创建一个带有背景图片的CSS类。然后,你可以将该类应用于单个帖子和页面。