管理ヘッダーをスマホでスクロールするときに空白を作りたくない。

0
いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #49468
    rakumath
    閲覧者
    10

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

    【お使いの Snow Monkey のバージョン】10.1.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】http://rakumath.xyz/

    ===

    管理バーを会員のメニュー代わりに使ってみたのですが、

    スマホだとこのようになってしまいます。

    解決することは出来ないでしょうか?

    (上記記事を執筆されたのがキタジマさんですので、

    既に、Snow Monkey では解決済なのかも知れません。

    そうだったら、探すことができなくてお手数おかけしてすいません!)

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

    Snow Monkey では、ログイン時は管理バーをうまいこと処理する js を読み込むようになっているのですが、非ログイン時は読み込まないようになっています。非ログイン時はコアの管理バー用 CSS も読み込まれませんが、スマホで管理バーとヘッダーをうまいこと表示させるにはこのコアの CSS を Snow Monkey の管理バー js の2つの読み込みが必要になってきます。

    ということでログイン時はちゃんとなって、非ログイン時はきれいに表示されないという状況だと思うのですが、そこまではあっていますか?

    可能であれば、こちらの環境で検証できるように、管理バーにメニューを追加しているコードを共有してもらいたいです!

    0
    いいねをした人: 居ません
    #49496
    rakumath
    閲覧者
    10

    なるほど!仰るとおりです。

    ログインした場合は大丈夫ですので、合点がいきました。

    このように、My Snow Monkey に書いています。

    //非ログイン時も管理ツールバーを表示
    add_filter('show_admin_bar', '__return_true');
    
    //管理ツールバーにメニュー追加
    function customize_admin_bar_menu($wp_admin_bar){
    	if(!is_user_logged_in()){
    		$title1 = sprintf(
    			'<span class="ab-icon"></span><span class="ab-label">%s</span>',
    			'ログイン'
    		);
    		$wp_admin_bar->add_menu(array(
    			'id' => 'dashboard_menu1',
    			'meta' => array(),
    			'title' => $title1,
    			'href' => home_url('/loginform/') // ページURL
    		));
    	}
    	if(is_user_logged_in() and !current_user_can( 'administrator' )){
    		$title2 = sprintf(
    			'<span class="ab-icon"></span><span class="ab-label">%s</span>',
    			'マイページ'
    		);
    		$wp_admin_bar->add_menu(array(
    			'id' => 'dashboard_menu2',
    			'meta' => array(),
    			'title' => $title2,
    			'href' => home_url('/loginform/') // ページURL
    		));
    	}
    }
    add_action('admin_bar_menu', 'customize_admin_bar_menu', 9999);
    0
    いいねをした人: 居ません
    #49523
    アバター画像キタジマ タカシ
    参加者
    2421

    ありがとうございます。今日試してみますね。

    一応、管理バーにメニューを追加する方法以外にも、デザイン的に問題がないのであれば Snow Monkey のヘッダーサブメニューを使って内容をログイン時と非ログイン時で出し分けるほうが簡単かな?と思ったりもしました。メニューを使うやり方なら管理画面のメニュー機能でメニューを更新できるので。

    0
    いいねをした人: 居ません
    #49531
    rakumath
    閲覧者
    10

    なるほど!いくつがご質問させてください。

    1. 現在、ログイン・非ログイン以外にUAMプラグインでグループを使って、コードから省いたのですが同じように表示メニューを変えています。メニュー表示項目をログイン・非ログインやグループ等で変えるのもアクションフックから操作できるのですか?
    (勝手ながら、ここを省いても同じだろうと思って自己判断で省いたのですが、一応、その部分も掲載します)

    //グループネームの取得
    function uamIsUserInGroup($groupName='', $userId='') {
    	if (empty($userId)) {
    		$userId = get_current_user_id();
    	} global $userAccessManager;
    
    	if (isset($userAccessManager)) {
    		$userGroupHandler = $userAccessManager->getUserGroupHandler();
    		$userGroupsForUser = $userGroupHandler->getUserGroupsForObject(
    \UserAccessManager\Object\ObjectHandler::GENERAL_USER_OBJECT_TYPE, $userId);
    
    		foreach($userGroupsForUser as $element) {
    			if ($element->getName() == $groupName) {
    				return true;
    			}
    		}
    	} else {
    		return false;
    	}
    }
    
    //グループでメニュー表示内容を分ける
    if(uamIsUserInGroup('XXXXX')){
    	$title3 = sprintf('<span class="ab-icon"></span><span class="ab-label">%s</span>','XXXXXX');
    	$wp_admin_bar->add_menu(array('id' => 'dashboard_menu3','meta' => array(),'title' => $title3,'href' => home_url('/mathlabo/') // ページURL));
    }
    if(uamIsUserInGroup('YYYYYY')){
    	$title4 = sprintf('<span class="ab-icon"></span><span class="ab-label">%s</span>','YYYYYY');
    	$wp_admin_bar->add_menu(array('id' => 'dashboard_menu4','meta' => array(),'title' => $title4,'href' => home_url('/rakunan/') // ページURL));
    }

    (上の返信、ソースコードが見やすくなってるのは、僕も投稿段階でビジュアルエディタで出来ますか?)

    2. ヘッダーサブメニュー、PCだと右上にかっこいいのですが、スマホからだと右上には表示されません。スマホもPCも、左上に表示したいのです。

    1.と2.が解決するなら、メニューの方が内容の入れ替えも簡単でいいなー!と思います。長文失礼しました。お返事ありがとうございます!

    関係ありませんが、最近100% GPLに関するインタビュー記事を拝読して、とても感銘を受けました!(買うときは良く知らずに単純にデザインを気に入って買いました笑)本体もプラグインも素敵で気に入っています。これからも発展を楽しみにしています!!

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

    すみません、ちょっとうまく管理バーを表示させることができなかったので、あてずっぽうな感じになってしまうのですが、ひとまず下記のコードも追加してみてください。これで解決すると良いのですが…。

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_script(
    			Helper::get_main_script_handle() . '-fix-adminbar',
    			get_theme_file_uri( '/assets/js/fix-adminbar.min.js' ),
    			[],
    			filemtime( get_theme_file_path( '/assets/js/fix-adminbar.min.js' ) ),
    			true
    		);
    	}
    );

    メニュー表示項目をログイン・非ログインやグループ等で変えるのもアクションフックから操作できるのですか?

    Snow Monkey には、テンプレートの内容を書き換える snow_monkey_template_part_render フィルターフックと 、テンプレートの内容をテンプレートではなく functions.php 等でコードで定義できる snow_monkey_get_template_part_<テンプレートパーツ名> アクションフックがあります。これを使って書き換えることはできると思います。

    参考:

    上の返信、ソースコードが見やすくなってるのは、僕も投稿段階でビジュアルエディタで出来ますか?

    ビジュアルエディターはわからないのですが、コードを範囲指定して、テキストエディタのツールバーにある「code」というボタンをクリックするとできます!

    2. ヘッダーサブメニュー、PCだと右上にかっこいいのですが、スマホからだと右上には表示されません。スマホもPCも、左上に表示したいのです。

    あ、そうかスマホではでませんね…。この調整はこの調整で面倒かもなので、先に提示した方法で管理バーの挙動がちゃんとなるのであればそっちのほうが良さそうです。

    0
    いいねをした人: 居ません
    #49586
    rakumath
    閲覧者
    10

    My Snow Monkeyに加えたのですが、

    wp-content/plugins/my-snow-monkey/my-snow-monkey.php ファイルの335行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。
    
    Uncaught Error: Class 'Helper' not found in wp-content/plugins/my-snow-monkey/my-snow-monkey.php:335
    Stack trace:
    #0 wp-includes/class-wp-hook.php(287): {closure}('')
    #1 wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array)
    #2 wp-includes/plugin.php(478): WP_Hook->do_action(Array)
    #3 wp-includes/script-loader.php(2294): do_action('wp_enqueue_scri...')
    #4 wp-includes/class-wp-hook.php(287): wp_enqueue_scripts('')
    #5 wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array)
    #6 wp-includes/plugin.php(478): WP_Hook->do_action(Array)
    #7 wp-includes/general-template.php(2884): do_action('wp_head')
    #8 /home/rakumath/rakumath.xyz/pu

    と言われてしまいます。

    ご教授いただければ有難いです!!

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

    あ!すみません!これに差し替えてみてください。

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_script(
    			\Framework\Helper::get_main_script_handle() . '-fix-adminbar',
    			get_theme_file_uri( '/assets/js/fix-adminbar.min.js' ),
    			[],
    			filemtime( get_theme_file_path( '/assets/js/fix-adminbar.min.js' ) ),
    			true
    		);
    	}
    );
    0
    いいねをした人: 居ません
    #49607
    rakumath
    閲覧者
    10

    ありがとうございます!!出来ました!!!><

    スライドを素早くすると、ヘッダの移動が追いつかず、挙動が変、
    という部分が見られますが(ログイン後の挙動はそこも大丈夫です)、
    ここまでお世話になったので、自分でもjsを勉強して改良してみます!

    もしよろしければ、ログイン後の上記の部分を制御しているjsファイルなど
    勉強に必要な場所をご教授いただければ嬉しいです。

    ここまで、本当にありがとうございました!!!!

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

    もしよろしければ、ログイン後の上記の部分を制御しているjsファイルなど
    勉強に必要な場所をご教授いただければ嬉しいです。

    /src/js/fix-admin.bar.js がソースファイルで、実際に実行されるのはビルド後の /assets/js/fix-adminbar.js になります。

    /src/js/fix-admin.bar.js は処理を呼び出すためのファイルで、実際の処理は /src/js/module/_fix-adminbar.js に書いてあります。

    スライドを素早くすると、ヘッダの移動が追いつかず、挙動が変、
    という部分が見られますが(ログイン後の挙動はそこも大丈夫です)

    これがちょっと気になりはしますが、一応解決済みということで、トピック閉じますね。

    0
    いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「管理ヘッダーをスマホでスクロールするときに空白を作りたくない。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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