WordPress Sydney(シドニー) テーマでスマホのメニュー位置を右にする | そう備忘録

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

スマホのメニュー位置

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

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

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

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

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

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

2020/04/23 追記

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

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

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

シドニースマホデフォルトのハンバーガーメニューの表示位置

変更方法

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
変更前のheader.php

変更前header.php
  • col-xs-12→col-xs-10
  • col-xs-12→col-xs-2

に変更する。

変更後のheader.php

変更後のheader.php

cssの変更

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

プルダウンメニューが右すぎる

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

追加CSS

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

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

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

コードの追加

表示結果

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

メニューが右に表示された
最後に

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

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

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

11件のフィードバック

  1. タナカ より:

    PHPの難しい修正がいるかと思ったらCSSで解決するとのことでとても助かりました
    ありがとうございます!

    • souichirou より:

      タナカさん
      コメントありがとうございます。
      お役に立てたようで良かったです。
      日本人だとスマートフォンの時のメニューは右端に欲しいですよね?

  2. 五十嵐公輔 より:

    souichirou様
    こんにちは!

    Sydneyでサイトを作成してからずっと悩みだった部分を解決できました!
    本当にありがとうございます!

    1点だけディレクトリについてご質問させていただきたいです。
    Sydney子テーマは以前作製したのですが、
    「header.phpのコピー」をする為のディレクトリの場所がわかりません。

    恐れ入りますが、アクセスをする方法を教えていただけますでしょうか?

    下記に現状を記載させていただきます。
    ____________
    ■現状
    下記は完了しています!
    ・「header.phpの変更」
    ・「cssの変更」

    こちらができていない状況です。

    ・「header.phpのコピー」

    ※「header.phpのコピー」は未完了の状態ですが、
    携帯版のサイトは本サイト内に記載されている様に
    しっかりと右側表示に変更されています。
    ____________

    お手数おかけしますが、よろしくお願いいたします!

    • souichirou より:

      五十嵐さん こんにちは。
      コメントありがとうございます。

      header.php ですが子テーマのディレクトリを作成してそこにコピーしています。
      つまりWordPressのテーマ(sydney)をインストールした同じ階層にsydney-childを作成してそこにコピーをしています。

      ├─var
      │  │      
      │  ├─www
      │  │  │
      │  │  ├──wordpress
      │  │  │  │
      │  │  │  ├──wp-content
      │  │  │  │  │
      │  │  │  │  ├──themes
      │  │  │  │  │  │
      │  │  │  │  │  ├──sydney・・・親テーマ
      │  │  │  │  │  │
      │  │  │  │  │  │    header.php ・・・ここにあるファイルを子テーマのディレクトリにコピーする
      │  │  │  │  │  │    style.css ・・・ここにあるファイルを子テーマのディレクトリにコピーする
      │  │  │  │  │  │    functions.php ・・・ここにあるファイルを子テーマのディレクトリにコピーする
      │  │  │  │  │  │  
      │  │  │  │  │  ├──sydney-child ・・・ 子テーマ
      │  │  │  │  │  │
      │  │  │  │  │  │    header.php ・・・親テーマからコピーしたファイルを編集する
      │  │  │  │  │  │    style.css ・・・親テーマからコピーしたファイルを編集する
      │  │  │  │  │  │    functions.php ・・・親テーマからコピーしたファイルを編集する
      │  │  │  │  │  │

      親テーマにあるファイルを編集してしまうとテーマの更新(バージョンアップ)を行うと元に戻ってしまいますので子テーマのディレクトリにコピーしてから編集しています。
      こちらの記事を参考にして下さい。

      • 五十嵐 より:

        Souichirou様

        ご返信ありがとうございます。

        https://bit.ly/3pLeHJF

        上記も拝見させていただきました。
        子テーマのディレクトリについて、wordpressからはアクセスかのでしょうか?

        子テーマは作成したのですが、どのディレクトリをどうやって開くのかがまだわかっておりません。

        初歩的なご質問で恐縮ですが、
        よろしくお願いします。

        五十嵐

        • souichirou より:

          五十嵐 さん

          子テーマを作成したとの事ですが、最初の私のメールの様なディレクトリ構造で親テーマからファイルをコピー済みでしょうか?
          上記が出来ている前提ですが、
          子テーマの header.php へのアクセス方法ですが外観ー>テーマエディタで右上の「編集するテーマを選択」で
          子テーマを選択します。
          するとテーマファイル欄に子テーマのディレクトリ内にあるファイルが表示されますので、編集したいファイルを選択します。
          編集後、左下の「ファイルを更新」ボタンを押せばファイルが更新されます。

  3. 五十嵐  より:

    souichirou様、
    何度もご丁寧にご返信ありがとうございます!

    場所を発見できました

    下記の様になっていたのですが、教えていただいたものと別のコードを貼っていた様です?

    こちらだと後々崩れてしまう可能性や、そもそも動かない様な事はありますでしょうか?
    —————–
    題名:Sydney Child: スタイルシート (style.css)

    内容:
    /*
    Theme Name: Sydney Child
    Theme URI: http://athemes.com/theme/sydney
    Author: aThemes
    Author URI: http://athemes.com
    Template: sydney
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: sydney

    #page {
    margin-left: auto;
    margin-right: auto;
    }
    */

    • souichirou より:

      五十嵐 さん

      別のコードとは、

      #page {
      margin-left: auto;
      margin-right: auto;
      }

      の部分の事でしょうか?

      これはpageというID属性に対するマージンの指定なのでメニューの右寄せとは関係ありません。

      右寄せの指定は、外観->カスタマイズー>追加CSSで指定していませんか?
      ※記事ではその様に書いています。

  4. 五十嵐 より:

    souichirou様、

    大変お世話になっております。
    コードについては、追加CSSに記載をしていました!
    そして、メニューの右寄せはできました。

    ありがとうございます!

    別のご質問になってしまいますが、私の
    「Sydney Child: スタイルシート (style.css)」
    にあるコード自体は親Sydneyがアップデートされてしまうと子テーマも流されてしまう様なモノでしょうか?

    • souichirou より:

      五十嵐 さん

      子テーマが正しく設定されていれば親テーマをアップデートしても更新はされません。
      私の最初の返信のディレクトリ構造の様に親テーマとは別ディレクトリに子テーマの
      ディレクトリを作成して、そこに style.css を入れていれば、です。

      • 匿名 より:

        お世話になっております!

        承知しましたm(_ _)m
        ご丁寧にご返信ありがとうございました!

五十嵐 へ返信する コメントをキャンセル

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。