Cada vez es más común que los blogs incluyan ciertas publicaciones en la parte superior de la página. En este tutorial, le mostraremos cómo implementar esto en WordPress. Usaremos el tema predeterminado, Kubrik, como nuestro tema base, pero debería ser adaptable a la mayoría de los temas con algunas modificaciones. Hay muy poco código y con publicaciones es simple.

Lo que estamos buscando

Vamos a modificar el tema de Kubrik que viene preempaquetado en WordPress para poder publicar publicaciones en la parte superior de la página. Este tutorial solo se ha probado en WordPress 2.5.x, pero también debería funcionar en la serie 2.3.x. Vamos a asumir que estás usando 2.5.xo superior. Al final del tutorial, tendrás algo como esto:

Paso 1 - Creando la imagen por defecto

Antes de hacer nada, vaya a la carpeta de temas de su instalación de WordPress (wp-content / themes /) y haga una copia de seguridad de la carpeta "predeterminada". Este es el tema de Kubrik que estaremos editando. La copia de seguridad se realiza en caso de que desee volver al tema original sin modificar..

Primero, haremos una imagen predeterminada en caso de que no se especifique una imagen de publicación destacada. Mantengámoslo dulce y simple para este tutorial. Abra su editor de imágenes preferido y cree un rectángulo de 233x130px con un radio de 10px esquinas redondeadas. Hice del fondo un degradado radial de blanco a gris y puse un poco de texto encima. Esto es lo que tengo:

Guarde la imagen como "no-aparece-imagen.jpg" en la carpeta "imágenes" que está dentro de la carpeta "predeterminada".

Paso 2 - Añadir el código PHP

Ahora para el código. Abra el archivo "header.php" dentro de la carpeta "default". Al final del archivo, verá un bloque div y una etiqueta hr como esta:

 
 
/ ">
 
 
 
 

Entre la etiqueta div final y la hora, inserte el siguiente código:

 
 CARNÉ DE IDENTIDAD); $ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featuring-image.jpg"; printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title); ?> 
 
 

Este código dará salida a tres imágenes en una lista desordenada. Cada imagen es un enlace a una publicación destacada. Hablaremos sobre cómo configurar el código después de agregar el CSS..

Paso 3 - Estilo con CSS

A continuación necesitamos añadir algunos estilos CSS. Abra el archivo "style.css" y coloque el siguiente código a continuación al final del archivo. Todo lo que hace es hacer flotar los elementos de la lista a la izquierda y espaciarlos de manera uniforme.

/ * Carrusel de publicaciones destacadas * / #featured padding: 10px 10px 0 20px;  #carousel list-style: none; margen: 0; relleno: 0;  # carrusel li float: left; relleno: 0; margen derecho: 10px; 

Paso 4 - Entendiendo el código

Echemos un vistazo a lo que hace el código que agregamos. Dentro del contenedor div (id = "Featured") tenemos una lista desordenada y algo de código PHP para generar elementos de la lista.

$ Featured_posts = get_posts ('numberposts = 3 & category =1');

La primera línea que se muestra arriba recupera la información de la publicación mediante la función get_posts () y asigna los datos de la publicación a la variable $ feature_posts. La función get_posts () exceptúa un solo parámetro en forma de una cadena de consulta similar a la que puede ver al final de una URL (sin el signo de interrogación inicial). El primer parámetro es "numberposts", que hemos establecido en 3 para este tutorial. Este parámetro establece cuántas publicaciones destacadas mostraremos. El segundo parámetro es "categoría", que hemos establecido en 1. El valor del parámetro "categoría" debe ser el ID de la categoría que está utilizando para sus publicaciones destacadas. Puede encontrar el ID de una categoría yendo a la página de administración de categorías y colocando el mouse sobre un título de categoría. La barra de estado mostrará un enlace. El último número es el ID de categoría.

La siguiente línea es un bucle foreach que recorrerá las publicaciones que hemos recuperado usando la función get_posts (). La primera línea dentro del bucle foreach recupera la URL de la imagen usando la función get_post_custom_values ​​() y almacena la URL en la variable $ custom_image. El primer parámetro especifica la clave del valor personalizado que estamos usando, "Featured_image". El segundo parámetro especifica de qué publicación obtenemos el valor de.

$ custom_image = get_post_custom_values ​​('Featured_image', $ post-> ID);

En la siguiente línea, hacemos una comprobación rápida para ver si una imagen fue especificada. Si no se especificó ninguna imagen, asignamos a la variable $ image la URL de la imagen predeterminada. Si una imagen fue especificada, usamos esa.

$ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featuring-image.jpg";

En la última línea en realidad sacamos los elementos de la lista. Cada elemento es una imagen que enlaza con la publicación destacada..

printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title);

Paso 5 - Creación de publicaciones destacadas

¡Eso es! Ahora, cuando quiera publicar una publicación, asígnele a la categoría destacada y cree un valor personalizado con una clave de "Featured_image" y un valor de la URL de la imagen. Las imágenes deben ser de 233x130px..

Verlo en acción

Puede ver el tema en acción en nuestro servidor de demostración de NETTUTS WordPress: