Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
Los tipos de publicaciones personalizadas te brindan posibilidades ilimitadas para crear contenido. El truco está tratando de presentarlo todo a tus usuarios. Estamos hablando de porcentajes de rebote aquí, y una de las mejores formas de disminuir su tasa de rebote y mantener a los usuarios en su sitio es presentar la mayor cantidad de contenido posible de una manera limpia y organizada. Este tutorial ofrece una solución que le muestra cómo crear un widget personalizado con pestañas que toma sus últimos artículos de múltiples tipos de publicaciones personalizadas y, como bonificación, le muestra cómo mostrar las calificaciones de estrellas junto a cada publicación.
Visión de conjunto. Nuestro plan de ataque
Este tutorial explica cómo modificar un tema existente (no cómo crear un complemento) agregando nuevos tipos de publicaciones personalizadas y luego creando un widget personalizado que pestañea entre los nuevos tipos de publicaciones personalizadas mediante una elegante transición de jQuery. Además, aprenderá cómo usar metacampos personalizados en los nuevos tipos de publicaciones personalizadas para asignar una clasificación por estrellas que se mostrará en el widget personalizado que creamos.
Finalmente, el widget podrá ordenar los tipos de publicaciones personalizadas por fecha o calificación. Aquí hay un plano de nuestro producto final y de dónde provienen cada uno de los elementos:
Solo hay tres archivos que deberá modificar para agregar esta funcionalidad a su tema, todos los cuales son archivos estándar que vienen con prácticamente todos los temas de WP:
- functions.php
- header.php
- style.css
Utilizaré el tema predeterminado de WP 3.0 llamado TwentyTen en este tutorial, pero el método será el mismo para cualquier tema que desee modificar; aún editará (o creará si no existen) estos tres archivos sin importar qué tema está modificando / creando. Los tipos de publicaciones personalizadas que crearé son Revisiones de películas, Revisiones de música y Revisiones de juegos:
Paso 1: Crea los tipos de publicaciones personalizadas
Antes de crear el widget que mostrará nuestras revisiones, primero debemos crear las reseñas, y para hacerlo tendremos que crear tres nuevos tipos de publicaciones personalizadas. En este tutorial se supone que está familiarizado con la creación de tipos de publicaciones personalizadas, por lo que si necesita repasarlo antes de continuar, el Codex explica cómo registrar nuevos tipos de publicaciones en detalle. Ahora crearemos nuestro tipo de publicación de Revisiones de películas. Abra el archivo functions.php y agregue el siguiente código al final:
1 |
//##########################################
|
2 |
//create custom post type of Movie Reviews
|
3 |
//##########################################
|
4 |
|
5 |
function create_oswc_movie_reviews() { |
6 |
register_post_type( 'oswc_movie_reviews', |
7 |
array( |
8 |
'labels' => array( |
9 |
'name' => __( 'Movie Reviews' , 'twentyten'), |
10 |
'singular_name' => __( 'Movie Review' , 'twentyten'), |
11 |
'add_new' => __('Add new review', 'twentyten'), |
12 |
'edit_item' => __('Edit review', 'twentyten'), |
13 |
'new_item' => __('New review', 'twentyten'), |
14 |
'view_item' => __('View review', 'twentyten'), |
15 |
'search_items' => __('Search reviews', 'twentyten'), |
16 |
'not_found' => __('No reviews found', 'twentyten'), |
17 |
'not_found_in_trash' => __('No reviews found in Trash', 'twentyten') |
18 |
),
|
19 |
'public' => true, |
20 |
'menu_position' => 25, |
21 |
'rewrite' => array('slug' => 'movie-review'), |
22 |
'supports' => array('title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions'), |
23 |
'taxonomies' => array('category', 'post_tag') |
24 |
)
|
25 |
);
|
26 |
}
|
27 |
add_action( 'init', 'create_oswc_movie_reviews' ); |
Esto crea un tipo de publicación llamada oswc_movie_reviews, le dice a WP cuáles deben ser todas las etiquetas del tipo de publicación, hace que el tipo de publicación sea público, lo coloca justo después del menú Comentarios en la estructura de menú de administración de WP, reescribe la barra del tipo de publicación (más bonita en enlaces permanentes), le dice a WP que habilite ciertos atributos para el tipo de publicación (como una miniatura y un extracto), y finalmente le dice a WP que permita al usuario asignar categorías y etiquetas al tipo de publicación como las publicaciones normales.
En aras de la brevedad, no definiremos ninguna taxonomía personalizada, ya que el widget que crearemos no interactúa de ninguna manera con las taxonomías. En una situación del mundo real, es probable que cree taxonomías personalizadas cush como Movie Genre, Movie Director, Actors, etc. Para ver cómo crear taxonomías personalizadas, consulte el Codex de WordPress vinculado anteriormente.
"Al escribir sus propias funciones y variables, siempre es una buena idea usar un prefijo en el nombre solo para asegurarse de que no comparte el mismo nombre que otras funciones o variables de WP o plugins de terceros. Notarán esto tutorial ya sea prefaces, o incluye dentro de todos los nombres de funciones y variables, la cadena oswc_."
A continuación, creemos los otros dos tipos de publicaciones personalizadas que utilizaremos en este widget. La lógica es exactamente la misma que el tipo de Reseñas de películas que acabamos de agregar. Todo lo que hacemos es cambiar el código para reflejar las Revisiones de Música y las Revisiones de Juego, respectivamente. Agregue este código después del código que agregó arriba:
1 |
//##########################################
|
2 |
//create custom post type of Music Reviews
|
3 |
//##########################################
|
4 |
|
5 |
function create_oswc_music_reviews() { |
6 |
register_post_type( 'oswc_music_reviews', |
7 |
array( |
8 |
'labels' => array( |
9 |
'name' => __( 'Music Reviews', 'twentyten' ), |
10 |
'singular_name' => __( 'Music Review', 'twentyten' ), |
11 |
'add_new' => __('Add new review', 'twentyten'), |
12 |
'edit_item' => __('Edit review', 'twentyten'), |
13 |
'new_item' => __('New review', 'twentyten'), |
14 |
'view_item' => __('View review', 'twentyten'), |
15 |
'search_items' => __('Search reviews', 'twentyten'), |
16 |
'not_found' => __('No reviews found', 'twentyten'), |
17 |
'not_found_in_trash' => __('No reviews found in Trash', 'twentyten') |
18 |
),
|
19 |
'public' => true, |
20 |
'menu_position' => 26, |
21 |
'rewrite' => array('slug' => 'music-review'), |
22 |
'supports' => array('title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions'), |
23 |
'taxonomies' => array('category', 'post_tag') |
24 |
)
|
25 |
);
|
26 |
}
|
27 |
add_action( 'init', 'create_oswc_music_reviews' ); |
28 |
|
29 |
//##########################################
|
30 |
//create custom post type of Game Reviews
|
31 |
//##########################################
|
32 |
|
33 |
function create_oswc_game_reviews() { |
34 |
register_post_type( 'oswc_game_reviews', |
35 |
array( |
36 |
'labels' => array( |
37 |
'name' => __( 'Game Reviews', 'twentyten' ), |
38 |
'singular_name' => __( 'Game Review', 'twentyten' ), |
39 |
'add_new' => __('Add new review', 'twentyten'), |
40 |
'edit_item' => __('Edit review', 'twentyten'), |
41 |
'new_item' => __('New review', 'twentyten'), |
42 |
'view_item' => __('View review', 'twentyten'), |
43 |
'search_items' => __('Search reviews', 'twentyten'), |
44 |
'not_found' => __('No reviews found', 'twentyten'), |
45 |
'not_found_in_trash' => __('No reviews found in Trash', 'twentyten') |
46 |
),
|
47 |
'public' => true, |
48 |
'menu_position' => 27, |
49 |
'rewrite' => array('slug' => 'game-review'), |
50 |
'supports' => array('title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions'), |
51 |
'taxonomies' => array('category', 'post_tag') |
52 |
)
|
53 |
);
|
54 |
}
|
55 |
add_action( 'init', 'create_oswc_game_reviews' ); |
Suba el archivo functions.php modificado y verá los elementos del menú para los tres tipos de publicaciones personalizadas. Su panel de administración debería verse así:
Paso 2: Escribe algunos comentarios
La revisión
Ahora que hemos habilitado la opción de agregar reseñas, ¡escribamos algo! Haga clic en Agregar nueva reseña en el menú Revisiones de películas y escriba la reseña como si fuera una publicación normal. Dale un título, publica contenido, categorías, etiquetas y una imagen destacada.
El Rating
Entonces, ¿qué tenemos que hacer para que la revisión tenga una clasificación de estrellas que aparezca en el widget? Simple: agregue un campo personalizado. Primero, asegúrese de tener habilitado el panel Campos personalizados en su caja de herramientas Opciones de pantalla al alternar la pestaña Opciones de pantalla y seleccionar Campos personalizados:
Con los campos personalizados visibles, agregue un nuevo campo personalizado llamado Rating. Dale un valor numérico del 0 al 5, incrementándolo en .5. Entonces, los valores disponibles serían 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.
"La única parte que necesita agregar para que funcione este widget es el título y el campo personalizado, todo lo demás está ahí, por ejemplo, y lo que agregue dependerá de cómo quiera configurar su sitio específico".
Agregue revisiones de la misma manera para los otros dos tipos de revisión. Agregue al menos algunas revisiones para cada uno de los tres tipos para que el widget tenga algo que mostrar. Con nuestro contenido en su lugar, ahora estamos listos para construir el widget que mostrará nuestras reseñas. Atacaremos el widget en tres fases: el PHP, luego el jQuery y finalmente el CSS.
Paso 3: Crea el widget personalizado PHP
Este es el paso más complicado del tutorial. En este paso, escribiremos el código PHP que crea y agrega nuestro widget personalizado a WordPress, y luego escribiremos una función PHP personalizada que se encarga de mostrar las calificaciones de estrellas para cada revisión.
El widget personalizado
Hay cuatro funciones que debemos agregar al extender la clase WP_Widget para agregar nuestro widget. Aquí está la estructura del código que usaremos para extender la clase:
1 |
class My_Widget extends WP_Widget { |
2 |
function My_Widget() { |
3 |
// widget actual processes
|
4 |
}
|
5 |
|
6 |
function widget($args, $instance) { |
7 |
// outputs the content of the widget
|
8 |
}
|
9 |
|
10 |
function update($new_instance, $old_instance) { |
11 |
// processes widget options to be saved
|
12 |
}
|
13 |
|
14 |
function form($instance) { |
15 |
// outputs the options form on admin
|
16 |
}
|
17 |
}
|
18 |
register_widget('My_Widget'); |
Como puede ver, necesitamos una función que nombre y cree el widget, una función que controle cómo se muestra en el front-end, una función que maneje la actualización de las opciones del widget y una función que controle cómo se muestra en el panel de administración ( la página de WordPress >> Appearance >> Widgets). Después de hacer todo eso, registramos el widget con WordPress.
Para obtener detalles sobre el desarrollo de widgets, consulte el Codex, que además explica la API de widgets de WordPress.
Construyamos cada función y hagamos que todo sea único para nuestro widget personalizado. Primero, envolvemos todo en una clase con nuestro nombre de widget:
1 |
class oswc_tabbed_latest_reviews extends WP_Widget { |
2 |
// ...widget functions...
|
3 |
}
|
Luego agregamos la primera función dentro de esa clase. Esta función tiene el mismo nombre que la clase, que es el nombre de nuestro widget. Configuraremos el bonito nombre de nuestro widget que se muestra en la página de widgets, así como algunas configuraciones predeterminadas para el widget:
1 |
function oswc_tabbed_latest_reviews() { |
2 |
// widget settings
|
3 |
$widget_ops = array( 'classname' => 'Latest Review Tabs', 'description' => 'Displays reviews by most recent or highest rated in a jQuery tabbed format.' ); |
4 |
// widget control settings
|
5 |
$control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'oswc_tabbed_latest_reviews' ); |
6 |
// create the widget
|
7 |
$this->WP_Widget( 'oswc_tabbed_latest_reviews', 'Latest Review Tabs', $widget_ops, $control_ops ); |
8 |
}
|
Ahora agreguemos la siguiente función. En primer lugar, tomamos las variables de nuestro widget (que configuraremos en la siguiente función) y luego creamos una variable para ver de qué manera estamos ordenando el widget:
1 |
function widget( $args, $instance ) { |
2 |
|
3 |
extract( $args ); |
4 |
|
5 |
/* User-selected settings. */
|
6 |
$sort = $instance['sort']; |
7 |
$showmovies = $instance['showmovies']; |
8 |
$showmusic = $instance['showmusic']; |
9 |
$showgames = $instance['showgames']; |
10 |
$nummovies = $instance['nummovies']; |
11 |
$nummusic = $instance['nummusic']; |
12 |
$numgames = $instance['numgames']; |
13 |
|
14 |
if($sort=="highest-rated") { |
15 |
$feedsort="meta_value"; |
16 |
$metakey="&meta_key=Rating"; |
17 |
} else { |
18 |
$feedsort="date"; |
19 |
$metakey=""; |
20 |
}
|
Entonces, comenzamos a crear el HTML. Envuelva todo el widget en un div con la identificación de "tabbed-reviews" (el jQuery se enganchará en esto más adelante) y luego configure una pestaña para cada tipo de revisión. Finalmente, otro div ajusta el contenido en cada pestaña:
1 |
/* HTML output */ |
2 |
?> |
3 |
|
4 |
<div id="tabbed-reviews"> |
5 |
<ul class="tabnav"> |
6 |
<?php if($showmovies) { ?><li><a href="#tabs-movies">Movies</a></li><?php } ?> |
7 |
<?php if($showmusic) { ?><li><a href="#tabs-music">Music</a></li><?php } ?> |
8 |
<?php if($showgames) { ?><li><a href="#tabs-games">Games</a></li><?php } ?> |
9 |
</ul>
|
10 |
|
11 |
<div class="tabdiv-wrapper"> |
Dentro del div tabdiv-wrapper tenemos que crear un bucle que capture títulos de publicaciones y clasificaciones de estrellas de un tipo de publicación personalizada especificada. La primera pestaña es para Movie Reviews, por lo que verificamos si ese tipo de revisión se muestra en las opciones del widget, y si es así, mostramos una pestaña con una lista desordenada dentro de ella. Aquí está el bloque completo de código para el contenido de la pestaña Movie Review, que describiremos a continuación:
1 |
<?php if($showmovies) { ?> |
2 |
|
3 |
<div id="tabs-movies" class="tabdiv"> |
4 |
<ul>
|
5 |
<?php // setup the query |
6 |
$args='&suppress_filters=true&posts_per_page='.$nummovies.'&post_type=oswc_movie_reviews&order=DESC&orderby='.$feedsort.$metakey; |
7 |
$cust_loop = new WP_Query($args); |
8 |
if ($cust_loop->have_posts()) : while ($cust_loop->have_posts()) : $cust_loop->the_post(); $postcount++; |
9 |
// if we're sorting by rating and this item does not have a rating, hide it
|
10 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
11 |
if(($rating && $feedsort=="meta_value") || ($feedsort!="meta_value")) { |
12 |
?>
|
13 |
<li>
|
14 |
|
15 |
<?php oswc_show_rating($rating); // show the stars ?> |
16 |
|
17 |
<a class="post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
18 |
|
19 |
</li>
|
20 |
|
21 |
<?php } ?> |
22 |
|
23 |
<?php endwhile; |
24 |
endif; |
25 |
wp_reset_query(); ?> |
26 |
|
27 |
<li class="last gentesque tooltip" title="View all movie reviews"><a href="movie-reviews/">More</a></li> |
28 |
|
29 |
</ul>
|
30 |
</div>
|
31 |
|
32 |
<?php } ?> |
El corazón de ese bloque de código es el ciclo personalizado que creamos para captar publicaciones del tipo de publicación de Revisiones de películas. Aquí están los argumentos que usamos para el ciclo:
1 |
$args='&suppress_filters=true&posts_per_page='.$nummovies.'&post_type=oswc_movie_reviews&order=DESC&orderby='.$feedsort.$metakey; |
Primero usamos suppress_filters solo para asegurarnos de que solo captemos el tipo de publicación específico que queremos (algunos temas o complementos pueden tener funcionalidad que inyecte todos los loops con todos los tipos de publicaciones; este argumento asegura que nuestro widget se mantenga fiel a su tipo de publicación especificado).
La parte más importante es post_type = oswc_movie_reviews, ya que le dice a este bucle que solo busque el tipo de publicación personalizada que creamos anteriormente. Finalmente, simplemente conectamos nuestras opciones de widgets para la cantidad de publicaciones y la clasificación.
Para obtener nuestras estrellas, tomamos el valor de campo personalizado que agregamos a la revisión:
1 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
Y luego pasamos ese valor a una función que aún no hemos creado:
1 |
<?php oswc_show_rating($rating); // show the stars ?> |
Después del ciclo, incluimos un enlace Más. Coloque la URL en su página de tipo de publicación personalizada específica para el enlace href (la creación de esta página está fuera del alcance de este tutorial).
1 |
<li class="last gentesque tooltip" title="View all movie reviews"><a href="movie-reviews/">More</a></li> |
Ahora solo tenemos que hacer lo mismo para las Music Reviews y las Game Reviews. Aquí está el bloque completo de código para ambos tipos de revisión:
1 |
<?php if($showmusic) { ?> |
2 |
|
3 |
<div id="tabs-music" class="tabdiv"> |
4 |
<ul>
|
5 |
<?php // setup the query |
6 |
$args='&suppress_filters=true&posts_per_page='.$nummusic.'&post_type=oswc_music_reviews&order=DESC&orderby='.$feedsort.$metakey; |
7 |
$cust_loop = new WP_Query($args); |
8 |
if ($cust_loop->have_posts()) : while ($cust_loop->have_posts()) : $cust_loop->the_post(); $postcount++; |
9 |
// if we're sorting by rating and this item does not have a rating, hide it
|
10 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
11 |
if(($rating && $feedsort=="meta_value") || ($feedsort!="meta_value")) { |
12 |
?>
|
13 |
<li>
|
14 |
|
15 |
<?php oswc_show_rating($rating); // show the stars ?> |
16 |
|
17 |
<a class="post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
18 |
|
19 |
</li>
|
20 |
|
21 |
<?php } ?> |
22 |
|
23 |
<?php endwhile; |
24 |
endif; |
25 |
wp_reset_query(); ?> |
26 |
|
27 |
<li class="last gentesque tooltip" title="View all music reviews"><a href="music-reviews/">More</a></li> |
28 |
|
29 |
</ul>
|
30 |
</div>
|
31 |
|
32 |
<?php } ?> |
33 |
|
34 |
<?php if($showgames) { ?> |
35 |
|
36 |
<div id="tabs-games" class="tabdiv"> |
37 |
<ul>
|
38 |
<?php // setup the query |
39 |
$args='&suppress_filters=true&posts_per_page='.$numgames.'&post_type=oswc_game_reviews&order=DESC&orderby='.$feedsort.$metakey; |
40 |
$cust_loop = new WP_Query($args); |
41 |
if ($cust_loop->have_posts()) : while ($cust_loop->have_posts()) : $cust_loop->the_post(); $postcount++; |
42 |
// if we're sorting by rating and this item does not have a rating, hide it
|
43 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
44 |
if(($rating && $feedsort=="meta_value") || ($feedsort!="meta_value")) { |
45 |
?>
|
46 |
<li>
|
47 |
|
48 |
<?php oswc_show_rating($rating); // show the stars ?> |
49 |
|
50 |
<a class="post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
51 |
|
52 |
</li>
|
53 |
|
54 |
<?php } ?> |
55 |
|
56 |
<?php endwhile; |
57 |
endif; |
58 |
wp_reset_query(); ?> |
59 |
|
60 |
<li class="last gentesque tooltip" title="View all video game reviews"><a href="game-reviews/">More</a></li> |
61 |
|
62 |
</ul>
|
63 |
</div>
|
64 |
|
65 |
<?php } ?> |
¡No olvide cerrar las etiquetas div que usamos al comienzo de nuestro widget HTML y cerrar la función PHP!
1 |
</div>
|
2 |
|
3 |
</div>
|
4 |
|
5 |
<?php
|
6 |
}
|
Nuestra tercera función dentro de la clase WP_Widget es la función de actualización. Todo lo que hace esta función es recibir las opciones antiguas y nuevas del widget cuando se hace clic en el botón Guardar y actualiza la matriz de configuraciones del widget en consecuencia:
1 |
function update( $new_instance, $old_instance ) { |
2 |
$instance = $old_instance; |
3 |
|
4 |
$sort = $instance['sort']; |
5 |
$showmovies = $instance['showmovies']; |
6 |
$showmusic = $instance['showmusic']; |
7 |
$showgames = $instance['showgames']; |
8 |
$nummovies = $instance['nummovies']; |
9 |
$nummusic = $instance['nummusic']; |
10 |
$numgames = $instance['numgames']; |
11 |
|
12 |
/* Strip tags (if needed) and update the widget settings. */
|
13 |
$instance['sort'] = strip_tags( $new_instance['sort'] ); |
14 |
$instance['showmovies'] = isset( $new_instance['showmovies'] ); |
15 |
$instance['showmusic'] = isset( $new_instance['showmusic'] ); |
16 |
$instance['showgames'] = isset( $new_instance['showgames'] ); |
17 |
$instance['nummovies'] = strip_tags( $new_instance['nummovies'] ); |
18 |
$instance['nummusic'] = strip_tags( $new_instance['nummusic'] ); |
19 |
$instance['numgames'] = strip_tags( $new_instance['numgames'] ); |
20 |
|
21 |
return $instance; |
22 |
}
|
Nuestra cuarta y última función para crear nuestro widget establece cómo aparecerá nuestro widget en la página de administración. Notará que se crea un campo de formulario para cada opción con la que debemos lidiar. Este código permitirá que el widget ofrezca las siguientes 7 opciones:
- Cómo ordenar las publicaciones
- Si se muestra o no la pestaña Movie Reviews
- ¿Cuántas reseñas de películas mostrar?
- Si se muestra o no la pestaña Comentarios de música
- Cuántas reseñas de música mostrar
- Mostrar o no la pestaña Game Reviews
- Cuántas reseñas de juegos mostrar
Aquí está el código que configura nuestras opciones de administración de widgets:
1 |
function form( $instance ) { |
2 |
|
3 |
/* Set up some default widget settings. */
|
4 |
$defaults = array( 'sort' => 'latest', 'showmovies' => true, 'showmusic' => true, 'showgames' => true, 'nummovies' => 10, 'nummusic' => 10, 'numgames' => 10 ); |
5 |
$instance = wp_parse_args( (array) $instance, $defaults ); ?> |
6 |
|
7 |
<p>
|
8 |
<input class="radio" type="radio" <?php if($instance['sort']=='highest-rated') { ?>checked <?php } ?>name="<?php echo $this->get_field_name( 'sort' ); ?>" value="highest-rated" /> |
9 |
Order reviews by highest rated<br /> |
10 |
<input class="radio" type="radio" <?php if($instance['sort']!='highest-rated') { ?>checked <?php } ?>name="<?php echo $this->get_field_name( 'sort' ); ?>" value="latest" /> |
11 |
Order reviews by latest |
12 |
</p>
|
13 |
|
14 |
<p>
|
15 |
<input class="checkbox" type="checkbox" <?php checked(isset( $instance['showmovies']) ? $instance['showmovies'] : 0 ); ?> id="<?php echo $this->get_field_id( 'showmovies' ); ?>" name="<?php echo $this->get_field_name( 'showmovies' ); ?>" /> |
16 |
Display |
17 |
<input id="<?php echo $this->get_field_id( 'nummovies' ); ?>" name="<?php echo $this->get_field_name( 'nummovies' ); ?>" value="<?php echo $instance['nummovies']; ?>" style="width:30px" /> |
18 |
movie reviews |
19 |
|
20 |
</p>
|
21 |
|
22 |
<p>
|
23 |
<input class="checkbox" type="checkbox" <?php checked(isset( $instance['showmusic']) ? $instance['showmusic'] : 0 ); ?> id="<?php echo $this->get_field_id( 'showmusic' ); ?>" name="<?php echo $this->get_field_name( 'showmusic' ); ?>" /> |
24 |
Display |
25 |
<input id="<?php echo $this->get_field_id( 'nummusic' ); ?>" name="<?php echo $this->get_field_name( 'nummusic' ); ?>" value="<?php echo $instance['nummusic']; ?>" style="width:30px" /> |
26 |
music reviews |
27 |
|
28 |
</p>
|
29 |
|
30 |
<p>
|
31 |
<input class="checkbox" type="checkbox" <?php checked(isset( $instance['showgames']) ? $instance['showgames'] : 0 ); ?> id="<?php echo $this->get_field_id( 'showgames' ); ?>" name="<?php echo $this->get_field_name( 'showgames' ); ?>" /> |
32 |
Display |
33 |
<input id="<?php echo $this->get_field_id( 'numgames' ); ?>" name="<?php echo $this->get_field_name( 'numgames' ); ?>" value="<?php echo $instance['numgames']; ?>" style="width:30px" /> |
34 |
game reviews |
35 |
|
36 |
</p>
|
37 |
|
38 |
<?php
|
39 |
}
|
40 |
}
|
Observe que cerramos toda nuestra clase al final de esa función. Ahora que hemos creado las agallas de nuestro widget, ¡no olvidemos registrarlo con WordPress!
1 |
//LOAD THE WIDGET
|
2 |
add_action("widgets_init", "oswc_load_widgets"); |
3 |
function oswc_load_widgets() |
4 |
{
|
5 |
register_widget('oswc_tabbed_latest_reviews'); |
6 |
}
|
Aquí está el bloque de código completo que se utiliza para crear el widget para su conveniencia:
1 |
//BUILD THE WIDGET
|
2 |
class oswc_tabbed_latest_reviews extends WP_Widget { |
3 |
function oswc_tabbed_latest_reviews() { |
4 |
// widget settings
|
5 |
$widget_ops = array( 'classname' => 'Latest Review Tabs', 'description' => 'Displays reviews by most recent or highest rated in a jQuery tabbed format.' ); |
6 |
// widget control settings
|
7 |
$control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'oswc_tabbed_latest_reviews' ); |
8 |
// create the widget
|
9 |
$this->WP_Widget( 'oswc_tabbed_latest_reviews', 'Latest Review Tabs', $widget_ops, $control_ops ); |
10 |
}
|
11 |
function widget( $args, $instance ) { |
12 |
|
13 |
extract( $args ); |
14 |
|
15 |
/* User-selected settings. */
|
16 |
$sort = $instance['sort']; |
17 |
$showmovies = $instance['showmovies']; |
18 |
$showmusic = $instance['showmusic']; |
19 |
$showgames = $instance['showgames']; |
20 |
$nummovies = $instance['nummovies']; |
21 |
$nummusic = $instance['nummusic']; |
22 |
$numgames = $instance['numgames']; |
23 |
|
24 |
if($sort=="highest-rated") { |
25 |
$feedsort="meta_value"; |
26 |
$metakey="&meta_key=Rating"; |
27 |
} else { |
28 |
$feedsort="date"; |
29 |
$metakey=""; |
30 |
}
|
31 |
|
32 |
/* HTML output */
|
33 |
?>
|
34 |
|
35 |
<div id="tabbed-reviews"> |
36 |
<ul class="tabnav"> |
37 |
<?php if($showmovies) { ?><li><a href="#tabs-movies">Movies</a></li><?php } ?> |
38 |
<?php if($showmusic) { ?><li><a href="#tabs-music">Music</a></li><?php } ?> |
39 |
<?php if($showgames) { ?><li><a href="#tabs-games">Games</a></li><?php } ?> |
40 |
</ul>
|
41 |
|
42 |
<div class="tabdiv-wrapper"> |
43 |
|
44 |
<?php if($showmovies) { ?> |
45 |
|
46 |
<div id="tabs-movies" class="tabdiv"> |
47 |
<ul>
|
48 |
<?php // setup the query |
49 |
$args='&suppress_filters=true&posts_per_page='.$nummovies.'&post_type=oswc_movie_reviews&order=DESC&orderby='.$feedsort.$metakey; |
50 |
$cust_loop = new WP_Query($args); |
51 |
if ($cust_loop->have_posts()) : while ($cust_loop->have_posts()) : $cust_loop->the_post(); $postcount++; |
52 |
// if we're sorting by rating and this item does not have a rating, hide it
|
53 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
54 |
if(($rating && $feedsort=="meta_value") || ($feedsort!="meta_value")) { |
55 |
?>
|
56 |
<li>
|
57 |
|
58 |
<?php oswc_show_rating($rating); // show the stars ?> |
59 |
|
60 |
<a class="post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
61 |
|
62 |
</li>
|
63 |
|
64 |
<?php } ?> |
65 |
|
66 |
<?php endwhile; |
67 |
endif; |
68 |
wp_reset_query(); ?> |
69 |
|
70 |
<li class="last gentesque tooltip" title="View all movie reviews"><a href="movie-reviews/">More</a></li> |
71 |
|
72 |
</ul>
|
73 |
</div>
|
74 |
|
75 |
<?php } ?> |
76 |
|
77 |
<?php if($showmusic) { ?> |
78 |
|
79 |
<div id="tabs-music" class="tabdiv"> |
80 |
<ul>
|
81 |
<?php // setup the query |
82 |
$args='&suppress_filters=true&posts_per_page='.$nummusic.'&post_type=oswc_music_reviews&order=DESC&orderby='.$feedsort.$metakey; |
83 |
$cust_loop = new WP_Query($args); |
84 |
if ($cust_loop->have_posts()) : while ($cust_loop->have_posts()) : $cust_loop->the_post(); $postcount++; |
85 |
// if we're sorting by rating and this item does not have a rating, hide it
|
86 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
87 |
if(($rating && $feedsort=="meta_value") || ($feedsort!="meta_value")) { |
88 |
?>
|
89 |
<li>
|
90 |
|
91 |
<?php oswc_show_rating($rating); // show the stars ?> |
92 |
|
93 |
<a class="post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
94 |
|
95 |
</li>
|
96 |
|
97 |
<?php } ?> |
98 |
|
99 |
<?php endwhile; |
100 |
endif; |
101 |
wp_reset_query(); ?> |
102 |
|
103 |
<li class="last gentesque tooltip" title="View all music reviews"><a href="music-reviews/">More</a></li> |
104 |
|
105 |
</ul>
|
106 |
</div>
|
107 |
|
108 |
<?php } ?> |
109 |
|
110 |
<?php if($showgames) { ?> |
111 |
|
112 |
<div id="tabs-games" class="tabdiv"> |
113 |
<ul>
|
114 |
<?php // setup the query |
115 |
$args='&suppress_filters=true&posts_per_page='.$numgames.'&post_type=oswc_game_reviews&order=DESC&orderby='.$feedsort.$metakey; |
116 |
$cust_loop = new WP_Query($args); |
117 |
if ($cust_loop->have_posts()) : while ($cust_loop->have_posts()) : $cust_loop->the_post(); $postcount++; |
118 |
// if we're sorting by rating and this item does not have a rating, hide it
|
119 |
$rating = get_post_meta(get_the_ID(), "Rating", $single = true); |
120 |
if(($rating && $feedsort=="meta_value") || ($feedsort!="meta_value")) { |
121 |
?>
|
122 |
<li>
|
123 |
|
124 |
<?php oswc_show_rating($rating); // show the stars ?> |
125 |
|
126 |
<a class="post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
127 |
|
128 |
</li>
|
129 |
|
130 |
<?php } ?> |
131 |
|
132 |
<?php endwhile; |
133 |
endif; |
134 |
wp_reset_query(); ?> |
135 |
|
136 |
<li class="last gentesque tooltip" title="View all video game reviews"><a href="game-reviews/">More</a></li> |
137 |
|
138 |
</ul>
|
139 |
</div>
|
140 |
|
141 |
<?php } ?> |
142 |
|
143 |
</div>
|
144 |
|
145 |
</div>
|
146 |
|
147 |
<?php
|
148 |
}
|
149 |
function update( $new_instance, $old_instance ) { |
150 |
$instance = $old_instance; |
151 |
|
152 |
$sort = $instance['sort']; |
153 |
$showmovies = $instance['showmovies']; |
154 |
$showmusic = $instance['showmusic']; |
155 |
$showgames = $instance['showgames']; |
156 |
$nummovies = $instance['nummovies']; |
157 |
$nummusic = $instance['nummusic']; |
158 |
$numgames = $instance['numgames']; |
159 |
|
160 |
/* Strip tags (if needed) and update the widget settings. */
|
161 |
$instance['sort'] = strip_tags( $new_instance['sort'] ); |
162 |
$instance['showmovies'] = isset( $new_instance['showmovies'] ); |
163 |
$instance['showmusic'] = isset( $new_instance['showmusic'] ); |
164 |
$instance['showgames'] = isset( $new_instance['showgames'] ); |
165 |
$instance['nummovies'] = strip_tags( $new_instance['nummovies'] ); |
166 |
$instance['nummusic'] = strip_tags( $new_instance['nummusic'] ); |
167 |
$instance['numgames'] = strip_tags( $new_instance['numgames'] ); |
168 |
|
169 |
return $instance; |
170 |
}
|
171 |
function form( $instance ) { |
172 |
|
173 |
/* Set up some default widget settings. */
|
174 |
$defaults = array( 'sort' => 'latest', 'showmovies' => true, 'showmusic' => true, 'showgames' => true, 'nummovies' => 10, 'nummusic' => 10, 'numgames' => 10 ); |
175 |
$instance = wp_parse_args( (array) $instance, $defaults ); ?> |
176 |
|
177 |
<p>
|
178 |
<input class="radio" type="radio" <?php if($instance['sort']=='highest-rated') { ?>checked <?php } ?>name="<?php echo $this->get_field_name( 'sort' ); ?>" value="highest-rated" /> |
179 |
Order reviews by highest rated<br /> |
180 |
<input class="radio" type="radio" <?php if($instance['sort']!='highest-rated') { ?>checked <?php } ?>name="<?php echo $this->get_field_name( 'sort' ); ?>" value="latest" /> |
181 |
Order reviews by latest |
182 |
</p>
|
183 |
|
184 |
<p>
|
185 |
<input class="checkbox" type="checkbox" <?php checked(isset( $instance['showmovies']) ? $instance['showmovies'] : 0 ); ?> id="<?php echo $this->get_field_id( 'showmovies' ); ?>" name="<?php echo $this->get_field_name( 'showmovies' ); ?>" /> |
186 |
Display |
187 |
<input id="<?php echo $this->get_field_id( 'nummovies' ); ?>" name="<?php echo $this->get_field_name( 'nummovies' ); ?>" value="<?php echo $instance['nummovies']; ?>" style="width:30px" /> |
188 |
movie reviews |
189 |
|
190 |
</p>
|
191 |
|
192 |
<p>
|
193 |
<input class="checkbox" type="checkbox" <?php checked(isset( $instance['showmusic']) ? $instance['showmusic'] : 0 ); ?> id="<?php echo $this->get_field_id( 'showmusic' ); ?>" name="<?php echo $this->get_field_name( 'showmusic' ); ?>" /> |
194 |
Display |
195 |
<input id="<?php echo $this->get_field_id( 'nummusic' ); ?>" name="<?php echo $this->get_field_name( 'nummusic' ); ?>" value="<?php echo $instance['nummusic']; ?>" style="width:30px" /> |
196 |
music reviews |
197 |
|
198 |
</p>
|
199 |
|
200 |
<p>
|
201 |
<input class="checkbox" type="checkbox" <?php checked(isset( $instance['showgames']) ? $instance['showgames'] : 0 ); ?> id="<?php echo $this->get_field_id( 'showgames' ); ?>" name="<?php echo $this->get_field_name( 'showgames' ); ?>" /> |
202 |
Display |
203 |
<input id="<?php echo $this->get_field_id( 'numgames' ); ?>" name="<?php echo $this->get_field_name( 'numgames' ); ?>" value="<?php echo $instance['numgames']; ?>" style="width:30px" /> |
204 |
game reviews |
205 |
|
206 |
</p>
|
207 |
|
208 |
<?php
|
209 |
}
|
210 |
}
|
211 |
//LOAD THE WIDGET
|
212 |
add_action("widgets_init", "oswc_load_widgets"); |
213 |
function oswc_load_widgets() |
214 |
{
|
215 |
register_widget('oswc_tabbed_latest_reviews'); |
216 |
}
|
La función de calificación de estrellas
Eso es todo por nuestro widget. Una última cosa que hacer en nuestro archivo functions.php: crea la función a la que llamamos anteriormente que genera el HTML para la clasificación de estrellas. Aquí está la función que debe agregar debajo del código del widget que agregó arriba:
1 |
//html display of stars
|
2 |
function oswc_show_rating($rating) { |
3 |
$output = '<div class="stars">'; |
4 |
$output .= '<div class="star'; |
5 |
if($rating>=1) { |
6 |
$output .= ' full'; |
7 |
} elseif($rating>0) { |
8 |
$output .= ' half'; |
9 |
}
|
10 |
$output .= '"> </div>'; |
11 |
$output .= '<div class="star'; |
12 |
if($rating>=2) { |
13 |
$output .= ' full'; |
14 |
} elseif($rating>1) { |
15 |
$output .= ' half'; |
16 |
}
|
17 |
$output .= '"> </div>'; |
18 |
$output .= '<div class="star'; |
19 |
if($rating>=3) { |
20 |
$output .= ' full'; |
21 |
} elseif($rating>2) { |
22 |
$output .= ' half'; |
23 |
}
|
24 |
$output .= '"> </div>'; |
25 |
$output .= '<div class="star'; |
26 |
if($rating>=4) { |
27 |
$output .= ' full'; |
28 |
} elseif($rating>3) { |
29 |
$output .= ' half'; |
30 |
}
|
31 |
$output .= '"> </div>'; |
32 |
$output .= '<div class="star'; |
33 |
if($rating>=5) { |
34 |
$output .= ' full'; |
35 |
} elseif($rating>4) { |
36 |
$output .= ' half'; |
37 |
}
|
38 |
$output .= '"> </div>'; |
39 |
$output .= '</div>'; |
40 |
echo $output; |
41 |
}
|
"Las imágenes estrella que utiliza este widget están contenidas en el archivo de descarga de este tutorial".
Esta función acepta el valor de la calificación (un número entre pero que incluye 0 y 5) y usa las declaraciones if ... else para verificar y ver cuántas estrellas se ponen amarillas y cuántas estrellas se ponen grises. Muestra un div con clase "estrella" cinco veces seguidas, y cada vez verifica la clasificación y la compara con la estrella que muestra, y agrega una clase de "completa" si la clasificación es mayor o igual que estrella actual, o una clase de "mitad" si la calificación es mayor que la estrella anterior.
¿Confundido por la lógica de la media estrella? Simplemente significa que si la estrella es mayor que la estrella anterior, pero no mayor o igual que esta estrella, esta debe ser la media estrella.
Nota: las estrellas están todas dentro de un div con "stars" de clase, que es a lo que apuntaremos para aplicar nuestros estilos más adelante.
Paso 4: Configurar el widget
Ahora que hemos hecho todo el trabajo de codificación de nuestro widget, WordPress lo reconocerá en la página de widgets, y podemos configurarlo para que aparezca en nuestra barra lateral. Vaya a Appearance >> Widgets y arrastre nuestro nuevo widget, llamado Latest Review Tabs, más recientes, a una de las barras laterales. Utilizaremos el Área del widget primario en el tema TwentyTen. Expanda la configuración del widget para ver las opciones disponibles que configuramos en el paso anterior:
Seleccione cómo desea ordenar el widget (ya sea por la calificación más alta o más reciente), seleccione para mostrar cada uno de los tres tipos de revisión e indique cuántos de cada tipo de revisión desea mostrar. Guarde sus opciones y ahora tendrá un widget (algo) que funciona en su sitio. Por supuesto, todavía no hemos aplicado ningún estilo, por lo que no se verá demasiado bonito hasta que completemos los próximos dos pasos: aplicar jQuery y CSS.
Paso 5: Splash In Some jQuery
Este widget usa la jQuery UI para las transiciones de tabulación. Entonces, tenemos que hacer tres cosas simples para conectar la interfaz de usuario de jQuery con nuestro widget: 1) cargar la biblioteca jQuery, 2) cargar el complemento jQuery UI y 3) llamar a la función de pestañas jQuery UI en nuestro widget.
Cargue la biblioteca jQuery
WordPress viene con jQuery ya incluido. Algunas personas prefieren cargarlo desde un CDN o incluso cargar la biblioteca y usarla dentro de su tema. Para obtener información sobre cómo cargar jQuery en WordPress, visite el Codex. Para incluirlo en el tema TwentyTen, todo lo que tenemos que hacer es una sola línea de código en el archivo header.php. Abra el archivo header.php y agregue la siguiente llamada a jQuery antes de la función wp_head() (de modo que estaría en algún lugar antes de la línea 51 en el tema TwentyTen):
1 |
<?php wp_enqueue_script("jquery"); ?> |
Cargue el complemento jQuery UI
Esta es la misma técnica que cargar la biblioteca jQuery, excepto que queremos llamar a esta después de la función wp_head() (de modo que estaría en algún lugar después de la línea 51 en el tema TwentyTen):
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script> |
Llame a la función de pestañas jQuery UI en nuestro widget
Agregue el siguiente código directamente después del código de la interfaz de usuario jQuery que acabamos de agregar:
1 |
<script type="text/javascript"> |
2 |
jQuery.noConflict(); |
3 |
jQuery(document).ready(function() { |
4 |
jQuery('#tabbed-reviews > ul').tabs({ fx: { opacity: 'toggle', duration: 200 } }); |
5 |
});
|
6 |
</script> |
Simplemente estamos llamando a la función de pestañas (que la jQuery UI nos proporciona) en la lista desordenada dentro de la etiqueta div #tabbed-reviews, y estamos aplicando un cambio de opacidad en las transiciones entre las pestañas. Puede disminuir la duración para un cambio más rápido, o aumentarlo para un cambio más lento (piense en este número como un retraso en lugar de una velocidad).
Paso 6: Diseña el widget usando CSS
Si ve su widget en este momento, probablemente no estará muy contento ya que no lo hemos diseñado en absoluto. El último paso es aplicar algunas reglas de CSS que harán que nuestro widget realmente parezca un widget y funcione correctamente también. Abra su archivo style.css y agregue el siguiente estilo al final del archivo:
1 |
/*************************************************
|
2 |
jquery tabs
|
3 |
*************************************************/
|
4 |
#tabbed-reviews a { |
5 |
font-family:Arial, Helvetica, sans-serif; |
6 |
}
|
7 |
#tabbed-reviews a:hover { |
8 |
text-decoration:none; |
9 |
}
|
10 |
ul.tabnav { |
11 |
margin:0px !important; |
12 |
padding:0px !important; |
13 |
}
|
14 |
ul.tabnav li { |
15 |
display: inline; |
16 |
list-style: none; |
17 |
}
|
18 |
ul.tabnav li a { |
19 |
text-decoration: none; |
20 |
text-transform: uppercase; |
21 |
color: #444; |
22 |
font-weight: bold; |
23 |
display:inline-block; |
24 |
padding: 5px 9px 6px 9px; |
25 |
outline: none; |
26 |
font-size:.8em; |
27 |
}
|
28 |
ul.tabnav li a:hover, ul.tabnav li a:active, ul.tabnav li.ui-tabs-selected a { |
29 |
color:#FFF; |
30 |
background:url(images/sidebar-header-bg.png) repeat-x 0px 0px; |
31 |
}
|
32 |
.tabdiv-wrapper { |
33 |
border:1px solid #CCC; |
34 |
margin-bottom:20px; |
35 |
}
|
36 |
.tabdiv { |
37 |
background: #E8E8E8; |
38 |
border:1px solid #FFF; |
39 |
border-top:0px; |
40 |
font-size:1em; |
41 |
}
|
42 |
.tabdiv ul { |
43 |
margin:0px !important; |
44 |
}
|
45 |
.tabdiv li { |
46 |
list-style-type:none; |
47 |
list-style-image: none !important; |
48 |
}
|
49 |
.tabdiv li a { |
50 |
display:block; |
51 |
padding:10px 10px; |
52 |
border-bottom:1px solid #ccc; |
53 |
border-top:1px solid #fff; |
54 |
color:#444; |
55 |
}
|
56 |
.tabdiv li a:hover { |
57 |
background:#F0F0F0; |
58 |
color:#222; |
59 |
}
|
60 |
.tabdiv li.last a { |
61 |
text-align:center; |
62 |
font-weight:bold; |
63 |
text-transform:uppercase; |
64 |
color:#666; |
65 |
font-size:1em; |
66 |
padding:2px 0px 2px 0px; |
67 |
border-bottom:0px; |
68 |
}
|
69 |
.ui-tabs-hide { |
70 |
display: none; |
71 |
}
|
72 |
|
73 |
/*stars*/
|
74 |
.tabdiv .stars { |
75 |
float:right; |
76 |
margin-top:3px; |
77 |
}
|
78 |
.tabdiv .stars { |
79 |
margin:10px 5px 0px 0px !important; |
80 |
}
|
81 |
.tabdiv .star { |
82 |
width:14px; |
83 |
height:14px; |
84 |
float:left; |
85 |
margin-left:2px; |
86 |
background:url(images/star-empty-small.png) no-repeat 0px 0px; |
87 |
}
|
88 |
.tabdiv .star.half { |
89 |
background:url(images/star-half-small.png) no-repeat 0px 0px; |
90 |
}
|
91 |
.tabdiv .star.full { |
92 |
background:url(images/star-full-small.png) no-repeat 0px 0px; |
93 |
}
|
La primera parte del estilo se aplica a las pestañas y las áreas de contenido dentro de cada pestaña. Como puede ver, se asignan relleno, bordes y colores de fondo a los diferentes elementos que componen el contenedor de pestañas. La segunda parte del estilo se aplica a los contenedores de estrellas. Se utiliza una imagen de fondo para los tres estados de estrellas diferentes de vacío, medio y completo, y las estrellas flotan una al lado de la otra para que aparezcan en una línea horizontal.
Conclusión
Desarrollar en WordPress tiene que ver con el aprovechamiento de diferentes tecnologías para presentar una experiencia de usuario rica para los visitantes de su sitio. En este tutorial utilizamos las funciones principales estándar de WordPress, incluidos los tipos de publicaciones personalizadas y la API de widgets personalizados, y ampliamos al agregar la útil biblioteca jQuery, seguido del complemento jQuery UI y, finalmente, utilizamos el poder de CSS para hacer que todo se vea elegante y profesional.
El mayor beneficio de las ideas como este widget es que puede presentar más contenido a sus usuarios sin abrumarlos, con el objetivo final de lograr que permanezcan dentro de su sitio el mayor tiempo posible.
¡Con suerte, este widget en particular puede ayudarlo a reducir esa tasa de rebote y crear una experiencia más agradable para sus usuarios! Si aún no lo has hecho, asegúrate de echarle un vistazo a la demostración antes de intentarlo tú mismo.
By
