Bloques personalizados para "TemaUC Child"
En la próxima actualización del Template del Kit Digital para WordPress (versión 1.1.16. del template Kit UC y versión 1.1. del template Kit UC Child), planificada para los próximos días, se incluye una modificación importante en el tema hijo del Kit (TemaUC Child), que incorpora un método para crear bloques personalizados para el editor de WordPress sin la necesidad de modificar por completo el tema. Este método facilita el desarrollo personalizado requerido para la creación e implementación de bloques ajustados a medida para tus proyectos.
¿Qué es un bloque personalizado y para que sirve?
Un bloque personalizado, es una herramienta que ayuda agregar contenidos o funcionalidades especificas para tu sitio web. Permite crear elementos a medidas a la necesidades que necesita el proyecto o para el usuario; como galería de fotos, formularios, bloques de contenido, entre otros con el estilo que necesitas para el proyecto en las que estás trabajando.
Para saber más información, puedes visitar el sitio de desarrollo de WordPress en el siguiente enlace (disponible solo en inglés) o también en este blog en español donde explica que son y para que sirven los bloques personalizados: enlace (sitio no oficial).
Instrucciones de instalación del tema padre e hijo
Paso 1
Acceda a la cuenta de Github o acepte la invitación que llega al correo una vez generado el acceso.
Paso 2: Descarga e instalación del tema padre y el tema hijo
Paso 2.1
Descargue la versión del Kit de la rama Master, en zip.
Paso 2.2
Elija la rama Child, y descargue también esa versión en zip.
Paso 2.3
Luego, en el administrador de su sitio en Wordpress, vaya a "Apariencia", elija "Agregar un nuevo tema", y luego escoja "Cargar tema".
Paso 2.4
Busque y cargue la versión Master del Kit UC que bajó en el paso 2.1. Instálelo.
Paso 2.5
Vuelva a elegir "Agregar un nuevo tema", y cargue la versión Child del Kit Digital que bajó en el paso
Paso 2.6
Instálelo y actívelo.
Nota: El tema Child no funcionará si no está instalada la versión Master, ya que llama al código que está en ese tema.
Paso 2.7
Asegúrese de que el tema que tiene activo es el Kit UC Child. Esa es la versión sobre la que debe hacer las personalizaciones para su sitio.
Instrucciones para bloques personalizados
Siga estos pasos para añadir bloques personalizados de forma efectiva:
Paso 1: Respaldar la información anterior
Realice un backup de contenido de su sitio de WordPress:
- Archivos de su sitio web: archivos WordPress, plantillas, plugins, imágenes, etc.
- Base de datos.
Este paso es esencial para proteger el contenido y la integridad de su sitio.
Recomendamos usar plugins de respaldo para realizar backups de manera fácil y segura.
Plugins recomendados:
1.- UpdraftPlus: Es el plugin más popular para realizar backups automáticos y programados. En su versión free puede realizar respaldos completos de archivos y base de datos, junto a copias de seguridad almacenados en la nube (Google Drive, Dropbox, Amazon S3, etc.).
2.- BackWPup: Otro plugin popular para realizar copias de seguridad. En su versión free no da la opción de realizar backups almacenados en la nube con algunos servicios. (Servicios disponibles: Dropbox, Amazon S3, Azure, etc.).
3.- Duplicator: Realiza backups completos a su sitio. En su versión free, a diferencia de los demás no realiza copias de seguridad almacenadas en la nube.
Al realizar el backup también se recomienda verificar la integridad del respaldo restaurándolo en un entorno de pruebas.
Paso 2: Creación del archivo
En el VisualCode Studio (o editor de código de preferencia) diríjase a la carpeta “src/blocks” dentro del “TemaUC Child”.
Dentro de esa carpeta, cree un nuevo archivo JavaScript para el bloque.
Paso 3: Registro de bloque JavaScript:
Al tener el archivo creado, diríjase a la dirección “src/index.js“. Dentro de ese archivo introduzca el siguiente código debajo del comentario:
//import { __ } from '@wordpress/i18n';
import nombre-del-archivo from './blocks/nombre-del-archivo'
Después del código de importación, escriba el siguiente código de registro debajo del comentario:
//Registra acá tus bloques
registerBlockType('uc-kit/nombre-del-archivo, nombre-del-archivo);
Paso 4: Registro de bloque PHP:
Ya con el bloque registrado en JavaScript, diríjase al archivo “functions.php” en el TemaUC Child. Dentro de ese archivo, busque la línea con el código “$blocks” y escriba el nombre del archivo para registrarlo:
$blocks = ['nombre del archivo']; //Registra acá tus bloques
(Opcional) Añadir opciones para Selects
En el caso de que el bloque creado cuente con controles de selección (SelectControl), se deben definir las opciones dentro del archivo “lib/uc-kit-blocks.js" en la siguiente dirección y código:
UCKitWPBlocks = { thumbnail: window.SITEWEB + '/assets/img/picture.jpg, //'http://placehold.it/200',
//Registra acá tus bloques
nombre-del-archivo: [
{ value: '', label: 'Selecciona un bloque' },
{ value: 'nombre-del-archivo', label: 'Nombre del Archivo'},
],
};//El último value es el nombre del componente que se mostrará en el editor de WordPress
Paso 5: Compilar el código
Tras completar todos los pasos anteriores, dentro del terminal en el editor del código, compile el código para la generación de los archivos JavaScript y CSS necesarios con el siguiente código:
npm run build
Paso 6: Subir código
Al compilar, los nuevos archivos se generan en la siguiente carpeta: /lib/gutenberg/build.
Con dichos archivos, suba los archivos al servidor para aplicar el nuevo bloque personalizado.
Si tiene dudas o consultas, escríbanos a visibilidaddigital@uc.cl.