Support » Themes » Social Media Menue

  • Gelöst morgana17

    (@morgana17)


    Hallo Zusammen,

    ich möchte gerne das Social Media Menü oben anzeigen lassen, rechts neben der Hauptnavigation. Ich benutze das Twenty Twenty Theme hier wird es automatisch im Footer eingefügt. Kann ich hier beim Customizer eine Einstellung machen damit das Social Media Menü oben angezeigt wird? Leider werde ich hier nicht fündig.

    Herzliche Grüße
    Christine

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Ich denke, da wirst du wohl den Header und Footer in den PHP-Scripten anpassen müssen. Das setzt aber voraus, dass du ein Child-Theme einsetzt, damit bei einem Update des Theme das nicht wieder zurückgesetzt wird.

    ok, danke. Child-Theme habe im Einsatz.

    Habe versucht folgendes in den Header zu integrieren, aber leider klappt es nicht.
    Habe auch versucht das Footer Menü zu löschen, aber auch hier gab es eine Fehlermeldung. Bin leider nicht sehr fit in php, kann mir jemand bei der Abänderung behilflich sein?

    <?php
    
    $has_footer_menu = has_nav_menu( 'footer' );
    $has_social_menu = has_nav_menu( 'social' );
    
    $has_sidebar_1 = is_active_sidebar( 'sidebar-1' );
    $has_sidebar_2 = is_active_sidebar( 'sidebar-2' );
    
    // Only output the container if there are elements to display.
    if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 ) {
    	?>
    
    	<div class="footer-nav-widgets-wrapper header-footer-group">
    
    		<div class="footer-inner section-inner">
    
    			<?php
    
    			$footer_top_classes = '';
    
    			$footer_top_classes .= $has_footer_menu ? ' has-footer-menu' : '';
    			$footer_top_classes .= $has_social_menu ? ' has-social-menu' : '';
    
    			if ( $has_footer_menu || $has_social_menu ) {
    				?>
    				<div class="footer-top<?php echo $footer_top_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
    					<?php if ( $has_footer_menu ) { ?>
    
    						<nav aria-label="<?php esc_attr_e( 'Footer', 'twentytwenty' ); ?>" role="navigation" class="footer-menu-wrapper">
    
    							<ul class="footer-menu reset-list-style">
    								<?php
    								wp_nav_menu(
    									array(
    										'container'      => '',
    										'depth'          => 1,
    										'items_wrap'     => '%3$s',
    										'theme_location' => 'footer',
    									)
    								);
    								?>
    							</ul>
    
    						</nav><!-- .site-nav -->
    
    					<?php } ?>
    					<?php if ( $has_social_menu ) { ?>
    
    						<nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>" class="footer-social-wrapper">
    
    							<ul class="social-menu footer-social reset-list-style social-icons fill-children-current-color">
    
    								<?php
    								wp_nav_menu(
    									array(
    										'theme_location'  => 'social',
    										'container'       => '',
    										'container_class' => '',
    										'items_wrap'      => '%3$s',
    										'menu_id'         => '',
    										'menu_class'      => '',
    										'depth'           => 1,
    										'link_before'     => '<span class="screen-reader-text">',
    										'link_after'      => '</span>',
    										'fallback_cb'     => '',
    									)
    								);
    								?>
    
    							</ul><!-- .footer-social -->
    
    						</nav><!-- .footer-social-wrapper -->
    
    					<?php } ?>
    • Diese Antwort wurde geändert vor 4 Monaten, 3 Wochen von Hans-Gerd Gerhards. Grund: Bitte den Code immer als "Code" formatieren

    Hallo,
    das geht an sich grundsätzlich schon über die Menüoptionen von twenty twenty, siehe hier:
    social-media-menue
    Viele Grüße
    Hans-Gerd

    Hallo Gerd,

    danke, ich möchte jedoch dass die Icons oben angezeigt werden.

    Viele Grüße

    Hallo,
    na ja, du hattest leider nicht geschrieben, dass du die Icons oben anzeigen lassen möchtest.
    Hier ist ein Link zu einer entsprechenden Frage im englischsprachigen Forum.
    Ansonsten auch einfach mal im Support-Bereich von twenty twenty eine entsprechende Frage stellen.
    Nachtrag: Wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Hallo Gerd, danke. Die Seite ist noch nicht online, ich möchte es mit dem php code versuchen sie oben und diesen entsprechend ändern.

    Hallo,
    ich habe mich mal interessehalber damit beschäftigt.
    nachfolgend die header.php, die in das root vom child theme gehört:

    <?php
    /**
     * Header file for the Twenty Twenty WordPress default theme.
     *
     * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     *
     * @package WordPress
     * @subpackage Twenty_Twenty
     * @since Twenty Twenty 1.0
     */
    
    ?><!DOCTYPE html>
    
    <html class="no-js" <?php language_attributes(); ?>>
    
    	<head>
    
    		<meta charset="<?php bloginfo( 'charset' ); ?>">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" >
    
    		<link rel="profile" href="https://gmpg.org/xfn/11">
    
    		<?php wp_head(); ?>
    
    	</head>
    
    	<body <?php body_class(); ?>>
    
    		<?php
    		wp_body_open();
    		?>
    
    		<header id="site-header" class="header-footer-group" role="banner">
    
    			<div class="header-inner section-inner">
    
    				<div class="header-titles-wrapper">
    
    					<?php
    
    					// Check whether the header search is activated in the customizer.
    					$enable_header_search = get_theme_mod( 'enable_header_search', true );
    
    					if ( true === $enable_header_search ) {
    
    						?>
    
    						<button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
    							<span class="toggle-inner">
    								<span class="toggle-icon">
    									<?php twentytwenty_the_theme_svg( 'search' ); ?>
    								</span>
    								<span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); ?></span>
    							</span>
    						</button><!-- .search-toggle -->
    
    					<?php } ?>
    
    					<div class="header-titles">
    
    						<?php
    							// Site title or logo.
    							twentytwenty_site_logo();
    
    							// Site description.
    							twentytwenty_site_description();
    
                                // zusätzliches social menu im header, hgg, 4.5.2020                          
                           		$has_social_menu = has_nav_menu( 'social' );
            					if ( $has_social_menu ) { ?>
            
            						<nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>" class="footer-social-wrapper">
            
            							<ul class="social-menu footer-social reset-list-style social-icons fill-children-current-color">
            
            								<?php
            								wp_nav_menu(
            									array(
            										'theme_location'  => 'social',
            										'container'       => '',
            										'container_class' => '',
            										'items_wrap'      => '%3$s',
            										'menu_id'         => '',
            										'menu_class'      => '',
            										'depth'           => 1,
            										'link_before'     => '<span class="screen-reader-text">',
            										'link_after'      => '</span>',
            										'fallback_cb'     => '',
            									)
            								);
            								?>
            
            							</ul><!-- .footer-social -->
            
        						</nav><!-- .footer-social-wrapper -->
        
        					<?php } ?>
    
    					</div><!-- .header-titles -->
    
    					<button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal"  data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
    						<span class="toggle-inner">
    							<span class="toggle-icon">
    								<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
    							</span>
    							<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
    						</span>
    					</button><!-- .nav-toggle -->
    
    				</div><!-- .header-titles-wrapper -->
    
    				<div class="header-navigation-wrapper">
    
    					<?php
    					if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {
    						?>
    
    							<nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
    
    								<ul class="primary-menu reset-list-style">
    
    								<?php
    								if ( has_nav_menu( 'primary' ) ) {
    
    									wp_nav_menu(
    										array(
    											'container'  => '',
    											'items_wrap' => '%3$s',
    											'theme_location' => 'primary',
    										)
    									);
    
    								} elseif ( ! has_nav_menu( 'expanded' ) ) {
    
    									wp_list_pages(
    										array(
    											'match_menu_classes' => true,
    											'show_sub_menu_icons' => true,
    											'title_li' => false,
    											'walker'   => new TwentyTwenty_Walker_Page(),
    										)
    									);
    
    								}
    								?>
    
    								</ul>
    
    							</nav><!-- .primary-menu-wrapper -->
    
    						<?php
    					}
    
    					if ( true === $enable_header_search || has_nav_menu( 'expanded' ) ) {
    						?>
    
    						<div class="header-toggles hide-no-js">
    
    						<?php
    						if ( has_nav_menu( 'expanded' ) ) {
    							?>
    
    							<div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu">
    
    								<button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
    									<span class="toggle-inner">
    										<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
    										<span class="toggle-icon">
    											<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
    										</span>
    									</span>
    								</button><!-- .nav-toggle -->
    
    							</div><!-- .nav-toggle-wrapper -->
    
    							<?php
    						}
    
    						if ( true === $enable_header_search ) {
    							?>
    
    							<div class="toggle-wrapper search-toggle-wrapper">
    
    								<button class="toggle search-toggle desktop-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
    									<span class="toggle-inner">
    										<?php twentytwenty_the_theme_svg( 'search' ); ?>
    										<span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); ?></span>
    									</span>
    								</button><!-- .search-toggle -->
    
    							</div>
    
    							<?php
    						}
    						?>
    
    						</div><!-- .header-toggles -->
    						<?php
    					}
    					?>
    
    				</div><!-- .header-navigation-wrapper -->
    
    			</div><!-- .header-inner -->
    
    			<?php
    			// Output the search modal (if it is activated in the customizer).
    			if ( true === $enable_header_search ) {
    				get_template_part( 'template-parts/modal-search' );
    			}
    			?>
    
    		</header><!-- #site-header -->
    
    		<?php
    		// Output the menu modal.
    		get_template_part( 'template-parts/modal-menu' );
    

    Anpassungen im CSS-Bereich wären natürlich noch notwendig.
    Viele Grüße
    Hans-Gerd

    super, danke 🙂 hab es eingebaut und es hat geklappt 🙂

    freut mich 🙂

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)