最近，我的技术博客从传统的 Hueman 主题切换到了 WordPress 官方的 2025 主题（Twenty Twenty-Five）。这个基于现代区块编辑器的主题非常灵活，但在适配中英双语站点并自定义页脚时，还是踩了不少坑，也积累了一些优化的心得。今天把具体的改造过程整理成文，分享给大家。
第一步：审视原始主题的页脚
切换到新主题后，默认的页脚比较“简陋”，带着很多默认的占位符和不实用的链接，非常不符合技术博客的调性。中英文两个语言版本也存在内容未对齐的问题。
第二步：定制社交图标与正确配置跳转链接
基于 WordPress 的 社交图标 (Social Icons) 区块，我们可以很方便地添加 GitHub、Telegram 等图标。
这里有一个特别容易踩坑的细节：配置电子邮件图标时，链接地址千万不能直接填邮箱，而必须使用 mailto: 协议。
正确的格式是：mailto:shuijingwanwq@gmail.com。填好之后，用户点击图标就能直接唤起本地邮箱客户端发信，体验非常好。
第三步：解决多语言导航菜单的差异化问题
我的博客使用了 Polylang 插件来支持中英双语。中文状态下页脚右侧要显示“博客”、“关于”，而英文状态下要显示“Blog”、“About”。
如果使用静态的菜单块，多语言下文字会错乱。为了解决这个问题，我引入了 Language Visibility 区块（需要安装 TMS Extensions for Polylang 插件。原生 Polylang 插件并不直接提供这个区块，只有安装了该扩展插件后才能在使用 FSE 块主题的编辑器里找到它）。
我最终构建了一个 4列 的布局：
- 第1列：品牌名称与 Slogan
- 第2列：GitHub、Telegram、Email 社交图标
- 第3列：归档下拉菜单
- 第4列：包裹了
Language Visibility的导航菜单
第四步：解决技术博客痛点的利器——归档下拉菜单
技术博客随着时间推移，文章越来越多，如果直接在页脚显示归档列表，像 2013 (34), 2014 (41)... 一直到 2026 (166) 十几个年份，会极其冗长，把页脚拉得非常高大，导致中间留白过多，极其难看。
我的解决思路是将“归档”改为下拉菜单。WordPress 原生提供了这一选项。但是，原生下拉菜单的样式很丑（特别是用 Chrome 等浏览器时会显示原生的按钮，与主题格格不入）。
我通过定义一段 CSS 样式，彻底美化了这个下拉菜单。
第五步：应用 CSS 美化下拉菜单
最终，中文和英文的页脚呈现出非常精致的下拉框，自带黑色自定义箭头，框体紧凑，宽度还能随内容自动适配。
🎁 附：兼容分类和归档的下拉菜单 CSS 核心代码
如果你也遇到同样的困扰，可以将以下代码直接复制到 WordPress 后台的 外观 -> 自定义 -> 额外 CSS 中，下拉菜单瞬间变得高级：
/* ==========================================================================
🔥 分类/归档 下拉菜单样式优化
========================================================================== */
/* 联合选择器，同时锁定分类下拉和归档下拉 */
.wp-block-categories-dropdown select.postform,
select[name="archive-dropdown"],
.wp-block-archives select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: #ffffff !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
padding: 10px 44px 10px 16px !important;
min-height: 46px !important;
min-width: 120px !important; /* 保证文字不拥挤 */
width: fit-content !important; /* 自适应宽度，解决太宽的问题 */
font-size: 16px !important;
color: #1a1a1a !important;
cursor: pointer !important;
outline: none !important;
/* 自定义黑色下拉箭头 SVG */
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 14px !important;
}
/* 鼠标悬浮边框变色 */
.wp-block-categories-dropdown select.postform:hover,
select[name="archive-dropdown"]:hover,
.wp-block-archives select:hover {
border-color: #000000 !important;
}经过这几步改造，目前我的页脚不仅保留了博客的品牌感、提供了明确的社交联系方式，还解决了多语言导航和归档展示痛点。如果你也在折腾 WordPress 2025 主题，希望这篇记录能给你提供一些参考！
发表回复