グローバルナビメニューの上部に、ロゴやボタンやテキストなどを横並びで配置したい

1
いいねをした人:
  • このトピックには7件の返信、2人の参加者があり、最後にyoshikiにより1年、 4ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #80142
    yoshiki
    閲覧者
    7

    【お使いの Snow Monkey のバージョン】14.3.5
    【お使いの Snow Monkey Blocks のバージョン】11.4.1
    【お使いの Snow Monkey Editor のバージョン】5.0.6
    【お使いのブラウザ】google chrome
    【当該サイトのURL】

    いつもお世話になっております。

    ### 実現したいこと

    グローバルナビメニューの上部に、赤枠画像のような感じで、
    ・ロゴ
    ・ボタン
    ・電話番号
    などを横並びで表示させたいです。

     

    ### 試したこと

    カスタムHTMLウィジットを【ホームページ上部】に設定しましたが、グローバルナビメニューの下に表示されてしまいます。

    キーワードを変えて、いろいろ検索してみましたが、
    解決に至らず、こちらに質問させていただきます。

    ・(有料プラグインを使う方法以外では)ウィジットなどのノーコードでは、実装不可能でしょうか?

    ・どのような実装方法があるのか(ノーコード以外も含めて)、道筋をご教示頂けますと幸いです。

    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #80151
    GONSY
    参加者
    692

    @yoshikiさん

    参考の画像をアップしていただいたほうが回答が得られやすいと思いますので、ぜひよろしくお願いいたします。

    1
    いいねをした人:
    #80155
    yoshiki
    閲覧者
    7

    失礼しました!画像アップし忘れてました。ご指摘ありがとうございます。

    ※画像は、ショーケースにアップされていたサイトから引用させて頂いてます。

    0
    いいねをした人: 居ません
    #80177
    GONSY
    参加者
    692

    画像のアップありがとうございます。
    こちらのヘッダーは、テーマの上書きになると思います。
    その方法でもよろしければ、準備として、以下のコードをmy-snow-monkey.phpに追加します。

    add_filter(
        'snow_monkey_template_part_root_hierarchy',
        function ($hierarchy) {
            $hierarchy[] = untrailingslashit(__DIR__) . '/override';
            return $hierarchy;
        }
    );

    まず、参考サイトのヘッダーのようにするには、【カスタマイズ】→【デザイン】→【ヘッダー】→ヘッダーレイアウトを「2行」にしておきます。
    その上で、Snow Monkeyのテーマでsnow-monkey/template-parts/headerにある2row.phpをコピーして、以下のような構造にします。
    ※必要なのは2row.phpのみです。

    my-snow-monkey
    └override
     └template-parts
      └header
       └2row.php

    コピーしてきた2row.phpの54行目と56行目の間あたりに

    <div class="header_sns_link">
    	<ul class="sns_link">
    		<li class="twitter">
    			<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
    		</li>
    		<li class="facebook">
    			<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
    		</li>
    		<li class="instagram"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
    		</li>
    	</ul>
    </div>
    
    <div class="nav_header_specials">
    	<ul class="nav_specials">
    		<li>
    			<a href="#"><i class="fas fa-school"></i>HEADER MENU1</a>
    		</li>
    		<li>
    			<a href="#"><i class="fas fa-file"></i>HEADER MENU2</a>
    		</li>
    	</ul>
    </div>

    こんな感じのHTMLを入れ、overridemy-snow-monkey(ブラグイン)フォルダ内にアップします。
    CSSはご自身で調整していただければと思いますが、以上で参考サイトのようなヘッダーにすることは可能ですが、今後Snow Monkeyのアップデートで仕様が変わる場合は、再調整が必要になると思います。
    ほかにも、もっとスマートな方法もあると思いますが、1つの方法として参考にしてみてください。

    ちなみにわたしもやってみました。

    2
    いいねをした人:
    #80182
    yoshiki
    閲覧者
    7

    GONSYさん

    詳細かつご丁寧な解説ありがとうございます!恐れ入ります。
    ちょっと今は疲れておりまして、頭が回らないため、明日改めて、チャレンジしてみます!
    本当にありがとうございます。

    0
    いいねをした人: 居ません
    #81526
    yoshiki
    閲覧者
    7

    GONSYさん

    日にちがあいてしまってすみません。
    約2週間、周辺的な知識を勉強しつつ、何度かトライしてみたのですが、

    GONSYさんにご説明いただいた
    「まず、参考サイトのヘッダーのようにするには、【カスタマイズ】→【デザイン】→【ヘッダー】→ヘッダーレイアウトを「2行」にしておきます。
    その上で、Snow Monkeyのテーマでsnow-monkey/template-parts/headerにある2row.phpをコピーして、以下のような構造にします。
    ※必要なのは2row.phpのみです。」

    「以下のような構造にします」

    のところが、理解できませんでした。
    (2row.php のコードを編集するということでしょうか?)

    恐縮ですが、もう少しだけ、かみ砕いていただけますと幸いです。

    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #81560
    GONSY
    参加者
    692

    (2row.php のコードを編集するということでしょうか?)

    はい。
    そう書いたつもりでしたが、伝わらなかったようで残念です。。。

    あらためて手順を書きますので、試してみてください。
    このカスタマイズで必要なもの

    • カスタマイズ用プラグイン「My Snow Monkey」
    • テーマ「Snow Monkey」
    • エディタ
    • サーバーにアップロードできるもの

    my-snow-monkey.phpに以下のコード(A)を追加することで、overrideにあるテンプレートで上書きすることができます。

    My Snow Monkeyは、マイアカウントからダウンロードしてください。

    ご自身のデスクトップにmy-snow-monkeyを置き、中身のmy-snow-monkey.phpに以下を追記します。

    /* コード(A) */
    add_filter(
        'snow_monkey_template_part_root_hierarchy',
        function ($hierarchy) {
            $hierarchy[] = untrailingslashit(__DIR__) . '/override';
            return $hierarchy;
        }
    );
    

    override内は、「Snow Monkey」(snow-monkey)と同じファイル構造(ディレクトリ)にしておく必要があります。
    以前提示したこれ

    my-snow-monkey
    └override
     └template-parts
      └header
       └2row.php

    は、つまりこういうことです。
    /wp-content/plugins/my-snow-monkey/override/template-parts/header/2row.php
    overridetemplate-partsheaderディレクトリ(フォルダ)をデスクトップのmy-snow-monkey内に作成してください。

    2row.phpは、テーマ「Snow Monkey」(snow-monkey)内(以下)にある2row.phpをベースにします。
    テーマ「Snow Monkey」(snow-monkey.zip)を展開して、中身をご覧ください。
    以下に入っています。
    snow-monkey/template-parts/header/2row.php
    2row.php以外は不要です。

    デスクトップのmy-snow-monkeyheaderフォルダ内に2row.phpを複製し、エディターで2row.phpの54行目と56行目の間、つまり55行目にオリジナルのHTMLを追加します。
    とりあえず
    <p>追加してみるよ!</p>
    を入れてみてください。
    この編集した2row.phpを、含むmy-snow-monkeyをサーバーにアップロードします。
    /wp-content/plugins/my-snow-monkey

    WordPressの管理画面の【プラグイン】でMy Snow Monkeyを有効化すると、ヘッダーに
    追加してみるよ!が表示されると思います。

    これが確認できたら、
    <p>追加してみるよ!</p>
    の部分をご自身が必要なコードに入れ替えてください。
    CSSは、別に必要になると思います。

    噛み砕いてみたつもりですが、いかがでしょうか?
    これでご理解いただくことが難しい場合、カスタマイズそのものが難しいと思います。
    今回のカスタマイズは、ご自身のブログやサイトですか?
    受託案件であれば、デザインを見直したり、有料で依頼されたほうが良いと感じます。

    0
    いいねをした人: 居ません
    #81579
    yoshiki
    閲覧者
    7

    GONSYさん

    早々のご回答、ありがとうございます。

    また、前回、ご親切、かつ、ご丁寧に解説頂いたにもかかわらず、

    「恐縮ですが、もう少しだけ、かみ砕いていただけますと幸いです。」
    などと、言葉足らずな無礼を申して、大変失礼いたしました。

    理解できなかった原因は、100%自分自身にあります。

    ご不快な思いをさせてしまったなら、誠に申し訳ございませんでした。

    今回のご解説で、ようやく理解することができました。

    貴重なお時間を割いて頂いて、本当に
    本当にありがとうございました。

    1
    いいねをした人:
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「グローバルナビメニューの上部に、ロゴやボタンやテキストなどを横並びで配置したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ