Tab-Inhalte mit jQuery und WP_Query implementieren

Wordpress bietet eine Fülle von Informationen zu Ihrem Blog und seinen Inhalten. Die Anzeige einer großen Menge dieser Informationen kann Platz beanspruchen. Eine großartige Lösung sind Tab-Inhalte!

In diesem Tutorial übernehmen wir das zuvor verwendete WordPress-Zeitungslayout und erweitern es um Tabs.

Vorwort

Ja! Wir verwenden eine schöne und leistungsstarke Kombination aus jQuery-Animationen und der Funktion .bind, perfekt gemischt mit dem vielseitigen WP_Query() von Wordpress und dem einzigartigen bedingten Markup von Wordpress. Wenn Sie wie ich sind, möchten Sie erst das fertige Produkt sehen, bevor Sie etwas unternehmen:

Dieses Tutorial erfordert die neueste Version von jQuery, wenn Sie nurdiesem Tutorial folgen möchten. Laden Sie es hier herunter. Andernfalls sollte es bereits in meinem vorbereiteten Theme enthalten sein, das Sie hier herunterladen können: myTheme.

Wir gehen davon aus, dass Sie bereits über eine Live-WordPress-Installation verfügen, entweder lokal oder gehostet. Ein Tutorial zum nativen Ausführen von Wordpress unter Windows finden Sie hier und ein Tutorial zu OS X hier. Die Aktivierung des Themes, das ich zuvor vorbereitet habe – myTheme – wird sehr hilfreich sein. Wir werden darauf näher eingehen, also öffnen Sie index.php und beginnen Sie mit der Bearbeitung!

Schritt 1 – Neues strukturelles HTML.

Natürlich brauchen wir neues HTML. Es ist ganz einfach. Wir brauchen nur ein paar zusätzliche Divs, um alles zu verpacken, was wir verwenden. Platzieren Sie den folgenden Code nur oben

:

<div id="container">
	<div id="header">
		<h1>iBlog - Wordpress and jQuery together in <em>Harmony.</em></h1>
	</div>
		

Und wir müssen das letzte

Das obige ist der detaillierte Inhalt vonTab-Inhalte mit jQuery und WP_Query implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!