ヘッダーメニューについて

0
いいねをした人: 居ません
  • このトピックには9件の返信、2人の参加者があり、最後にsuisuiにより4年、 3ヶ月前に更新されました。
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #55446
    suisui
    閲覧者
    5

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】バージョン: 11.0.2
    【お使いのブラウザ】googlechrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    ヘッダーメニュー をグローバルナビゲーションとサブナビゲーションで表示させています。

    グローバルとサブナビの間にサイト名も表示させています。(上から順に、サブナビ、サイト名、グローバルナビ)

    この状態で、質問です。グローバルとサブナビの間に、小さなアイコン画像を3こ設置したいのですが、可能でしょうか?メニューの項目にヘッダーコンテンツがあり、そのちいさな欄に、タグごと記述すればいけそうかもと思ったのですが、他に方法はありますでしょうか?

    ご確認、よろしくお願いします。

     

    0
    いいねをした人: 居ません
    #55453
    アバター画像キタジマ タカシ
    参加者
    2421

    具体的にどこに入れたいかで対応が異なります。スクリーンショットを撮り、ここに入れたいという場所に印をつけて投稿してもらうことはできますか?

    0
    いいねをした人: 居ません
    #55454
    suisui
    閲覧者
    5

    理想は左上の「アイコン」と書かれた位置です。難しければ、右側の「アイコン」の位置です。

    0
    いいねをした人: 居ません
    #55456
    suisui
    閲覧者
    5

    画像をお送りいたしました。理想は左上の位置になります。難しければ、右側の一位置になります。

    0
    いいねをした人: 居ません
    #55459
    アバター画像キタジマ タカシ
    参加者
    2421

    ありがとうございまさす!ちなみにスマホでもロゴの上に出したい感じですかね?

    お盆休みですぐは難しいのですが、カスタマイズのコードを考えてみます。

    0
    いいねをした人: 居ません
    #55461
    suisui
    閲覧者
    5

    スマホでもロゴは出したいと考えております!

    ありがとうございます!

    もし可能であれば、他のサイトでも応用が効くので、非常に利便性が向上生ます><

    0
    いいねをした人: 居ません
    #55611
    アバター画像キタジマ タカシ
    参加者
    2421

    まず、My Snow Monkey プラグインに下記のコードを追加してください。

    add_filter(
    	'snow_monkey_template_part_render',
    	function( $html, $slug ) {
    		if ( 'template-parts/header/site-branding' === $slug ) {
    			ob_start();
    			?>
    			<div class="my-icons">
    				ここにアイコンの HTML を記入
    			</div>
    			<?php
    			return ob_get_clean() . $html;
    		}
    		return $html;
    	},
    	10,
    	2
    );

    次に、カスタマイザー → 追加 CSS に下記の CSS を追加して、PC サイズでのアイコン上の余白を調整してください(-24px の部分を任意の数値に設定)。

    @media (min-width: 1024px) {
      .my-icons {
        margin-top: -24px
      }
    }

    アイコンのサイズや数によっては折り返したりしてしまうことがあるかもしれません。そのときはまた言ってください。

    0
    いいねをした人: 居ません
    #55667
    suisui
    閲覧者
    5

    キタジマさん、ありがとうございます。

    今回、自分が実装したかったことが実現しました!いつもありがとうございます!

     

    少し話がそれますが、https://snow-monkey.2inc.org/manual-advanced/template-hooks/#co-index-2 こちらの記事「Snow Monkey でテンプレートの内容を書き換える3種類のフック」に今回のように、フックを使っての解決方法が紹介されておりました。しかし、私の今のスキルでは自力での解決が困難で、こちらのサポートフォーラムに頼るしかありません。フックの使い方など、習得していくにはどういった勉強がお勧めでしょうか?書籍や参考サイト、何かあれば、お手隙の際に教えていただけると嬉しいです。

    0
    いいねをした人: 居ません
    #55686
    アバター画像キタジマ タカシ
    参加者
    2421

    今回、自分が実装したかったことが実現しました!いつもありがとうございます!

    良かったです!

    しかし、私の今のスキルでは自力での解決が困難で、こちらのサポートフォーラムに頼るしかありません。フックの使い方など、習得していくにはどういった勉強がお勧めでしょうか?書籍や参考サイト、何かあれば、お手隙の際に教えていただけると嬉しいです。

    フィルターフック・アクションフックは WordPress カスタマイズの超基本事項なので、まずはオフィシャルのドキュメントやネットの記事などを読んで、どのようなものなのか、どのようなことができるものなのかを把握してみると良いかと思います。

    あとはそれぞれのフックでできることが違うので、実際にコードを書いて試してみるのが良いと思います。僕も最初は公開されているプラグインのコードをわざと書き換えてみてどのような変化があるのかを試したりしていました。

    このフォーラムにもたくさんフックを使ったサンプルコードがあるので、まずはコピペして、次にわざと書き換えてみてどうなるかを試しているうちにだんだん理解が深まっていくと思います。

    Snow Monkey のオンラインコミュニティでも聞いてみるともっといろいろな方の意見が聞けるかもしれませんね。

    1
    いいねをした人: 居ません
    #55738
    suisui
    閲覧者
    5

    丁寧なアドバイス、ありがとうございます!

    まずは、こちらのサポートフォーラムに掲載されているサンプルに触れてみることにします!

    コミュニティにも参加させていただきました!

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

    1
    いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「ヘッダーメニューについて」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。