Eigene Layout Container erzeugen

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

In Xtreme One gibt es folgende Layoutcontainer: #header, #primarynav, #secondarynav, #teaser, #main, #footer und #siteinfo. Das Besondere an diesen “Hauptcontainern” ist die Möglichkeit der Umschaltung von Bloglayout auf Fullpagelayout und die damit verbundene Generierung von unterschiedlichem Markup. Seit Version 1.1 müssen diese Container zusätzlich die Umschaltung auf HTML5 beherrschen. Xtreme One stellt für die Aufgabe Funktionen bereit, die in Verbindung mit einem Hook genutzt werden können. Nehmen wir ein einfaches Beispiel. Du schreibst in der functions.php in deinem Childtheme eine eigene Funktion:

function xtreme_demo_action_xtreme_before_main() {
    if ( xtreme_is_html5() )  {
        $el = "section";
    } else {
        $el = "div";
    }
    xtreme_start_container( 'headline', 'complementary', $el );
    echo '<h2>Our Knowledge Is Your Advantage</h2>';
    xtreme_end_container( $el );
}
add_action( 'xtreme_before_main', 'xtreme_demo_action_xtreme_before_main' );

Die Funktion xtreme_start_container( $id, $role, $element ) schreibt die öffnenden HTML Elemente und erwartet drei Parameter:

  • $id -> Die ID, welche das Element bekommen soll. In unserem Beispiel #headline
  • $role -> Die WAI Aria Role, die der Container bekommen soll.
  • $element -> Das HTML-Element, welches der Container bekommen soll.

Ist keine WAI Aria Role erwünscht: xtreme_start_container('headline', '', 'div'); xtreme_end_container ist für das schließende HTML Element zuständig. Der Code dazwischen wird innerhalb des Containers ausgeführt. Mit add_action( 'xtreme_before_main', 'abc_headline_container' ) wird der Hook xtreme_before_main angesprungen.

Bloglayout

XHTML 1.1 Markup

<div id='headline' class='xf-container clearfix xf-blog'>
    <h2>Our Knowledge is your Advantage</h2>
</div>

HTML5 Markup

<section id='headline' class='xf-container clearfix xf-blog'>
    <h2>Our Knowledge is your Advantage</h2>
</section>

Fullpagelayout

XHTML 1.1 Markup

<div id='headline' class='xf-container clearfix xf-fullpage'>
    <div class='page_margins'>
        <div class='yamlpage clearfix'>
            <h2>Our Knowledge is your Advantage</h2>
        </div>
    </div>
</div>

HTML5 Markup

<section id='headline' class='xf-container clearfix xf-fullpage'>
    <div class='page_margins'>
        <div class='yamlpage clearfix'>
            <h2>Our Knowledge is your Advantage</h2>
        </div>
    </div>
</section>