WordPressのスマートフォン対応用のプラグイン「WPtouch」は利用している方も多いようですが、WPtouch の言語設定で「Japanese」を選択して日本語にすると、実際のスマートフォンでのヘッダーの「メニュー」という表示が縦に崩れてしまいます。
「自動選択」などに設定すると「Menu」と横書きでちゃんと収まるのですが、もちろん他も英語などの外国語になります。
そして、この言語設定はスマホ上の表示だけでなく、ダッシュボードの設定画面での言語にも適用されるので、できれば「Japanese」で日本語にしたいですよね。
ググってみると、元々このような不具合が起きるということで、その対応も色々とあり、こうなると初心者はどのように対応すればよいのか悩むところです（汗）
なにはともあれやってみようということで、まずは、スタイルシートに横幅の指定をするという、こちらのサイトを参考にさせていただきました。
「WPtouchの日本語表示で「メニュー」ボタンの崩れを修正 | monotone blog」
ありがとうございました。
具体的な方法としては、「/wp-content/plugins/wptouch/themes/default/style.css」のスタイルシートを修正するわけですが、もちろんバックアップをとっての作業ですね。
style.css内の次に箇所に、横幅widthの追加指定します。
#headerbar-menu {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
width: 70px;
}
最後の行の「width: 70px;」だけ追加しました。すると、
あれ？ 「メニュー」の表示は正常に横書きになったのですが、当ブログタイトル「ローカルブロガーのメモ帳」の後ろに「メニュー」表示枠がかかってしまいました。
ちょっとだけブログタイトルが長かったようです。残念。
スマホ表示用にWPtouchでブログのタイトルを変更することもできるようですが、それはしたくないので、となると、言語は日本語でこのヘッダーの表示だけを「Menu」にすれば、上手く収まりそうです。
まずは、上記で一旦設定したスタイルシートを元の状態戻します（追加した行を削除）。
作業に関しては、こちらのサイトを参考にさせていただきました。
「WPTouchで日本語のメニューが崩れる場合の簡単な対応 | debate」
ありがとうございました。
作業は「/wp-content/plugins/wptouch/themes/default/header.php」のheader.phpを編集します。
もちろん、バックアップをしてからですね。私のような初心者は特に。
<div id="headerbar-menu"> <a href="javascript:return false;"><?php _e( 'Menu', 'wptouch' ); ?></a> </div>
<div id="headerbar-menu"> <a href="javascript:return false;">Menu</a> </div>
上が変更前で、下が変更後。
変更は<?php _e( ‘Menu’, ‘wptouch’ ); ?>をMenuに書き換えてます。すると、
上手く「Menu」と表示できました。
まだ、phpの仕組みが分かってないので、ちょっと心もとないですが、まずはなんとか対応できました。
ただ、今回の変更はプラグインのアップデートがあると元に戻ってしまうんですよね。
何をどう修正したか、忘れてしまいそうです。
（あっ、だからこうやって記事にしてるんだった…）