wp-content\/themes<\/code> Dentro de la carpeta, crea una nueva carpeta para tu tema; por ejemplo, n\u00f3mbrala como \u00abtema_m\u00edo\u00bb. my-first-theme<\/code>Esta carpeta es el directorio ra\u00edz de tu tema. Luego, debes crear dos archivos b\u00e1sicos y esenciales:style.css<\/code> Y index.php<\/code>\u3002<\/p>\n\n\n\nstyle.css<\/code> El archivo no solo contiene tus estilos de tema, sino que, lo que es m\u00e1s importante, incluye un encabezado de informaci\u00f3n del tema escrito en comentarios CSS (Theme Header). Este encabezado es la \u00fanica informaci\u00f3n que permite a WordPress reconocer tu tema.<\/p>\nLecturas recomendadas De cero a uno: Gu\u00eda completa y consejos pr\u00e1cticos para el desarrollo de temas para WordPress<\/a>\u3002<\/p>\n\n\n\n\n\/*\nTheme Name: \u6211\u7684\u7b2c\u4e00\u4e2a\u4e3b\u9898\nTheme URI: http:\/\/example.com\/my-first-theme\/\nAuthor: \u4f60\u7684\u540d\u5b57\nAuthor URI: http:\/\/example.com\/\nDescription: \u8fd9\u662f\u4e00\u4e2a\u4ece\u96f6\u5f00\u59cb\u521b\u5efa\u7684 WordPress \u4e3b\u9898\u793a\u4f8b\u3002\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: my-first-theme\n*\/<\/code><\/pre>\n\n\n\nindex.php<\/code> Es el archivo de plantilla principal de tu tema y tambi\u00e9n el archivo de respaldo final que utiliza WordPress al buscar plantillas. Debe contener, al menos, las llamadas al c\u00f3digo central de WordPress para generar la cabecera de la p\u00e1gina, el ciclo de contenido y el pie de p\u00e1gina.<\/p>\n\n\r\n\r\n \r\n \r\n \r\n Servidor de WordPress de UltaHost <\/strong>\r\n Garant\u00eda de reembolso en 30 d\u00edas, ancho de banda ilimitado y bases de datos, protecci\u00f3n gratuita contra ataques DDoS; descuento del 50% al comprar por 3 a\u00f1os (versiones de 4 TB y 5 TB).<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"LOGO](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251227020448.webp\" "\\"\\"")
\r\n ![\"LOGO](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251229052118.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n p\u00e1gina de acceso <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\n<!DOCTYPE html>\n<html no numeric noise key 1005>\n<head>\n <meta charset="<?php bloginfo( 'charset' ); ?>">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n ¿\n<\/head>\n<body no numeric noise key 1002>\n \n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nComprender los niveles de estructura de un modelo tem\u00e1tico<\/h3>\n\n\n\n
Antes de crear otros archivos de plantilla, es esencial comprender la jerarqu\u00eda de plantillas de WordPress (Template Hierarchy). Esta jerarqu\u00eda determina qu\u00e9 archivo de plantilla utiliza WordPress para renderizar los diferentes tipos de p\u00e1ginas (como la p\u00e1gina principal, las p\u00e1ginas de art\u00edculos, las p\u00e1ginas individuales y las p\u00e1ginas de categor\u00edas). Por ejemplo, cuando se accede a un art\u00edculo en particular, WordPress busca en el siguiente orden:single-post-{slug}.php<\/code> -> single-post-{id}.php<\/code> -> single.php<\/code> -> singular.php<\/code> -> index.php<\/code>Al dominar esta regla, podr\u00e1s crear archivos espec\u00edficos (como\u2026). single.php<\/code> o page.php<\/code>) para controlar con precisi\u00f3n el aspecto de las diferentes p\u00e1ginas.<\/p>\n\n\n\nConstruir la plantilla central de un tema<\/h2>\n\n\n\n
Un tema completo no deber\u00eda constar de solo una parte. index.php<\/code>Para lograr una mejor organizaci\u00f3n y reutilizaci\u00f3n del c\u00f3digo, necesitamos dividir la p\u00e1gina en varias partes y luego incorporarlas a trav\u00e9s de funciones.<\/p>\n\n\n\nSeparar la cabecera y el pie de p\u00e1gina<\/h3>\n\n\n\n
Crear header.php<\/code> El archivo se utiliza para almacenar la parte superior del documento HTML (DOCTYPE, \u2026)., <head><\/code> Algunas partes, as\u00ed como la secci\u00f3n inicial del cuerpo de la p\u00e1gina (como el t\u00edtulo del sitio web y la navegaci\u00f3n principal). En consecuencia, se debe crear lo correspondiente. footer.php<\/code> Archivo utilizado para almacenar el contenido de la parte inferior de la p\u00e1gina (como la informaci\u00f3n sobre derechos de autor) y las etiquetas de cierre.<\/p>\n\n\n\nDespu\u00e9s de eso, index.php<\/code> En ese caso, puedes usarlo. get_header()<\/code> Y get_footer()<\/code> Se utilizan funciones para introducirlos, lo que hace que la estructura sea m\u00e1s clara.<\/p>\nLecturas recomendadas Gu\u00eda completa para principiantes en el desarrollo de temas para WordPress: Crea tu primer tema desde cero<\/a>\u3002<\/p>\n\n\n\n\nCrear una plantilla para el sidebar<\/h3>\n\n\n\n
Si el tema requiere una barra lateral, se puede crear. sidebar.php<\/code> El archivo contiene informaci\u00f3n que se utiliza en\u2026 dynamic_sidebar()<\/code> Se utiliza una funci\u00f3n para invocar los barras laterales registradas en la zona de los widgets. Esto se hace en el template principal. get_sidebar()<\/code> Se utiliza una funci\u00f3n para introducirlo.<\/p>\n\n\n\nImplementar un ciclo de art\u00edculos y un modelo de contenido<\/h3>\n\n\n\n
El ciclo de art\u00edculos es el coraz\u00f3n de un tema de WordPress; se utiliza para obtener y mostrar los art\u00edculos de la base de datos. index.php<\/code> o single.php<\/code> En este caso, utilizamos estructuras de bucle est\u00e1ndar. Para controlar de manera m\u00e1s modular la visualizaci\u00f3n de los art\u00edculos en listas (como la p\u00e1gina principal o las p\u00e1ginas de archivo) y en las p\u00e1ginas individuales de cada art\u00edculo, es posible crear\u2026 content.php<\/code> O crearlos por separado. content-single.php<\/code> Y content-excerpt.php<\/code>\u3002<\/p>\n\n\n\nDentro del ciclo, utiliza\u2026 get_template_part()<\/code> Se utiliza una funci\u00f3n para llamar a estos archivos de plantillas de contenido, por ejemplo:get_template_part( 'content', get_post_format() );<\/code>\u3002<\/p>\n\n\r\n\r\n \r\n \r\n \r\n hosting.com Alojamiento compartido <\/strong>\r\n Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al d\u00eda, 7 d\u00edas a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protecci\u00f3n contra malware y DDoS, ahorro de hasta 73%.<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"LOGO](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/09\/20250901222940.svg\" "\\"\\"")
\r\n ![\"LOGO](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228220957.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n p\u00e1gina de acceso <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\nLa integraci\u00f3n de las funciones y estilos del tema<\/h2>\n\n\n\n
Un tema excelente no solo debe tener una buena apariencia, sino que tambi\u00e9n debe potenciar sus funcionalidades a trav\u00e9s de los archivos de configuraci\u00f3n correspondientes.<\/p>\n\n\n\n
Introducir el archivo de funciones para el tema.<\/h3>\n\n\n\n
Crear functions.php<\/code> Este archivo no es un archivo de plantilla, pero representa el \u201cn\u00facleo\u201d de un tema; se utiliza para agregar funcionalidades espec\u00edficas del tema, men\u00fas de registro, barras laterales, as\u00ed como para incorporar scripts y estilos. WordPress lo carga autom\u00e1ticamente al iniciar el tema.<\/p>\n\n\n\nEn este archivo, puedes utilizar\u2026 add_theme_support()<\/code> Funciones para habilitar las funcionalidades tem\u00e1ticas, como las miniaturas de los art\u00edculos (Featured Image), el logotipo personalizado (Custom Logo) y el soporte para etiquetas HTML5.<\/p>\nLecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestr\u00eda: La gu\u00eda esencial para crear sitios web personalizados<\/a>\u3002<\/p>\n\n\n\n\nfunction my_first_theme_setup() {\n \/\/ \u6dfb\u52a0\u6587\u7ae0\u548c\u8bc4\u8bba\u7684 RSS feed \u94fe\u63a5\u5230 head\n add_theme_support( 'automatic-feed-links' );\n \/\/ \u542f\u7528\u6587\u7ae0\u7f29\u7565\u56fe\u529f\u80fd\n add_theme_support( 'post-thumbnails' );\n \/\/ \u6ce8\u518c\u4e00\u4e2a\u5bfc\u822a\u83dc\u5355\u4f4d\u7f6e\n register_nav_menus( array(\n 'primary' => __( '\u4e3b\u5bfc\u822a\u83dc\u5355', 'my-first-theme' ),\n ) );\n}\nadd_action( 'after_setup_theme', 'my_first_theme_setup' );<\/code><\/pre>\n\n\n\n\u00c1rea de registro de herramientas auxiliares<\/h3>\n\n\n\n
En functions.php<\/code> En chino, se usa register_sidebar()<\/code> Las funciones pueden definir una o m\u00e1s \u00e1reas de widgets (Widget Areas), lo que permite a los usuarios arrastrar y colocar componentes en la interfaz de \u201cwidgets\u201d que se encuentra en segundo plano.<\/p>\n\n\n\nfunction my_first_theme_widgets_init() {\n register_sidebar( array(\n 'name' => __( 'Barra lateral principal', 'my-first-theme' ),\n 'id' => 'sidebar-1',\n 'description' => __( 'Añada gadgets aquí.', 'my-first-theme' ),\n 'before_widget' => ' function my_first_theme_widgets_init() {\n register_sidebar( array(\n 'name' => __( 'Main sidebar', 'my-first-theme' ),\n 'id' => 'sidebar-1',\n 'description' => __( 'Add gadgets here.', 'my-first-theme' ),\n 'before_widget' => ' <'<section id="%1$s" class="widget %2$s">',\n 'after_widget' => '<\/section>',\n 'before_title' => '<h2 class="widget-title">',\n 'after_title' => '<\/h2>',\n ) );\n}\nadd_action( 'widgets_init', 'my_first_theme_widgets_init' );<\/code><\/pre>\n\n\n\nCargar correctamente los estilos y los scripts.<\/h3>\n\n\n\n
Nunca uses directamente el c\u00f3digo en los archivos de plantillas. <link><\/code> o <script><\/code> Las etiquetas introducen archivos CSS y JavaScript codificados de forma r\u00edgida. El m\u00e9todo correcto es usar functions.php<\/code> En el uso chino wp_enqueue_style()<\/code> Y wp_enqueue_script()<\/code> Funci\u00f3n, y luego montarla. wp_enqueue_scripts<\/code> En el gancho. Esto asegura que las dependencias est\u00e9n configuradas correctamente y evita la carga repetida de recursos.<\/p>\n\n\r\n\r\n \r\n \r\n \r\n Alojamiento compartido InterServer <\/strong>\r\n Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD c\u00f3digo promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalaci\u00f3n en un clic.<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"LOGOTIPO](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228045033.svg\" "\\"\\"")
\r\n ![\"LOGOTIPO](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251229054830.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n p\u00e1gina de acceso <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\nfunction my_first_theme_scripts() {\n \/\/ \u52a0\u8f7d\u4e3b\u6837\u5f0f\u8868\n wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );\n \/\/ \u52a0\u8f7d\u5bfc\u822a\u811a\u672c\uff0c\u4f9d\u8d56 jQuery\n wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '\/js\/navigation.js', array('jquery'), '1.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );<\/code><\/pre>\n\n\n\nInternacionalizaci\u00f3n del tema y preparaci\u00f3n para su publicaci\u00f3n<\/h2>\n\n\n\nImplementar la traducci\u00f3n de temas.<\/h3>\n\n\n\n
Para que tu tema pueda ser utilizado por usuarios de todo el mundo, la internacionalizaci\u00f3n (i18n) es un paso esencial. Esto significa que debes envolver todas las cadenas de texto dirigidas al usuario utilizando funciones de traducci\u00f3n. La funci\u00f3n m\u00e1s com\u00fanmente utilizada es\u2026 __()<\/code>(Se utiliza para mostrar la traducci\u00f3n en PHP) y _e()<\/code>(Se utiliza para generar la salida traducida en PHP). Adem\u00e1s, style.css<\/code> La cabeza y functions.php<\/code> En la funci\u00f3n de carga, es necesario configurar correctamente el dominio de texto (Text Domain); por ejemplo, el que establecimos anteriormente. my-first-theme<\/code>\u3002<\/p>\n\n\n\nRealizar las pruebas finales y la compresi\u00f3n.<\/h3>\n\n\n\n
Antes de la publicaci\u00f3n, es necesario realizar pruebas exhaustivas en diferentes entornos (versiones diferentes de PHP, versiones diferentes de WordPress) y en diferentes dispositivos (ordenadores de escritorio, tablets, tel\u00e9fonos m\u00f3viles). Comprobar que todos los archivos de plantilla funcionen correctamente, que las funciones se implementen seg\u00fan lo esperado y que cumplan con los est\u00e1ndares oficiales de revisi\u00f3n de temas de WordPress.<\/p>\n\n\n\n
Finalmente, elimina todo el c\u00f3digo de depuraci\u00f3n y las notas (a menos que sean de utilidad para los usuarios), y utiliza herramientas como CodeKit o compresores en l\u00ednea para comprimir tus archivos CSS y JavaScript con el fin de reducir su tama\u00f1o. Empaca todo el contenido de la carpeta del tema en un archivo ZIP, y estar\u00e1s listo para enviarlo al directorio de temas de WordPress.org o distribuirlo entre los usuarios.<\/p>\n\n\n\n
res\u00famenes<\/h2>\n\n\n\n
Crear un tema para WordPress desde cero es un proceso de aprendizaje sistem\u00e1tico que abarca desde la configuraci\u00f3n del entorno, la comprensi\u00f3n de la estructura de los templates, la creaci\u00f3n de los archivos de plantilla principales, hasta el desarrollo de funciones adicionales para personalizar el aspecto y el funcionamiento del tema. functions.php<\/code> Un proceso integral que integra funciones avanzadas. La clave radica en seguir los est\u00e1ndares de codificaci\u00f3n y las mejores pr\u00e1cticas de WordPress, como el uso de funciones incorporadas, la introducci\u00f3n correcta de recursos y la implementaci\u00f3n de la internacionalizaci\u00f3n. Al poner en pr\u00e1ctica los pasos descritos en este art\u00edculo, no solo obtendr\u00e1s un tema funcional, sino que tambi\u00e9n comprender\u00e1s a fondo los mecanismos fundamentales que rigen el funcionamiento de los temas de WordPress, lo que te proporcionar\u00e1 una base s\u00f3lida para desarrollar temas m\u00e1s complejos y profesionales.<\/p>\n\n\n\nFAQ Preguntas m\u00e1s frecuentes<\/h2>\n\n\n\n\u00bfEs necesario dominar PHP para crear temas?<\/h3>\n\n\n\n
S\u00ed, dominar a fondo PHP es una condici\u00f3n esencial para desarrollar temas personalizados para WordPress. Dado que WordPress est\u00e1 escrito en PHP, todos los archivos de plantilla (como\u2026 index.php<\/code>, single.php<\/code>\uff09y los archivos de funciones (functions.php<\/code>Todo se genera din\u00e1micamente utilizando c\u00f3digo PHP para crear contenido, acceder a la base de datos y manejar la l\u00f3gica de funcionamiento. Sin conocimientos de PHP, no ser\u00e1 posible comprender ni trabajar con las partes esenciales del tema.<\/p>\n\n\n\n\u00bfEs necesario escribir todo el c\u00f3digo desde cero para el desarrollo de un tema?<\/h3>\n\n\n\n
No necesariamente. Para los principiantes, comenzar desde cero es una excelente opci\u00f3n de aprendizaje. Sin embargo, en el trabajo pr\u00e1ctico, los desarrolladores a menudo utilizan \u201ctemas de inicio\u201d (Starter Themes) o \u201ctemas padre\u201d (Parent Themes) como base. Por ejemplo, el tema oficial _Underscores (_s) es un punto de partida de alta calidad y minimalista que cumple con las normas de codificaci\u00f3n; ya cuenta con una estructura de archivos b\u00e1sica y funciones comunes, lo que permite personalizar y desarrollar el c\u00f3digo de manera m\u00e1s eficiente, asegurando as\u00ed su calidad.<\/p>\n\n\n\n
\u00bfQu\u00e9 consecuencias puede tener un error en el archivo functions.php?<\/h3>\n\n\n\n
functions.php<\/code> Los errores de sintaxis o errores fatales en un archivo pueden provocar que el sitio web de WordPress muestre una \u201cPantalla Blanca de la Muerte\u201d (White Screen of Death), lo que impide el acceso tanto a la interfaz frontal como a la de administraci\u00f3n. Esto ocurre porque dicho archivo se ejecuta en la fase inicial de carga del tema. En este caso, es necesario utilizar FTP o un administrador de archivos del servidor para renombrar o reemplazar la carpeta del tema defectuoso por uno que funcione correctamente (por ejemplo, Twenty Twenty-Six), a fin de recuperar el acceso al sitio. Posteriormente, se puede proceder a corregir el c\u00f3digo err\u00f3neo.<\/p>\n\n\n\n\u00bfC\u00f3mo puedo hacer que mi tema sea compatible con el editor Gutenberg?<\/h3>\n\n\n\n
Para que el tema brinde mejor soporte al editor de bloques Gutenberg, primero se debe\u2026 functions.php<\/code> En el uso chino add_theme_support( \u2018editor-styles\u2019 )<\/code> para habilitar la compatibilidad con los estilos del editor. Luego, utiliza add_editor_style()<\/code> La funci\u00f3n incorpora tu tabla de estilos para temas o un archivo CSS dise\u00f1ado espec\u00edficamente para el editor en el editor de backend, lo que asegura que los estilos que ven los usuarios durante la edici\u00f3n sean lo m\u00e1s consistentes posible con la visualizaci\u00f3n en la parte frontal del sitio web. Adem\u00e1s, tambi\u00e9n es posible agregar soporte para funciones como el alineamiento de contenidos en anchura y la personalizaci\u00f3n de colores.<\/p>","protected":false},"excerpt":{"rendered":"Este art\u00edculo presenta los pasos iniciales para crear el primer tema para WordPress. Se explica en detalle c\u00f3mo preparar el entorno de desarrollo local, c\u00f3mo crear el archivo `style.css` que contiene los datos de configuraci\u00f3n del tema y el archivo de plantilla b\u00e1sico `index.php`, y se describe brevemente el concepto de jerarqu\u00eda de plantillas en WordPress, lo que sentar\u00e1 las bases para la construcci\u00f3n de temas completos en el futuro.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[1911,638,2196,2040,2144],"knowledge_category":[280],"class_list":["post-12378188","knowledge_post","type-knowledge_post","status-publish","hentry","tag-php-templates","tag-wordpress-theme-development","tag-theme-making-tutorial","tag-theme-file-structure","tag-local-development-environment","knowledge_category-wordpress"],"acf":{"site_seo_keywords":"WordPress\u4e3b\u9898\u5f00\u53d1,\u521b\u5efaWordPress\u4e3b\u9898,\u4e3b\u9898\u5236\u4f5c\u6559\u7a0b,style.css,index.php,\u6a21\u677f\u5c42\u7ea7,\u672c\u5730\u5f00\u53d1\u73af\u5883,\u4ece\u96f6\u5f00\u59cb\u5efa\u4e3b\u9898"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/knowledge_posts\/12378188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":1,"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/knowledge_posts\/12378188\/revisions"}],"predecessor-version":[{"id":12405533,"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/knowledge_posts\/12378188\/revisions\/12405533"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/media?parent=12378188"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/tags?post=12378188"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/es\/wp-json\/wp\/v2\/knowledge_category?post=12378188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}