介绍
本博客的目标之一是使用 WordPress 的 “Twenty Twenty Five “主题创建一个所谓的普通博客。它将是响应式的，在个人电脑和智能手机上拥有相同的外观和感觉，但我还希望添加一些智能手机特有的可用性功能。
多语言支持是另一个目标，因此我在智能手机屏幕底部安装了一个底部导航器，以便您可以在不同语言之间切换。此外，由于本博客是一个很长的垂直页面，我还安装了一个返回顶部按钮。
如何安装底部导航器
我本想使用一个插件来处理这个问题，但没有找到很好的插件。我想在底部导航部分加入图片，但大多数图片都是以放置图标的形式出现，如 FontAweSome。
我们试着看看能否在 Gutenberg 编辑器中用区块设置底部导航器，结果发现外观还不错。
左起的三个部分由 Gutenberg 编辑器中的块组合而成，并用 CSS 固定。最右边返回页面顶部的部分是用 jQuery + CSS 制作的。
各语言切换部分的构成
底部导航部分是以图案的形式创建的。该结构由一组水平图块和组内的四个垂直图块组成。
上排的三面旗帜采用了相同的结构，由圆形旗帜和字母垂直排列而成。
垂直对齐块体的宽度设置为填充，以便对齐时宽度相等。此外，还在圆形旗帜和字母上设置了链接，以便跳转到每种语言的首页。
页面返回顶部部分的构成
返回页面顶部的部分是使用 jQuery 和 CSS 制作的。参考了以下网页。
首先是 jQuery 部分：在 “Twenty Twenty Five “子主题目录下创建 jQuery 文件 to_page_top.js。
// 返回顶部按钮
jQuery(function(){
// 滚动时运行
jQuery(window).scroll(function(){
// 设置所需的滚动音量(px)
var targetPos = 300;
// 获取当前滚动位置
var scrollPos = jQuery(window).scrollTop();
// 确定当前位置是否已达到滚动量
if( scrollPos >= targetPos ){
// 按钮显示
jQuery("#toTop").fadeTo(200,1.0);
}else{
// 半透明按钮
jQuery("#toTop").fadeTo(200,0.2);
}
});
jQuery("#toTop").click(function(){
// 返回顶部的速度 越多越慢
jQuery("body,html").animate({
scrollTop: 0
}, 200);
jQuery("#toTop").fadeTo(200,0.2);
return false;
});
});
最初的方法是显示图标，并在滚动时使其消失或出现，但这次图标始终可见，透明度也进行了调整。
下一部分是添加 functions.php。
// Scroll Action to Page Top
if (!is_admin()) {
function register_script(){
wp_register_script( 'scroll-action', get_stylesheet_directory_uri() . '/to_page_top.js', array( 'jquery' ), '', true);
}
function add_script() {
register_script();
wp_enqueue_script('scroll-action');
}
add_action('wp_enqueue_scripts', 'add_script');
}创建的文件名和目录位置会被修改。
接下来是 CSS。将其添加到子主题的 style.css 中。
/* 20250208 Move Button To PageTop */
#toTop {
border-width: 0px;
border: none;
color: #516028;
background-color: #dae7bd;
opacity: 0.2;
padding: 0;
outline: none;
/* cursor: pointer; */
}
#toTop:focus {
/* 移除按下按钮时显示的外框。 */
outline: none;
}“按钮” 因为要显示边框，所以要用 “边框宽度”、”边框 “和 “外线 “来调整。
最后是 HTML – 我们使用了 FontAweSome 上箭头。
<button id="toTop">
<i class="fa-solid fa-circle-chevron-up" style="font-size: 32px;">
</i>
</button>这在 Gutenberg 编辑器的 HTML 块中有描述，通过为按钮指定 id=”toTop”，可以反映 CSS 内容。
在屏幕底部固定显示底部导航器。
对于底部导航模式中最顶部的组，在高级设置中的附加 CSS 类中添加了 footer_navi_menu，并在 CSS 侧指定了位置。
/* 20250208 footer_navi_menu */
.footer_navi_menu {
position: fixed;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
display: block;
border-collapse: collapse;
}
.footer_navi_menu div {
/* display: block; 启用时垂直对齐 */
gap:0;
padding:0;
margin: 0;
border-collapse: collapse;
}
.footer_navi_menu_item {
display:block;
gap: 0;
border-collapse: collapse;
}
/* 20250208 reCAPTCHA badge position adjustment */
.grecaptcha-badge {
bottom: 100px !important;
z-index: 3;
}这次将 z-index 设置为 5，是因为如果不调整 z-index，其他项目就会越过菜单。此外，Google reCAPTCHA 徽章的位置与之重叠，因此我们也调整了它的位置。
其他调整
语言切换已包含在底部导航器中，因此顶部的语言切换会通过 Block Visiblity 插件隐藏在智能手机屏幕上。
顶部的全局菜单也将转换为汉堡包菜单，因此底部的类似项目在智能手机上也将隐藏起来。
在清除 LiteSpeed Cache 插件缓存的同时进行适当调整。
我们需要再做一些调整
由于我们在街角有一个汉堡菜单，所以我们希望在那里保留分类和档案。
Musubi
我本打算总结一下 Twenty Twenty Five 主题的设置，但我今天利用空闲时间调整了一下智能手机屏幕。尽管如此，我认为我还是能让它看起来比以前的智能手机显示屏更像 “智能手机页面”。我还想再做一些调整，但剩下的将从明天开始一点一点完成。
这是一个底部导航器，只使用了 jQuery（JavaScript）、CSS 和 PHP，没有使用任何插件。它使用了区块组合模式，我认为这是 Twenty Twenty Five 主题的典型特征。
我们希望利用这些经验尽可能减少插件的数量。
发表回复