{"id":76007,"date":"2024-08-02T11:27:33","date_gmt":"2024-08-02T09:27:33","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=76007&#038;preview=true&#038;preview_id=76007"},"modified":"2024-08-06T11:25:54","modified_gmt":"2024-08-06T09:25:54","slug":"crear-tema-clasico-de-wordpress","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/","title":{"rendered":"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso"},"content":{"rendered":"<p>WordPress es un <a href=\"https:\/\/kinqsta.com\/es\/blog\/sitema-de-gestion-de-contenido\/\">sistema de gesti\u00f3n de contenidos (CMS, content management system)<\/a> muy popular para crear blogs, tiendas de <a href=\"https:\/\/kinqsta.com\/ecommerce\/\">comercio electr\u00f3nico<\/a> y otros sitios web. Destaca por su flexibilidad, ya que admite miles de <a href=\"https:\/\/kinqsta.com\/es\/blog\/temas-de-wordpress\/\">temas gratuitos y de pago<\/a> en varias plataformas, lo que ayuda a acelerar el proceso de creaci\u00f3n de sitios web.<\/p>\n<p>Sin embargo, el verdadero poder de WordPress reside en sus opciones de personalizaci\u00f3n, ya que puedes ajustar la apariencia de tu sitio con varios <a href=\"https:\/\/kinqsta.com\/es\/blog\/constructores-pagina-wordpress\/\">constructores de p\u00e1ginas<\/a> y temas de bloques para adaptarlos a tu gusto. Pero, \u00bfy si estas opciones siguen sin satisfacer tus necesidades espec\u00edficas? La buena noticia es que puedes desarrollar tu tema desde cero.<\/p>\n<p>Esta gu\u00eda describe la creaci\u00f3n de un <a href=\"https:\/\/kinqsta.com\/es\/herramientas\/wordpress-detector-temas\/\">tema cl\u00e1sico de WordPress<\/a>. Aprender\u00e1s a crear un tema paso a paso, lo que te proporcionar\u00e1 la base para crear temas m\u00e1s avanzados en el futuro.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Puede que te preguntes qu\u00e9 es un tema cl\u00e1sico de WordPress, qu\u00e9 lo hace cl\u00e1sico y si existe otro tipo de tema. Si te vienen estas preguntas a la cabeza, la respuesta directa es que un tema cl\u00e1sico de WordPress utiliza los archivos y funciones de plantilla PHP tradicionales para construir la estructura y el dise\u00f1o del sitio.<\/p>\n<p>Esto es diferente de los temas de bloques modernos introducidos con el <a href=\"https:\/\/kinqsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">editor Gutenberg<\/a>, que utilizan bloques y la <a href=\"https:\/\/kinqsta.com\/es\/blog\/wordpress-edicion-sitio-completa\/\">edici\u00f3n completa del sitio (FSE<\/a>) para crear y gestionar los elementos del tema. Ambos tipos tienen sus ventajas, pero esta gu\u00eda se centra en los temas cl\u00e1sicos.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Requisitos previos<\/h2>\n<p>Desarrollar tu tema desde cero es un proceso t\u00e9cnico que implica escribir c\u00f3digo. Debes estar familiarizado con lo siguiente:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-php\/\">PHP<\/a><\/strong> \u2014 Esencial para a\u00f1adir funcionalidad y contenido din\u00e1mico a tu tema. Es la columna vertebral de WordPress.<\/li>\n<li><strong><a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a><\/strong> \u2014 Se utiliza para crear la estructura de las plantillas de tu tema.<\/li>\n<li><strong><a href=\"https:\/\/kinqsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a><\/strong> \u2014 Se utiliza para dar estilo a tu tema y garantizar que se vea bien en diferentes dispositivos y navegadores.<\/li>\n<\/ul>\n<p>Adem\u00e1s, crear un entorno de desarrollo es crucial. Puedes crear uno con <a href=\"https:\/\/kinqsta.com\/es\/docs\/devkinsta\/\">DevKinsta<\/a>, una suite de desarrollo local para sitios de WordPress, siguiendo estos pasos:<\/p>\n<ol start=\"1\">\n<li>Visita el <a href=\"https:\/\/kinqsta.com\/es\/devkinsta\/\">sitio web de DevKinsta<\/a> para descargar la aplicaci\u00f3n para tu sistema operativo.<\/li>\n<li>Sigue las instrucciones de instalaci\u00f3n para tu sistema operativo.<\/li>\n<li>Abre DevKinsta y haz clic en <strong>Nuevo sitio WordPress<\/strong>.<\/li>\n<li>A continuaci\u00f3n, selecciona la opci\u00f3n <strong>Nuevo sitio WordPress<\/strong> y rellena los campos <strong>Nombre del sitio<\/strong>, <strong>Nombre de usuario del administrador de WordPress<\/strong> y <strong>Contrase\u00f1a del administrador de WordPress<\/strong>.<\/li>\n<li>Por \u00faltimo, haz clic en <strong>Crear sitio<\/strong> y espera entre 30 y 60 segundos a que se cree el sitio.<\/li>\n<\/ol>\n<p>Una vez creado tu sitio, podr\u00e1s previsualizarlo, acceder a tu panel de control de WP e incluso ver la ruta del archivo a la instalaci\u00f3n local de WP en tu ordenador, lo que te dar\u00e1 acceso a todo el c\u00f3digo.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/create-site-devkinsta.png\" alt=\"Detalles del sitio en DevKinsta.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Detalles del sitio en DevKinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Supongamos que tienes un sitio activo en MyKinsta. Puedes <a href=\"https:\/\/kinqsta.com\/es\/docs\/devkinsta\/integracion-devkinsta\/#pull-a-site-from-kinsta\">enviar tu sitio a DevKinsta<\/a> para trabajar en \u00e9l localmente o utilizar tu <a href=\"https:\/\/kinqsta.com\/es\/blog\/como-usar-sftp\/\">cliente SFTP preferido<\/a>, como <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a>, junto con los detalles STFP de tu sitio para acceder a tus archivos de WordPress<\/p>\n<\/aside>\n\n<h2>Comprender la estructura de temas de WordPress<\/h2>\n<p>Antes de sumergirte en el proceso paso a paso de creaci\u00f3n de tu tema cl\u00e1sico, es esencial que comprendas la estructura de un tema cl\u00e1sico de WordPress y los archivos clave implicados. Este conocimiento te proporcionar\u00e1 una base s\u00f3lida para el desarrollo de tu tema.<\/p>\n<h3>El directorio de temas de WordPress<\/h3>\n<p>Todos los temas de WordPress se almacenan en el directorio <code>wp-content\/themes directory<\/code> de tu instalaci\u00f3n de WordPress. Cada tema reside en su carpeta dentro de este directorio.<\/p>\n<h3>Archivos clave en un tema de WordPress<\/h3>\n<p>Hay dos archivos principales que todo tema cl\u00e1sico de WordPress debe tener:<\/p>\n<ul>\n<li><code>index.php<\/code> \u2014 Este es el archivo de plantilla principal que sirve de respaldo para todos los dem\u00e1s archivos de plantilla. Es el archivo principal que WordPress utiliza para mostrar el contenido.<\/li>\n<li><code>style.css<\/code> \u2014 Este archivo contiene los metadatos del tema y los estilos CSS personalizados. Es crucial para definir la apariencia del tema y proporcionar informaci\u00f3n esencial, como su nombre, autor y versi\u00f3n.<\/li>\n<\/ul>\n<p>Para estructurar bien tu tema y a\u00f1adirle funcionalidad, puedes utilizar archivos de plantilla adicionales, como los siguientes, que son comunes a los temas cl\u00e1sicos y se utilizan en el tema de ejemplo creado en esta gu\u00eda:<\/p>\n<ul>\n<li><code>header.php<\/code>: Este archivo puede contener la secci\u00f3n de cabecera de tu tema, incluyendo el logotipo del sitio y el men\u00fa de navegaci\u00f3n.<\/li>\n<li><code>footer.php<\/code>: Este archivo debe contener la secci\u00f3n de pie de p\u00e1gina de tu tema.<\/li>\n<li><code>functions.php<\/code>: Este archivo se puede utilizar para a\u00f1adir funciones personalizadas, caracter\u00edsticas y opciones de soporte del tema.<\/li>\n<li><code>single.php<\/code>: Este archivo de plantilla se utiliza para mostrar entradas individuales del blog.<\/li>\n<li><code>page.php<\/code>: Este archivo de plantilla se utiliza para mostrar p\u00e1ginas est\u00e1ticas.<\/li>\n<\/ul>\n<p>Ahora que ya conoces los archivos esenciales y sus funciones, pasemos al proceso paso a paso de creaci\u00f3n de tu tema cl\u00e1sico de WordPress.<\/p>\n<h2>C\u00f3mo crear un tema cl\u00e1sico de WordPress<\/h2>\n<p>Hay un dicho popular que dice que la mejor forma de aprender es haciendo. Apliquemos ese principio creando un tema de blog cl\u00e1sico que muestre tus entradas de WordPress en la p\u00e1gina de inicio con un estilo CSS personalizado y funciones adicionales.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/classic-blog-theme.png\" alt=\"Tema cl\u00e1sico de blog de WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Tema cl\u00e1sico de blog de WordPress.<\/figcaption><\/figure>\n<h3>Paso 1: Crear una nueva carpeta de temas<\/h3>\n<p>Crea una carpeta dentro del directorio <code>themes<\/code>, como <code>myblogtheme<\/code>.<\/p>\n<h3>Paso 2: A\u00f1adir informaci\u00f3n de metadatos del tema<\/h3>\n<p>A continuaci\u00f3n, vamos a configurar los detalles del tema en el archivo <code>style.css<\/code>. Aqu\u00ed tienes un ejemplo de informaci\u00f3n de metadatos que puedes incluir en <code>style.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Kinsta Blog Theme\nAuthor: Joel Olawanle\nAuthor URI: https:\/\/kinqsta.com\/blog\/author\/joelolawanle\/\nDescription: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/code><\/pre>\n<p>En el c\u00f3digo anterior<\/p>\n<ul>\n<li><strong>Theme Name<\/strong>: El nombre de tu tema que aparece en el \u00e1rea de administraci\u00f3n de WordPress en <strong>Apariencia<\/strong> &gt; <strong>Temas<\/strong>.<\/li>\n<li><strong>Author<\/strong>: Muestra el nombre del creador del tema.<\/li>\n<li><strong>Author URI<\/strong>: Enlaza con el sitio web o el perfil del autor.<\/li>\n<li><strong>Description<\/strong>: Proporciona una visi\u00f3n general de la finalidad y caracter\u00edsticas del tema.<\/li>\n<li><strong>Version<\/strong>: Indica la versi\u00f3n actual del tema para las actualizaciones.<\/li>\n<li><strong>License<\/strong>: Especifica las condiciones de distribuci\u00f3n.<\/li>\n<li><strong>License URI<\/strong>: Enlaza con el texto completo de la licencia.<\/li>\n<\/ul>\n<p>Puedes obtener m\u00e1s informaci\u00f3n sobre estos campos en el <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manual de temas de WordPress<\/a>.<\/p>\n<p>Despu\u00e9s de a\u00f1adir esta informaci\u00f3n a tu archivo <code>style.css<\/code>, ve a <strong>Apariencia<\/strong> &gt; <strong>Temas<\/strong> en tu \u00e1rea de administraci\u00f3n de WordPress. Ver\u00e1s el tema reci\u00e9n creado en la lista. Cuando hagas clic para ver los <strong>detalles del tema<\/strong>, ver\u00e1s que aparece toda la informaci\u00f3n que has a\u00f1adido.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/theme-details.png\" alt=\"Detalles del tema del blog cl\u00e1sico.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Detalles del tema del blog cl\u00e1sico.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A\u00f1ade un archivo <code>screenshot.png<\/code> a la carpeta ra\u00edz de tu tema, y aparecer\u00e1 como imagen de previsualizaci\u00f3n en la p\u00e1gina <strong>Temas<\/strong>. Esto facilita la identificaci\u00f3n del aspecto que tendr\u00e1 un tema.<\/p>\n<\/aside>\n\n<p>Ahora que tenemos el archivo <code>style.css<\/code> configurado, pasemos a crear los dem\u00e1s archivos esenciales del tema.<\/p>\n<h3>Paso 3: Crear el archivo de plantilla principal para tu tema<\/h3>\n<p>El archivo <code>index.php<\/code> sirve como archivo de plantilla principal para tu tema. Cualquier c\u00f3digo que a\u00f1adas aqu\u00ed se utilizar\u00e1 para mostrar el contenido principal de tu sitio.<\/p>\n<p>Por ejemplo, si a\u00f1ades algo de <a href=\"https:\/\/kinqsta.com\/es\/blog\/editar-codigo-wordpress\/\">c\u00f3digo HTML<\/a> b\u00e1sico aqu\u00ed, todo se mostrar\u00e1 cuando actives y previsualices el tema. En cambio, si quieres extraer informaci\u00f3n de tu CMS de WordPress para mostrarla a trav\u00e9s del archivo de plantilla de tu tema, aqu\u00ed es donde utilizas PHP para a\u00f1adir funciones de WordPress.<\/p>\n<p>Este es el aspecto que puede tener la estructura b\u00e1sica del archivo <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    <!-- Main content goes here -->\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>En la estructura anterior, <code>get_header()<\/code> y <code>get_footer()<\/code> se utilizan para extraer las secciones de cabecera y pie de p\u00e1gina de sus respectivos archivos de plantilla (<code>header.php<\/code> y <code>footer.php<\/code>).<\/p>\n<p>Rellenaremos el archivo <code>index.php<\/code> con el c\u00f3digo adecuado, pero trabajemos primero en las secciones de cabecera y pie de p\u00e1gina del tema.<\/p>\n<h3>Paso 4: Crear el archivo de cabecera<\/h3>\n<p>El archivo <code>header.php<\/code> muestra la secci\u00f3n de cabecera de tu sitio, que normalmente incluye elementos como el logotipo del sitio y el men\u00fa de navegaci\u00f3n. Tambi\u00e9n incluye hojas de estilo, scripts y metaetiquetas. Este es el aspecto de nuestro archivo <code>header.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;\n        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>Vamos a desglosar y explicar cada parte de este archivo y a a\u00f1adir las <a href=\"https:\/\/kinqsta.com\/es\/blog\/functions-php-wordpress\/\">funciones<\/a> y <a href=\"https:\/\/kinqsta.com\/es\/blog\/wordpress-hooks\/\">hooks<\/a> correspondientes a <code>functions.php<\/code>.<\/p>\n<p>Empecemos por la secci\u00f3n <code>&lt;head&gt;<\/code>. Esta secci\u00f3n incluye los metadatos esenciales, el t\u00edtulo del sitio, la codificaci\u00f3n de caracteres y la funci\u00f3n <code>wp_head()<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p>La funci\u00f3n <code>language_attributes();<\/code> establece los atributos de idioma para el documento HTML. Despu\u00e9s, la funci\u00f3n <code>wp_head();<\/code> es crucial, ya que permite a WordPress y a los plugins insertar elementos esenciales en la secci\u00f3n <code>&lt;head&gt;<\/code>, como hojas de estilo y scripts.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Envuelve siempre las funciones de WordPress en etiquetas <code>&lt;?php ... ?&gt;<\/code>.<\/p>\n<\/aside>\n\n<p><a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/enqueueing-scripts-and-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enlaza<\/a> la hoja de estilos a\u00f1adiendo lo siguiente a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');<\/code><\/pre>\n<p>La funci\u00f3n <code>wp_enqueue_style()<\/code> a\u00f1ade la <a href=\"https:\/\/kinqsta.com\/es\/blog\/css-wordpress\/\">hoja de estilos<\/a> principal a la secci\u00f3n head. Anteponemos a la funci\u00f3n el prefijo <code>my_custom_theme<\/code> para evitar conflictos con otros temas o plugins. Puedes decidir a\u00f1adirla directamente a la etiqueta head con la etiqueta <code>&lt;link&gt;<\/code>.<\/p>\n<p>Del mismo modo, vamos a declarar una funci\u00f3n para a\u00f1adir el t\u00edtulo del sitio a la secci\u00f3n head:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');<\/code><\/pre>\n<p>Ahora, gracias a la funci\u00f3n <code>wp_head()<\/code>, el estilo y la etiqueta title se a\u00f1aden a la cabecera de forma din\u00e1mica. Puedes comprobarlo inspeccionando tu sitio de WordPress con las herramientas para desarrolladores de tu navegador. En la secci\u00f3n <code>&lt;head&gt;<\/code>, deber\u00edas ver el enlace de la hoja de estilos y la etiqueta de t\u00edtulo generada din\u00e1micamente, lo que confirma que est\u00e1n incluidos.<\/p>\n<p>A continuaci\u00f3n, en el cuerpo, declaramos la secci\u00f3n navbar donde mostramos un logotipo ficticio y proporcionamos una opci\u00f3n para utilizar un logotipo personalizado cuando se establezca en la identidad del sitio de WordPress:<\/p>\n<pre><code class=\"language-php\">&lt;body&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;<\/code><\/pre>\n<p>La secci\u00f3n del logotipo utiliza la funci\u00f3n <code>the_custom_logo()<\/code> para mostrar un logotipo personalizado si se establece uno. Si no se establece un logotipo personalizado, muestra una imagen por defecto.<\/p>\n<p>Para activar la funci\u00f3n de logotipo personalizado, a\u00f1ade el siguiente c\u00f3digo a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_setup() {\n    add_theme_support('custom-logo', array(\n        'height'      =&gt; 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_setup');<\/code><\/pre>\n<p>Esta funci\u00f3n a\u00f1ade soporte para un logotipo personalizado. Por \u00faltimo, la secci\u00f3n del men\u00fa de navegaci\u00f3n:<\/p>\n<pre><code class=\"language-php\">        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>La funci\u00f3n <code>wp_nav_menu()<\/code> muestra el <a href=\"https:\/\/kinqsta.com\/es\/blog\/menus-personalizados-wordpress\/\">men\u00fa de navegaci\u00f3n<\/a> asignado a la ubicaci\u00f3n \u00abHeader Menu\u00bb. Para registrar el men\u00fa de navegaci\u00f3n, aseg\u00farate de tener este c\u00f3digo en <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">register_nav_menus(array(\n    'header-menu' =&gt; __('Header Menu', 'my-custom-theme'),\n));<\/code><\/pre>\n<p>Este es el aspecto que tendr\u00e1 ahora tu archivo <code>function.php<\/code>:<\/p>\n<pre><code class=\"language-php\"> 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\nadd_action('after_setup_theme', 'my_custom_theme_setup');\n\nfunction my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');\n\n\/\/ Function to add the site title to the head section\nfunction my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');\n?&gt;<\/code><\/pre>\n<p>Siguiendo estos pasos, te aseguras de que tu cabecera admite un logotipo personalizado y muestra un men\u00fa de navegaci\u00f3n, lo que la hace din\u00e1mica y f\u00e1cilmente personalizable a trav\u00e9s del panel de <a href=\"https:\/\/kinqsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">administraci\u00f3n de WordPress<\/a>.<\/p>\n<h3>Paso 5: Crear el archivo de pie de p\u00e1gina<\/h3>\n<p>El archivo <code>footer.php<\/code> ser\u00e1 el responsable de mostrar la secci\u00f3n de pie de p\u00e1gina de tu sitio. Para este tema, el archivo <code>footer.php<\/code> s\u00f3lo mostrar\u00e1 el a\u00f1o de copyright:<\/p>\n<pre><code class=\"language-php\">&lt;footer&gt;\n  &lt;p&gt;Copyright \u00a9 2024&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>En este archivo, incluimos la funci\u00f3n <code>wp_footer()<\/code>, de forma similar a como incluimos wp_head() en la cabecera. La funci\u00f3n <code>wp_footer()<\/code> permite a WordPress y a los plugins insertar elementos esenciales, como scripts, justo antes de la etiqueta de cierre <code>&lt;\/body&gt;<\/code>. Esto es crucial para garantizar que todos los recursos necesarios se cargan correctamente y que tu sitio funciona como se espera.<\/p>\n<h3>Paso 6: Mostrar entradas de blog con el bucle de WordPress<\/h3>\n<p>Volvamos al archivo <code>index.php<\/code> para explicar c\u00f3mo recorrer y mostrar las entradas de tu sitio de WordPress utilizando el bucle de WordPress, una potente forma de mostrar contenido din\u00e1micamente. Este es el aspecto del bucle:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"my-posts\"&gt;\n    &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n        &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n            &lt;article class=\"article-loop\"&gt;\n                &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                    &lt;?php the_post_thumbnail(); ?&gt;\n                &lt;?php endif; ?&gt;\n                &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                &lt;div class=\"flex-info\"&gt;\n                    &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                    &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;?php the_excerpt(); ?&gt;\n            &lt;\/article&gt;\n        &lt;\/a&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;\/div&gt;<\/code><\/pre>\n<p>El c\u00f3digo anterior comprueba si hay entradas que mostrar antes de entrar en el bucle. En el bucle, funciones de WordPress como <code>the_title()<\/code>, <code>the_author()<\/code>, <code>the_time('F j, Y')<\/code>, y <code>the_excerpt()<\/code> muestran informaci\u00f3n sobre cada entrada de WordPress.<\/p>\n<p>La funci\u00f3n <code>the_post_thumbnail()<\/code> tambi\u00e9n se utiliza para mostrar la miniatura, pero est\u00e1 envuelta en una sentencia if, por lo que s\u00f3lo se muestra cuando hay una imagen destacada para tu entrada. En el archivo <code>functions.php<\/code>, debemos a\u00f1adir soporte para miniaturas de entradas con esta funci\u00f3n para que haya una opci\u00f3n para subir im\u00e1genes destacadas cuando crees nuevas entradas:<\/p>\n<pre><code class=\"language-php\">add_theme_support('post-thumbnails');<\/code><\/pre>\n<p>A\u00f1ade esto a la funci\u00f3n <code>my_custom_theme_setup()<\/code> que creamos en el archivo <code>functions.php<\/code>. Este es el aspecto que tiene ahora el archivo <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;div class=\"hero\"&gt;\n        &lt;h1&gt;Welcome to my blog!&lt;\/h1&gt;\n        &lt;p&gt;Here, you'll find posts on a variety of topics, including programming, web development, and more.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"my-posts\"&gt;\n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n            &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n                &lt;article class=\"article-loop\"&gt;\n                    &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                        &lt;?php the_post_thumbnail(); ?&gt;\n                    &lt;?php endif; ?&gt;\n                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                    &lt;div class=\"flex-info\"&gt;\n                        &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                        &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;?php the_excerpt(); ?&gt;\n                &lt;\/article&gt;\n            &lt;\/a&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;\/div&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Observar\u00e1s que se ha a\u00f1adido algo de c\u00f3digo est\u00e1tico, que ser\u00e1 estilizado como un banner que muestra \u00abWelcome to my blog\u00bb (Bienvenido a mi blog) y un p\u00e1rrafo de texto.<\/p>\n<h3>Paso 7: Crear una plantilla de entrada \u00fanica<\/h3>\n<p>Antes de dar estilo a nuestro tema, vamos a definir una plantilla b\u00e1sica para mostrar entradas individuales del blog al hacer clic desde cualquier p\u00e1gina o entrada de tu tema. Para ello, crea un archivo <code>single.php<\/code> en la ra\u00edz de tu tema y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;section class=\"single__post\"&gt;\n        &lt;article class=\"article-full\"&gt;\n          &lt;div class=\"single__post-header\"&gt;\n            &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n              &lt;?php the_post_thumbnail(); ?&gt;\n            &lt;?php endif; ?&gt;\n            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n            &lt;p&gt;By: &lt;?php the_author(); ?&gt; on &lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;?php the_content(); ?&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, <code>get_header()<\/code> y <code>get_footer()<\/code> incluyen la cabecera y el pie de p\u00e1gina. En otras partes del c\u00f3digo, las funciones de WordPress muestran contenido din\u00e1mico.<\/p>\n<h3>Paso 8: Crear un archivo de plantilla para las p\u00e1ginas de WordPress<\/h3>\n<p>Del mismo modo que creaste una plantilla para las entradas individuales de WordPress, puedes crear una plantilla para mostrar tus p\u00e1ginas de WordPress. Para ello, crea un archivo <code>page.php<\/code> en la ra\u00edz de la carpeta de tu tema y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"\"&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;div class=\"page-header\"&gt;\n          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<h3>Paso 9: Estilizar tu tema<\/h3>\n<p>Hasta ahora, hemos creado algunas plantillas b\u00e1sicas para nuestro tema. Ahora, es el momento de a\u00f1adir estilos personalizados para que tenga un aspecto estupendo. Puedes a\u00f1adir tus estilos al archivo <code>style.css<\/code> de la carpeta de tu tema. Para empezar, copia el estilo de este <a href=\"https:\/\/gist.github.com\/olawanlejoel\/8cf4cee4429df83a7e005275d1f4275d\" target=\"_blank\" rel=\"noopener noreferrer\">gist de GitHub<\/a> para el ejemplo de tema creado en esta gu\u00eda.<\/p>\n<h3>Paso 10: Prueba y despliega tu tema<\/h3>\n<p>Hasta ahora, has creado con \u00e9xito un tema de WordPress. Ahora es el momento de probarlo y desplegarlo.<\/p>\n<p>Primero, aseg\u00farate de que tu tema est\u00e1 activado yendo al panel de administraci\u00f3n de WordPress y seleccionando <strong>Apariencia<\/strong> &gt; <strong>Temas<\/strong>. Si a\u00fan no lo has hecho, haz clic en tu tema y act\u00edvalo. Tambi\u00e9n puedes hacer clic en el bot\u00f3n <strong>Personalizar<\/strong> para establecer la identidad del sitio, ajustar el men\u00fa y modificar otros ajustes para asegurarte de que tu sitio se muestra correctamente.<\/p>\n<p>Una vez que est\u00e9s satisfecho con tu tema, tienes un par de opciones para desplegarlo:<\/p>\n<ol start=\"1\">\n<li><strong>Env\u00eda tu sitio local online:<\/strong> Si est\u00e1s desarrollando localmente con DevKinsta, puedes enviar f\u00e1cilmente tu sitio a un entorno staging. Esto te permite probar tu tema en un entorno similar al real antes de pasarlo al entorno real. Puedes encontrar instrucciones detalladas sobre c\u00f3mo hacerlo en nuestra <a href=\"https:\/\/kinqsta.com\/es\/docs\/devkinsta\/integracion-devkinsta\/#push-changes-to-staging\">documentaci\u00f3n de DevKinsta<\/a>.<\/li>\n<li><strong>Empaqueta y sube tu tema:<\/strong> Tambi\u00e9n puedes empaquetar tu tema en una carpeta comprimida y subirla a tu sitio online. Ve a<strong> Apariencia &gt; Temas &gt; A\u00f1adir nuevo &gt; Subir Tema<\/strong> en el panel de administraci\u00f3n de WordPress y selecciona el archivo comprimido de tu tema para subirlo.<\/li>\n<\/ol>\n<p>Probar tu tema a fondo en un entorno staging garantiza que todo funciona como se espera antes de lanzarlo. Este paso es crucial para detectar posibles problemas y garantizar que tu sitio tenga un aspecto y un funcionamiento perfectos.<\/p>\n<h2>Resumen<\/h2>\n<p>En este art\u00edculo, hemos creado un tema cl\u00e1sico de WordPress desde cero. Hemos tratado la configuraci\u00f3n de los archivos esenciales, c\u00f3mo a\u00f1adir estilos personalizados y la creaci\u00f3n de plantillas para entradas y p\u00e1ginas individuales.<\/p>\n<p>Si quieres que tu sitio tenga la funcionalidad y el aspecto exactos que deseas, la forma de conseguirlo es desarrollar tu tema de WordPress. Sin embargo, si careces de tiempo, habilidades o ganas de hacerlo, contratar a un profesional puede ayudarte a lograr tu visi\u00f3n de forma eficiente.<\/p>\n<p>Cuando por fin tengas un sitio que se adapte a tus gustos, necesitar\u00e1s un alojamiento robusto para evitar problemas como <a href=\"https:\/\/kinqsta.com\/es\/blog\/inactividad-del-sitio\/\">tiempos de inactividad<\/a>, <a href=\"https:\/\/kinqsta.com\/es\/blog\/prevenir-ataques-ddos\/\">ataques DDoS<\/a> y otros. Aqu\u00ed es donde los proveedores de alojamiento premium como Kinsta destacan.<\/p>\n<p>Kinsta ofrece un potente <a href=\"https:\/\/kinqsta.com\/es\/wordpress-hosting\/\">Alojamiento Administrado de WordPress<\/a>\u00a0con una arquitectura totalmente en contenedores, impulsado exclusivamente por <a href=\"https:\/\/kinqsta.com\/es\/blog\/plataforma-en-la-nube-para-desarrolladores\/\">Google Cloud Platform<\/a> en la red de Nivel Premium de Google.<\/p>\n<p><a href=\"https:\/\/kinqsta.com\/es\/contactar\/\">Ponte en contacto con nosotros<\/a> para obtener m\u00e1s informaci\u00f3n sobre nuestra soluci\u00f3n superior de alojamiento administrado.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress es un sistema de gesti\u00f3n de contenidos (CMS, content management system) muy popular para crear blogs, tiendas de comercio electr\u00f3nico y otros sitios web. Destaca &#8230;<\/p>\n","protected":false},"author":287,"featured_media":76008,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345,1355],"class_list":["post-76007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-wordpress","topic-temas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo crear un tema cl\u00e1sico de WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-02T09:27:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-06T09:25:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso\",\"datePublished\":\"2024-08-02T09:27:33+00:00\",\"dateModified\":\"2024-08-06T09:25:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\"},\"wordCount\":2791,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\",\"name\":\"C\u00f3mo crear un tema cl\u00e1sico de WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png\",\"datePublished\":\"2024-08-02T09:27:33+00:00\",\"dateModified\":\"2024-08-06T09:25:54+00:00\",\"description\":\"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear un tema cl\u00e1sico de WordPress - Kinsta\u00ae","description":"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso","og_description":"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.","og_url":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-08-02T09:27:33+00:00","article_modified_time":"2024-08-06T09:25:54+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso","datePublished":"2024-08-02T09:27:33+00:00","dateModified":"2024-08-06T09:25:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/"},"wordCount":2791,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/","url":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/","name":"C\u00f3mo crear un tema cl\u00e1sico de WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png","datePublished":"2024-08-02T09:27:33+00:00","dateModified":"2024-08-06T09:25:54+00:00","description":"Aprende a crear un tema cl\u00e1sico de WordPress desde cero creando archivos de plantillas y utilizando las funciones de WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/create-your-own-wordpress-theme-3.png","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinqsta.com\/es\/secciones\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo crear un tema cl\u00e1sico de WordPress: gu\u00eda paso a paso"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/76007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=76007"}],"version-history":[{"count":10,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/76007\/revisions"}],"predecessor-version":[{"id":76039,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/76007\/revisions\/76039"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76007\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/76008"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=76007"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=76007"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=76007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}