Estoy poco a poco rehaciendo mi portfolio online y voy a compartir con vosotros algunos snippets que pueden servir de tutoriales si sabes leer el código.
En esta primera entrega os enseñaré como he creado el sistema de recomendaciones / testimonios de manera dinámica con custom post type. Os dejo tres capturas de pantalla: una del carrusel donde se muestran en la parte pública, y dos del panel de administración de WordPress (una de la vista listado personalizada y otra del panel de creación y edición de nuevos testimonios)
Carrusel en la home donde se muestran los testimonios:
Listado de todos los testimonios:
Vista de edición y creación de nuevos testimonios:
1) Lo primero es crear en el archivo functions.php un link al archivo testimonials.php donde crearemos este custom post type. La razón de ponerlo en un archivo distinto al funcions.php es por ser ordenado.
1
2
3
4
5
6
7
8
| <?php/* Theme para WordPress 3.2.1 por Alberto Fortes | www.albertofortes.com | www.piscolabis @package WordPress @subpackage albertofortes2012-theme*/require_once( dirname( __FILE__ ) . '/lib/testimonials.php' ); |
2) Ahora en /lib crearemos nuestro testimonials.php donde vamos a crear este nuevo custom post type. Al crear el nuevo tipo de contenido, le diremos que sólo nos muestre el título y el editor. No vamos a necesitar en este caso categorías.
Por otra parte crearemos una meta box donde pondremso los 3 campos personalizados de este tipo de contenido: quién, puesto y avatar de la persona que nos hace el testimonio. Para finalizar, modificaremos la vista del listado por defecto, para que únicamente nos muestre quién ha hecho la recomendación y su avatar. No comento nada ya queno es un tutorial sino más bien un snippet que podeis seguir y modificar para crear vuestros custom post types propios:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| <?php/** Theme para WordPress 3.2.1 by Alberto Fortes | www.albertofortes.com | www.piscolabis @package WordPress @subpackage albertofortes2012-theme*///crear custom post type: testimony :add_action('init', 'create_testimonials_type');function create_testimonials_type() { $labels = array( 'name' => _x('Testimonios', 'post type general name'), 'singular_name' => _x( 'Testimony', 'post type singular name' ) ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, //'menu_icon' => get_stylesheet_directory_uri() . '/assets/images/ico/ico-portfolio.png', 'rewrite' => true, 'menu_position' => 5, 'capability_type' => 'post', 'hierarchical' => false, 'supports' => array('title', 'editor') ); register_post_type('testimony', $args); // Eliminando problemas con los permalinks. Es bastante común que al crear custom posts una vez ya activados los permalinks en WordPress los mismos de errores al intentar visualizarlos. add_action('init', 'create_testimonials_type'); flush_rewrite_rules();}// creamos los demás campos personalizados:add_action("admin_menu", "testimonials_init");function testimonials_init() { //add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args ); add_meta_box('testimony_person', 'Quien', 'testimony_person_print', 'testimony', 'normal', 'default');}function testimony_person_print() { global $post; $post_obj = get_post_custom($post->ID); $testimony_who = $post_obj["testimony_who"][0]; $testimony_position = $post_obj["testimony_position"][0]; $testimony_avatar = $post_obj["testimony_avatar"][0]; ?> <p><label for="testimony_who">Persona:</label><br /><input type="text" name="testimony_who" id="testimony_who" value="<?php echo $testimony_who; ?>" style="width:98%" /></p> <p><label for="testimony_position">Cargo:</label><br /><textarea rows="2" cols="" name="testimony_position" id="testimony_position" style="width:98%"><?php echo $testimony_position; ?></textarea></p> <p> <label for="testimony_avatar" style="margin-right: 5px">Avatar:</label><br /> <input type="text" value="<?php echo $testimony_avatar; ?>" name="testimony_avatar" id="testimony_avatar" style="width:98%" /><br /> <button id="testimony_avatar_trigger">Subir imagen</button> </p> <?php if ($testimony_avatar !='') : ?> <p><img src="<?php echo $testimony_avatar; ?>" alt="" id="testimony_avatar_image" /></p> <?php endif;}add_action('admin_print_scripts', 'my_admin_scripts');function my_admin_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload', get_bloginfo('template_url') . '/lib/uploads.js', array('jquery','media-upload','thickbox')); wp_enqueue_script('my-upload');}add_action('save_post', 'testimony_person_save');function testimony_person_save() { global $post; if ($post->post_type == 'testimony') { update_post_meta($post->ID, "testimony_who", $_POST["testimony_who"]); update_post_meta($post->ID, "testimony_position", $_POST["testimony_position"]); update_post_meta($post->ID, "testimony_avatar", $_POST["testimony_avatar"]); }}// creamos columnas con campos personalizados para el backoficce:add_filter("manage_edit-testimony_columns", "testimonials_custom_columns");add_action("manage_posts_custom_column", "testimonials_columns_fields");function testimonials_custom_columns($columns) { $columns = array( "cb" => "<input type=\"checkbox\" />", "avatar" => "Avatar", "who" => "Quien" ); return $columns;}function testimonials_columns_fields($column) { global $post; if ("ID" == $column) echo $post->ID; elseif ("avatar" == $column) echo "<img src='" . get_post_meta($post->ID, "testimony_avatar", true) ."' style='width:35px' />"; elseif ("who" == $column) echo get_post_meta($post->ID, "testimony_who", true);} |
3) Finalmente debemos crear el javascript responsable de lanzarnos el modal para subir archivos de WordPress (nedia upload) cuando hagamos click en subir imagen. Para ser ordenados, y tal como hemso dicho en la función my_admin_scripts() dentro de testimonials.php, vamos a crear nuestro upload.js dentro de l acarpeta lib:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| jQuery(document).ready(function() { jQuery('#testimony_avatar_trigger').click(function() { window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('#testimony_avatar').val(imgurl); jQuery('#testimony_avatar_image').attr('src', imgurl); tb_remove(); } tb_show('', 'media-upload.php?post_id=1&type=image&TB_iframe=true'); return false; }); }); |
La vista sería:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php query_posts(array('orderby' => 'DESC', 'showposts' => 10, 'post_type' => 'testimony')); if (have_posts()) : while (have_posts()) : the_post(); ?> <li> <div class="testimony"> <?php the_content(); ?> <div class="who"> <?php $avatar = get_post_meta($post->ID, "testimony_avatar", true); if($avatar) : ?> <img src="<?= $avatar; ?>" alt="avatar de <?= get_post_meta($post->ID, "testimony_who", true); ?>" /> <?php endif; ?> <p><?= get_post_meta($post->ID, "testimony_who", true); ?>,<br /> <?= get_post_meta($post->ID, "testimony_position", true); ?></p> </div> </div> </li> <?php endwhile; endif; wp_reset_query(); ?> |
He cortado y pegado esto directamente desde mi theme, por lo que debe funcionar perfectamente. Alternativamente puedes clonar este snipper desde mi gist con esta url pública:
git://gist.github.com/2908769.git gist-2908769
No hay comentarios.:
Publicar un comentario