Responsive - verschiedenen Bildschirmbreiten unterschiedliche Menüs zuweisen

Kai Nehr

Geht das? Die Frage scheint mir nicht abwegig, eine Lösung habe ich aber nicht gefunden :(

Ich möchte bei meinem Theme in der Ansicht für "Mobil" ein anderes Menü angezeigt bekommen, als bei "Desktop".

Sichtbarkeit und Aussehen des Menüs werden, logisch, per css-Klassen gesteuert.

Hier ist der Code aus dem Header für den Aufruf des Menüs:

HTML

<div class="toggle">
  <a class="toggleMenu" href="<?php echo esc_url('#');?>"><?php esc_attr_e('Menu','lhw'); ?></a>
</div>  <!-- toggle --> 
<div class="sitenav">
  <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</div>  <!-- site-nav -->

Wir sehen, class="toggle" oben ist die Variante für kleine Bildschirme, darunter class="sitenav" steht für normal. Bei letzterem könnte ich 'primary' durch ein anderes per functions.php registriertes Menü ersetzen, 'footer' beispielsweise oder 'mobil' oder 'xyz'.

Kann nun der php-code für das "toggle" so modifiziert werden, daß hier auch per 'theme_location' => 'blablabla' ein anderes als das primary-Menü aufgerufen wird? Leider reichen meine php-Kenntnisse dazu nicht aus.

Grüße
k.N.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Kai Nehr

Nachtrag, die Seite im Aufbau liegt auf http://pflegeteam.tagsucht.de, das Theme lhw ist ein ziemlich umgemodeltes und um weitere Templates ergänztes "BizGrowth"

Kai Nehr

(Okay, also ich löse das jetzt anders, daß ich verschiedene Menüpunte in "normal" und "mobile" sehe, mit css-Steuerung)

Aber vielleicht kann mir jemand helfen; ich komme nicht dahinter, wie das Aufklappen des Menüs in der Mobile-Ansicht ( >999px) gelöst wird.

Klar, es gibt die /style.css, es gibt eine /css/responsive.css, und das Menü und seine Variante wird in der header.php aufgerufen.

Damit komme ich aber nicht weiter. Da fehlt mir was. Wieso hat das Menü nur eine bestimmte Höhe, warum klappt es nur zum Teil auf, so daß verdeckte Menüpunkte gescrollt werden müssen?

Die Seite im Aufbau liegt auf http://pflegeteam.tagsucht.de
Das Theme "lhw" ist ein umgemodeltes und um weitere Templates ergänztes "BizGrowth"
WP 4.8

LG
k.N.

SirEctor

.sitenav bekommt bei dir eine height von 90px. Das kannst du über height: auto; ziemlich leicht korrigieren.

Kai Nehr

Manchmal ist man echt doof ;) - Danke! :D

Bevor ich ein neues Thema aufmache und Du mir vielleicht auch folgendes beantworten kannst - in meinem Header steht bezüglich der Slider-Section:

PHP

<?php if ( is_front_page() && ! is_home() ) { ?>

..was also den Slider nur auf der Homepage zeigt. Läßt sich da etwas hinzufügen, daß das ganze auch für Archiv- und Kategorie-Seiten gilt?

maxe

is_archive()

https://codex.wordpress.org/Conditional_Tags

Kai Nehr

Hab ich auch gedacht und

Code

&& !is_archive()

eingefügt. Funktioniert aber nicht so, wie ich dachte, http://pflegeteam.tagsucht.de/blog/2017/08/, also garnicht.

Danke für den Link; ich vermute, der richtige Weg sind weitere elseif-Schleifen?

Das Verzwickte am PHP für mich ist, daß ich zwar Muster in dieser Sprache wiedererkennen und Versatzstücke davon anwenden kann, aber da ich sie nicht richtig spreche, kommt manchmal nur Kauderwelsch heraus. Weil "Grüne Hügel ist auch Komponist viel gespielt in deutscher Landschaft" - verstehst Du? :D

LG
k.N.

maxe

<?php if ( is_archive() || is_front_page() && ! is_home() ) { ?>

Kai Nehr

Okay, danke, das klappt! Damit versuche ich mal weiterzukommen, es sollen auch noch die Artikel mit dazukommen (single)

Ich versuche auch immernoch das If/Else Prinzip zu verstehen.. heißt das nicht eigentlich "Wenn-dann/ansonsten"? Also bei mir im Header steht jetzt eine If-Bedingung (wenn Archiv, Home etc., dann zeige mir den Slider) und irgendwann käme ja das "ansonsten", das "else" (was ist, wenn die if-Bedingung nicht gegeben ist)

Warum gehts aber in der header.php weiter unten (ab Zeile 80) munter weiter mit dem Slider, also mit dem "dann" und nicht dem "ansonsten"?

Ich weiß, das ist hier nicht der richtige Ort für einen PHP-Crash-Kurs ..also nur, falls Du oder jemand anders Muße hat, mir mal auf die Sprünge zu helfen ;) - ich würde nämlich gerne für alle nicht mit If-definierten Seiten immer eine andere andere ganz bestimmte Aktion ausführen. Leider ist da bei mir Schluß (ich kann's einfach nicht) ;(

PHP

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div class="container">
 *
 * @package LHW
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>


<div class="header <?php if( !is_front_page() && !is_home() ){ ?>headerinner<?php } ?>">
        <div class="container">
        <!-- neu definierter LOGO-Layer -->
        <div id="Logo-Pflegeteam"><img src="/wp-content/themes/lhw/images/logo_pflegeteam.png" alt="Pflegeteam Lebenshilfe" width="170" heigth="170" align="right" /></div>


        <!-- Logo-Funktion in Footer verschoben -->


        <!--<div class="LS"><a href="/ls" title="Leichte Sprache"><img src="/wp-content/themes/lhw/images/leichte_sprache_on.png" alt="Leichte Sprache" width="47" heigth="47" /></a>
            </div>//-->
            <div class="toggle">
                <a class="toggleMenu" href="<?php echo esc_url('#');?>"><?php esc_attr_e('Menu','lhw'); ?></a>
            </div><!-- toggle --> 
            <div class="sitenav">
                    <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
            </div><!-- site-nav -->
            <div class="clear"></div>
        </div><!-- container -->
  </div><!--.header --> 


<?php if ( is_archive() || is_front_page() && ! is_home() ) { ?>
<!-- Slider Section -->
<?php for($sld=7; $sld<10; $sld++) { ?>
<?php if( get_theme_mod('page-setting'.$sld)) { ?>
<?php $slidequery = new WP_query('page_id='.get_theme_mod('page-setting'.$sld,true)); ?>
<?php while( $slidequery->have_posts() ) : $slidequery->the_post();
$image = wp_get_attachment_url( get_post_thumbnail_id($post->ID));
$img_arr[] = $image;
$id_arr[] = $post->ID;
endwhile;
}
}
?>
<?php if(!empty($id_arr)){ ?>
<section id="home_slider">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
	<?php 
	$i=1;
	foreach($img_arr as $url){ ?>
    <img src="<?php echo esc_url($url); ?>" title="#slidecaption<?php echo $i; ?>" />
    <?php $i++; }  ?>
</div>   
<?php 
$i=1;
foreach($id_arr as $id){ 
$title = get_the_title( $id ); 
$post = get_post($id); 
$content = apply_filters('the_content', substr(strip_tags($post->post_content), 0, 100)); 
?>                 
<div id="slidecaption<?php echo $i; ?>" class="nivo-html-caption">
<div class="slide_info">
<h2><?php echo $title; ?></h2>
<p><?php echo $content; ?></p>
<a class="slide_more" href="<?php echo esc_url( get_permalink() ); ?>"><?php esc_attr_e('Read More', 'lhw');?></a>
</div>
</div>      
<?php $i++; } ?>       
 </div>
<div class="clear"></div>        
</section>
<?php } else { ?>
<section id="home_slider">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
    <img src="<?php echo get_template_directory_uri(); ?>/images/slides/slider1.jpg" alt="" title="#slidecaption1" />
    <img src="<?php echo get_template_directory_uri(); ?>/images/slides/slider2.jpg" alt="" title="#slidecaption2" />
    <img src="<?php echo get_template_directory_uri(); ?>/images/slides/slider3.jpg" alt="" title="#slidecaption3" />
</div>                    
                  <div id="slidecaption1" class="nivo-html-caption">
                    <div class="slide_info">
                            <h2><?php esc_attr_e('engagiert','lhw'); ?></h2>
                            <!-- <p><?php esc_attr_e('LHW WordPress themes','lhw'); ?></p>  -->
                            <!-- <a class="slide_more" href="<?php echo esc_url('#');?>"><?php esc_attr_e('Read More', 'lhw');?></a>  -->
                           
                    </div>
                    </div>
                    
                    <div id="slidecaption2" class="nivo-html-caption">
                        <div class="slide_info">
                                <h2><?php esc_attr_e('slogan2','lhw'); ?></h2>
                                <!-- <p><?php esc_attr_e('LHW theme','lhw'); ?></p>   -->
                                <!-- <a class="slide_more" href="<?php echo esc_url('#');?>"><?php esc_attr_e('Read More', 'lhw');?></a>    -->                    
                        </div>
                    </div>
                    
                    <div id="slidecaption3" class="nivo-html-caption">
                        <div class="slide_info">
                                <h2><?php esc_attr_e('slogan3','lhw'); ?></h2>
                                <!-- <p><?php esc_attr_e('LHW theme','lhw'); ?></p>    -->
                                <!-- <a class="slide_more" href="<?php echo esc_url('#');?>"><?php esc_attr_e('Read More', 'lhw');?></a>     -->
                        </div>
                    </div>
</div>
<div class="clear"></div>
</section><!-- Slider Section -->
<?php } } ?>


<!-- header-ausgelagert.txt -->

Alles anzeigen

maxe

alles was in den { } beim if steht, wird auch bei Erfüllung der Bedingung ausgeführt. Else ist nur notwendig, wenn bei nicht zutreffen was anderes ausgeführt werden soll. Wenn ansonsten nichts ausgeführt werden soll, kann das else (wäre dann ja eh leer) weggelassen werden.

if Bedingung {
tu dies
} else {
tu das
}

mensmaximus

Man sollte solche Konstrukte vermeiden. PHP Abfragen in Templates sollte man mit der Alternativen IF Syntax schreiben: http://php.net/manual/de/cont…tive-syntax.php

Kai Nehr

Theoretisch ist mir das ja klar.

Da sich meine Seite ungeachtet dessen aber tatsächlich so verhält:

Wenn Home- oder Archiv-Seite {
zeige Slider
} else {
tu nichts
}

- warum ist der "else"-Bereich im Header nicht leer? Warum kommen dann da die ganzen Slider-Inhalte (img, caption, info etc.) drin vor? (s. Code-Copy weiter oben)

Ich würde das ganze ja gerne so umstricken:

Wenn Artikel-, Archiv-Seite oder Homepage {
zeige Slider
} else {
zeige Artikelbild
}

Das ist mit aber leider zu hoch.

(Eigenes Thema aufmachen?)

mensmaximus

Zitat von Kai Nehr

(Eigenes Thema aufmachen?)

Ganz sicher nicht, denn wie Du schon selbst erkannt hast, ist das kein PHP Forum und Dein "Problem" ist nicht durch WordPress verursacht sonder durch mangelnde PHP Kenntnisse. maxe hat Dir alles notwendige gesagt und ich auch.

Kai Nehr

Und dafür danke ich Euch auch.

Aber fragen kann ich doch. Vielleicht hat jemand eine ähnliche Problemstellung gehabt oder ein entsprechende Lösung parat...?

LG
k.N.

maxe

es gibt kein ELSE auf das bezogene IF. Der IF hört in Zeile 115 mit der letzten } auf.

Es gibt lediglich ein ELSE auf das IF(!empty($id_arr)){ ...

Kai Nehr

Oh! :wink:

Ich seh' das eben nicht auf den ersten Blick :roll:
Danke!

(bzw. auf den zweiten, dritten, vierten und den fünften Blick..)

Kai Nehr

Es hat übrigens funktioniert - besten Dank nochmal!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Responsive - verschiedenen Bildschirmbreiten unterschiedliche Menüs zuweisen

Jetzt mitmachen!