Cargando



Creando post personalizados en WordPress (Custom post types)


Vamos a crear un un ejemplo custom post type para una inmobiliaria. Instalaremos la ultima versión de wordpress y luego vamos a ver si la plantilla que tenemos admite imágenes en miniatura , también conocidas como thumbnails.


jun 30 2013 09:27
Profesional
jun 30 2013 09:34
Muchas veces como desarrolladores necesitamos crear contenido personalizado o alguna funcionalidad de manera organizada y dar de alta valores y campos propios que no posee Wordpress por defecto, además es importante que sea reutilizable.

Busco en el directorio de la plantilla el fichero functions.php, aquí por ejemplo dentro del la plantilla Twenty ten.

post_personalizados_wordpress.jpg


Dentro del fichero buscamos si existe la función add_theme_support( 'post-thumbnails' ) que es la que permite el uso de imágenes miniatura, si no esta la agrego y además voy a añadir un variable para un tamaño especifico.



post_personalizados_wordpress_2.jpg


En este caso la plantilla ya trae soporte para imágenes miniatura así que solo añado mi tamaño personalizado.
Esto significa que cuando le asigne inmueble-thumb a una imagen automáticamente se dimensionara a 80 pixeles de ancho por 80 pixeles de alto.

Comenzamos a crear la funcionalidad para ello es mejor separa le código, podría poner al final del fichero functions, pero para trabajar mas ordenado lo pondremos en un directorio Componentes
donde crearemos un fichero llamado inmobiliaria.php, asi nos queda el componente separado.


<?
// POST PESRONALIZADO: Inmobiliaria
// Defino las etiquetas de los menu y formularios
//----------------------------------------------
$inmobiliaria_labels = array(
'name' => _x('Inmobiliaria', 'post type general name'),
'singular_name' => _x('Inmuebles', 'post type singular name'),
'add_new' => _x('Nuevo inmueble', 'inmueble'),
'add_new_item' => __("Nuevo Imueble"),
'edit_item' => __("Editar inmueble"),
'new_item' => __("Nuevo inmueble"),
'view_item' => __("Ver inmueble"),
'search_items' => __("Buscar inmueble"),
'not_found' => __('No se encontraron inmuebles'),
'not_found_in_trash' => __('No hay inmuebles'),
'parent_item_colon' => ''
	
);

//Creo los argumentos para la base de datos
$inmobiliaria_args = array(
'labels' => $inmobiliaria_labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'hierarchical' => false,
'menu_position' => null,
'capability_type' => 'post',
'supports' => array('title', 'excerpt', 'editor', 'thumbnail'),
'menu_icon' => get_bloginfo('template_directory') . '/images/photo-album.png' //16x16 png if you want an icon
);
//Registro el post
register_post_type('inmobiliaria', $inmobiliaria_args);
?>

Luego lo incluimos en el fichero functions.php al final o en un apartado para los componentes, en este caso lo pusimos junto con las demás configuraciones.



post_personalizados_wordpress_3.jpg


Vamos a ingresar a nuestro administrador de wordpress, en caso de que este activo deberíamos actualizar o cerrar sesión y volver a ingresar para actualizar los cambios realizados en el fichero functions.php, que es quien invoca al componente.

Como podemos ver se ha añadido un nuevo me inmobiliaria, para poder gestionar nuestros propios datos para este componente de post personalizado.



post_personalizados_wordpress_4.jpg


Vamos a crear también algunas categorías o taxonomías para que nuestra aplicación este mas completa. Por ejemplo El tipo de inmueble casa, piso, etc y otra para provincias Para ello en el fichero inmobiliarias a continuación añadiremos el siguiente código, cada bloque es una categoría y podríamos crear las que quisiéramos.

<?php
// Crear Tipo de inmuebles
add_action( 'init', 'tx_tipo_inmueble', 0);

function tx_tipo_inmueble(){
register_taxonomy(
	 'tipo', 'inmobiliaria',
	 array(
		 'hierarchical'=> true,
		 'label' => 'Tipos de inmueble',
		 'singular_label' => 'Tipo',
		 'rewrite' => true
	 )
);
}
?>

<?php
// Crear Provincias
add_action( 'init', 'tx_provincia', 0);

function tx_provincia(){
register_taxonomy(
	 'provincia', 'inmobiliaria',
	 array(
		 'hierarchical'=> true,
		 'label' => 'Provincias',
		 'singular_label' => 'provincia',
		 'rewrite' => true
	 )
);
}
?>

Luego al actualizar nuestra administrador de wordpress podremos observar ambas categorías en el menú inmobiliaria.



post_personalizados_wordpress_5.jpg


Listando nuestros propios datos

Las entradas y pagina de wordpress en el administrador siempre tiene los mismos datos titulo, autor y fecha, en este caso necesitamos listar los datos del componente inmobiliaria. Para ello vamos a personalizar las columnas del listado

<?php
// Personalizar columnas
//----------------------------------------------
//activo la accion de personalizar columnas
//para el componente inmobiliaria
add_action('manage_posts_custom_column', 'personalizar_columnas');
add_filter('manage_edit-inmobiliaria_columns', 'inmobiliaria_columnas');

// Defino que columnas se mostraran en el listado
function inmobiliaria_columnas( $columnas ){
$columnas = array(
	 'cb'	 =>	 '<input type="checkbox">',
	 'title'			 =>	 'Titulo',
	 'foto'	 =>	 'Foto',
		 'tipo'	 => 	 'Tipo Inmueble',
	 'provincia' => 'Provincia',
	 'date' =>	 'Fecha',
);
return $columnas;
} ?>


Luego de indicar los títulos y tipo columnas se van a mostrar, procedemos a asignarle los datos provenientes de consultas que realizaremos en la base de datos y asignaremos los datos a cada columna, en este caso las categorías las buscamos con la función de wordpress get_the_term_list().

<? function personalizar_columnas( $column ){
global $post;

switch ($column) {
	 case 'foto' : echo the_post_thumbnail('inmueble-thumb'); break;
	 case 'inmueble' : the_title(); break;
	 case 'tipo' : echo get_the_term_list( $post->ID, 'tipo', '', ', ',''); break;
	 case 'provincia' : echo get_the_term_list( $post->ID, 'provincia', '', ', ',''); break;
}
}

//add thumbnail images to column
add_filter('manage_posts_columns', 'mostrarfoto', 5);
add_filter('manage_pages_columns', 'mostrarfoto', 5);
add_filter('manage_custom_post_columns', 'mostrarfoto', 5);

// Add the column
function mostrarfoto($cols){
$cols['foto'] = __('Thumbnail');
return $cols;
}
?>

Para el caso de la imagen creamos una función para buscar la foto y la añadimos a custom_post_columns si queremos también podemos añadirlo para que sea soportado para post y paginas, aparte de nuestro componente, sino quitamos esas lineas.

<? //add thumbnail images to column
add_filter('manage_posts_columns', 'mostrarfoto', 5);
add_filter('manage_pages_columns', 'mostrarfoto', 5);
add_filter('manage_custom_post_columns', 'mostrarfoto', 5);

// Add the column
function mostrarfoto($cols){
$cols['foto'] = __('Thumbnail');
return $cols;
}
?>


Guardamos el fichero inmobiliaria.php donde hicimos estos cambios y actualizamos la pagina del administrador de wordpress. Vamos a testear nuestra aplicación dando de alta un inmueble, para ello previamente daremos de alta las categorías Tipos de inmuebles: Casa, Piso, Terrenos, etc.

Luego daremos de alta algunas provincias Barcelona, Madrid, etc.
Luego vamos al menú Inmuebles > Nuevo inmueble y damos de alta los datos como una entrada normal de wordpress, solo que tendremos las categoría y una imagen o foto para insertar como imagen destacada.




post_personalizados_wordpress_6.jpg


Recordemos que las imágenes se dimensionaran a 80 x 80 pixeles para el listado de inmuebles, esto lo habiamos defincido en nuestro tamaño personalizado inmuebles-thumb, así que lo mejor sera que utilicemos imágenes cuadradas para que no se corten, lo ideal seria de 500x500 pixeles.

Luego al guardar los cambios podremos ir a visualizar el listado de inmuebles y veremos nuestras columnas personalizadas, con todas las funcionalidades activadas para buscar filtrar, ordenar alfabéticamente o ver solo alguna provincia, etc



post_personalizados_wordpress_7.jpg


Esto nos resultara muy fácil de administrar y además podremos añadirle mas funcionalidades si necesitamos modificando el tipo de entrada personalizada o custom post type. En cuanto a reutilización el componente es óptimo, ya que si queremos utilizarlo en otro proyecto simplemente copiamos el custom post type, lo incluimos en nuestro fichero functions.php y lo tendremos disponible para utilizar sin tener que volverlo a programar.

Luego con un código sencillo podremos mostrar esto en la home o en un sección de nuestra web, realizar búsquedas por provincia o por tipo de inmueble.

También podemos extender el componente añadiéndole mas funcionalidades o complementándolo con otros plugin, por ejemplo para implementarlo en varios idiomas con Qtraslator o añadir varias imágenes Multiple Featured Images para disponer de más imágenes destacadas y crear una galería de fotos para cada inmueble.

Cambiando algunas lineas también podría utilizarse para una agencia de vehículos donde las categorías fueran marcas y modelos de vehículos o para una agencia de viajes donde tendríamos paquetes y destinos, las posibilidades son infinitas, todo depende de las necesidades y de nuestra imaginación.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X