En el tutorial de hoy vamos a aprovechar el poder de los tipos de entradas personalizadas, las taxonomías y los bucles o «loops» personalizados para crear un listado dinámico de productos. Hay muchas cosas que ver, ¡así que vamos directamente a ello!
Paso 1 Crear un tipo de entrada personalizada de productos
En primer lugar, necesitamos crear nuestro tipo de entrada personalizada para los productos. Abre tu archivo functions.php y añade la siguiente línea en la parte superior después de la etiqueta PHP de apertura:
|
1 |
require_once ('functions/products.php'); |
Si aún no tienes uno, crea un directorio llamado functions dentro de tu carpeta de temas y un archivo llamado products.php dentro de dicho directorio. En nuestro archivo products.php, registraremos nuestro tipo de entrada personalizada:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
add_action( 'init', 'product_register' ); function product_register() { $labels = array( 'name' => _x('Products', 'post type general name'), 'singular_name' => _x('Product', 'post type singular name'), 'add_new' => _x('Add New', 'Product'), 'add_new_item' => __('Add New Product'), 'edit_item' => __('Edit Product'), 'new_item' => __('New Product'), 'all_items' => __('All Products'), 'view_item' => __('View Products'), 'search_items' => __('Search Products'), 'not_found' => __('No products found'), 'not_found_in_trash' => __('No products found in Trash'), 'parent_item_colon' => '', 'menu_name' => 'Products' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'hierarchical' => false, 'supports' => array( 'title', 'editor', 'thumbnail', 'page-attributes' ) ); register_post_type('products',$args); } |
La primera línea es un gancho que llamará a nuestra función ‘products_register’ cuando se inicializa el administrador de WP. Dentro de nuestra función configuramos dos matrices. La primera son las etiquetas que se utilizarán en nuestro escritorio de WordPress. Dentro de nuestra función creamos un listado de argumentos la mayoría de los cuales se explican por sí mismos. Nuestro último argumento ‘supports’ nos permite especificar lo que queremos mostrar en la página de escritura/edición de la entrada. Ten en cuenta que hemos añadido compatibilidad con los atributos de página para especificar el orden de nuestros productos dentro de una categoría (imagen del escritorio). A continuación, pasamos en la función register_post_type el nombre de nuestro tipo de entrada personalizada y los argumentos.
Vamos a añadir un campo personalizado para almacenar el precio de nuestros productos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
add_action("admin_init", "price_meta"); function price_meta(){ add_meta_box("price", "Price", "Price", "products", "normal", "low"); } function price(){ global $post; $custom = get_post_custom($post->ID); $price = $custom["price"][0]; ?> <label>Price:</label> <input id="price" name="price" type="text" value="<?php echo $price; ?>" /> <?php } add_action('save_post', 'save_meta'); function save_meta(){ global $post; update_post_meta($post->ID, price, $_POST["price"]); } ?> |
Una vez más, cuando se inicializa el administrador de WP, nuestra función price_meta es invocada y mostrará nuestro campo personalizado. A continuación, creamos una función llamada price que creará el campo de formulario para nuestro tipo de entrada personalizada. También hemos capturado su valor actual usando get_post_custom para que podamos mostrarlo cuando estemos editando una entrada si se ha establecido un valor. Nuestra última función guarda el valor asignado a nuestro campo personalizado utilizando update_post_meta(). Pasamos a la función el ID de nuestra entrada, el nombre del campo que está siendo actualizado y el valor que estamos almacenando.
Paso 2 Crear una taxonomía de categoría de productos
Queremos poder organizar nuestros productos en categorías, así que vamos a crear una taxonomía personalizada llamada Product Categories para poder hacer exactamente eso.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$labels = array( 'name' => _x( 'Product Categories', 'taxonomy general name' ), 'singular_name' => _x( 'Product Category', 'taxonomy singular name' ), 'search_items' => __( 'Search Product Categories' ), 'all_items' => __( 'All Product Categories' ), 'parent_item' => __( 'Parent Category' ), 'parent_item_colon' => __( 'Parent Category:' ), 'edit_item' => __( 'Edit Product Category' ), 'update_item' => __( 'Update Product Category' ), 'add_new_item' => __( 'Add Product Category' ), 'new_item_name' => __( 'New Product Category' ), 'menu_name' => __( 'Product Categories' ) ); register_taxonomy('product_categories',array('products'), array( 'hierarchical' => true, 'labels' => $labels, 'query_var' => true, 'show_ui' => true )); |
Una vez más, definimos nuestras etiquetas. A continuación, invocamos la función register_taxonomy. Le indicamos a la función el nombre de nuestra taxonomía, es decir, product_categories (ten en cuenta la falta de espacios y las letras mayúsculas), los tipos de entrada(s) a asociar a la taxonomía y le pasamos un puñado de argumentos. Es importante destacar que establecemos hierarchical en true para admitir taxonomías anidadas o en nuestro caso, subcategorías de producto.
Paso 3 Tratar con imágenes
Nuestros productos harán uso de imágenes destacadas, por lo que necesitamos asegurarnos de que nuestro tema las admita. Comprueba el archivo functions.php de tu tema y fíjate si ya es compatible con las miniaturas de entrada, si no añade esta línea en la parte superior del archivo, justo bajo donde hemos añadido nuestro tipo de entrada personalizada.
|
1 2 3 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); } |
Nos gustaría asignar una imagen a cada una de nuestras categorías de productos. Por ahora no hay una forma integrada de hacer esto, así que tendremos que instalar el fantástico plugin Taxonomy Images de Michael Fields. Una vez que tengamos el plugin instalado y activado navegamos a su página de configuración y le indicamos que añada soporte de imagen a nuestra taxonomía de categorías de productos.
A continuación vamos a añadir soporte para el cambio dinámico de tamaño de imágenes para nuestra categoría de productos e imágenes de productos usando Timthumb, un script de cambio de tamaño de imagen PHP. Es un placer trabajar con Timbhumb y una brisa a implementar en los temas de WordPress. Pronto nos meteremos a fondo en su uso en los archivos de nuestros temas, pero por ahora vamos a configurarlo. Vamos a descargar Timthumb y a colocar el script en los archivos de nuestro tema. También necesitaremos crear un directorio de caché en el directorio de nuestro tema y asignarle un nivel de permisos 777.
Paso 4 Listar nuestras categorías de producto de nivel superior
Para enumerar nuestras categorías de producto de nivel superior vamos a crear una plantilla de página personalizada que llamaremos Products.
|
1 2 3 4 5 6 |
<?php /** Template Name: Products */ get_header(); ?> |
A continuación vamos a crear una consulta para nuestras categorías de nivel superior.
|
1 2 3 4 |
$args=array( 'hide_empty' => 0, 'parent' => 0, 'taxonomy' => 'product_categories'); |
Aquí hemos configurado tres argumentos que pasaremos a la función get_categories. Cada argumento es esencial para recuperar las categorías de producto de nivel superior
- Hide_empty => 0 Permite mostrar categorías que no contienen ninguna entrada
- Parent => 0 Al definir un elemento primario hemos limitado las taxonomías devueltas a solo taxonomías que tienen un elemento primario con un ID de 0. Al establecer el ID principal en 0 significa que devolveremos taxonomías de nivel superior dado que no tienen ninguna categoría padre
- Taxonomy => ‘product_categories’ aquí estamos definiendo la taxonomía a consultar, por defecto esta está establecida en «category» por lo que tenemos que indicarle a WordPress que en su lugar queremos consultar nuestra taxonomía personalizada
A continuación, pasamos los argumentos a get_categories que devuelve una matriz de taxonomías coincidentes. Comenzamos un bucle foreach y establecemos un par de variables.
La primera es la imagen de la categoría de producto que hemos recuperado mediante get_option y pasándole el nombre de la opción que queremos recuperar. En este caso es la imagen establecida por el plugin de imágenes de taxonomía. La siguiente variable es la dirección URL del archivo de la taxonomía. Para lograr esto hemos utilizado la función get_term_link pasándole el slug y el nombre de la taxonomía. A continuación, comenzamos a generar las categorías de productos coincidentes.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$categories=get_categories($args); foreach($categories as $category) { echo '<div class="product-cat">'; $thumb_url = get_option('taxonomy_image_plugin'); $product_cat_url = get_term_link( $category->slug, 'product_categories' ); echo '<a href="'.$product_cat_url.'"><img src="'.get_template_directory_uri().'/timthumb.php?src='.wp_get_attachment_url( $thumb_url[$category->term_taxonomy_id]).'&h=200&w=200" /></a>'; echo '<a class="cat-title" href="' . $product_cat_url .'">' . $category->name.'</a>'; echo '</div> <!--end product cat-->'; } |
Echemos un vistazo a cómo se generan las miniaturas usando Timthumb. Necesitamos establecer la fuente en la ruta de nuestra copia del script que hemos ubicado en el directorio de nuestro tema. A continuación, tenemos que proporcionarle al script la fuente de la imagen y establecer su anchura y altura. Es simple, ¿no? También he configurado una instrucción if para asegurarme de que tenemos una alternativa por si una categoría no tiene una imagen asociada.
Lo que te queda por leer:
- Paso 5 Listar subcategorías y productos
- Paso 6 Visualizar un producto individual
Deja una respuesta