Cómo crear tus propios temas para WordPress

Creando un tema desde cero para WordPress parte 1: Consideraciones previas

A día de hoy WordPress es el CMS más utilizado para el desarrollo de páginas web, superando el 26% de cuota de mercado. En este blog he hablado en otras ocasiones sobre su popularidad, flexibilidad, versatilidad, etc…

Como sabrás WordPress funciona con temas (themes). Los hay para todos los gustos, gratis, de pago y freemium, enfocados a una temática concreta o multipropósito (multidespropósito como yo digo, pero esto quizá para otro post…) y en esta entrada inicio una serie de artículos para ver cómo crear tu propio tema de WordPress desde cero.

temas

Realizar un tema WordPress desde cero creo que es la mejor opción cuando tienes unas necesidades específicas y concretas, ya sea que quieres un diseño original, o ya sea una funcionalidad concreta. Es un traje a medida, y si lo haces bien tendrás una página personalizada, original, exclusiva y de un rendimiento óptimo.

El plugin de ecommerce más fácil de usar para WordPress

Lo primero que hay que hacer es realizar un planteamiento de cómo vamos a desarrollar el tema desde cero, y qué elementos, librerías, imágenes, funcionalidades, etc… necesitaremos.

Éste paso es el más importante. Organizarse bien desde un principio repercutirá en tu productividad y tiempos de desarrollo. Siempre es mejor invertir, que no perder, unas horas en realizar un buen planteamiento, una buena base a la larga te hará obtener óptimos resultados.

temas wordpress

Básicamente un tema de WordPress es una carpeta que contendrá archivos .php, .js, .css, etc… En realidad, lo mínimo que necesitarías para crear un tema son dos archivos: una hoja de estilos llamada style.css y un archivo index.php, pero vamos a ver cómo organizar mejor un tema.

Lo ideal es crear una estructura de carpetas dentro de la carpeta “mi-tema” para organizar nuestros archivos, por ejemplo:

  • css: para las hojas de estilo
  • js: para los archivos js
  • img: para las imágenes
  • fonts: para incluir fuentes
  • languages: para los archivos .po y .mo en caso de que nuestro tema sea multi-idioma
  • inc: para archivos php auxiliares

A continuación debes plantear si vas a usar frameworks o librerías de terceros en tu tema. Por ejemplo bootstrap, Font Awesome, Isotope, Mansonry, etc…Si es así descárgalos e incluye los archivos .css en la carpeta css, los archivos .js en la carpeta js, etc…y en el siguiente artículo veremos cómo usarlos en nuestro tema. Muchas de estas librerías disponen de CDN propio por si quieres cargarlas desde ahí en lugar de incluirlas físicamente en tu tema.

Ten en cuenta que WordPress incluye scripts como Scriptaculous, Image Cropper, jQuery, jQuery UI, Color Picker, etc…la lista completa la puedes ver aquí.

Por último, debes pensar algo acerca de la optimización y rendimiento del sitio. Puedes usar Grunt o Gulp para realizar tareas como concatenar y minificar tus CSS y JS, optimizar imágenes, etc…

Una vez tengas el esqueleto del proyecto, el siguiente paso es construir el tema, sobre lo que hablo en el siguiente artículo.

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

11 comentarios en Creando un tema desde cero para WordPress parte 1: Consideraciones previas

  1. Hola amigo una consulta, veo que la pagina principal de tu web tiene contenido de pagina y mas abajo entradas normales, me podria decir por favor si abra alguna plantilla que haga eso? porque solo veo que todas tienen las opciones de mostrar solo PAGINAS «o» ENTRADAS, o quizas haya algun codigo o script que se pueda incluir para poder tenerlo como usted? espero su ayuda amigo muchas gracias

    1. Hola Victor

      El tema que he utilizado en mi blog es un tema desarrollado a medida. Creé un template que asigné a la página de inicio. En ese template muestro el contenido de la página y debajo hago una query a los 10 últimos posts

      Saludos

  2. Hola, que tal. Muy buen tutorial, sobre todo ilustrativo. Entiendo que el theme se conforma con algunos archivos y carpetas. Pero en dónde hay que guardar ese contenido? Ahora, para que yo pueda irlo actualizando desde mi computadora, entiendo que solo voy a subir estos archivos modificados y solo eso, ¿es verdad? Ya que toda la instalación de WordPress está alojado en el servidor. Espero me puedas resolver la duda. Saludos y felicidades.

    1. Hola Fernando

      Los temas en WordPress van en la ruta /wp-content/themes/. Si realizas una modificación en un archivo de tu tema, te bastaría con subir sólo ese fichero en su ruta correspondiente

      Saludos

      1. Ok, muchas gracias… entonces mi proyecto contendrá (lo que tengo en mi computadora, en el GIT, en lo que subiría por FTP al servidor, etc) únicamente los archivos dentro de /wp-content/themes/mi-tema, no tengo que preocuparme por nada más, cierto?
        Lo pregunto porque estoy acostumbrado a hacer proyectos usando NODE solo para la fase de desarrollo en un esquema de archivos similar a :

        source
        source / js
        source / scss
        www
        www/css
        www/js
        www/fonts
        gulpfile.js
        package.json
        etc etc etc

        Es decir, uso gulp para transpilar sccs a css, minificar js, etc
        Y lo único que tendria que preocuparme por subir es la carpeta www a /wp-content/themes/mi-tema
        ¿Cierto?

        1. Eso es. Luego tu tema lo puedes estructurar como quieras. Es decir, en la raíz puedes tener los templates (index.php, header.php, footer.php, functions.php, etc…) y después una carpeta assets para los CSS y JS, una carpeta includes, una carpeta images, etc… ya es cuestión de cómo te organices mejor

          De todos modos, en el theme developer handbook tienes información más detallada al respecto: https://developer.wordpress.org/themes/getting-started/

  3. Hola, Buen dia, estuve mirando wordpress y tengo algunas dudas, necesito hacer una pagina web para un centro y pues se piensa agregar bastantes cosas a medida que pasa el tiempo, mi pregunta es¿ que es mejor hacer, editar un tema padre haciendo un ( tema hijo) o hacer directamente una plantilla totalmente nueva?.. y con esto, en cuanto a seguridad si yo llego a hacer una plantilla, wordpress me proporciona la seguridad de mi sitio o yo debo implementarle la seguridad?

    1. No hay una fórmula mágica, al final depende de tus necesidades o de con qué te encuentras más cómodo. Si fuera yo tiraría por hacer un tema a medida, a no ser que encontrara un tema que me cubra un porcentaje alto de lo que quiero conseguir.

      Respecto a la seguridad: WordPress es seguro. No obstante siempre puedes fortalecer tu instalación con medidas adicionales. Algunos consejos: https://desarrollowp.com/tag/seguridad/, https://ayudawp.com/tag/seguridad/

      Saludos

      1. SI, por que pues no hay una que este pues a la necesidad, una pregunta, wordpress, bueno si yo manejo flexbox, wordpress no me pondra problema ala hora de yo subir mi plantilla ? ¿algunos requerimientos o consejos que pueda darme? soy nuevo en esto y me gustaria aprender y pues no cometer errores ya que la pagina es para una tienda, gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *:

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios