Jeder, der möchte, kann sich ab sofort mein neues WordPress Plugin “Hide This Part” herunterladen und verwenden. Es blendet Teile eines Artikels oder einer Seite aus und bei Bedarf wieder ein.
Bei diesem Plugin setze ich jQuery ein. Somit kannst du als WordPress-Admin bestimmen, welche Teile eines Artikels oder einer Seite zuerst ausgeblendet sind und von deinen Lesern bei Bedarf eingeblendet werden. Das Ganze sieht dann im Frontend so aus:
Installation und Plugin-Einsatz
Damit du auch weißt, wie du das Plugin installieren musst und es in WordPress einsetzen kannst, habe ich eine kleine Dokumentation des Plugins online gestellt. Dort kannst du das Plugin auch direkt herunterladen.
Das Plugin im Detail
Die Haupt-Plugin-Datei befindet sich direkt im Ordner hide-this-part und heißt hide-this-part.php.
In dieser Datei passiert folgendes:
// Load jQuery
wp_enqueue_script('jquery');
// Load Hide This Part JS
add_action('init', 'hide_this_part_init');
function hide_this_part_init() {
wp_register_script('hide-this-part-js', WP_PLUGIN_URL . '/hide-this-part/js.js');
wp_enqueue_script('hide-this-part-js');
}
Zuerst lade ich jQuery, was ja standardmäßig bei jeder WordPress-Installation dabei ist, aber eben nicht in jedem Theme schon geladen ist. Dazu nutze ich die WordPress-Funktion wp_enqueue_script(). Diese Funktion fügt jQuery im <head> Bereich des Themes hinzu. Somit sind alle jQuery Funkionen ab sofort verwendbar. Einige dieser Funktionen brauche ich dann später im Plugin, um den Slide-Effekt zu erzielen, wenn jemand den entsprechenden Link anklickt.
Ab Zeile 4 hier im Beispiel lade ich dann eine weitere JavaScript-Datei. Dazu nutze ich wieder eine WordPress-Funktion und zwar wp_register_script(). Die braucht man hier zuerst, denn meine eigene JavaScript-Datei kennt WordPress im Gegensatz zu jQuery noch nicht, weshalb ich sie mit wp_register_script() erst noch bekannt machen muss. Anschließend kann ich wieder wp_enqueue_script() nutzen, um meine JavaScript-Datei nun ebenfalls in den <head> Bereich zu laden.
In dieser JavaScript-Datei ist die komplette Funktionalität enthalten, die ich benötige, um den Slide-Effekt zu erzielen und Content ein- und auszublenden. Doch dazu später mehr.
Weiter geht’s mit dem Hinzufügen der CSS-Datei des Plugins:
// Add styling
add_action('wp_head', 'hide_this_part_head');
function hide_this_part_head() {
$str_css_url = WP_PLUGIN_URL . "/hide-this-part/style.css";
echo '<link rel="stylesheet" href="' . $str_css_url . '" type="text/css" media="screen" />'."\n";
}
Wie du in Zeile 2 hier im Beispiel siehst, nutze ich einen Hook, um die Funktion hide_this_part_head() aufzurufen, wenn der <head> Bereich von WordPress geladen wird. Denn dort soll die CSS-Datei im Theme eingefügt werden.
Das passiert dann schließlich auch in der Funktion hide_this_part_head() in Zeile 5.
Nun folgt in der Haupt-Plugin-Datei nur noch die eigentliche Plugin-Funktion:
// Main functionality
$int_conter = 0;
add_shortcode('hide-this-part', 'hide_this_part');
function hide_this_part($atts, $content = null) {
global $int_conter;
if($atts['morelink'] != '') {
$str_more_link = $atts['morelink'];
}
else {
$str_more_link = 'More';
}
$str_return = '<div class="hide-this-part-wrap">';
$str_return .= '<div class="hide-this-part-more" id="hide-this-part-'.$int_conter.'" morelink-text="'.$str_more_link.'">'.$str_more_link.' »</div>';
$str_return .= '<div class="hide-this-part" status="invisible">';
$str_return .= do_shortcode($content);
$str_return .= '</div><!-- .hide-this-part -->';
$str_return .= '</div><!-- hide-this-part-wrap -->';
$int_conter++;
return $str_return;
}
In Zeile 3 fange ich die Shortcodes ab, die der WordPress-Admin im Editor eingibt (Wie das Plugin mit Shortcodes zu bedienen ist, steht in der Dokumentation). Wenn der Shortcode hide-this-part gefunden wird, wird meine Funktion hide_this_part() aufgerufen. Sie bekommt zwei Parameter übergeben. Parameter 1 sind die Arrtibute. Der Inhalt dieser Variablen ist dann interessant, wenn der WordPress-Admin möchte, dass der Text des More-Links nicht nur “More” lautet, sondern individuell ist. Diesen möglicherweise individuell vergebenen Text lese ich in 7 aus (falls er vergeben ist). Ansonsten wird einfach “More” angezeigt (Zeile 10).
Schließlich baue ich in den Zeilen 12 bis 17 noch die eigentliche Ausgabe zusammen. In Zeile 15 füge ich in die Ausgabe den Content ein, den der WordPress-Admin im Editor innerhalb des Shortcodes platziert hat.
Wichtig ist dabei die Funktion do_shortcode(). Denn es kann ja sein, dass der WordPress-Admin nicht nur reinen Text aus- und einblendbar machen will, sondern vielleicht auch Bilder. Wenn man im WordPress-Editor ein Bild einfügt, wird ein Shortcode von WordPress selbst um das eigentliche Bild eingefügt, der für das Styling des Bildes auf der Seite zuständig ist. Damit also solche Shortcodes innerhalb meines Shortcodes hide-this-part überhaupt angezeigt werden können, muss ich die Funktion do_shortcode() anwenden.
Der Conter den du in Zeile 19 siehst (dort wird er um 1 hochgezählt), dient dazu, jedem More-Link eine eindeutige ID zu geben.
Die JavaScript-Datei
Wie bereits erwähnt, brauche ich eine JavaScript-Datei, damit die interaktive aus- und einblend-Funktion überhaupt funktioniert. Die JavaScript-Datei meines Plugins sieht so aus:
jQuery(document).ready(function() {
jQuery('.hide-this-part-more').click(function () {
// Get the hidden element
var hidden_element = jQuery('#'+this.id).next();
hidden_element.slideToggle('slow');
// Change the more link text
if(hidden_element.attr('status') === 'invisible') {
hidden_element.attr('status', 'visible');
// Make the morelink a lesslink
jQuery('#'+this.id).text('Less »');
}
else {
hidden_element.attr('status', 'invisible');
// Get the morelink text, that the user wants to be displayed
var morelink_text = jQuery('#'+this.id).attr('morelink-text');
// Make the lesslink a more link
jQuery('#'+this.id).text(morelink_text+' »');
}
});
});
In Zeile 2 ist der zuständige Event-Handler, der den More-Link des Plugins beobachtet. Wird darauf geklickt, wird der folgende Code ausgeführt.
In Zeile 5 ermittle ich dann das ausgeblendete Element. D. h. den Bereich, der vom WordPress-Admin innerhalb des hide-this-part Shortcuts platziert wurde.
Dieser Bereich wird nun in Zeile 6 mit Hilfe der jQuery Funktion slideToggle() entweder ein- oder ausgeblendet – je nachdem, wie der aktuelle Zustand des Elements gerade ist.
Schließlich wird mit der if-Anweisung ab Zeile 9 noch dafür gesorgt, dass sich der More-Text in einen Less-Text verwandelt, bzw. umgekehrt, wenn der aktuell angezeigte Text ein Less-Text ist.
Die CSS-Datei
Zu guter letzt bringt mein Plugin noch eine kleine CSS-Datei mit, die dafür sorgt, dass der More-Link auch wie ein Link aussieht und der auszublendende Bereich zu Beginn auch nicht sichtbar ist:
.hide-this-part {
display:none;
}
.hide-this-part-more {
color:blue;
cursor:pointer;
margin-bottom:15px;
text-decoration:underline;
}
Das war’s dann eigentlich auch schon. “Hide This Part” ist ein sehr einfaches Plugin, was einfach zu programmieren war und auch einfach zu benutzen ist. Viel Spaß damit!
Praktisches Ding, werde das heute Abend mal auf meinen Blog setzen
Schönes Plugin. Frage: Warum hast du auch die Styles nicht via wp_enqueue_style eingebunden (also analog zu JS)?
Hallo Sergej,
du hast recht, das wäre eleganter. Werde ich beim nächsten Release berücksichtigen. Danke für die Anmerkung!
Schönes Plugin. Ich hätte einen Verbesserungsvorschlag: Wenn Javascripte deaktiviert sind (ja, ja, ich weiß, das ist höchstens bei 5% der User der Fall
), dann kann man den ausgeblendeten Text nicht einblenden. In solchen Fällen fände ich es besser, wenn der Text automatisch eingeblendet ist.
Hallo Jürgen,
klar das macht Sinn. Auch deine Idee wird bestimmt beim nächsten Release dabei sein. Danke dafür!
Pingback: Teile eines WordPress-Artikels verstecken | WordPress-Buch
Genau so etwas habe ich gesucht, vielen Dank dafür!!!