- このトピックには7件の返信、2人の参加者があり、最後に
により3年、 4ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】14.3.5
【お使いの Snow Monkey Blocks のバージョン】11.4.1
【お使いの Snow Monkey Editor のバージョン】5.0.6
【お使いのブラウザ】google chrome
【当該サイトのURL】いつもお世話になっております。
### 実現したいこと
グローバルナビメニューの上部に、赤枠画像のような感じで、
・ロゴ
・ボタン
・電話番号
などを横並びで表示させたいです。### 試したこと
カスタムHTMLウィジットを【ホームページ上部】に設定しましたが、グローバルナビメニューの下に表示されてしまいます。
キーワードを変えて、いろいろ検索してみましたが、
解決に至らず、こちらに質問させていただきます。・（有料プラグインを使う方法以外では）ウィジットなどのノーコードでは、実装不可能でしょうか？
・どのような実装方法があるのか（ノーコード以外も含めて）、道筋をご教示頂けますと幸いです。
よろしくお願いいたします。
いいねをした人: 居ません画像のアップありがとうございます。
こちらのヘッダーは、テーマの上書きになると思います。
その方法でもよろしければ、準備として、以下のコードを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を入れ、
overrideをmy-snow-monkey（ブラグイン）フォルダ内にアップします。
CSSはご自身で調整していただければと思いますが、以上で参考サイトのようなヘッダーにすることは可能ですが、今後Snow Monkeyのアップデートで仕様が変わる場合は、再調整が必要になると思います。
ほかにも、もっとスマートな方法もあると思いますが、1つの方法として参考にしてみてください。ちなみにわたしもやってみました。
いいねをした人:
GONSYさん
詳細かつご丁寧な解説ありがとうございます！恐れ入ります。
ちょっと今は疲れておりまして、頭が回らないため、明日改めて、チャレンジしてみます！
本当にありがとうございます。いいねをした人: 居ませんGONSYさん
日にちがあいてしまってすみません。
約2週間、周辺的な知識を勉強しつつ、何度かトライしてみたのですが、GONSYさんにご説明いただいた
「まず、参考サイトのヘッダーのようにするには、【カスタマイズ】→【デザイン】→【ヘッダー】→ヘッダーレイアウトを「2行」にしておきます。
その上で、Snow Monkeyのテーマでsnow-monkey/template-parts/headerにある2row.phpをコピーして、以下のような構造にします。
※必要なのは2row.phpのみです。」の
「以下のような構造にします」
のところが、理解できませんでした。
（2row.php のコードを編集するということでしょうか？）恐縮ですが、もう少しだけ、かみ砕いていただけますと幸いです。
よろしくお願いいたします。
いいねをした人: 居ません（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
override、template-parts、headerディレクトリ（フォルダ）をデスクトップの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-monkeyのheaderフォルダ内に2row.phpを複製し、エディターで2row.phpの54行目と56行目の間、つまり55行目にオリジナルのHTMLを追加します。
とりあえず
<p>追加してみるよ！</p>
を入れてみてください。
この編集した2row.phpを、含むmy-snow-monkeyをサーバーにアップロードします。
/wp-content/plugins/my-snow-monkeyWordPressの管理画面の【プラグイン】で
My Snow Monkeyを有効化すると、ヘッダーに
追加してみるよ！が表示されると思います。これが確認できたら、
<p>追加してみるよ！</p>
の部分をご自身が必要なコードに入れ替えてください。
CSSは、別に必要になると思います。噛み砕いてみたつもりですが、いかがでしょうか？
これでご理解いただくことが難しい場合、カスタマイズそのものが難しいと思います。
今回のカスタマイズは、ご自身のブログやサイトですか？
受託案件であれば、デザインを見直したり、有料で依頼されたほうが良いと感じます。いいねをした人: 居ません
- トピック「グローバルナビメニューの上部に、ロゴやボタンやテキストなどを横並びで配置したい」には新しい返信をつけることはできません。