Introducción al desarrollo de temas para WordPress: Crea tu primer tema personalizado desde cero

Preparación y configuración del entorno.

Antes de comenzar a escribir código, necesitas un entorno de desarrollo local estable y profesional. Se recomienda encarecidamente no modificar los archivos del tema directamente en un servidor en línea, ya que un entorno de desarrollo local te permitirá realizar pruebas sin afectar el acceso normal al sitio web. Puedes elegir software de entornos integrados, como XAMPP, MAMP (para Mac) o Laragon (para Windows), los cuales instalan y configuran automáticamente Apache, MySQL y PHP con un solo clic.

WordPress también necesita ser instalado en tu entorno local. Visita el sitio web oficial de WordPress para descargar el paquete de instalación más reciente y descomprímelo en la carpeta raíz del sitio web en tu servidor local (por ejemplo, en la carpeta correspondiente a XAMPP). htdocs Luego, acceda al archivo a través de un navegador y complete el famoso proceso de instalación que dura “cinco minutos”. Durante el proceso de instalación, recuerde la información de datos que has configurado.

Finalmente, necesitas un editor de código o un entorno de desarrollo integrado (IDE) que te sea conveniente utilizar. Visual Studio Code, PhpStorm o Sublime Text son opciones excelentes, ya que ofrecen funciones como resaltado de sintaxis, sugerencias de código y gestión de archivos, lo que mejora significativamente la eficiencia del desarrollo.

Lecturas recomendadas Domina el desarrollo de temas de WordPress paso a paso: construye un tema personalizado desde cero。

Comprender la estructura básica de los temas de WordPress

Un tema de WordPress es, en esencia, un conjunto de archivos que se encuentran en /wp-content/themes/ Los archivos y directorios que se encuentran dentro de este directorio siguen ciertas reglas específicas. Juntos, trabajan para indicar a WordPress cómo debe mostrar la apariencia y el contenido del sitio web.

Servidor de WordPress de UltaHost

Garantía de reembolso en 30 días, ancho de banda ilimitado y bases de datos, protección gratuita contra ataques DDoS; descuento del 50% al comprar por 3 años (versiones de 4 TB y 5 TB).

página de acceso

El mecanismo más central de WordPress es el “nivel de plantillas”. Este sistema selecciona automáticamente el archivo de plantilla correspondiente en función del tipo de página que se está visitando para mostrar el contenido. Por ejemplo, al acceder a un artículo de blog, WordPress busca primero la plantilla adecuada para ese tipo de contenido. single.phpCuando se accede a la página principal del blog, se busca… home.php o index.phpEste mecanismo otorga una gran flexibilidad a los temas.

Cada tema debe contener dos archivos básicos:style.css Y index.php。style.css La función de estos archivos no es solo proporcionar estilo; el bloque de comentarios en la parte superior del archivo sirve como una especie de “identificación” del tema, ya que utiliza para comunicar a WordPress información metadéctica como el nombre del tema, el autor, la descripción, entre otros detalles.index.php Se trata de la última medida de seguridad: si los demás archivos de plantillas más específicos no existen, WordPress utilizará este archivo.

Un ejemplo típico de comentario en la cabecera de un tema es el siguiente:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Se utiliza para la internacionalización; es un identificador que se emplea en las llamadas posteriores a las funciones de traducción.

Lecturas recomendadas Construir un sitio web profesional: Una guía completa para crear un tema personalizado para WordPress desde cero。

Además de estos dos archivos, un tema completo y funcional suele incluir también:header.php(Cabeza de la página web)footer.php(En la parte inferior de la página),sidebar.php(Barra lateral) y también functions.php(Archivo de mejoras en las funciones de los temas). Al comprender esta estructura básica, ya tienes el esqueleto necesario para desarrollar temas.

Crear el archivo de plantilla principal

Ahora, comencemos a crear el primer tema. En tu… /wp-content/themes/ En el directorio, cree una nueva carpeta y nómenela, por ejemplo, “Nuevo_Diritorio”. my-first-themeLuego, cree el archivo más básico dentro de esa carpeta.

Primero, crea… style.cssY añada las notas de cabecera sobre los temas mencionados en la parte anterior. A continuación, cree… index.phpEste es tu primer archivo de plantilla. Es la versión más simple posible. index.php Se puede incluir únicamente un ciclo que muestra el título y el contenido del artículo.

hosting.com Alojamiento compartido

Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al día, 7 días a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protección contra malware y DDoS, ahorro de hasta 73%.

página de acceso

¿¿php get_header();??
<main>
  ¿  
    ¿
      <article>
        <h2>¿¿¿php the_title();???</h2>
        <div>¿¿php the_content(); ??</div>
      </article>
    
    <p>No hay contenido disponible.</p>
  ¿¿php endif; ?&gt;
</main>
¿¿¿¿php get_sidebar();???  
¿¿¿php get_footer();???

Este código utiliza etiquetas de plantilla. get_header(), get_sidebar(), get_footer(), the_title() Y the_content()Para que funcione, necesitas crear los archivos correspondientes para la cabecera, el menú lateral y el pie de página.

Crear header.phpDebería contener la parte inicial del documento HTML, hasta que comience la zona principal de contenido.

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ¿
</head>
<body no numeric noise key 1004>
  <header>
    <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
    <p>¿¿php bloginfo( 'description' );?&gt;</p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

Aquí,wp_head() Es un hook de vital importancia, ya que permite que el núcleo de WordPress, los plugins y los temas inserten el código necesario en la parte superior de la página (como enlaces a las hojas de estilo).body_class() La función genera una serie de nombres de clases CSS semánticos, lo que te facilita un control detallado de los estilos.

Lecturas recomendadas La estructura básica y el funcionamiento de WordPress.。

Crear footer.php Para cerrar las etiquetas que están abiertas:

  <footer>
    <p>© ¿¿¿  ¿¿¿</p>
    ¿php_footer();?&gt;
  </footer>
</body>
</html>

Atención,wp_footer() Es “y”. wp_head() El gancho en la parte posterior, que es relativo al resto, también es indispensable.

Alojamiento compartido InterServer

Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD código promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalación en un clic.

página de acceso

Crear sidebar.phpPor el momento, se puede agregar solo una llamada a un control simple:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

En este momento, tu tema ya cuenta con la función básica de “plantillas predefinidas”, la cual puede ser activada y previsualizada en el backend. Aunque es sencilla, sigue la arquitectura central de WordPress.

Mejorar las funcionalidades de un tema a través de Functions.php

functions.php El archivo es el “centro de control” de tu tema. No se trata de un archivo de plantilla, sino de un archivo PHP que se carga automáticamente al iniciar el tema, y que se utiliza para agregar funcionalidades, registrar componentes y conectarlos con las diversas API de WordPress. Este es un elemento clave para lograr la personalización y la profesionalización de tu tema.

Debes crear este archivo en la carpeta raíz del tema. Primero, añadiremos los archivos de estilo y las scripts al tema. La forma correcta de hacerlo es mediante las funciones proporcionadas por WordPress, en lugar de escribirlos directamente en el HTML. <link> Etiquetas.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Aquí,wp_enqueue_style() Y wp_enqueue_script() Es una función utilizada para agregar recursos de manera segura.get_stylesheet_uri() Relacionado con el tema. style.css。add_action() Montar nuestra función en… wp_enqueue_scripts En este gancho, asegúrate de que se ejecute en el momento adecuado.

A continuación, regístre el menú de navegación y la barra lateral (zona de herramientas):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Haz que en la interfaz de “Apariencia” -> “Menú” del backend aparezcan opciones de ubicación para los platos disponibles para selección.add_theme_support() Las funciones se utilizan para activar diversas funcionalidades temáticas, lo cual es una práctica estándar en el desarrollo de temas modernos. Por ejemplo, para activar… title-tag Después de eso, ya no tendrás que hacerlo. header.php Se produce manualmente a partir de los datos proporcionados. <title> Ya lo etiqueté.

Finalmente, registre una zona para herramientas en la barra lateral:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Barra lateral principal', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Añada gadgets aquí.', 'my-first-theme' ),
        'before_widget' => '  function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add gadgets here.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Hasta ahora, tu tema ya cuenta con una cadena completa que abarca desde la presentación básica hasta la mejora de sus funcionalidades. Mediante el menú de configuraciones en el backend y la adición de herramientas adicionales, podrás observar los cambios dinámicos que ocurren en el tema.

resúmenes

Desde el momento en que se crea algo que contenga… style.css Y index.php Comenzando por la carpeta correspondiente, se procede a la creación de componentes de plantilla separados (templates).header.php, footer.phpLuego, a través de un sistema potente… functions.php Has completado el proceso básico para crear un tema personalizado para WordPress, incluyendo la configuración del menú de registro de archivos, el diseño de la barra lateral y la carga segura de los recursos necesarios. El corazón de este proceso reside en comprender y seguir la estructura de las plantillas de WordPress, así como el sistema de ganchos (hooks).

Ya no eres simplemente un usuario de un tema, sino su creador. Después de dominar estos conceptos básicos, podrás continuar profundizando en el estudio de archivos de plantillas más complejos. single.php、page.php、archive.phpExplore más posibilidades de los ciclos en WordPress y utilice etiquetas condicionales (como…) is_page(), is_single()Se logra un control más preciso de las páginas. El mundo del desarrollo de temas es amplio y fascinante; esto es solo un punto de partida sólido.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para desarrollar temas para WordPress?

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

¿Por qué es necesario usar las funciones wp_head() y wp_footer()?

Estas dos funciones son los ganchos (hooks) centrales de WordPress.wp_head() Se encuentra en </head> Antes de las etiquetas, permite que el núcleo de WordPress, los plugins y tu propio tema inserten el código necesario en la parte superior de la página, como enlaces a tablas de estilo CSS, metaetiquetas, variables JavaScript, etc.wp_footer() Se encuentra en </body> Suelen utilizarse antes de los etiquetas para insertar código de análisis o archivos JavaScript que se cargan de forma retardada. Si faltan, muchos plugins no funcionarán correctamente, e incluso algunas funciones propias de WordPress podrían presentar errores.

¿Cómo puedo agregar un modelo de página a mi tema?

Cree un nuevo archivo PHP, por ejemplo… page-fullwidth.phpEn la parte superior de este archivo, es necesario agregar un bloque de comentarios con el nombre del template específico. Por ejemplo:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Luego, puedes escribir en este archivo contenido que sea diferente al que ya existe. page.php La estructura HTML, por ejemplo, con la omisión de ciertos elementos… get_sidebar() Después de guardar los cambios, al editar la página en el backend de WordPress, en el menú desplegable “Plantillas” de las “Propiedades de la página”, aparecerá la opción “Página de ancho completo” para que la selecciones.

¿Cuáles son las mejores prácticas para manejar CSS y JavaScript durante el desarrollo de temas?

La mejor práctica es utilizar lo que ofrece WordPress. wp_enqueue_style() Y wp_enqueue_script() Función, en… functions.php Se monta en… wp_enqueue_scripts Se utilizan “ganchos” (hooks) para agregar recursos. Este método permite: 1) gestionar correctamente las dependencias (por ejemplo, si tu script depende de jQuery); 2) evitar la carga repetida del mismo recurso; 3) facilitar la administración de plugins y otros códigos de temas; 4) cumplir con los estándares de codificación de WordPress. Es esencial evitar el uso directo de recursos en los archivos de plantillas. <link> o <script> Recursos con etiquetas codificados de forma fija (hard-coded).

¿Cómo puedo implementar soporte para múltiples idiomas (internacionalización) en mi tema?

Tienes que hacer dos cosas. Primero, en… style.css Al traducir el texto que contiene comentarios de cabecera y llamadas a funciones, es importante utilizar el “dominio de texto” (Text Domain) correcto. Como se indica en la guía, es necesario definirlo adecuadamente para garantizar que la traducción sea precisa y coherente. Text Domain: my-first-themeEn segundo lugar, en functions.php En todos los archivos de plantillas, se debe envolver todo el texto de la interfaz de usuario que necesite ser traducido utilizando las funciones de traducción de WordPress. La más común de estas funciones es… __()(Regresar a la cadena traducida) y _e()(Es el texto que se va a mostrar directamente después de la traducción.) Por ejemplo:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Después de eso, puedes utilizar herramientas como Poedit para generar lo que necesitas. .pot Archivo de plantilla, utilizado por los traductores para crear versiones del texto en diferentes idiomas. .po Y .mo Documentos.