Share
Le recensioni sono forse uno dei più grandi poteri di blogging in termini di autorità. Se fatti correttamente (con duro lavoro e informazioni coerenti), i blog di revisione sono probabilmente la categoria più redditizia nella blogosfera. Ma ogni blog deve offrire un design solido nei loro post, comprese le recensioni. In questo post, parleremo di come costruire la scatola di revisione perfetta, dal momento che le caselle di revisione sono probabilmente la prima parte che i lettori controllano prima di leggere una recensione.
Ad esempio, creeremo una casella di revisione per un film.
Prendiamo uno dei miei film preferiti di tutti i tempi, The Pursuit of Happyness. Mostreremo le seguenti informazioni sul film:
Importante: Questa informazione è presa in prestito da Internet Movie Database.
Conserveremo i dati come valori dei campi personalizzati, ma aggiungere campi personalizzati manualmente per ciascuna recensione può essere così doloroso. Per questo motivo, creeremo una meta box personalizzata per salvare i nostri dati come campi personalizzati.
Per prima cosa, dobbiamo usare il add_meta_box () funzione per costruire la meta-box e creare una funzione di callback:
Accentsconagua
function wptuts_review_box_add_meta () add_meta_box ('review-box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'high'); add_action ('add_meta_boxes', 'wptuts_review_box_add_meta'); function wptuts_review_box_meta () // Ciao! La funzione di callback creerà i campi di input per contenere i nostri dati. Penso che possiamo usare una texarea per il campo "trama" e campi di inserimento del testo per tutto il resto:
ID); // estrae i membri dell'array $ values alle proprie variabili (che puoi vedere di seguito, nel codice HTML) extract ($ values, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?>
Quindi, dobbiamo creare la funzione per fare in modo che WordPress salvi i valori di input come campi personalizzati:
funzione wptuts_review_box_save_meta ($ post_id) if (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) restituisce; if (! isset ($ _POST ['review_box_meta_nonce']) ||! wp_verify_nonce ($ _POST ['review_box_meta_nonce'], 'review_box_meta_action')) return; se (! current_user_can ('edit_post')) restituisce; // crea un array dei nostri campi personalizzati $ review_array = array ('_wptuts_review_name', '_wptuts_review_year', '_wptuts_review_director', '_wptuts_review_writer', '_wptuts_review_stars', '_wptuts_review_genre', '_wptuts_review_runtime', '_wptuts_review_image', '_wptuts_review_storyline') ; // crea i valori "predefiniti" per l'array $ review_array_defaults = array ('_wptuts_review_name' => 'None', '_wptuts_review_year' => 'None', '_wptuts_review_director' => 'None', '_wptuts_review_writer' => 'None ',' _wptuts_review_stars '=>' Nessuno ',' _wptuts_review_genre '=>' Nessuno ',' _wptuts_review_runtime '=>' Nessuno ',' _wptuts_review_image '=>' Nessuno ',' _wptuts_review_storyline '=>' Nessuno '); // li analizzo! $ review_array = wp_parse_args ($ review_array, $ review_array_defaults); // Elementi HTML ammessi nei campi $ allowed_html = array ('a' => array ('href' => array (), 'title' => array ()), 'em' => array (), 'strong' => array ()); // aggiorna i metadati del post con i campi di input (se sono impostati) foreach ($ review_array as $ item) if (isset ($ _POST [$ item])) update_post_meta ($ post_id, $ item, wp_kses ($ _ POST [$ item], $ allowed_html)); add_action ('save_post', 'wptuts_review_box_save_meta'); Fatto!
Per trovare maggiori informazioni sulla creazione di meta box personalizzati (e cosa significano in realtà queste righe di codice), puoi leggere questo fantastico articolo scritto da Christopher Davis e pubblicato su Wptuts+.Ora che abbiamo coperto come impostato le informazioni, abbiamo bisogno di imparare come ottenere l'informazione. Se prima hai lavorato con i campi personalizzati, questo sarà facile dato che stiamo andando a recuperare valori di campi personalizzati.
WordPress ha una funzione facile da usare per ottenere valori di campo personalizzati:
$ meta_values = get_post_meta ($ post_id, $ key, $ single);
Abbiamo bisogno di caricare valori di campo personalizzati in un codice HTML, quindi sarebbe saggio pensare ora all'HTML. Sto pensando qualcosa del genere:
- Nome: La ricerca della felicità
- Anno: 2006
- Direttore: Gabriele Muccino
- Scrittore: Steve Conrad
- Stelle: Will Smith, Jaden Smith, Thandie Newton
- Genere: Biografia, Drama
- Durata: 117 minuti
- Trama: Basato su una storia vera di un uomo di nome Christopher Gardner. Gardner ha investito molto in un dispositivo noto come "scanner Bone Density". Si sente come se avesse realizzato questi dispositivi. Tuttavia, non vendono perché sono marginalmente migliori rispetto all'attuale tecnologia ad un prezzo molto più alto. Mentre Gardner cerca di capire come venderli, sua moglie lo lascia, perde la casa, il suo conto in banca e le carte di credito. Costretto a vivere per le strade con suo figlio, Gardner è ora alla disperata ricerca di un lavoro stabile; fa un lavoro come agente di cambio, ma prima di poter ricevere la paga, ha bisogno di passare 6 mesi di addestramento e vendere i suoi dispositivi.
E se li mettiamo insieme, avremo la nostra funzione pronta!
function wptuts_review_box () global $ post; // ottiene i valori del campo personalizzato come una matrice $ values = get_post_custom ($ post-> ID); // estrae i membri dell'array $ values alle proprie variabili (che puoi vedere di seguito, nel codice HTML) extract ($ values, EXTR_SKIP); // se non ci sono link immagine nel campo personalizzato "review_image", prova a ottenere l'immagine in primo piano if ($ _ wptuts_review_image == ") if (has_post_thumbnail ()) $ get_wptuts_review_image = wp_get_attachment_image_src (get_post_thumbnail_id (), 'full') ; $ _wptuts_review_image = $ get_wptuts_review_image [0]; else $ _wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; // evita l'output, nel caso in cui $ allowed_html = array ('a '=> array (' href '=> array (),' title '=> array ()),' em '=> array (),' strong '=> array ()); $ _wptuts_review_name_output = wp_kses ($ _ wptuts_review_name [0], $ allowed_html); $ _wptuts_review_year_output = wp_kses ($ _ wptuts_review_year [0], $ allowed_html); $ _wptuts_review_director_output = wp_kses ($ _ wptuts_review_director [0], $ allowed_html); $ _wptuts_review_writer_output = wp_kses ($ _ wptuts_review_writer [0], $ allowed_html); $ _wptuts_review_stars_output = wp_kses ($ _ wptuts_review_stars [0], $ allowed_html); $ _wptuts_review_genre_output = wp_kses ($ _ wptuts_review_genre [ 0], $ allowed_html); $ _wptuts_review_runtime_output = wp_kses ($ _ wptuts_review_runtime [0], $ allowed_html); $ _wptuts_review_storyline_output = wp_kses ($ _ wptuts_review_storyline [0], $ allowed_html); $ _wptuts_review_image_output = wp_kses ($ _ wptuts_review_image [0], $ allowed_html); $ output = ' 
- Nome: '$ _ Wptuts_review_name_output.'
- Anno: '$ _ Wptuts_review_year_output.'
- Direttore: '$ _ Wptuts_review_director_output.'
- Scrittore: '$ _ Wptuts_review_writer_output.'
- Stelle: '$ _ Wptuts_review_stars_output.'
- Genere: '$ _ Wptuts_review_genre_output.'
- Durata: '$ _ Wptuts_review_runtime_output.'
- Trama: '$ _ Wptuts_review_storyline_output.'
'; restituire $ output; Naturalmente, puoi personalizzare la tua casella di revisione in qualsiasi modo desideri. Se non ne hai voglia, sei libero di usare il nostro:
.review-box width: 550px; border: 1px solid #DDD; border-radius: 5px; margin: 10px; .review-box-image float: right; width: 150px; border: 10px solid #fff; border- width: 0 0 10px 10px; margin: 10px 10px 0 0; .review-box-list margin: 10px; padding: 0; list-style: none; .review-box-list li margin-bottom: 5px ; padding-top: 5px; border-top: 1px solid #EEE; .review-box-list li: first-child border-top: 0; .review-box-list li strong display: inline-block ; larghezza: 75px;Se si desidera spostare la casella di revisione a sinistra oa destra, non dimenticare di aggiungere il
float: sinistra; (o float: right;) dichiarazione per .revisione-box. Puoi persino centrarlo cambiando il margin: 10px; dichiarazione in margine: 10px auto;. Sappiamo come impostare le informazioni, sappiamo come ottenere le informazioni ... Ora è il momento che noi mostrare le informazioni! :)
Possiamo sempre aggiungere la casella automaticamente alla fine (o all'inizio) del post in questo modo:
function wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // mostra la casella alla fine del post: restituisci $ content. $ review_box; // mostra la casella all'inizio del post: // restituisce $ review_box. $ content; add_action ('the_content', 'wptuts_review_box_add'); Ma cosa succede se vogliamo includere la scatola dentro il post? Ecco dove la mia parte preferita è utile: shortcode!
Questo passaggio sarebbe ancora più semplice di quello precedente, dal momento che abbiamo effettivamente svolto tutto il lavoro per caricare la casella di controllo. Tutto ciò che dobbiamo fare è chiamare la funzione come uno shortcode come questo:
add_shortcode ( 'reviewbox', 'wptuts_review_box');
Ecco cosa avrai se segui i passaggi sopra esattamente come sono scritti:
Queste caselle di revisione potrebbero essere utilizzate per un sacco di recensioni diverse come software, siti Web, libri, programmi TV e così via. Oppure, se puoi diventare creativo, puoi persino usarli nei blog normali solo per divertirti!
Per comprendere appieno il codice e anche per migliorarlo, dovresti leggere alcuni altri articoli di Wptuts +:
C'è qualcosa che vorresti migliorare o hai un'idea? Condividi i tuoi pensieri con noi commentando di seguito.
