En el pasado, le mostramos cómo agregar testimonios continuos en WordPress. Al crear la nueva página de destino para Video de WordPress para TrucosWordpress, nos inspiramos en algo que hemos visto hacer a StudioPress durante algún tiempo. Esto significa mostrar testimonios en una sugerencia cuando el usuario pasa el mouse sobre una foto. Esta técnica se está convirtiendo en un estándar de la industria porque hemos visto que otras personas también la utilizan. En este artículo, le mostraremos cómo agregar ventanas emergentes de testimonios de sugerencias en WordPress.
Resultados finales
Así es como se verá el producto final. Si pasa el cursor sobre la foto de una persona, aparecerá un testimonio de la sugerencia. Puedes ver el demostración en vivo aquí. Sin embargo, este artículo probablemente sobrevivirá a la demostración en vivo, así que adjunte una captura de pantalla a continuación:
Antecedentes:
Por lo que hemos escuchado de los conocedores de la industria, mostrar rostros humanos prominentes tiende a agregar un sentimiento personal a la página. Por eso queríamos seguir este camino. Hicimos una simple búsqueda en Google para encontrar El artículo de Loren Nason. En el que esencialmente destacó el código que estaba usando StudioPress. La mejor parte de StudioPress es su apoyo. Según lo descrito por Loren, cuando se le preguntó a Brian Gardner cómo creó los testimonios en su sitio, Brian simplemente envió un archivo de muestra.
El mayor problema fue que simplemente codificaron la función en su modelo. Si bien esto funcionaría bien para nosotros, los desarrolladores, ¿no es una solución ideal si está entregando el sitio a un cliente? Queríamos una solución en la que le damos al cliente la posibilidad de agregar / eliminar testimonios a voluntad. Es por eso que decidimos usar tipos de publicaciones personalizados y metacampos para hacer esto junto con jQuery.
Tipos de publicaciones personalizadas y metacajas
Necesitamos que el cliente tenga la capacidad de hacer lo siguiente:
- Agregar foto de usuario (miniaturas)
- Agregar nombre de usuario (título de la publicación)
- Agregar texto de testimonio (cuerpo de la publicación)
- Posición del cliente en la empresa (campo personalizado o metabox)
Lo primero que hicimos fue agregar un tipo de publicación personalizada llamada Testimonios que nos dio todo menos un campo (ubicación del cliente / empresa). Depende de usted si desea agregar un metabox personalizado o hacer que su cliente use campos personalizados. Digamos que no somos perezosos y ofrecemos a nuestros clientes una gran experiencia de backend incluso si requiere agregar algunas líneas más de código.
Todo lo que necesita hacer es tomar el código a continuación y guardarlo en un archivo php vacío llamado tooltip-testimonials.php o cualquier otro nombre para ese propósito.
<?php
/*
Plugin Name: Tooltip Testimonial
Plugin URI: https://www.trucoswp.com/
Description: Tooltip Testimonial in WordPress
Version: 0.1
Author: Syed Balkhi
Author URI: https://www.trucoswp.com/
License: GPL v2 or higher
License URI: License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
//Add Image Size
add_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode
//Register Custom Post Types
add_action( 'init', 'register_cpt_testimonial' );
function register_cpt_testimonial() {
$labels = array(
'name' => _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;
?>
<div class="form-wrap">
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
<?php } ?>
</div>
<?php
}
function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
update_post_meta( $post_id, $key, $data );
}
add_action( 'admin_menu', 'create_meta_box' );
add_action( 'save_post', 'save_meta_box' );
Esto nos dará la configuración básica de WordPress que necesitamos para empezar. Ahora, debe comenzar a agregar algunos testimonios para poder verlos. Recapitulemos hacia dónde se dirige cada elemento.
- Agregar foto de usuario (miniaturas / imagen destacada). Lo configuramos para cambiar su tamaño a 96 x 96 px. Siempre es mejor seguir ese informe.
- Agregar nombre de usuario (título de la publicación)
- Agregar texto de testimonio (cuerpo de la publicación)
- Posición del cliente en la empresa (en un metabox de información testimonial)
Ver en tema
Los testimonios de información sobre herramientas están destinados principalmente a temas personalizados, por lo que sí, tendrá que ensuciarse las manos con algunos ajustes de tema. Como cada tema tiene diferentes tamaños, combinaciones de colores y estilos, hemos decidido lanzarlo como un tutorial en lugar de como un plugin. Esto es lo que haremos para mostrar testimonios de sugerencias en su tema de WordPress:
- Agregue un código jQuery personalizado en el tema.
- Cree un bucle personalizado que muestre testimonios en la estructura que queramos.
- Agregue un poco de CSS básico para que se vea bien
Lo primero que debe hacer es copiar y pegar el siguiente código jQuery y guardarlo en un archivo vacío 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 } });
});
Después de hacer eso, necesitamos cargar este archivo en el encabezado de su tema. Puede optar por hacer esto manualmente editando su archivo header.php y pegando un código de script en el área de su cabeza, o siga las mejores prácticas de WP y use la función wp_enqueue_script. Sigamos adelante y carguemos nuestro archivo tooltip-testimonials.js en la carpeta de scripts de nuestro tema. Si no existe, simplemente cree una carpeta llamada scripts.
Agrega el siguiente código al archivo functions.php de tu 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 lo tenemos instalado, creemos un bucle personalizado que nos permitirá mostrar estos testimonios de sugerencias con imágenes de usuario en un formato de cuadrícula. Abra el archivo donde desea que aparezcan estos testimonios. Ya sea en tu barra lateral, en tu página de inicio o donde prefieras. Luego pega el siguiente bucle:
<div id="testimonials">
<div class="wrap">
<?php
$args = array( 'post_type' => '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');
?>
<div class="testimonials">
<p class="center"><img class="frame" src="<?php echo $user_image_url[0] ?>" title="<?php echo get_the_content(); ?>" alt="<?php echo get_the_title(); ?>" /></p>
<p class="testimonials-title"><?php echo get_the_title(); ?></p>
<p class="company"><?php echo $data[ 'position' ]; ?></p>
</div>
<?php
endwhile;
endif; ?>
</div>
</div>
El código de bucle anterior mostrará 6 elementos en la página. Puedes diseñarlos como quieras. También puede agregar orderby = rand si tiene alrededor de 20 testimonios. Puede ver 6 al azar.
Ahora agreguemos algunos estilos CSS para que se vea bien. A continuación se muestran algunos ejemplos de CSS que usamos. Probablemente debería ajustarlo en función de los estilos de tema, 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 simple. Como se mencionó anteriormente, siempre puede ajustar los argumentos de wp_query para tener un orden aleatorio de los testimonios. También puede utilizar el plugin Post Types Order para permitir que sus clientes determinen el pedido con una sencilla interfaz de arrastrar y soltar.
Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.
¿Te ha resultado útil??
0 / 0