本博客在 PC 上采用双栏布局,包括博客首页;Twenty Twenty Five 主题默认采用单栏布局,因此本节将逐一介绍将其更改为双栏布局的步骤。
介绍
本博客的目标之一是使用 WordPress 的 Twenty Twenty Five 主题创建一个所谓的 “普通博客”。
其中,我认为双栏布局是作为 “正常博客 “运行的必要条件。然而,Twenty Twenty Five 主题的标准模板只有单栏布局,没有双栏布局。侧边栏模式存在,但并未使用。
自本博客推出以来,我一直在为博客首页、单篇文章和存档页面设计双栏布局显示方式。现在表格已经定稿,下面将详细介绍改用双栏布局的程序。
制作博客首页双栏布局的步骤
通过将包含博客正文中原有的查询循环和未使用的侧边栏模式的块放置在列块中,实现了双栏布局。
将左侧栏设置为 800px,右侧栏设置为 376px。
只需 15 个步骤即可将其更改为双栏布局。
需要注意
有两点需要注意。
备份
模板编辑可以被丢弃并返回到初始状态,也可以进行修订控制并恢复到特定阶段。
但是,并非总能将网站恢复到原始状态。建议您在进行任何工作之前备份整个网站。
使用子主题
如果您修改了 Twenty Twent Five 的父主题,主题的更新可能会将其还原到原始状态。
建议在使用前创建并选择子主题。
初始状态
我在 Windows11 WSL2 Ubuntu 上构建了一个本地 WordPress 环境(apache2 + php8.3 + MariaDB5.3 + WordPress 6.7.2)。下面的截图显示了 WordPress 在本地环境中运行的情况。
这是安装 WordPress 之后的状态,没有进行任何定制:Twenty Twenty Five 主题采用简单的单栏布局页面结构,帖子垂直排列。

改为双栏布局。
打开主题的区块编辑器
从管理界面选择外观->编辑,打开主题的区块编辑器。

模板选择
设计屏幕将打开并选择 “模板”。

选择 “博客首页” 模板
从模板列表中选择 “博客首页” 模板。

打开列表视图(文档概览)
选择顶部绿色框内的汉堡包菜单,打开图块列表视图(文档外观)。

扩展博客正文组
最初,博客首页由三个区块组成。
- 页眉
- 群组
- 页脚
第二个群组是博客正文。按前导 “>” 可展开它。

识别博客主体群
博客正文组由两个群组成。
- 标题块(显示 “博客” 字样)
- 查询块
在查询块中显示每篇文章。
整个群组设置在双栏布局的左侧。

添加群组
在主体组前面添加一个群组。

改为栏目
将添加的段落块改为列块。
按下图块右侧的 “+” 按钮,打开图块选择屏幕,选择 “栏目”。

选择双栏 66/33 比例
我稍后将对此进行修改,但初步选择 66 / 33 的比例。

可以创建一个双列的容器块
到目前为止,我已经为双栏布局创建了原始列块,尽管它不包含任何内容。
列块是父子关系,每个父列块创建若干个子列块。
在电脑屏幕上,子栏块的顶行显示在左侧,底行显示在右侧。在移动设备上,默认显示顶部和底部。

将博客正文块移至左侧栏块
选择博客正文块,用鼠标拖动将其移动到顶部和左栏。

侧边栏图案置于右侧栏块中
插入一个新的 “侧边栏” 图案,并将其移至右侧栏块。

您可以通过更改侧边栏模式的内容来更改所有两栏布局的侧边栏内容。
将左侧栏块的宽度设置为 800px
现在,您可以在每个列块中放置一个块。
将左侧列块的宽度改为 800 px。选择列块,将右侧显示的宽度从 66 % 改为 800 px(包括单位)。

右侧栏块宽度设置为 376px
与左侧一样,将右侧列块的宽度设置为 376px。

保存并检查操作
保存模板。
查看博客主页,检查是否采用了双栏布局。

绿色方框区域为左侧栏和右侧栏。
微调布局
有关布局微调的更多信息,包括页眉和页脚宽度,以及如何在浏览器较宽时将它们居中,请参阅以下文章。
以前文章的链接
我目前的工作。
Musubi
关于如何在 Twenty Twenty Five WordPress 主题中改用双栏布局的详细分步说明。
同样,单个帖子和存档模板也可以改为双栏布局。
修改侧边栏模式的内容将改变所有页面的侧边栏显示。您可以添加日历、添加最新和最受欢迎的帖子、添加广告,或在一个地方进行单项修改,这些修改将反映在所有页面上。
希望这对您的网站建设有所帮助。
发表回复