Mi propósito en esta ocasión es crear una barra de servicios profesionales para una página web. Seguro que se podría hacer de otra forma e, incluso, ahorrando líneas de código. Sin embargo, esta opción que os voy a presentar en esta ocasión funciona. Como siempre, vamos a reutilizar código como iremos viendo conforme avancemos.

Esta barra contará con cuatro servicios. Este es su diseño. No se pueden crear más de forma dinámica. Este es el diseño de la que voy a hablar en esta ocasión. Empero, será totalmente personalizable en cuanto a sus contenidos.

Lo primero es plantearse el diseño de cada uno de los servicios que contarán con una imagen, un título y un párrafo que describirá el servicio. Vamos a utilizar una solución que ya existe y que podremos encontrar en la página web de ihover. Voy a mostraros la que he escogido:

<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item square effect10 top_to_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>

La cuestión es que hay una serie de campos que deberán ser personalizables: la imagen, el titulo y el párrafo. Vamos a ver como se hace esto. Quizás lo más ineficiente es que será repetido en tres ocasiones más. Evidentemente hay una forma de evitar esto, y ya lo veremos en una publicación posterior.

Nuestra atención se dirige ahora al fichero customizer.php. En él vamos a crear un nuevo panel que aparecerá cuando pulsemos la opción personalizar y en la que introduciremos o cambiaremos los contenidos. Ya vimos en un artículo anterior como crear el panel y la sección, por lo que ahora solo me centraré en la cuestión de la configuración y el control necesarios. Por cada uno de los servicios habrá tres configuraciones y tres controles respectivamente que gestionarán cada uno de los elementos de cada servicio profesional, tal y como los he enumerado hace tan solo unas líneas.

Para el caso de la imagen, tendrá el siguiente aspecto:

$wp_customize->add_setting ('imagen_servicio_profesional_1', [
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'defaults' => '',
	'transport' => 'refresh',
	'sanitize_callback' => '',
	'sanitize_js_callback' => '',
]);

$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen_servicio_profesional_1', [
	'label' => __('Imagen #1 del servicio profesional', 'antoniogarciaprats'),
	'section' => 'servicios_profesionales_home_section',
	'mime_type' => 'image',
	'priority' => 1,
]));

Para incluir una sección de titulo en cada uno de los servicios profesionales, lo haremos del siguiente modo:

$wp_customize->add_setting ('titulo_principal_1', [
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'defaults' => 'titulo',
	'transport' => 'refresh',
	'sanitize_callback' => '',
	'sanitize_js_callback' => '',
]);

$wp_customize->add_control ('titulo_principal_1', [
	'label' => __('Titulo principal #1', 'antoniogarciaprats'),
	'description' => __('Titulo del servicio profesional'),
	'type' => 'text',
	'section' => 'servicios_profesionales_home_section',
	'priority' => 14,
]);

Y por último, necesitamos introducir un texto que describa el servicio profesional:

$wp_customize->add_setting ('parrafo_1', [
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'defaults' => 'Lorem ipsum dolor sit amet',
	'transport' => 'refresh',
	'sanitize_callback' => '',
	'sanitize_js_callback' => '',
]);

$wp_customize->add_control ('parrafo_1', [
	'label' => __('Descripción del servicio #1', 'antoniogarciaprats'),
	'description' => __('Descripción del servicio profesional'),
	'type' => 'textarea',
	'section' => 'servicios_profesionales_home_section',
	'priority' => 15,
]);

Para que no os perdáis demasiado, os muestro el código completo, por si queréis copiarlo para vuestro propio diseño:

function antoniogarciaprats_customizer_servicios ( $wp_customize ) {

	//Panel 
	$wp_customize->add_panel ('servicios_profesionales', [
		'title'	=> __('Servicios Profesionales', 'antoniogarciaprats'),
		'description'	=> 'Servicios profesionales en el frontpage',
		'priority'	=> 180,
	]);

	// Seccion
	$wp_customize->add_section ('servicios_profesionales_home_section', [
		'title'		=> 'Servicios Profesionales Pagina Principal',
		'panel'	=> 'servicios_profesionales',
	]);

	/* -------------------------------- Servicios Profesionales #1 ----------------------------------------- */

	//Setting o Configuracion
	$wp_customize->add_setting ('imagen_servicio_profesional_1', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen_servicio_profesional_1', [
		'label' => __('Imagen #1 del servicio profesional', 'antoniogarciaprats'),
		'section' => 'servicios_profesionales_home_section',
		'mime_type' => 'image',
		'priority' => 1,
	]));

	//Setting o Configuracion
	$wp_customize->add_setting ('titulo_principal_1', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'titulo',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('titulo_principal_1', [
		'label' => __('Titulo principal #1', 'antoniogarciaprats'),
		'description' => __('Titulo del servicio profesional'),
		'type' => 'text',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 14,
	]);

	//Setting o Configuracion
	$wp_customize->add_setting ('parrafo_1', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'Lorem ipsum dolor sit amet',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('parrafo_1', [
		'label' => __('Descripción del servicio #1', 'antoniogarciaprats'),
		'description' => __('Descripción del servicio profesional'),
		'type' => 'textarea',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 15,
	]);

	/* -------------------------------- Servicios Profesionales #2 ----------------------------------------- */

	//Setting o Configuracion
	$wp_customize->add_setting ('imagen_servicio_profesional_2', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen_servicio_profesional_2', [
		'label' => __('Imagen #2 del servicio profesional', 'antoniogarciaprats'),
		'section' => 'servicios_profesionales_home_section',
		'mime_type' => 'image',
		'priority' => 1,
	]));

	//Setting o Configuracion
	$wp_customize->add_setting ('titulo_principal_2', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'titulo',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('titulo_principal_2', [
		'label' => __('Titulo principal #2', 'antoniogarciaprats'),
		'description' => __('Titulo del servicio profesional'),
		'type' => 'text',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 14,
	]);

	//Setting o Configuracion
	$wp_customize->add_setting ('parrafo_2', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'Lorem ipsum dolor sit amet',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('parrafo_2', [
		'label' => __('Descripción del servicio #2', 'antoniogarciaprats'),
		'description' => __('Descripción del servicio profesional'),
		'type' => 'textarea',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 15,
	]);

	/* -------------------------------- Servicios Profesionales #3 ----------------------------------------- */

	//Setting o Configuracion
	$wp_customize->add_setting ('imagen_servicio_profesional_3', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen_servicio_profesional_3', [
		'label' => __('Imagen #3 del servicio profesional', 'antoniogarciaprats'),
		'section' => 'servicios_profesionales_home_section',
		'mime_type' => 'image',
		'priority' => 1,
	]));

	//Setting o Configuracion
	$wp_customize->add_setting ('titulo_principal_3', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'titulo',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('titulo_principal_3', [
		'label' => __('Titulo principal #3', 'antoniogarciaprats'),
		'description' => __('Titulo del servicio profesional'),
		'type' => 'text',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 14,
	]);

	//Setting o Configuracion
	$wp_customize->add_setting ('parrafo_3', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'Lorem ipsum dolor sit amet',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('parrafo_3', [
		'label' => __('Descripción del servicio #3', 'antoniogarciaprats'),
		'description' => __('Descripción del servicio profesional'),
		'type' => 'textarea',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 15,
	]);

	/* -------------------------------- Servicios Profesionales #4 ----------------------------------------- */

	//Setting o Configuracion
	$wp_customize->add_setting ('imagen_servicio_profesional_4', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen_servicio_profesional_4', [
		'label' => __('Imagen #4 del servicio profesional', 'antoniogarciaprats'),
		'section' => 'servicios_profesionales_home_section',
		'mime_type' => 'image',
		'priority' => 1,
	]));

	//Setting o Configuracion
	$wp_customize->add_setting ('titulo_principal_4', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'titulo',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('titulo_principal_4', [
		'label' => __('Titulo principal #4', 'antoniogarciaprats'),
		'description' => __('Titulo del servicio profesional'),
		'type' => 'text',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 14,
	]);

	//Setting o Configuracion
	$wp_customize->add_setting ('parrafo_4', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => 'Lorem ipsum dolor sit amet',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control ('parrafo_4', [
		'label' => __('Descripción del servicio #4', 'antoniogarciaprats'),
		'description' => __('Descripción del servicio profesional'),
		'type' => 'textarea',
		'section' => 'servicios_profesionales_home_section',
		'priority' => 15,
	]);

}

add_action ('customize_register', 'antoniogarciaprats_customizer_servicios');

Nos queda ahora lo más fácil: conseguir mostrar todos estos contenidos en nuestra página web. Para ello deberemos sustituir partes del código con efecto hover que ya vimos al principio con PHP. Veamos sucesivamente cada uno de ellos.

$id_imagen = get_theme_mod ('imagen_servicio_profesional');
$ruta_imagen = wp_get_attachment_image_src ( $id_imagen, 'full' ); ?>
<img src="<?php echo $ruta_imagen1[0] ?>" alt="img">

En el caso del título, escribiremos lo siguiente:

<?php
$titulo = get_theme_mod ( 'titulo_principal_1' );
echo $titulo;
?>

Y para terminar, el párrafo que que describe el servicio:

<?php
$parrafo_1 = get_theme_mod ('parrafo_1');
echo $parrafo_1;
?>

Os muestro, para terminar, el código completo. para uno de los servicios. Tan sólo tenéis que cambiar los índices para el resto. Vamos a verlo;

div class="ih-item square effect10 bottom_to_top">
	<a href="#">
        	<div class="img">
                	<?php
                    	$id_imagen1 = get_theme_mod ('imagen_servicio_profesional_1');
                    	$ruta_imagen1 = wp_get_attachment_image_src ( $id_imagen1, 'full' ); ?>
                    	<img src="<?php echo $ruta_imagen1[0] ?>" alt="img">
                 </div>
                 <div class="info">
                 	<h3>
                      		<?php
                        	$titulo_1 = get_theme_mod ( 'titulo_principal_1' );
                        	echo $titulo_1;
                      		?>
                    	</h3>
                    	<p>
                      		<?php
                        	$parrafo_1 = get_theme_mod ('parrafo_1');
                        	echo $parrafo_1;
                      		?>
                    	</p>
                 </div>
        </a>
</div>

Como siempre, dejo la sección de comentarios para que os pueda aclarar todas las dudas que os surjan.

Dejar respuesta

Please enter your comment!
Please enter your name here