WordPress Sydney（シドニー） テーマでスマホのメニュー位置を右にする

スマホのメニュー位置

WordPressのテーマのSydney（シドニー）にてスマホモードにした時のハンバーガーメニューがデフォルトでは中央に表示されてしまうので右端に表示したいとの質問を頂いた。

その時に調べた事を備忘録として記事にしておく。

尚、Sydney（シドニー）のテーマのカスタマイズに関しては過去記事を参照の事。

最初はテーマのどこかの設定で簡単に変更できるのではないかと思っていたのだが探していても設定値が見当たらず、ちょっと苦戦した。

結局、header.phpやcssで変更するこちらの記事の内容を参考にした。

日本人だとスマートフォンのハンバーガーメニューは右端にある方が使いやすいが欧米人は手が大きいのでメニューが中央にあってもそれほど気にならないのかも知れない。

３本線のハンバーガーメニューを違う画像に変更したい時の変更方法はこちらの記事を参照。

デフォルトのメニュー位置

スマートフォンの時のハンバーガーメニューが表示位置がデフォルトでは中央に表示されるのでタップしづらいので右端に表示をしたい。

変更方法

header.phpのコピー

自分は子テーマを作成しているのでまずは親テーマのheader.phpを子テーマのディレクトリにコピーを行った後に修正した。

子テーマについは過去記事を参照の事。

ターミナルで接続して

1. 子テーマのディレクトリに移動する
2. 親テーマのheader.phpを子テーマにコピーする
3. 権限をwww-dataに変更する

※ ubuntu OS の場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ

cd /var/www/wordpress/wp-content/themes/sydney-child
sudo cp ./../sydney/header.php ./
sudo chown www-data:www-data header.php

※子テーマをsydney-childディレクトリに作成している前提

header.phpの変更

エディターでheader.phpを開いて修正する。

WordPressのメニューから外観ー＞テーマエディターでテーマヘッダー（header.php）を選択してそこで修正しても良いのだが、自分は流れでそのままターミナルからviエディターで修正した。

sudo vi header.php

• col-xs-12→col-xs-10
• col-xs-12→col-xs-2

に変更する。

cssの変更

上記の修正を行うとハンバーガーメニューは右側に表示されるのだが、タップした時に表示されるプルダウンメニューが右過ぎて見ずらいのでcssで修正する。

WordPressのメニューから外観、カスタマイズ、追加CSS

以下のコードを追加する。

@media only screen and (max-width: 767px) {
	#mainnav-mobi {
		left: -200%;
		width: auto;
	}
}

追加したら公開ボタンを押す。

表示結果

スマートフォンの時にメニューが右端に表示されてプルダウンメニューもそれなりの位置に表示された。

この記事が何処かで誰かの役に立つことを願っている。

尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。