{"id":21659,"date":"2022-08-05T03:43:06","date_gmt":"2022-08-05T01:43:06","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-tutoriales\/?p=21659"},"modified":"2026-03-10T16:43:53","modified_gmt":"2026-03-10T15:43:53","slug":"crear-un-tema-de-wordpress-con-codigo","status":"publish","type":"post","link":"\/co\/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":"<p>Un tema de WordPress te permite tener un dise&ntilde;o consistente para tus p&aacute;ginas y entradas, cambiando la apariencia de todo el sitio web. Dicho esto, <a href=\"\/co\/tutoriales\/instalar-tema-wordpress\">instalar un tema de WordPress prefabricado<\/a> podr&iacute;a impedirte tener un control total sobre su funcionalidad y dise&ntilde;o.&nbsp;<\/p><p>Por suerte, puedes crear un tema de WordPress desde cero, para personalizar completamente tu sitio web de WordPress como desees. Adem&aacute;s, crear tu propio tema de WordPress personalizado ayuda a reducir el desorden de c&oacute;digo en los archivos del tema y a mejorar el rendimiento del sitio.<\/p><p>Sin embargo, necesitar&aacute;s tener algunos conocimientos b&aacute;sicos de codificaci&oacute;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&aacute; c&oacute;mo crear un tema de WordPress utilizando HTML5 y CSS3.&nbsp;<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ES-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Descarga la hoja de trucos HTML definitiva<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-que-es-un-diseno-responsivo\">&iquest;Qu&eacute; es un dise&ntilde;o responsivo?<\/h2><p>Los dispositivos suelen tener diferentes pantallas y cada una de ellas var&iacute;a en color, funcionalidad y resoluci&oacute;n. Algunos funcionan en modo horizontal, mientras que otros lo hacen en modo vertical. Adem&aacute;s, muchos dispositivos pueden alternar entre estos modos.<\/p><p>Por esta raz&oacute;n, es primordial crear una plantilla de WordPress personalizada que responda a varias resoluciones de pantalla.<\/p><p>El dise&ntilde;o responsivo (responsive en ingl&eacute;s) consiste en mostrar tu sitio web en el mejor formato para los visitantes en funci&oacute;n del tama&ntilde;o de su pantalla. El dise&ntilde;o de la p&aacute;gina responde al espacio disponible y el contenido se coloca correctamente: nada queda cortado, desbordado y tu sitio web tiene un aspecto lo m&aacute;s limpio posible.<\/p><p>Para medir la alineaci&oacute;n responsiva de tu dise&ntilde;o, debes pensar en el dise&ntilde;o de tu sitio web como una serie de cuadr&iacute;culas en lugar de p&iacute;xeles (px). Luego, divide el ancho de las cuadr&iacute;culas para cada secci&oacute;n de contenido en porcentajes (%).<\/p><p>En el caso de las im&aacute;genes, puedes configurarlas con el ancho m&aacute;ximo: 100% de su tama&ntilde;o real y la altura en autom&aacute;tico. La anchura y la altura de la imagen se ajustar&aacute;n autom&aacute;ticamente cuando se reduzca el tama&ntilde;o de la pantalla. As&iacute;, si colocas una imagen de 200px de ancho dentro de un <strong>div <\/strong>que ocupa el 100% de la pantalla, se mantendr&aacute; en su ancho real.He aqu&iacute; un ejemplo de <strong>buena y mala <\/strong>sintaxis para construir un dise&ntilde;o responsivo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* 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><p>Teniendo esto en cuenta, vamos a aplicar estos principios de dise&ntilde;o web responsivo para crear un tema de WordPress con HTML5 y CSS3.<\/p><h2 class=\"wp-block-heading\" id=\"h-5-pasos-para-crear-un-tema-de-wordpress-responsivo-usando-html5-y-css3\">5 Pasos para crear un tema de WordPress responsivo usando HTML5 y CSS3<\/h2><p><a href=\"\/co\/tutoriales\/diferencia-entre-html-y-html5\">HTML5<\/a> es la &uacute;ltima versi&oacute;n del lenguaje de marcado web HTML que ayuda a mostrar el contenido de forma coherente en cualquier ordenador, tableta o tel&eacute;fono m&oacute;vil.<\/p><p>Adem&aacute;s, HTML5 ofrece una funci&oacute;n de metaetiqueta viewport que controla la visualizaci&oacute;n de tu sitio web en cada navegador con la etiqueta <strong>&lt;meta&gt;, <\/strong>dentro de la etiqueta <strong>&lt;head&gt;&lt;\/head<\/strong>&gt;.<\/p><p>Para crear un tema de WordPress totalmente responsivo, tambi&eacute;n puedes utilizar la funci&oacute;n CSS3 media queries. Establece reglas espec&iacute;ficas y controla c&oacute;mo se comportar&aacute; tu sitio en varios tama&ntilde;os de pantalla.<\/p><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&ntilde;ar tu sitio web. Tampoco necesitas tener un nombre de dominio o alojamiento web hasta que quieras estar en l&iacute;nea.&nbsp;<\/p><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><h3 class=\"wp-block-heading\">1. Crea y almacena los archivos de plantillas<\/h3><p>Por lo general, los temas de WordPress pueden crearse utilizando s&oacute;lo dos archivos de plantilla en el directorio de temas:&nbsp;<\/p><ul class=\"wp-block-list\">\n<li><strong>index.php:<\/strong> prepara una plantilla para que el tema muestre su contenido.<\/li>\n\n\n\n<li><strong>style.css: <\/strong>gestiona el aspecto visual del tema.<\/li>\n<\/ul><p>Sin embargo, el desarrollo de un tema de WordPress tambi&eacute;n requerir&aacute; varios archivos de apoyo para a&ntilde;adir m&aacute;s flexibilidad a la hora de personalizarlo. Esos archivos de plantilla incluyen:<\/p><ul class=\"wp-block-list\">\n<li><strong>header.php:<\/strong> contiene cualquier HTML que vaya en la parte superior de tus p&aacute;ginas, empezando por <strong>&lt;!DOCTYPE html<\/strong>&gt;.<\/li>\n\n\n\n<li><strong>footer.php:<\/strong> contiene el HTML que va en la parte inferior de tu sitio web, incluyendo <strong>&lt;\/html<\/strong>&gt;.<\/li>\n\n\n\n<li><strong>functions.php:<\/strong> a&ntilde;ade funcionalidad al tema, desde men&uacute;s y colores hasta scripts y hojas de estilo.<\/li>\n\n\n\n<li><strong>sidebar.php<\/strong>: genera elementos de la barra lateral.<\/li>\n\n\n\n<li><strong>single.php:<\/strong> muestra una sola entrada de una p&aacute;gina en particular.&nbsp;<\/li>\n\n\n\n<li><strong>page.php:<\/strong> muestra el contenido de una sola p&aacute;gina.<\/li>\n<\/ul><p>Como desarrollador de temas, eres libre de personalizar cada archivo de plantilla. WordPress elegir&aacute; y generar&aacute; plantillas basadas en la jerarqu&iacute;a de plantillas. Lo navegar&aacute; hasta encontrar un archivo que coincida y en consecuencia, mostrar&aacute; la p&aacute;gina.&nbsp;Teniendo esto en cuenta, crea una nueva carpeta para los componentes dentro de tu carpeta de <strong>temas <\/strong>de WordPress,<strong> <\/strong>antes de crear un tema de WordPress desde cero.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p> El nombre de la carpeta no debe ser el mismo que el de otro tema. Adem&aacute;s, si piensas compartir tu trabajo, comprueba que no hay ning&uacute;n tema con el mismo nombre en el <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">directorio de temas<\/a> de WordPress.org. <\/p>\n                <\/div><\/p><p>Una vez que tengas una carpeta para almacenar el tema, crea los archivos esenciales de la plantilla de WordPress. Cada archivo de plantilla PHP debe utilizar el nombre correcto tal y como se define en la documentaci&oacute;n de WordPress.<\/p><p>Considera que para hacer diferentes dise&ntilde;os para tus posts, p&aacute;ginas y otras partes de tu sitio web, tienes que crear plantillas separadas que contengan HTML5 y PHP, que se apliquen a cada secci&oacute;n.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p> Si deseas utilizar tipos de entradas personalizadas, puedes crear plantillas que s&oacute;lo se apliquen a las entradas de ese tipo. Sin embargo, si quieres que las entradas de una categor&iacute;a espec&iacute;fica tengan estilos diferentes, utiliza declaraciones &ldquo;if-then&rdquo; dentro del bucle. <\/p>\n                <\/div><\/p><p>Ahora, vamos a los pasos:&nbsp;<\/p><ol class=\"wp-block-list\">\n<li>Accede a la secci&oacute;n del <strong>Administrador de Archivos <\/strong>en tu <a href=\"\/co\/tutoriales\/tutorial-hpanel\">hPanel<\/a>. A continuaci&oacute;n, dir&iacute;gete a <strong>public_html -&gt; wp-content -&gt; carpeta themes<\/strong>.<\/li>\n\n\n\n<li>Crea una nueva carpeta. Ten en cuenta que la carpeta debe tener un nombre &uacute;nico, descriptivo y corto. No utilices n&uacute;meros ni espacios.<\/li>\n\n\n\n<li>Utilizaremos <strong>&ldquo;my theme&rdquo; <\/strong>en este ejemplo.&nbsp;<\/li>\n\n\n\n<li>Primero vamos a crear las plantillas personalizadas y nos centraremos en el contenido m&aacute;s adelante. Los archivos incluyen <strong>header.php<\/strong>, <strong>index.php<\/strong>, <strong>footer.php<\/strong>, <strong>functions.php<\/strong>, <strong>sidebar.php<\/strong>, <strong>single.php <\/strong>y <strong>page.php<\/strong><\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"272\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/admin-de-archivos.png\" alt=\"Interfaz de WordPress para la carpeta temas\" class=\"wp-image-42001\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/admin-de-archivos.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/admin-de-archivos-300x80.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/admin-de-archivos-150x40.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/admin-de-archivos-768x204.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Ahora que tienes todos los archivos de la plantilla PHP listos, pasemos a configurar la hoja de estilos CSS.<\/p><h3 class=\"wp-block-heading\">2. Configura la hoja de estilos CSS inicial<\/h3><p><a href=\"\/co\/tutoriales\/codigos-css-cheat-sheet\">Las hojas de estilo CSS<\/a> controlan el dise&ntilde;o visual y la disposici&oacute;n de las p&aacute;ginas del sitio web. Cada tema de WordPress necesita una hoja de estilos para mostrar elementos como las fuentes y los colores. Sin un archivo CSS, WordPress no reconocer&aacute; tu tema personalizado como v&aacute;lido.<\/p><p>Con esto en mente, crea un archivo de hoja de estilo en la misma carpeta del tema. A&ntilde;ade la informaci&oacute;n necesaria, incluyendo el nombre del tema, la versi&oacute;n, la descripci&oacute;n y el autor en la parte superior del archivo <strong>style.css<\/strong>. WordPress mostrar&aacute; estos datos en el panel de control del administrador.&nbsp;<\/p><p>La informaci&oacute;n debe ser escrita como un comentario CSS de varias l&iacute;neas. Cada cabecera en su propia l&iacute;nea, comenzando con una palabra clave. Encuentra la lista completa de palabras clave de cabecera para los temas en la p&aacute;gina <a href=\"https:\/\/codex.wordpress.org\/File_Header#Theme\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Codex &ndash; File Header<\/a>.&nbsp;<\/p><p>He aqu&iacute; un ejemplo: <\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\nTheme Name: My Theme\nAuthor: Hostinger\nAuthor URI: https:\/\/www.hostinger.com\/es\/tutoriales\/\nDescription: Mi primer tema responsivo de HTML5\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/pre><p><div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p> Las dos &uacute;ltimas l&iacute;neas son necesarias si deseas compartir tu tema en WordPress.org. Si vas a utilizar el tema para tu propio sitio web de WordPress, no es necesario que las incluyas. <\/p>\n                <\/div><\/p><p>En este punto, tu tema ya ser&aacute; visible en tu panel de control de WordPress. Ve a <strong>Apariencia -&gt; Temas <\/strong>y ver&aacute;s <strong>My theme <\/strong>con una imagen de caja de verificaci&oacute;n blanca y gris.&nbsp;&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/temas-wp.png\" alt=\"Secci&oacute;n de temas en WordPress\" class=\"wp-image-42003\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/temas-wp.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/temas-wp-300x139.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/temas-wp-150x69.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/temas-wp-768x356.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Sin embargo, obtendr&aacute;s una p&aacute;gina de inicio en blanco si activas el tema. Esto se debe a que tu archivo <strong>index.php <\/strong>est&aacute; vac&iacute;o y no hay plantillas disponibles.&nbsp;A&ntilde;ade una &uacute;nica regla al archivo CSS que cambie el color de fondo de la p&aacute;gina. Inserta una l&iacute;nea en blanco despu&eacute;s del cierre del comentario <strong>*\/ <\/strong>en la d&eacute;cima l&iacute;nea. A continuaci&oacute;n, pega el siguiente c&oacute;digo debajo de ella:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n  box-sizing: border-box;\n}\nbody {\n    background-color: #f9f9f9;\n    font-family: Helvetica;\n}<\/pre><p>Entendamos este c&oacute;digo desglos&aacute;ndolo.&nbsp;<\/p><p>La primera entrada es una parte importante del estilo responsivo. <strong>&lt;*&gt; <\/strong>&nbsp;o el s&iacute;mbolo del asterisco, coincide con cada elemento del documento HTML. Establece que la anchura y la altura finales de cada elemento de la p&aacute;gina deben incluir el contenido, el relleno y el borde. Por lo tanto, esta regla a&ntilde;ade efectivamente el relleno dentro de la caja en lugar de fuera de ella.<\/p><p>Mientras tanto, el segundo elemento cambia el color de fondo a blanco y establece la fuente por defecto que se utilizar&aacute; en el tema.<\/p><p>Ten en cuenta que el c&oacute;digo anterior s&oacute;lo a&ntilde;ade elementos b&aacute;sicos a tu tema personalizado. Volveremos al archivo <strong>style.css <\/strong>una vez que hayamos configurado los otros archivos y la estructura general del sitio web est&eacute; lista.<\/p><h3 class=\"wp-block-heading\">3. Haz que el tema de WordPress sea funcional<\/h3><p>Antes del proceso de desarrollo del tema de WordPress, te recomendamos a&ntilde;adir algunos fragmentos de c&oacute;digo a los archivos <strong>functions.php <\/strong>y <strong>sidebar.php, <\/strong>para mejorar la flexibilidad del tema. Por ejemplo, a&ntilde;adir &aacute;reas con widgets o crear <a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/featured-images-post-thumbnails\/\" target=\"_blank\" rel=\"noreferrer noopener\">miniaturas de publicaciones e im&aacute;genes destacadas<\/a> en p&aacute;ginas espec&iacute;ficas.<\/p><p><strong>functions.php<\/strong><\/p><p>Cada navegador tiene diferentes configuraciones por defecto para elementos como los m&aacute;rgenes y el relleno de la p&aacute;gina. Por ello, debes realizar una normalizaci&oacute;n de CSS para asegurarte de que tu tema tiene el mismo estilo y comportamiento en todos los navegadores.&nbsp;<\/p><p>Para conseguirlo, incluye un archivo CSS llamado <strong>normalize.css <\/strong>en tu archivo <strong>functions.php<\/strong>. Este archivo permitir&aacute; que los navegadores muestren tu sitio de forma consistente, independientemente de esos elementos.Para crear uno, inserta el siguiente c&oacute;digo en <strong>functions.php<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\/\/ This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we\n\/\/ use an online version of the css file.\nfunction add_normalize_CSS() {\n   wp_enqueue_style( 'normalize-styles', \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css\");\n}\nadd_action('wp_enqueue_scripts', 'add_normalize_CSS');<\/pre><p>Este c&oacute;digo har&aacute; que WordPress elija el archivo <strong>normalize.css <\/strong>de la <a href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css\" target=\"_blank\" rel=\"noreferrer noopener\">fuente adjunta<\/a>.&nbsp;<\/p><p>A continuaci&oacute;n, activa los widgets de la barra lateral a&ntilde;adiendo el siguiente c&oacute;digo despu&eacute;s de la funci&oacute;n anterior:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Register a new sidebar simply named 'sidebar'\nfunction add_widget_support() {\n               register_sidebar( array(\n                               'name'          =&gt; 'Sidebar',\n                               'id'            =&gt; 'sidebar',\n                               'before_widget' =&gt; '&lt;div&gt;',\n                               'after_widget'  =&gt; '&lt;\/div&gt;',\n                               'before_title'  =&gt; '&lt;h2&gt;',\n                               'after_title'   =&gt; '&lt;\/h2&gt;',\n               ) );\n}\n\/\/ Hook the widget initiation and run our function\nadd_action( 'widgets_init', 'add_widget_support' );<\/pre><p><div><p class=\"important\"><strong>&iexcl;Importante!<\/strong> Si omites este fragmento de c&oacute;digo, el enlace del men&uacute; de widgets no ser&aacute; visible en el panel de control del administrador y no podr&aacute;s a&ntilde;adir ning&uacute;n <a href=\"\/co\/tutoriales\/que-es-widget-wordpress\">widget<\/a>.<\/p><\/div><\/p><p>Luego, registra un men&uacute; de navegaci&oacute;n personalizado para activar la funci&oacute;n <strong>Apariencia -&gt; Men&uacute;<\/strong>. A&ntilde;ade el siguiente c&oacute;digo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Register a new navigation menu\nfunction add_Main_Nav() {\n  register_nav_menu('header-menu',__( 'Header Menu' ));\n}\n\/\/ Hook to the init action hook, run our navigation menu function\nadd_action( 'init', 'add_Main_Nav' );<\/pre><p>Una vez hecho esto, <strong>guarda y cierra <\/strong>el archivo.<\/p><p><strong>sidebar.php<\/strong><\/p><p>Lo siguiente que hay que tener en cuenta al crear tu propio tema de WordPress es la visualizaci&oacute;n de las barras laterales. Para ello, utiliza la funci&oacute;n <strong>get_sidebar(). <\/strong>Esta permite que la barra lateral y los widgets aparezcan en cualquier lugar de tu tema.<\/p><p>Inserta el siguiente c&oacute;digo en el archivo <strong>sidebar.php<\/strong>. A continuaci&oacute;n, guarda los cambios.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php if ( is_active_sidebar( 'sidebar' ) ) : ?&gt;\n  &lt;aside id=\"primary-sidebar\" class=\"primary-sidebar widget-area\" role=\"complementary\"&gt;\n    &lt;?php dynamic_sidebar( 'sidebar' ); ?&gt;\n  &lt;\/aside&gt;\n&lt;?php endif; ?&gt;<\/pre><p>La primera l&iacute;nea le dice a WordPress que si no hay barra lateral, no debe mostrarse. La segunda establece los atributos del elemento que contiene los widgets. Mientras tanto, la tercera l&iacute;nea es la funci&oacute;n de WordPress para mostrar la barra lateral.<\/p><h3 class=\"wp-block-heading\">4. Construye un dise&ntilde;o para tu tema personalizado<\/h3><p>Ahora pasaremos a crear el dise&ntilde;o de tu tema de WordPress modificando los archivos <strong>header.php<\/strong>, <strong>index.php, footer.php<\/strong>, <strong>single.php<\/strong>, <strong>page.php<\/strong>, <strong>style.php <\/strong>usando media queries.<\/p><p><strong>header.php<\/strong><\/p><p>El archivo <strong>header.php <\/strong>definir&aacute; la parte superior de tu documento. Este debe tener:<\/p><ul class=\"wp-block-list\">\n<li><strong>La declaraci&oacute;n DOCTYPE:<\/strong> indica al navegador web c&oacute;mo interpretar el documento.<\/li>\n\n\n\n<li><strong>Funci&oacute;n language_attributes():<\/strong> introduce el c&oacute;digo del idioma elegido durante la instalaci&oacute;n en la apertura de la etiqueta <strong>&lt;html<\/strong>&gt;.<\/li>\n\n\n\n<li><strong>Elementos de cabecera HTML &lt;head&gt;&lt;\/head&gt;:<\/strong> es donde se almacenan los metadatos. Son las etiquetas <strong>&lt;title&gt;&lt;\/title&gt; <\/strong>, <strong>&lt;meta&gt;&lt;\/meta&gt; <\/strong>, <strong>&lt;link&gt;&lt;\/link<\/strong>&gt;, la etiqueta <strong>is_front_page() <\/strong>junto con las funciones <strong>bloginfo() <\/strong>dentro de ella y el gancho de acci&oacute;n <strong>wp_head()<\/strong>.<\/li>\n\n\n\n<li><strong>Funci&oacute;n body_class():<\/strong> da a tu cuerpo las clases CSS por defecto, establecidas por WordPress.<\/li>\n\n\n\n<li><strong>wp_nav_menu ():<\/strong> muestra el men&uacute; de navegaci&oacute;n de la p&aacute;gina en la cabecera de tu sitio.<\/li>\n<\/ul><p>Hay muchas t&eacute;cnicas para hacer un tema de WordPress responsivo. Una de ellas es el uso de metaetiquetas. Inserta la siguiente metaetiqueta bajo el t&iacute;tulo de tu entrada, para que tu sitio web se ajuste autom&aacute;ticamente a tama&ntilde;os de pantalla m&aacute;s peque&ntilde;os y viewports:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre><p>Una vez a&ntilde;adido, tendr&aacute;s un sitio compatible con todos los navegadores y con capacidad de respuesta para m&oacute;viles. <\/p><p>El archivo final <strong>header.php <\/strong>tendr&aacute; este aspecto:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;\n &lt;head&gt;\n   &lt;title&gt;&lt;?php bloginfo('name'); ?&gt; &amp;raquo; &lt;?php is_front_page() ? bloginfo('description') : wp_title(''); ?&gt;&lt;\/title&gt;\n   &lt;meta charset=\"&lt;?php bloginfo( 'charset' ); ?&gt;\"&gt;\n   &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n   &lt;link rel=\"stylesheet\" href=\"&lt;?php bloginfo('stylesheet_url'); ?&gt;\"&gt;\n   &lt;?php wp_head(); ?&gt;\n &lt;\/head&gt;\n &lt;body &lt;?php body_class(); ?&gt;&gt;\n   &lt;header class=\"my-logo\"&gt;\n   &lt;h1&gt;&lt;a href=\"&lt;?php echo esc_url( home_url( '\/' ) ); ?&gt;\"&gt;&lt;?php bloginfo('name'); ?&gt;&lt;\/a&gt;&lt;\/h1&gt;\n &lt;\/header&gt;\n &lt;?php wp_nav_menu( array( 'header-menu' =&gt; 'header-menu' ) ); ?&gt;<\/pre><p>Si quieres utilizar un logotipo como cabecera, sustituye <strong>&lt;?php bloginfo(&lsquo;name&rsquo;); ?&gt; <\/strong>por el c&oacute;digo de la imagen dentro de las etiquetas <strong>&lt;header<\/strong>&gt;.<\/p><p><strong>index.php<\/strong><\/p><p>El archivo <strong>index.php <\/strong>define la p&aacute;gina de inicio. Tambi&eacute;n se utilizar&aacute; como dise&ntilde;o por defecto si no se encuentran plantillas espec&iacute;ficas como <strong>single.php <\/strong>y <strong>page.php<\/strong>.<\/p><p>Utiliza etiquetas de plantilla, como <strong>get_header<\/strong>, <strong>get_sidebar <\/strong>y <strong>get_footer<\/strong>, para asegurarte de que el c&oacute;digo de la cabecera, la barra lateral y el pie de p&aacute;gina se incluyen en tu p&aacute;gina de inicio. Tambi&eacute;n tendr&aacute;s que insertar los elementos sem&aacute;nticos de HTML5: <strong>&lt;section&gt;, &lt;main&gt;, &lt;header&gt; <\/strong>y <strong>&lt;article<\/strong>&gt;. <\/p><p>Algunos de los elementos tendr&aacute;n clases asignadas, que se escribir&aacute;n en el archivo <strong>style.css<\/strong>.<\/p><p><div><p class=\"important\"><strong>&iexcl;Importante!<\/strong> Las etiquetas de cabecera pueden utilizarse varias veces en cualquier p&aacute;gina y no se refieren espec&iacute;ficamente a la cabecera de la p&aacute;gina. Las secciones y los art&iacute;culos deben tener los elementos de cabecera si hay texto dentro de h1, h2, etc. Si no hay texto de cabecera en una secci&oacute;n o art&iacute;culo, estas etiquetas pueden omitirse.<\/p><\/div><\/p><p>Para mostrar una lista de entradas y sus extractos con m&aacute;s etiquetas de plantilla, tendr&aacute;s que utilizar el bucle de WordPress. Haciendo esto tambi&eacute;n se llamar&aacute; a los &uacute;ltimos posts a la p&aacute;gina de inicio.<\/p><p>As&iacute;, la sintaxis final del archivo <strong>index.php <\/strong>tendr&aacute; el<strong> <\/strong>siguiente aspecto:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"content-area content-thin\"&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n      &lt;article class=\"article-loop\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n        &lt;?php the_excerpt(); ?&gt;\n      &lt;\/article&gt;\n&lt;?php endwhile; else : ?&gt;\n      &lt;article&gt;\n        &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n      &lt;\/article&gt;\n&lt;?php endif; ?&gt;\n  &lt;\/section&gt;&lt;?php get_sidebar(); ?&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>En el c&oacute;digo anterior, el bucle comienza en <strong>&lt;?php<\/strong> <strong>if ( have_posts() ) <\/strong>: continua con <strong>( have_posts() ) : the_post(); ?&gt; <\/strong>y termina en <strong>&lt;?php endif; ?<\/strong>&gt;.<\/p><p>Para m&aacute;s detalles, echa un vistazo a las siguientes etiquetas de plantilla utilizadas dentro del bucle:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;?php <\/strong><strong>the_permalink<\/strong><strong>()<\/strong><strong>; ? <\/strong>&gt;: produce la URL correcta de la entrada actual.<\/li>\n\n\n\n<li><strong>&lt;?php <\/strong><strong>the_title_attribute<\/strong><strong>()<\/strong><strong>; ? <\/strong>&gt;: muestra el t&iacute;tulo de la entrada en un formato seguro para el atributo title del enlace.<\/li>\n\n\n\n<li><strong>&lt;?php <\/strong><strong>the_title<\/strong><strong>()<\/strong><strong>; ? <\/strong><strong>&gt;:<\/strong> muestra el t&iacute;tulo de la entrada.<\/li>\n\n\n\n<li>&lt; strong&gt;&lt;?php the_author(); ? &gt;&lt; \/strong&gt;: emite el nombre del autor.<\/li>\n\n\n\n<li><strong>&lt;?php <\/strong><strong>the_excerpt<\/strong><strong>()<\/strong><strong>; ? <\/strong>&gt;: realiza el extracto del post, que se autogenerar&aacute; si no escribes el tuyo.<\/li>\n<\/ul><p>M&aacute;s adelante aprenderemos m&aacute;s sobre <a href=\"https:\/\/codex.wordpress.org\/Template_Tags\" target=\"_blank\" rel=\"noreferrer noopener\">las etiquetas de las plantillas <\/a>y los <a href=\"https:\/\/codex.wordpress.org\/The_Loop\" target=\"_blank\" rel=\"noreferrer noopener\">bucles<\/a> de WordPress.<\/p><p><strong>footer.php<\/strong><\/p><p>Este archivo es donde debes definir el pie de p&aacute;gina de cada p&aacute;gina. Cierra cualquier etiqueta <strong>&lt;body&gt; <\/strong>y <strong>&lt;html&gt; <\/strong>que a&uacute;n est&eacute; abierta desde el archivo <strong>header.php<\/strong>. Sin este archivo PHP, te dar&aacute;s cuenta de que la barra de administraci&oacute;n no aparece cuando visites tu p&aacute;gina de inicio, tus publicaciones o tus p&aacute;ginas.<\/p><p>Define tu pie de p&aacute;gina utilizando el elemento sem&aacute;ntico HTML5 <strong>&lt;footer&gt;&lt;\/footer<\/strong>&gt;. Para garantizar que cualquier c&oacute;digo final de WordPress y JavaScript se a&ntilde;ada a la p&aacute;gina, debe incluir tambi&eacute;n el gancho de acci&oacute;n <strong>wp_footer()<\/strong>.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;footer&gt;\n      &lt;p&gt;Copyright &amp;copy; 2019&lt;\/p&gt;\n    &lt;\/footer&gt;\n    &lt;?php wp_footer(); ?&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Al guardar este archivo se cerrar&aacute; cualquier etiqueta HTML abierta en otros archivos de plantilla.<\/p><p>Hablaremos m&aacute;s sobre <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Hooks\" target=\"_blank\" rel=\"noreferrer noopener\">los ganchos de acci&oacute;n<\/a> m&aacute;s adelante en este tutorial.<\/p><p><strong>single.php<\/strong><\/p><p>El archivo <strong>single.php <\/strong>dicta el dise&ntilde;o de las entradas individuales en tu sitio web. Puede ser completamente diferente del <strong>index.php<\/strong>.<\/p><p>Aqu&iacute;, usaremos la funci&oacute;n <strong>the_content() <\/strong>para mostrar el post completo. Sin embargo, no a&ntilde;adiremos la barra lateral a los posts y eliminaremos tambi&eacute;n el enlace en el t&iacute;tulo.<\/p><p>El c&oacute;digo PHP completo deber&iacute;a ser as&iacute;:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"content-area content-full-width\"&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n       &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n&lt;?php endwhile; else : ?&gt;\n      &lt;article&gt;\n        &lt;p&gt;Sorry, no post was found!&lt;\/p&gt;\n      &lt;\/article&gt;\n&lt;?php endif; ?&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>Una vez guardado, tus entradas se mostrar&aacute;n como una sola p&aacute;gina sin barra lateral.<\/p><p><strong>page.php<\/strong><\/p><p>El archivo <strong>page.php <\/strong>describe la forma en que se muestran las p&aacute;ginas. Puede ser diferente del &iacute;ndice y del dise&ntilde;o del post.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p> Recuerda que si el archivo page.php no existe, se utilizar&aacute; la plantilla index.php en su lugar. Adem&aacute;s, las p&aacute;ginas de tu sitio web no utilizar&aacute;n el mismo dise&ntilde;o que el utilizado en el archivo single.php. <\/p>\n                <\/div><\/p><p>Para que las diferencias sean m&aacute;s visibles, volveremos a a&ntilde;adir la barra lateral a este dise&ntilde;o y haremos que el contenido de la p&aacute;gina ocupe el <strong>70% <\/strong>del ancho de la misma.&nbsp;<\/p><p>A&ntilde;ade el siguiente c&oacute;digo al archivo <strong>page.php<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"content-area content-thin\"&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;header&gt;\n          &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n          By: &lt;?php the_author(); ?&gt;\n        &lt;\/header&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n&lt;?php endwhile; else : ?&gt;\n      &lt;article&gt;\n        &lt;p&gt;Sorry, no page was found!&lt;\/p&gt;\n      &lt;\/article&gt;\n&lt;?php endif; ?&gt;\n  &lt;\/section&gt;&lt;?php get_sidebar(); ?&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>Una vez guardado, tendr&aacute;s un dise&ntilde;o espec&iacute;fico para tus p&aacute;ginas.<\/p><h3 class=\"wp-block-heading\">5. Mejora tu dise&ntilde;o en la hoja de estilos CSS<\/h3><p>En la secci&oacute;n anterior, hemos mencionado la hoja de estilos CSS. Este archivo controla el dise&ntilde;o y la disposici&oacute;n de tu sitio web. Como ya hemos a&ntilde;adido algo de c&oacute;digo al archivo, ahora vamos a modificar el dise&ntilde;o.<\/p><p>Para ello, a&ntilde;ade el siguiente c&oacute;digo al final del archivo <strong>style.css<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.my-logo,\nfooter {\n  width: 100%;\n  padding-left: 1%;\n  margin-bottom: 8px;\n  background-color: #78baff;\n  border: 1px solid #78baff;\n}\nbody &gt; header &gt; h1 &gt; a {\n  color: #ffffff;\n  font-weight: 400;\n}\narticle &gt; header {\n}\nfooter {\n  margin-top: 4px;\n}\na {\n  text-decoration: none;\n}\n\/* 'Margin: 0 auto' centers block content on the page *\/\n.wrap {\n  width: 99%;\n  margin: 0 auto;\n}\n.content-area {\n  display: inline-block;\n}\n.content-thin {\n    width: 70%;\n}\n.content-full-width {\n    width: 100%;\n}\n.content-area,\n.primary-sidebar {\n  display: inline-block;\n}\n.primary-sidebar {\n  width: 25%;\n  padding: 1%;\n  vertical-align: top;\n  background-color: #ececec;\n}\n.article-loop {\n    width: 45%;\n    text-align: left;\n    margin: 5px;\n    padding: 10px;\n}\n.article-full {\n  width: 99%;\n  padding: 1%;\n}\n.article-loop,\n.article-full {\n  display: inline-block;\n  vertical-align: top;\n  background-color: #FFF;\n  border-radius: 4px;\n  margin-bottom: 4px;\n}<\/pre><p>Una vez guardado, esto har&aacute; que varias cajas tengan un fondo blanco y un borde azul.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p> Experimenta cambiando el estilo y la anchura del CSS para ver c&oacute;mo responde tu tema en distintas situaciones. Hazlo a&ntilde;adiendo <a href=\"\/co\/tutoriales\/anadir-css-personalizado-wordpress\">CSS personalizado<\/a> a tu sitio web con un plugin de WordPress o con el personalizador de temas. <\/p>\n                <\/div><\/p><p>Ahora que tienes la hoja de estilos y todas las plantillas necesarias listas, puedes navegar f&aacute;cilmente por tus entradas y p&aacute;ginas. Tu nuevo tema personalizado deber&iacute;a tener este aspecto:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"426\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/Aspecto-de-un-tema-personalizado-en-WordPress.png\" alt=\"Aspecto de un tema personalizado en WordPress\" class=\"wp-image-42004\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/Aspecto-de-un-tema-personalizado-en-WordPress.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/Aspecto-de-un-tema-personalizado-en-WordPress-300x125.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/Aspecto-de-un-tema-personalizado-en-WordPress-150x62.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/09\/Aspecto-de-un-tema-personalizado-en-WordPress-768x320.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>Uso de las consultas de medios<\/strong><\/p><p>Las consultas de medios (media queries) son &uacute;tiles para modificar la apariencia de tu sitio de WordPress en funci&oacute;n del tipo de dispositivo, la resoluci&oacute;n de pantalla o el ancho de la ventana gr&aacute;fica del navegador. La funci&oacute;n de consultas de medios en tu hoja de estilos CSS define la presentaci&oacute;n de la p&aacute;gina cuando se cambia la ventana gr&aacute;fica (viewport).&nbsp;<\/p><p>Supongamos que tienes dos cuadros de texto que ocupan el 50% de la pantalla. A medida que la ventana del navegador se hace m&aacute;s peque&ntilde;a, los cuadros se ajustan autom&aacute;ticamente para ocupar el 50% de la ventana en lugar de desaparecer por el lateral.<\/p><p>Si la ventana del navegador se hace demasiado peque&ntilde;a para mostrar todo el texto de esos cuadros correctamente, puedes hacer que ocupen el 100% del tama&ntilde;o de la ventana y que se muestren unos encima de otros.<\/p><p>Dado que nuestro dise&ntilde;o b&aacute;sico tiene dos cajas en l&iacute;nea en la p&aacute;gina principal, podemos cambiar f&aacute;cilmente la forma en que se comportan cuando la ventana del navegador es demasiado peque&ntilde;a para mostrar el texto.<\/p><p>As&iacute;, cambiaremos el ancho de los posts cuando la ventana del navegador est&eacute; por debajo de 800px. En lugar de tener dos posts de lado a lado, cada uno tendr&aacute; su propia l&iacute;nea.&nbsp;<\/p><p>Para ello, utilizaremos algunas reglas de caracter&iacute;sticas de los medios de comunicaci&oacute;n, como:&nbsp;<\/p><ul class=\"wp-block-list\">\n<li><strong>max-width: <\/strong>define el ancho m&aacute;ximo del &aacute;rea visible del navegador.<\/li>\n\n\n\n<li><strong>min-width: <\/strong>determina la anchura m&iacute;nima del &aacute;rea visible.<\/li>\n\n\n\n<li><strong>orientation: <\/strong>&nbsp;comprueba si la pantalla est&aacute; en modo vertical u horizontal.<\/li>\n<\/ul><p>Consulta la lista completa de funciones multimedia en el <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/@media\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de la Red de Desarrolladores de Mozilla<\/a>.<\/p><p>Primero escribiremos una consulta de medios que afecte a la clase .<strong>article-loop<\/strong>. Esta establecer&aacute; que si el ancho de la ventana del navegador es inferior a 800px, la clase .<strong>article-loop <\/strong>debe utilizar el 99% del espacio disponible.&nbsp;<\/p><p>Por lo tanto, la consulta de medios s&oacute;lo debe afectar a las pantallas y ventanas del navegador que tengan una anchura de 800px o menos.<\/p><p>Al final de la clase <strong>.article-loop<\/strong>, a&ntilde;ade lo siguiente:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width: 800px) {\n  .article-loop {\n    width: 99%;\n  }\n}<\/pre><p>Despu&eacute;s de guardar los cambios, dir&iacute;gete a la p&aacute;gina principal de tu sitio web. Cambia el tama&ntilde;o de tu navegador y cuando pase de 800px de ancho, ver&aacute;s que los recuadros de cada entrada cambian y caen uno debajo del otro.&nbsp;<\/p><p>A&ntilde;adiremos la siguiente consulta de medios de forma similar. Esta ordenar&aacute; que el contenido principal y la barra lateral ocupen el 100% del espacio disponible. Esto har&aacute; que la barra lateral quede por debajo del contenido principal si la ventana del navegador es menor de 400px de ancho.&nbsp;<\/p><p>Este es el aspecto que deber&iacute;a tener el c&oacute;digo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width: 400px) {\n  .content-area,\n  .primary-sidebar {\n    width: 100%;\n  }\n}<\/pre><p><div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p> Puedes colocar las consultas de medios en cualquier lugar de la hoja de estilos o escribir consultas de medios espec&iacute;ficas para elementos concretos justo debajo de la definici&oacute;n original. Sin embargo, si afectan a diferentes clases que se encuentran en distintos lugares, te recomendamos colocarlas en la parte inferior de la hoja de estilos. <\/p>\n                <\/div><div><p class=\"important\"><strong>&iexcl;Importante!<\/strong> Cambia las reglas de las consultas de medios para que se ajusten a tus necesidades y veas si hay mejores reglas que se puedan definir.<\/p><\/div><\/p><h2 class=\"wp-block-heading\" id=\"h-que-son-las-etiquetas-de-plantilla-bucle-y-ganchos-de-accion-de-wordpress\">&iquest;Qu&eacute; son las etiquetas de plantilla, bucle y ganchos de acci&oacute;n de WordPress?<\/h2><p>Tendr&aacute;s que utilizar etiquetas de plantilla, bucles y ganchos de acci&oacute;n para integrar completamente tu tema con WordPress. A continuaci&oacute;n, desglosaremos cada uno de estos elementos para ayudarte a entender c&oacute;mo funcionan.&nbsp;<\/p><h3 class=\"wp-block-heading\">Etiquetas de la plantilla<\/h3><p>Las etiquetas de plantilla (template tags), tambi&eacute;n conocidas como funciones de plantilla, son funciones PHP proporcionadas por WordPress para incluir f&aacute;cilmente archivos de plantilla de tu tema en otro archivo o para mostrar alguna informaci&oacute;n de la base de datos.<\/p><p>Si quieres mostrar el pie de p&aacute;gina en la p&aacute;gina de inicio pero no en ninguna otra p&aacute;gina, a&ntilde;ade <strong>get_footer() <\/strong>al<strong> <\/strong><strong><\/strong>final del archivo <strong>index.php, <\/strong>pero no en el archivo <strong>page.php<\/strong>. Ten en cuenta que algunas etiquetas de plantilla deben ser utilizadas en un bucle de WordPress para que funcionen correctamente.&nbsp;<\/p><p>A continuaci&oacute;n dos listas breves de algunas etiquetas de plantillas esenciales, para darte una idea de cu&aacute;les est&aacute;n disponibles.<\/p><p>Etiquetas de plantillas que incluyen archivos PHP:<\/p><ul class=\"wp-block-list\">\n<li><strong>get_header(): <\/strong>incluye la plantilla <strong>header.php<\/strong>.<\/li>\n\n\n\n<li><strong>get_sidebar():<\/strong> llama a la plantilla <strong>sidebar.php<\/strong>.<\/li>\n\n\n\n<li><strong>get_footer(): <\/strong>se dirige a la plantilla <strong>footer.php<\/strong>.<\/li>\n\n\n\n<li><strong>get_search_form():<\/strong> incluye la plantilla <strong>searchform.php<\/strong>.<\/li>\n<\/ul><p>Etiquetas de plantillas que muestran informaci&oacute;n de la base de datos:<\/p><ul class=\"wp-block-list\">\n<li><strong>bloginfo(): <\/strong>muestra la informaci&oacute;n solicitada en el par&aacute;metro, como <strong>bloginfo(&ldquo;nombre&rdquo;) <\/strong>que muestra el nombre de tu sitio web.<\/li>\n\n\n\n<li><strong>single_post_title():<\/strong> presenta el t&iacute;tulo de la entrada vista actualmente cuando se utiliza en el archivo <strong>single.php<\/strong>.&nbsp;<\/li>\n\n\n\n<li><strong>the_author():<\/strong> muestra el autor de la entrada vista actualmente.<\/li>\n\n\n\n<li><strong>the_content():<\/strong> produce el texto principal de una entrada o p&aacute;gina.<\/li>\n\n\n\n<li><strong>the_excerpt():<\/strong> muestra un extracto de cualquier entrada o p&aacute;gina.<\/li>\n<\/ul><p>Para ver la lista completa de etiquetas de plantillas de WordPress, consulta el <a href=\"https:\/\/codex.wordpress.org\/Template_Tags\" target=\"_blank\" rel=\"noreferrer noopener\">codex<\/a> oficial de WordPress.<\/p><h3 class=\"wp-block-heading\">Bucle de WordPress<\/h3><p>El bucle de WordPress (WordPress loop) es un conjunto de c&oacute;digo que recupera las entradas solicitadas. El c&oacute;digo HTML dentro del bucle mostrar&aacute; todas las entradas solicitadas en una sola p&aacute;gina: ser&aacute; una sola entrada o todas las entradas publicadas.&nbsp;<\/p><p>El bucle es una declaraci&oacute;n abreviada <strong>if-then <\/strong>de<strong> <\/strong>varias l&iacute;neas, compuesta por cuatro l&iacute;neas de c&oacute;digo. La primera l&iacute;nea indica que si se encuentra una entrada, se utilizar&aacute; el siguiente c&oacute;digo para mostrar la entrada. Si no se encuentra ninguna entrada que coincida, puedes definir un mensaje de reemplazo en su lugar.<\/p><p>El ejemplo por defecto de WordPress tiene este aspecto y la l&iacute;nea comentada es donde se escriben tus etiquetas HTML y de plantilla:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n\/\/ HTML and template tags here to define the layout, and what is shown from the post\n&lt;?php endwhile; else : ?&gt;\n  &lt;p&gt;&lt;?php _e( 'Sorry, no posts matched your criteria.' ); ?&gt;&lt;\/p&gt;\n&lt;?php endif; ?&gt;<\/pre><p>Si quieres mostrar una entrada, utiliza la etiqueta de plantilla <strong>the_content() <\/strong>dentro del bucle para mostrar el contenido de la entrada. Mientras tanto, si quieres mostrar una lista de todas las publicaciones, puedes usar <strong>the_excerpt() <\/strong>dentro<strong> <\/strong>del bucle.<\/p><h3 class=\"wp-block-heading\">Ganchos de acci&oacute;n<\/h3><p><a href=\"\/co\/tutoriales\/que-son-hooks-wordpress\">Los ganchos de WordPress<\/a> (WordPress hooks) son funciones PHP que se utilizan para manipular un proceso sin editar los archivos del n&uacute;cleo. Hay dos tipos de hooks disponibles: acci&oacute;n y filtro. Los hooks de filtro se utilizan para modificar el c&oacute;digo existente en el archivo <strong>function.php<\/strong>.<\/p><p>Por otro lado, los hooks de acci&oacute;n se utilizan para crear nuevas funciones. Tienen algunas funciones centrales de WordPress que a&ntilde;aden otro c&oacute;digo HTML a las p&aacute;ginas. Adem&aacute;s, los action hooks permiten a los plugins de WordPress adjuntar sus propias funciones tambi&eacute;n.<\/p><p>En la plantilla de la cabecera de tu tema, el gancho de acci&oacute;n <strong>wp_head() <\/strong>es llamado para incluir<strong> <\/strong>la cabecera HTML por defecto de WordPress dentro de las etiquetas <strong>&lt;head&gt;&lt;\/head<\/strong>&gt;. En la secci&oacute;n de pie de p&aacute;gina de tu tema, el gancho de acci&oacute;n <strong>wp_footer() <\/strong>es llamado para incluir<strong> <\/strong>el HTML y JavaScript por defecto, y ejecutar cualquier funci&oacute;n adjunta por los plugins.<\/p><p>Si no utilizas los ganchos de acci&oacute;n al crear un tema de WordPress, faltar&aacute; una parte importante el c&oacute;digo fuente y los plugins no podr&aacute;n funcionar correctamente.<\/p><p>Por ejemplo, no llamar a <strong>wp_footer() <\/strong>en tu plantilla <strong>footer.php <\/strong>har&aacute; que no aparezca la barra superior de <strong>administraci&oacute;n <\/strong>cuando se inicie la sesi&oacute;n como administrador.&nbsp;<\/p><p>Esto se debe a que el c&oacute;digo del n&uacute;cleo de WordPress que muestra la barra de administraci&oacute;n est&aacute; unido al gancho de acci&oacute;n <strong>wp_footer()<\/strong>. Por lo tanto, las funciones relacionadas no pueden ejecutarse sin &eacute;l.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/co\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Tanto si tienes un sitio web personal como uno de negocios, hay una amplia gama de opciones en los directorios de temas de WordPress.<\/p><p>Aunque instalar un tema predefinido es m&aacute;s f&aacute;cil, es probable que tu sitio web tenga un aspecto similar al de otros sitios web que utilizan el mismo tema. Para crear una apariencia &uacute;nica e incluir funcionalidades avanzadas, tendr&aacute;s que crear un nuevo tema propio.&nbsp;<\/p><p>En este art&iacute;culo hemos repasado los cinco pasos fundamentales para crear un tema responsivo para tu sitio web de WordPress. Aqu&iacute; tienes un resumen de ellos:<\/p><ol class=\"wp-block-list\">\n<li>Guarda los archivos del tema en una carpeta de temas.<\/li>\n\n\n\n<li>Construye una hoja de estilos CSS.<\/li>\n\n\n\n<li>Personaliza el archivo <strong>functions.php<\/strong>.<\/li>\n\n\n\n<li>Crea plantillas y dise&ntilde;os personalizados.<\/li>\n\n\n\n<li>Haz que tu tema responda a todos los tama&ntilde;os de pantalla.<\/li>\n<\/ol><p>Una vez que hayas creado con &eacute;xito tu propio tema, te recomendamos que <a href=\"\/co\/tutoriales\/utilizar-child-theme\">crees un tema hijo<\/a> para &eacute;l. Esto te permitir&aacute; conservar toda la personalizaci&oacute;n despu&eacute;s de actualizar el tema principal.<\/p><p>En definitiva, esperamos que este art&iacute;culo te haya ayudado en el proceso de creaci&oacute;n del tema. Si tienes alguna pregunta o sugerencia, no dudes en dejarla en la secci&oacute;n de comentarios m&aacute;s abajo.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Descubre otras gu&iacute;as sobre temas de WordPress<\/h4>\n                    <p> <a href=\"\/co\/tutoriales\/utilizar-child-theme\" target=\"&rdquo;_blank&rdquo;\" rel=\"noopener\">Crear un tema hijo de WordPress<\/a><br>\n<a href=\"\/co\/tutoriales\/editar-plantillas-wordpress\" target=\"&rdquo;_blank&rdquo;\" rel=\"noopener\">&iquest;C&oacute;mo utilizar varios temas de WordPress?<\/a><br>\n<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-crear-un-tema-de-wordpress-preguntas-frecuentes\">&iquest;C&oacute;mo crear un tema de WordPress? &ndash; Preguntas frecuentes<\/h2><p>Esta secci&oacute;n cubrir&aacute; algunas de las preguntas m&aacute;s frecuentes sobre c&oacute;mo crear un tema de WordPress<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694471e7f21bf\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">u003cstrongu003e&iquest;Es dif&iacute;cil crear tu propio tema de WordPress?u003c\/strongu003e<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Desarrollar un tema de WordPress desde cero es relativamente f&aacute;cil si tienes algunos conocimientos de HTML, u003ca href=u0022\/tutoriales\/que-es-cssu0022u003eCSSu003c\/au003e y u003ca href=u0022\/tutoriales\/que-es-phpu0022u003ePHPu003c\/au003e. Sin embargo, crear tu propio tema de WordPress puede ser tedioso.u003cbr \/u003eu003cbr \/u003eUna excelente alternativa a los temas personalizados es utilizar un tema de inicio como u003ca href=u0022https:\/\/underscores.me\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003eUnderscoreu003c\/au003e o u003ca href=u0022https:\/\/wprig.io\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003eWP Rigu003c\/au003e.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694471e7f21c2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">u003cstrongu003e&iquest;Se puede ganar dinero con los temas de WordPress?u003c\/strongu003e<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&iacute;, la mayor&iacute;a de los desarrolladores de temas de WordPress venden sus creaciones a unos u003ca href=u0022https:\/\/www.codeinwp.com\/blog\/wordpress-theme-cost-analysis\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003e59 d&oacute;lares por licenciau003c\/au003e. u003cbr \/u003eu003cbr \/u003eHay varios mercados a los que puedes unirte para ganar dinero con los temas de WordPress (por ejemplo, u003ca href=u0022https:\/\/envato.com\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003eEnvatou003c\/au003e, u003ca href=u0022https:\/\/themeforest.net\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003eTheme Forestu003c\/au003e y u003ca href=u0022https:\/\/codecanyon.net\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003eCode Canyonu003c\/au003e). Por ejemplo, la media de ventas anuales s&oacute;lo en Theme Forest es de unos u003ca href=u0022https:\/\/freemius.com\/blog\/themeforest-wordpress-themes-analyisis\/u0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003e17.355u003c\/au003e d&oacute;lares.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694471e7f21c3\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">u003cstrongu003e&iquest;Cu&aacute;nto tiempo toma crear un tema de WordPress?u003c\/strongu003e<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Por lo general, el desarrollo de un tema de WordPress a medida lleva entre 2 y 3 semanas, dependiendo de la complejidad del c&oacute;digo. u003cbr \/u003eu003cbr \/u003ePor ejemplo, un u003ca href=u0022\/tutoriales\/convertirte-desarrollador-wordpressu0022u003edesarrollador de temas de WordPressu003c\/au003e necesitar&aacute; m&aacute;s tiempo para a&ntilde;adir la funcionalidad del constructor de p&aacute;ginas que para construir un dise&ntilde;o responsivo.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Un tema de WordPress te permite tener un dise&ntilde;o consistente para tus p&aacute;ginas y entradas, cambiando la apariencia de todo el sitio web. Dicho esto, instalar un tema de WordPress prefabricado podr&iacute;a impedirte tener un control total sobre su funcionalidad y dise&ntilde;o.&nbsp; Por suerte, puedes crear un tema de WordPress desde cero, para personalizar completamente [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/crear-un-tema-de-wordpress-con-codigo\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo crear un tema en WordPress con c\u00f3digo - Gu\u00eda de 5 pasos","rank_math_description":"Crear un tema de WordPress es m\u00e1s sencillo de lo que parece. Solo necesitas conocimientos b\u00e1sicos de programaci\u00f3n en lenguajes HTML5 y CSS3.","rank_math_focus_keyword":"crear tema WordPress","footnotes":""},"categories":[4747],"tags":[],"class_list":["post-21659","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-create-a-wordpress-theme","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-como-criar-um-tema-responsivo-usando-html5","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-theme-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-tema-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-un-tema-de-wordpress-con-codigo","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-como-criar-um-tema-responsivo-usando-html5","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-wordpress-theme-html5","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-create-a-wordpress-theme","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-create-a-wordpress-theme","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-create-a-wordpress-theme","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/21659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=21659"}],"version-history":[{"count":48,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/21659\/revisions"}],"predecessor-version":[{"id":46684,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/21659\/revisions\/46684"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=21659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=21659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=21659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}