Se hai trascorso in qualsiasi momento visitando i blog recentemente è probabile che hai visto quelle foto piccola piccolo accompagnati da un titolo o un po 'di testo o in prossimità della testa d'albero. Non so se ha un nome proprio, ma la maggior parte persone con cui ho parlato a chiamare un carosello, in questo tutorial ho intenzione di mostrare come aggiungere uno al tuo blog. Per i pochi di voi che non sanno di cosa sto parlando, ecco una schermata da gawker.com, che è il primo luogo ho visto che si utilizza.
Col passare del tempo in movimento storie attraverso il banner, all'abbandono definitivo di vista, simile al modo in cui i cavalli su una giostra. Io vado a mostrarvi come effettuare questa operazione con la tesi, come per molte di queste esercitazioni è possibile adattare la programmazione di lavorare con qualsiasi blog, è solo più facile con la tesi. 
In primo luogo stiamo andando avere bisogno di un modo per isolare i posti che si desidera vengano visualizzati nella parte superiore. Le probabilità sono state andando a voler raccogliere il meglio dei tuoi post più recenti (non tutti i nuovi posti sono i migliori). Mi piace tenere il mio blog bassa manutenzione o mantenendo sé, così ho deciso di usare la categoria in evidenza che è la stessa che uso per riempire il dispositivo di scorrimento visivo che sulla home page. Tuttavia si potrebbe facilmente utilizzare i tag invece di una categoria isolato.
Per rendere la baldoria accadere che andremo a creare una funzione personalizzata in custom_functions.php chiamato top_carousel() e all'interno di esso abbiamo intenzione di aggiungere global $post (che permette di wordpress per ottenere elementi al di fuori del post corrente) e un "if" per rendere la baldoria visualizzati solo nelle pagine singolo post (ho sentito la homepage cercato di "occupato", con un cursore e un carosello, ma questa è la vostra scelta). Ecco il codice iniziale si presenta così:
function top_carousel(){
global $post;
if (is_single ()){
}
}
Avanti andiamo ad aggiungere un "wrapper" per carosello questo ci permetterà di aggiungere un po 'stile visivo, una volta finito:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
echo '</div>';
}
}
Avanti andiamo a necessità di costruire una dichiarazione database di selezione che seleziona solo i posti che vogliamo. Nel mio caso, ho voluto ultimi 6 posti pubblicati, dal "primo piano" di categoria, in ordine di data inverso. Per fare questo useremo la seguente query
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
Spiegare la complessità di wp_query va oltre gli scopi di questo post, tuttavia si può leggere di più su wordpress o un sacco di tutorial altri sul web. Tuttavia si spera è facile da decodificare, selezionare i messaggi solo dal "featured categoria", l'ordine in base alla data, in ordine decrescente, e selezionare un massimo di 6 posti.
Poi abbiamo bisogno di visualizzare i messaggi in base a tale interrogazione, ecco come lo facciamo:
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;
Quel po 'di codice esegue la query SQL precedente, display l'immagine tesi a tale posto, ridimensionarla fino a un quadrato 140 × 140, i collegamenti per il permalink per il posto, quindi visualizzare il titolo di un collegamento con il permalink, nonché, e avvolge il tutto in un div ".
C'è solo un ultimo pezzo, dal momento che ci accingiamo a usare i CSS per spostare l'unità individuale carosello DIV, avremo bisogno di essere sicuri di eliminare il float, quando ci sono fatti come questo:
echo '<div style="clear:both"></div>';
Ok ora di mettere tutto insieme, esso dovrebbe essere simile a questa:
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>';
}
}
A soli 2 passi a sinistra, abbiamo bisogno di aggiungere questo codice a custom_functions.php a dire quando la tesi per attivare e visualizzare la giostra, lo facciamo in questo modo:
add_action('thesis_hook_before_header', 'top_carousel');
Quindi abbiamo bisogno di aggiungere un po 'di stile al nostro file custom.css, nel mio caso ho usato questo:
#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;}
Che avvolge un bordo grigio chiaro in tutto il carosello di tutta l'alta e mette un po 'di imbottitura in luogo, quindi imposta una larghezza di 150px per ciascuna delle unità "carosello" con un po' di imbottitura e "galleggia" in modo appaiono fianco a fianco, e poi mette una finestra di luce grigia intorno all'immagine nel carosello e assicurarsi che non le singole lettere si insinuano nella visualizzazione. Se avete fatto tutto bene come dovrebbe apparire la schermata qui sotto:
Lotti che il codice è piuttosto Bare Bones e ci sono delle possibilità per voi per migliorare / cambiare, ecco alcuni suggerimenti:
- Sono i primi uno o due slot da riempire un nome diverso / categoria, se avete qualche sorta di "notizie" contenuto sul tuo blog, che sarebbe davvero utile.
- Guardate il tag / categoria del post corrente e scegliere i posti connessi per la durata di una o due slot, questo dovrebbe aumentare notevolmente il CTR.
- Cambia la posizione del carosello per esempio Techcrunch mescola attualmente in "contenuto" blocco, il New York Times lo mette in fondo a questo articolo.
- Carosello Utilizzare più nella barra laterale o dopo il post, per visualizzare i messaggi relativi.
Grazie a Sean Percival per scrivere la scorsa settimana carosello's e avermi ispirato a scendere il mio Kiester e capire come farlo, e grazie a Nick Reese che hanno contribuito con un problema di codifica, si potrebbe anche voler controllare alcuni dei suoi tutorial tesi .
Anche se questo non è un capolavoro di tutorial di programmazione, potrebbe essere un po 'al di là se si dispone di esperienza di programmazione molto poco. Tuttavia se siete stati chiedo è solo per Tesi di Laurea "neofiti" Spero che questi ultimi tutorial tesi pochi hanno dimostrato che la tesi è in realtà un quadro che rende facile per voi di interagire con il tuo blog e fare le cose più semplice e veloce, non importa Come siete esperti, quindi perché non provare?
Questo annuncio proviene da Michael Gray, che è un Search Engine Optimisation Consultant. Essere sicuri di non perdere la tesi Wordpress Theme riesame.
Come aggiungere un carosello per la tua tesi sul blog
Related posts:
- Come aggiungere un cursore Visual alla tesi che segue è un tutorial su come aggiungere un ...
- Tesi Tutorial - Come aggiungere AdSense Section Targeting per l'uso di AdSense sul tuo blog di solito non è il più redditizio ...
- Rendere tesi funzionano meglio con Digg e Facebook Se siete interessati, con i siti di social media come Digg, Facebbok ...
Related posti portato a voi da Yet Another Related Posts Plugin.
Related posts:
