Twenty Twenty Five テーマにスマホ用のボトムナビゲータを設置する

ページ言語切替

Contents

はじめに

このブログは WordPress の Twenty Twenty Five テーマを使用して、所謂普通のブログを作る事を目的の一つにしています。レスポンシブ対応でPCとスマホを同一の見た目としますが、スマホ特有の使い勝手の良さも追加したいと考えています。

多言語対応ももう一つの目的ですので、スマホの画面の下部にボトムナビゲータを設置して、言語を切り替えられるようにしてみました。また、このブログは縦に長いページになりますので、先頭に戻るボタンも一緒に設置しました。

ボトムナビゲータの設置方法

プラグインで対応しようと考えていましたが、あまり良いものが見つかりませんでした。私の希望としては、ボトムナビゲータの部分に画像を入れたかったのですが、多くは FontAweSome 等のアイコンを配置する形でした。

Gutenberg エディタのブロックによるボトムナビゲータが設置できるかどうか試した所、それなりの見た目の物が出来ました。

Bottom Navi Button for SmartPhone — スマホ用ボトムナビゲータ

左から三つはGutenbergエディタでブロックの組み合わせで作って CSS で固定しています。一番右のページトップに戻る部分は、jQuery + CSS で作っています。

各言語切替部分の構成

ボトムナビゲータ部分は、パターンとして作成しました。構成は、グループの中に横並びブロックを配置して、その中に縦並びのブロックを4つ配置しています。

上段の3つは同じ構成で、丸形の国旗と文字が縦に並ぶ配置です。

Vertical block for Languages — 各言語用の縦並びブロック

縦並びブロック本体の幅を fill にして、並べた時に等しい幅となるようにしています。その上で、丸形の国旗と文字にリンクを設定し、各言語のトップページに飛ぶように設定しました。

ページトップに戻る部分の構成

ページトップに戻る部分については、jQuery と CSS で作成しました。以下のページを参考にしました。

ページに「Topへ戻る」ボタンを設置する | ノラトキのSiteStudio
CSSとjQueryを使用して画面スクロールすると右下に「Topへ戻る」ボタンを表示させる方法です。「Topへ戻る」ボタンを押すとシュッとページ最上部に移動します。 jQuery本体読み込みまず、j…
site-studio.noratoki.com

先ずは jQuery の部分です。Twenty Twenty Five 子テーマのディレクトリに to_page_top.js の jQuery ファイルを作成します。

JavaScript

// トップへ戻るボタン
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{
			// ボタン半透明
	    	//console.log(scrollPos);
			jQuery("#toTop").fadeTo(200,0.2);
		}
	});
	
	jQuery("#toTop").click(function(){
		// Topへ戻るスピード 多いほど遅くなる。
		jQuery("body,html").animate({
			scrollTop: 0
		}, 200);
		jQuery("#toTop").fadeTo(200,0.2);
		return false;
	});
});

to_page_top.js

オリジナルではアイコンを表示して、スクロールすると消えたり表示したりする方法でしたが、今回はアイコンは常に表示しておくので、透明度を調整するようにしました。

次に functions.php への追加部分です。

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');
}

functions.php

作成したファイル名やディレクトリの場所を修正しています。

次に CSS です。子テーマの style.css に追記します。

CSS

/* 20250208 Move Button To PageTop */
#toTop {
  border-width: 0px;
  border: none;
  color: #516028;
  background-color: #dae7bd;
	opacity: 0.2;
  padding: 0;
  outline: none;
}
#toTop:focus {
    /* ボタンを押したとき表示されてしまう外枠を消す */
    outline: none;
}

add to child theme style.css

button そのままだと枠が表示されるので、border-width と border、outline で調整しています。

最後に html です。FontAweSome の上矢印を使用しました。

HTML

<button id="toTop">
<i class="fa-solid fa-circle-chevron-up" style="font-size: 32px;">
</i>
</button>

inline html

Gutenberg エディタの HTML ブロック内に記載します。button に id=”toTop” を指定する事で CSS の内容を反映させています。

ボトムナビゲータを画面下部に固定表示する

ボトムナビゲータのパターンの中の最も上位のグループに、高度な設定の中にある追加 CSS クラスに footer_navi_menu を追加し、CSS 側で配置を指定しました。

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;
}

add to child theme style.css

position を fixed、left と bottom をゼロにする事で画面上の下に固定表示されます。z-index を調整しないと、メニューの上を他の項目が通過してしまいますので、今回は z-index を 5 としました。また、Google reCAPTCHA のバッヂと重なってしまいますので、その位置調整も行っています。

その他の調整

ボトムナビゲータに言語切替を入れましたので、スマホ画面では上部の言語切替は非表示となるように Block Visiblity プラグインで設定しました。

また、上部のグローバルメニューもハンバーガーメニュー化しますので、下部の同様の項目もスマホでは非表示とするようにしました。

LiteSpeed Cache プラグインのキャッシュを適宜消去しながら調整しました。

もう少し調整したい所

折角ハンバーガーメニューがありますので、カテゴリとアーカイブはそちらに入れておきたいと考えています。

結び

Twenty Twenty Five テーマの設定についてまとめるつもりが、スマホの画面調整に今日の空き時間を費やしてしまいました。それでも、これまでのスマホの表示よりも「スマホのページ」らしい形に出来たかと思います。もう少し調整したい所はありますが、残りは明日以降に少しずつ進めます。

プラグインを使用せずに、jQuery (JavaScript) と CSS、PHP のみで作ったボトムナビゲータです。ブロックの組み合わせによるパターンを使っていますので、Twenty Twenty Five テーマらしい作り方かと思います。

今回の経験を生かして、プラグインの数を少しでも減らしていきたいと考えています。

Clairvoyance Power