Si usted ha pasado algún tiempo visitando blogs ultimamente probable es que hayas visto esas fotos poco pequeña acompañada de un título o un fragmento de texto en o cerca de la cabecera. 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 voy a mostrarte cómo agregar una a tu blog. Para los pocos de ustedes que no saben lo que estoy hablando, he aquí una captura de pantalla de gawker.com que es el lugar primero que vi que se utilice.
Conforme pasa el tiempo las historias se mueven a través del banner, con el tiempo el abandono de vista, similar a la forma caballos hacen en un carrusel. Yo voy a ser lo que muestra 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 simplemente más fácil con la tesis . 
En primer lugar vamos a necesitar una manera de aislar a los mensajes que queremos que aparezca en la parte superior. Es probable que usted va a desear para recoger lo mejor de sus últimas publicaciones (no todos los nuevos puestos son los mejores). Me gusta mantener mi blog o de bajo mantenimiento que maintaing yo, así que decidí utilizar la categoría aparece que es el mismo que utilizo para llenar el control deslizante visual que está en la página de inicio. Sin embargo, usted podría fácilmente utilizar las 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 llamada top_carousel() y dentro de ella vamos a añadir global $post (que permite a wordpress para obtener artículos fuera de la entrada actual) y un "if" para hacer la parranda sólo aparecen en las páginas de destino único (me sentí mirado 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 será similar a:
function top_carousel(){
global $post;
if (is_single ()){
}
}
Ahora vamos a añadir un "contenedor" de carrusel esto nos permitirá añadir algunas estilo visual, una vez que haya terminado:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
echo '</div>';
}
}
Ahora vamos a tener que construir una base de datos de instrucción de selección que selecciona sólo los mensajes que queremos. En mi caso, yo quería que el pasado 6 puestos publicados, de los "aparece" la categoría, por orden cronológico inverso. Para ello usaremos la siguiente consulta
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
Al explicar las complejidades de la WP_Query está fuera del alcance de este post sin embargo usted puede leer más sobre esto en wordpress o en muchos otros tutoriales en la web . Sin embargo esperamos que es fácil de realizar ingeniería inversa, seleccione sólo los puestos de la categoría de "destacado", el orden por fecha, por orden decreciente, y seleccionar un máximo de 6 puestos.
Lo siguiente que necesitamos para mostrar los mensajes basado en 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 anterior consulta SQL, la pantalla es la imagen de tesis para ese puesto, modificar su tamaño hasta un cuadrado 140 × 140, lo vincula con el enlace permanente para el puesto, a continuación, mostrar es el título como un enlace con el enlace permanente, así, y envuelve todo el asunto en un div ".
Sólo hay un poco pasado, ya que vamos a usar CSS para flotar carrusel de la unidad individual de DIV, tendremos que asegurarnos de que el flotador claro es cuando son realizados como este:
echo '<div style="clear:both"></div>';
Ok ahora lo tienen todo, 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 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;
echo '<div style="clear:both"></div>';
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 para decirle a custom_functions.php tesis cuándo activar y mostrar el carrusel, lo hacemos de esta manera:
add_action('thesis_hook_before_header', 'top_carousel');
Luego tenemos que añadir un poco de estilo a nuestro custom.css archivo, en mi caso he utilizado la siguiente:
#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;}
Esto envuelve un borde de color gris claro en todo el carrusel de todo lo de arriba y pone un poco de relleno en su lugar, a continuación, establece un ancho de 150px para cada una de las unidades de tipo "carrusel" con un poco de relleno y "flota" ellos para que aparezcan al lado del otro, y luego pone una caja de color gris claro alrededor de la imagen en el carrusel y asegurarse de que no solo las letras se deslizan en la pantalla. Si hizo todo bien debe verse como la captura de pantalla a continuación:
Este código es bastante exiguas y no hay muchas oportunidades para que usted pueda mejorar o cambiar, he aquí algunas sugerencias:
- Haga que el primero una o dos ranuras de relleno de una etiqueta diferente / categoría, si usted tiene cualquier tipo de "noticias" contenido en su blog, que sería realmente útil.
- Mira la etiqueta o categoría del puesto actual y elija puestos relacionados durante los últimos uno o dos ranuras, este deben incrementar radicalmente CTR.
- Cambie la posición del carrusel por ejemplo Techcrunch actualmente se mezcla en el "contenido" en bloque, el New York Times lo coloca en la parte inferior del artículo.
- carrusel de uso múltiple en la barra lateral o después de la entrada, para mostrar los mensajes relacionados.
Gracias a Sean Percival para escribir sobre la semana pasada de carrusel y de inspirarme a sacarte de mi Kiester y averiguar cómo hacerlo, y gracias a Nick Reese quien ayudó con un problema de codificación, es posible que también desee comprobar hacia fuera algunas de sus tutoriales tesis .
Si bien esta obra maestra no es un tutorial de programación, podría ser un poco más allá de ti si tienes experiencia en programación muy poco. Sin embargo, si se ha estado preguntando es Tesis sólo para "novatos" Espero que estos últimos tutoriales tesis ha demostrado la tesis es en realidad un marco que hace que sea fácil para usted para interactuar con tu blog y hacer las cosas más rápido y fácil, no importa lo experimentado que son, ¿por qué no darle una oportunidad ?
Este artículo originalmente vinieron de Michael Gray , que es un motor de búsqueda de optimización Consultor . Asegúrese de no perderse la Tesis WordPress Tema de revisión .
Cómo agregar un carrusel para su tesis de blog
Puestos relacionados con:
- Cómo agregar un control deslizante para Visual Tesis A continuación se presenta un tutorial sobre cómo agregar un ...
- Tesis Tutorial - Cómo agregar Adsense Sección Orientación de Adsense en su blog por lo general no es el más rentable ...
- Hacer Tesis trabajar mejor con Digg y Facebook Si usted está involucrado con los sitios de medios sociales como Digg, Facebbok ...
puestos relacionados con la traída para usted por todo otra Relacionado Puestos Plugin .
Puestos relacionados con:
