WordPress

¿Cómo crear un tema de WordPress responsive usando HTML5?

Introducción

Los temas de WordPress son un conjunto de archivos que definen el diseño de su sitio web. Un tema incluye HTML, PHP y CSS, y a menudo utilizan JavaScript/jQuery también .

En este tutorial de WordPress, aprenderás a crear un tema de WordPress utilizando HTML5, CSS3 y principios de diseño responsive. También aprenderás a separar varias partes de tu tema en “plantillas”.

Los temas, asi como los plugins , están separados del código básico de WordPress. Los temas permiten que su sitio web tenga un diseño coherente para cada página y publicación y puede modificarse rápidamente para cambiar la apariencia de su sitio web. Para mostrar información de WordPress o el contenido de una publicación, debe utilizar las etiquetas de plantilla proporcionadas por WordPress, que se explicará en el tutorial.

Después de completar este tutorial y crear un nuevo tema de WordPress, es una gran idea ver la forma de crear un tutorial de tema hijo de WordPress para ampliar lo que has aprendido aquí.

¿Qué necesitas?

Para completar los pasos de este tutorial de desarrollo de temas de WordPress, necesitará un editor de texto como Notepad ++ o NetBeans. También necesitará acceso FTP a su cuenta de hosting y una instalación de WordPress en funcionamiento.

También se recomienda descargar la hoja de trucos CSS y tenerlo abierto, ya que en este tutorial vas a editar WordPress style.css archivo.

¿Qué es HTML5 y por qué debería usarlo?

HTML5 es la última versión del lenguaje HTML de marcado web y ofrece un gran conjunto de características modernas que facilitan la visualización de su contenido de manera consistente en cualquier computadora, portátil, tablet o teléfono móvil.

El mayor cambio es que un nuevo conjunto de elementos HTML semánticos están disponibles. Por ejemplo, ahora se puede definir el pie de página de cualquier página HTML con el elemento
<footer></footer>, y esto indica al navegador web que el contenido contenido en el mismo es parte del pie de página. En las versiones anteriores de HTML, el contenido del pie de página se crearía utilizando elementos genéricos como <div></div>.

Un documento HTML5 básico se verá así:

 

¿Qué es el Diseño Responsive o Responsivo?

El diseño responsivo o responsive significa que su sitio web se muestra automáticamente en el mejor formato para el visitante en función del tamaño de su pantalla. El diseño de página literalmente “responde” al espacio disponible en la pantalla del visitante. El contenido se coloca perfectamente para que nada se corte, nada se salga de la pantalla, y tu sitio web se vea tan limpio como sea posible.

Debes pensar en el diseño de tu sitio web como una serie de redes y darle al contenido un porcentaje del ancho de la cuadrícula. Por ejemplo, una div podría tomar el 50% del espacio disponible, en lugar de ser de 800 px de ancho. Una div de la página entera div toma el 100% del espacio disponible así que si quieres cuatro divs dentro de él en una línea, cada uno consigue el 25% del espacio.

Para las imágenes, puede configurarlas para que tengan un ancho máximo del 100% de su tamaño real y configurar la altura como auto. Cuando el contenedor de la imagen está en tamaño reducido, la imagen se reduce automáticamente en anchura y altura.

Para las imágenes, con el ancho: 100% en lugar de max-width: 100% hará que una imagen ocupe el 100% del espacio disponible en lugar de detenerse en su ancho real en píxeles. Si la imagen tiene 200 píxeles de ancho pero está dentro de una div que ocupa el 100% de la pantalla, la anchura máxima significa que la imagen nunca supera los 200 píxeles de ancho.

Para que un tema de WordPress sea completamente responsive, puedes utilizar una función CSS3 denominada consultas de medios (media queries). En las consultas de medios, define de manera opcional un tipo de medio que afecta (pantalla, impresión, etc.) al menos una característica de medios (anchura máxima, orientación, etc.). Las funciones de los medios se pueden encadenar utilizando la palabra clave.

  • En el primer ejemplo, el CSS se aplicará a cualquier pantalla (monitor, teléfono, etc.) que tenga una anchura visible (el área dentro del navegador, no toda la ventana) entre 400px y 800px.
  • El segundo ejemplo se aplicará a cualquier tipo de medio que lo vea.
  • Otro tipo de medio es ‘print’, lo que significa que el CSS sólo se aplica si el usuario está buscando una vista previa de impresión de su página.

Una lista completa de tipos de medios y funciones de medios está disponible en el sitio web de Mozilla Developer Network.

En tu hoja de estilos CSS, defines reglas que dictan cuando se cambia el contenido, qué contenido se cambia y cómo se cambia dicho contenido. Puede cambiar cualquier atributo CSS de esta manera, como el ancho de cualquier cuadro de texto o el color de fondo de una div. Algunos ejemplos de reglas de medios que determinan cuando se aplica la regla:

  • max-width: el ancho máximo del área visible del navegador, mayor que éste y la regla no se aplica
  • min-width: el ancho mínimo para el área visible, menor que éste y la regla no se aplica
  • orientation – si la pantalla está en modo vertical o horizontal

Un ejemplo común es cuando tiene dos cuadros de texto lado a lado que ocupan el 50% de la pantalla. A medida que la ventana del navegador se hace más pequeña, las casillas se ajustan automáticamente para seguir ocupando el 50% de la ventana en lugar de desaparecer por el lado. Si la ventana del navegador se vuelve demasiado pequeña para mostrar correctamente todo el texto en esos cuadros, puede decirles que ocupen el 100% del tamaño de la ventana y que aparezcan uno encima del otro. También puede ocultar el contenido por completo si es más apropiado.

Paso 1 – Almacenamiento de tu tema y sus archivos

El hacer incluso pequeños cambios en un tema puede causar errores y hacer que su sitio web sea inutilizable. Un problema común es que después de hacer cambios en tu código, intenta cargar tu sitio web y en su lugar obtener una pantalla blanca conocida como la pantalla blanca de la muerte. Depurar el error que causó la pantalla blanca puede ser difícil.

Para evitar cualquier interrupción en su sitio web, es importante probar todos los cambios en una versión sin conexión. Una vez que los cambios estén completos, puede subir la versión de trabajo a tu sitio web en vivo.

Vamos a empezar el tutorial y aprender a crear un tema de WordPress.

Los temas de WordPress se almacenan en su propia carpeta en la carpeta wp-content/themes/.

En la carpeta wp-content/themes/, crea una nueva carpeta denominada my-theme. La carpeta que creó necesita un nombre único, descriptivo y breve para identificarlo fácilmente.

Nota: Los nombres de carpeta de temas no deben contener números ni espacios. Tu tema no debe tener el mismo nombre de carpeta que otro tema. Si piensas compartir el tema, debe comprobar que otro tema con ese nombre no se ha subido al Directorio Temático de WordPress.org.

Los temas de WordPress se pueden crear con sólo dos archivos – index.php y style.css – y WordPress los utiliza para mostrar cada página y publicarla en tu sitio.

Querrás que los mensajes, las páginas y otras secciones de su sitio web tengan su propio diseño. Cada sección de tu sitio web se da su propio archivo para mantener HTML y PHP que sólo se aplica a esa sección – cada archivo se llama una “plantilla”.

Si utilizas publicaciones personalizadas, puedes crear plantillas que sólo se apliquen a publicaciones de ese tipo. Si desea que los mensajes de una categoría específica se diseñen de forma diferente, puede hacerlo utilizando las instrucciones if … then … dentro del loop.

Cada archivo de la plantilla debe utilizar el nombre correcto definido por la documentación de WordPress.

Algunos de los archivos de plantilla aparte de index.php:

  • header.php – contiene cualquier HTML que vaya en la parte superior de sus páginas, a partir de <!DOCTYPE html>
  • single.php – se utiliza al mostrar una solo Entrada de tu blog
  • page.php – se utiliza al mostrar una sola Página de tu blog
  • comments.php – define cómo se muestran los comentarios y el cuadro de texto del comentario
  • footer.php – contiene cualquier HTML que vaya al final de sus páginas, incluyendo </html>

Para obtener una lista completa de plantillas, visite el manual de desarrollo de temas de WordPress.

Ahora que tienes una carpeta para almacenar el tema, necesita crear algunos archivos básicos de la plantilla.

Paso 2 – Creación de los archivos de plantillas y la hoja de estilo CSS

En la carpeta de my-theme crea los archivos siguientes archivos PHP:

  • header.php
  • index.php
  • footer.php
  • funciones.php
  • sidebar.php
  • solo php
  • page.php

Además de los archivos PHP, cree un nuevo archivo CSS denominado style.css (la hoja de estilos principal debe llamarse style.css).

El primer paso después de que todos los archivos se han creado es agregar alguna información a la parte superior del style.css que WordPress leerá y mostrará en el panel de control de administración.

La información debe escribirse como un comentario CSS de varias líneas, cada encabezado en su propia línea, comenzando con una palabra clave de encabezado.

Hay varias palabras clave de encabezado disponibles para definir información como autor (su nombre), sitio web del autor, una descripción del tema, el nombre del tema, la versión del tema, etc.

El formato para escribir encabezados es Palabra clave: Information

NOTA: Las séptimas y octavas líneas sólo son necesarias si planeas compartir tu tema en WordPress.org. Si va a utilizar el tema en su propio sitio web, puede omitir esas dos líneas y cerrar la sección de comentarios.

En este punto, su tema ya está visible en la sección del tema del panel de control de administración. Verá una imagen de cuadro blanco y gris con My Theme escrito debajo de él. Una vez completado el tema, puede tomar una captura de pantalla para mostrarlo aquí.

Si activa el tema en este momento, obtendrá una página principal en blanco, ya que su index.php está vacío y no existen plantillas.

Ahora, agregaremos una sola regla al archivo CSS que cambia el color de fondo de la página.

Añada una línea en blanco después del cierre del comentario */ en la línea 10.

En la siguiente línea debajo de la nueva línea en blanco (línea 11 del archivo), escriba lo siguiente.

La primera entrada es una parte importante del estilo sensible. * es un comodín y coincide con todas las clases que se encuentran en el documento HTML. Indica que el ancho final y la altura de cada elemento en la página deben incluir contenido, relleno y borde. Si no establece esto y tiene dos cajas de 50% de ancho que están lado a lado con cualquier relleno o borde, no se sentarán lado a lado ya que su tamaño real es superior al 100%. Una caja de ancho de 100% con 1% de relleno es en realidad 102% de ancho, ya que se agrega 1% de relleno a la izquierda ya la derecha. Esta regla efectivamente agrega el relleno dentro de la caja en lugar de fuera de ella.

La segunda entrada sólo cambia el color de fondo de blanco para que podamos ver rápidamente si la hoja de estilo se está utilizando. También establecemos la fuente predeterminada que se utilizará en nuestro tema.

Paso 3 – Antes de iniciar el desarrollo

Antes de comenzar realmente a crear su diseño de tema de WordPress, debes agregar algunas piezas de código a varios archivos para darte un buen punto de partida para construir. Estos pasos no son necesarios pero muy recomendables.

Estos pasos tendrán breves explicaciones para que pueda pasar rápidamente a la construcción de un diseño.

En primer lugar, incluiremos un archivo CSS denominado normalize.css. Diferentes navegadores tienen diferentes ajustes predeterminados para cosas como los márgenes de página y el relleno. Normalize.css establece explícitamente un número de atributos para garantizar que todos los navegadores muestren su página exactamente igual. Si no utilizas una hoja de estilos para establecer estos valores predeterminados, puedes tener un problema común es que cuando intenta hacer que su encabezado principal empiece en la parte superior izquierda de su página, en realidad habrá espacio en blanco encima del encabezado.

funciones.php

Abrir functions.php y agrega el siguiente código

A continuación, debes activar los widgets de la barra lateral. Si no incluyes este código, el enlace del menú de widgets no estará visible en el panel de control del administrador y no podrás agregar ningún widget. Mientras permanezca en functions.php, debajo de la función anterior, agregue el código siguiente:

Ahora necesitamos registrar un menú de navegación personalizado para permitir el uso de la función Apariencia -> Menús en el panel de administración. Debajo del código anterior, añada lo siguiente:

Guardar functions.php y subelo al directorio de tu tema.

sidebar.php

Ahora abre el archivo sidebar.php y el siguiente código. Hace que la barra lateral y los widgets aparezcan en su tema dondequiera que se llame a get_sidebar().

La primera línea indica a WordPress que si no se habilitan widgets, no se debe mostrar el código HTML de la barra lateral. La segunda línea establece los atributos del elemento que contiene los widgets. HTML5 proporciona el elemento “aparte” para las barras laterales. La tercera línea es la función WordPress para mostrar los widgets. La última línea cierra la instrucción if inicial.

Guardar y cargar sidebar.php en el directorio de su tema.

Para facilitar la navegación entre publicaciones y páginas, abre el panel de control del administrador y agrega los widgets Páginas y Entradas recientes a la barra lateral. Ahora pasaremos a construir el diseño.

Paso 4 – Construir 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 te indican a tu 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 introducir el código de idioma correcto para el idioma que escogió durante la instalación – language_attributes().

En el campo de título, utiliza una línea de código que muestra el nombre de tu sitio, seguido de una instrucción abreviada if… then… para mostrar el lema de tu sitio web O el título de la página o publicación actual que estás viendo.

Los ? character es un operador condicional de PHP llamado operador ternario. En esta línea de código, is_front_page() es una función de WordPress que devuelve TRUE si se visualiza la portada, o FALSE si se está viendo cualquier post o página. La función antes de los dos puntos se utiliza si TRUE se devolvió, y la función después de los dos puntos se utiliza si se devuelve FALSE.

Como veremos a continuación, la función bloginfo() se utiliza repetidamente con diferentes parámetros para obtener diferentes partes de información de la base de datos de WordPress. Antes de que la etiqueta <head> se cierre con </head>, debe incluir el gancho de acción wp_head() para asegurarse de que se ejecutan las funciones asociadas a él.

La función body_class() le da a su cuerpo las clases CSS predeterminadas establecidas por WordPress. La última línea permite visualizar el menú de navegación si se ha creado uno en el panel de control del administrador. El header.php final se parece a esto:

Si deseas utilizar un logotipo como encabezado, reemplaza <?php bloginfo (‘name’); ?> con su código de imagen dentro de las etiqueta <header>.

Guarda header.php y subelo a la carpeta de tu tema.

index.php

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

Usaremos etiquetas de plantilla para asegurarnos de que el código de encabezado (get_header), barra lateral (get_sidebar) y pie de página (get_footer) esté incluido en nuestra página principal.

También utilizaremos los elementos semánticos HTML5 <section>, <main>, <header> y <article>. Algunos de nuestros elementos tendrán clases asignadas a ellos, 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 bucle, se utilizan las siguientes etiquetas de plantilla:

  • <?php the_permalink (); ?> – genera la URL correcta de la publicación real
  • <?php the_title_attribute (); ?> – emite el título de la publicación en un formato seguro para el atributo title del enlace
  • <?php the_title (); ?> – emite el título de la publicación
  • <?php the_author (); ?> – emite el nombre del autor
  • <?php the_excerpt (); ?> – emite el extracto de la publicación, que se genera automáticamente si no escribe su propio

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 artículos deben tener elementos de encabezado en los que se utilice cualquier texto dentro de <h1>, <h2>, etc. Si una sección o un artículo no tiene texto de encabezado, se pueden omitir.

Guarda el archivo index.php y cargarlo en el directorio de su tema. Si visita su sitio ahora, verá una página muy simple.

Puedes ver que el título de la pestaña es el nombre y el eslogan 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). Todos los posts que existen tienen su título, autor y extracto. Aunque la página se muestre bien, todavía tiene que cerrar las etiquetas <body> y <html> abiertas en footer.php.

footer.php

footer.php define el pie 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 gancho de acción wp_footer() para garantizar que cualquier código final de WordPress y JavaScript se añada a la página. Si ha iniciado sesión como administrador cuando visitó su página principal, publicaciones o páginas, notará que falta la barra de administración. El código que muestra la barra de administración se engancha al gancho de acción wp_footer().

También agregaremos el elemento semántico HTML5 <footer> </ footer> para definir explícitamente nuestro pie de página.

Guardar el archivo footer.php y cargarlo en el directorio de tu tema.

single.php

single.php define el diseño al ver una sola publicación en tu sitio web. Puede ser completamente diferente a index.php.

En este caso, no agregamos la barra lateral a las publicaciones sólo para resaltar la diferencia en el diseño.

El contenido principal toma todo el ancho de la página, ya que le dimos la clase content-full-width de la hoja de estilo. El enlace se eliminó 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 de nuevo desde el índice y el diseño de la entrada.

Recuerda que si las plantillas no existen, en su lugar se utiliza la plantilla index.php. Si no creas page.php, no se utilizará el mismo diseño que posts.php.

Para que la diferencia sea más visible, volveremos a añadir la barra lateral a este diseño y haremos que el contenido de la página tome el 70% del ancho de la página.

Guarde el archivo página.php y subirlo al directorio de su tema.

style.css

Agrega lo siguiente a la parte inferior de la hoja de estilo. Esto hará que las distintas cajas tengan un fondo blanco y borde azul, para ayudar a visualizar cuánto espacio ocupa cada uno realmente.

Guarde el archivo style.css y subirlo al directorio de tu 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 debe tener este aspecto.

crear tema wordpress

Usando media queries

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

Para este tutorial de tema de WordPress, vamos a cambiar el ancho de los mensajes en la lista de correos cuando la ventana del navegador es inferior a 800px. En lugar de tener dos puestos de lado a lado, cada puesto tendrá su propia línea. Lo haremos añadiendo una consulta de medios. Si necesita un refresco en las consultas de medios, diríjase a ¿Qué es “Diseño de respuesta”? de este tutorial antes de continuar.

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

Primero escribiremos una consulta de medios que afecte a la clase .article-loop, que tiene un ancho de 49% por defecto. Lo escribiremos directamente debajo de la definición original. La consulta de medios indicará que si la ventana del explorador es menor que 800px de ancho, la clase .article-loop debería usar 99% del espacio disponible en su lugar.

A continuación, escribiremos una consulta de medios que, cuando la ventana del explorador sea inferior a 600px de ancho, empuje la barra lateral debajo del contenido principal y extienda tanto el contenido principal como la barra lateral para obtener un ancho de 100%. Esto sería un diseño mucho más apropiado para un dispositivo móvil donde el espacio es limitado.

Sigue en style.css, encuentra .article-loop que debe ser la línea 73. Debajo de la clase .article-loop escribe lo siguiente:

La primera línea indica que la consulta de medios sólo debe afectar a las pantallas (es decir, no al modo de vista previa de impresión) y sólo afectan a las ventanas del navegador de 800 píxeles o menos de ancho. Guarde y cargue style.css en el directorio de su tema. Ir a la página principal de su sitio web. Cambia el tamaño de la ventana del navegador y, a medida que pase 800px de ancho, verás las casillas de cada cambio de anuncio en ancho y soltarás una debajo de la otra.
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 definían como anchos de píxeles en lugar de porcentajes, tan pronto como la ventana se hiciera demasiado pequeña, la barra lateral desaparecería y requeriría desplazamiento horizontal.

La siguiente consulta de medios que vamos a añadir será similar a la anterior. Dirá al contenido principal ya la barra lateral que tome el 100% del espacio disponible, y la barra lateral caerá por debajo del contenido principal.

NOTA: Como esto afecta a diferentes clases que están en diferentes lugares de la hoja de estilos, vale la pena colocarla en la parte inferior de la hoja de estilo.

Guarda el archivo style.css y subelo al directorio de su tema. Vuelve a tu página principal y cambia el tamaño de la ventana del navegador hasta que veas que el contenido ocupa el 100% del ancho y la barra lateral debajo del contenido principal.

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

Entendiendo las etiquetas de la plantilla de WordPress y los ganchos de acción (hooks)

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

Etiquetas de plantilla (tags)

Las etiquetas de plantilla son funciones PHP proporcionadas por WordPress para incluir fácilmente archivos de plantilla (como header.php) desde el 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 principal, pero no en ninguna otra página, agregue get_footer() al final de index.php, pero no en page.php.

A continuación se presentan dos breves listas 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 utilizarse en el bucle. El bucle se explica más adelante en el tutorial, y simplemente significa el código que recupera los mensajes solicitados.

  • bloginfo(): muestra la información solicitada como parámetro, es decir, bloginfo (“nombre”) muestra el nombre de su sitio web según se define en el Panel de control del administrador (ver lista de parámetros)
  • single_post_title() – muestra el título de la publicación vista actualmente cuando se utiliza en single.php
  • the_author() – muestra el autor del mensaje visto en ese momento
  • the_content() – muestra el texto principal de una publicación o página
  • the_excerpt() – el extracto de la publicación o página

Ganchos de acción (hooks)

Los ganchos de acción son funciones de PHP proporcionadas por WordPress que usualmente tienen otras funciones asociadas a ellas. Algunos ganchos no tienen funciones conectadas de forma predeterminada y existen para su uso por plugins. Los ganchos de acción permiten que los complementos conecten sus propias funciones y que se ejecuten en varios puntos de la carga de una página.

En la plantilla de encabezado de su tema, se invoca el gancho de acción wp_head() para incluir el encabezado HTML predeterminado de WordPress dentro de las etiquetas <head></head>. Tiene algunas funciones de WordPress de núcleo para agregar HTML a la página y permite que cualquier función adjunta a él por los complementos para ejecutar.

En la sección de pie de página de los temas, se invoca el gancho de acción wp_footer() para incluir el código HTML y JavaScript predeterminados y ejecutar las funciones adjuntas por los complementos.

Si no utiliza los ganchos de acción al crear el tema de WordPress, faltará el código principal importante y los complementos no podrán funcionar correctamente.

Por ejemplo, si no llama a wp_footer() en su plantilla footer.php, la barra de administración superior no aparecerá cuando haya iniciado sesión como administrador. El código principal de WordPress que hace que aparezca la barra de administración se adjunta al gancho de acción wp_footer() y las funciones asociadas no se pueden ejecutar si el gancho de acción no existe.

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

El bucle de WordPress (WordPress Loop)

El bucle se utiliza para mostrar los mensajes. Se puede utilizar para mostrar una sola publicación o todas las publicaciones publicadas en una sola página. El HTML que escriba en el bucle se usará para mostrar cada post solicitado por el bucle. El código continúa en bucle hasta que llega al mensaje final.

Si muestra una entrada, utiliza la etiqueta de plantilla the_content() dentro del bucle para mostrar el contenido de la publicación. Si está mostrando una lista de todas las publicaciones publicadas, puede usar the_excerpt() dentro del bucle para que no se muestre la publicación completa.

El bucle es una abreviatura de varias líneas if … then … se compone de cuatro líneas de código. La primera línea indica que si se encuentra una publicación, mientras la publicación está disponible, utilice el código siguiente para mostrar la publicación. Si no se encuentra ninguna publicación coincidente, puede definir el texto de reemplazo en su lugar. El ejemplo predeterminado de WordPress se parece a esto, y la línea comentada es donde se escriben las etiquetas HTML y plantilla:

Conclusión

¡Felicitaciones! ¡Has creado tu primer tema HTML5 WordPress responsive!

Ahora que entiendes las plantillas y las etiquetas de la plantilla, deberías echar un vistazo a la lista de plantillas y etiquetas de la plantilla de WordPress, y experimentar con la adición de nuevas secciones al diseño. Experimente con el cambio de estilos y anchos de CSS y vea cómo su navegador responde a varias situaciones. Cambiar las reglas para las consultas de medios y ver si hay mejores reglas que se pueden definir.

También puede pasar al tutorial de cómo crear un tema infantil de WordPress.

 

 

 

Agrega un Comentario

Dale clic aquí para dejar un comentario

Únete a cientos de suscriptores en todo el mundo

y consigue increíbles tutoriales y descuentos en tu email

Please wait...

¡Gracias por registrarte!

Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio po

2
15
/mes