Share
Ofta byggs många radiostationer med WordPress, men många skördar inte den sanna potentialen för att skapa en sann online-radiostation. Denna handledning visar hur du kan göra en radiosida till en fullt fungerande radiostation DJ-lista med ett smutsigt radioprogram för utvalda bilder.
För vår online-radiosida kommer vi att presentera några dj / värdar som spelar i luften. Vi kommer att skapa en anpassad posttyp för dem där vi kan lägga till en bild, biografi och annan användbar information. Vi kommer även att skapa ett visningsschema med hjälp av WordPress-anpassad posttyp igen. Blandat med några anpassade metaboxar, vi ska göra showadministrationen enkel att hantera.
För att undvika filer som är rörliga med kod separerar vi våra utdrag och använder PHP-funktionen inkludera, Vi tar med dem till vår fil. Öppna din functions.php fil, som finns i din aktuella temapapp och lägg till följande kod:
innefattar ( 'schedule.php');
När du är klar, skapa en ny fil som heter schedule.php, då lägger vi till våra funktioner för att registrera vår nya posttyp.
För mer information om anpassade posttyper, prova den här sidan anpassad posttyp
Accentsconagua
// Registrera DJs Posttyp add_action ('init', 'register_my_radios_djs'); funktionsregister_my_radios_djs () $ labels = array ('name' => _x ('Radio Djs', 'radios_djs'), 'singular_name' => _x ('Radio Dj', 'radios_djs'), 'add_new' => _x ('Lägg till ny', 'radios_djs'), 'add_new_item' => _x ('Lägg till ny Dj', 'radios_djs'), 'edit_item' => _x ('Redigera Dj', 'radios_djs'), 'new_item' > _x ('New Dj', 'radios_djs'), 'view_item' => _x ('Visa Dj', 'radios_djs'), 'search_items' => _x ('Sök Dj', 'radios_djs'), 'not_found' => _x ('Ingen dj hittade', 'radios_djs'), 'not_found_in_trash' => _x ('Ingen dj i papperskorgen', 'radios_djs'), 'parent_item_colon' => _x ('Föräldra Dj:', 'radios_djs '),' menu_name '=> _x (' Radio Djs ',' radios_djs ')); $ args = array ('labels' => $ etiketter, 'hierarchical' => true, 'description' => 'WordPress Radio DJS', 'support' => array ('titel', 'redaktör', 'miniatyrbild') , 'taxonomies' => array ('category', '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' => 'post'); register_post_type ('radios_djs', $ args); För denna handledning använder vi formaterade bilder för schemat. Därför lägger vi till miniatyrfunktionen för WordPress-inlägget.
om (function_exists ('add_theme_support')) add_theme_support ('post thumbnails'); set_post_thumbnail_size (150, 150, true); add_image_size ('dj-pic', 260, 160); Observera att vi har lagt till funktionen add_image_size och några parametrar. Vi använder miniatyrbildstorleken på 260x160 för vårt slutresultat.
Precis som föregående steg kommer vi att skapa en nästa posttyp med samma metod och helt enkelt ändra några namn och variabler.
// Registrera Schema Posttyp add_action ('init', 'register_my_dj_schedule'); funktionsregister_my_dj_schedule () $ etiketter = array ('name' => _x ('Dj Schedule', 'dj_schedule'), 'singular_name' => _x ('Dj Schedule', 'dj_schedule'), 'add_new' => _x ('Lägg till ny', 'dj_schedule'), 'add_new_item' => _x ('Lägg till ny schema', 'dj_schedule'), 'edit_item' => _x ('Redigera Dj Schedule', 'dj_schedule'), 'new_item' => _x ('New Dj Schedule', 'dj_schedule'), 'view_item' => _x ('Visa Dj Schedule', 'dj_schedule'), 'search_items' => _x ('Sök Dj Schedule', 'dj_schedule') , 'not_found' => _x ('Ingen dj-schema hittades', 'dj_schedule'), 'not_found_in_trash' => _x ('Inget djschema hittat i papperskorg', 'dj_schedule'), 'parent_item_colon' => _x Dj Schema: ',' dj_schedule '),' menu_name '=> _x (' Dj Schedule ',' dj_schedule ')); $ args = array ('labels' => $ etiketter, 'hierarchical' => true, 'description' => 'WordPress DJ Schema', 'support' => array ('titel', 'redaktör', 'miniatyrbild') , 'taxonomies' => array ('category', 'dj_schedule'), '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' => 'post'); register_post_type ('dj_schedule', $ args); Denna handledning kommer inte att förklara alla aspekter av att skapa anpassade metaboxer, men vi kommer att markera den viktigaste. Med det sagt börjar vi med att ringa två add_action krokar för våra metaboxer.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); I du är intresserad av att lära dig mer om anpassade meta-lådor. Det här är en bra läsning: Hur man skapar anpassade WordPress Write / Meta Boxes
Funktionen rschedule_box som tidigare nämndes i kroken, kommer att registrera en grupp metaboxer till vår postredigeringsskärm. Vi kommer att använda dessa metaboxer på vår schemaläggningssida.
funktion rschedule_box () add_meta_box ('time_slot_id', __ ('Time Slots', 'time_slot_text'), 'radio_time_slots', 'dj_schedule'); add_meta_box ('dj_select_id', __ ('Välj DJ', 'dj_select_text'), 'radio_get_dj_select_box', 'dj_schedule', 'sida'); 
I det här steget skapar vi en funktion som genererar en markerad lista på vår skärm. Den här listan visar alla DJs / värdar som läggs till i vår anpassade posttyp, som vi skapade i steg 1. Den här funktionen kommer att fråga efter posttypen och returnera objekten som en array, då slår vi om arrayen och blandar den med vissa HTML. På så sätt kan vi hänvisa till DJ-post-ID, vilket vi behöver för att generera vår produktion senare.
funktion radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); eko " '; $ args = array ('post_type' => 'radios_djs'); $ loop = ny WP_Query ($ args); eko "'; 
Nästa funktion är vår funktion som visar veckodagar och alternativ för att välja den tid då showen kommer att vara live. För att vi ska få veckodagen ska vi skapa en matris.
$ days = array ('sun' => 'söndag', 'mon' => 'måndag', 'tue' => 'tisdag', 'wed' => 'onsdag', 'thu' => 'torsdag' 'fri' => 'fredag', 'satt' => 'lördag'); Nu är det gjort, låt oss skapa vår tidslucka funktion. Lägg till följande kod i din fil.
/ * Skriver ut innehållet i fältet * / funktionen radio_time_slots ($ post) global $ days; // Använd nonce för verifiering wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ dagar som $ key => $ värde) $ 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); // Sluttid eko "'$ Värde.'
'; eko " '; eko "'; eko " '; eko "'; eko "
'; Som du kommer märka hänvisade vi till vårt antal dagar genom att använda globala $ dagar. Vi kunde ha placerat det inuti funktionen men vi kommer att referera det ibland, så vi lämnar det på utsidan. Titta också på hur mängden dagar används, vi har valt att slinga några valda fält med dagarna, så vi borde ha flera valda fält för de 7 dagarna i veckan. Variablerna $ selected_start och $ selected_end använd WordPress-funktionen get_post_meta, för att få det aktuella valda värdet för vår lista. Vi använder oss också strategiskt av nyckel- av vårt sortiment i vår lista för att namnge vårt formulärfält, etikett och få vårt valda värde. När PHP tolkar fältnamnet ser det ut som det här schdule_dj igång-sun var Sol kommer att ändras enligt dagens dag i slingan. Detta kommer att vara ganska användbart för oss i andra delar av handledningen. Slutligen kommer du att inse att vi har refererat till funktionen schedule_time_select, som vi inte har skapat ännu. Låt oss skapa den funktionen nu.
funktion schedule_time_select ($ selected) $ start = 8 * 60 + 0; $ end = 24 * 60 + 0; eko "'; // Standardvärde för ($ 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 '';
Denna funktion kommer att generera alternativen för vår väljlista. Varje alternativ ökar med 15 minuter och baseras på 24-timmarssystemet. För det första alternativet sätter vi ett värde på 0 för de dagar som vi vill försumma. Inom slingan finns en liten om uttalande som kontrollerar värdet som skickas från vår tidsfunktion för att bestämma om alternativet ska ställas in på valda.
Slutligen är det dags att spara alla våra metaboxuppgifter. WordPress har ett mycket enkelt och rakt sätt att spara dessa alternativ men vi kommer att göra det mer dynamiskt. Lägg till följande kod i din fil.
// Spara Metadata funktion dj_schedule_save_postdata ($ post_id) om (definierad ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnera; om (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) returnera; om ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) returnera; annars om (! current_user_can ('edit_post', $ post_id)) returnera; om (isset ($ _POST ['dj_id'])) update_post_meta ($ post_id, 'dj_id', esc_attr ($ _POST ['dj_id'])); globala $ dagar $ $ $ $ _POST ['schdule_dj-start -'. $ Key])); if (isset ($ _POST ['schdule_dj-end -'. $ key])) update_post_meta ($ post_id, 'schdule_dj-end -'. $ nyckel, esc_attr ($ _POST ['schdule_dj-end -'. $ nyckel ])); Återigen ser du användbarheten av vår globala dagvariabel. I den här funktionen går vi igenom varje dag och vi sparar våra alternativ från vårt väljfält genom att ändra namnet som dagarna går igenom.
Wow! Om du fortfarande är med mig, låt oss sätta alla dessa koder till jobbet, ska vi? OK bra! Nedan visas hur vi går igenom varje schema som vi skapade och placerar i divs. Lägg till den lite koden och låt oss bryta ner den.
funktion show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = ny WP_Query ($ args); foreach ($ loop-> inlägg som $ item): $ html. = ''; returnera $ 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 ($ dagar som $ key => $ värde) $ start = get_post_meta ($ item-> ID, 'schdule_dj-start -'. $ key, true); $ end = get_post_meta ($ item-> ID, 'schdule_dj-end -'. $ key, true); om ($ start <> 0) $ html. = ''. $ Value. ". $ Start .'- ' $ slut.''; $ html. = '
För det första gör vi en slinga för vår anpassade posttyp dj_schedule, skapa en div och lista titeln. Medan vi är inne i diven hämtar vi det DJ-ID som vi lade till i admin med hjälp av get_post_meta fungera. Då använder vi samma ID och kallar WordPress-funktionen get_post för värdena till den posten och tilldela dem en variabel som vi sedan använder för att få DJ: s namn och foto.
Direkt under vår DJ har vi vår dagslinga som slingrar igenom varje dag och gör en check för att se om någon starttid finns för den dagen. Om de finns existerar vi start- och sluttid i en div.
Vi kan göra många saker för att lägga till schemat på en sida, men för den här handledningen använder vi helt enkelt en kortnummer. Så, med bara en rad kod, kommer vi att skapa en kort kod som vi kan ringa lägga till på en sida och voila! Vi har ett fungerande radioprogram!
add_shortcode ('show_schedule', 'show_schedule'); Detta är den första fasen för att lägga till fler bra funktioner på din WP-radiosida. Jag har valt någon enkel styling för layouten, du kan lägga till dessa stilar till din style.css fil. I en annan handledning kommer jag att förklara hur man skapar en trevlig live stream popup med nuvarande show, DJ och radio spelare.
.scheduleBox bakgrundsfärg: # 333333; border: # 000000 1px solid; färg: #fafafa; flyta till vänster; marginal-vänster: 10px; höjd: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; border-bottom: # 000000 1px solid; .scheduleBox: svep bakgrundsfärg: # 000; border: # 000000 1px solid; färg: # FFCC00; flyta till vänster; marginal-vänster: 10px; .scheduleBox h3: svävar färg: # FF9900; .scheduleBox #time: hover background: # 333333; border-bottom: # 000000 1px solid;
Din feedback är mycket uppskattad. Låt mig veta vad du tycker i kommentarerna nedan. Lycklig kodning!
