Si usted ha pasado algún tiempo visitando blogs ultimamente probable que hayas visto esas fotos poco pequeña acompañada de un título o un fragmento de texto en o cerca del tope. No estoy seguro si tiene un nombre propio, pero la mayoría de la gente que he hablado lo llaman un carrusel, en este tutorial te voy a mostrar cómo añadir una a tu blog. Para los pocos de ustedes que no sé lo que estoy hablando, he aquí una captura de pantalla de gawker.com que es el primer lugar que vi que se utilice.
Conforme pasa el tiempo el movimiento a través de historias de la bandera, con el tiempo el abandono de vista, de forma similar a los caballos hacer en un carrusel. Voy a mostrar cómo hacer esto con la tesis, al igual que muchos de estos tutoriales se puede adaptar la programación a trabajar con cualquier blog, es sólo más fácil con la tesis. 
Primero vamos a necesitar una manera de aislar a los puestos que queremos que aparezca en la parte superior. Es probable que usted va a querer elegir lo mejor de sus nuevas publicaciones (no todos los puestos nuevos son los mejores). Me gusta mantener mi blog o de bajo mantenimiento maintaing auto, así que decidió utilizar la categoría de destacado que es el mismo que uso para llenar el control deslizante visual que en la página principal. Sin embargo, usted podría fácilmente utilizar etiquetas en lugar de una categoría aislada.
Para hacer la juerga suceder que vamos a crear una función personalizada en custom_functions.php llamado top_carousel() y dentro de ella vamos a añadir global $post (que permite wordpress para obtener elementos fuera de la entrada actual) y un "if" para hacer la juerga sólo aparecen en las páginas de entradas individuales (me sentí miró a la página principal de "ocupado" con un control deslizante y un carrusel, pero esa es su elección). Esto es lo que el código inicial es así:
function top_carousel(){
global $post;
if (is_single ()){
}
}
A continuación vamos a agregar un "contenedor" de carrusel "Esto nos permitirá añadir algunos estilo visual, una vez que haya terminado:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
echo '</div>';
}
}
A continuación vamos a necesitar para construir una base de datos de la declaración de selección que selecciona sólo los puestos que queremos. En mi caso, yo quería que el los últimos 6 puestos publicados, de los "recomendados" categoría, en orden cronológico inverso. Para ello vamos a utilizar la consulta de los siguientes
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
Explicar las complejidades de la WP_Query está fuera del alcance de este post sin embargo, puede leer más sobre él en wordpress o en muchos tutoriales de otros en la web. Sin embargo es de esperar que es fácil de realizar ingeniería inversa, seleccione sólo los puestos de los "recomendados categoría", por fecha, en orden descendente, y seleccionar un máximo de 6 puestos.
Lo siguiente que necesitamos para mostrar los puestos sobre la base de esa consulta, así es cómo lo hacemos:
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.wolf-howl.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
Ese trozo de código se ejecuta la consulta SQL anterior, la pantalla es la imagen de tesis para el puesto, cambiar su tamaño hasta un cuadrado de 140 × 140, lo vincula a la permanente para el puesto, luego de mostrar el título como un enlace para el enlace permanente, así, y envuelve todo el asunto en Div A "".
Sólo hay una última parte, puesto que vamos a utilizar el CSS para flotar el carrusel individuales de DIV, tendremos que asegurarnos de borrar el flotador cuando se hace así:
echo '<div style="clear:both"></div>';
Ok ahora a ponerlo todo junto, debe verse algo como esto:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.wolf-howl.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
echo '<div style="clear:both"></div>';
echo '</div>';
}
}
Sólo 2 pasos a la izquierda, tenemos que añadir este código a custom_functions.php decir cuando la tesis de activar y mostrar el carrusel, lo hacemos de esta manera:
add_action('thesis_hook_before_header', 'top_carousel');
Entonces, tenemos que añadir un poco de estilo a nuestro archivo custom.css, en mi caso he utilizado este:
#topcarosel {border:1px solid #efefef; padding: 0px;padding-left:10px;}
.caroselu {width:150px;float:left;padding:3px;text-align:center;}
.caroselu IMG {border:2px solid #ccc;display:block;}
Que envuelve un borde gris luz alrededor de todo el carrusel de arriba y pone un poco de relleno en su lugar, establece un ancho de 150px para cada una de las "unidades carrusel" con un poco de relleno y "flota" a ellos para que aparezcan al lado del otro, y luego pone un cuadro de color gris claro en torno a la imagen en el carrusel y asegurarse de que no arrastran único letras en la pantalla. Si hizo bien todo lo que debería ser similar a la captura de pantalla a continuación:
Lotes que el código es bastante desnudos huesos y no de oportunidad para mejorar o cambiar, aquí están algunas sugerencias:
- Hacer que los primeros uno o dos ranuras de relleno de una etiqueta diferente / categoría, si usted tiene algún tipo de "noticias" el contenido de su blog, que sería realmente útil.
- Mire la etiqueta / categoría del puesto actual y elegir puestos relacionados con los últimos uno o dos ranuras, este debería aumentar dramáticamente CTR.
- Cambiar la posición del carrusel, por ejemplo, Techcrunch actualmente se mezcla en el contenido del "bloque", el New York Times pone en el fondo del artículo.
- Carrusel de uso múltiple en la barra lateral o después de la entrada, para mostrar puestos relacionados.
Gracias a Sean Percival para escribir sobre la semana pasada carrusel y me inspira a salir de mi Kiester y averiguar cómo hacerlo, y gracias a Nick Reese que ayudaron con un problema de codificación, es posible que también quiera visitar algunos de sus tutorías de tesis .
Aunque este tutorial no es una obra maestra de la programación, podría ser un poco más allá de si usted tiene muy poca experiencia en programación. Sin embargo, si se ha estado preguntando es la tesis sólo para "novatos" Espero que estos últimos tutoriales tesis pocos han demostrado que la tesis de que realmente es un marco que hace que sea fácil para que usted pueda interactuar con su blog y hacer las cosas más rápido y fácil, no importa lo experimentado que es, ¿por qué no intentarlo?
Este anuncio vino originalmente de Michael Gray, que es una Consultora de optimización del Search Engine. Asegúrese de no perderse el examen de Wordpress Tema de tesis.
Cómo agregar un carrusel de su tesis de blog
Puestos relacionados con:
- Cómo agregar un control deslizante a la tesis de Visual El siguiente es un tutorial sobre cómo añadir un ...
- Tesis Tutorial - Cómo añadir AdSense Sección de Orientación de Uso de Adsense en tu blog por lo general no es el más rentable ...
- Hacer tesis trabajar mejor con Digg y Facebook Si usted está involucrado con sitios sociales como Digg, Facebbok ...
Puestos relacionados con la traída a usted por otra Relacionado Puestos Plugin.
Puestos relacionados con:
