Cómo agregar testimonios de información sobre herramientas en temas de WordPress

En el pasado, le mostramos c√≥mo agregar testimonios rotativos en WordPress. Al crear la nueva p√°gina de inicio para los videos de WordPress de WPBeginner, nos inspiramos en algo que hemos visto hacer a StudioPress durante alg√ļn tiempo. Eso es mostrar testimonios en una informaci√≥n sobre herramientas cuando el usuario pasa el mouse sobre una foto. Esta t√©cnica se est√° convirtiendo en un est√°ndar de la industria porque tambi√©n hemos visto a otras personas usarla. En este art√≠culo, le mostraremos c√≥mo agregar ventanas emergentes de informaci√≥n sobre herramientas en WordPress.

Resultado final

Así es como se verá el producto final. Si coloca el mouse sobre la foto de una persona, se mostrará un testimonio de información sobre herramientas. Puedes ver la demostración en vivo aquí. Sin embargo, este artículo probablemente sobrevivirá a la demostración en vivo, por lo que adjunto una captura de pantalla a continuación:

Testimonios de información sobre herramientas en WordPress

Antecedentes:

Seg√ļn lo que hemos escuchado de expertos de la industria, mostrar rostros humanos prominentes tiende a agregar un sentimiento personal a la p√°gina. Esta es la raz√≥n por la que quer√≠amos ir por esta ruta. Hicimos una simple b√ļsqueda en Google para encontrar el art√≠culo de Loren Nason. En el que destac√≥ esencialmente el c√≥digo que StudioPress estaba usando. La mejor parte de StudioPress es su soporte. Como Loren describi√≥, cuando le pregunt√≥ a Brian Gardner sobre c√≥mo cre√≥ los testimonios en su sitio, Brian simplemente envi√≥ un archivo de ejemplo.

El mayor problema fue que simplemente codificaron la funci√≥n en su plantilla. Si bien esto funcionar√≠a bien para nosotros los desarrolladores, ¬Ņno es una soluci√≥n ideal si est√° entregando el sitio web a un cliente? Quer√≠amos tener una soluci√≥n en la que le demos al cliente la capacidad de agregar / eliminar testimonios a voluntad. Es por eso que decidimos utilizar Tipos de publicaciones personalizadas y metacampos para lograr esto junto con jQuery.

Tipos de publicaciones personalizadas y meta cuadros

Necesitamos que el cliente tenga la capacidad de hacer lo siguiente:

  • Agregar foto del usuario (miniaturas)
  • Agregar nombre de usuario (t√≠tulo de la publicaci√≥n)
  • Agregar texto testimonial (cuerpo del mensaje)
  • Posici√≥n del cliente en la empresa (campo personalizado o cuadro de meta)

Lo primero que hicimos fue agregar un tipo de publicación personalizada llamada Testimonios que nos consiguió todo excepto un campo (posición del cliente / empresa). Depende de usted si desea agregar un cuadro meta personalizado o hacer que su cliente use campos personalizados. Decimos que no seamos perezosos y brindemos a nuestros clientes una excelente experiencia de back-end, incluso si requiere agregar algunas líneas de código adicionales.

Todo lo que tiene que hacer es tomar el siguiente código y guardarlo en un archivo php en blanco llamado tooltip-testimonials.php o cualquier otro nombre por ese motivo.

 _x( 'Testimonials', 'testimonial' ),
        'singular_name' => _x( 'testimonial', 'testimonial' ),
        'add_new' => _x( 'Add New', 'testimonial' ),
        'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
        'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
        'new_item' => _x( 'New testimonial', 'testimonial' ),
        'view_item' => _x( 'View testimonial', 'testimonial' ),
        'search_items' => _x( 'Search Testimonials', 'testimonial' ),
        'not_found' => _x( 'No testimonials found', 'testimonial' ),
        'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
        'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
        'menu_name' => _x( 'Testimonials', 'testimonial' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => false,
        
        'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
        
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'testimonial', $args );
}

//Custom Meta Box

$key = "testimonial";
$meta_boxes = array(
"position" => array(
"name" => "position",
"title" => "Position and Company",
"description" => "Enter their position and their company name.")
);
 
function create_meta_box() {
global $key;
 
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
 
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
 
ID, $key, true); ?>

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.

  • Agregar foto del usuario (miniaturas / imagen destacada). Lo tenemos configurado para redimensionarlo en 96 x 96px. Siempre es mejor seguir esa proporci√≥n.
  • Agregar nombre de usuario (t√≠tulo de la publicaci√≥n)
  • Agregar texto testimonial (cuerpo del mensaje)
  • Posici√≥n del cliente en la empresa (en un cuadro de meta de informaci√≥n testimonial)

Mostrar en tema

Los testimonios de información sobre herramientas están destinados principalmente a temas personalizados, por lo que sí, requerirá ensuciarse las manos con un poco de edición de temas. Debido a que cada tema tiene diferentes dimensiones, esquemas de color y estilos, decidimos lanzar esto como un tutorial en lugar de un complemento. Esto es lo que haremos para mostrar testimonios de información sobre herramientas en su tema de WordPress:

  • Agregue un c√≥digo jQuery personalizado en el tema.
  • Cree un bucle personalizado que muestre los testimonios en una estructura que queramos.
  • Agregue un poco de CSS b√°sico para que se vea bonito

Lo primero que debe hacer es copiar y pegar el siguiente código jQuery y guardarlo en un archivo en blanco llamado tooltip-testimonials.js:

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 } });
     
});

Una vez que haya hecho eso, debemos cargar este archivo en el encabezado de su tema. Puede elegir hacer esto manualmente editando su archivo header.php y pegando un código de script en su área de cabecera, o siga las mejores prácticas de WP y use la función wp_enqueue_script. Avancemos y carguemos nuestro archivo tooltip-testimonials.js en la carpeta de scripts de nuestro tema. Si no existe, simplemente cree una carpeta llamada scripts.

Agregue el siguiente código al archivo functions.php de su tema:

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');
}
}

Ahora que tenemos eso en su lugar, creemos un bucle personalizado que nos permitirá mostrar estos testimonios de información sobre herramientas con las imágenes del usuario en un formato basado en cuadrícula. Abra el archivo donde desea que aparezcan estos testimonios. Ya sea tu barra lateral, página de inicio o donde quieras. Luego pegue el siguiente bucle:


'testimonial', 'posts_per_page' => 6); $ loop = nuevo WP_Query ($ args); if ($ loop-> have_posts ()): while ($ loop-> have_posts ()): $ loop-> the_post (); $ data = get_post_meta ($ loop-> post-> ID, 'testimonio', verdadero); $ user_image_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ loop-> post-> ID), 'testimonial-thumb'); ?>

<?php echo get_the_title(); ?>

El c√≥digo de bucle anterior mostrar√° 6 elementos en la p√°gina. Puede dise√Īarlos como quiera. Incluso puede agregar orderby = rand si tiene m√°s o menos 20 testimonios. Puede tener 6 al azar que se muestran.

Ahora agreguemos algunos estilos CSS para que se vea bonito. A continuación se muestra un ejemplo de CSS que utilizamos. Probablemente necesite ajustarlo en función de los estilos de sus temas, esquemas de color, etc.

#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;}

Terminando:

Esperamos que este artículo lo ayude a agregar testimonios de información sobre herramientas en sus temas de WordPress. Este es un ejemplo muy básico. Como mencionamos anteriormente, siempre puede ajustar los argumentos de wp_query para tener un orden de testimonios aleatorios. También puede usar el complemento Orden de tipos de publicación para permitir que sus clientes determinen el orden con una interfaz fácil de arrastrar y soltar.

Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.