Cómo crear un tema de WordPress desde cero con Underscores

5.2 footer.php

  ltfooter class=site-footergt
    ltpgtcopy ltphp echo date(Y) gt ltphp bloginfo(name) gtlt/pgt
    ltphp
      wp_nav_menu(array(
        theme_location =gt menu-footer,
        container =gt false,
      ))
    gt
  lt/footergt
  ltphp wp_footer() gt
lt/bodygt
lt/htmlgt

5.3 index.php amp loop básico

ltphp get_header() gt

ltmain class=site-maingt
  ltphp if(have_posts()): while(have_posts()): the_post() gt
    ltarticle id=post-ltphp the_ID() gt ltphp post_class() gtgt
      lth2gtlta href=ltphp the_permalink() gtgtltphp the_title() gtlt/agtlt/h2gt
      ltdiv class=entry-contentgtltphp the_excerpt() gtlt/divgt
    lt/articlegt
  ltphp endwhile else: gt
    ltpgtNo se encontraron entradas.lt/pgt
  ltphp endif gt
lt/maingt

ltphp get_sidebar() get_footer() gt

5.4 Otras plantillas

• single.php: entrada individual con the_content().
• page.php: página estática.
• archive.php amp category.php: listados por fecha, categoría o taxonomía.
• search.php: resultados de búsqueda.
• 404.php: página de error, elemento crítico para la UX.

6. Estilos CSS y diseño responsivo

Underscores incluye un CSS base. Agrega tu propio archivo assets/css/style.css y modifícalo:

/ Tipografía y paleta minimalista /
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif
  color: #333
  margin: 0
  padding: 0
}
a { color: #0066cc text-decoration: none }
.site-header, .site-footer { background: #f9f9f9 padding: 20px text-align: center }
.site-main { padding: 30px }
/ Responsivo /
@media (max-width: 768px) {
  .site-main { padding: 15px }
  .main-navigation ul { display: flex flex-direction: column }
}

7. Menús, sidebars y widgets

En functions.php registra las áreas de widgets:

function mi_tema_widgets_init() {
  register_sidebar(array(
    name => __(Sidebar Principal,mi-tema),
    id   => sidebar-1,
    before_widget => ltdiv class=widget-areagt,
    after_widget => lt/divgt,
    before_title  => lth4 class=widget-titlegt,
    after_title   => lt/h4gt,
  ))
}
add_action(widgets_init,mi_tema_widgets_init)

Llama la barra lateral en sidebar.php:

ltaside id=secondary class=widget-areagt
  ltphp dynamic_sidebar(sidebar-1) gt
lt/asidegt

8. Customizer y traducción

8.1 Personalización en vivo

function mi_tema_customize_register(wp_customize) {
  // Título del sitio
  wp_customize->add_setting(mi_tema_logo)
  wp_customize->add_control(new WP_Customize_Image_Control(
    wp_customize, mi_tema_logo, array(
      label    => __(Logo,mi-tema),
      section  => title_tagline,
      settings => mi_tema_logo,
    )
  ))
}
add_action(customize_register,mi_tema_customize_register)

8.2 Internacionalización (i18n)

Añade en functions.php:

function mi_tema_textdomain() {
  load_theme_textdomain(mi-tema, get_template_directory()./languages)
}
add_action(after_setup_theme,mi_tema_textdomain)

Crea carpeta languages y genera el archivo mi-tema.pot con herramientas como Poedit o WP-CLI. Luego traduce a es_ES.po/mo, en_US.po/mo, etc.

9. Pruebas, validación y despliegue

• Revisa la compatibilidad con las guías de desarrollo de temas de WordPress: WordPress Theme Handbook.
• Prueba de rendimiento usando GTmetrix o PageSpeed Insights.
• Validación de HTML/CSS en W3C Validator.
• Pruebas de accesibilidad con WAVE o Accessibility Insights.

Finalmente, comprime tu tema y súbelo a tu servidor de producción en /wp-content/themes/mi-tema/. Actívalo desde el panel de administración de WordPress.

Conclusión

Desarrollar un tema de WordPress con Underscores te proporciona una base sólida y actualizada, lista para personalizar y escalar según tus necesidades. Desde la configuración inicial hasta la publicación, este enfoque modular y minimalista garantiza un producto profesional, optimizado y fácil de mantener. Explora la documentación oficial de temas para profundizar aún más y mantener tu tema a la vanguardia de las mejores prácticas.