プラグイン「Bogo」を使用し、固定ページのヘッダーに言語表記をしたい

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

    【お使いの Snow Monkey のバージョン】

    バージョン: 18.1.1

    【お使いの Snow Monkey Blocks のバージョン】

    バージョン 17.1.0

    【お使いのブラウザ】

    Google Chrome

    ### 実現したいこと

    プラグイン「Bogo」を使用し、言語表記をヘッダーのメニューの横、または下に表記させたい

    ### 発生している問題

    プラグイン「Bogo」を導入し、ヘッダーのメニュー横かメニュー右下に表記させたいのですが、ウィジェットの選択肢に「ヘッダー」がなく、「ホームページ上部」を選択すると、添付画像のようにロゴと被り、実現したいものと異なります。

    ### 試したこと

    「ホームページ上部」で表記し、cssで調整を試みるが実現したいものにならない状態です。また、2枚目のように、背景色が出てFVが下にずれてしまいます。
    ご教授いただけたらと思います。

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

    1
    いいねをした人:
    #114370
    GONSY
    参加者
    803


     
    カスタマイザー(外観/カスタマイズ)→デザイン→ヘッダー内の「ヘッダーコンテンツ」にショートコード [bogo] を入れてみてはいかがでしょうか?

    1
    いいねをした人:
    #114376
    miyuki
    閲覧者
    16

    ありがとうございます。

    PC版で実現させたい表記が出来ました。

    ただ、モバイル版でも表記させたくて、「モバイル版でもヘッダーコンテンツを表示する」にチェックをつけると、添付画像の様に、ロゴに被るので、cssで位置の調整は出来ました。

    ただ、PC版では背景色はないのですが、モバイル版だと背景色が入り、その分FVが下に下がってしまします。(本来は、FVに重なるようにロゴとハンバーガーメニューが表記されます)
    これは、SnowMonkeyの仕様でしょうか。それともBogoの方でしょうか。cssで背景色を消せないか調整していますができない状態です。

     

     

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

    ただ、モバイル版でも表記させたくて、「モバイル版でもヘッダーコンテンツを表示する」にチェック

    この機能は比較的単純なものだといいのですが、複雑になりそうなときや自由度の高い要素を入れたい場合は「モバイル版でもヘッダーコンテンツを表示する」にチェックはいれず、フックでハンバーガーメニューの隣にショートコード [bogo] が表示されるように my-snow-monkey.php に書いちゃいます。
    今回だとこんな感じです。
     

    add_action( 
    	'get_template_part_template-parts/header/hamburger-btn',
    	function( ) {
    	?>
     	<div class="mobile_bogo">
    		<?php echo do_shortcode( '[bogo]' ); ?>
    	</div>
    	<?php
    	}
    );

    これだけだと並びがおかしいので、CSSで少し調整します。
    ※適宜調整してください。
     

    ul.bogo-language-switcher {
    	/* 翻訳ボタンを横並びに */
    	display: flex;
    }
    
    /* 従来のハンバーガーメニューと一緒に横並びに */
    .u-invisible-lg-up {
    	display: flex;
    }
    
    /*  bogoのボタンとハンバーガーメニューにマージン */
    .mobile_bogo {
    	margin-right: 1em;
    }

     

    ただ、PC版では背景色はないのですが、モバイル版だと背景色が入り、その分FVが下に下がってしまします。(本来は、FVに重なるようにロゴとハンバーガーメニューが表記されます)
    これは、SnowMonkeyの仕様でしょうか。それともBogoの方でしょうか。cssで背景色を消せないか調整していますができない状態です。

    コンテンツ部分が下がってしまうように見えるので、これは、Snow Monkeyのスマートフォン表示時のヘッダーコンテンツを表示する部分が関係していると思います。
    ここを無理やりCSSで調整するよりかは、上のような方法のほうがスマートだと思います。
    お試しくださいませ。

    2
    いいねをした人:
    #114716
    miyuki
    閲覧者
    16

    ご回答ありがとうございました!
    とても勉強になります。
    実装してみます。

    0
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「プラグイン「Bogo」を使用し、固定ページのヘッダーに言語表記をしたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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