Vistered Little - Navigation in den Header einbauen

karlo16

Wäre super wenn mir jemand helfen könnte, ich kenne mich mit PHP leider nicht aus. Ich würde mir gerne eine Navigation basteln, die sollte so platziert sein, wie auf dem Bild das ich angehängt habe.
Habe mal versucht, in header.php eine Tabelle zu platzieren aber die verschwindet hinter der Header-Grafik, also hinter "background.png".
:confused:

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

koslowski

Hi,

eine Tabelle ist für tabellarische Daten da.
Eine Reihe von Links gehört semantisch als Liste ausgezeichnet (ul).

PHP

<div id="kopf">
  <h1>Schrauben Müller - <span>Der Blog</span></h1>
</div><!-- Ende #kopf -->
<div id="topnavi">
  <ul>
    <li><a href="/wordpress/"<?php if(is_home() and !is_paged()) echo ' class="aktiv"'; ?>
         title="Startseite">Startseite Blog</a></li>
    <?php wp_list_pages('title_li='); ?>
  </ul>
</div><!-- Ende #topnavi -->

So könnte der entscheidende Teil einer header.php aussehen.

Zuerst div#kopf mit Hauptüberschrift und direkt danach div#topnavi mit der horizontalen Navigation.
Optisch kann man es so aussehen lassen als wäre die navi im Kopf, z.B. gleiche Farbe und kein Abstand zwischen #kopf und #topnavi.

Mit dem ersten li wird sichergestellt das die gerade aktuelle Seite optisch hervorgehoben wird (die Klasse .aktiv hat die gleiche Formatierung wie die Klasse .current_page_item welche auf der aktuellen Seite normal ausgegeben wird)

Durch wp_list_pages werden die Links als Liste ausgegeben und jeder Listenpunkt bekommt noch zwei Klassen mit auf den Weg:
.page_item und .page-item-5 wobei die 5 nur beispielhaft ist.
Jeder Listenpunkt bekommt eine individuelle Klasse mit einer jeweils anderen Zahl augegeben.
So hast du genug Ansatzpunkte um das Ganze per CSS zu gestalten.

Innerhalb der Klammer nach wp_list_pages können noch versch. Parameter eingetragen werden, um das Ergebnis zu steuern.

Bin kein WP-Profi deshalb hoffe ich nix falsches zu erzählen. :)

Gruß
koslowski

karlo16

Vielen Dank schon mal für die Antwort. Leider kapiere ich das mit den Klassen nicht. Könntest Du das was Du meinst direkt auf die header.php meines Themes beziehen? Der Code davon lautet:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>




    <title><?php
        if( function_exists( 'is_tag' ) && is_tag() ) {
            UTW_ShowCurrentTagSet('tagsettextonly'); 
            echo ' ' . __('@', VL_DOMAIN) . ' ';
            bloginfo('name');
        }
        else if( is_category() || is_month() || is_day() || is_year() || is_author() ) {
            wp_title('',true); 
            echo ' ' . __('@', VL_DOMAIN) . ' ';
            bloginfo('name');
        }
        else if (is_search()) {
            echo( htmlspecialchars( stripslashes( $_GET['s'] ) ) );
            echo ' ' . __('@', VL_DOMAIN) . ' ';
            bloginfo('name');
        }
        else if ( is_page() ) {
            $id = 0;
            $parent;
            for( $parent = &get_post($id); $parent->post_parent != 0; $parent = &get_post($parent->post_parent) ) {
                echo $parent->post_title . ' &laquo; ';
            }
            echo $parent->post_title;
            echo ' ' . __('@', VL_DOMAIN) . ' ';
            bloginfo('name');            
        }
        else if (is_single() || is_page() || is_archive()) {
            wp_title('',true);
            echo ' ' . __('@', VL_DOMAIN) . ' ';
            bloginfo('name');
        } 
        else if (is_404()) {
            _e('Page not found', VL_DOMAIN );
            echo ' ' . __('@', VL_DOMAIN) . ' ';
            bloginfo('name');
        }
        else if( is_home() ) {
            bloginfo('name'); echo(' &raquo; '); bloginfo('description'); 
        }
        else {
            if( function_exists('g2_init')) {
                if (!defined('G2INIT')) {
                    g2_init();
                }
                $g2data = GalleryEmbed::handleRequest();
                if( !empty( $g2data[ 'themeData' ]) ) {
                    echo $g2data[ 'themeData' ][ 'item' ][ 'title' ];
                    for( $i = count( $g2data[ 'themeData' ][ 'parents' ] ); $i > 0; --$i ) {
                        if( $g2data[ 'themeData' ][ 'item' ][ 'id' ] != $g2data[ 'themeData' ][ 'parents' ][ $i-1 ][ 'id'] ) {
                            ?> &laquo; <?php
                            echo $g2data[ 'themeData' ][ 'parents' ][$i- 1 ][ 'title' ];
                        }
                    }
                    echo ' ' . __('@', VL_DOMAIN) . ' ';
                    bloginfo('name');
                }
                GalleryEmbed::done();
            }
            else {
                bloginfo('name'); echo(' &raquo; '); bloginfo('description');         
            }                
        }
        ?></title><?php
?><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><?php
vl_bloglogostyle();
if( !function_exists( 'blogskinstyles' ) ) {
    $url = get_stylesheet_directory_uri() . '/skins/default/style.css.php';
    $ieurl = get_stylesheet_directory_uri() . '/skins/default/style-ie.css.php?skin=default';
    if( function_exists( 'add_presentationtoolkit_skin_query' ) ) {
        $url = add_presentationtoolkit_skin_query( 'Default', $url );
        $ieurl = add_presentationtoolkit_skin_query( 'Default', $ieurl );
    }
?>
<link rel="stylesheet" href="<?php echo $url; ?>" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php echo $ieurl; ?>" type="text/css" media="screen" />
<![endif]-->
<?php
}


if( menu_position_stylesheet_url() ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); print menu_position_stylesheet_url(); ?>" type="text/css" media="screen" />
<?php } ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/wallpaper.css.php" type="text/css" media="screen" />
<?php
if( function_exists('g2_init') ) {
    ?><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/wpg2.css" type="text/css" media="screen" /><?php
    ?><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/siriux.css" type="text/css" media="screen" /><?php
}?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php
$theme = get_current_theme();
$ct = get_theme($theme);
?>
<meta name="generator" content="WordPress <?php echo $wp_version; ?>" />
<meta name="generator-version" content="<?php echo $wp_version; ?>" />
<meta name="theme" content="<?php echo $ct[ 'Title' ]; ?>" />
<meta name="theme-version" content="<?php echo $ct[ 'Version' ]; ?>" />
<?php
if( !function_exists('get_theme_option') || get_theme_option('headcredits') != 'remove' ) {
    ?><link rel='theme' title='Vistered Little Theme' href='http://windyroad.org/software/wordpress/vistered-little-theme' /><?php
}
?>
 <script type="text/javascript">
 var vl_wallpaper_count = <?php global $vl_wallpapers; echo count( array_merge( $vl_wallpapers[ 'tiled'], $vl_wallpapers['bottom-left'] ) ); ?>;
 var vl_wallpaper_current = <?php echo wallpaper_selection(); ?>;
 var search_phrase = "<?php echo __('Search', VL_DOMAIN) . '...'; ?>";
 var search_label = "<?php _e('Type and press enter.', VL_DOMAIN); ?>";
 </script>
 <script src="<?php bloginfo('template_directory'); ?>/scripts/behaviour.js" type="text/javascript"></script>


<?php
wp_get_archives('type=monthly&format=link'); 
wp_head();
?>




</head>




<body id="<?php echo wallpaper_class();?>" class="<?php
if( !function_exists( 'get_theme_option' ) 
    || get_theme_option('headerposition') != "normal" )
{
    echo " headerfixed";
}
if( function_exists( 'get_theme_option' ) 
    && ( get_theme_option( 'thumbpos' ) == "sidebar"
         || get_theme_option( 'thumbpos' ) == "none" )
    && ( vl_get_bloglogodir() == null ) ) {
        echo " plainheader";
}
if( function_exists('get_theme_option') && get_theme_option('quadpossidebar') == 'quad' ) {
    echo " quadbar";
}
?>" style='font-family: <?php 
    echo vl_get_theme_option('font-family', '"verdana", sans-serif' );
?>; font-size: <?php
    echo vl_get_theme_option('font-size', '14px');
?>'><?php
?><div id="header"><?php
?><div class="header_content"><?php
if( !function_exists('get_theme_option')
    || get_theme_option( 'headersearch' ) != "hide" )
{
?>
 <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <p class="right" id="search">
    <input type="text" value="<?php echo __('Search', VL_DOMAIN) . '...'; ?>" name="s" id="s" alt="Search"/><br />
    <label id="label" for="s"></label>
<?php
    if( function_exists( 'mfg_search_inputs' ) )
        mfg_search_inputs();
?>
    </p>
 </form>


<?php
}
if( is_single() || is_page() ) {
    ?><div class="blogtitle" <?php
}
else { 
    ?><h1 <?php
}
?>style='font-family: <?php 
    echo vl_get_theme_option('title-font-family', '"Trebuchet MS", sans-serif' );
?>; font-size: <?php
    echo vl_get_theme_option('font-size', '20px');
?>'><?php
?><a href="<?php bloginfo('url'); ?>" title="<?php _e( 'Go home.', VL_DOMAIN); ?>"><?php bloginfo('title'); ?></a><br /><?php  
if( is_single() || is_page() ) {
    echo '</div>';
}
else { 
    echo '</h1>';
}


if( headerThumbs() ) spitOutWallpaperThumbs(); ?>
<div style="clear: both;"></div>
</div>
<div class="header_bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>




<div id="bodyowner">




<?php
if( function_exists('dynamic_sidebar') ) {
    if ( vl_widget_count(__('Banner', VL_DOMAIN)) > 0 ) {
        ?><div class="banner">
        <div class="blogbefore">
            <div class="left"></div>
            <div class="right"></div>
            <div class="middle"></div>
        </div><?php
        dynamic_sidebar(__('Banner', VL_DOMAIN));
        ?><div class="blogafter">
            <div class="left"></div>
            <div class="right"></div>
            <div class="middle"></div>
        </div>
        </div><?php
    }
}
?>

Alles anzeigen

Und aussehen tut das wie im Anhang. Dort wo die thumbnails sind hätte ich gerne meine Links, nur halt rechts.

koslowski

Hi,

mit deiner header.php kann ich leider nix anfangen.

Wenn du im Backend verschiedene Seiten erstellt hast, kannst du mit wp_list_pages dir diese Seiten als Linkliste ausgeben lassen.

Dabei weist WP den Listenpunkten Klassen zu.
Für den Link der aktuellen Seite wird dem entsprech. Listenpunkt .current_page_item zugewiesen. Diese Klasse kannst du mit CSS individuell gestalten.

Außerdem wird den Listenpunkten die Klasse .page_item und eine spezifische Klasse z.B. .page-item-(irgendeine Zahl) zugewiesen.
Diese Zahl ist bei jedem Listenpunkt anders.

Diese Klassen kannst du herausfinden indem du den Quelltext der Seite aufrufst und nachsiehst welche Klassen WP vergibt.

Das sind auch wieder Ansatzpunkte um die Liste per CSS zu gestalten.

Ohne CSS-Kenntnisse ist eine individuelle Gestaltung der Links leider schwerlich möglich. ;)

Gruß
koslowski

karlo16

Ich GLAUBE ich weiß ungefähr was Du meinst. Aber um die Gestaltung der Links geht es mir noch nicht, mir geht es ERSTMAL darum, überhaupt Links (oder einfach nur Schrift) dorthin platziert zu bekommen, wo ich sie haben will - also rechts von den Thumbnails. Und das ohne dass sie von der Header-Grafik überdeckt werden, so wie es mit der Tabelle passiert ist, von der ich vorher schrieb. Oder meinst Du das mit "Gestaltung der Links"?

koslowski

Moin,

Zitat von karlo16

Aber um die Gestaltung der Links geht es mir noch nicht, mir geht es ERSTMAL darum, überhaupt Links (oder einfach nur Schrift) dorthin platziert zu bekommen, wo ich sie haben will - also rechts von den Thumbnails.

genau das ist Gestaltung. :)

Alles was mit positionieren von Elementen zu tun hat, mit Farben, Größen, usw. ist CSS.

Zitat von karlo16

Und das ohne dass sie von der Header-Grafik überdeckt werden, so wie es mit der Tabelle passiert ist, von der ich vorher schrieb.

Eine Headergrafik sollte eine Hintergrundgrafik sein und nicht als img eingebunden werden (außer dem Logo vielleicht.).

Zum positionieren zählt auch die Stapelreihenfolge, d.h. die Schichtung auf der z-Achse (zum Betrachter hin).

Wenn man das falsch macht kann schon mal ein Element unerwünschterweise das andere verdecken.

Zitat von karlo16

Oder meinst Du das mit "Gestaltung der Links"?

jep. :)

Gruß
koslowski

karlo16

Okay super! Soweit erscheint die Navi die Du oben gepostet hattest genau an der Stelle wo ich sie haben will. Allerdings erscheinen die Links (Seiten) alle untereinander, ich hätte sie ja aber gerne nebeneinander. Also so:

Seite1 | Seite2 | Seite3

statt so:

Seite1
Seite2
Seite3

Wie macht man das denn? Mein CSS dazu sieht jetzt so aus:

Code

#navi {
    
        position: absolute;
        text-align: right;
        top: 85px;
        right: 10px;
        font-size: .8em;
}

koslowski

Hi,

position:absolute für die navi halte ich für keine gute Idee, das geht ohne besser.

Lies dich einfach mal hier (ab Punkt 10) ein. :wink:

Gruß
koslowski

karlo16

Vielen Dank für die Hinweise, jetzt ist es so wie ich´s haben wollte. In der header.php steht jetzt:

PHP

<div id="navi">
<ul>
    <?php wp_list_pages('title_li=', 'depth=1', 'sort_column=ID'); ?>
  </ul>
</div>

Und in der style.css:

Code

#navi {
    
        position: absolute;
        text-align: center;
        top: 85px;
        right: 10px;
        font-size: 1.1em;


}


#navi li {
    display: inline;
        list-style: none;
        padding: 3px 8px;
      //border-right: 1px solid #7CC1EB; //Trennstriche


    }

Alles anzeigen

Zitat von koslowski

position:absolute für die navi halte ich für keine gute Idee, das geht ohne besser.

Aber dann "springt" die Navileiste ganz woanders hin :confused:
Gruß,
Karlo

karlo16

Ach ja, aussehen tut das Ganze jetzt wie im Anhang:

koslowski

Moin,

Zitat von karlo16

Aber dann "springt" die Navileiste ganz woanders hin :confused:

ohne einen Link zur Seite kann ich leider nur spekulieren. :)

Wenn das ein normaler header mit Hauptüberschrift und darunter die navi ist, kann sie eigentlich nicht woanders hinspringen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Vistered Little - Navigation in den Header einbauen

Jetzt mitmachen!