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

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

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
        ご丁寧にご返信ありがとうございました!

質問やコメントや励ましの言葉などを残す

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