Adesea, multe posturi de radio sunt construite folosind WordPress, dar mulți nu recoltează adevăratul potențial pentru a crea o adevărată stație radio online. Acest tutorial va arăta cum puteți transforma un site de radio într-o listă cu posturi de radio complet funcționale, cu un program de radio nifty pentru emisiuni speciale.
Introducere Pentru site-ul nostru de radio online, vom include unele DJ-uri / gazde care se joacă în aer. Vom crea un tip de post personalizat pentru ei, unde putem adăuga o imagine, o biografie și alte informații utile. Vom crea, de asemenea, un program de prezentare folosind tipul de post personalizat WordPress din nou. Amestecat cu câteva metabox-uri personalizate, vom face administrarea spectacolului să fie ușor de gestionat.
Pasul 1 Crearea unui tip de postare personalizat DJ / gazdă Pentru a evita fisierele aglomerate cu cod, vom separa fragmentele noastre si folosind functia PHP include
, le vom include în dosarul nostru. Deschide-ți functions.php fișier, localizat în folderul tematic actual și adăugați următorul fragment:
includ ( 'schedule.php'); După finalizare, creați un nou fișier numit schedule.php , apoi adăugăm funcțiile noastre pentru a ne înregistra noul tip de postare.
Pentru mai multe informații despre tipurile personalizate de postări, încercați tipul de post personalizat pentru această pagină
// Inregistreaza DJs Tipul mesajului add_action ('init', 'register_my_radios_djs'); ("Radio Dj", "radios_djs"), "singular_name" => _x ('Add New', 'radios_djs'), 'add_new_item' => _x (' > _x ('Dj', 'radios_djs'), 'view_item' => _x ('View dj', 'radios_djs'), 'search_items' => _x ("Nu dj găsit", "radios_djs"), "not_found_in_trash" => _x (" '),' nume_menu '=> _x (' Radio Djs ',' radios_djs ')); $ args = array ('labels' => etichete $, 'hierarchical' => true, 'description' => 'WordPress Radio DJS', 'supports' => array ('title', 'editor', thumbnail) , 'taxonomies' => array ('category', 'radios_djs'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_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); Adăugarea de miniaturi postale Pentru acest tutorial, vom folosi imagini formate pentru program. Prin urmare, vom adăuga funcția de miniatură a postului WordPress.
dacă (funcția_există ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (150, 150, true); add_image_size ("dj-pic", 260, 160); Observați că am adăugat funcția add_image_size
și câțiva parametri. Vom folosi dimensiunea miniaturilor postare de 260x160 pentru rezultatul final.
Pasul 2 Crearea unui tip de mesaj particularizat pentru program La fel ca și pasul anterior, vom crea un tip de postare următor utilizând aceeași metodă și pur și simplu schimbând unele nume și variabile.
// Inregistreaza programul Tipul mesajului add_action ('init', 'register_my_dj_schedule'); funcția register_my_dj_schedule () $ labels = array ('name' => _x ('Dj Schedule', 'dj_schedule'), 'singular_name' => ("Adăugați nouă", "dj_schedule"), "add_new_item" => _x ("Adăugați o nouă programare", "dj_schedule" => _x ('New Dj Schedule', 'dj_schedule'), 'view_item' => _x ('View Dj Schedule', 'dj_schedule'), 'search_items' => _x , 'not_found' => _x ('Nu dj program găsit', 'dj_schedule'), 'not_found_in_trash' Dj Schedule: ',' dj_schedule '),' nume_menu '=> _x (' Dj Schedule ',' dj_schedule ')); $ args = array ('etichete' => etichete $, 'hierarchical' => true, 'description' => 'WordPress DJ Schedule', 'supports' => array ('title', 'editor', thumbnail) , 'taxonomies' => array ('categoria', 'dj_schedule'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_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); Pasul 3 Adăugarea de casete personalizate Acest tutorial nu va explica fiecare aspect al creării metaboxelor personalizate, dar vom evidenția cele mai semnificative. Cu asta am spus, vom începe prin a suna doi ADD_ACTION
cârlig pentru metaboxele noastre.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); În cazul în care sunteți interesat să aflați mai multe despre căsuțele meta personalizate. Aceasta este o mare citire: Cum de a crea personalizate WordPress Scrie / Meta Boxes
Adăugați Meta-Boxes Functia rschedule_box
care a fost menționat anterior în cârlig, va înregistra un grup de metaboxi în ecranul nostru de editare post. Vom folosi aceste metaboxuri pe pagina noastră de programare a programului.
funcția rschedule_box () add_meta_box ('time_slot_id', __ ('Time Slots', 'time_slot_text'), 'radio_time_slots', 'dj_schedule'); add_meta_box ('dj_select_id', __ ('Select DJ', 'dj_select_text'), 'radio_get_dj_select_box', 'dj_schedule', 'side'); Crearea unei liste de selecție pentru DJ În acest pas, vom crea o funcție care va genera o listă selectată pe ecranul nostru. Această listă va afișa toate DJ-urile / gazdele adăugate la tipul nostru de post personalizat, pe care l-am creat în pasul 1. Această funcție va interoga tipul postului și va returna elementele ca o matrice, apoi vom rupe prin matrice și vom amesteca cu unele HTML. În acest fel, putem face referire la ID-ul postului DJ, de care vom avea nevoie în generarea producției noastre mai târziu.
funcția radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); echo "„; _e ("DJ / gazdă", "dj_id"); echo " „; $ args = array ('post_type' => 'radios_djs'); $ loop = noua valoare WP_Query ($ args); echo "„; foreach ($ loop-> posturi ca $ dj) if ($ dj-> ID == get_post_meta ($ post-> ID, 'dj_id', true)) $ $ select = 'selectat'; altceva $ select = "; echo" Următoarea funcție este funcția noastră care va afișa zilele săptămânii și opțiunile pentru a alege momentul în care spectacolul va fi live. Pentru a obține zilele săptămânii, vom crea o matrice.
$ zile = array ('sun' => 'duminică', 'mon' => 'luni', 'tue' => 'marți', 'wed' => 'fri' => 'Vineri', 'sat' => 'Sâmbătă'); Acum sa terminat, să creăm funcția noastră de timp. Adăugați următorul cod în fișierul dvs..
/ * Imprimă conținutul cutiei * / funcția radio_time_slots ($ post) global $ days; // Utilizați nonce pentru verificare wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ zile ca $ cheie => valoare $) $ select_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ cheie, true); // Ora de începere $ select_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Cheie, adevărat); // Echo de sfârșit de timp ''$ Valoare.' „; echo "„; _e ("Start", "schdule_dj-start -". cheie); echo " „; echo "„; schedule_time_select ($ selected_start); echo " „; echo "„; _e ("Sfârșit", "schdule_dj-end -". cheie); echo " „; echo "„; schedule_time_select ($ selected_end); echo " „; echo " „; După cum veți observa, ne-am referit la gama noastră de zile prin utilizarea zile globale $
. Am fi putut să-l punem în interiorul funcției, dar o vom îndruma ocazional, așa că o vom lăsa în exterior. De asemenea, aruncați o privire asupra modului în care se utilizează matricea de zile, am ales să selectăm câmpurile selectate folosind zilele, deci ar trebui să avem mai multe câmpuri selectate pentru cele 7 zile ale săptămânii. Variabilele $ selected_start
și $ selected_end
utilizați funcția WordPress get_post_meta
, pentru a obține valoarea selectată în prezent pentru lista noastră. De asemenea, folosim strategic cheie
a matricei noastre din lista noastră pentru a numi câmpul de formular, eticheta și pentru a obține valoarea selectată. Când PHP interpretează numele câmpului, acesta va arăta similar cu acesta schdule_dj-start-soare
Unde soare
vor fi modificate în funcție de ziua curentă în buclă. Acest lucru va fi foarte util pentru noi în alte părți ale tutorialului. În cele din urmă, veți realiza că am referit această funcție schedule_time_select
, pe care nu am creat-o încă. Să creăm această funcție acum.
funcția schedule_time_select ($ selectat) $ start = 8 * 60 + 0; $ end = 24 * 60 + 0; echo "N / A „; // Valoare implicită pentru ($ 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 ''.sprintf ('% 02d:% 02d ', $ ora, $ minut).' „; Această funcție va genera opțiunile pentru lista noastră selectată. Fiecare opțiune va fi incrementată cu 15 minute și se va baza pe sistemul de 24 de ore. Pentru prima opțiune, am stabilit o valoare de 0
pentru zilele pe care dorim să le neglijăm. În bucla există un mic dacă
declarație care verifică valoarea trimisă de la funcția noastră de timp radio pentru a determina dacă opțiunea ar trebui să fie setată la selectată.
Pasul 3 Salvarea meboxelurilor În cele din urmă, este timpul să salvați toate informațiile metabox. WordPress are o modalitate foarte simplă și directă de a salva aceste opțiuni, dar o vom face dinamică. Adăugați următorul fragment în fișierul dvs..
// Salvează funcția Meta Data dj_schedule_save_postdata ($ post_id) dacă (definită ('DOING_AUTOSAVE') && DOING_AUTOSAVE) retur; dacă (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) retur; dacă ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) retur; altceva if (! current_user_can ('edit_post', $ post_id)) retur; dacă isset ($ _POST ['dj_id'])) update_post_meta ($ post_id, 'dj_id', esc_attr ($ _POST ['dj_id'])); zile globale $; ($ date ca $ cheie => valoare $) if (isset ($ _POST ['schdule_dj-start -'. $ cheie])) update_post_meta ($ post_id, $ _POST ['schdule_dj-start -'. $ Cheie])); dacă (isset ($ _POST ['schdule_dj-end -'. $ cheie])) update_post_meta ($ post_id, 'schdule_dj-end' ])); Încă o dată, vedeți utilitatea variabilei zilelor noastre globale. În această funcție, buclele se efectuează în fiecare zi și ne salvăm opțiunile din câmpul selectat prin schimbarea numelui în timp.
Pasul 3 Salvarea meboxelurilor Wow! Dacă sunteți încă cu mine, să punem toate aceste coduri la dispoziție, nu? Bine, minunat! Fragmentul de mai jos demonstrează modul în care vom trece prin fiecare program pe care l-am creat și plasând în div. Adăugați codul respectiv și lăsați-l să se despartă.
funcția show_schedule () global $ days; $ html = "; $ html. = '„; $ args = array ('post_type' => 'dj_schedule'); $ loop = noua valoare WP_Query ($ args); foreach ($ loop-> posturi ca element $): $ html. = '
„; $ html. = '
'$ Item-> POST_TITLE.' „; $ dj_id = get_post_meta ($ item-> ID, 'dj_id', adevărat); $ dj = get_post ($ dj_id); $ html. = '
'$ Dj-> POST_TITLE.'
„; $ html. = '
'.get_the_post_thumbnail ($ dj-> ID,' dj-pic ').'
„; foreach ($ zile ca $ cheie => valoare $) $ start = get_post_meta ($ item-> ID, 'schdule_dj-start -'. $ cheie, true); $ end = get_post_meta ($ item-> ID, 'schdule_dj-end-'. $ cheie, adevărat); dacă ($ start <> 0) $ html. = '
“. $ Valoare.". $ Începe .'- 'sfârșitul $'.
„; $ html. = '
„; endforeach; $ html. = '
„; $ Html. =“
„; returnați $ html; În primul rând, facem o buclă pentru tipul nostru de post personalizat dj_schedule
, creați un div și listați titlul. În timp ce în interiorul div, luăm ID-ul DJ pe care l-am adăugat în admin folosind get_post_meta
funcţie. Apoi folosim același ID și apelam funcția WordPress get_post
pentru valorile postului respectiv și le atribuiți unei variabile pe care o vom folosi apoi pentru a obține numele și fotografia DJ-ului.
Obținerea sloturilor de timp Direct sub DJ-ul nostru, avem buclele noastre de zi care buclele în fiecare zi în timp ce facem un control pentru a vedea dacă orice timp de început există pentru acea zi. Dacă acestea există, atunci ieșim timpul de început și sfârșit într-un div.
Adăugarea programului nostru la o pagină Putem face multe lucruri pentru a adăuga programul la o pagină, dar pentru acest tutorial, vom folosi pur și simplu un shortcode. Deci, cu o singură linie de cod, vom crea un cod scurt pe care îl putem apela adăuga pe orice pagină și voila! Avem un program radio de lucru!
add_shortcode ('show_schedule', 'show_schedule'); Concluzie Aceasta este prima fază de adăugare a mai multor caracteristici pe site-ul dvs. de radio WP. Am ales un stil simplu pentru aspect, puteți adăuga aceste stiluri la dvs. style.css fişier. Într-un alt tutorial, îți voi explica cum să creezi un pop-up live cu spectacol curent, DJ și radio.
.scheduleBox background-color: # 333333; frontieră: # 000000 1px solid; culoare: #fafafa; plutește la stânga; margin-stânga: 10px; înălțime: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; frontală de fundal: # 000000 1px solid; .scheduleBox: hover background-color: # 000; frontieră: # 000000 1px solid; culoare: # FFCC00; plutește la stânga; margin-stânga: 10px; .scheduleBox h3: hover culoare: # FF9900; .scheduleBox #time: hover background: # 333333; frontală de fundal: # 000000 1px solid; Feedback-ul dvs. este mult apreciat. Dați-mi voie să știu ce credeți în comentariile de mai jos. Codificare fericită!