In der Vergangenheit haben wir Ihnen gezeigt, wie Sie rotierende Testimonials in WordPress hinzufügen. Bei der Erstellung der neuen Homepage für die WordPress-Videos von WPBeginner haben wir uns von etwas inspirieren lassen, das StudioPress seit einiger Zeit tut. Das zeigt Testimonials in einem Tooltip, wenn der Benutzer mit der Maus über ein Foto fährt. Diese Technik wird zum Industriestandard, weil wir auch andere Leute gesehen haben, die sie verwenden. In diesem Artikel zeigen wir Ihnen, wie Sie Tooltip-Popups in WordPress hinzufügen.
Endstand
So wird das Endprodukt aussehen. Wenn Sie mit der Maus über das Foto einer Person fahren, wird ein Tooltip-Testimonial angezeigt. Sie können die Live-Demo hier sehen. Dieser Artikel wird jedoch wahrscheinlich die Live-Demo überleben, daher habe ich unten einen Screenshot angehängt:
Hintergrund:
Basierend auf dem, was wir von Branchenexperten gehört haben, verleiht das Anzeigen prominenter menschlicher Gesichter der Seite ein persönliches Gefühl. Dies ist der Grund, warum wir diesen Weg gehen wollten. Wir haben eine einfache Google-Suche durchgeführt, um den Artikel von Loren Nason zu finden. In dem er im Wesentlichen den von StudioPress verwendeten Code hervorhob. Das Beste an StudioPress ist die Unterstützung. Wie Loren beschrieb, reichte Brian, als er Brian Gardner fragte, wie er die Testimonials auf seiner Website erstellt habe, einfach eine Beispieldatei ein.
Das größte Problem war, dass sie die Funktion einfach in ihre Vorlage codierten. Während dies für uns Entwickler gut funktionieren würde, ist es nicht eine ideale Lösung, wenn Sie die Website an einen Kunden übergeben? Wir wollten eine Lösung, mit der wir dem Kunden die Möglichkeit geben, Testimonials nach Belieben hinzuzufügen / zu entfernen. Aus diesem Grund haben wir uns entschieden, benutzerdefinierte Beitragstypen und Metafelder zu verwenden, um dies in Verbindung mit jQuery zu erreichen.
Arten von benutzerdefinierten Posts und Metadiagrammen
Der Kunde muss in der Lage sein, Folgendes zu tun:
- Benutzerfoto hinzufügen (Thumbnails)
- Benutzername hinzufügen (Beitragstitel)
- Testimonial-Text hinzufügen (Nachrichtentext)
- Kundenposition im Unternehmen (benutzerdefiniertes Feld oder Zielfeld)
Als erstes haben wir einen benutzerdefinierten Beitragstyp namens Testimonials hinzugefügt, der uns alles außer einem Feld (Kunden- / Unternehmensposition) liefert. Es liegt an Ihnen, ob Sie eine benutzerdefinierte Meta-Box hinzufügen oder Ihren Kunden benutzerdefinierte Felder verwenden lassen möchten. Wir sagen, wir sollten nicht faul sein und unseren Kunden ein großartiges Back-End-Erlebnis bieten, auch wenn zusätzliche Codezeilen hinzugefügt werden müssen.
Alles, was Sie tun müssen, ist, den folgenden Code zu nehmen und ihn in einer leeren PHP-Datei namens tooltip-Testimonials.php oder einem anderen Namen aus diesem Grund zu speichern.
Esto nos dará la configuración básica de WordPress con la que necesitamos comenzar. Ahora, debe comenzar a agregar algunos testimonios para poder mostrarlos. Recapitulemos a dónde va cada elemento.
- Benutzerfoto hinzufügen (Miniaturansichten / ausgewähltes Bild). Wir haben es so konfiguriert, dass es die Größe in 96 x 96 Pixel ändert. Es ist immer besser, diesem Verhältnis zu folgen.
- Benutzername hinzufügen (Beitragstitel)
- Testimonial-Text hinzufügen (Nachrichtentext)
- Position des Kunden im Unternehmen (in einer Meta-Box mit Testimonial-Informationen)
Im Thema anzeigen
Tooltip-Testimonials sind in erster Linie für benutzerdefinierte Themen gedacht. Ja, Sie müssen sich mit ein wenig Themenbearbeitung die Hände schmutzig machen. Da jedes Thema unterschiedliche Abmessungen, Farbschemata und Stile hat, haben wir beschlossen, dieses als Tutorial anstelle eines Plugins zu starten. Wir werden Folgendes tun, um Tooltip-Testimonials in Ihrem WordPress-Theme zu präsentieren:
- Fügen Sie dem Thema benutzerdefinierten jQuery-Code hinzu.
- Erstellen Sie eine benutzerdefinierte Schleife, die die Testimonials in einer gewünschten Struktur anzeigt.
- Fügen Sie einige grundlegende CSS hinzu, damit es hübsch aussieht
Als erstes sollten Sie den folgenden jQuery-Code kopieren, einfügen und in einer leeren Datei mit dem Namen speichern:
jQuery(document).ready(function(){
jQuery("#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes").tooltip({
// tweak the position
offset: [0, 0],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
Sobald Sie dies getan haben, sollten wir diese Datei in den Header Ihres Themas laden. Sie können dies manuell tun, indem Sie Ihre Datei header.php bearbeiten und einen Skriptcode in Ihren Headerbereich einfügen, oder die Best Practices von WP befolgen und die Funktion wp_enqueue_script verwenden. Lassen Sie uns fortfahren und unsere Datei tooltip-Testimonials.js in den Skriptordner unseres Themas laden. Wenn es nicht existiert, erstellen Sie einfach einen Ordner namens Skripte.
Fügen Sie der Datei functions.php Ihres Themas den folgenden Code hinzu:
add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);
wp_enqueue_script('jquery_tools');
wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
wp_enqueue_script('tooltip');
}
}
Nachdem wir dies eingerichtet haben, erstellen wir eine benutzerdefinierte Schleife, mit der wir diese Tooltip-Testimonials mit Benutzerbildern in einem gitterbasierten Format anzeigen können. Öffnen Sie die Datei, in der diese Testimonials angezeigt werden sollen. Ob es Ihre Seitenleiste, Homepage oder wo immer Sie wollen. Fügen Sie dann die folgende Schleife ein:
Der obige Schleifencode zeigt 6 Elemente auf der Seite. Sie können sie nach Ihren Wünschen gestalten. Sie können sogar orderby = rand hinzufügen, wenn Sie plus oder minus 20 Testimonials haben. Sie können 6 zufällig angezeigt haben.
Fügen wir nun einige CSS-Stile hinzu, damit es hübsch aussieht. Unten finden Sie ein Beispiel für CSS, das wir verwenden. Sie müssen es wahrscheinlich basierend auf Ihren Themenstilen, Farbschemata usw. anpassen.
#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}
#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}
#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}
#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}
#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}
#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}
Ende:
Wir hoffen, dass dieser Artikel Ihnen hilft, Tooltip-Testimonials zu Ihren WordPress-Themes hinzuzufügen. Dies ist ein sehr einfaches Beispiel. Wie bereits erwähnt, können Sie die Argumente wp_query jederzeit so anpassen, dass eine zufällige Testimonial-Reihenfolge vorliegt. Sie können auch das Plugin “Post Type Order” verwenden, mit dem Ihre Kunden die Bestellung über eine einfache Drag & Drop-Oberfläche bestimmen können.
Wenn Sie Fragen oder Anregungen haben, können Sie unten einen Kommentar hinterlassen.
