Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger: Teil 2

Bootrstrap für WordPress Tutorial Teil 2

Was brauchst du?

• 50 Minuten Zeit
• Text-Editor
• Grundkenntnisse in HTML, CSS und WordPress

Was ist das Ziel?

Am Ende dieses Tutorials hast du ein WordPress-Theme erstellt, das einen fixen Header und eine Sidebar hat. Dabei wird Bootstrap als Framework dienen, d.h. die Webseite wird sich responsiv an verschiedene Displaygrößen anpassen und die typische Bootstrap-Optik haben. Anschließend kannst du anfangen, in der CSS-Datei das Aussehen zu verändern und es so deinen Wünschen anzupassen.

Am Ende des Tutorials hast du ein Theme erstellt, das so aussieht: Das typische Bootstrap-Design
Am Ende des Tutorials hast du ein Theme erstellt, das so aussieht: Das typische Bootstrap-Design

Wo sind wir im ersten Teil des Tutorials stehengeblieben?

Im ersten Teil des Tutorials hast du das Framework Bootstrap kennengelernt und erste Schritte hin zu einem eigenen Theme gemacht: Du hast die Bootstrap-CSS-Datei mittels der @import-Funktion in dein Stylesheet eingebunden.

Wie ist das Vorgehen?

Der erste Schritt besteht darin, die benötigten Dateien zu erstellen und sie gemeinsam mit dem Stylesheet aus dem ersten Teil und den CSS und JavaScript-Dateien von Bootstrap in einen Ordner zu packen.

In Bootstrap 3 sind die CSS- und JavaScript-Dateien im Ordner "dist" untergebracht.
In Bootstrap 3 sind die CSS- und JavaScript-Dateien im Ordner „dist“ untergebracht.

Danach wirst du jede dieser leeren PHP-Dateien mit Code füllen, indem die Struktur des Bootstrap-Systems mit den WordPress-spezifischen PHP-Befehlen kombiniert wird. Generell soll die Webseite den HTML-5-Standards genügen.

1. Leere Dateien erstellen

Als erstes erstellst du folgende Dateien in einem Texteditor deiner Wahl:

• index.php
• header.php
• footer.php
• single.php
• content.php
• page.php

Diese sechs Dateien reichen aus, damit das Theme funktioniert. Allerdings man noch viele weitere Dateien in die Theme-Struktur integrieren.

2. Fangen wir oben an: header.php

Wie der Name bereits sagt, betrifft, diese Datei den Kopfbereich deiner Webseite. Typischerweise befinden sich in ihr sämtlich Metadaten, Links zu Stylesheets und die Navigation.

Bootstrap gibt mit den CSS-Klassen .navbar die Möglichkeit, eine horizontale Navigationsleiste zu verwenden. Fügt man auch .navbar-fixed-top hinzu, bleibt sie am oberen Browserrand fixiert. Durch die Kombination eines Buttons und der Klasse .navbar-collapse staucht sich die Navigation bei Browserfenstern, die schmaler als 768 Pixel sind, also in der Regel Smartphones, zu einem Menübutton. Klickt man diesen Button, öffnen sich die Menüpunkte – diese Form hat sich in den letzten Monaten zum Standardmenü auf mobilen Geräten gemausert.

<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php bloginfo('description'); ?>" />
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
   	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Fixed navbar -->
	<div class="navbar navbar-fixed-top">
    	<div class="container">
        	<div class="navbar-header">
          		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            	<span class="icon-bar"></span>
            	<span class="icon-bar"></span>
            	<span class="icon-bar"></span>
          		</button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="http//www.deinedomain.de/">Home</a></li>
            <li><a href="http//www.deinedomain.de/about">About</a></li>
            <li><a href="http//www.deinedomain.de/kontakt">Kontakt</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div><!--/.navbar -->

3. Das Herz deines Themes: index.php

Die Datei names index.php ist so etwas wie das Herz deines Themes. Ruft ein User die Domain deiner Seite auf, landet er auf der index.php. Wie du am Code erkennen kannst (Zeilen 1 und 17), holt sich die index.php den Inhalt der header.php und der footer.php.

Dazwischen werden dem WordPress-Loop die Beiträge geladen. Der Befehl get_template_part( ‚content‘, get_post_format() ); ist nicht zwingend notwendig, allerdings erlaubt er, Templates für verschiedene Typen von Posts zu verwenden.

Jetzt kommst du zum ersten Mal mit dem Bootstrap-Grid in Berührung: Diese Spaltenstruktur erlaubt es dir festzulegen, wieviel Platz deine Posts oder deine Sidebar bekommen.

Grundsätzlich hat Bootstrap zwölf Spalten. Mit dem Update auf Bootstrap 3 kannst du genau festlegen, wie viele Spalten deine Content-Bereiche haben sollen. Mit der CSS-Klasse .col-lg-? kontrollierst du große Displays, mit .col-md-? kleinere Desktop-Bildschirme, mit .col-sm-? Tablets und mit .col-? Smartphones. Das Fragezeichen steht dafür für eine Zahl zwischen eins und zwölf – und damit für die Anzahl der Spalten, die sich dynamisch, im Bootstrap-Sprech „fluid“, anpassen. Die Spalten müssen sich immer auf zwölf addieren. Auf einem iPhone ist also eine Spalte viel schmaler als auf einem Desktop-PC.

Die Werte für die Klassen .col-lg-?, .col-sm-? und .col-? müssen nicht gleich sein, d.h. je nach Gerät kannst du das Aussehen auch in den Grundstrukturen verändern.

Damit die Bereich nebeneinander dargestellt werden, also eine Sidebar zum Beispiel rechts von deinem Bereich für Artikel, musst du die Klassen mit den Spaltengröße in ein div mit der Klasse .row und .container packen.

<div class="container">
	<div class="row">
        <!-- Artikelbereich links, Sidebar rechts -->
		<div class="col-9">Artikelbereich</div> 
		<div class="col-3">Sidebar</div> 
	</div>
</div>

Willst du dagegen die Sidebar auf der linken Seite haben, musst du die .col-Klassen einfach umdrehen:

<div class="container">
	<div class="row">
        <!-- Artikelbereich rechts, Sidebar links -->
		<div class="col-3">Sidebar</div> 
		<div class="col-9">Artikelbereich</div> 
	</div>
</div>

Der gesamte Code für die index.php sieht so aus: Innerhalb des Spaltenlayouts von Bootstrap packst du den WordPress-Loop, der auf die content.php-Datei (siehe Punkt 6) verweist. Danach kommen Buttons, mit denen User zwischen älteren und neueren Artikel navigieren können. Auf der rechten Seiten reserviert ein drei Spalten breiter Platzhalter den Bereich für eine Sidebar.

<?php get_header(); ?>
	<div class="container">
		<div class="row">
			<div class="col-lg-9 col-md-9 col-sm-9 col-9">
				<div class="content">
					<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', get_post_format() ); ?>
					<?php endwhile; else: ?>
  					<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 					<?php endif; ?>
					<div id="nav-post"><?php posts_nav_link('  ', __('<button class="button">« Neuere Beiträge</button>'), __('<button class="button">Ältere Beiträge »</button>')); ?></div>
				</div> <!-- /.content -->
			</div> <!-- /.col-lg-9 /.col-md-9 /.col-sm-9 /.col-9 -->
			<div class="col-lg-3 col-md-3 col-sm-3 col-3">Hier kommt die Sidebar hin</div><!-- /.col-lg-3 /.col-md-3 /.col-sm-3 /.col-3 -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
<?php get_footer(); ?>

4. Wenn es ein header.php gibt, braucht es auch eine footer.php

Die footer.php-Datei ist das Gegenstück zur header.php: In ihr befindet sich der untere Teil deiner Webseite. Zudem werden dort unmittelbar vor dem sich schließenden body-Tag die JavaScript-Dateien geladen.

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://www.deinedomain.de/wp-content/themes/erstes_bootstrap_theme/bootstrap/js/bootstrap.min.js"></script>
    <?php wp_footer(); ?>
  </body>
</html>

5. Einen einzelnen Artikel anzeigen: single.php

Mit der Datei single.php wird die Einzelansicht eines Artikel aufgerufen. Auch hier werden die Inhalte mit dem Grid gestaltet.

<?php get_header(); ?>
	<div class="container">
		<div class="row">
			<div class="col-lg-9 col-md-9 col-sm-9 col-12">	
				<div class="content">
					<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', get_post_format() ); ?>
					<?php endwhile; else: ?>
					<p><?php _e('Diese Seite gibt es nicht :('); ?></p>
					<?php endif; ?>
				</div> <!-- /.content -->
			</div> <!-- /.col-lg-9 /.col-md-9 /.col-sm-9 /.col-9 -->
			<div class="col-lg-3 col-md-3 col-sm-9 col-9"> <h2>Sidebar</h2> <!-- Hier ist Platz für deine Sidebar--></div><!-- /.col-lg-3 /.col-md-3 /.col-sm-3 /.col-3  -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
<?php get_footer(); ?>

6. Das Content-Template content.php

Wenn du dir den Code der single.php genau angesehen hast, wirst du festgestellt haben, dass sie die Überschrift und den Inhalt deiner Posts nicht abruft. Das passiert mit der content.php, auf die die single.php zugreift. Da das Theme HTML-5-Standards genügen soll, sind bestimmte Klassen nicht in divs, sondern benutzen die section-, article-, aside– und footer-Tags.

Innerhalb dieser werden mit the_title();die Überschrift und mit echo the_content(); der Inhalt und darunter bestimmte Metadaten auf der Seite dargestellt.

<?php
/**
 * The default template for displaying content.
 */
?>
<section class="main">
	<article class="post" id="post-<?php the_ID(); ?>">
		<section class="post-content">
        	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        	<p><?php echo the_content(); ?></p>
    	</section>
    		<aside class="meta">
    			<p><time datetime="<?php echo get_the_time(Y-m-d-g-i-s); ?>"><?php echo get_the_date(); ?></time></p> 
    			<p>Kategorie:<?php the_category(',') ?></p> 
    			<p>Schlagworte <?php the_tags(""); ?></p>
    			<p><a href="#comments"><?php comments_number( 'Kommentieren', '1 Kommentar', '% Kommentare' ); ?></a></p>
    		</aside>
    
<footer>Kommentare</footer>
    
	</article><!-- /.post-->
</section><!-- /.main-->

Damit dein Theme funktioniert, ist diese Datei nicht notwendig. Damit du aber Custom Post Formats benutzen kannst, muss der WordPress-Loop über die content.php laufen.

7. Eine Seite anzeigen: page.php

Ganz ähnlich der Einzelansicht von Artikeln, gibt es auch ein Template für Seiten. Der Unterschied: Der konkrete Inhalt wird nicht wie bei der single.php in die content.php-Datei ausgelagert.

<?php
/**
 * The default template for displaying a page.
 */
?>
<?php get_header(); ?>
	<div class="container">
		<div class="row">
			<div class="col-lg-9 col-md-9 col-sm-9 col-9">
				<div class="content">
					<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
						<section class="main">
							<article class="post" id="post-<?php the_ID(); ?>">
								<section class="post-content">
        							<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        							<p><?php echo the_content(); ?></p>
    							</section>
    						</article>
						</section>
					<?php endwhile; else: ?>
					<p><?php _e('Diese Seite gibt es nicht :('); ?></p>
					<?php endif; ?>
				</div> <!-- /.content -->
			</div> <!-- /.col-lg-9 /.col-md-9 /col-sm-9 /.col-9 -->
			<div class="col-lg-3 col-md-3 col-sm-3 col-3">Hier kommt die Sidebar hin</div><!-- /.col-lg-3 /.col-md-3 /.col-sm-3 /.col-3 -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
<?php get_footer(); ?>

8. Das Stylesheet style.css

Im ersten Zeil des Tutorials hast du bereits eine Datei mit dem Namen style.css erstellt. Diese ist mit der CSS-Datei von Bootstrap verknüpft. Als erste Veränderung gegenüber des Standard-Bootstrap-Stylesheets wird ein Abstand zum oberen Rand erstellt. Die fixe Navigation würde sonst einen Teil des Inhalts überlagern.

/*
Theme Name: Mein erstes Theme mit Bootstrap
Theme URI: http://www.deinedomain.de
Description: Mein erstes Theme mit Bootstrap, nach einem Tutorial bei Elmastudio.de
Author URI: http://www.deinedomain.de
Version: 1.0
*/
@import url('bootstrap/css/bootstrap.css'); 

body {margin-top: 70px;}

Alternativ zur @import-Befehl kannst du die Bootstrap-CSS-Datei zusammen mit deiner eigenen Datei verwenden, indem du im Header-Bereich zuerst auf deine eigene und danach auf das Bootstrap-Stylesheet verlinkst.

Fast fertig: Das Theme hochladen und aktivieren

Wenn du jetzt den Ordner mit deinem Theme in den Ordner „themes“ deiner WordPress-Installation kopierst, erscheint es im Backend unter dem Menüpunkt „Themes“ und du kannst es aktivieren. Dein Blog hat nun und das Aussehen von Bootstrap.

Im WordPress-Backend kannst du das Theme aktivieren.
Im WordPress-Backend kannst du das Theme aktivieren.

Selbstverständlich kannst du nun auch weitere eingebaute Funktionen, wie zum Beispiel Tooltips oder Tabs in dein Theme oder deine Posts einbauen.

Wie kannst du das Aussehen verändern?

Die Optik veränderst du, indem du die style.css-Datei bearbeitest. Schreibst du dort neue Anweisungen hinein, zum Beispiel, dass alle h2-Überschriften rot sein sollen, überschreibt es die Regel für h2-Überschriften in der bootstrap.min.css. Für alle Klassen und IDs, die du in deinem Stylesheet nicht erwähnst, wird automatisch auf die Bootstrap-Version zurückgegriffen. Selbstverständlich kannst du auch komplett neue Klassen hinzufügen.

Hast du Anmerkungen oder Fragen?

Hast du eine alternative Lösung parat? Oder es klappt etwas nicht, wie erwartet? Dann hinterlass‘ doch einen Kommentar.

33 Kommentare zu “Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger: Teil 2

  1. Stephan Lück

    Ich mache mir meistens eine script.php für CSS/JS Dateien hier ein Beispiel https://gist.github.com/cythux/5706064 diese binde ich dann in der function.php so ein
    require_once locate_template(‚/lib/scripts.php‘); // Scripts and stylesheets

    Bootstrap ist nun offiziel in der Version 3 gelaunch http://getbootstrap.com/

    und um lange Ladezeiten zu vermeiden, nutze ich die Bootstap CSS und JS als minified version

    LG

  2. Hey Stephan,
    vielen Dank für deine Anregungen.

    In der Tat ist es besser, wenn man die JavaScript-Dateien schlussendlich über wp_enqueue einbindet – allerdings hätte das den Rahmen des Tutorials gesprengt :) Deine Variante sieht interessant aus, insbesondere bei vielen JS-Dateien.

    Über das Verhältnis von minified und „ausführlichen“ Versionen, bin ich im ersten Teil eingegangen. Ich persönlich arbeite liebe mit den langen Versionen – falls ich mal was nachschauen will, ist es einfach viel übersichtlicher. Erst zum Schluss wechsle ich dann die Dateien aus und verwende – wie du – die min-Dateien.

    LG Katharina

    • Stephan Lück

      Werde Deine Version von hier, aber auch mal zu Übungszwecken nacharbeiten.
      Vielleicht finde ich noch mehr Anregungen.
      Die auch anderen helfen können

      lg

  3. Katharina

    Beide Tutorials sind schön erklärt. Ich konnte alles Schritt für Schritt nachmachen. Was noch hilfreich wäre, wenn du zeigen könntest wie man aus der statischen eine dynamische Navigation mit Unterseiten erstellt. Als Anfänger in PHP konnte ich dafür noch keine Lösung finden.

  4. Hallo Katharina,

    eine Navigationsmenü fügst du ein, indem du erst in eine functions.php-Datei erstellst und dort die Menüfunktion registrierst (http://codex.wordpress.org/Function_Reference/register_nav_menus). Anschließend kannst du im Backend unter dem Bereich „Design“ dein Menü aus deinen Seiten zusammenstellen.

    Dann musst du noch in deinen Theme-Dateien folgenden Befehl einfügen: ‚%3$s‘ )); ?> In diesem Beispiel also die Zeilen 26 bis 28 in der header.php mit dem Befehl ersetzen.

    @ Stephan: hast du auch diese Methode gewählt?

    VG Katharina

  5. Stephan Lück

    Ja, habe ich auch gewählt, und dann noch wp_nav_menu -> Walker benutzt
    info zu http://codex.wordpress.org/Function_Reference/wp_nav_menu dies kann man bei mir im Verzeichnis /inc/in der init.php und der nav.php sehen

    Sowie zum Testen, habe ich das Theme Unit Test.xml importiert,

    sobald mein Github wieder anständig funktioniert, kann man die Diff auch sehen, das geht leider nicht bei Box.net, dort ist der jedoch der derzeitige Code zum download – den man später aber wie gesagt auch auf Github finden kann.

    Dieser Download sollte zu Lernzwecken genutzt werden, und nicht zum einfachen Download. Sollte es genutzt werden als Theme sollte Elmastudio, sowie Kathrina und ich erwähnt werden.

    An der License bin ich noch überlegen, welche nutze ob es MIT oder der Apache Licencse

    VG Stephan

  6. Stephan Lück

    Das war arbeit die Dateien auf Github zur Verfügung zu stellen, damit ist jetzt auch gewährleistet – das ihr auch die Änderungen am Code mit verfolgen könnt.

    Hier zu finden : https://github.com/cythux/bootstrap

    Falls ihr bei Github seid, könnt ihr euch gerne beteiligen

    • Katharina

      Super, danke euch beiden für eure Antworten! Jetzt kann ich weiter an meinem Projekt arbeiten und lernen ;) Bin leider nicht bei Github. Danke für die ganze Mühe mit dem Hochladen!

      • Stephan Lück

        Ist ja auch kein Problem @Katharina – schaue ja auch Regelmässig 1-2 auf jedenfall hier rein. Wenn ich Änderungen am Code dort vornehme.
        Wer also Fragen hat, ruhig schreiben. Diese werden dann auch auf meiner Todo Liste kommen.
        Da ich irgendwie keine Mitteilung bekomme, ob hier neue Fragen/Antworten gekommen sind

  7. Danke für diesen Einstieg!

    Ist für mich ein ideales Sprungbrett um mit der Theme Entwicklung anzufangen. Eine Frage hab ich aber noch: Ist es sinnvoll Bootstrap mit der HTML5 Boilerplate zu verbinden? Soll ja ab und zu gemeinsam eingesetzt werden.

    Und wenn ja, wie genau? Ich versuche mich grade in das Thema Frameworks / Boilerplates einzuarbeiten. Ist nur sehr schwer gute Anleitungen als Starthilfe zu bekommen.

  8. Hallo an alle!
    Zunächst mal ein dickes Lob – wie immer findet man bei Elma sehr gute Informationen und Anregungen. Leider eine kleine – wenn auch nicht so wichtige Anmerkung – die zu ein wenig Verwirrung führen kann:
    Bei dem Beispiel fuer die Erstellung des contents und der side bar schreibst Du zwar im Text-Teil, dass man die Klassen .col-lg-?, .col-sm-? und .col-? verwenden soll. In dem Code-snipp steht dann aber nur noch .col-? Das hat bei mich ein wenig verwirrt, da ich mir den Code in die Datei kopiert habe.

    Noch mal eine Frage zu der Bootstrap.css:
    Nachdem ich das Tutorial nachgestellt habe, fand ich bei einer Untersuchung der Klassen mit Firebug des öfteren völlig gleiche Einträge unter dem Reiter ‚Styles‘ im rechten Fenster.
    Hier zum Beispiel:
    .container:before, .container:after { bootstrap.css (Zeile 765)
    content: “ „;
    display: table;
    }
    .container:before, .container:after { bootstrap.css (Zeile 755)
    content: “ „;
    display: table;
    }
    .container:before, .container:after { bootstrap.css (Zeile 765)
    content: “ „;
    display: table;
    }
    .container:before, .container:after { bootstrap.css (Zeile 755)
    content: “ „;
    display: table;
    }

    Die Einträge stehen sogar noch auf völlig verschiedenen Zeilen in der css. Das kann ich mir leider nicht erklären.

    Vielen Dank Andreas!

  9. Stephan Lück

    Hallo Andreas, die example : .col-lg- http://getbootstrap.com/css/#grid wird hier gut erklärt

    das ist ein extra clearfix für den Container Bereich

    • Hallo Stephan,
      also das mit den „col-lg-…“ habe ich schon verstanden. Ich wollte bloß einen Hinweis geben, dass es eine kleine Ungereimtheit zwischen dem Text und dem Code-Beispiel gibt. Im Text werden die Angaben fuer „lg“ „md“ und „sm“ genannt, aber im code werden sie weggelassen und das funktioniert dann nicht.

      Hast Du eine Erklärung für den 2. Teil meines Postes? Ich verstehe nicht, warum in der Bootstrap.css so viele Einträge doppelt definiert sind. Oder auch z. B. warum MediaQueries doppelt definiert werden. Für die Query „@media screen and (min-width:768px)“ zähle ich alleine 22 Einträge. Einige beinhalten sogar nur eine einzige Regel! Ich halte das für ziemlich unübersichtlich. Sollte man die nicht besser zusammenfassen? Oder habe ich da was falsch verstanden? Ich arbeite mich gerade erst in das bootstrap ein.
      Gruss Andreas!

      • Stephan Lück

        .container:before, .container:after { bootstrap.css (Zeile 755)
        content: ” “;
        display: table;
        }

        ist denke mehrmals vorhanden http://nicolasgallagher.com/micro-clearfix-hack/

        und die mediaqueries die wurden, in bootstrap -> variables.less ebenfalls mehrmals gebraucht, bei mir ist es leider Komprimiert aber, dort wurde mir auch kein Fehler angezeigt

  10. Hallo zusammen,
    super Anleitung von Elmastudio zum „rein finden“ in das Framework Bootstrap3.
    Allerdings bereitet mir die Navigation auch noch ein bisschen Probleme. Egal mit welchem wp_nav_menu Walker ich es probiere, ich bekomme die Navi nicht weiter als Level 1 auf geblättert. Hat keiner ein Menü was 3-4-5 Childs hat, so in der Art wie hier http://wptest.io/demo/ -> Depth:
    About
    Pages
    Categories
    Depth
    -Level1
    –Level2
    —Level3
    —-etc.
    Advanced

    und könnte mir dafür den passenden Walker inkl. css/js liefern? Auf http://wptest.io/demo/ wird es schließlich auch richtig angezeigt (vermutlich aber mit Bootstrap2).

    @Stephan Lück, dein Theme kann auch mit den mehreren Tiefen des Testinhaltes http://wptest.io/ nicht umgehen :-/

    @Elmastudio, plant ihr weitere Artikel zu dieser Serie, welche vielleicht auf dieses Thema eingehen?

  11. Stephan Lück

    @Maxe, ich weiss have da auch ein kleines problem – welches ich noch Fixen muss,
    jedoch ist diese Fassung nicht bei box.net sondern auf github. Die Fassung die ich auf Box.net war nur dort provisorisch dort, aktualisierungen gibt es nur wie schon gesagt auf github, dort kann man dann auch die Änderungen am Code sehen.

    Zudem basiert mein Theme nur auf Tutorial, das ist kein fertiges Theme das dauert schon etwas länger

  12. Stephan Lück

    Vielen Dank, Sandra
    Werde es mir aufjedenfall mal anschauen und austesten

  13. Danke Sandra,
    scheint für Bootstrap2 zu sein. Zeigt bei mir den Effekt, den ich über css mit display:block hin bekomme. Der gewünschte Effekt, dass sich Level für Level nach einander auf blättert, bleibt leider aus.
    Trotzdem besten Dank für die Anregung.

  14. Den BootstrapNavMenuWalker() von EmanueleTessore benutze ich auch. Funktioniert definitiv auch in Bootstrap v3.
    @maxe Evtl. hast du die $args von wp_nav_menu nicht richtig verwendet, also die entsprechenden Bootstrap-.classes für die navbar.

    • Leider bekomme ich gar keine Benachrichtigungen über nachfolgende Kommentare hier :-(

      @roflchen
      Was genau wären denn dann die richtigen $args?

  15. Ein großes Lob an eure Seite. Viele und hochwertige Artikel! Dankeschön.

    Ps. Sehr schöne Bootstrap erklärung :-)

  16. Stephan Lück

    @maxe das Problem habe ich auch, obwohl ich auch den haken gesetzt habe – muss dann auch mal öfter hier reinschauen

  17. Hi! Danke für das tolle Tutorial. Ich habe nur eine Frage: Habe alles so gemacht wie beschrieben, jedoch wird bei mir das ‚margin-top:70px;‘ aus der style.css nicht übernommen. Andere Befehle wie zum Beispiel Farben für die h2 oder h1 allerdings schon. Woran kann das liegen? Habe ich etwas vergessen?
    Etwas Hilfe wäre toll, vielen Dank!

  18. Wenn ihr auch Probleme mit der Navbar in Verbindung mit der aktuellen Bootstrap Version habt, schaut euch einfach mal die aktuellen Beispiele an: http://getbootstrap.com/getting-started/
    Eventuell sind in Verbindung mit dem von WP generierten Menü noch Anpassungen notwendig, ich finde es allerdings wichtig, dass wenigstens einmal die statische Variante reibungslos funktioniert.

    Viel Spaß noch!

  19. Hallo und vielen Dank für die tollen Beiträge und Antworten :)
    Ich verzweifel auch an dem Menü.

    Kann man nicht mal vielleicht ein Tutorial über das Menü machen?

    wie kann man das Aussehen der Navigation ändern?
    wie kann man die Schrift zentrieren? Welche Klassen sind wofür angedacht?
    Gibt es Möglichkeiten in der Mobilen Ansicht das Menü überlappend auszufahren? bzw nicht überlappend und der Content schiebt sich nach unten?
    Kann man das Menü auch von rechts nach Links einblenden oder den Menübutto ganz wo anders platzieren?

    Kann doch nicht jede WordPress Seite die gleiche Navigation haben :)
    LG

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *