En nuestro caso y continuando con la serie de ejercicios anteriores en la que creamos un custom post para guardar vehículos, las columnas que aparecen por defecto son el título, el autor y las taxonomías que creamos: Tipo de Vehículo y Extras).

Estas taxonomías aparecen como columnas porque al definirlas especificamos el argumento:

'show_admin_column' => true

Lo que hace que lo muestre en la columna del administrador. Si no queremos que aparezca solo tenemos que cambiar el valor a «false».

En este artículo veremos cómo añadir nuestras propias columnas para mostrar por ejemplo, el precio y la matrícula que tenemos guardados en campos personalizados.

Para ello vamos a hacer uso del filtro ‘manage_edit-nombre-del-custom-post_columns’ y el action ‘manage_nombre-del-custom-post_posts_custom_column’.

1. Especificamos las columnas con el filtro manage_edit-xxxx_columns

function columnas_post_type_vehiculos($columnas){
    $columnas = array(
        'cb' => '<input type="checkbox" />',
        'title' => 'Título',
        'matricula' => 'Matrícula',
        'precio' => 'Precio',   
    );
    return $columnas;
}
add_filter('manage_edit-vehiculos_columns', 'columnas_post_type_vehiculos') ;

Analizando el código, estamos haciendo referencia a las columnas del tipo de post «vehiculos».

Hemos especificado que aparezca:

1. El checkbox para poder seleccionar el post y realizar acciones en lote con él.
2. El título del post.
3. La matricula.
4. El precio.

Si nos fijamos en los elementos matrícula y precio, el primer valor es la variable que tenemos que especificar sin caracteres especiales, el segundo valor es la etiqueta o nombre que aparecerá en la columna.

Ahora tenemos que especificar de donde tomar los datos para cada columna.

2. Tomar los datos para cada columna

function filas_post_type_vehiculos($columna, $post_id){
    global $post;
    switch($columna){
        case 'matricula':
            $matricula = get_post_meta($post_id, 'matricula', true);
            the_field('matricula');
            break;          
        case 'precio':
            $precio = get_post_meta($post_id, 'precio', true);
            the_field('precio');
            break;     
        
        default :
            break;
    }
}
add_action('manage_vehiculos_posts_custom_column', 'filas_post_type_vehiculos', 2, 10);

Recorremos con un switch columna tras columna y obtenemos su valor con la función the_field() de advanced custom field que es donde tenemos el valor guardado.

En este ejemplo solo aparecerán las columnas, título, matrícula y precio:

Si queremos que también aparezcan las demás columnas (autor, tipo de vehículo y extras, tenemos que definirlas:

function columnas_post_type_vehiculos($columnas){
    $columnas = array(
        'cb' => '<input type="checkbox" />',
        'title' => 'Título',
        'matricula' => 'Matrícula',
        'precio' => 'Precio',  
        'tipo_vehiculo' => 'Tipo de Vehículo',
        'extras' => 'Extras',
        'author' => 'Autor',
    );
    return $columnas;
}
add_filter('manage_edit-vehiculos_columns', 'columnas_post_type_vehiculos');

function filas_post_type_vehiculos($columna, $post_id){
    global $post;
    switch($columna){
        case 'matricula':
            $matricula = get_post_meta($post_id, 'matricula', true);
            the_field('matricula');
            break;  
        case 'precio':
            $precio = get_post_meta($post_id, 'precio', true);
            the_field('precio');
            break;
        case 'tipo_vehiculo':
	    //consultar qué taxonomías hay marcadas
	    $terms = get_the_terms( $post->ID , 'tipo-vehiculo' );
	    if($terms != null){
		foreach( $terms as $term ) {
		    echo $term->name . " ";
		    unset($term);
		}
            }
            break;
        case 'extras':
	    //consultar extras
	    $terms = get_the_terms( $post->ID , 'extras' );
	    if($terms != null){
	        foreach( $terms as $term ) {
		    echo $term->name . " ";
		    unset($term);
		}
	    }
            break;
        default :
            break;
    }
}
add_action('manage_vehiculos_posts_custom_column', 'filas_post_type_vehiculos', 2, 10);

Consideraciones

Hay que tener precaución en cómo llamar a los filtros y acciones de forma que no cometamos errores.

En el add_filter y add_action, modifica únicamente el nombre de tu custom post:

manage_vehiculos_posts_custom_column
manage_animales_posts_custom_column
manage_casas_posts_custom_column

Espero que este artículo te haya sido de interés y puedas utilizarlo en tus proyectos. Seguro que a tus clientes les viene bien tener información a mano de sus contenidos sin necesidad de entrar al post.

Ahora lo que nos falta es crear la página archivo (archive page) para listar nuestro custom post, a modo de listado de entradas de WordPress.

Para ello, al igual que hicimos con el template para el custom post (single-vehiculos.php), necesitamos crear un nuevo archivo (page.php) al que llamaremos por ejemplo page-todos-los-vehiculos.php y guardaremos en el directorio principal del tema activo.

page.php es el archivo que contiene la estructura básica para una página interna de WordPress y al igual que hicimos con single.php, vamos a aprovechar el codigo escrito para copiarlo en nuestro archivo page-todos-los-vehiculos.php y eliminaremos lo que no necesitamos, dejando únicamente el inicio y final del loop.

Dentro del loop vamos a crear la consulta que buscará todas entradas de tipo vehículo.

La esctructura de la consulta se define:

$args = array(
    'post_type' => 'vehiculos',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
);
$consulta_vehiculos = new WP_Query($args);

Primero declaramos una variable $args (argumentos) de tipo array donde pasamos los argumentos de la consulta. Los argumentos más básicos que vamos a definir son: el tipo de post al que hacemos referencia (vehículos), el número de resultados por página (-1 devuelve todos los resultados), el orden (por fecha) y el recorrido del orden (ascendente ASC o descendente DESC).

Existen muchos otros argumentos que ponemos incorporar a la consulta para complicarla todo lo que deseemos, pero de momento vamos a empezar por lo más básico.

Despues generamos una nueva consulta new WP_Query() pasándole los argumentos definidos anteriormente: new WP_Query($args).

A continuación vamos a mostrar los datos recogidos en la consulta creando nuestro propio loop. La síntaxis sería la siguiente:

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
   //Código
endwhile; wp_reset_postdata();

La forma de declarar nuestro loop personalizado es muy similar al que toma WordPress para el loop principal, con la diferencia de que especificamos la variable donde tenemos nuestra consulta:

while($consulta_vehiculos->have_posts())
$consulta_vehiculos->the_post()

Lo que se traduciría en lenguaje comprensible como: «Mientras existan posts de vehículos, muestrame el post de vehículo«.

El final del loop finaliza con endwhile;

Además, para los loops personalizados añadimos la función wp_reset_postdata() para «limpiar» los datos de la consulta una vez mostrados y que no interfieran con otros loops que podamos definir en otras partes.

Para asociar este nuevo archivo con una página interna de WordPress que podamos, por ejemplo añadir al menú principal, crearemos una nueva página y utilizaremos como slug (enlace permanente) el nombre que le hayamos dado al archivo del listado, es decir si hemos llamado al archivo page-todos-los-vehiculos.php utilizaremos como slug en la nueva página «todos-los-vehiculos«.

Como siempre, actualizamos los enlaces permanentes de WordPress en Ajustes – Enlaces Permanentes – Guardar Cambios y en este momento quedará asociado el nuevo archivo page-todos-los-vehiculos.php con la página interna de WordPress Vehículos.

Para probar nuestra nueva página, vamos a incluir en loop una llamada a la función the_title(), que deberá devolvernos todos los títulos de los post de tipo vehículo que haya en la base de datos:

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
    the_title();
endwhile; wp_reset_postdata();

Si visualizamos la página Vehículos, veremos que mostrará el título del post que hay actualmente creado de tipo vehículo:

Vamos a añadir algunos vehículos más para poder jugar con los listados de resultados:

Para la página de archivo de vehículos, tomaremos algunos datos para generar el listado, a parte del título, tomaremos la imagen destacada y una parte del contenido. Para ello, en lugar de llamar a la función the_content(), llamaremos a la función the_excerpt(), que toma solamente una parte del contenido.

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
    the_post_thumbnail();
    the_title('<h2>','</h2>');
    the_excerpt();
endwhile; wp_reset_postdata();

Obtendríamos como resultado:

Por supuesto ya dependería de nosotros darle un poco de formato CSS, metiendo cada apartado en su correspondiente DIV, ajustando el tamaño de las miniaturas, etc. Detalles de diseño que no vamos a ver en este artículo, pues se extendería demasiado y el objetivo principal es el de generar el listado de entradas.

En siguientes artículos veremos cómo paginar este listado, para cuando tengamos un número importante de entradas.

Nos vemos en el siguiente post!

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.

Imaginemos que estamos desarrollando la web de un concesionario de vehículos y queremos publicarlos de forma que cada vehículo se trate como una entrada individual, y así poder categorizarlos, añadirles etiquetas, realizar búsquedas, etc.

Los custom post pueden ser declarados en el archivo de funciones del tema activo (functions.php) o en nuestro propio plugin de funciones.

Declarar un custom post

La estructura básica para añadir el nuevo custom post sería:

<?php
//Custom Post Vehículos
function post_Vehiculos(){
 $labels = array(
 'name'               => _x('Vehículos', 'twentysixteen'),
 'singular_name'      => _x('Vehículo', 'post type singular name', 'twentysixteen'),
 'menu_name'          => _x('Vehículos', 'admin menu', 'gestiona-inmobiliaria'),
 'name_admin_bar'     => _x('Vehículos', 'add new on admin bar', 'twentysixteen'),
 'add_new'            => _x('Añadir Vehículo', 'book', 'twentysixteen'),
 'add_new_item'       => __('Añadir Nuevo Vehículo', 'twentysixteen'),
 'new_item'           => __('Nuevos Vehículos', 'twentysixteen'),
 'edit_item'          => __('Editar Vehículo', 'twentysixteen'),
 'view_item'          => __('Ver Vehículo', 'twentysixteen'),
 'all_items'          => __('Todos los Vehículos', 'twentysixteen'),
 'search_items'       => __('Buscar Vehículos', 'twentysixteen'),
 'parent_item_colon'  => __('Parent Vehículos:', 'twentysixteen'),
 'not_found'          => __('No se han encontrado Vehículos', 'twentysixteen'),
 'not_found_in_trash' => __('No se han encontrado Vehículos en la papelera', 'twentysixteen')
 );
 $args = array(
     'labels'             => $labels,
     'description'        => __('Description.', 'twentysixteen'),
     'public'             => true,
     'publicly_queryable' => true,
     'show_ui'            => true,
     'show_in_menu'       => true,
     'query_var'          => true,
     'rewrite'            => array('slug' => 'vehiculos'),
     'capability_type'    => 'post',
     'has_archive'        => true,
     'hierarchical'       => false,
     'menu_position'      => 6,
     'supports'           => array('title', 'editor', 'author', 'thumbnail'),
 );
 register_post_type('vehiculos', $args);
}
add_action('init', 'post_Vehiculos');
?>

La función contiene 2 elementos principales, las etiquetas ($labels) y los argumentos ($args).

Las etiquetas hacen referencia a los textos que muestra WordPress acerca del custom post, tales como el nombre en singular, en plural, cómo se muestra en el menú, el texto para añadir uno nuevo, para editarlo, etc.

Los argumentos tratan cómo se comportará el custom post, algunos parámetros interesantes son:

• rewrite: el slug que generará nuestro custom post, ejemplo: www.tudominio.com/vehiculos/url_del_post. Es importante escoger uno apropiado de cara al SEO.
• capability_type: especifica si el custom post se va a comportar como una página interna (para información fija) o como un post (entrada). Normalmente pondremos tipo post.
• has_archive: define si el custom post va a tener su propio archivo-listado de posts.
• menu_position: Controla en qué posición del menú aparecerá el nuevo custom post, por ejemplo, antes o después de las Entradas normales. Podemos jugar con el número hasta dejarlo donde queremos.
• supports: Define los elementos que podremos utilizar dentro del custom post, por ejemplo un campo para el título, el editor de WordPress, el autor y la imagen destacada (thumbnail).

Una vez declarado estará disponible en nuestro menú:

Si añadimos un nuevo vehículo, veremos una pantalla de edición muy similar a las entradas, con su campo para el título, el editor de WordPress, la selección del autor y la imagen destacada:

Sin embargo esto podríamos enriquecerlo mucho más, añadiendo categorías, taxonomías y campos personalizados que desatarán realmente todo el potencial de los custom post y que harán que podamos realizar prácticamente cualquier tipo de web.

Veremos cómo integrarlos en siguientes posts.