• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Core / Formatos de entrada en WordPress
Anuncio banner webservi

Formatos de entrada en WordPress

Formato de entradas en WordPress

[ 27 septiembre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Los formatos de entrada es una funcionalidad de los themes WordPress, a través de los formatos de entrada puedes elegir el tipo de contenido que estas publicando y dar un estilo especial a tus entradas cuando son mostradas en el front-end de tu sitio.

 

1- Generalidades

Si tu theme soporta formatos de entrada, entonces al editar o crear una nueva entrada veremos una sección de formato, tal como se muestra en la imagen adjunta.

Sección formato en edición entrada

 

  • Minientrada (aside): Entrada sin título
  • Imagen (image): Entrada que muestra una imagen. El primer tag <img /> en la entrada podría ser considerado la imagen, o si la imagen destacada.
  • Vídeo (video): Una entrada con video incrustado. El primer tag <video /> o el primer object/embed en la entrada podría ser considerado como el video.
  • Cita (quote): Una entrada de cita o frase. Un blockquote como contenido de la entrada.
  • Enlace (link): Una entrada con un enlace a otro sitio. Se puede usar el primer tag <a href=””> del contenido como enlace.
  • Galería (gallery): – Una entrada de galería de imágenes. La entrada contendría un shortcode gallery e imágenes adjuntas.
  • Estado (status): Entrada de actualización de estado, similar a una actualización de estado de las redes sociales.
  • Audio (audio): Un entrada con audio incrustado. La detección del primer tag <audio /> se podría considerar como el audio.
  • Chat (chat): Entrada con una transcripción de chat.

 

Un theme no necesariamente soportará todos los formatos disponibles, por lo que, puede ser que no te aparezcan disponibles todos los ítems de la imagen anterior.

 

2- Agregando soporte de Formatos de Entrada

Si el theme que estamos usando no dispone de soporte para formato de entrada, puedes agregar soporte para esta funcionalidad añadiendo el siguiente código en el archivo functions.php del theme.


add_theme_support( 'post-formats', array( 'aside', 'audio' ) );

En el código anterior hemos agregado soporte para Minientradas y para audio,

 

3- Usando los Formatos de Entrada

Para usar los formatos de entrada los puedes programar en el bucle de WordPress, usando la función get_template_part() y get_post_format(),


get_template_part( 'content', get_post_format() );

Lo que hace el código anterior es buscar en los archivos del theme los archivos con el nombre:

– content-aside.php
– content-audio.php, etc.

Esto es bastante práctico ya que puedes organizar mejor tu código teniendo un archivo para cada formato de entrada.

El código final incluyendo el bucle de WordPress sería:


while ( have_posts() ) : the_post();
	get_template_part( 'content', get_post_format() );
endwhile;

 

Para el archivo content-audio.php, podríamos tener como parte del archivo un código que compruebe que existe un audio y extraiga sólo el código HTML del audio, por ejemplo:


$content = apply_filters( 'the_content', get_the_content() );
$audio = get_media_embedded_in_content( $content, array( 'audio' ) );

if ( ! empty( $audio ) ) {
	foreach ( $audio as $audio_html ) {
		echo '<div class="entry-audio">';
		echo $audio_html;
		echo '</div>';
	}
};

En el código anterior:

  • Recuperamos el contenido con la función get_the_content() y pasamos los filtros.
  • Extraemos sólo el código HTML del audio del contenido, esto a través de la función get_media_embedded_in_content().
  • Comprobamos si la variables de audio tiene algún valor.
  • Para imprimir el audio lo hacemos en un bucle ya que puede haber más de un audio como parte del contenido.

 
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisiteExtraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post TypeEliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 3,50 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Angel Gilabert

    15 octubre, 2017

    Muy bien y sin rollo

  2. maria grimes

    28 junio, 2020

    facil de entender, genial.

    • Jhon Marreros Guzmán

      29 junio, 2020

      Gracias 🙂

  3. jhon

    4 agosto, 2020

    me acabas de salvar de una trasnochada. capo!

    • Jhon Marreros Guzmán

      4 agosto, 2020

      Que bien que te sirvió. Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Usar Content Security Policy (CSP) en WordPress

Agregar Whatsapp flotante en WordPress

Empaquetar WordPress con install.php

Leer datos desde otra base de datos en WordPress

Recientes

  • Guía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad