「snow_monkey_prepend_drawer_nav」の検索結果

5件の結果を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    検索結果
  • みしま
    参加者

    【お使いの Snow Monkey のバージョン】17.2.4
    【お使いの Snow Monkey Blocks のバージョン】16.0.3
    【お使いの Snow Monkey Editor のバージョン】8.0.1
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    ### 実現したいこと
    英語の切り替えボタンを押して英語のページを表示した際に、ロゴ画像も英語で用意したものに切り替えたい。

    ### 発生している問題

    自分なりに参考にしてコードを書きましたが、他に書き方があるのか、問題ないのか等知りたいです。

    ### 試したこと

    本題ではないのですが、まずMy Snow MonkeyにフォーラムやオレインさんのHAPPY SNOW MONKEYの情報をもとに下記のコードを書いて言語切替のボタンを表示させています。

    /* グローバルナビの上部にbogoの言語切替ボタンを挿入 */
    add_filter(
    	'snow_monkey_template_part_render_template-parts/nav/global',
    	function( $html, $name, $vars ) {
    		?>
    		<div class="translation-btn-wrapper">
    			<div class="translation-btn">
    				<?php echo do_shortcode( '[bogo]' ); ?>
    			</div>
    		</div>
    		<?php
    		return ob_get_clean() . $html;
    	},
    	10,
    	3
    );
    
    /* ドロワーメニュー上部にbogoの言語切替ボタンを挿入 */
    add_action(
    	'snow_monkey_prepend_drawer_nav',
    	function() {
    		?>
    		<div class="translation-btn-wrapper">
    			<div class="translation-btn">
    				<?php echo do_shortcode( '[bogo]' ); ?>
    			</div>
    		</div>
    		<?php
    	}
    );

    肝心のロゴ画像の切り替えについては「bogo ロゴ画像 変更」で検索して、他テーマで変更されているケース等ありましたがSnow monkeyの場合にどうすればいいかわからず、フックでできるのか、テンプレートを上書きすべきかなど試行錯誤していましたが、うまくいかず下記のロゴの差し替えを参考に

    My Snow Monkeyに下記を追加して、最終的に英語のページに切り替えた際にはロゴが英語で用意したものに変更できるようにはなりました。

    add_filter(
    	'get_custom_logo',
    	function( $html ) {
    		if(get_locale() == "en_US") {
    			$html = preg_replace(
    				'|<img .+? />|',
    				'<img class="custom-logo" src="'.MY_SNOW_MONKEY_URL.'/aseet/image/logo.png" />',
    				$html
    			);
    		} else {
    		}
    		return $html;
    	}
    );

    ただ、途中MY_SNOW_MONKEY_URLでのパスの指定がなかなかうまくいかず、結果的になんとか動いている状態ですので、書き方等に問題がないか?また、Bogoでロゴの出し分けをされたい方の参考になればと投稿させていただきました。お手数ですがご確認お願いいたします。

    倉田 ともか
    参加者

    【お使いの Snow Monkey のバージョン】バージョン: 16.4.6
    【お使いのブラウザ】Crome

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

    ### 実現したいこと

    ドロワーナビゲーション(デフォルト)が開いたときに、
    コンテンツ部分を暗くする実装を試行錯誤しております。

    ### 試したこと

    最初はmy snow monkey に

    add_action(
    'snow_monkey_prepend_drawer_nav',
    function() {
    ?>
    <div class="drawer-nav-cover"></div>
    <?php
    }
    );

    とnavの中に挿入して、
    以下のCSSで黒い透過背景を設定しました。

    .drawer-nav-cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(3,3,3,.5);
    z-index: 0;
    }

    ただこれだとドロワーナビゲーションの下ではなく上に表示されてしまいます。
    (親要素navがz-indexを指定しているので子要素のz-indexは効かない。)

    そこでnavとは別のところに黒い透過背景を挿入して
    ハンバーガーアイコンをクリックしたら
    同じようにaria-hidden=falseと追加出来きれば
    あとはCSSで調整ができるなと考えています。

    上記のようなことはできますでしょうか。

    また上記よりももっとシンプルな方法があったりしますでしょうか。

    どうぞよろしくお願いします。

    #95111
    Olein_jp
    参加者
    544

    この辺りのアクションフックでロゴ画像を出力すると良いかと思います。

    2
    いいねをした人:
    キタジマ タカシ
    参加者
    2234

    ウィジェットエリアは Snow Monkey で「やりすぎたなぁ…」と思っているものの1つで、メンテナンス性の問題やページの表示が遅くなる問題があるので、よほどのことがないと今後は追加しない方針です。

    ドロワーに要素を追加したい場合は、My Snow Monkey へのコードの追加では可能です。

    ◎メニューの上の方に追加したい場合

    add_action(
    	'snow_monkey_prepend_drawer_nav',
    	function() {
    		?>
    		ここに追加したい HTML を記述
    		<?php
    	}
    );

    ◎メニューの下の方に追加したい場合

    add_action(
    	'snow_monkey_append_drawer_nav',
    	function() {
    		?>
    		ここに追加したい HTML を記述
    		<?php
    	}
    );
    3
    いいねをした人:
    #31296
    Hatsuki
    閲覧者
    6

    多分ですが、下記あたりのフックを使って、do_shortcodeを書く形になるんじゃないかと思います。

    snow_monkey_prepend_drawer_nav
    snow_monkey_append_drawer_nav

    @キタジマさん
    直接メニューにショートコードをと言うのは出来るんでしたっけ?

    0
    いいねをした人: 居ません
5件の結果を表示中 - 1 - 5件目 (全5件中)

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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