Se hai trascorso in qualsiasi momento visitando i blog recentemente è probabile che hai visto quelle foto piccola piccola è accompagnata da un titolo o un po 'di testo in o vicino alla testa d'albero. Non so se ha un nome proprio, ma la maggior parte persone che ho parlato di 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 un colpo di schermo da gawker.com che è il primo posto ho visto che si utilizza.
Col passare del tempo le storie si muovono attraverso il banner, poi l'abbandono di vista, simile al modo in cui i cavalli su una giostra. Sto andando essere voi che mostra come a che fare con questa tesi , come con molti di questi tutorial è possibile adattare la programmazione per lavorare con qualsiasi blog, è solo più facile con tesi . 
In primo luogo stiamo andando a bisogno di un modo per isolare i messaggi che si desidera vengano visualizzati nella parte superiore. Le probabilità sono state andando a voler scegliere il migliore dei tuoi messaggi più recenti (non tutti i nuovi posti sono i migliori). Mi piace mantenere la mia scarsa manutenzione blog o mantenendo sé, così ho deciso di utilizzare la categoria In primo piano che è la stessa che uso per riempire il dispositivo di scorrimento visivo che è nella home page. Tuttavia si potrebbe facilmente utilizzare i tag invece di una categoria isolata.
Per fare il gozzovigliare accadere che andremo a creare una funzione personalizzata in custom_functions.php chiamato top_carousel() e all'interno di essa che andremo ad aggiungere global $post (wordpress che permette di ottenere gli elementi al di fuori del posto di corrente) e un "if" per rendere il gozzovigliare visualizzati solo nelle pagine singolo post (ho sentito la homepage cercato di "occupato" con un cursore e una giostra, ma questa è la vostra scelta). Ecco il codice iniziale appare 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 che abbiamo finito:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
echo '</div>';
}
}
Avanti andiamo a necessità di costruire un database di un'istruzione SELECT che seleziona solo i messaggi che vogliamo. Nel mio caso, ho voluto gli ultimi 6 posti pubblicati, la categoria "In primo piano, in ordine cronologico inverso. Per fare questo useremo la seguente query
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
Spiegando le difficoltà di wp_query va oltre gli scopi di questo post però è possibile saperne di più su wordpress e tanti altri tutorial sul web . Tuttavia si spera è facile decodificare, selezionare solo i post dalla "categoria In primo piano", ordinarle per data, in ordine decrescente, e selezionare un massimo di 6 posti.
Poi abbiamo bisogno di visualizzare i post 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 precedente SQL, display l'immagine tesi a tale posto, ridimensionarlo fino a un quadrato 140 × 140, lo collega con il permalink per il posto, quindi visualizzare il titolo come un link al permalink pure, e avvolge il tutto in un "div".
C'è solo un ultimo pezzo, dal momento che ci accingiamo a usare i CSS per l'unità galleggiante individuale carosello DIV, avremo bisogno di essere sicuri di cancellare il galleggiante, quando abbiamo finito così:
echo '<div style="clear:both"></div>';
Ok ora per mettere tutto insieme, dovrebbe avere il seguente aspetto:
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>';
}
}
Solo 2 passi a sinistra, abbiamo bisogno di aggiungere questo codice a custom_functions.php per raccontare tesi quando per attivare e visualizzare la giostra, lo facciamo in questo modo:
add_action('thesis_hook_before_header', 'top_carousel');
Poi abbiamo bisogno di aggiungere un po 'di stile alla nostra custom.css file, 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 intorno alla giostra intera parte superiore e mette un po 'di imbottitura in atto, quindi imposta una larghezza di 150 pixel per ciascuna delle "unità di giostra", con un po' di imbottitura e "galleggia" in modo appaiono una accanto all'altra, e poi mette una scatola di colore grigio chiaro intorno all'immagine nel carosello e accertarsi che non le singole lettere si insinuano nella visualizzazione. Se avete fatto tutto bene come dovrebbe apparire la schermata qui sotto:
Tale codice è piuttosto spoglio ossa e ci sono un sacco di opportunità per voi per migliorare / cambiare, ecco alcuni suggerimenti:
- Sono il primo o il due slot da riempire un tag differenti / categoria, se avete qualche sorta di "" contenuto delle notizie sul vostro blog, che sarebbe veramente utile.
- Guarda il tag / categoria del post corrente e scegli post correlati per gli ultimi uno o due slot, questo dovrebbe aumentare drammaticamente CTR.
- Cambiare la posizione del carosello per esempio Techcrunch mescola attualmente nel "blocco dei contenuti", il New York Times mette in fondo all'articolo.
- carosello Utilizzare più nella barra laterale o dopo il post, per visualizzare post correlati.
Grazie a Sean Percival per scrivere l'ultima settimana di giostra e di 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 tutorial di programmazione, potrebbe essere un po 'al di là di voi, se si dispone di esperienza di programmazione molto poco. Tuttavia se lo chiedo è solo per Tesi di Laurea "newbies" Spero che questi ultimi tesi tutorial vi ho mostrato tesi è davvero un quadro di riferimento che rende facile per voi di interagire con il tuo blog e fare le cose più semplice e veloce, non importa Come esperto sei tu, quindi perché non fare un tentativo ?
Questo post è originaria di Michael Gray , che è un Consulente Search Engine Optimization . Assicuratevi di non perdere la Tesi Wordpress Tema revisione .
Come aggiungere un carosello per la tua tesi sul blog
Related posts:
- Come aggiungere un cursore di Visual Tesi Il seguente è un tutorial su come aggiungere un ...
- Tesi Tutorial - Come aggiungere Adsense Targeting per sezione utilizzando AdSense sul tuo blog in genere non è il più redditizio ...
- Fai la Tesi di lavorare meglio con Digg e Facebook Se sei coinvolto con siti di social media come Digg, Facebbok ...
Related posts portato a voi da Yet Another Related Posts Plugin .
Related posts:
