Mi nombre es David Zamora y llevo desde el año 2013 enganchado al SEO y todo lo que lo rodea. Actualmente tengo un pequeño blog, davidzamora.blog donde escribo pocas veces, pero muy intensamente.
Desde mis inicios, empecé a crear mis primeras páginas con Joomla y al poco tiempo, descubrí WordPress y empecé a hacer mis primeros nichos.
Después de descubrir este CMS, empecé a hacer mis primeras páginas con WordPress para clientes. Eran diseños sencillos, normalmente páginas corporativas o blogs muy simples, no solía cobrar más de 500€ por página web.
Por mis ansias de mejorar y de complicarme la vida, empecé a buscar maneras de mejorar mis diseños. Quería hacer páginas web más personalizadas y que en general, estuvieran mejor optimizadas.
La idea era buscar la manera de hacer páginas web en WordPress que fueran livianas, con tiempos de carga rápidos y a la vez con un diseño propio y atractivo.
A todo esto, hay que añadir que también buscaba la manera de mejorar mis conocimientos en diseño y desarrollo web.
Después de un tiempo perfeccionando el método, pasé de cobrar 500€ por una página a cobrar hasta 3500€ por una página a medida en WordPress.
Esto lo hice gracias a la flexibilidad de este CMS, que te permite crear tu propio theme personalizado de WordPress.
Como habrás podido observar, he dicho método y no técnica o truco. Esto no es ningún truco sencillo, de hecho, a mi me costó tiempo implementarlo de forma correcta.
¿Qué es lo que vas a ver en este artículo?
Tabla de contenidos
A continuación, voy a explicar como hacer tu propio theme de WordPress con la ayuda de un starter theme. De esta forma puedes hacer tus páginas web de forma completamente flexible y personalizada. Además, puedes crear tus propias plantillas y venderlas.
Esto lo haremos mediante Html, css y un poco de php.
Cuando empecé a hacer mis propios themes no tenía ni idea de programación. Bueno, actualmente utilizo php y js de forma simple, para hacer scripts o plugins, que me permiten agregar funcionalidades a WordPress. Así evito instalar muchos plugins. Pero he de reconocer, que actualmente no soy ningún experto en programación.
Con esto quiero decir que si yo he podido hacerlo sin tener ni idea de programación, cualquiera puede hacerlo también (siempre y cuando tengas unos conocimientos mínimos).
Cómo crear un theme WordPress desde cero
Para crear nuestra propia plantilla usaremos el Starter theme de Underscores. Esta plantilla ha sido creada por el equipo de Automattic, que es la misma empresa desarrolladora del propio CMS de WordPress.
Si quieres más información, puedes visitar su página web oficial de underscores o su repositorio en github.
¿Por qué hacer tu propio theme?
Es posible que pienses que crear tu propio theme son ganas de complicarte la vida y quizás tengas toda la razón.
No obstante, creo que son cuatro los motivos por los que me gusta crear mis propios themes de WordPress y por los que creo que puede ser interesante para SEOs, Diseñadores Web o Agencias de Marketing.
Nivel de personalización y flexibilidad
El nivel de personalización es mucho mayor que en cualquier theme de WordPress. Con los conocimientos necesarios, puedes crear diseños completamente exclusivos.
También puedes crear cualquier tipo de funcionalidades que se adapten a las necesidades de tu nicho o de tu cliente con mayor facilidad que con un theme tradicional.
Nivel de optimización
Como le suele pasar a muchos SEOs, yo también estuve obsesionado con la optimización de los tiempos de carga. Y por mi experiencia, este tipo de themes cargan más rápido que la mayoría de plantillas comerciales de WordPress.
Aquí dejo un test de velocidad de la página de davidzamora.blog. No es la página que está más optimizada (prefiero hacer más marca que seo en este caso) pero creo que puede ser un ejemplo de diseño a medida en WordPress que está bastante optimizado.
Esto se debe a que este starter theme no carga tantos scripts, ni hace tantas peticiones, como en algunas plantillas de WordPress.
Para aprender
Siempre me ha gustado mejorar lo que hago y el diseño web no es una excepción. Además, siempre he disfrutado creando mis propios diseños y esto me ha servido para poder desarrollar páginas a medida en html, css, js y php.
Creo que empezar con Underscores es una buena opción si te interesa el desarrollo web.
Para ganar más dinero
Ahora puedo cobrar bastante más por hacer diseños web en WordPress. Como he comentado antes, he llegado a cobrar 3500€ por una página a medida, con este método.
¿Qué herramientas utilizaremos?
Antes de ponernos manos a la obra, necesitamos montar nuestro entorno de desarrollo. Utilizaremos dos programas que creo que son obligatorios para cualquier diseñador web.
Un servidor local
Utilizaremos un servidor web local (en nuestro ordenador) para desplegar la instalación de WordPress y poder trabajar con el theme de forma mucho más directa que en un hosting. Puedes utilizar cualquier servidor, como Xampp, WampServer, Mamp, etc.
Yo suelo utilizar WampServer, que es el que más me gusta de los que he probado.
Un IDE o Editor de código
Para escribir código es indispensable que lo hagas desde un editor de código/texto o un IDE (entorno de desarrollo integrado). Yo utilizo Visual Studio Code, pero puedes utilizar el que tu quieras.
Underscores Theme
Utilizaremos el propio theme de underscores, que por cierto viene preparado para usar Woocomerce si queremos y también para trabajar con preprocesadores CSS como SASS.
Underscores es uno de los themes que más me gustan para diseñar una plantilla en WordPress, aunque hay un montón starter themes.
¿Hace falta crear un child theme de WordPress?
Un starter theme tiene los archivos necesarios que hacen de base, es decir, viene con las mínimas funcionalidades y estilos posibles para que lo puedas usar como «lienzo en blanco». Así que realmente no hace falta crear un child theme de WordPress ya que un starter theme tiene una estructura muy simple.
¿Utilizar Bootstrap para crear un theme en WordPress?
Si estás acostumbrado a utilizar bootstrap en tus proyectos, puedes utilizarlo en cualquier starter theme como Underscores. Para utilitzar boostrap en tus themes de WordPress puedes hacerlo mediante un enqueue a través del archivo functions.php.
Puedes utilizar la cdn de bootstrap o descargarte los archivos localmente y apuntar la ruta del archivo en el enqueue.
Yo personalmente prefiero trabajar siempre con flexbox y css grid para maquetar en CSS. En cuanto al JavaScript, suelo crear pequeños scripts y utilizo librerías para cosas concretas.
Guía para crear un theme de WordPress con Underscores
Esta será una guía básica sobre cómo hacer tu propio theme. También puede servir si utilizas otro starter theme parecido, la estructura siempre es más o menos la misma, tratándose de WordPress.
Aunque parezca mentira, lo único que se necesita para crear una plantilla de WordPress son dos archivos, el index.php y la hoja de estilos styles.css. Con estos dos archivos ya podrías crear tu propio theme, por ejemplo, de una landing page.
En este caso, al ser un theme completo, tendrá muchas más partes.
A continuación, veremos las partes más importantes y explicaré cómo lo hago yo.
Vamos al lío.
Functions.php
El archivo functions.php se encarga de almacenar las funciones propias de la plantilla. Underscores ya viene con la mayoría de funciones necesarias para que no tengamos que tocar mucha cosa. En este archivo es donde podremos hacer un enqueue para agregar las fuentes que queramos usar. Quedaría algo así:
wp_enqueue_style( 'davidzamora-fonts', 'https://fonts.googleapis.com/css?family=Lato:400,900&display=swap');
Header.php
El header, que es la parte superior de una página web, suele incluir el logo y el menú de navegación. Creo que es una parte un poco complicada de hacer si no sabes CSS o JS, ya que deberás hacer el menú de navegación responsive. Por ese motivo, recomiendo que uses algún tipo de boilerplate o plantilla.
Aquí os dejo el template que aparece en su mismo repositorio del archivo header.php.
https://github.com/Automattic/_s/blob/master/header.php
Si no quieres complicarte mucho la vida, simplemente copia y pega el código en el archivo header.php.
Haciendo un poco de repaso, el footer es el pie de página, donde suelen ir los créditos, enlaces de interés y algún que otro enlace blackhat (es broma). En este archivo vamos a diseñar nuestro pie de página, que se verá en todas las páginas que tengamos en nuestro WordPress.
Aquí podemos cargar cualquier script que queramos utilizar, como Google Analytics.
Ejemplo de pie de página simple (html y css).
Single.php
El archivo single.php se encarga de mostrar el loop de contenido de los posts. Hablando en cristiano, se encarga de mostrar la parte “dinámica” de un post. Aquí podemos configurar donde queremos mostrar la foto destacada, si queremos mostrar la categoría, el autor, etc.
Lo que suelo hacer en este archivo es maquetar el encabezado de los artículo a mi gusto.
Además, luego le suelo añadir algún que otro widget en la parte inferior. Por ejemplo, un pequeño plugin en php que muestra artículos relacionados.
Page.php
El archivo page.php tiene la misma funcionalidad que el archivo single.php, pero en este caso, para las páginas de WordPress.
Podemos crear una página manualmente creando un archivo con el nombre de la página en el directorio de nuestro theme.
Por ejemplo, template-pagina-contacto.php para crear una página de contacto.
Y después declararemos en el propio archivo que se trata de una plantilla:
Le podemos poner el nombre que queramos Tampleate Name: <nombre de la página>.
Index.php
El index.php se podría considerar como el pilar de la plantilla y en este caso, se utiliza como archivo estándar a mostrar. Es decir, si alguna página no tiene una plantilla asignada, permite que se muestre el loop igualmente.
CSS – Hoja de Estilos
La hoja de estilos o styles.css es el archivo donde vamos a escribir todo el código css para la maquetación del theme. La hoja de estilos de Underscores viene bastante pelada, con cuatro elementos.
Recomiendo usar Normalize.css para tener algunos estilos predefinidos y así no tener que empezar desde cero. (Simplemente copias el código CSS y lo pegas en el archivo styles.css de tu plantilla.
link a Normalize: https://necolas.github.io/normalize.css/
Front-page.php
Este archivo se encarga de mostrar la página principal de nuestro sitio. Es importante no confundir el archivo front-page.php con el archivo home.php. El archivo home.php se encarga de mostrar el blog.
Archive.php
A través del archive.php podemos personalizar las páginas de categorías, taxonomías y etiquetas.
Voy a dejar por aquí la jerarquía de plantillas que utiliza WordPress, por si a alguien le interesa el tema.
He de decir, que la primera vez que vi este diagrama no entendí ni un mojón. Pero, una vez ya sabía un poquito del tema, este mismo diagrama me ha servido de ayuda. Así que si no entiendes nada al principio, tranquilo, es normal.
Antes de hacer el diseño de tu theme
Antes de hacer el diseño de la página siempre hago un pequeño MockUp. Para mí, hacer primero un esbozo de la página es fundamental y me ahorra un montón de trabajo. Creo que para planificar el diseño es algo esencial.
Desplegar en servidor / hosting
Una vez tengo el theme completamente diseñado y desarrollado en el servidor de pruebas lo importo con algún plugin como All in one WP Import. Si la página es muy pesada, por ejemplo, en el caso de migraciones, recomiendo usar otro plugin como Duplicator. Si no, a malas siempre lo puedes hacerlo a mano.
Por cierto, si no sabes que hosting contratar, te recomiendo trollihosting.
Bonus tip:
Evidentemente, cuesta más trabajo hacer una página de esta manera, pero hay algunos trucos muy sencillos para agilizar este tipo de diseños. Una cosa que funciona muy bien es tener una plantilla predefinida con algunos archivos ya maquetados, como por ejemplo, el header (así nos ahorramos todo el tema del menú responsive), el footer, el blog, páginas de categorías, etc.
Conclusión
Y hasta aquí uno de mis métodos para cobrar más dinero por un diseño WordPress, con el que he podido facturar 3.500€ por una página web en WordPress.
Supongo que te habrás dado cuenta de que no es algo fácil. Hacer una plantilla personalizada con un starter theme requiere su tiempo. Por eso recomiendo mirar el repositorio de github de underscores, donde aparece toda la documentación.
https://github.com/Automattic/_s/
Este método me ha ayudado mucho a mejorar como diseñador web y me ha servido para aprender algunos principios básicos de PHP y de desarrollo en WordPress. De hecho, me atrevería a decir que ha sido el precursor de mis inicios como desarrollador web.
¿Te has quedado con alguna duda? Pregúntame lo que quieras en los comentarios, seguro que Ivan está agradecido (por el engagement y eso) y yo te contestaré encantado, un saludo!
Es un placer tener la oportunidad de escribir en el blog de SEO del Norte. Un saludo y espero que os guste.
Holaa! que tal es ese tema de underscore para montar un woocommerce para una tienda virtual?? Vale la pena? Gracias
Hola! A mi personalmente me encanta este starter theme para hacer una tienda virtual, además en la propia página de underscores puedes seleccionar que venga preparado con un boilerplate para WooCommerce. Aunque reconozco que no es para todo el mundo, has de saber un poco de html, css y php. Espero que te sirva!
Muy bueno. Cuando comentas que haces diseños wordpress a medida cuanto sueles tardar en hacerlo? siempre utilizas underscores como starter theme o hay otra plantilla que uses? Un saludo
Hola Pau, el tiempo que se tarda en hacer un diseño de este tipo es muy relativo, ya que dependerá de varios factores como el tamaño de la página, la complejidad, el nivel de personalización, etc. Por norma general, yo suelo tardar entre 2 y 4 semanas en hacer un WordPress a medida de este tipo, de una página web informativa o un blog. Respondiendo tu otra pregunta, normalmente suelo usar underscores si trabajo con WordPress. Aunque a veces también he utilizado Generatepress y algún child theme de studiopress. Espero que te sirva, un saludo!
Gracias chamo, esta semana me monto a aprender este tema ….