Um mit einem Klick auf eine Überschrift einen (oder mehrere) nachfolgenden Textabschnitte ein- bzw. wieder auszublenden, wird üblicherweise jQuery verwendet. Der Text wird dann mit CSS-Klassen versehen, die wahlweise ausgeblendet bzw. nach Mausklick wieder eingeblendet werden. Den gewünschten Effekt bezeichnet man als Akkordion.
Um dieses Konstrukt – Text mit CSS-Klassen sowie jQuery – halbwegs benutzerfreundlich eingeben zu können, werden gerne Shortcodes verwendet. Es gibt viele Pugins, die solche Shortcodes bereitstellen, z.B. Shortcodes Ultimate. Das Plugin fügt oberhalb des Beitrags-Editors einen Button „Shortcode hinzufügen“ hinzu. Im nachfolgenden Fenster kannst du (neben vielen anderen visuellen Spielereien) auch Akkordions auswählen. Drei Textabschnitte mit Überschrift sehen dann im Editor in etwa so aus:
[su_accordion]
[su_spoiler title="Wer hat Amerika entdeckt?"] Christopher Columbus[/su_spoiler]
[su_spoiler title="Wie lautet der Vorname von Darwin?"] Charles [/su_spoiler]
[su_spoiler title="Welche Blogging-Software ist toll?"] WordPress [/su_spoiler]
[/su_accordion]
Hallo, vielen Dank für die schnelle Antwort.
Das „Accordion“ Prinzip habe ich auch schon gefunden. Das Problem ist der Einbau in einen Menupunkt. Das Ganze soll sich so verhalten, wie auf der Seite hier: http://fifth-avenue-theme.tumblr.com/
Wenn man auf eines der Icons auf der linken Seite klickt, schiebt sich ein neuer Bereich ein.
Schöne Grüße,
Rubberduckie
Edi
(@psychosopher)
Das Problem ist der Einbau in einen Menupunkt.
Was ist das Problem dabei? Oder was erwartest Du?
Hast Du einmal nach einem Plugin oder Theme gesucht, dass das macht oder kann?
Ich habe nach Plugins gesucht, aber keine gefunden, die genau dieses ausführen. Oder wenn dann „nur“ jquery Anwendungen, aber hier habe ich keine Ahnung, wie ich diese einbauen muss.
Und deine konkrete Frage ist … ?
Wie man so etwas erstellt. 🙂
Ein jQuery Beispiel findet sich auf der Seite ganz unten, Slide Toggle:
http://rijamedia.com/blog/2011/01/simple-jquery-hideshow-elements-with-toggle-and-slidetoggle/
Hier bräuchte ich die Indo, welche dieser „Bestandteile“ man wo einbaut, damit der Effekt wie auf dieser Seite ist: http://fifth-avenue-theme.tumblr.com/
Schöne Grüße
Markus
Wenn du in deiner Website jQuery-Funktionalität verwenden möchtest, ist erst zu klären, ob das über ein Plugin oder Theme erfolgen soll. Ein Plugin ist dann sinnvoll, wenn du mit einem Shortcode ein Akkordion zu beliebigen Beiträgen oder Seiten hinzufügen möchtest (siehe meine erste Antwort). Die Einbettung in ein (Child-)Theme ist hingegen sinnvoll, wenn eine Funktionalität als Teil der Gestaltung übergreifend für alle Seiten und Beiträge verwendet werden soll.
Hat man sich aus der Fülle an verfügbaren jQuery Accordion-Plugins für eines entschieden, stehen zur Einbindung verschiedene WordPress-Funktionen zur Verfügung:
wp_enqueue_script() ist eine Funktion, um JavaScript korrekt einzubinden. Durch die Verwendung dieser Funktion werden Konflikte vermieden, die sich z.B. ergeben könnten, wenn jedes jQuery-Plugin eine eigene Instanz von jQuery aufrufen möchte.
Um eine Javascript-Datei mit einem Accordion richtig einzubinden könnte die Funktion in etwa so aussehen:
add_action('wp_enqueue_scripts', 'my_accordion');
function my_accordion() {
wp_enqueue_script(
$handle = "pix-accordion",
$src = get_template_directory_uri() . '/js/accordion.min.js',
$deps = array( 'jquery' ),
$ver = false,
$in_footer = false );
}
Mehr Informationen zu wp_enqueue_script() findest du in der Code Reference.
Viele jQuery-Plugins verlangen zusätzlich die Angabe von Parametern, z.B. für welche CSS-Klassen das eingebundene jQuery-Plugin verwendet werden soll. Hierfür bietet WordPress die Funktion wp_localize_script();
Zusätzlich muss im (Child-)Theme natürlich auch noch das notwendige HTML und CSS eingegeben werden. Die Informationen lassen sich meistens aus der Dokumentation oder Muster-Dateien übernehmen.
Hallo Bego Mario, vielen Dank für die schnelle Antwort.
Die „add_action baue ich in die functions.php in meinem Child-Theme ein, oder?
Wo baue ich das Script ein:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle4').click(function() {
$('.toggle4').slideToggle('fast');
return false;
});
</script>
Das neue Div baue ich ans Ende des headers, bzw. unter das menu:
<div class=“toggle4″ style=“display:none; background-color:#4CF;width:100px;height:200px;“></div>
Aber wie verknüpfe ich einen Menupunkt mit dem Toggle?
Der „normale“ Aufruf wäre ja wie folgt:
„a href=“#“>Slide Toggle</a“
Schöne Grüße
Markus
Richtig, in die functions.php.
jQuery selbst muss nicht eingebunden werden, das übernimmt WordPress auf Grund der in wp_enqueue_script() genannten Abhängigkeit $deps = array( 'jquery' ).
Das jQuery selbst gehört in eine eigene JavaScript-Datei (in meinem Beispiel js/accordion.js), wobei WordPress einen no-conflict-mode verwendet und deshalb das $-Zeichen nicht jQuery zuweisen kann. Die Datei müsste, um bei deinem Code zu bleiben, dann so aussehen:
jQuery(document).ready(function($){
$('#toggle4').click(function() {
$('.toggle4').slideToggle('fast');
return false;
});
});
Viel Erfolg.
Dann werde ich das mal testen.
Vielen, vielen Dank.
Schöne Grüße
Markus
Ups, jetzt hab ich doc noch etwas vergessen.
Wie rufe ich die Funktion denn über einem Menuüunkt im MainNav, von WordPress erstellt, auf?
WordPress fügt Menü-Einträgen selbständig CSS-Klassen hinzu:
<ul id="menu-sidebar-menue" class="menu">
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9">
<a href="https:/beispiel.de/impressum/">Impressum</a>
</li>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8">
<a href="https://beispiel.de/datenschutzerklaerung/">Datenschutzerklärung</a>
</li>
</ul>
Diese Klassen kann man in jQuery nutzen, im dem man eine Funktion bei Klick hinzufügt
jQuery(document).ready(function($){
$('.menu-item a').click(function(){
$('.toggle4').slideToggle('fast');
return false;
});
});
Bonus-Tipp: Es gibt im Web hübsche jQuery-Tutorials. 🙂
Hallo Bego Mario,
danke für die Hilfe.
Die Tutorials hatte ich mir teilweise auch angeschaut, aber als Anfänger teilweise doch etwas unverständlich. Leider.
Vielleicht auch nur die faslchen gefunden gehabt.
Schöne Grüße
Markus
Ja, schon klar. Wollte damit auch nur andeuten, dass wir hier grundsätzlich gerne Fragen rund um WordPress beantworten, aber nicht das Web erklären oder jQuery-Tutorials anbieten können. Und selbst diese Hilfe ist mehr als Anleitung zur Selbsthilfe gedacht.
Hallo Bego, es hat geklappt. 🙂
Ich habe nur ein Problem. Wenn ich die add_action Funktion in die functions.php des Child Themes installier, erhalte ich nur eine weiße Seite.
bei eifügen in der Parent Theme functions.php klappt es.
Anbei der Code aus der Datei:
<?php
define("PE_THEME_NAME",'Surreal');
// bootstrap the framework
define("PE_THEME_PATH",dirname( __FILE__));
require("framework/php/boot.php");
add_action('wp_enqueue_scripts', 'my_accordion');
function my_accordion() {
wp_enqueue_script(
$handle = "pix-accordion",
$src = get_template_directory_uri() . '/js/mm_slide.js',
$deps = array( 'jquery' ),
$ver = false,
$in_footer = false );
}
?>
Den Ordner framework habe ich auch komplett in das Child Theme kopiert, brachte aber keinen Erfolg.
Worin liegt mein Fehler?
Und dann habe ich noch die Frage, wie ich den Inhalt einer Seite in dieses div bekomme?
Schöne Grüße
Markus
