Cómo crear un widget personalizado en WordPress usando Genesis Child Theme
Publicado: 2018-02-15
Genesis es uno de los marcos de WordPress más utilizados para diseñar diseños de sitios web. Es popular entre los desarrolladores debido a su arquitectura de tema padre-hijo. Les permite personalizar los temas secundarios según sus requisitos sin afectar la funcionalidad principal del tema principal.
En este artículo, demostraré lo fácil que es personalizar el tema hijo de Genesis creando 4 áreas de widgets dentro del tema de muestra de Genesis que viene gratis con Genesis Framework.
1. Configuración del entorno de desarrollo
Para instalar Genesis Framework, debe tener una instalación de WordPress, ya sea localmente o en un servidor. Supongo que ya ha instalado WordPress en su servidor y, si no, lance su WordPress usando la plataforma Cloudways.
Ahora descargue la copia de Genesis Framework y Sample theme de StudioPress y active el framework en su sitio web de WordPress.
Nota: Para la personalización del tema de Genesis, estoy usando Sublime Text 3 como mi editor de texto. Sin embargo, tiene la opción de elegir cualquier otro editor de texto.
2. Personalización del tema infantil
Abra el tema Sample Genesis en su editor de texto y cree un nuevo archivo front-page.php en el directorio raíz .
Ahora abra front-page.php y agregue el siguiente fragmento.
<? php génesis();
Esto inicializará Genesis Framework.
El tema de muestra no viene con front-page.php , por lo tanto, tengo que crear explícitamente esta página para registrar nuestras áreas de widgets.
Áreas de widget personalizadas
Comenzaré a agregar widgets modificando el archivo function.php del tema, pero antes de comenzar a escribir código, permítanme explicar la lógica del back-end.
Aquí estoy declarando una función que toma una matriz de parámetros:
- id - para identificar nuestro código.
- nombre : es lo que veremos en nuestro panel de WordPress.
- descripción : esto también se mostrará en el panel de WordPress.
Nota: "id" y el "nombre" de la función deben ser únicos.
Ahora abra function.php y agregue los siguientes fragmentos de código al final del archivo.
Para el widget deslizante
genesis_register_sidebar (matriz (
'id' => 'portada-1',
'name' => __ ('Widget de control deslizante de la página de inicio', 'genesis-sample'),
'description' => __ ('Este es un widget que va en la página principal.', 'genesis-sample'),
));Para el widget de contenido 1
genesis_register_sidebar (matriz (
'name' => __ ('Contenido de inicio arriba a la izquierda', 'genesis-sample'),
'id' => 'contenido-1',
'description' => __ ('Inicio superior izquierdo', 'genesis-sample'),
));Para el widget de contenido 2
genesis_register_sidebar (matriz (
'name' => __ ('Contenido de inicio en el medio superior', 'genesis-sample'),
'id' => 'contenido-2',
'description' => __ ('Inicio medio superior', 'genesis-sample'),
));Para el widget de contenido 3
genesis_register_sidebar (matriz (
'name' => __ ('Contenido de inicio arriba a la derecha', 'genesis-sample'),
'id' => 'contenido-3',
'description' => __ ('Inicio superior derecho', 'genesis-sample'),
));Como se ve a continuación, he creado con éxito 3 widgets diferentes. Ahora sigamos adelante y carguemos el tema personalizado en el panel de WordPress.
Tenga en cuenta que los widgets se pueden ver en la pestaña Widgets. Sin embargo, activarlos no tendrá ningún efecto en el front-end de nuestro tema. Eso es porque no he agregado el marcado para mostrar estos widgets dentro de nuestro archivo front-page.php .
Para agregar marcado para mostrar widgets, estoy declarando una función personalizada en el archivo front-page.php . En esa función, estoy llamando al widget desde su "id", que se creó previamente en el archivo function.php junto con algunas marcas HTML.
Aunque agregar esta función aún no hará nada, ya que aún no hemos adjuntado esta función a ninguna acción.
Para eso, estoy declarando una acción que contiene un gancho 'genesis-meta' y en eso, estoy llamando a una función 'my_homepage_setup' . En esta función, estoy comprobando que el área de widgets esté activa o no. Si es así, entonces tengo que conectar ese widget a una ubicación específica y luego llamar a esa función de widget para mostrar el marcado del widget.
Ahora agregaré el siguiente fragmento de código en el archivo front-page.php .
Widget de control deslizante
add_action ('genesis_meta', 'my_homepage_setup');
function my_homepage_setup () {
if (is_active_sidebar ('portada-1')) {
// * Agregar widget deslizante
add_action ('genesis_after_header', 'display_front_page_1_widget');
}
}
// Agregar marcado para mostrar widgets deslizantes.
function display_front_page_1_widget () {
genesis_widget_area ('portada-1', matriz (
'before' => '<div class = "front-page-1-widget"> <div class = "wrap">',
'después' => '</div> </div>',
));
}Widgets de contenido (1, 2 y 3)
add_action ('genesis_before_content', 'ng_home_page_widgets');
// * Agrega los widgets de inicio en su lugar
function ng_home_page_widgets () {
if (is_front_page (''))
genesis_widget_area ('contenido-1', matriz (
'before' => '<div class = "un tercio del primer hometopcol toplefthome">',
'después' => '</div>',));
if (is_front_page (''))
genesis_widget_area ('contenido-2', matriz (
'before' => '<div class = "un tercio de hometopcol topmiddlehome">',
'después' => '</div>',));
if (is_front_page (''))
genesis_widget_area ('contenido-3', matriz (
'before' => '<div class = "un tercio de hometopcol toprighthome">',
'después' => '</div>',));
}Finalmente, algunos estilos CSS dentro de su archivo style.css
Estoy agregando CSS a las áreas de widgets de estilo. Sin embargo, puede diseñar el estilo que desee.
En aras de la simplicidad, solo estoy definiendo el tamaño y el relleno de los widgets de contenido: color de borde y fondo para el contenedor del sitio web.
.first {margin-left: 0px;}
.site-container {background: #fff;}
.site-inner {padding-top: 0px;}
homecontent {
color: # 7e7467;
tamaño de fuente: 16px;
altura de línea: 1,3;
caja de sombra: 1px 2px 5px 0px rgba (0, 0, 0, 1);
margen superior: 25px;
posición: relativa;}
.textwidget {relleno: 12%; alineación de texto: centro;}
.hometopcol {
margen superior: 0px;
altura: 280px;
borde: rgb sólido de 4px (255,69,0);}
.widgettitle {
color: # c4421b;
relleno: 15px 0px 0px 15px;
borde inferior: 4px rgba sólido (162, 152, 135, 1);
margen inferior: 10px;
transformación de texto: ninguna;
tamaño de fuente: 16px;}
.widgettitle: después de {
contenido: " ";
posición: absoluta;
arriba: 43px;
izquierda: 5px;
derecha: 5px;
borde: rgba sólido de 1 px (162, 152, 135, 1);}Volvamos al sitio web de WordPress y veamos los cambios. Para el widget Slider, usaré Smart Slider 3. Puede usar cualquier widget deslizante de su elección. Para los widgets de contenido, simplemente usaré texto.
Mirada final
Al final de este artículo, puedo crear 4 widgets personalizados para el tema hijo de Genesis Sample. De forma predeterminada, el tema de Genesis no viene con ningún widget de encabezado, pero ahora tengo mi propio widget personalizado que se puede usar para un control deslizante o para mostrar cualquier otra información. Los otros 3 widgets de contenido se pueden usar para resaltar productos o servicios o cualquier otra característica.
Después de activar todos los widgets, la página principal debería verse así:
Resumen
Al comienzo de este artículo, solo sabíamos cómo usar el tema Genesis WordPress como tema hijo de muestra, pero a medida que avanzamos, aprendimos cómo crear áreas de widgets personalizadas dentro del tema WordPress Genesis Sample y cómo colocarlas en el diseño de la página principal.
Estoy seguro de que este artículo le ha dado suficiente confianza para personalizar o crear su propio tema infantil de Génesis usted mismo. Para conocer las mejores prácticas, se recomienda consultar la documentación oficial de Genesis y WordPress.