Share
Spesso, molte stazioni radio sono costruite usando WordPress, ma molte non sfruttano il vero potenziale per creare una vera stazione radio online. Questo tutorial dimostrerà come è possibile trasformare un sito Web radiofonico in un elenco di DJ della stazione radio completamente funzionante con un programma radiofonico elegante per spettacoli in primo piano.
Per il nostro sito web della radio online, presenteremo alcuni DJ / host che suonano in onda. Creeremo un tipo di post personalizzato per loro, dove possiamo aggiungere un'immagine, una biografia e altre informazioni utili. Creeremo anche una pianificazione degli spettacoli utilizzando nuovamente il tipo di post personalizzato di WordPress. Mescolato con alcuni metabox personalizzati, renderemo l'amministrazione dello spettacolo semplice da gestire.
Per evitare file ingombri di codice, separeremo i frammenti e utilizzando la funzione PHP includere, li includeremo nel nostro file. Apri i tuoi functions.php file, che si trova nella cartella del tema corrente e aggiungi il seguente frammento:
include ( 'schedule.php');
Una volta completato, crea un nuovo file chiamato schedule.php, quindi aggiungiamo le nostre funzioni per registrare il nostro nuovo tipo di post.
Per ulteriori informazioni sui tipi di post personalizzati, prova questo tipo di post personalizzato
Accentsconagua
// Registrati DJs Inserisci tipo add_action ('init', 'register_my_radios_djs'); function register_my_radios_djs () $ labels = array ('name' => _x ('Radio Djs', 'radios_djs'), 'singular_name' => _x ('Radio Dj', 'radios_djs'), 'add_new' => _x ('Aggiungi nuovo', 'radios_djs'), 'add_new_item' => _x ('Aggiungi nuovo Dj', 'radios_djs'), 'edit_item' => _x ('Modifica Dj', 'radios_djs'), 'new_item' = > _x ('Nuovo Dj', 'radios_djs'), 'view_item' => _x ('Visualizza Dj', 'radios_djs'), 'search_items' => _x ('Cerca Dj', 'radios_djs'), 'not_found' => _x ('No dj found', 'radios_djs'), 'not_found_in_trash' => _x ('Nessun dj trovato nel Cestino', 'radios_djs'), 'parent_item_colon' => _x ('Parent Dj:', 'radios_djs '),' menu_name '=> _x (' Radio Djs ',' radios_djs ')); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WordPress Radio DJS', 'supports' => array ('titolo', 'editor', 'miniatura') , 'taxonomies' => array ('category', 'radios_djs'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('radios_djs', $ args); Per questo tutorial, utilizzeremo immagini formattate per il programma. Pertanto, aggiungeremo la funzionalità thumbnail post di WordPress.
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (150, 150, true); add_image_size ('dj-pic', 260, 160); Si noti che abbiamo aggiunto la funzione add_image_size e alcuni parametri. Utilizzeremo la dimensione dell'anteprima post di 260x160 per il nostro risultato finale.
Proprio come il passaggio precedente, creeremo un tipo di post successivo utilizzando lo stesso metodo e semplicemente cambiando alcuni nomi e variabili.
// Registrati Schedule Post Type add_action ('init', 'register_my_dj_schedule'); function register_my_dj_schedule () $ labels = array ('name' => _x ('Dj Schedule', 'dj_schedule'), 'singular_name' => _x ('Dj Schedule', 'dj_schedule'), 'add_new' => _x ('Aggiungi nuovo', 'dj_schedule'), 'add_new_item' => _x ('Aggiungi nuova pianificazione', 'dj_schedule'), 'edit_item' => _x ('Modifica programma Dj,' dj_schedule '),' new_item ' => _x ('New Dj Schedule', 'dj_schedule'), 'view_item' => _x ('Visualizza Dj Schedule', 'dj_schedule'), 'search_items' => _x ('Cerca Dj Schedule', 'dj_schedule') , 'not_found' => _x ('No dj schedule found', 'dj_schedule'), 'not_found_in_trash' => _x ('Nessuna pianificazione dj trovata nel cestino', 'dj_schedule'), 'parent_item_colon' => _x ('Parent Dj Schedule: ',' dj_schedule '),' menu_name '=> _x (' Dj Schedule ',' dj_schedule ')); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WordPress DJ Schedule', 'supports' => array ('titolo', 'editor', 'miniatura') , 'taxonomies' => array ('category', 'dj_schedule'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('dj_schedule', $ args); Questo tutorial non spiegherà ogni aspetto della creazione di metabox personalizzati, ma ne evidenzieremo i più significativi. Detto questo, inizieremo chiamando due add_action ganci per i nostri metaboliti.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); In te sei interessato a saperne di più sui meta box personalizzati. Questa è un'ottima lettura: Come creare caselle di scrittura / Meta personalizzate di WordPress
La funzione rschedule_box che è stato precedentemente menzionato nel gancio, registrerà un gruppo di metabox nella nostra schermata di modifica del post. Useremo questi metabox nella nostra pagina Modifica pianificazione.
function rschedule_box () add_meta_box ('time_slot_id', __ ('Time Slots', 'time_slot_text'), 'radio_time_slots', 'dj_schedule'); add_meta_box ('dj_select_id', __ ('Seleziona DJ', 'dj_select_text'), 'radio_get_dj_select_box', 'dj_schedule', 'side'); 
In questo passaggio, creiamo una funzione che genererà una lista di selezione sul nostro schermo. Questo elenco mostrerà tutti i DJ / host aggiunti al nostro tipo di post personalizzato, che abbiamo creato nel passaggio 1. Questa funzione interrogherà il tipo di post e restituirà gli elementi come una matrice, quindi eseguiremo il ciclo della matrice e la mescoleremo con alcuni HTML. In questo modo, possiamo fare riferimento al post ID DJ, di cui avremo bisogno per generare il nostro output in seguito.
funzione radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); eco ' '; $ args = array ('post_type' => 'radios_djs'); $ loop = new WP_Query ($ args); eco ''; 
La prossima funzione è la nostra funzione che visualizzerà i giorni della settimana e le opzioni per scegliere il momento in cui lo spettacolo sarà in diretta. Per permetterci di ottenere i giorni della settimana, creeremo un array.
$ days = array ('sun' => 'Sunday', 'mon' => 'Monday', 'tue' => 'Tuesday', 'wed' => 'Wednesday', 'thu' => 'Thursday', 'fri' => 'Friday', 'sat' => 'Saturday'); Fatto questo, creiamo la nostra funzione di fascia oraria. Aggiungi il seguente codice al tuo file.
/ * Stampa il contenuto della casella * / funzione radio_time_slots ($ post) global $ days; // Usa nonce per la verifica wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ days as $ key => $ value) $ selected_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ key, true); // Ora inizio $ selected_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Key, true); // End Time echo ''Valore di $.'
'; eco ' '; eco ''; eco ' '; eco ''; eco '
'; Come noterai, ci siamo riferiti alla nostra serie di giorni usando giorni $ globali. Potremmo averlo inserito all'interno della funzione, ma lo faremo di tanto in tanto, quindi lo lasceremo all'esterno. Inoltre, date un'occhiata a come viene usata la serie di giorni, abbiamo scelto di fare il ciclo di alcuni campi selezionati usando i giorni, quindi dovremmo avere diversi campi di selezione per i 7 giorni della settimana. Le variabili $ selected_start e $ selected_end usa la funzione WordPress get_post_meta, per ottenere il valore attualmente selezionato per la nostra lista. Stiamo anche usando strategicamente il chiave del nostro array nella nostra lista per nominare il nostro campo modulo, etichettare e ottenere il nostro valore selezionato. Quando PHP interpreta il nome del campo, apparirà simile a questo schdule_dj-start-sole dove sole verrà modificato in base al giorno corrente nel ciclo. Questo ci sarà molto utile in altre parti del tutorial. Infine, ti renderai conto che abbiamo fatto riferimento alla funzione schedule_time_select, che non abbiamo ancora creato. Creiamo quella funzione ora.
function schedule_time_select ($ selected) $ start = 8 * 60 + 0; $ end = 24 * 60 + 0; eco ''; // Valore predefinito per ($ time = $ start; $ time<=$end; $time += 15) $minute = $time%60; $hour = ($time-$minute)/60; if ( $selected == sprintf( '%02d:%02d', $hour, $minute ) ) $select = 'selected'; else $select ="; echo '';
Questa funzione genererà le opzioni per la nostra lista di selezione. Ciascuna opzione verrà incrementata di 15 minuti e si basa sul sistema a 24 ore. Per la prima opzione, impostiamo un valore di 0 per i giorni che desideriamo trascurare. All'interno del ciclo, c'è un piccolo Se dichiarazione che controlla il valore inviato dalla nostra funzione di orario radio per determinare se l'opzione deve essere impostata su selezionata.
Infine, è tempo di salvare tutte le nostre informazioni sul metabox. WordPress ha un modo molto semplice e diretto per salvare queste opzioni, ma lo renderemo più dinamico. Aggiungi il seguente snippet al tuo file.
// Salva la funzione Meta Dati dj_schedule_save_postdata ($ post_id) if (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) restituisce; if ('page' == $ _POST ['post_type']) se (! current_user_can ('edit_page', $ post_id)) restituisce; else se (! current_user_can ('edit_post', $ post_id)) restituisce; if (isset ($ _POST ['dj_id'])) update_post_meta ($ post_id, 'dj_id', esc_attr ($ _POST ['dj_id'])); giorni globali $; foreach ($ days as $ key => $ value) if (isset ($ _POST ['schdule_dj-start -'. $ chiave])) update_post_meta ($ post_id, 'schdule_dj-start -'. $ chiave, esc_attr ( $ _POST ['schdule_dj-start -'. $ Key])); if (isset ($ _POST ['schdule_dj-end -'. $ key])) update_post_meta ($ post_id, 'schdule_dj-end -'. $ chiave, esc_attr ($ _POST ['schdule_dj-end -'. $ chiave ])); Ancora una volta, vedi l'utilità della nostra variabile di giorni globali. In questa funzione, passiamo in rassegna ogni giorno e salviamo le nostre opzioni dal nostro campo di selezione cambiando il nome con il passare dei giorni.
Wow! Se sei ancora con me, mettiamo tutti questi codici al lavoro, vero? Ok fantastico! Lo snippet di seguito mostra come analizzeremo ogni programma che abbiamo creato e inserito in div. Aggiungi quel pezzetto di codice e scomporlo.
function show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = new WP_Query ($ args); foreach ($ loop-> posts as $ item): $ html. = ''; return $ html;'; $ html. = ''; endforeach; $ html. = ''; $ Html. =''$ Item-> post_title.'
'; $ dj_id = get_post_meta ($ item-> ID, 'dj_id', true); $ dj = get_post ($ dj_id); $ html. = ''$ Dj-> post_title.''; $ html. = ''.get_the_post_thumbnail ($ dj-> ID,' dj-pic ').''; foreach ($ days as $ key => $ value) $ start = get_post_meta ($ item-> ID, 'schdule_dj-start -'. $ key, true); $ end = get_post_meta ($ item-> ID, 'schdule_dj-end -'. $ key, true); if ($ start <> 0) $ html. = ''. Valore di $. ". $ Iniziare .'- ' $ end'.'; $ html. = '
In primo luogo, creiamo un ciclo per il nostro tipo di post personalizzato dj_schedule, crea un div ed elenca il titolo. Mentre siamo all'interno del div, recuperiamo il DJ ID che abbiamo aggiunto nell'amministratore usando il get_post_meta funzione. Quindi usiamo lo stesso ID e chiamiamo la funzione WordPress get_post per i valori di quel post e assegnarli a una variabile che utilizzeremo per ottenere il nome e la foto del DJ.
Direttamente sotto il nostro DJ, abbiamo il nostro ciclo giornaliero che scorre ogni giorno mentre facciamo un controllo per vedere se esiste un orario di inizio per quel giorno. Se esistono, quindi produciamo l'ora di inizio e di fine in un div.
Possiamo fare molte cose per aggiungere il programma a una pagina, ma per questo tutorial useremo semplicemente uno shortcode. Quindi, con una sola riga di codice, creeremo un codice breve che possiamo chiamare aggiungere su qualsiasi pagina e voilà! Abbiamo un programma radiofonico funzionante!
add_shortcode ('show_schedule', 'show_schedule'); Questa è la prima fase di aggiungere altre fantastiche funzionalità al tuo sito web della radio WP. Ho scelto alcuni stili semplici per il layout, puoi aggiungere questi stili al tuo style.css file. In un altro tutorial, spiegherò come creare un bel pop-up live stream con show attuale, DJ e radio player.
.scheduleBox background-color: # 333333; border: # 000000 1px solido; colore: #fafafa; fluttuare: a sinistra; margin-left: 10px; altezza: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; border-bottom: # 000000 1px solido; .scheduleBox: hover background-color: # 000; border: # 000000 1px solido; colore: # FFCC00; fluttuare: a sinistra; margin-left: 10px; .scheduleBox h3: hover color: # FF9900; .scheduleBox #time: hover background: # 333333; border-bottom: # 000000 1px solido;
Il tuo feedback è molto apprezzato. Fatemi sapere cosa ne pensate nei commenti qui sotto. Buona programmazione!
