Ofte er mange radiostasjoner bygget ved hjelp av WordPress, men mange høster ikke det sanne potensialet for å skape en sann nettbasert radiostasjon. Denne opplæringen vil vise hvordan du kan slå en radioside til en fullt funksjonell radiostasjon DJ-liste med en skikkelig radioplan for funksjoner.
Introduksjon For vår online radio nettsted, vil vi ha noen DJs / verter som spiller på luften. Vi vil opprette en tilpasset posttype for dem, der vi kan legge til et bilde, biografi og annen nyttig informasjon. Vi vil også opprette en visningsplan med WordPress-tilpasset innleggstype på nytt. Blandet med noen tilpassede metaboxer, skal vi gjøre visningsadministrasjonen enkel å administrere.
Trinn 1 Opprette DJ / vert tilpasset posttype For å unngå filer som er rotete med kode, skiller vi ut våre utdrag og bruker PHP-funksjonen inkludere, vi vil inkludere dem til vår fil. Åpne din functions.php fil, som ligger i din nåværende temapakke og legge til følgende kode:
omfatte ( 'schedule.php'); Når du er ferdig, opprett en ny fil som heter schedule.php , da legger vi til våre funksjoner for å registrere vår nye posttype.
For mer informasjon om egendefinerte innleggstyper, prøv denne siden tilpasset posttype
// Registrer DJs Post Type add_action ('init', 'register_my_radios_djs'); funksjons register_my_radios_djs () $ etiketter = array ( 'navnet' => _x ( 'Radio Djs', 'radios_djs'), 'singular_name' => _x ( 'radio-DJ', 'radios_djs'), 'add_new' => _x ('Legg til ny', 'radios_djs'), 'add_new_item' => _x ('Legg til ny Dj', 'radios_djs'), 'edit_item' => _x ('Rediger Dj', 'radios_djs'), 'new_item' = ' > _x ('New Dj', 'radios_djs'), 'view_item' => _x ('Se Dj', 'radios_djs'), 'search_items' => _x ('Søk Dj', 'radios_djs'), 'not_found' => _x ( 'Ingen dj funnet', 'radios_djs'), 'not_found_in_trash' => _x ( 'ingen dj som finnes i papirkurven', 'radios_djs'), 'parent_item_colon' => _x ( 'Parent Dj:', 'radios_djs '),' menu_name '=> _x (' Radio Djs ',' radios_djs ')); $ args = array ('labels' => $ etiketter, 'hierarkisk' => sann, 'description' => 'WordPress Radio DJS', 'støtter' => array ('title', 'editor', 'miniatyrbilde') , 'taxonomies' => array ('kategori', 'radios_djs'), 'public' => true, 'show_ui' => sant, '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' => 'innlegg'); register_post_type ('radios_djs', $ args); Legge til Post Miniatyrbilder For denne opplæringen bruker vi formaterte bilder for tidsplanen. Derfor skal vi legge til miniatyrfunksjonen for WordPress-innlegget.
hvis (function_exists ('add_theme_support')) add_theme_support ('post-miniatyrer'); set_post_thumbnail_size (150, 150, true); add_image_size ('dj-pic', 260, 160); Legg merke til at vi har lagt til funksjonen add_image_size og noen parametere. Vi bruker miniatyrbildestørrelsen på 260x160 for sluttresultatet.
Trinn 2 Opprette tidsplan Tilpasset innleggstype På samme måte som forrige trinn, skal vi lage en neste posttype med samme metode og bare endre noen navn og variabler.
// Registrer Planlegg Posttype add_action ('init', 'register_my_dj_schedule'); funksjonsregister_my_dj_schedule () $ labels = array ('navn' => _x ('Dj Schedule', 'dj_schedule'), 'singular_name' => _x ('Dj Schedule', 'dj_schedule'), 'add_new' => _x ('Legg til nytt', 'dj_schedule'), 'add_new_item' => _x ('Legg til nytt skjema', 'dj_schedule'), 'edit_item' => _x ('Rediger Dj Schedule', 'dj_schedule'), 'new_item' => _x ('New Dj Schedule', 'dj_schedule'), 'view_item' => _x ('Vis Dj Schedule', 'dj_schedule'), 'search_items' => _x ('Søk Dj Schedule', 'dj_schedule') , 'not_found' => _x ( 'No dj plan funnet', 'dj_schedule'), 'not_found_in_trash' => _x ( 'No dj plan som finnes i papirkurven', 'dj_schedule'), 'parent_item_colon' => _x ( 'Parent Dj Schedule: ',' dj_schedule '),' menu_name '=> _x (' Dj Schedule ',' dj_schedule ')); $ args = array ('labels' => $ etiketter, 'hierarchical' => true, 'description' => 'WordPress DJ Schedule', 'støtter' => array ('title', 'editor', 'miniatyrbilde') , 'taxonomies' => array ('kategori', 'dj_schedule'), 'public' => sant, 'show_ui' => sant, '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' => 'innlegg'); register_post_type ('dj_schedule', $ args); Trinn 3 Legge til tilpassede Meta-bokser Denne opplæringen vil ikke forklare alle aspekter ved å opprette egendefinerte metaboxer, men vi vil fremheve det viktigste. Med det sagt begynner vi å ringe to ADD_ACTION kroker for våre metaboxer.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); I du er interessert i å lære mer om tilpassede metakasser. Dette er en flott lese: Hvordan lage Custom WordPress Write / Meta Boxes
Legg til meta-boksene Funksjonen rschedule_box som tidligere ble nevnt i kroken, vil registrere en gruppe metaboxer til vår postredigeringsskjerm. Vi vil bruke disse metaboxene på vår Planlegg Rediger-side.
funksjon rschedule_box () add_meta_box ('time_slot_id', __ ('Time Slots', 'time_slot_text'), 'radio_time_slots', 'dj_schedule'); add_meta_box ('dj_select_id', __ ('Velg DJ', 'dj_select_text'), 'radio_get_dj_select_box', 'dj_schedule', 'side'); Opprette en DJ-liste I dette trinnet oppretter vi en funksjon som vil generere en valgt liste på skjermen. Denne listen vil vise alle DJs / verter lagt til vår egendefinerte innleggstype, som vi opprettet i trinn 1. Denne funksjonen vil spørre posttypen og returnere elementene som en matrise, så vil vi sløyfe om arrayet og blande det med noen HTML. På denne måten kan vi referere til DJ post-ID, som vi trenger for å generere vår produksjon senere.
funksjon radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); ekko ''; _e ("DJ / Host", "dj_id"); ekko ' '; $ args = array ('post_type' => 'radios_djs'); $ loop = ny WP_Query ($ args); ekko ''; foreach ($ loop-> innlegg som $ dj) if ($ dj-> ID == get_post_meta ($ post-> ID, 'dj_id', true)) $ select = 'selected'; else $ select = "; echo ' Den neste funksjonen er vår funksjon som viser dagens dager og muligheter for å velge tidspunktet når showet skal være live. For at vi skal få ukedagene, oppretter vi en matrise.
$ days = array ('sun' => 'søndag', 'mon' => 'mandag', 'tue' => 'tirsdag', 'wed' => 'onsdag', 'thu' => 'torsdag' 'fri' => 'fredag', 'sat' => 'lørdag'); Nå er det gjort, la oss lage vår tidslukefunksjon. Legg til følgende kode i filen din.
/ * Skriver ut innholdet i boksen * / funksjonen radio_time_slots ($ post) global $ days; // Bruk nonce for verifisering wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ dager som $ key => $ verdi) $ selected_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ key, true); // Starttid $ selected_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Key, true); // End-tid ekko ''. $ Verdi. '; _e ("Start", "schdule_dj-start - '. $ nøkkel); ekko ' '; ekko ''; schedule_time_select ($ selected_start); ekko ' '; ekko ''; _e ("End", "schdule_dj-end - '. $ key); ekko ' '; ekko ''; schedule_time_select ($ selected_end); ekko ' '; ekko ' Som du vil merke vi refererte vårt utvalg av dager ved å bruke globale $ dager. Vi kunne ha plassert den inne i funksjonen, men vi vil referere det til og med, så vi lar det ligge på utsiden. Ta også en titt på hvordan rekke dager brukes, vi har valgt å sløyfe noen markerte felt ved hjelp av dagene, så vi bør ha flere utvalgte felt for de 7 dagene i uken. Variablene $ selected_start og $ selected_end bruk WordPress-funksjonen get_post_meta, for å få den valgte verdien for listen vår. Vi bruker også strategisk nøkkel av vårt utvalg i vår liste for å navngi vårt skjemafelt, etikett og få vår valgte verdi. Når PHP tolker feltnavnet, vil det se ut som dette schdule_dj-start-sun hvor sol vil bli endret i henhold til dagens dag i løkken. Dette vil være ganske nyttig for oss i andre deler av opplæringen. Til slutt vil du innse at vi har referert til funksjonen schedule_time_select, som vi ikke har laget ennå. La oss lage den funksjonen nå.
funksjon schedule_time_select ($ valgt) $ start = 8 * 60 + 0; $ end = 24 * 60 + 0; ekko 'N / A '; // Standard verdi for ($ 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 ', $ time, $ minutt).' '; Denne funksjonen vil generere alternativene for vår utvalgsliste. Hvert valg vil økes med 15 minutter og er basert på 24-timers systemet. For det første alternativet angir vi en verdi på 0 for de dagene vi ønsker å forsømme. Innenfor løkken er det en liten hvis erklæring som kontrollerer verdien som sendes fra funksjonen for radiotidsluke for å avgjøre om alternativet skal settes til valgt.
Trinn 3 Lagre Meta-boksene Endelig er det på tide å lagre all vår metaboksinformasjon. WordPress har en veldig enkel og rett frem måte å lagre disse alternativene, men vi skal gjøre det mer dynamisk. Legg til følgende utdrag i filen din.
// Lagre Meta Data-funksjonen dj_schedule_save_postdata ($ post_id) hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) tilbake; hvis (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) returnere; hvis ('side' == $ _POST ['post_type']) hvis (! current_user_can ('edit_page', $ post_id)) returnere; ellers hvis (! current_user_can ('edit_post', $ post_id)) returnere; hvis (isset ($ _POST ['dj_id'])) update_post_meta ($ post_id, 'dj_id', esc_attr ($ _POST ['dj_id'])); globale $ dager; foreach ($ dager som tasten $ => $ verdi) if (isset ($ _POST [ 'schdule_dj-start -' $ nøkkel.])) update_post_meta ($ POST_ID, 'schdule_dj-start -'. $ nøkkel, esc_attr ( $ _POST ['schdule_dj-start -'. $ Nøkkel])); If (isset ($ _POST [ 'schdule_dj-ende -' $ nøkkel.])) Update_post_meta ($ POST_ID, 'schdule_dj-ende -' $ nøkkel, esc_attr ($ _POST [. 'Schdule_dj-ende -' $ nøkkel. ])); Igjen ser du nytten av vår globale dagvariabel. I denne funksjonen går vi gjennom hver dag, og vi lagrer våre valg fra vårt utvalgsfelt ved å endre navnet som dagene går gjennom.
Trinn 3 Lagre Meta-boksene Wow! Hvis du fortsatt er med meg, la oss sette alle disse kodene på jobb, skal vi? Ok flott! Utsnittet nedenfor viser hvordan vi skal løpe gjennom hver tidsplan som vi opprettet og plasserer i divs. Legg til den lille koden og la oss slå den ned.
funksjon show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = ny WP_Query ($ args); foreach ($ loop-> innlegg som $ item): $ html. = '
'; $ html. = '
'. $ Element-> 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 ($ dager som $ key => $ verdi) $ start = get_post_meta ($ item-> ID, 'schdule_dj-start -'. $ key, true); $ end = get_post_meta ($ item-> ID, 'schdule_dj-end -'. $ key, true); hvis ($ start <> 0) $ html. = '
'. $ Verdi. ". $ Starte .'-'. $ Enden.
'; $ html. = '
'; endforeach; $ html. = '
'; $ Html. ='
For det første lager vi en loop for vår egendefinerte innleggstype dj_schedule, opprett en div og oppgi tittelen. Mens vi er inne i diven, henter vi DJ-IDen vi la til i admin ved hjelp av get_post_meta funksjon. Da bruker vi samme ID og kaller WordPress-funksjonen get_post for verdiene til det innlegget og tilordne dem til en variabel som vi da bruker for å få DJs navn og bilde.
Få tidsporene Rett under vår DJ har vi vår dagsløyfe som løper gjennom hver dag mens du sjekker for å se om det er en starttid for den dagen. Hvis de eksisterer, sender vi start- og sluttidspunktet til en div.
Legge til vårt plan for en side Vi kan gjøre mange ting for å legge til timeplanen på en side, men for denne opplæringen vil vi ganske enkelt bruke en kortkode. Så, med bare én linje med kode, vil vi lage en kort kode som vi kan ringe legge til på hvilken som helst side og voila! Vi har en fungerende radioplan!
add_shortcode ('show_schedule', 'show_schedule'); Konklusjon Dette er den første fasen av å legge til flere flotte funksjoner på WP-radiosiden din. Jeg har valgt noen enkle styling for layoutet, du kan legge til disse stilene til din style.css fil. I en annen opplæring vil jeg forklare hvordan du lager en fin live stream-popup med nåværende show, DJ og radio spiller.
.scheduleBox bakgrunnsfarge: # 333333; border: # 000000 1px solid; farge: #fafafa; flyte: venstre; margin-venstre: 10px; høyde: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; border-bottom: # 000000 1px solid; .scheduleBox: svever bakgrunnsfarge: # 000; border: # 000000 1px solid; farge: # FFCC00; flyte: venstre; margin-venstre: 10px; .scheduleBox h3: hover color: # FF9900; .scheduleBox #time: hover bakgrunn: # 333333; border-bottom: # 000000 1px solid; Din tilbakemelding er mye verdsatt. Gi meg beskjed om hva du synes i kommentarene nedenfor. Glad koding!
Share
Accentsconagua
