Inicio/conocimiento/WordPress/Detalles del contenido

¿Cómo desarrollar y personalizar tu primer tema para WordPress responsive?

Lectura en 4 minutos
2026-03-21
2026-06-04
2,430
Gano comisiones cuando compras a través de los enlaces de abajo, sin coste adicional para ti.

Preparativos y configuración del entorno de desarrollo

Antes de comenzar a escribir código, es de vital importancia establecer un entorno de desarrollo eficiente. Esto no solo mejorará tu eficiencia laboral, sino que también asegurará que el código sea estándar y fácil de mantener.

En primer lugar, necesitas un entorno de desarrollo local. Puedes utilizar herramientas como XAMPP, MAMP o Local by Flywheel, que te permiten configurar rápidamente un entorno de servidor en tu ordenador que incluya PHP y MySQL. Después de instalar y iniciar los servicios, asegúrate de que Apache (o Nginx) y MySQL estén en funcionamiento.

A continuación, descargue los archivos más recientes del núcleo de WordPress y descomprímalos en la carpeta raíz del sitio web en su servidor local (por ejemplo, la carpeta raíz de XAMPP). htdocs Acceda a la carpeta a través de un navegador. http://localhost/your-wordpress-folder Para completar el proceso de instalación de WordPress, recuerde el nombre de la base de datos, el nombre de usuario y la contraseña que configuró.

Lecturas recomendadas Introducción práctica a Tailwind CSS: Una guía de diseño para crear sitios web modernos y responsivos。

Para editores de código, se recomiendan Visual Studio Code, PhpStorm o Sublime Text. Estos editores ofrecen una excelente funcionalidad de resaltado de sintaxis y sugerencias de código para PHP, HTML, CSS y JavaScript. Además, es conveniente instalar algunos complementos (plugins) necesarios, como los que proporcionan sugerencias inteligentes para el desarrollo con WordPress, así como Git para la gestión de versiones.

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).
LOGO de UltaHost página de acceso

Finalmente, en el directorio de instalación de WordPress local, navegue hasta… wp-content/themes Carpeta. Aquí, crea una nueva carpeta para el tema que vas a desarrollar; por ejemplo, nómbrala como… my-first-themeEsta carpeta contendrá todos los archivos relacionados con tu tema.

Crear el archivo central del tema

Un tema de WordPress está compuesto por una serie de archivos estándar, y hay dos archivos que son obligatoriamente necesarios:style.css Y index.phpEstos archivos definen la información básica y la estructura del tema.

Primero, crea… style.css El archivo no solo contiene tus hojas de estilo, sino también metadatos sobre el tema en sí. Estos datos se muestran en la página “Apariencia” -> “Temas” del panel de administración de WordPress.

/*
Theme Name: 我的第一个响应式主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义响应式WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

A continuación, cree… index.php Este es el archivo de plantilla principal del tema. Se utiliza cuando WordPress no encuentra una plantilla más específica. single.php o page.phpSe utiliza cuando sea necesario. Uno de los ejemplos más simples… index.php Puede contener únicamente el código básico que incluye la llamada a la cabecera de WordPress, el ciclo principal y el pie de página.

Lecturas recomendadas Domina Tailwind CSS: una guía práctica desde lo básico hasta la práctica real.。

<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1011>
    ¿php_body_open();?&gt;
    <header>
        <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
        <p>¿¿php bloginfo( 'description' );?&gt;</p>
    </header>
    <main>
        ¿php si (tiene publicaciones()): mientras (tiene publicaciones()): the_post();?&gt;
            <article>
                <h2>¿¿¿php the_title();???</h2>
                ¿¿php the_content(); ??
            </article>
        ¿¿php endwhile; endif;?&gt;
    </main>
    <footer>
        <p>© ¿¿¿  ¿¿¿</p>
    </footer>
    ¿php_footer();?&gt;
</body>
</html>

En este momento, tu tema ya puede ser activado. Accede a la página “Apariencia” -> “Temas” en el panel de administración de WordPress. Deberías ver “Mi primer tema responsive”. Actívalo y visita la página principal del sitio web para ver los efectos básicos del mismo.

Agregar soporte para la función de temas.

Para mejorar aún más la funcionalidad de los temas, necesitamos… functions.php El archivo añade soporte para las funciones principales de WordPress.functions.php Los archivos son como el “cerebro” de un tema, y sirven para almacenar todas las funciones personalizadas, clases, ganchos (hooks) y filtros.

Crear uno functions.php El archivo, y añade el siguiente código para soportar las miniaturas de los artículos, los menús personalizados y los marcadores HTML5.

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%.
LOGO hosting.com página de acceso 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Implementar diseño y estilos adaptables

El diseño responsive significa que tu sitio web ofrece una buena experiencia de navegación en dispositivos de diferentes tamaños, como ordenadores de escritorio, tablets y teléfonos móviles. Lo logramos principalmente mediante las consultas de medios (Media Queries) en CSS y el diseño fluido.

En primer lugar, en style.css Debajo de la metainformación, se deben definir los estilos globales básicos para sentar las bases de un diseño responsive. Utilizaremos tecnologías de diseño CSS modernas como Flexbox.

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

A continuación, se agregarán consultas de medios (media queries) para realizar ajustes según la anchura de la pantalla. Esto es esencial para un diseño responsive.

Lecturas recomendadas Crea un sitio web único: una guía completa desde el inicio hasta el dominio del desarrollo de temas de WordPress.。

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

Optimizar la adaptabilidad del menú de navegación

En dispositivos con pantallas pequeñas, como los teléfonos móviles, los menús de navegación horizontales tradicionales pueden resultar demasiado apretados. Una solución común es convertirlos en menús tipo “hamburguer” (menús desplegables). Para ello, necesitaremos utilizar CSS junto con un poco de JavaScript.

En primer lugar, en header La modificación parcial de la estructura HTML del menú suele ser realizada mediante herramientas proporcionadas por WordPress. wp_nav_menu Generación de funciones. Para controlar el estilo, le agregamos un nombre de clase y también un botón en forma de hamburguesa.

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.
LOGOTIPO DE INTERSERVER página de acceso

En tu… header.php En el archivo de plantilla (del cual se necesita obtener el contenido). index.php El código del menú podría ser el siguiente (separado en partes):

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

Luego, en CSS, por defecto, el menú se oculta en pantallas pequeñas. Cuando el usuario hace clic en el botón de hamburguesa, se cambia un atributo de clase (como `display`) mediante JavaScript para mostrar el menú. .toggled) para mostrar el menú.

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

Por último, añada un archivo JavaScript sencillo (por ejemplo: js/navigation.js) y a través de functions.php Se introduce un mecanismo para manejar los eventos de clic en los botones.

Crear plantillas de páginas y componentes personalizados

La flexibilidad de WordPress se debe en gran medida a su sistema de niveles de plantillas y componentes (Widgets). Crear plantillas y áreas de componentes personalizadas puede enriquecer significativamente las funcionalidades de tu tema.

Construir plantillas de páginas personalizadas

Supongamos que quieres crear una plantilla de página de ancho completo (full-width page) que no tenga barras laterales y cuyo contenido ocupe todo el ancho de la pantalla. Para comenzar, crea un nuevo archivo en el directorio raíz del tema y nómbralo… page-fullwidth.phpEn la parte superior de este archivo, se debe agregar una nota que indique el nombre del template.

<p>
<main id="main" class="site-main full-width">
    <p><strong>Este es un ejemplo de código PHP</strong></p>  
&lt;?php  
while ( have_posts() ) :  
    the_post();  
    the_title( &#039;<h1 class="entry-title">', '</h1>' );  
    the_content();  
endwhile;  
?&gt;
</main>
<br />

Ahora, cuando creas o edites una página en el backend de WordPress, en el menú desplegable “Plantilla” de las “Propiedades de la página”, puedes seleccionar la opción “Página de ancho completo”. Una vez que hagas esto, la página se renderizará utilizando el archivo de plantilla que acabas de crear.

Región para componentes del sidebar de registro

La zona de componentes permite que los usuarios añadan contenido a posiciones específicas de un tema (como la barra lateral o el pie de página) mediante el arrastre y soltado. Necesitamos… functions.php Registre una zona para la barra lateral en…

utilizar register_sidebar Se trata de una función para el registro. Esta función recibe un array de parámetros que se utilizan para definir el nombre, el ID, la descripción y la etiqueta de envoltorio del sidebar.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Barra lateral principal', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Añada gadgets aquí.', 'my-first-theme' ),
        'before_widget' =&gt; '  function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Main sidebar', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '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' );

Después de registrarte, necesitarás incluir esta área de componentes en el lugar adecuado del tema. Por lo general, la barra lateral se encuentra en... sidebar.php En el archivo, y luego en el archivo de plantilla principal (por ejemplo…). index.php o single.php) A través de get_sidebar() Introducción a las funciones.

En sidebar.php En chino, se usa dynamic_sidebar Función para generar la salida de la zona de los componentes.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

resúmenes

Desarrollar y personalizar tu primer tema responsive para WordPress es un proceso que, a la vez, presenta desafíos y ofrece una gran sensación de logro. Siguiendo los pasos descritos en este artículo, has creado tu propio entorno de desarrollo y has generado los archivos esenciales que son necesarios para construir el tema. style.css Y index.phpY a través de… functions.php Se ha mejorado la funcionalidad de los temas. Has aplicado de manera práctica los principios del diseño web responsive, utilizando consultas de medios en CSS y el sistema de layout Flexbox para garantizar la compatibilidad del sitio web en diversos dispositivos. Finalmente, también has explorado el potente sistema de plantillas y la API de componentes de WordPress, aprendiendo cómo crear plantillas de páginas personalizadas y zonas de componentes que se pueden arrastrar y colocar a voluntad.

Una vez que domines estos conceptos básicos, podrás continuar explorando características más avanzadas de los temas para WordPress, como la creación de tipos de artículos personalizados, el API del editor de temas y el soporte para editores de bloques. De esta manera, podrás crear temas con funciones más potentes y un diseño más profesional.

FAQ Preguntas más frecuentes

¿Debo comenzar el desarrollo de un tema desde cero?

No necesariamente. Aunque comenzar desde cero te permite tener un control total y comprender cada detalle, para principiantes o en escenarios donde se necesita un desarrollo rápido, es una opción más eficiente empezar con temas existentes (como los que utilizan los caracteres “_”) o con frameworks integrados (como Bootstrap). Esto te proporciona una base de código sólida y acorde con las mejores prácticas, sobre la cual puedes realizar personalizaciones.

¿Cómo depuro mi tema de WordPress?

El método de depuración más común utilizado en el desarrollo de WordPress es activar la funcionalidad de depuración del mismo. WP_DEBUGEn tu… wp-config.php En el documento, se indicará que... define( 'WP_DEBUG', false ); Modifíquelo como sigue: define( 'WP_DEBUG', true );Esto obligará a WordPress a mostrar todos los errores, advertencias y notificaciones de PHP en la pantalla. Además, se puede utilizar la herramienta de desarrollo del navegador (panel de Consoleta, Elementos y Red) para depurar JavaScript, CSS y las solicitudes de red.

¿Por qué no se ha aplicado el cambio en mi tema de inmediato?

Esto generalmente se debe al caché del navegador o a un plugin de caché de WordPress. Primero, intenta actualizar la página forzadamente en el navegador (Ctrl+F5 o Cmd+Shift+R). Si estás utilizando un plugin de caché, por favor borra el caché de ese plugin. Además, asegúrate de que estás modificando el archivo correcto dentro de la carpeta del tema activo. functions.php A veces, para actualizar un archivo basta con actualizar la página en el lado del servidor, ya que dicho archivo se lee cada vez que se carga la página.

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

Hacer que un tema sea compatible con múltiples idiomas (internacionalización y localización) es una buena práctica. Esto implica principalmente dos pasos: en primer lugar, en todos los lugares del tema donde el texto necesite ser traducido, se debe utilizar la función de traducción de WordPress para encapsular dicho texto. Por ejemplo… __('Hello World', 'my-first-theme')En segundo lugar, se utilizan herramientas como Poedit para escanear los archivos de temas y generar el contenido necesario. .pot Luego, cree un archivo de plantilla y, a continuación, cree el correspondiente para cada idioma. .po Y después de la compilación. .mo El archivo debe ser colocado dentro del tema correspondiente. /languages/ En el directorio. Finalmente, en functions.php En el uso chino load_theme_textdomain Función para cargar la traducción.

¿Qué se debe tener en cuenta al desarrollar temas comerciales?

Es necesario desarrollar temas comerciales para la distribución, los cuales deben cumplir con requisitos mucho más estrictos que los temas utilizados de forma personal. Es esencial seguir rigurosamente los estándares de revisión del directorio de temas de WordPress para garantizar la seguridad del código y la ausencia de errores. Es preciso realizar una validación y un escape exhaustivos de todos los datos ingresados y generados por los usuarios, utilizando funciones seguras. esc_html, esc_urlEl tema debe incluir documentación detallada y comentarios útiles. Además, se recomienda encarecidamente que el tema ofrezca soporte completo para las funciones principales de WordPress (como el editor de bloques y la posibilidad de personalizar el logotipo), y que sea compatible con los plugins más populares. Por último, considera incorporar soporte para un configurador de temas, para proporcionar a los usuarios una experiencia de personalización intuitiva y en tiempo real.

¿Qué sigue, qué sigue?

Si estás creando o optimizando un sitio web de WordPress, te recomendamos que continúes leyendo sobre optimización de rendimiento, configuración de complementos y personalización de temas.

Lectura ampliada y conocimientos prácticos

Los siguientes están relacionados con el tema de este artículo y son adecuados para una lectura más profunda. A menudo es mejor priorizar empezando por el artículo que más se acerque a su problema actual y ampliando gradualmente a los temas circundantes.

Etiquetas.