So fügen Sie Tooltip-Testimonials in WordPress-Themes hinzu

In der Vergangenheit haben wir Ihnen gezeigt, wie Sie rotierende Testimonials in WordPress einfügen. Bei der Erstellung der neuen Landing Page für WPBeginner WordPress-Videos haben wir uns von etwas inspirieren lassen, das StudioPress schon länger gesehen hat. Das bedeutet, dass Testimonials in einem Tooltip angezeigt werden, wenn der Benutzer die Maus auf ein Foto bewegt. Diese Technik wird zu einem Industriestandard, weil wir auch andere Leute gesehen haben. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress ein Popup für Tooltip-Testimonials hinzufügen.

Endergebnis

So wird das Endprodukt aussehen. Wenn Sie den Mauszeiger auf das Foto einer Person bringen, wird eine Kurzinfo angezeigt. Sie können die Live-Demo hier sehen. Dieser Artikel wird jedoch wahrscheinlich die Live-Demo überleben. Fügen Sie daher einen Screenshot hinzu:

Hintergrund:

Nach Ansicht von Branchenexperten neigt das Zeigen prominenter menschlicher Gesichter dazu, der Seite ein persönliches Gefühl zu verleihen. Aus diesem Grund wollten wir diesen Weg gehen. Wir haben eine einfache Google-Suche durchgeführt, um den Artikel von Loren Nason zu finden. In dem hat er im Wesentlichen den Code hervorgehoben, den StudioPress verwendet hat. Das Beste an StudioPress ist ihre Unterstützung. Wie Loren beschrieb, schickte Brian, als er Brian Gardner nach der Erstellung der Testimonials auf seiner Website fragte, einfach eine Beispieldatei.

Das größte Problem war, dass sie das Feature einfach fest in ihre Vorlage codierten. Während dies für uns Entwickler gut funktionieren würde, ist es keine ideale Lösung, wenn Sie die Website einem Kunden übergeben. Wir wollten eine Lösung haben, bei der wir dem Kunden die Möglichkeit geben, Testimonials nach Belieben hinzuzufügen / zu entfernen. Aus diesem Grund haben wir uns dazu entschieden, benutzerdefinierte Post-Typen und Meta-Felder zu verwenden, um dies zusammen mit der jQuery zu erreichen.

Benutzerdefinierte Beitragstypen und Meta-Boxen

Wir benötigen den Kunden, um die folgenden Aufgaben ausführen zu können:

• Foto des Benutzers hinzufügen (Miniaturansichten)
• Name des Benutzers hinzufügen (Posttitel)
• Testimonial Text hinzufügen (Post Body)
• Kundenposition im Unternehmen (benutzerdefiniertes Feld oder Meta-Box)

Als erstes haben wir einen benutzerdefinierten Beitragstyp namens Testimonials hinzugefügt, der uns bis auf ein Feld (Kundenposition / Firma) alles brachte. Es liegt an Ihnen, ob Sie eine benutzerdefinierte Meta-Box hinzufügen möchten oder dass Ihr Client benutzerdefinierte Felder verwendet. Wir sagen, lassen Sie uns nicht faul sein, und geben Sie unseren Kunden ein großartiges Backend-Erlebnis, auch wenn dazu einige zusätzliche Codezeilen erforderlich sind.

Alles, was Sie tun müssen, ist, den folgenden Code zu nehmen und in einer leeren PHP-Datei namens tooltip-testimonials.php oder einem anderen Namen zu speichern.

  _x ('Testimonials', 'testimonial'), 'singular_name' => _x ('testimonial', 'testimonial'), 'add_new' => _x ('Add New', 'testimonial'), 'add_new_item' => _x ('Neues Testimonial hinzufügen', 'Testimonial'), 'edit_item' => _x ('Testimonial bearbeiten', 'Testimonial'), 'neues_item' => _x ('Neues Testimonial', 'Testimonial'), 'view_item' = > _x ('Testimonial anzeigen', 'Testimonial'), 'search_items' => _x ('Testimonials durchsuchen', 'Testimonial'), 'not_found' => _x ('Keine Erfahrungsberichte gefunden'), 'testimonial', 'test_im_trash '=> _x (' Keine Zeugnisse in Papierkorb gefunden ',' Zeugnis '),' parent_item_colon '=> _x (' Elternzeugnis: ',' Zeugnis '),' menu_name '=> _x (' Zeugnisse ',' Zeugnis ' ),); $ args = array ('labels' => $ labels, 'hierarchical' => false, 'unterstützt' => array ('title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom- Felder ',' Revisionen '),' public '=> true,' show_ui '=> true,' show_in_menu '=> true,' show_in_nav_menus '=> true,' public_queryable '=> true,' exclude_from_search '=> false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'umschreiben' => true, 'Capability_type' => 'post'); register_post_type ('testimonial', $ args);  // Benutzerdefinierte Meta-Box $ key = "testimonial"; $ meta_boxes = array ("position" => array ("name" => "position", "title" => "position und company", "description" => "Geben Sie ihre Position und ihren Firmennamen ein.")); function create_meta_box () globaler $ key; if (function_exists ('add_meta_box')) add_meta_box ('new-meta-boxen', ucfirst ($ key). 'information', 'display_meta_box', 'testimonial', 'normal', 'high');  function display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, $ key, true); ?>         
Damit erhalten wir die Grundeinstellungen für WordPress, mit denen wir beginnen müssen. Jetzt müssen Sie einige Testimonials hinzufügen, damit Sie sie anzeigen können. Lassen Sie uns zusammenfassen, wohin jedes Element geht.
 
 
Benutzerfoto hinzufügen (Miniaturbilder / Vorgestelltes Bild). Wir haben es so eingestellt, dass es um 96 x 96 Pixel verkleinert wird. Es ist immer am besten, diesem Verhältnis zu folgen.
 
Name des Benutzers hinzufügen (Posttitel)
 
Testimonial Text hinzufügen (Post Body)
 
Position des Kunden im Unternehmen (in einer Meta-Box für Zeugnisinformationen)
 
 
Anzeige im Theme
 
Tooltip-Testimonials sind hauptsächlich für benutzerdefinierte Themen gedacht. Daher müssen Sie sich bei der Bearbeitung einiger Themen die Hände schmutzig machen. Da jedes Thema unterschiedliche Dimensionen, Farbschemata und Stile hat, haben wir uns entschieden, dieses als Tutorial und nicht als Plugin zu veröffentlichen. So werden wir Tooltip-Testimonials in Ihrem WordPress-Theme anzeigen:
 
 
Fügen Sie im Design einen benutzerdefinierten jQuery-Code hinzu.
 
Erstellen Sie eine benutzerdefinierte Schleife, in der die Testimonials in einer von uns gewünschten Struktur angezeigt werden.
 
Fügen Sie ein paar grundlegende CSS hinzu, damit es hübsch aussieht
 
 
Zuerst müssen Sie den folgenden jQuery-Code kopieren und einfügen und in einer leeren Datei speichern Tooltip-Testimonials.js:
 
 jQuery (document) .ready (function () jQuery ("# ​​testimonials img [title]"). tooltip (// Positionsabstand optimieren: [0, 0], // Verwenden Sie den Effekt "Folie": ' Slide '// dynamisches Plugin mit optionaler Konfiguration für den unteren Rand hinzufügen). dynamic (bottom: direction:' down ', bounce: true);); 
 
Sobald Sie das getan haben, müssen wir diese Datei in den Header Ihres Themes laden. Sie können dies entweder manuell tun, indem Sie Ihre Datei "header.php" bearbeiten und einen Skriptcode in Ihren Kopfbereich einfügen. Oder Sie befolgen die bewährte Methode von WP und verwenden die Funktion wp_enqueue_script. Laden Sie die Datei tooltip-testimonials.js im Skriptordner unseres Themes hoch. 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'); Funktion 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' (wahr); wp_enqueue_script ('jquery_tools'); wp_register_script ('tooltip', get_stylesheet_directory_uri (). '/scripts/tooltip-testimonials.js', 'jquery', '1', true); wp_enqueue_script ('tooltip');  
 
Jetzt haben wir das. Lassen Sie uns eine benutzerdefinierte Schleife erstellen, mit der wir diese QuickInfos mit den Bildern des Benutzers in einem Raster anzeigen können. Öffnen Sie die Datei, in der diese Zeugnisse angezeigt werden sollen. Sei es Ihre Sidebar, Homepage oder wo immer Sie möchten. Fügen Sie dann die folgende Schleife ein:
 
    'testimonial', 'posts_per_page' => 6); $ loop = new WP_Query ($ args); if ($ loop-> have_posts ()): while ($ loop-> have_posts ()): $ loop-> the_post (); $ data = get_post_meta ($ loop-> post-> ID, 'testimonial', true); $ user_image_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ loop-> post-> ID), 'testimonial-thumb'); ?>  
       
 
Der Schleifencode oben zeigt 6 Elemente auf der Seite. Sie können sie nach Belieben gestalten. Sie können sogar orderby = rand hinzufügen, wenn Sie etwa 20 Testimonials haben. Sie können 6 nach dem Zufallsprinzip anzeigen lassen.
 
Fügen wir nun einige CSS-Stile hinzu, damit es hübsch aussieht. Nachfolgend finden Sie einige CSS-Beispiele, die wir verwendet haben. Möglicherweise müssen Sie es an Ihre Designstile, Farbschemata usw. anpassen.
 
 # testimonials. testimonials width: 116px; Schwimmer: links; Marge: 35px 30px 0 0; #testimonials .center text-align: center; Marge: 0px 0 15px ;; Auffüllen: 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; Schriftgewicht: 700; Text ausrichten: Mitte; Marge: 3px 0 0; Auffüllen: 0px; #testimonials .company font-size: 12px; Schriftstil: kursiv; Text ausrichten: Mitte; Marge: 0px; padding: 0px; #testimonials .tooltip background: # 111; Farbe: #fff; Breite: 200px; Polsterung: 20px; Marge: 0 5px 20px; 
 
Einpacken:
 
Wir hoffen, dass dieser Artikel Ihnen hilft, in Ihren WordPress-Themes Tooltip-Testimonials hinzuzufügen. Dies ist ein sehr einfaches Beispiel. Wie oben erwähnt, können Sie die Argumente von wp_query jederzeit anpassen, um eine zufällige Reihenfolge von Testimonials zu erhalten. Sie können das Plugin Post Types Order auch verwenden, damit Ihre Kunden die Reihenfolge mit einer einfachen Drag-Drop-Oberfläche bestimmen können.
 
Wenn Sie Fragen oder Anregungen haben, können Sie unten einen Kommentar hinterlassen.