{"id":233552,"date":"2023-02-17T20:16:00","date_gmt":"2023-02-17T17:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233552"},"modified":"2022-11-11T00:18:35","modified_gmt":"2022-11-10T21:18:35","slug":"tutorial-de-temas-de-wordpress-para-principiantes-parte-2-plantillas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/tutorial-de-temas-de-wordpress-para-principiantes-parte-2-plantillas\/","title":{"rendered":"Tutorial de temas de WordPress para principiantes \u2013 Parte 2: Plantillas"},"content":{"rendered":"\n

Esta lecci\u00f3n del tutorial de temas de WordPress para principiantes le ense\u00f1ar\u00e1 c\u00f3mo estructurar los principales componentes b\u00e1sicos de un tema y comenzar a crear plantillas. Comenzaremos a crear algunos resultados HTML y c\u00f3mo incluir los componentes b\u00e1sicos en las plantillas de nuestro tema. En el paso anterior<\/a> configuramos lo m\u00ednimo de un tema de WordPress y lo activamos. Pero a partir de ahora no est\u00e1 haciendo mucho y ni siquiera contiene HTML v\u00e1lido para una p\u00e1gina web. Arreglemos eso.<\/p>\n

Bloques de creaci\u00f3n de encabezado y pie de p\u00e1gina (y barra lateral)<\/h2>\n

En nuestros archivos de plantilla necesitamos HTML v\u00e1lido. Podr\u00edamos escribir la estructura HTML completa (comenzando con <html><\/code>, <head><\/code>y full <body><\/code>) en index.php<\/code>, pero esto se vuelve poco pr\u00e1ctico cuando se mantienen varios archivos de plantilla en su tema. Imagine haber creado un mont\u00f3n de plantillas y luego darse cuenta de que necesita un peque\u00f1o cambio en la parte del encabezado; luego necesitar\u00eda editar todas las plantillas para que se mantengan consistentes. Esto no es inteligente.<\/p>\n

\"Tutorial<\/a><\/p>\n

La soluci\u00f3n es dividir la estructura HTML completa en partes sensibles; bloques de construcci\u00f3n. Cada bloque reside en su propio archivo, y siempre que los necesitamos en una plantilla, los incluimos. Los bloques m\u00e1s comunes y sensibles son uno para el encabezado, uno para el pie de p\u00e1gina y otro para el contenido, pero si su tema tiene una barra lateral, la barra lateral tambi\u00e9n debe ser un edificio separado.<\/p>\n

Aquellos de ustedes que est\u00e1n m\u00e1s familiarizados con PHP probablemente est\u00e9n familiarizados con los m\u00e9todos include()<\/code>o require()<\/code>. Esto es precisamente lo que haremos, sin embargo usaremos las funciones de WordPress para incluir otros archivos ya que vienen con beneficios adicionales.<\/p>\n

En esta lecci\u00f3n, crearemos el encabezado, el pie de p\u00e1gina y la barra lateral como bloques de construcci\u00f3n. Sin embargo, las barras laterales se han vuelto cada vez menos comunes en las p\u00e1ginas web, pero seguiremos implementando una barra lateral derecha en nuestro tema. Estos tres bloques de construcci\u00f3n son una pr\u00e1ctica com\u00fan en todos los temas de WordPress, y en realidad es muy com\u00fan que WordPress ofrezca automatizaci\u00f3n para esas tres cosas.<\/p>\n

Crear las plantillas de encabezado, pie de p\u00e1gina y barra lateral<\/h2>\n

Vamos a crear un nuevo archivo vac\u00edo llamado header.php<\/code>en nuestra carpeta de temas. Agregaremos algo de HTML muy b\u00e1sico por ahora (no se preocupe, agregaremos m\u00e1s HTML adecuado m\u00e1s adelante).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Cree un nuevo archivo con el nombre footer.php<\/code>en su directorio de temas. Todo lo que necesitamos (por ahora) en este archivo es el cierre de nuestra estructura HTML.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
Y finalmente, cree un nuevo archivo vac\u00edo llamado sidebar.php<\/code>. Agregamos solo la etiqueta HTML <aside><\/code>dentro.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Incluyendo los bloques de construcci\u00f3n<\/h2>\n
Volvamos a nuestro index.php<\/code>archivo. Todo lo que tenemos que hacer ahora es decirle a WordPress d\u00f3nde queremos incluir el archivo de encabezado y pie de p\u00e1gina. Obviamente, queremos cargar el encabezado al principio y el pie de p\u00e1gina al final de este archivo.<\/p>\n
WordPress ofrece funciones simples para incluir estos bloques de construcci\u00f3n; get_header()<\/code>y get_footer()<\/code>para el archivo de encabezado y pie de p\u00e1gina, respectivamente. Bastante intuitivo, \u00bfverdad? Agreguemos esos en nuestro index.php y veamos qu\u00e9 sucede.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
Actualice su interfaz e inspeccione o vea la fuente HTML para ver que hemos combinado varios bloques de construcci\u00f3n para crear una estructura HTML completa.<\/p>\n
\"Tutorial<\/a><\/p>\n
\u00a1Ahora puede editar el contenido index.php<\/code>independientemente del encabezado y el pie de p\u00e1gina!<\/p>\n
Incluyamos tambi\u00e9n la barra lateral. Tenga en cuenta que en su tema es posible que desee considerar casos y plantillas donde no desea la barra lateral, por ejemplo, la p\u00e1gina principal.<\/p>\n
Incluir la barra lateral es tan f\u00e1cil como el encabezado y el pie de p\u00e1gina; para esto usamos get_sidebar()<\/code>. Agreguemos eso a index.php, justo antes de obtener el pie de p\u00e1gina.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
Actualice y deber\u00eda ver la fuente HTML, incluido nuestro <aside><\/code>. No se preocupe, en un paso posterior aprenderemos c\u00f3mo convertirlo en un \u00e1rea real de la barra lateral donde puede colocar widgets.<\/p>\n
Nuestro tema es bastante est\u00e1tico en este momento. En la pr\u00f3xima lecci\u00f3n<\/a> de esta serie de tutoriales de temas de WordPress, finalmente comenzaremos a sumergirnos correctamente en las funciones de WordPress para cargar contenido e informaci\u00f3n de WordPress din\u00e1micamente en nuestras plantillas.<\/p>\n
Documentaci\u00f3n sobre los m\u00e9todos utilizados<\/h2>\n