Navigation mit list_pages

Vidar

Hey Leute, bin grad an nem kleinen Projekt beschäftigt und arbeite diesmal mit Wordpress.

Hab meine Seite derzeit statisch aufgebaut, ohne Wordpress-Anbindung aber jetzt kriege ich mein Menü nicht zum laufen und hab keine Ahnung wie weiterkommen.

Hier mal der Code aus der Sidebar:

PHP

<div id="menu">
                
                <div class="menu_item">
                    <div class="menu_item_aktiv_trible"></div>
                    <div class="menu_item_aktiv">
                        <div class="label_menu_item_aktiv">Home</div>
                    </div>
                    <div class="menu_item_aktiv_arrow"></div>
                </div>
                
                <div class="menu_item">
                    <div class="menu_item_inaktiv_trible"></div>
                    <div class="menu_item_inaktiv">
                        <div class="label_menu_item_inaktiv">Produkte</div>
                    </div>
                    <div class="menu_item_inaktiv_arrow"></div>
                </div>                
                
            </div>

Alles anzeigen

Und noch aus der CSS:

HTML

#menu {
    width:270px;
    float: left;
}


#menu_item {
    width: 270px;
    height: 40px;
    list-style-type: none;
}


.menu_item_aktiv {
    width: 142px;
    height: 42px;
    background-image: url("images/button_aktiv.jpg");
    background-repeat: no-repeat;
    float: left;
}


.menu_item_aktiv_arrow {
    width: 90px;
    height: 42px;
    float: left;
    background-image: url("images/button_aktiv_arrow.jpg");        
}


.menu_item_aktiv_trible {
    width: 38px;
    height: 42px;
    float: left;
    background-image: url("images/button_aktiv_trible.jpg");
}


.label_menu_item_aktiv {
    height: 30px;
    width: 120px;
    margin-top: 12px;
    margin-left: 12px;
    font-family: Georgia;
    font-weight: bold;
    font-size: small;
    letter-spacing:  1px;
}


.menu_item_inaktiv {
    width: 142px;
    height: 42px;
    float: left;
    background-image: url("images/button_inaktiv.jpg");
    background-repeat: no-repeat;
}


.menu_item_inaktiv_arrow {
    width: 90px;
    height: 42px;
    float: left;
    background-color: #fff;
}


.menu_item_inaktiv_trible {
    width: 38px;
    height: 42px;
    float: left;
    background-image: url("images/button_inaktiv_trible.jpg");
}


.label_menu_item_inaktiv {
    height: 30px;
    width: 120px;
    margin-top: 12px;
    margin-left: 12px;
    font-family: Georgia;
    font-size: small;
    color: #fff;
}

Alles anzeigen

Würde die Navi jetzt natürlich gerne mit den Pages aus Wordpress automatisieren, komm aber mit wp_list_pages einfach nicht weiter.

Ich freue mich über jede Hilfe.

Mfg

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

alchymyth

hast du die vorhanden doku fuer wp_list_pages() gelesen?

http://codex.wordpress.org/Function_Reference/wp_list_pages

(da gibt's vielleicht auch was auf deutsch)

das erstellte menue ist eine (un)geordnete liste, keine divs;
die elemente haben spezifische css classes;
wp_list_pages() kann auch was ohne list elemente ausgeben, dann aber leider auch ohne die entsprechenden classes.

und bist du vertraut mit dem formatieren von html listen:

http://www.w3schools.com/html/html_lists.asp

hier ist noch was von wordpress dazu:
http://codex.wordpress.org/Creating_Horizontal_Menus

Vidar

Ja mit allem bin ich vertraut. Also sprich ich darf innerhalb einer ul überhaupt keine divs verwenden?

alchymyth

innerhalb einer <ul> <li> kannst du divs verwenden - mein punkt war, dass wp_list_pages() dir kein menue mit divs ausgeben wird.

Vidar

Und gibts irgendwelche anderen Möglichkeiten das zu lösen?

Morris

Zitat von Vidar

Und gibts irgendwelche anderen Möglichkeiten das zu lösen?

Solltest du WP 3 nutzen kannst du auch auf wp_nav_menu() zurückgreifen.

Auf jeden Fall solltest du aber deine DIV-Suppe wegschütten.

Gruß
Mo

Vidar

Naja, Divs und die Struktur sind vorgegeben, kann also dabei nichts machen.

Vidar

Ok hab jetzt meine Divs geändert etc.

Jetzt sieht die sidebar.php so aus:

PHP

<div id="menu">
            
                <ul>
                    <li id="aktiv">
                        <a href="<?php echo get_settings('home'); ?>">Home</a>
                    </li>
                    
                    <?php wp_list_pages('title_li='); ?>
                </ul>
                
            </div>

Alles anzeigen

und die css so:

HTML

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}




#menu ul li {
    width: 270px;
    height: 40px;
    background-image: url("images/button_inaktiv.jpg");
    font-family: Georgia;
    margin-bottom: 1px;
}


#menu ul li#aktiv {
    background-image: url("images/button_aktiv.jpg");
}


#menu ul li a {
    color: #fff;
    text-decoration: none;
    margin-left: 45px;
    line-height: 2.9;
    font-size: small;
}


#menu ul li#aktiv a {
    color: #4f3a2e;
    font-weight: bold;
    
}

Alles anzeigen

Ist es jetzt noch möglich erstens die derzeitig aufgerufene Seite zu bestimmen und dann den li background auf aktiv zu stellen,
und zweitens würde ich gerne einen hover einfügen der den background für das li element ändert, ist das möglich?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navigation mit list_pages

Jetzt mitmachen!