Guía de inicio para el desarrollo de temas para WordPress: Crea tu primer tema desde cero

Preparativos antes de comenzar

Antes de comenzar a escribir cualquier código, es necesario asegurarse de que el entorno de desarrollo esté listo. En primer lugar, necesitas un entorno de servidor local, como XAMPP, MAMP o Docker. Además, es esencial contar con un editor de código; Visual Studio Code o PHPStorm son opciones muy buenas. Lo más importante es instalar la versión más reciente de WordPress y asegurarte de que funcione correctamente.

A continuación, en el directorio de instalación de WordPress:wp-content/themesDentro de la carpeta, crea una nueva carpeta que será tu directorio principal para los temas. Por ejemplo, puedes nombrarla…my-first-themeEl nombre de este directorio se convertirá directamente en tu identificador de tema; por lo tanto, se recomienda utilizar letras minúsculas, números y guiones.

Dentro de la carpeta de temas, hay dos archivos que son esenciales y mínimos para iniciar un tema de WordPress:style.cssYindex.phpSin ellas, WordPress no podrá reconocer tu tema en la lista de “Apariencias” -> “Temas” que se encuentra en la parte posterior del administrador.

Lecturas recomendadas Aprender a desarrollar temas de WordPress desde cero: una guía completa para crear un sitio web personalizado。

Comprender la estructura central de los documentos del tema

Un tema de WordPress completo y funcional consta de una serie de archivos de plantilla que siguen convenciones de nombre específicas. Cada archivo es responsable de renderizar diferentes partes 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

Estilos de tabla y declaración de información de tema

style.cssLos archivos no se utilizan únicamente para escribir estilos CSS; su área de comentarios en la parte superior es el lugar donde WordPress lee los metadatos (meta data) del tema. Esta área debe encontrarse en la parte más alta del archivo y seguir un formato específico.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” se utiliza para la internacionalización y es un identificador clave para la carga posterior de los archivos de traducción. Después de completar esta información, actualiza la página de temas en el backend de WordPress y deberías ver una miniatura llamada “Mi primer tema”.

¿Cuál es la función del archivo de plantilla principal?

index.phpEs el archivo de plantilla principal de tu tema y también la plantilla de “reversión” predeterminada del sitio web. Cuando WordPress no encuentra un archivo de plantilla más específico…single.phpopage.phpCuando se utiliza…index.phpSu estructura más básica consiste en la inclusión de la cabecera de WordPress, el contenido del ciclo principal y la parte final del código.

¿¿php get_header();??

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

¿¿¿php get_footer();???

Ampliar los modelos básicos e incorporar nuevas funcionalidades

Soloindex.php、style.cssNo es suficiente; necesitamos separar las partes como la cabecera, el pie de página y los barras laterales para que la estructura sea más clara, y también debemos incorporar las funciones esenciales del tema.

Lecturas recomendadas Desde cero: Te enseñamos paso a paso a desarrollar un tema personalizado para WordPress.。

Separar los templates de la parte superior (cabeza) de los templates de la parte inferior (pie)

Crearheader.phpEl archivo contiene una declaración del tipo de documento, así como el código HTML.Algunas partes, así como los títulos y las áreas de navegación del sitio web. Utiliza…wp_head()Los “ganchos” (hooks) se utilizan para garantizar que los plugins y el núcleo de WordPress inyecten correctamente los scripts y estilos necesarios.

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

Crearfooter.phpEl archivo contiene la información del pie de página del sitio web y realiza una llamada (una función o instrucción) al final de su contenido.wp_footer()Gancho.

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

De esta manera,index.phpEn este caso, podemos utilizarlo.get_header()Yget_footer()Se utilizan funciones para introducirlos.

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

Crear un archivo de funciones

functions.phpEs el “cerebro” del tema, utilizado para agregar funciones, registrar menús, activar imágenes destacadas, definir barras laterales, etc. No se trata de un archivo de plantilla, sino de un archivo PHP que se carga automáticamente al iniciar el tema.

A continuación está…functions.phpUn ejemplo básico de:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Crear más archivos de plantillas.

Para que los diferentes tipos de páginas tengan un diseño más adecuado, necesitamos crear más archivos de plantillas específicos.

Lecturas recomendadas De la instalación al dominio: guía completa de WordPress para crear un sitio web y consejos prácticos para un análisis completo。

Página única del artículo y plantilla de página

single.phpSe utiliza para renderizar un artículo de blog individual. Su estructura es similar a…index.phpSimilar, pero generalmente incluye plantillas para comentarios.comments.phpLa llamada a…

page.phpSe utiliza para renderizar páginas estáticas. Por lo general, no muestra metadatos como categorías o etiquetas, sino que se centra principalmente en el contenido de la página en sí.

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

Plantilla de lista de archivo de artículos

archive.phpSe utiliza para mostrar páginas de archivo que contienen información sobre categorías, etiquetas, autores, fechas, etc. Puedes utilizar etiquetas condicionales para personalizar la presentación de estos datos según las necesidades.is_category()、is_tag()Para distinguir los diferentes tipos de archivos y mostrar sus títulos correspondientes…

Crear una página de error 404

404.phpEs la página que se muestra cuando un usuario accede a una URL que no existe. Una buena página 404 debe contener un mensaje amigable, un cuadro de búsqueda y enlaces a las páginas principales, para ayudar al usuario a encontrar el contenido que busca.

resúmenes

A través de esta guía, has completado todo el proceso desde la creación de carpetas y archivos esenciales, hasta la comprensión de la estructura jerárquica de los templates, pasando por la extensión de las funciones del tema y la creación de templates personalizados. Has construido un tema que cuenta con una estructura básica, es reconocido por WordPress y dispone de funciones adicionales. Aunque puede parecer sencillo, ya incluye todos los conceptos fundamentales. A continuación, puedes profundizar en el aprendizaje de los tags de los templates, el uso de consultas personalizadas y los ciclos de WordPress, así como en cómo crear tipos de artículos y opciones de personalización del tema para hacer que tus funciones sean aún más potentes y personalizadas.

FAQ Preguntas más frecuentes

¿Por qué mi tema no se muestra en la interfaz administrativa de WordPress (backend)?
Por favor, primero verifica si la carpeta de temas está ubicada en el lugar correcto.wp-content/themes/En el directorio. En segundo lugar, asegúrese de que la carpeta contenga los elementos necesarios.style.cssYindex.phpArchivo. Finalmente, ábralo.style.cssAsegúrate de que el bloque de comentarios con la información temática en la parte superior del archivo esté formateado de manera completamente correcta, en particular…Theme Name:Esta línea.

¿Cómo puedo agregar soporte para un logotipo personalizado a mi tema?

Necesitas trabajar en el tema…functions.phpAñada una línea de código al archivo para activar esta función.add_theme_support( ‘custom-logo’ )Función: Una vez activada, los usuarios podrán cargar y configurar su logotipo en “Apariencia” -> “Personalizar” -> “Identidad del sitio”. También es necesario que…header.phpUsa el lugar adecuado dentro del texto.the_custom_logo()Se utiliza una función para mostrarlo.

¿Cuál es la diferencia entre el archivo functions.php del tema y los plugins?

functions.phpLas funciones contenidas en el sistema están estrechamente vinculadas al tema activo en ese momento. Si cambias de tema, esas funciones dejarán de estar disponibles. Por otro lado, las funciones de los plugins son independientes del tema; siempre que el plugin esté activado, sus funciones seguirán funcionando, sin importar qué tema estés utilizando. Por lo tanto, si tus funciones están muy relacionadas con la presentación visual del tema (como la ubicación de los botones de registro o la definición del diseño de la página), sería conveniente colocarlas dentro de los plugins.functions.phpSi se trata de funciones genéricas (como formularios de contacto o optimización SEO), sería más adecuado desarrollarlas como plugins.

¿Cómo puedo hacer que mi tema admita múltiples idiomas?

Tienes que hacer dos cosas. La primera es, durante el desarrollo, envolver todas las cadenas de texto dirigidas al usuario utilizando una función de traducción. Por ejemplo…__( ‘文本’, ‘my-first-theme’ )o_e( ‘文本’, ‘my-first-theme’ )Y asegúrate de…‘my-first-theme’Constyle.cssEn primer lugar, debe asegurarse de que el “Text Domain” declarado coincida con el especificado en los documentos relevantes. En segundo lugar, utilice herramientas como Poedit para extraer todas las cadenas de texto que necesitan ser traducidas del código de su tema y generar un archivo de traducciones adecuado..potEl archivo, luego es traducido por el personal de traducción al idioma correspondiente..poY después de la compilación..moEl archivo se debe colocar dentro del tema correspondiente./languages/En el directorio.