¡Hola a todos! En el primer video de nuestra serie, vimos cómo instalar WordPress desde cero. En este segundo video, vamos a avanzar un paso más y vamos a subir el tema BlankSlate, que será la base para desarrollar nuestro ecommerce.
BlankSlate es un tema minimalista y ligero, perfecto para desarrolladores que quieren empezar desde una base limpia y construir un tema personalizado.
Recuerda que la idea de este curso es darte el conociemiento y las herramientas necesaria para desarrollar sitios web a medida en WordPress.
¿Por qué elegir BlankSlate?
BlankSlate es un tema básico que no incluye estilos ni scripts innecesarios, lo que te da total libertad para diseñar y desarrollar tu ecommerce desde cero.
Al ser tan ligero, también asegura un rendimiento óptimo del sitio.
Además, es muy fácil de entender y modificar, lo que lo convierte en una excelente opción para los desarrolladores.
En mi caso a mi me encanta empezar mis desarrollos con BlankSlate , pero también existen otras opciones que peuden ser interesantes como:
1. Underscores (_s)
Underscores, también conocido como _s, es otro tema minimalista creado por Automattic, los creadores de WordPress. Es una plantilla de inicio que proporciona una base sólida para construir temas personalizados.
Puedes ver este tema aquí Underscores
2. HTML5 Blank
HTML5 Blank es un tema de WordPress que ofrece una estructura mínima basada en HTML5.
Es ideal para desarrolladores que buscan una base limpia y moderna para construir sus propios temas.
Te dejo el link de este theme HTML5 Blank
3. Sage
Sage es un tema de inicio para WordPress que utiliza las últimas tecnologías y prácticas recomendadas, como Gulp, Bower y Bootstrap.
Es más avanzado y está destinado a desarrolladores que quieren aprovechar herramientas modernas en su flujo de trabajo.
Podéis ver este theme en el link que os dejo Sage.
Si quereis y teneis más curiosidad por estos themes, podemos hacer algun video investigandolos un poco más a fondo.
Descarga e instala el Tema BlankSlate
Lo primero que necesitamos hacer es descargar el tema BlankSlate. Puedes encontrarlo en el repositorio oficial de WordPress o directamente desde GitHub.
Probablemente la forma más sencilla sea descargarlo directamente de el repositorio oficial de WordPress, te adjunto una captura de pantalla para que lo veas.
A continuación, solo tienes que darle a instalar y luego a activar. No te austes si ves que en la home page no te aparece ningun estructura ni ningun diseño, este theme es una base la cual vamos a desarrollar y diseñar nosotros.
Explorando el Tema BlankSlate
Para entender cómo funciona BlankSlate y cómo podemos empezar a personalizarlo, vamos a echar un vistazo a su estructura interna.
BlankSlate es un tema extremadamente básico, diseñado para que los desarrolladores tengan un punto de partida limpio y mínimo.
Aun así, si es la primera vez que ves un theme por dentro, puede resultar un poco abrumador pero no te preocupes, durante el curso irás entendiendo como funciona todo.
Estructura de archivos de BlankSlate Theme
style.css
El field style.css define los estilos CSS para el tema. Aquí añadiremos el codigo CSS para dar estilo al ecommerce que vamos a desarrollar.
Además, este field contiene metadatos esenciales que WordPress usa para identificar el tema y mostrar información en el panel de administración.
Aquí os dejo un ejemplo del codigo que os encontrareis en el archivo style.css
/*
Theme Name: NauticXplorer
Theme URI: https://test.javierchiva.com/nauticxplorer
Author: Javier Chiva Luis
Author URI: https://test.javierchiva.com/
Description: A starting point for creating an ecommerce website from scratch, based on the BlankSlate theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blank, custom, ecommerce, theme
Text Domain: nauticxplorer
*/
Index.php
Este field actúa como la plantilla predeterminada para todas las páginas del sitio si no hay plantillas específicas disponibles.
Es el archivo de plantilla principal que WordPress busca cuando carga cualquier página.
Functions.php
Añade funcionalidad al tema, como registrar menús, añadir scripts y estilos, y definir funciones personalizadas.
Es el archivo central para extender la funcionalidad de WordPress sin modificar los archivos del núcleo.
Header.php
Contiene el encabezado de las páginas, incluyendo el meta contenido y las etiquetas de apertura del body.
Es fundamental para incluir scripts y estilos que se deben cargar en el <head>
de cada página.
Footer.php
Contiene el pie de página de las páginas y cierra el body y el html.
Es utilizado para agregar scripts adicionales y contenido que debe aparecer al final de cada página.
Page.php
Plantilla específica para las páginas estáticas. Permite tener un diseño diferenciado para las páginas estáticas en comparación con las entradas de blog.
Single.php
Plantilla específica para las entradas individuales del blog. Permite personalizar la apariencia de las entradas individuales, diferenciándolas de las páginas y otras secciones del sitio.
Hasta aquí el post de hoy, espero que os haya servido de ayuda. Continuaremos creando nuestro ecommerce en el próximo video.