Continuamos con esta serie de artículos en los que vemos cómo crear contenidos personalizados en WordPress. Una vez que ya hemos creado nuestro custom post, nuestras taxonomías y campos personalizados, quedará crear la plantilla o template que cargará toda esta información.
Dentro de cualquier tema WordPress, el archivo destinado a cargar la información de una entrada es el single.php.
La siguiente imagen muestra el contenido del archivo single.php del tema Twenty Sixteen de WordPress. Cada tema tendrá su código propio, pero lo que nos interesa identificar es dónde comienza y termina el loop. El loop es el código que recoge la información del post que estamos llamando y suele comenzar con:
while ( have_posts() ) : the_post();y terminar con:
endwhile;
Todo lo que va dentro del loop suelen ser las funciones que llaman al título de la entrada, al contenido y a la sección de comentarios.
Para crear un fichero similar que cargue el contenido de nuestros custom posts, solo tenemos que crear un nuevo archivo al que llamaremos single-nombre_del_custom_post.php. En nuestro caso será single-vehiculos.php.
Para este nuevo archivo podemos aprovechar todo el contenido del single.php original (para llamar a la cabecera, sidebars, footer, y menús del tema…) y quedarnos únicamente con el loop vacío, pues añadiremos nuestro propio código para cargar el custom post de Vehículos.
Una vez creado el archivo single-vehiculos.php vamos a refrescar los enlaces permanentes de WordPress, para que este detecte que cada vez que accedamos a una URL del tipo mi-dominio.com/vehiculos/nombre-del-post, cargue la nueva plantilla en lugar de la original. Solo tenemos que ir a Ajustes de WordPress – Enlaces permanentes y Guardar cambios.
Si intentamos acceder a una entrada de tipo Vehículo, veremos que carga correctamente (la URL toma /vehiculos/ford-focus-1-8-tddi), pero el contenido está vacío. Es normal pues dentro del loop no hemos añadido nada de momento.
Para llamar al título del contenido, añadiremos la función the_title() dentro del loop:
Y como resultado obtenedremos el título de la entrada:
Lo normal es que el título tenga un tamaño destacado, para ello la función the_title() permite definir que el contenido aparezca entre etiquetas HTML, por ejemplo un H2, declarándolo de este modo:
the_title('<h2>','</h2>');Y el resultado obtenido será:
También podríamos añadir la imagen destacada, con la función the_post_thumbnail(), declarándola a continuación del título, así como el contenido (procedente del editor de WordPress) con la función the_content():
// Start the loop.
while ( have_posts() ) :
the_post();
the_title('<h2>','</h2>'); //Llama al título del post
the_post_thumbnail(); //Llama a la imagen destacada del post
the_content(); //Llama al contenido
// End of the loop.
endwhile;Esto nos dará como resultado:
Hay que tener en cuenta que la imagen destacada aparecerá con el tamaño del archivo original, o el que permita el contenedor (<div>) donde se encuentre. Podemos llamar a la imagen destacada con un tamaño específico siempre que este se haya declarado en el archivo de funciones del tema.
Por ejemplo, si quisiéramos que la imagen destacada apareciera en el post con un ancho de 500px, tendríamos que definirlo en el archivo de funciones (function.php) del tema activo con:
function tamano_miniaturas(){
add_image_size('cabeceraPost', 500, false);
}
add_action('after_setup_theme', 'tamano_miniaturas');La función add_image_size(), recibe 4 parámetros, el identificador del tamaño, la anchura, la altura y el factor de recorte de proporción (true o false). En este caso solo hemos especificado la anchura, ya que desconocemos la proporción de la imagen y de fijar un alto fijo esta podría aparecer desproporcionada.
Después tendríamos que llamar a la función the_post_thumbnail(‘cabeceraPost’), pasándole como parámetro el identificador del tamaño que hemos especificado en add_image_size().
Pero esto son temas de diseño que no vamos a abordar en este post.
Solo nos quedaría llamar a nuestros campos personalizados para mostrar el precio y matrícula del vehículo.
Advances Custom Field dispone de 2 funciones principales para extraer la información de los campos personalizados:
- the_field(‘identificador_del_campo’)
- get_field(‘identificador_del_campo’)
La principal diferencia entre ellos es que the_field() escribe directamente los datos del campo en el lugar donde lo invoquemos, (viene pre-formateado). Y get_field() está pensado para extraer el valor del campo y almacenarlo en algún lugar, por ejemplo una variable. El uso de uno u otro dependerá de nuestras necesidades. Si solo necesitamos pintar el valor del campo en un div vacío, puede que nos interese hacerlo directamente con the_field(), pero si el dato va a ir dentro de una estructura HTML más compleja, como una tabla, es posible que el pre-formateo de the_title() interfiera y no se muestre correctamente, en casos así sería mejor usar el get_field() guardando el dato en una variable y pintar la variable con un echo. Así es como lo vamos a hacer en nuestro ejemplo:
Definimos una variable $precio y le pasamos el valor del campo personalizado ‘precio’ con un get_field()
$precio = get_field('precio');Y lo mismo con el campo matrícula:
$matricula = get_field('matricula');Después pintamos los campos con un echo y un poco de HTML:
echo "<h3>Precio: " . $precio . "€</h3>"; echo "Matrícula: " . $matricula . "</h3>";
El resultado obtenido será:
Si necesitamos formatear el precio con separadores de miles y decimales, podemos usar la función number_format() de PHP:
echo "<h3>Precio: " . number_format($precio, 2, ',', '.') . "€</h3>";
A la función number_format() le pasamos la variable $precio, el número de decimales a mostrar, el separador de decimales ‘,’ y el separador de miles ‘.’ y tendremos como resultado:
De esta forma formateamos el precio en el momento de pintarlo en el front-end mientras que en la base de datos se mantiene en formato numérico puro, pudiendo más adelante utilizarlo para ordenar vehículos por precio.
En el siguient post veremos como crear una página archivo con los vehículos que ya tengamos guardados en la base de datos.
