Instalación de UnderScores Primer Tema WP Autodidacta


Empezamos a crear nuestro tema desde “cero”. Usando Underscores ahorramos las primeras 1000 horas

¿Qué es y cómo hacemos la instalación de UnderScores?

UnderScores es, antes que nada, un tema para WordPress. Este es un tema especial, ya que podríamos decir que es un tema vacío.  Aunque parezca que esto puede suponer un problema, permite a sus usuarios desarrollar un tema desde cero, o casi, ya que lo que sí tiene UnderScores es la estructura de ficheros y carpetas para que podamos desarrollar nuestro tema sobre él estando seguros de que está totalmente optimizado, tiene un código que respeta todas las indicaciones de WordPress, está profusamente documentado y es muy rápido.


Como dicen sus desarrolladores, ahorraremos las primeras 1.000 horas de crear código y tendremos siempre la última versión optimizada.


Underscores ha sido concebido para que el desarrollador modifique su código hasta adaptarlo a sus necesidades sin tener que soportar la adaptación que otros temas obligan a hacer si necesitas que haga algo para lo que no estuvo pensado. UnderScores es un tema totalmente abierto, que no te transmite obligaciones con el diseño. Sobre él podemos crear todas las funcionalidades y estilos que queramos.

Si genera un tema vacío, ¿para qué sirve entonces?

Su verdadera virtud se centra en ofrecernos una estructura funcional mínima a la vez que fundamental para que podamos tener en funcionamiento todas las tareas que tiene que hacer un tema: publicar, modificar, borrar, organizar categorías y etiquetas, utilizar el buscador integrado, generar los ficheros php básicos, todo adaptado al nombre de nuestro sitio y con los datos básicos de autor, url del autor, slug. 

Con Underscores podemos estar seguros que nos va a generar el código más actualizado y con las características y peculiaridades que exigen el estándar más riguroso. UnderScores fue desarrollado por Automattic (la empresa de WordPress.com y la principal contribuyente a WordPress.org) y a cuyo proyecto se han sumado los más prestigiosos expertos que colaboran continuamente con este proyecto abierto que te proporcionará el esqueleto y los cimientos de tu tema.

¿Qué opciones tiene UnderScores?

Con la mejora continua de las diferentes versiones, Underscores ha comprendido que muchos desarrolladores hacen su trabajo utilizando Sass o necesitan crear un tema para el comercio electrónico. Por eso también nos propone, adicionalmente, crear la estructura de Sass y la de WooCommerce.  Así pues, podremos elegir que nos genere la estructura de tres formas, como un tema clásico, como un tema a desarrollar empleando Sass o prepararlo para funcionar con WooCommerce.

Instalación de UnderScores

Vamos con la instalación de UnderScores

Solo tienes que cumplimentar las cinco preguntas que te hace:

  •  Nombre que vas a darle al tema
  • El Slug (nombre que comprende la máquina, no tiene que llevar acentos, espacios ni símbolos que no sean los estándar.
  • El Nombre del Autor
  • La Url del Autor por si alguien necesita contactar con él
  • Una Descripción de lo que el tema hace o a qué va destinado
  • Si lo quieres generar preparado para Woocommerce.
  • Si quieres que genere las características para trabajar con Sass.

Ahora solo te queda pulsar en Generar y te va a crear un archivo zip con el nombre que le pusiste a tu tema. Ya tienes la estructura de tu tema en tu ordenador, solo te queda instalarlo en tu sitio como si se tratase de un tema más y activarlo. Ojo, verás que funciona, pero que no tiene estilos y se ve un poco feo.

Para el desarrollo mejor en un servidor local

Mejor que estar haciendo pruebas en un sitio en funcionamiento, es aconsejable de montar un servidor en local, en nuestro propio ordenador donde haremos todas las pruebas y modificaciones necesarias hasta que tenga un comportamiento satisfactorio. Entonces lo podremos subir a nuestro hosting y activarlo para que funcione normalmente.

Para montar un servidor local no vamos a necesitar nada especial, solo decidirnos por algunos de los programas gratuitos que preparan el servidor en nuestro pc e instalaran la última versión de WordPress y de PHP.

Para mi son tres las principales opciones, Xampp El de toda la vida, , Mamp Especialmente indicado para los usuarios de Apple y Local by Flyweelel último y más fácil de utilizar que conozco.

Empecé instalando Xampp y por la configuración del puerto 8080 de mi pc no me funcionaba bien, por lo que finalmente opté por montar Local by Flyweel que funciona genial, te proporciona una cuenta de mail para tu WordPress y además instala un certificado SSL. Puedes crear infinidad de sitios y lo tienes todos centralizados.

Instalando Local by Flyweel

Bien, mejor que escribir una parrafada, te dejo aquí un vídeo con las instrucciones para montar LbF en tu pc y poner en marcha tu sitio WordPress.

Instalar WordPress en Local by Flywheel

Creamos nuestro sitio en local e instalamos WordPress

Bueno, ya tenemos nuestro servidor local en funcionamiento, solo falta ajustar un poco la instalación de WordPress, poner tu email, o utilizar el que te propone LbF, asegurarnos que estamos utilizando la última versión de PHP y que esté instalado el certificado SSL.

Ahora ya podemos entrar en el área de administración y comenzar a trabajar con nuestro proyecto.

Lo primero que hago es eliminar los temas que se instalan por defecto, excepto el twenty seventeen ya que algún tema tenemos que tener instalado por si algo falla y poder activarlo y no tener que trabajar con la pantalla blanca de la muerte que nos muestra WordPress cuando algo falla.

Añadimos nuestro tema creado con UnderScores

Bien, es el momento de acceder a la opción de Apariencia -> Temas (Se supone que antes tenemos que realizar los Ajustes del sitio, idioma, logo, formato de fechas, etc.)

Seleccionamos Añadir Nuevo y subimos el fichero zip que nos generó UnderScores. Luego seleccionamos ese tema y lo activamos.

Listo, vas a ver tu sitio prácticamente sin estilos, pero bien organizado. Ahora que tenemos la estructura solo nos queda ponernos a la tarea.

Llegados a este punto vas a ver que existen tres escuelas:

Underscores & Foundation – La plataforma preparada para desarrollar con velocidad
UnderScores & BootStrap – Otra plataforma preparada para el desarrollo con velocidad.

Instalar Show Current Template

Una última cosa. Al menos yo al principio me he encontrado con el problema de no saber que fichero estaba usando WordPress para mostrar el contenido, lo cual me ha hecho perder una gran cantidad de tiempo, consultandolo por Internet o utilizando el sistema bruto de ir editando los archivos que creía más problable y colocandole un h2 ·”Hola, soy single.php” y cosas por el estilo. Una gran pérdida de tiempo.

Por suerte hace poco descubrir este plugin que te resuelve el problema ya que te muestra en la barra de administración, no solo el fichero que está utilizando, sino todas las llamadas que este hace a otros ficheros de los que depende. Instálalo, apenas consume y te será de gran ayuda.

El plugin es Show Current Template , es gratuito tiene más de 50.000 instalaciones y todas las criticas de 5 estrellas.

Pequeño vídeo, aunque está en inglés es fácil de entender, Instalación de Show Current Template

Ahora ya tenemos la instalación preparada para crear nuestro tema

Bien, ya hemos acabado con la instalación de UnderScores Cómo en la Meetup a la que pertenezco, todos somos propensos a utilizar el menor número de plugins y de frameworks posible para evitar hipotecas futuras con nuestros temas, yo he optado por desarrollar mi tema utilizando solo UnderScores con Sass. A ver que sale y cómo resuelvo los problemas que me iré encontrando. Ya sabes, si no quieres perderte ningún capítulo de este viaje, suscríbete!

CONSULTA NUESTROS ÚLTIMOS POSTS


¡Suscríbete a nuestra newsletter!

suscríbete