WordPress Theme erstellen (Teil 2)

Home / Knowledge / WordPress Theme erstellen (Teil 2)

Templates definieren

Damit verschiedene Seitenlayouts auf verschiedene Seiten angewendet werden können, müssen diese erstmals definiert werden. Dafür sind verschiedene Wege möglich:

Element für bestimmte Seite bestimmen

<h5><?php bloginfo('description'); ?><?php if (is_page('kontakt')) { ?>
                - Rufen Sie uns jetzt an!
<?php } ?></h5>

Im header.php kann z.B. mit is_page eine Seite angesprochen werden, welche dann in diesem Fall den Zusatz „- Rufen Sie uns jetzt an!“ zum bereits bestimmten Titel erhält. Hier kann der „Slug“ oder die bestimmte „ID“ verwendet werden.

Template für bestimmte Seite bestimmen

Wenn das ganze Layout für eine bestimmte Seite anders aussehen soll, dann sollte eine neue PHP-Datei erstellt werden, die in diesem Fall page-kontakt.php heissen sollte. Somit wird diese automatisch für die Seite „Kontakt“ verwendet und kann komplett angepasst werden.

Generelles Template definieren

/* 
Template Name: easyLayout
*/

Sollte ein Template für mehr als eine Seite gelten, was meistens der Fall ist, so muss auch in diesem Fall eine neue PHP-Datei angelegt werden. Der Name dieser Datei ist in diesem Fall nicht wichtig, jedoch die Kommentarzeile, welche den Namen dieses Templates definiert. Auch hier kann der Inhalt komplett verändert werden.

Das Template kann nun z.B. bei einer Seite im WordPress-Backend unter Templates ausgewählt werden:

Bildschirmfoto-2014-10-31-um-14.29.23

Submenü erstellen mit PHP

Für jede Seite kann in den Seiteneinstellungen eine Elternseite definiert werden. Damit diese nun ausgegeben wird, benötigt das Theme einige Veränderungen.

Functions erstellen

//Get Top Menu
function get_top_menu_id() {
    
    global $post;
    
    if ($post->post_parent) {
        $ancestors = array_reverse(get_post_ancestors($post->ID));
        return $ancestors[0];
    }
    
    return $post->ID;
}


// Has Children
function has_children() {
    global $post;
    
    $pages = get_pages('child_of=' . $post->ID);
    return count($pages);
}

?>

Als erstes müssen in der functions.php Datei zwei Funktionen geschrieben werden, welche zum einen die ID der übergeordneten Menüpunkte ausgibt und zum anderen schaut, ob eine Hauptseite überhaupt Unterseiten hat.

Unternavigation erzeugen

 <?php 
            if ( has_children() OR $post->post_parent > 0 ) { ?>
            
            <nav class="site-nav children-links clearfix">
            
                <span class="parent-link"><a href="<?php echo get_the_permalink(get_top_menu_id()); ?>"><?php echo get_the_title(get_top_menu_id()); ?></a></span>            

                <ul>
                    <?php

                        $args = array(
                            'child_of' => get_top_menu_id(),
                            'title_li' => ''
                        )

                    ?>

                    <?php wp_list_pages($args); ?>
                </ul>
            </nav>
            
            <?php } ?>

In der page.php Datei muss nun die Navigation angepasst werden. Zuerst wird mit der zuvor erstellten Function geschaut, ob die Seite überhaupt Unterseiten hat oder Elternseiten. Ist dies der Fall, wird zuerst die Hauptseite ausgegeben, danach weiter unten die Unterseiten. Die benötigten Daten können mithilfe einiger WordPress-PHP-Functions einfach ausgelesen werden.

Navigation mit CSS stylen

Als letztes können wir mithilfe von CSS die ausgegebenen Menüpunkte noch gestalten. Da WordPress selbst einige Klassen in die Links schreibt, z.B. current_page_item, welche angibt, welcher Link gerade aktiv ist, geht dies umfassend gelöst werden.

/* Children Links */
.children-links {
    margin-bottom: 20px;
    font-size: 80%;
}

.children-links ul {
    float:left;
}

.children-links li {
    margin-right: 20px;
}

.children-links .parent-link {
    float:left;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #DDD;
    font-size: 120%;
    font-weight: bold;
}

.children-links .parent-link a:link,
.children-links .parent-link a:visited {
    color: #333;
}

.children-links .current_page_item a:link,
.children-links .current_page_item a:visited {
    border-bottom: 1px solid #DDD;
    color: #333;
    cursor: default;
}

Das fertige Untermenü sollte dann etwa so aussehen:

Bildschirmfoto 2014-10-31 um 16.18.42

Joel Weiss
Joel Weiss
Webdesigner bei der Webagentur WeLoveYou und leidenschaftlicher Fotograf und Filmemacher.
Empfohlene Beiträge

Ein Kommentar hinterlassen

Fragen?

Falls Du Fragen, Anregungen oder ein Feedback hast, schreibe uns und wir antworten gerne.