Cómo Crear Un Tema De WordPress Responsive Usando HTML5


Paso 4: creación de un diseño con plantillas

header.php

header.php definirá la parte superior de nuestro documento, comenzando con la declaración DOCTYPE .

Todos los documentos HTML deben comenzar con una declaración DOCTYPE , que le dice a su navegador web cómo interpretar el documento. El doctype HTML5 es simplemente html . La etiqueta <html> de apertura necesita un atributo de idioma, y WordPress proporciona una función para ingresar el código de idioma correcto para el idioma que seleccionó durante la instalación - language_attributes () .

En el campo de título, usa una línea de código que muestra el nombre de su sitio, seguido de una abreviatura si ... entonces ... la declaración para mostrar el lema de su sitio web o el título de la página o publicación actual que está viendo.

Los carácter ? es un operador condicional en PHP llamado el operador ternario. En esta línea de código, is_front_page ()  es una función de WordPress que devuelve TRUE si mira la página principal, o FALSE si visualiza cualquier publicación o página. La función antes de los dos puntos se usa si se devolvió VERDADERO, y la función después de los dos puntos se usa si se devuelve FALSO.

Como verá a continuación, la función bloginfo () se usa repetidamente con diferentes parámetros para obtener diferentes datos de la base de datos de WordPress. Antes de que la etiqueta <head> se cierre con </head>, debe incluir el enganche de acción wp_head () para asegurarse de que se ejecutan todas las funciones asociadas.

La función body_class () le da a su body las clases predeterminadas de CSS establecidas por WordPress. La línea final permite que se muestre el menú de navegación si se ha creado uno en el panel de control de administración. El header.php final se ve así:
Si desea utilizar un logotipo como encabezado, reemplace <?php bloginfo(‘name’); ?> con su código de imagen dentro de las etiquetas <header>.
Guarde header.php y cárguelo en la carpeta de su tema.

index.php

index.php define la página de inicio y también se usará como el diseño predeterminado si no se encuentran las plantillas específicas (es decir, single.php, page.php).

Usaremos etiquetas de plantilla para asegurarnos de que el código del encabezado (get_header), sidebar (get_sidebar) y footer (get_footer) esté incluido en nuestra página de inicio.

El bucle de WordPress mostrará una lista de publicaciones y sus extractos con más etiquetas de plantilla. También usaremos los elementos semánticos HTML5 <section> , <main> , <header> y <article> . Algunos de nuestros elementos tendrán clases asignadas y las clases se escribirán cuando lleguemos al archivo style.css.
El ciclo comienza en <?Php if (have_posts ()): while (have_posts ()): the_post ();?> y termina en <?php endif;?> . Dentro del ciclo, se utilizan las siguientes etiquetas de plantilla:

  • <?php the_permalink ();?> - muestra la URL correcta de la publicación real
  • <?php the_title_attribute ();?> - muestra el título de la publicación en un formato seguro para el atributo de título del enlace
  • <?php the_title ();?> - muestra el título de la publicación
  • <?php the_author ();?> - muestra el nombre del autor
  • <?php the_excerpt ();?> - muestra el fragmento de la publicación, que se genera automáticamente si no escribes la tuya
Las etiquetas <header> </header> se pueden usar varias veces en cualquier página y no se refieren específicamente al encabezado de la página. 
Las secciones y los artículos deben tener elementos de encabezado donde se usa cualquier texto dentro de <h1> , <h2> , etc. Si una sección o artículo no tiene texto de cabecera, pueden omitirse.

Guarde index.php y cárguelo en el directorio de su tema. Si visita su sitio ahora, verá una página muy simple.

Sin embargo, puede ver que el título de la pestaña es el nombre y el lema de su sitio web. La parte superior de la página tiene el título de su sitio web (o su logotipo si lo usó en su lugar). Cualquier publicación que exista tiene su título, autor y extracto mostrado. Aunque la página se mostrará bien, aún necesita cerrar las etiquetas abiertas <body> y <html> en footer.php .

footer.php

footer.php define el pie de página de cada página y debe cerrar cualquier etiqueta HTML abierta en otros archivos de plantilla. En este caso, <body> y <html> siguen abiertos desde header.php.

También debe incluir el enganche de acción wp_footer () para garantizar que cualquier código final de WordPress y jаvascript se agregue a la página. Si inició sesión como administrador cuando visitó su página de inicio, publicaciones o páginas, notará que falta la barra de administración. El código que muestra la barra de administración está enganchado al enlace de acción wp_footer().

También agregaremos el elemento semántico HTML5 <footer> </footer> para definir explícitamente nuestro pie de página.
Guarde footer.php y cárguelo en el directorio de su tema.

single.php

single.php define el diseño cuando se ve una sola publicación en su sitio web. Puede ser completamente diferente a index.php.

En este caso, no agregaremos la barra lateral a las publicaciones solo para resaltar la diferencia en el diseño.

El contenido principal ocupa todo el ancho de la página ya que le dimos la clase content-full-width desde la hoja de estilo. El enlace fue eliminado del título ya que no es necesario aquí. La función para mostrar la publicación completa es the_content ():

page.php

page.php define la forma en que se muestran las páginas y puede ser diferente una vez más del índice y el diseño de la publicación.

Recuerde que si las plantillas no existen, en su lugar se usa la plantilla index.php. Si no crea page.php, no usará el mismo diseño que posts.php.

Para hacer la diferencia más visible, una vez más agregaremos la barra lateral a este diseño y haremos que el contenido de la página ocupe el 70% del ancho de la página.
Guarde page.php y cárguelo en el directorio de su tema.

style.css

Agregue lo siguiente a la parte inferior de la hoja de estilo. Esto hará que los diversos cuadros tengan un fondo blanco y un borde azul, para ayudar a visualizar cuánto espacio ocupa realmente cada uno.
Guarde style.css y cárguelo en el directorio de su tema.
Ahora que tiene las plantillas básicas y una hoja de estilo, puede navegar fácilmente por sus publicaciones y páginas. Su tema recién creado debería verse así.

Usando consultas de medios(media queries)


Como nuestro diseño básico tiene 2 cuadros en línea en la página principal, podemos cambiar fácilmente la forma en que se comportan cuando la ventana del navegador es demasiado pequeña para mostrar el texto correctamente.

Para este tutorial temático de WordPress, cambiaremos el ancho de las publicaciones en la lista de publicaciones cuando la ventana del navegador sea inferior a 800 px. En lugar de tener 2 publicaciones de lado a lado, cada publicación tendrá su propia línea. Haremos esto agregando una consulta de medios. Si necesita una actualización sobre consultas de medios, diríjase a la página ¿Qué es el "diseño sensible"? sección de este tutorial antes de continuar.

Al escribir consultas sobre medios, puede escribirlas en cualquier lugar de la hoja de estilo. Puede poner todas las consultas de medios en la parte inferior de la hoja de estilo, o escribir consultas específicas de medios para elementos específicos justo debajo de la definición original. Es solo una cuestión de lo que consideras más lógico.

Primero escribiremos una consulta de medios que afecta a la clase .article-loop , que tiene un ancho del 49% por defecto. Lo escribiremos directamente debajo de la definición original. La consulta de medios indicará que si la ventana del navegador es más pequeña que 800 píxeles de ancho, la clase .article-loop debería usar el 99% del espacio disponible en su lugar.

Luego, escribiremos una consulta de medios que, cuando la ventana del navegador sea más pequeña que 600 píxeles de ancho, empuja la barra lateral debajo del contenido principal y extiende tanto el contenido principal como la barra lateral para tomar el ancho del 100%. Esta sería una disposición mucho más apropiada para un dispositivo móvil donde el espacio es limitado.

Aún en style.css, encuentre .article-loop que debería ser la línea 73. A continuación , clase de artículo en bucle , escriba lo siguiente:
La primera línea aquí indica que la consulta de medios solo debe afectar a las pantallas (es decir, no al modo de vista previa de impresión) y solo afecta a las ventanas del navegador que tienen un ancho de 800 píxeles o menos. Guarde y cargue style.css en el directorio de su tema. Vaya a la página de inicio de su sitio web. Cambie el tamaño de la ventana de su navegador y, a medida que pase 800 píxeles de ancho, verá los cuadros de cada publicación cambiar de ancho y colocar uno debajo del otro.

Continúe reduciendo el ancho de la ventana del navegador hasta que sea lo más pequeño posible. Verá que todo el texto se vuelve más difícil de leer, ya que tiene muy poco espacio, pero en ningún momento desaparece de la pantalla. Si los anchos se definieron como anchuras de píxeles en lugar de porcentajes, tan pronto como la ventana se volviera demasiado pequeña, la barra lateral desaparecería y requeriría desplazamiento horizontal.

La siguiente consulta de medios que agregaremos será similar a la anterior. Le dirá al contenido principal y a la barra lateral que tome el 100% del espacio disponible, y la barra lateral caerá debajo del contenido principal.
NOTA:  Como esto afecta a diferentes clases que están en diferentes lugares en la hoja de estilo, vale la pena colocarlo en la parte inferior de la hoja de estilo en su lugar.
Guarde style.css y cárguelo en el directorio de su tema. Regrese a su página de inicio y cambie el tamaño de la ventana del navegador hasta que vea que el contenido ocupa el 100% del ancho y la barra lateral cae debajo del contenido principal.

Usando la barra lateral, haga clic en cualquier página disponible y verá que la barra lateral también está debajo del contenido de la página, y todo encaja adecuadamente.

Comprender las etiquetas de plantillas de WordPress y los ganchos de acción


Para integrar completamente su tema con WordPress, debe usar etiquetas de plantilla y ganchos de acción. Estas son dos cosas distintas.

Etiquetas de plantilla

Las etiquetas de plantilla son funciones de PHP proporcionadas por WordPress para incluir fácilmente archivos de plantilla (como header.php ) de su tema en otro archivo o para mostrar información de la base de datos.

Por ejemplo, para mostrar el pie de página en la página de inicio pero no en ninguna otra página, agregue  get_footer() en la parte inferior de index.php , pero no en page.php.

A continuación hay dos listas breves de algunas etiquetas de plantilla importantes para darle una idea de qué etiquetas están disponibles.

Etiquetas de plantilla para incluir archivos de plantilla:

  • get_header() - incluye la plantilla header.php
  • get_sidebar() - incluye la plantilla sidebar.php
  • get_footer() - incluye la plantilla footer.php
  • get_search_form() - incluye la plantilla searchform.php
 
Etiquetas de plantilla para mostrar información de la base de datos:

NOTA:  Algunas etiquetas de plantilla deben usarse en el ciclo. El ciclo se explica más adelante en el tutorial, y simplemente se refiere al código que recupera las publicaciones solicitadas.

  • bloginfo() : muestra la información solicitada como parámetro, es decir, bloginfo ("nombre") muestra el nombre de su sitio web tal como se define en el Panel de control de administración (ver la lista de parámetros)
  • single_post_title() - muestra el título de la publicación actualmente vista cuando se usa en single.php
  • the_author(): muestra el autor de la publicación que se está viendo actualmente.
  • the_content() - muestra el texto principal de una publicación o página
  • the_excerpt() - el extracto de la publicación o página
La lista completa de etiquetas de plantilla de WordPress se puede encontrar aquí.

Ganchos de acción


Los ganchos de acción son funciones PHP proporcionadas por WordPress que generalmente tienen otras funciones asociadas. Algunos ganchos no tienen funciones adjuntas por defecto y existen para ser usadas por plugins. Los ganchos de acción permiten que los complementos adjunten sus propias funciones y que se ejecuten en varios puntos de la carga de una página.

En la plantilla del encabezado de su tema, se llama al enganche de acción wp_head() para incluir el header HTML predeterminado de WordPress dentro de las etiquetas <head></head>. Tiene algunas funciones centrales de WordPress para agregar HTML a la página y permite que se ejecuten las funciones asociadas a él mediante complementos.

En la sección de pie de página de temas, se llama al enganche de acción wp_footer() para incluir el HTML y jаvascript predeterminados y ejecutar las funciones asociadas a él mediante complementos.
Si no usa los ganchos de acción al crear el tema de WordPress, faltará el código central importante y los complementos no podrán funcionar correctamente.
Por ejemplo, si no llama a wp_footer() en su plantilla de footer.php, la barra de administración superior no aparecerá cuando inicie sesión como administrador. El código principal de WordPress que hace que aparezca la barra de administración se adjunta al anzuelo de acción wp_footer(), y las funciones adjuntas no se pueden ejecutar si el anzuelo de acción no existe.

Para obtener una explicación completa de los ganchos de acción, lea la sección Acciones y enganches de acción de cómo crear un tutorial de WordPress.

El bucle de WordPress



El ciclo se usa para mostrar las publicaciones. Se puede usar para mostrar una sola publicación o todas sus publicaciones en una sola página. El HTML que escriba dentro del ciclo se usará para mostrar cada publicación solicitada por el ciclo. El código continúa en bucle hasta que alcanza la publicación final.

Si visualiza una publicación, use la etiqueta de la plantilla the_content() dentro del ciclo para mostrar el contenido de la publicación. Si muestra una lista de todas las publicaciones publicadas, puede usar the_excerpt() dentro del bucle para que no se muestre toda la publicación.

El ciclo es una taquigrafía de líneas múltiples si ... entonces ... una declaración compuesta por cuatro líneas de código. La primera línea indica que si se encuentra una publicación, mientras la publicación está disponible, use el siguiente código para mostrar la publicación. Si no se encuentra una publicación coincidente, puede definir el texto de reemplazo en su lugar. El ejemplo predeterminado de WordPress se ve así, y la línea comentada es donde se escriben las etiquetas HTML y de plantilla:

Conclusión


¡Felicitaciones! ¡Has creado tu primer tema responsivo de HTML5 WordPress!

Ahora que comprende las plantillas y las etiquetas de plantilla, debe echar un vistazo a la lista de plantillas y etiquetas de plantillas del Codex de WordPress, y experimentar añadiendo nuevas secciones al diseño. Experimente cambiando los estilos y anchuras de CSS y vea cómo responde su navegador a varias situaciones. Cambie las reglas para las consultas de medios y vea si hay mejores reglas que se pueden definir... Ver Parte Primera De Este Tutoriales En Linea...