【wordpress系列教程】02 Blocksy主题

这节课我们继续用WordPress来制作网站。

在管理后台,你可以点击左侧的"外观"菜单,进入主题列表。主题决定了您网站的外观。这里默认启用了一个2025的主题。你可以点击"安装主题",里面就会出现各种各样的主题。

其中有几个比较热门的主题可以做出很美观的网站效果,例如Astra。它里面包含了很多个网站模板可以选择,用来做个人博客或者展示网站都是不错的。

这节课我将跟大家推荐另外一款叫做Blocksy的热门主题。你可以在主题列表中往下滑找到它,或者在顶部的搜索框里直接搜索"Blocksy"。

找到主题后,点击"安装",安装完成后点击"启用"。

此时,你可以再次打开网站,会发现网站的外观就发生了变化。

回到主题列表,这里显示我们已经启用了Blocksy主题。下面这些默认的主题就可以分别点击它们,然后删除掉。

启用Blocksy主题后,在顶部会有一个提示,安装"Blocksy Companion"(Blocksy伴侣)这款插件。

WordPress可以安装很多插件,使用这些插件可以给网站赋予很多功能。

这里的插件是主题自带的,安装后可以方便我们使用这款主题。

点击安装,安装完成后插件会自动启用。这时,管理后台的左侧菜单中就会出现一个"Blocksy"的选项,右侧是一个新的页面。

在这里可以点击"Starter Sites",下方就会出现很多个网站模板。除了右上角带"Pro"标志的模板需要付费使用以外,其他的模板都是可以免费使用的。

你可以点击"Preview",也就是预览按钮,来查看一下这个模板的外观是什么样子。

因为WordPress里面的大部分模板都是英文版,所以这些模板也都是英文的。但是你可以发现这些模板都非常有设计感,只要把网站上的内容修改一下,就可以得到一个很漂亮的网站。

回到后台,选择一个你喜欢的模板,然后点击"Import"(导入)。

弹窗里首先需要选择安装子主题,然后点击下一步。这里会让你选择网站编辑器,编辑器其实也是插件,这些插件可以帮助你可视化地编辑网站。默认选择的是Gutenberg(古腾堡编辑器),另外一个是Elementor。推荐使用默认的古腾堡编辑器,Elementor可以搭配前面介绍的Astra主题一起使用。继续点击下一步,模板就会自动开始安装了。

在安装的过程中,你可能会遇到"Connection Timeout"这样的报错。主要原因在于安装主题的时候网络超时了。

你可以点击左侧的"工具"菜单,找到"站点健康",在"信息"里找到"服务器"。可以看到PHP时间限制是300,最大输入时间是60,这些配置参数太小会对模板的安装产生影响。

如果你是本地建站,可以打开PHP Study,在软件管理中找到PHP(默认使用的是7.3版本),点击设置,把里面的"执行超时"和"解析超时"都改大一点,比如这里我都改成6000。

如果你是云端建站,可以在宝塔面板的左侧打开"软件商店",点击"已安装",在列表里找到PHP,点击设置。在弹窗左侧点击"配置修改",把这里的"最大脚本运行时间"和"最大输入时间"也改大一点,比如6000。

修改完成后,回到管理后台的"站点健康"页面,刷新一下,看一下服务器的PHP时间限制有没有更新。

如果变成了你自己设置的6000,那么再点击左侧的Blocksy,在"Starter Sites"里面找到需要的模板,点击"Import",这样主题就可以正常安装了。

弹窗提示"Starter Site Imported Successfully"(初始站点导入成功),点击"View Site"(查看网站)。

现在你看到的网站效果就跟模板里显示的一模一样了。

这些模板基本都是响应式的,也就是可以在不同尺寸的设备上自适应变化,让网站内容完整呈现出来。

在网页上点击鼠标右键,选择"检查",在开发者工具中点击顶部这个切换设备工具栏的按钮,然后就可以切换网站显示的尺寸,比如调整为手机端或者平板电脑。可以看到网站的显示内容会响应式变化。

如果你觉得当前这个主题不符合你的需求,那么也可以在模板列表里选择其他的模板重新导入。

成功导入了网站模板,接下来就需要对模板进行一些修改了。你可以点击顶部工具栏里的"自定义"功能。

在自定义编辑页面,左侧是编辑菜单,右侧是网站的外观效果。

我们来看看这些常用的设置。第一个选项是"常规",这里面又有很多个子选项,首先是"布局"。

这里可以调整网站的最大宽度、内容间距等参数。你可以尝试修改这些参数,看看网站会发生怎样的变化,把网站上的内容调整到合适的距离。某些设置项的顶部会有三个图标,分别代表了电脑端、平板端、手机端。当你点击这些按钮后,右侧的网站效果就会变成对应设备的显示效果。可以通过这三个按钮单独对电脑端、平板端或者手机端的内容进行设置。

接下来是"按钮",这里可以设置按钮的最小高度,以及开启悬停效果。

在"设计"选项卡中,你还可以设置按钮的字体颜色或者背景颜色。

下面还可以设置按钮的内边距和圆角半径,这些参数你都可以自己调一调,看看页面上的元素会不会发生变化。

后面还有一个"面包屑导航"。什么是面包屑呢?这个词应该是翻译的问题,但是它一般指的是页面路径的导航。比如随便打开一个子页面,这里就会显示"首页"和当前的页面。你可以修改这里的分隔符,把它改成三角形或者斜杠。在"设计"选项卡中也可以修改字体和颜色。

在"常规"选项中,还有两个开关,一个是"滚动到顶部",一个是"网站框架"。

启用网站框架,你的网站页面就会出现一个边框。可以点进去修改框架的颜色和大小。

启用"滚动到顶部"开关,当你向上滑动网站时,右下角会出现一个箭头按钮。点它,页面就会自动滚动到顶部。你还可以修改这个按钮的样式,比如把它改成一个小火箭,或者其他的图形。按钮的形状默认是正方形,你也可以把它改成圆形。还可以调整按钮的大小和位置,这些都很好理解。

再来看网站顶部的导航栏,这一部分有网站的logo、菜单以及按钮。这一部分你可以通过自定义菜单里的"页眉"选项进行修改。选中"页眉"后,底部会滑入一个编辑区域,这里可以看到有标识、菜单、按钮等。你可以点击"标识"修改网站的logo。在弹出的窗口里上传一张图片,可以从你自己的电脑上进行选择。下方可以设置标志的高度,可以分别给电脑、平板和手机设置不同的参数。你还可以在底部编辑区域拖拽上面的元素,改变它们显示的位置,或者删除元素。

还可以在"页眉"选项中拖动其他的元素进来,比如"搜索"功能。

右上角这个按钮,你也可以点击对它进行编辑,比如修改它的文字、要跳转的链接,是否要让链接在新的标签页打开等等。

你可能需要修改的就是中间这个菜单部分了。你可以先返回,然后在下方找到"菜单"这个选项。这里就可以对菜单上的文字进行修改,比如把这里的英文全都改成中文。

设置好了顶部导航栏,也就是"页眉"这一部分,我们再来看看"页脚"。这一部分就是网站的最底部,它的设置方式跟页眉很类似。首先看一下底部这个编辑区域,它会有三个"行",分别是顶部行、中间行和底部行。你可以点击每一行左上角的设置按钮,左侧菜单就会切换到针对当前行的设置选项。你可以设置这一行有多少列,然后根据下方的图示来选择这些列所占的空间分别是多大。比如可以让第一列更宽一些,剩下的列平均排布,或者是所有的列全部平均排布。

根据你自己的需求设置好每一行的列数和列宽之后,你可以点击底部编辑区域里的这些元素。左侧编辑菜单中就会跳转到对应的编辑区域,你可以在这里对上面的文字进行修改。

比如你可以修改底部的版权信息。这里的文本里面会有一些标签,它们是用花括号{}包裹起来的。例如"{current_year}"代表的就是当前的年份,这个标签会自动调用当前的年份然后更新在网站上,就不需要你自己手动更新了。其他标签的原理跟这个类似。

在版权信息里,你还可以回车空行,在底部写上网站的备案号。根据工信部的要求,点击顶部的"超链接"按钮,给备案号添加上超链接,跳转到工信部的备案管理系统。如果你的网站不用做域名备案,也可以不需要这一行内容。

自定义菜单还可以对网站的整体色调和字体进行修改。剩下的一些设置和功能可能并不常用,你可以自己研究一下。最主要的功能还是拿来编辑页眉和页脚。

以上就是本节课的全部内容了。下节课我们再来看怎样编辑网站页面。

相关推荐
遇见火星2 小时前
Jenkins核心部署流程
运维·jenkins
我笔记3 小时前
vue 子父调用
前端·javascript·vue.js
gaize12133 小时前
服务器异常如何解决
运维·服务器
编程饭碗3 小时前
【Java循环】
java·服务器·算法
毕设源码-朱学姐3 小时前
【开题答辩全过程】以 基于vue.js的校园二手平台为例,包含答辩的问题和答案
前端·javascript·vue.js
m0_471199633 小时前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
dragoooon343 小时前
仿muduo库实现高并发服务器-面试常见问题
运维·服务器·面试
hoiii1874 小时前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab