web-dev-qa-db-ja.com

デスクトップのナビゲーションメニューを継承するモバイルテーマを停止する方法

UPDATE ************まあ私は実用的な解決策を持っていますが、理想的ではありません。

モバイルナビゲーションボタンが組み込まれているGenesisサンドボックスの子テーマを使用して、プライマリナビゲーションメニューを使用するように設定することができたので、最小化されたデスクトップを処理できます。

その後、レスポンシブメニュープラグインを追加して、ソース用に自分のカスタムモバイルメニューを選択できるようにしました。それから私はデスクトップ用のプラグインを隠し、携帯用の創世記メニューボタンを隠しました。

数日後にそれを残して、そして50ポイントを得る人を選んでください - あなたの貢献のためのすべてのおかげで...

（QUESTION RE-PHRASED）自分のサイトのモバイル版を構築しようとしています。

2つのテーマ、1つはデスクトップ用、もう1つはモバイル訪問者専用（「モバイルテーマは「すべてのモバイルテーマプラグイン」で自動的に選択されます））。

デスクトップメニューとモバイルメニュー - 私はWP管理/メニュー内の各テーマのカスタムメニューを作成しました。

デスクトップテーマを有効にして、プライマリナビゲーションのデスクトップメニューを選択します。モバイルテーマを有効にして、プライマリナビゲーションをモバイルメニューに設定します。

問題は、通常の操作のためにデスクトップテーマをアクティブにする必要があるということです。モバイルの訪問者は代替のモバイルテーマを見ますが、デスクトップのプライマリナビゲーションが設定されているものは何でもナビゲーションは常に続きます。

どうすればこのようなことが起きないようにして、モバイルテーマでモバイルナビゲーションを常に使用するように強制することができますか。

menusmobile
4
speedypancake

5日間のgoogling、試行錯誤、そして無数のプラグインの後、私はようやく自分のために働く解決策を手に入れました。

デスクトップとモバイル両方の訪問者に共通のテーマを使用するようになりましたが、それぞれ独自のカスタムメニューがあります。 Genesisフレームワークを試していて、彼らの "Sandbox" childthemeには最小化された/モバイルナビゲーション機能が組み込まれているので、これは私にとってはより簡単になりました。それで私は単にデスクトップメニューにプライマリとモバイルオプションを設定します。

モバイルの訪問者に応えるために、私は優れた「レスポンシブメニュー」プラグインをインストールしました： https://wordpress.org/plugins/responsive-menu/ これはあなたにそのソースのために異なるカスタムメニューを選択するオプションを与えます。これを私のモバイルメニューに設定しました。

レスポンシブプラグインを追加するということは、ナビゲーションメニューが2つ表示されることになったため、デスクトップ上のレスポンシブメニューを非表示にし、モバイル用のGenesisメニューを非表示にするために、条件付きCSSを少し使用しました。

<?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>

クリックメニューはレスポンシブメニューのdivです。必要に応じてmobbleプラグインをインストールすることで "wp_is_mobile"機能をより正確にターゲットにすることができます。

私はモバイル訪問者のためのページリダイレクトを追加しました。これは彼らを私の編集したバージョンのホームページに連れて行きます：

function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( '/mobile-home' ); 
    exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

それであなたはそれを持っています！それは今私には受け入れられる解決策です。理想的には、モバイルユーザーにモバイルまたはデスクトップのエクスペリエンスを選択するオプションを提供できると思いますが、それにはCookieの設定が関係しているように思われます。

回答するのに時間がかかったすべての人にもう一度感謝します - 特に2つの異なるテーマを持つことが最善の方法ではないと提案した人たち。

2
speedypancake

私はモバイルユーザーのために別のテーマを作成する時代は過ぎ去ったと思います。適切な計画とレイアウトを使用すると、デスクトップ、ラップトップ、タブレット、モバイルデバイスで1つのテーマを使用できます。

私はこれに取り組むつもりははるかに異なる方法です。

  • まず、通常のように必要な画面サイズに応じて反応するようにテーマを作成します。例については、特に12からのように、バンドルされたテーマを参照してください。

  • wp_is_mobile() conditinalタグを使用して、携帯電話専用の機能をロードします。それらを整理するために、私のモバイル機能専用のseparte機能ファイルも作成します。例

    if(wp_is_mobile()) {
   //DO SOMETHING FOR MOBILE
}else{
  //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
}

  • あなたのモバイルスタイルのためだけの粋なスタイルシートを作成し、そしてwp_is_mobile()条件タグを使って条件付きでこのスタイルシートをエンキューする。このスタイルシートをロードするたびに、最後に死んでロードされるように、アクションに優先順位を付けることを忘れないでください。

メニューについては、バンドルされているテーマも見てください。私は14のメニューとそれがどう反応するかが好きです。すべてはfunctions.jsの中の単純なjsによって処理されます。あなたはこれを利用してあなた自身のテーマに適応させることができます。私は創世記を扱ったことがないので、どんなフックが使っているのかわかりません。

このチュートリアル からも素晴らしいアイデアが出てきます。これは、基本的にjQuery用のAlberto ValeroのSidrプラグインを組み込んでいます。私は14の子供のテーマのうちの1つでそれを使いました、そしてそれは素晴らしい働きをします。

これらはあなたが考えることができるほんの少しの選択肢です。これがあなたの問題解決に役立つことを願っています

7
Pieter Goosen

2つのメニューを作ります。 1つは携帯電話での表示用、もう1つはデスクトップ用のデフォルトとしてです。あなたのheader.phpにこのコードを追加するか、あなたの関数ファイルの中でフックを使うことができます。

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'desktop-menu' ) );
}
?>

または、2つのカスタムメニューを作成してこのコードを使用することもできます。

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}
?>

あるいは、テーマを条件付きで切り替えることもできます。

add_filter( 'stylesheet', 'wpsites_change_themes' );
add_filter( 'template',   'wpsites_change_themes' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = 'my-mobile-theme';
    return $theme;
}
5
Brad Dalton

あなたが説明するように2つのテーマを動かすのは非常に奇妙ですが、私たちはこれを理解できると思います。

どちらのテーマでも、メニューが印刷される場所（おそらくheader.php）には、正しいメニューを選択して印刷するコードが必要です。

$desktop_theme_name = 'Desktop Theme Name'; // Replace this with the name of the desktop theme
$mobile_theme_name = 'Mobile Theme Name'; // Replace this with the name of the mobile theme

// Get the current theme's information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        'menu' => 'Desktop Menu', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        'menu' => 'Mobile Menu', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}

幸運を祈る！

1
The Maniac

0 down vote誰もまだこのスレッドを見ているなら、私はしばらくこれに苦労していました、これらのどれもうまくいきませんでした...私はCSSでそれをすることができました！

基本的には、モバイルとデスクトップに必要なすべてのアイテムを含む1つの巨大なメニューを作成します。次に、それぞれのメニュー項目に「hide-mobile」と「hide-desktop」のクラスを追加します。

このCSSを使用してください：

@media (min-width: 980px){ .hide-desktop{ display: none !important; } } @media (max-width: 980px){ .hide-mobile{ display: none !important; } }
0
Jordan