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 de video de MundoCMS WordPress, nos inspiramos en algo que hemos visto hacer StudioPress durante bastante tiempo. Esto muestra testimonios en una información sobre herramientas cuando el usuario pasa el mouse sobre una foto. Esta técnica se está convirtiendo rápidamente 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 una ventana emergente de testimonios de información sobre herramientas en WordPress.

Resultado final

Así es como se verá el producto final. Si pasa el mouse sobre la foto de una persona, se mostrará una información sobre herramientas de testimonio. Puedes ver la 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:

Fondo:

Por lo que hemos escuchado de los 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 quisimos tomar este camino. Hicimos una simple búsqueda en Google para encontrar el artículo de Loren Nason. En el que básicamente destacó el código utilizado por StudioPress. La mejor parte de StudioPress es su soporte. Como Loren lo describió, cuando le preguntó a Brian Gardner cómo había creado los testimonios en su sitio, Brian simplemente envió un archivo de muestra. El mayor problema era que simplemente habían codificado la funcionalidad en su modelo. Si bien esto funciona 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 diéramos al cliente la posibilidad de agregar / eliminar testimonios a voluntad. Es por eso que decidimos usar tipos de publicaciones personalizadas y metacampos para lograr esto con jQuery.

Tipos de publicaciones personalizadas y meta-cajas

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

• Agregar foto de usuario (miniaturas)
• Agregar nombre de usuario (título del mensaje)
• Agregar texto testimonial (cuerpo del mensaje)
• 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 consiguió todo excepto un campo (puesto de cliente / empresa). Depende de usted decidir si desea agregar un metabox personalizado o hacer que su cliente use campos personalizados. Decimos que no sea perezoso y brinde a nuestros clientes una excelente 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 nombre para eso.

_x ('Testimonios', 'testimonio'), 'singular_name' = _x ('testimonio', 'testimonio'), 'add_new' = _x ('Agregar nuevo', 'testimonio'), 'add_new_item' = _x ('Agregar Nuevo testimonio ',' testimonio '),' edit_item '= _x (' Editar testimonio ',' testimonio '),' new_item '= _x (' Nuevo testimonio ',' testimonio '),' view_item '= _x (' Ver el testimony ',' testimonial '),' search_items '= _x (' Buscar testimonios ',' testimonial '),' not_found '= _x (' No se encontraron testimonios ',' testimonial '),' not_found_in_trash '= _x (' No hay testimonios encontrado en la papelera de reciclaje ',' testimonio '),' parent_item_colon '= _x (' Testimonio del padre: ',' testimonio '),' nombre_menú '= _x (' Testimonios ',' testimonio '),); $ args = matriz ('etiquetas' = $ etiquetas, 'jerárquico' = falso, 'soportes' = matriz ('título', 'editor', 'extracto', 'autor', 'miniatura', 'campos personalizados', 'revisiones'), 'public' = true, 'show_ui' = true, 'show_in_menu' = true, 'show_in_nav_menus' = true, 'public_queryable' = true, 'exclude_from_search' = falso, 'has_archive' = true, 'query_var' = verdadero, 'can_export' = verdadero, 'reescribir' = verdadero, 'tipo_capacidad' = 'publicar'); register_post_type ('testimonio', $ args); } // Cuadro meta personalizado $ key = "testimonio"; $ meta_boxes = matriz ("posición" = matriz ("nombre" = "posición", "título" = "Posición y empresa", "descripción" = "Introduzca su posición y el nombre de su empresa.")); function create_meta_box () {clave $ global; if (function_exists ('add_meta_box')) {add_meta_box ('new-meta-boxes', ucfirst ($ clave). 'Información', 'display_meta_box', 'testimonio', 'normal', 'alto'); }} function display_meta_box () {publicación $ global, $ meta_boxes, $ clave; ?

Mostrar en tema

Los testimonios de información sobre herramientas son principalmente para temas personalizados, así que sí, tendrás que ensuciarte las manos con algunos cambios de tema. Dado que cada tema tiene diferentes dimensiones, esquemas de color y estilos, decidimos publicarlo 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 código jQuery personalizado en el tema.
• Cree un bucle personalizado que mostrará los testimonios en cualquier 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 de 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 ({// cambiar el desplazamiento de posición: [0, 0], // use el efecto "slide": 'slide' // agregue un complemento dinámico con una configuración opcional para el borde inferior}). dinámico ({abajo: {dirección: 'abajo', rebote: verdadero}}); }); Una vez que haya hecho eso, debemos cargar este archivo en el encabezado de su tema. Puede optar por hacer esto manualmente editando su archivo header.php y pegando algún código de secuencia de comandos en su área de encabezado, o puede seguir las mejores prácticas de WP y usar la función wp_enqueue_script. Sigamos y descarguemos 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', verdadero); wp_enqueue_script ('jquery_tools'); wp_register_script ('información sobre herramientas', get_stylesheet_directory_uri (). '/scripts/tooltip-testimonials.js', 'jquery', '1', verdadero); wp_enqueue_script ('descripción emergente'); }} Ahora que lo tenemos en su lugar, creemos un bucle personalizado que nos permitirá mostrar estos testimonios de información sobre herramientas 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, página de inicio o donde quieras. Luego pega el siguiente bucle:

El código de bucle anterior mostrará 6 elementos en la página. Puedes diseñarlos como quieras. Incluso puede agregar orderby = rand si tiene 20 testimonios. Puede mostrar 6 al azar. Ahora agreguemos algunos estilos CSS para que se vea bonito. A continuación, se muestran algunos ejemplos de CSS que hemos utilizado. Probablemente deba ajustarlo de acuerdo con los estilos, colores, etc. de su tema. #testimonials .testimonials {ancho: 116px; flotador izquierdo; margin: 35px 30px 0 0;} #testimonials .center {text-align: center; margen: 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; peso de fuente: 700; alineación de texto: centro; margen: 3px 0 0; padding: 0px;} #testimonials .company {font-size: 12px; estilo de fuente: cursiva; alineación de texto: centro; margen: 0px; padding: 0px;} #testimonials .tooltip {background: # 111; color: #fff; ancho: 200px; relleno: 20px; margen: 0 5px 20px;}

Envoltura:

Esperamos que este artículo le 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 wp_query para tener un orden aleatorio de testimonios. También puede utilizar el complemento 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 ...