这篇文章主要是介绍如何重新制作 “Twenty Twenty Five “主题的双窗格结构。
调整 “Twenty Twenty Five “主题的双窗格结构
本博客使用双窗格配置的 Twenty Twenty Five 主题。
它分为两栏，一栏的文字占屏幕宽度的 66%，另一栏的最新文章、标签列表和存档列表占屏幕宽度的 33%。
宽度合适是因为制作得比较粗糙，而且在桌面屏幕上没有显示 Google AdSense 侧边广告。
因此，我们再次正确设置了宽度，并将其固定下来，使其在宽屏和窄屏上都能以相同的宽度显示。
设置列块宽度
查看另一个网站和本网站使用的 Cocoon Theme 的宽度。
- 左栏：800 px
- 右栏：376 px
我决定按以下方式进行设置。每个列块的宽度。该宽度是 CSS 的最大宽度。
中心柱块
在响应式主题中（如 Twenty Twenty Five 主题）、
- 如果宽度大于最大宽度，则两侧都有空间
- 左栏随着宽度的增加而逐渐变窄，当宽度小于一定宽度时，左右两栏会垂直对齐（或隐藏）。
其形式如下
我希望当两栏部分的宽度超过最大宽度时，它能居中对齐，但现在它是左对齐的。
我在 Chrome 浏览器开发工具中检查了 CSS，并在 style.css 中添加了以下内容。
/* 20250222 使整个布局居中 */
.wp-block-columns {
display: flex;
justify-content: center;
}这样，整个两列就会居中显示，两侧留出空间。
因此，Google AdSense 广告现在显示在两侧空间。
调整页眉和页脚宽度
页眉和页脚都是一列，因此我们将宽度设置为 1200 px。这使得它们与中间的两栏部分宽度大致相同。
微调两栏左侧的宽度
两列左侧部分的宽度设置为 800 px，但 Chrome 浏览器开发工具显示的宽度约为 650 px。
原因是内块设置，而内块是由组块等设置的。
例如，如果您在上层块中设置了宽度，并在下层块中选中了上述选项，则会在块的两侧插入一定量的填充。如果在下部块中选中上述内容，则会加倍添加填充。
为了避免这种情况，我取消了最顶部图块（本例中为左侧两栏图块）内部图块的选中，并设置了其宽度。此外，我还取消了下部内块的选中，并对其进行了修改，使其不包含双填充。
这样可以确保所有区块都与左侧两栏区块中设置的宽度对齐。然后，可以通过设置双栏左侧块左右两侧的填充来调整整体布局。
两栏右侧也做了类似调整。
以相同方式调整单个帖子和所有存档模板
除了博客首页模板外，还调整了单个文章和所有存档模板的双栏区域。
调整手机页眉和页脚菜单
页眉菜单现在只是一个汉堡包菜单。在移动设备上，伪全局菜单会被隐藏，同样的内容会添加到汉堡包菜单中。
它已适当多语化。分类以反映当地情况的文字显示。
将页脚菜单中的 Font Awesome 图标更改为 PNG 圆形国旗；将其替换为缩小为 20 px 的图像不会影响显示效果。以前，文字和图标颜色的改变是为了显示语言类型。现在，我改变背景颜色来显示当前语言。
这一次，我和 CSS 斗智斗勇，也没有输。我想我成功地让它以我想要的方式显示出来了。
Musubi
今天，我们调整了 Twenty Twnety Five 主题的双窗格配置布局。
通过将左侧窗格中的文字设置为 800 px，右侧窗格中的最新文章等设置为 376 px 并居中，Google AdSense 广告现在就可以在两侧留出的空间中显示。
此外，还调整了移动版的页眉和页脚菜单，并做了许多其他小修改。
一般来说，我都能按照自己的想法去做。但当我再次找到它时，我就想调整它。这是个老习惯。我就是这样学会的。我乐在其中，因为这是一种爱好，而不是工作。
发表回复