Cómo crear formatos de publicación de WordPress

Los formatos de publicación personalizados son una función que se introdujo por primera vez en la versión 3.1 de WordPress. Básicamente, los formatos de publicación actúan como una forma diferente de agrupar publicaciones, lo que le permite definir el tipo de contenido de publicación que está publicando. Una vez que las publicaciones se agrupan por formato, puede elegir organizar las publicaciones juntas, diseñarlas de manera diferente u organizar las publicaciones de acuerdo con su formato de publicación.

WordPress le permite activar diferentes formatos de publicación desde una lista establecida. No tiene que usarlos todos, simplemente tiene que elegir qué formatos se adaptan mejor a su sitio. Por el momento, esta lista consta de:

  • Aparte : Similar a una nota rápida. Úselos para publicaciones como actualizaciones rápidas o estado personalizado’.
  • Galería : una publicación que contiene una galería de imágenes.
  • Imagen : Una sola imagen, en lugar de una galería.
  • Video : una publicación que tiene uno o varios videos. El códice de WordPress también señala que una sola URL puede indicar la fuente de un video, en lugar de un video incrustado.
  • Audio : un archivo de audio o una lista de reproducción.
  • Enlace : Un simple enlace a un sitio externo.
  • Cita : un bloque de texto citado, generalmente con atribución al autor de la cita.
  • Estado : Similar a aparte, pero mucho más sobre un estado simple de una línea.
  • Chat : una transcripción completa del chat.

Obviamente, estas descripciones son solo pautas, y puede adaptar los formatos de publicación para satisfacer sus necesidades. Si está ejecutando un blog, es probable que tenga algunas publicaciones especializadas que encajen en estas categorías, que le gustaría que se vean un poco diferentes o que se presenten de una manera única. En este artículo, repasaremos cómo configurar formatos de publicación para hacer precisamente eso, y un par de ideas para comenzar a usarlos.

Configuración de formatos de publicación

Agregar formatos de publicación a su tema es tan simple como agregar una función a WordPress con una lista de los formatos de publicación que desea usar. Muchos temas vienen precargados con formatos de publicación ya instalados. Aún así, es una buena idea familiarizarse con la forma en que se configuran.

Un ejemplo del formato de publicación de video en el tema Fable

En este tutorial, usaré el tema Fable, que viene con algunos formatos de publicación incluidos: Galería, Cita y Video. Para mi blog, sin embargo, eso no es suficiente. Me gustaría agregar algunos más. Lo primero que debe hacer es configurar un tema secundario de Fable con solo un archivo básico style.css. El uso de un tema secundario garantiza que las actualizaciones futuras del tema permanecerán intactas, aunque todas nuestras personalizaciones anulan los valores predeterminados del tema.

También vale la pena señalar que, de forma predeterminada, los formatos de publicación se agregan al tipo de publicación «Publicación», pero también se pueden agregar a los tipos de publicación personalizados con otra línea de código.

Por ahora, agreguemos algunos formatos de publicación más a nuestro tema. Cree un archivo «functions.php» en el directorio de su tema secundario si aún no lo ha hecho, y agregue este bloque de código.

01
02
03
04
05
function add_post_formats() {
    add_theme_support( 'post-formats', array( 'gallery', 'quote', 'video', 'aside', 'image', 'link' ) );
}
 
add_action( 'after_setup_theme', 'add_post_formats', 20 );

Aquí, estamos usando la función add_theme_support para incluir nuestros formatos de publicación. Como mencioné, Galería, Cita y Video ya están incluidos con nuestro tema. Sin embargo, estamos anulando esta función con la nuestra, por lo que debemos asegurarnos de incluirlas si queremos conservarlas. Puede agregar cualquier formato de publicación que desee de la lista anterior, así que elija los formatos que mejor se adapten a su blog.

Después de activar su tema secundario, puede visitar el administrador de WordPress y crear una nueva publicación. Verá seis formatos de publicación enumerados en la barra lateral derecha. Seleccione cualquiera de estos para cambiar una publicación a un formato de publicación específico, o simplemente déjelo en «Estándar». Antes de seguir adelante, recomendaría agregar algunas publicaciones ficticias para cada formato de publicación que esté utilizando con contenido relevante (una galería, video incrustado, etc.) para que pueda ver los formatos de publicación en acción.

Puede elegir de una lista de formatos de publicación en el editor de publicaciones

Bien, hemos configurado nuestros formatos de publicación personalizados. Ahora es el momento de explorar qué podemos hacer con ellos.

Dar estilo a los formatos de publicación

La forma más fácil de comenzar con los formatos de publicación es usar CSS para diseñar cada uno de manera un poco diferente. De forma predeterminada, los temas que utilizan la función post_class , que incluye cualquier tema de Elegant Themes, generarán una clase CSS especial para cada publicación que designa cuál es su formato de publicación. La clase está estructurada como .format-(nombre). Entonces, una publicación de video tendrá la clase:

01
.format-video

Estas clases se incluyen tanto en las páginas de índice como en las páginas de publicaciones individuales, y se pueden usar para agregar un estilo único en cualquier ubicación. Comencemos con algo simple.

Fable, el tema que estoy usando, ya tiene una estructura especial para publicaciones de citas donde una sola cita está en negrita y se coloca entre comillas. Pero también quiero cambiar el color de fondo de todas mis publicaciones de citas para resaltarlas un poco más. Para hacerlo, abro el archivo «style.css» de mi tema hijo y agrego:

01
02
03
04
.format-quote {
    background: #FFAADD !important;
    color: white;
}

Esto agregará un fondo rosa a cualquier publicación a la que se le haya asignado el formato de publicación «cita». También cambiará el color del texto a blanco. Me aseguré de agregar el indicador «! Importante» para anular la configuración predeterminada del tema.

Por supuesto, este estilo se aplica a publicaciones en todos los contextos, en publicaciones individuales, páginas y la página de índice. Si quiero hacer que este estilo solo se aplique cuando una publicación aparece en la página de inicio, solo necesitamos agregar un poco de especificidad. Esta vez, solo aplicaré mi fondo rosa cuando una publicación aparezca en la página de inicio. También voy a eliminar el título de la publicación con CSS, por lo que solo queda el contenido de la publicación.

01
02
03
04
05
06
07
08
.home .format-quote {
    background: #FFAADD !important;
    color: white;
}
 
.home .format-quote .entry-title {
    display: none;
}

Nuestra cita completa con fondo rosa y sin título

CSS se puede usar para hacer bastante trabajo para cambiar el contenido según el formato. El tema Fable, por ejemplo, agrega estilos especiales a las galerías para que aparezcan en paneles hexagonales.

Uno de los formatos que agregué al tema de Fable estaba a un lado, por lo que todavía no hay un CSS único para esto. Para que las publicaciones aparte se parezcan más a un estado, quiero eliminar la letra capitular predeterminada agregada por el tema Fable y agregar un efecto de texto propio.

01
02
03
04
05
06
07
08
09
10
11
12
13
.home .format-aside .entry-content > p:first-child:first-letter {
    display: inline;
    float: none;
    margin: 0;
    font-size: inherit;
}
 
.home .format-aside .entry-content p {
    font-style: italic;
    font-size: 36px;
    color: #666;
    text-shadow: 2px 2px #E7E1E1;
}

Esto le da estilo al texto para incluir cursiva, un tamaño de fuente más grande y una sombra de texto, mientras elimina la letra capitular. Nuevamente, esto solo se aplicará a la página de inicio, pero simplemente puede eliminar «.home» para que funcione también en páginas individuales.

Se puede hacer bastante con solo CSS para personalizar los formatos de publicación. Recomiendo navegar por los temas enumerados en este sitio para inspirarse un poco.

Filtrado de contenido basado en formatos de publicación

Diseñar CSS puede ser todo lo que necesita para que los formatos de publicación funcionen para usted. Pero si desea un poco más de control, también puede editar plantillas directamente para modificar su salida. La mayoría de los temas, como el tema Fable o Divi , están configurados para mostrar plantillas personalizadas según el formato de publicación. La pieza de código crucial generalmente se encuentra dentro del bucle de plantillas de publicación (por ejemplo, index.php o single.php).

01
get_template_part( 'content', get_post_format() );

No necesita agregar este código, se proporciona de manera predeterminada en los temas de Elegant Themes y en la mayoría de los temas profesionales que existen.

Get_template_part extrae una plantilla de un archivo PHP específico, que se puede modificar según el formato de la publicación. Entonces, si desea una plantilla especial para el formato aparte, solo necesita crear un archivo content-aside.php y comenzar a editar el contenido del bucle allí.

El tipo de publicación de la Galería en el tema Fable, por ejemplo, organiza las imágenes en una cuadrícula con soporte para ventanas emergentes de fancybox integradas. Esto se hace en el archivo «content-gallery.php».

Si eligió el tema correcto, gran parte de este trabajo se hará por usted, pero puede ser útil agregar alguna funcionalidad adicional. Por ejemplo, agregué el formato de «enlace» al tema Fable en el primer paso. Mis publicaciones de enlaces son muy simples y contienen solo un título y un solo enlace.

Una publicación de enlace de ejemplo

Lo que realmente me gustaría hacer es extraer esta URL y vincular mi título directamente a una página externa cuando la publicación aparece en mi página de inicio, en lugar de obligar a los usuarios a visitar una sola publicación y luego seguir el enlace. Eso está más allá del alcance de solo CSS y requerirá que usemos una plantilla.

Preparando nuestros estilos

Necesitaremos un poco de CSS personalizado para que podamos llamar un poco las publicaciones de enlaces para asegurarnos de que los usuarios sepan que están siendo redirigidos fuera del sitio. Quiero asegurarme de que el título de una publicación tenga un color que coincida con el resto de los enlaces en mi sitio y cambiar un poco el fondo. También quiero usar un icono de enlace antes del título.

Lo primero que debe hacer es crear una carpeta de imágenes en el tema de su hijo, luego guardar la imagen del enlace de arriba allí como «enlace.png». A continuación, agregaremos un poco de CSS que asegurará que nuestro contenido se vea único.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
.home .format-link {
    background: #eee !important;
}
 
.home .format-link .entry-title h2 {
    color: #6ba7a5;
}
 
.home .format-link .entry-title h2:before {
    display: inline-block;
    content: " ";
    background: url(images/link.png);
    width: 75px;
    height: 56px;
}
 
.home .format-link .entry-title p {
    text-align: center;
}

Aquí, estamos editando el color del fondo y el texto para las publicaciones de enlaces. Luego estamos usando el :before pseudo-selector para agregar el ícono de enlace justo antes del título de la publicación. Si aún no está claro qué hace esto, está bien. Llegaremos a eso en un momento.

Agregar nuestra función de captura de enlace

Para vincular nuestras publicaciones directamente a un enlace externo, necesitaremos crear una función que tome el primer enlace del contenido de una publicación y devuelva la URL para que la usemos. Luego, podemos usar esa URL en nuestra plantilla de formato de publicación para vincular un título directamente a una página externa.

Abra el archivo «functions.php» en la carpeta de su tema secundario y agregue esta función:

01
02
03
04
05
06
function get_my_url() {
    if ( ! preg_match( '/<as[^>]*?href=['"](.+?)['"]/is', get_the_content(), $matches ) )
        return false;
 
    return esc_url_raw( $matches[1] );
}

Todo lo que hace esta función es ordenar el contenido de su publicación y buscar una etiqueta a href= . Luego extrae la URL de este y se la devuelve. Usaremos esto en el próximo paso.

Configurando nuestra plantilla de enlace

A continuación, tendremos que crear nuestra plantilla para el formato de publicación del enlace. Para hacerlo, tenemos que crear un archivo llamado “content-link.php” en la carpeta de nuestro tema hijo. Esto tomará cualquier publicación con el formato de publicación «Enlace» y usará este archivo para representar su contenido, en lugar de la plantilla predeterminada. En este momento, esta plantilla está en blanco, por lo que todavía no hace mucho. Agreguemos nuestro código.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
    <div class="container clearfix">
        <header class="entry-title">
        <?php if ( is_single() ) { ?>
            <h1><?php the_title(); ?></h1>
        <?php } else { ?>
        <?php $myLink = get_my_url(); ?>
            <h2>
                <a href="<?php echo $myLink; ?>"><?php echo the_title(); ?></a>
            </h2>
            <p>This is an external link and will take you to a new page.</p>
        <?php } ?>
 
            <?php et_fable_post_meta(); ?>
        </header>
    </div> <!-- .container -->
 
    <?php if ( is_single() ) : ?>
        <?php get_template_part( 'includes/share', get_post_format() ); ?>
    <?php endif; ?>
</article> <!-- .entry-->

Están sucediendo muchas cosas aquí, así que voy a revisar este código, poco a poco, para que pueda ver cómo está configurado.

01
02
03
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
    <div class="container clearfix">
        <header class="entry-title">

Este es solo un código básico para comenzar nuestra estructura HTML. Estamos agregando la función post_class para obtener las clases adecuadas (incluido .format-link) junto con los elementos de contenedor y encabezado. Esto se toma directamente de la plantilla predeterminada, que es el archivo «content.php» en mi carpeta principal de temas. Puede editar esta parte para que coincida con su tema como desee.

01
02
<?php if ( is_single() ) { ?>
    <h1><?php the_title(); ?></h1>

Esta sección utiliza la etiqueta condicional «is_single» para verificar si estamos en una sola página de publicación o no. Si es así, representamos el título en una etiqueta h1 , que es la predeterminada. Por supuesto, los usuarios no deberían visitar esta página porque los vinculamos fuera de ella, pero es una buena alternativa.

01
02
03
04
05
06
07
<?php } else { ?>
        <?php $myLink = get_my_url(); ?>
            <h2>
                <a href="<?php echo $myLink; ?>"><?php echo the_title(); ?></a>
            </h2>
            <p>This is an external link and will take you to a new page.</p>
        <?php } ?>

Aquí es donde sucede la verdadera magia. Estamos usando la función get_my_url que creamos anteriormente para almacenar el primer enlace de nuestra publicación en la variable $myLink. Luego, en una etiqueta h2, estamos haciendo eco de ese enlace en un elemento a . Entonces, en lugar de vincular a una publicación, los formatos de enlace vincularán al primer enlace externo de la publicación (en nuestro caso, https://www.elegantthemes.com).

A continuación, simplemente agregamos el título para que sea el texto de nuestro enlace. Recuerde, agregamos el ícono de enlace en nuestro CSS que se agregará automáticamente antes de cada uno de nuestros títulos. Finalmente, estamos agregando un poco de texto que les dice a nuestros usuarios que están a punto de ser dirigidos a una nueva página.

01
02
03
04
05
06
07
08
            <?php et_fable_post_meta(); ?>
        </header>
    </div> <!-- .container -->
 
    <?php if ( is_single() ) : ?>
        <?php get_template_part( 'includes/share', get_post_format() ); ?>
    <?php endif; ?>
</article> <!-- .entry-->

Estamos terminando nuestra publicación con el mismo marcado de la plantilla predeterminada, para garantizar que la publicación se muestre normalmente en páginas individuales y que todos nuestros elementos HTML estén cerrados.

Al final, terminamos con una apariencia diferente para las publicaciones de enlaces en nuestra página de inicio.

Esto es, por supuesto, sólo el comienzo. Se puede hacer mucho con las plantillas de formato de publicación para editar y modificar la salida de sus publicaciones en función de los formatos de publicación, lo que permite una amplia gama de contenido. Si está interesado en obtener más información sobre cómo funciona esto, le recomiendo sumergirse en las plantillas de contenido para ver cómo funcionan o visitar la entrada del códice de WordPress en Formatos de publicación.

enlaces permanentes

El último truco que compartiré contigo es cómo organizar tus publicaciones según el formato de publicación. WordPress viene con una función útil, get_post_format_link que le permite vincular a una página que solo incluye publicaciones de un formato de publicación específico. Para usarlo, simplemente use esta función en cualquier archivo de plantilla.

01
<?php echo esc_url( get_post_format_link( 'aside' ) ); ?>

Esto proporcionará un enlace a una lista de publicaciones «Aparte». Cambie el nombre del formato de publicación para que coincida con el formato de publicación al que está vinculando. Esto puede ser útil en la navegación o en la agrupación de publicaciones. Si su blog hace un uso intensivo de formatos de publicación, puede ser una excelente manera de organizar el contenido.

Pensamientos finales

Hay mucha discusión sobre los formatos de publicación en este momento, y su futuro está un poco en el aire . Pero si está ejecutando un blog basado en contenido, pueden ser una herramienta extremadamente útil y pueden agregar algunas funciones adicionales sólidas a sus publicaciones. Los temas de Elegant Themes presentan bastantes formatos de publicación, y puedes explorar casi cualquiera de ellos para tener una idea de cómo funciona todo. ¡La mejor manera de comenzar es simplemente sumergirse!