Come aggiungere un carosello per la tua tesi sul blog

10 agosto 2009 da admin Lascia un »Rispondi

Post per immagini Come aggiungere un carosello per la tua tesi sul blog

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.

7262009_22442 PM

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:

7262009_32157 PM

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

1 2 3 4 5 6 7 8

Related posts:

  1. Come aggiungere un cursore Visual alla tesi che segue è un tutorial su come aggiungere un ...
  2. Tesi Tutorial - Come aggiungere AdSense Section Targeting per l'uso di AdSense sul tuo blog di solito non è il più redditizio ...
  3. 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.

Share and Enjoy:
  • Print this article!
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • MySpace
  • Reddit
  • RSS
  • Yahoo! Bookmarks

Related posts:

  1. Rendere tesi funzionano meglio con Digg e Facebook
  2. Usando i tag per una migliore Targeting degli annunci sul tuo blog
  3. Utilizzando sponsorizzati Blog Temi per Reputation Management
  4. Il tuo blog Suck ... Here's How to Fix It
  5. Come utilizzare i tag sul vostro blog o sito web

Pubblicità

Lasci una risposta