{"id":21659,"date":"2022-08-05T03:43:06","date_gmt":"2022-08-05T01:43:06","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=21659"},"modified":"2025-12-18T22:28:08","modified_gmt":"2025-12-18T21:28:08","slug":"crear-un-tema-de-wordpress-con-codigo","status":"publish","type":"post","link":"\/es\/tutoriales\/crear-un-tema-de-wordpress-con-codigo\/","title":{"rendered":"\u00bfC\u00f3mo crear un tema de WordPress? Gu\u00eda de 5 pasos utilizando c\u00f3digo"},"content":{"rendered":"

Un tema de WordPress te permite tener un diseño consistente para tus páginas y entradas, cambiando la apariencia de todo el sitio web. Dicho esto, instalar un tema de WordPress prefabricado<\/a> podría impedirte tener un control total sobre su funcionalidad y diseño. <\/p>

Por suerte, puedes crear un tema de WordPress desde cero, para personalizar completamente tu sitio web de WordPress como desees. Además, crear tu propio tema de WordPress personalizado ayuda a reducir el desorden de código en los archivos del tema y a mejorar el rendimiento del sitio.<\/p>

Sin embargo, necesitarás tener algunos conocimientos básicos de codificación para crear tu propio tema, ya que tiene que estar escrito en PHP, HTML, CSS y Javascript. Por lo tanto, este tutorial te mostrará cómo crear un tema de WordPress utilizando HTML5 y CSS3. <\/p>

Descarga la hoja de trucos HTML definitiva<\/a><\/p>

¿Qué es un diseño responsivo?<\/h2>

Los dispositivos suelen tener diferentes pantallas y cada una de ellas varía en color, funcionalidad y resolución. Algunos funcionan en modo horizontal, mientras que otros lo hacen en modo vertical. Además, muchos dispositivos pueden alternar entre estos modos.<\/p>

Por esta razón, es primordial crear una plantilla de WordPress personalizada que responda a varias resoluciones de pantalla.<\/p>

El diseño responsivo (responsive en inglés) consiste en mostrar tu sitio web en el mejor formato para los visitantes en función del tamaño de su pantalla. El diseño de la página responde al espacio disponible y el contenido se coloca correctamente: nada queda cortado, desbordado y tu sitio web tiene un aspecto lo más limpio posible.<\/p>

Para medir la alineación responsiva de tu diseño, debes pensar en el diseño de tu sitio web como una serie de cuadrículas en lugar de píxeles (px). Luego, divide el ancho de las cuadrículas para cada sección de contenido en porcentajes (%).<\/p>

En el caso de las imágenes, puedes configurarlas con el ancho máximo: 100% de su tamaño real y la altura en automático. La anchura y la altura de la imagen se ajustarán automáticamente cuando se reduzca el tamaño de la pantalla. Así, si colocas una imagen de 200px de ancho dentro de un div <\/strong>que ocupa el 100% de la pantalla, se mantendrá en su ancho real.He aquí un ejemplo de buena y mala <\/strong>sintaxis para construir un diseño responsivo:<\/p>

\/* GOOD WIDTH *\/\n.inline-text-box {\n  width: 50%;\n}\n\/* BAD WIDTH *\/\n.inline-text-box {\n  width: 800px;\n}\n\/* GOOD IMAGE *\/\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\/* BAD IMAGE *\/\nimg {\n  width: 100%;\n  height: auto;\n}<\/pre>
Teniendo esto en cuenta, vamos a aplicar estos principios de diseño web responsivo para crear un tema de WordPress con HTML5 y CSS3.<\/p>
5 Pasos para crear un tema de WordPress responsivo usando HTML5 y CSS3<\/h2>
HTML5<\/a> es la última versión del lenguaje de marcado web HTML que ayuda a mostrar el contenido de forma coherente en cualquier ordenador, tableta o teléfono móvil.<\/p>
Además, HTML5 ofrece una función de metaetiqueta viewport que controla la visualización de tu sitio web en cada navegador con la etiqueta <meta>, <\/strong>dentro de la etiqueta <head><\/head<\/strong>>.<\/p>
Para crear un tema de WordPress totalmente responsivo, también puedes utilizar la función CSS3 media queries. Establece reglas específicas y controla cómo se comportará tu sitio en varios tamaños de pantalla.<\/p>
Considera la posibilidad de instalar WordPress localmente cuando desarrolles un tema. Esta es una gran manera de experimentar con las de WordPress, sin preocuparte por dañar tu sitio web. Tampoco necesitas tener un nombre de dominio o alojamiento web hasta que quieras estar en línea. <\/p>
Conociendo esto, vamos a entrar en los pasos para crear un tema personalizado de WordPress. Aplicaremos tanto la etiqueta meta viewport, como las consultas de medios mientras lo construimos.<\/p>
1. Crea y almacena los archivos de plantillas<\/h3>
Por lo general, los temas de WordPress pueden crearse utilizando sólo dos archivos de plantilla en el directorio de temas: <\/p>