Share
Vaak worden veel radiostations gebouwd met behulp van WordPress, maar velen halen niet het ware potentieel om een echt online radiostation te creëren. Deze tutorial laat zien hoe je van een radio-website een volledig functionele DJ-lijst van een radiostation kunt maken met een handig radioplan voor aanbevolen shows.
Voor onze online radiowebsite zullen we enkele DJ's / hosts bevatten die in de ether spelen. We zullen een aangepast berichttype voor hen maken, waar we een foto, biografie en andere nuttige informatie kunnen toevoegen. We zullen ook een showschema maken met het aangepaste WordPress-berichttype opnieuw. Gemengd met een aantal aangepaste metaboxen, maken we het showbeheer eenvoudig te beheren.
Om te voorkomen dat bestanden vol staan met code, scheiden we onze fragmenten en gebruiken we de PHP-functie omvatten, we zullen ze opnemen in ons bestand. Open je functions.php bestand, bevindt zich in uw huidige themamap en voegt het volgende fragment toe:
omvatten (schedule.php);
Maak na voltooiing een nieuw bestand met de naam schedule.php, dan voegen we onze functies toe om ons nieuwe berichttype te registreren.
Probeer dit aangepaste paginatype voor meer informatie over aangepaste berichttypen
Accentsconagua
// Registreer DJ's Post Type 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 ('Voeg nieuw toe', 'radios_djs'), 'add_new_item' => _x ('Voeg nieuwe Dj toe', 'radios_djs'), 'edit_item' => _x ('Bewerk Dj', 'radios_djs'), 'new_item' = > _x ('New Dj', 'radios_djs'), 'view_item' => _x ('View Dj', 'radios_djs'), 'search_items' => _x ('Search Dj', 'radios_djs'), 'not_found' => _x ('No dj found', 'radios_djs'), 'not_found_in_trash' => _x ('Geen dj gevonden in Trash', 'radios_djs'), 'parent_item_colon' => _x ('Ouder Dj:', 'radios_djs '),' menu_name '=> _x (' Radio Dj's ',' radios_djs ')); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WordPress Radio DJS', 'supports' => array ('title', 'editor', 'thumbnail') , 'taxonomieën' => array ('categorie', '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); Voor deze zelfstudie gebruiken we opgemaakte afbeeldingen voor het schema. Daarom gaan we de functie WordPress thumbnail toevoegen.
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); Merk op dat we de functie hebben toegevoegd add_image_size en enkele parameters. We gebruiken de postminiatuurgrootte van 260x160 voor ons eindresultaat.
Net als de vorige stap, gaan we een volgend berichttype maken met dezelfde methode en eenvoudig enkele namen en variabelen wijzigen.
// Registreren Schema Berichttype add_action ('init', 'register_my_dj_schedule'); function register_my_dj_schedule () $ labels = array ('naam' => _x ('Dj Schedule', 'dj_schedule'), 'singular_name' => _x ('Dj Schedule', 'dj_schedule'), 'add_new' => _x ('Nieuw toevoegen', 'dj_schedule'), 'add_new_item' => _x ('Nieuw schema toevoegen', 'dj_schedule'), 'edit_item' => _x ('Dj-schema bewerken', 'dj_schedule'), 'nieuw_item' => _x ('New Dj Schedule', 'dj_schedule'), 'view_item' => _x ('View Dj Schedule', 'dj_schedule'), 'search_items' => _x ('Search Dj Schedule', 'dj_schedule') , 'not_found' => _x ('Geen dj-schema gevonden', 'dj_schedule'), 'not_found_in_trash' => _x ('Geen dj-schema gevonden in Prullenbak', '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 ('title', 'editor', 'thumbnail') , 'taxonomieën' => array ('categorie', '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); Deze tutorial zal niet elk aspect van het maken van aangepaste metaboxen uitleggen, maar we zullen de meest significante benadrukken. Met dat gezegd, zullen we beginnen met twee te bellen add_action haken voor onze metaboxen.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); Als je meer wilt weten over aangepaste metaboxen. Dit is een geweldige manier om te lezen: Hoe maak je aangepaste WordPress Write / Meta Boxes
De functie rschedule_box die eerder in de haak werd vermeld, registreert een groep metaboxen in ons berichtbewerkingsscherm. We zullen deze metaboxen gebruiken op onze pagina Planning bewerken.
functie rschedule_box () add_meta_box ('time_slot_id', __ ('Time Slots', 'time_slot_text'), 'radio_time_slots', 'dj_schedule'); add_meta_box ('dj_select_id', __ ('Selecteer DJ', 'dj_select_text'), 'radio_get_dj_select_box', 'dj_schedule', 'side'); 
In deze stap maken we een functie die een selectielijst genereert op ons scherm. In deze lijst worden alle DJ's / Hosts weergegeven die zijn toegevoegd aan ons aangepaste berichttype, dat we in stap 1 hebben gemaakt. Deze functie zal het berichttype opvragen en de items als een array retourneren, dan zullen we de array doorlopen en het met wat mixen HTML. Op deze manier kunnen we verwijzen naar de DJ-post-ID, die we later nodig zullen hebben om onze uitvoer te genereren.
function radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); echo ' '; $ args = array ('post_type' => 'radios_djs'); $ loop = new WP_Query ($ args); echo ''; 
De volgende functie is onze functie die de dagen van de week weergeeft en opties om het tijdstip te kiezen waarop de show live zal zijn. Om ervoor te zorgen dat we de dagen van de week krijgen, maken we een array.
$ days = array ('sun' => 'Sunday', 'mon' => 'Monday', 'tue' => 'Tuesday', 'wed' => 'Wednesday', 'thu' => 'Thursday', 'fri' => 'Vrijdag', 'zat' => 'Zaterdag'); Nu dat is gebeurd, laten we onze tijdslotfunctie maken. Voeg de volgende code toe aan uw bestand.
/ * Drukt de inhoud van het vak af * / function radio_time_slots ($ post) global $ days; // Gebruik nonce voor verificatie wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ dagen als $ sleutel => $ waarde) $ selected_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ key, true); // Starttijd $ selected_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Key, true); // Eindtijd echo ''$ Value.'
'; echo ' '; echo ''; echo ' '; echo ''; echo '
'; Zoals u zult opmerken, hebben we onze reeks dagen gebruikt door te gebruiken globale $ dagen. We hadden het in de functie kunnen plaatsen, maar we zullen er af en toe naar verwijzen, dus laten we het aan de buitenkant. Kijk ook hoe de reeks dagen wordt gebruikt, we hebben ervoor gekozen om enkele selectievelden met de dagen te herhalen, dus we moeten verschillende selectievelden hebben voor de 7 dagen van de week. De variabelen $ selected_start en $ selected_end gebruik de WordPress-functie get_post_meta, om de momenteel geselecteerde waarde voor onze lijst te krijgen. We gebruiken ook strategisch de sleutel van onze array in onze lijst om ons formulierveld, label en onze geselecteerde waarde te noemen. Wanneer PHP de veldnaam interpreteert, ziet dit er ongeveer zo uit schdule_dj-start-sun waar zon wordt gewijzigd volgens de huidige dag in de lus. Dit zal heel nuttig voor ons zijn in andere delen van de tutorial. Ten slotte beseft u dat we naar de functie hebben verwezen schedule_time_select, die we nog niet hebben gemaakt. Laten we die functie nu maken.
functie schedule_time_select ($ selected) $ start = 8 * 60 + 0; $ einde = 24 * 60 + 0; echo ''; // Standaardwaarde voor ($ 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 '';
Deze functie genereert de opties voor onze selectielijst. Elke optie wordt met 15 minuten verhoogd en is gebaseerd op het 24-uurssysteem. Voor de eerste optie hebben we een waarde ingesteld van 0 voor de dagen die we willen verwaarlozen. Binnen de lus is er een kleine als verklaring die de waarde controleert die is verzonden via onze radioklokfunctie om te bepalen of de optie moet worden ingesteld op geselecteerd.
Eindelijk is het tijd om al onze metabox-informatie te bewaren. WordPress biedt een zeer eenvoudige en eenvoudige manier om deze opties op te slaan, maar we gaan het dynamischer maken. Voeg het volgende fragment toe aan uw bestand.
// Save Meta Data-functie dj_schedule_save_postdata ($ post_id) if (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) retour; als (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) teruggaat; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) keren terug; else if (! current_user_can ('edit_post', $ post_id)) terug; if (isset ($ _POST ['dj_id'])) update_post_meta ($ post_id, 'dj_id', esc_attr ($ _POST ['dj_id'])); globale $ dagen; foreach ($ dagen als $ sleutel => $ waarde) if (isset ($ _POST ['schdule_dj-start -'. $ sleutel])) update_post_meta ($ post_id, 'schdule_dj-start -'. $ key, esc_attr ( $ _POST ['schdule_dj-start -'. $ Key])); if (isset ($ _POST ['schdule_dj-end -'. $ key])) update_post_meta ($ post_id, 'schdule_dj-end -'. $ key, esc_attr ($ _POST ['schdule_dj-end -'. $ key ])); Nogmaals, u ziet het nut van onze globale dagen variabele. In deze functie doorlopen we elke dag en we bewaren onze opties uit ons selectieveld door de naam te wijzigen naarmate de dagen doorlopen.
Wauw! Als je nog steeds bij me bent, laten we dan al deze codes gebruiken, of niet? Oké, geweldig! Het onderstaande fragment laat zien hoe we door elk schema gaan dat we hebben gemaakt en in divs plaatsen. Voeg dat stukje code toe en laten we het opsplitsen.
function show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = new WP_Query ($ args); foreach ($ loop-> posts als $ 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 ($ dagen als $ sleutel => $ waarde) $ 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. = ''. $ Value. ". $ Starten .'- ' $ einde.''; $ html. = '
Eerst maken we een lus voor ons aangepaste berichttype dj_schedule, maak een div aan en geef de titel op. Terwijl we in de div zitten, halen we de DJ-ID op die we in de admin hebben toegevoegd met behulp van de get_post_meta functie. Vervolgens gebruiken we dezelfde ID en roepen we de WordPress-functie aan get_post voor de waarden van die post en hen toewijzen aan een variabele die we vervolgens gebruiken om de naam en foto van de DJ te krijgen.
Direct onder onze DJ hebben we onze daglus die elke dag doorloopt terwijl we controleren of er een starttijd voor die dag bestaat. Als ze bestaan, voeren we de begin- en eindtijd uit in een div.
We kunnen veel dingen doen om het schema aan een pagina toe te voegen, maar voor deze zelfstudie gebruiken we eenvoudig een shortcode. Met slechts één regel code maken we dus een korte code die we op elke pagina kunnen toevoegen en voila! We hebben een werkend radioprogramma!
add_shortcode ('show_schedule', 'show_schedule'); Dit is de eerste fase van het toevoegen van meer geweldige functies aan uw WP-radiowebsite. Ik heb gekozen voor een eenvoudige stijl voor de lay-out, je kunt deze stijlen aan je toevoegen style.css het dossier. In een andere tutorial zal ik uitleggen hoe je een mooie live stream pop-up kunt maken met de huidige show, DJ en radio-speler.
.scheduleBox background-colour: # 333333; border: # 000000 1px solide; kleur: #fafafa; zweven: links; marge links: 10 px; hoogte: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; border-bottom: # 000000 1px solid; .scheduleBox: hover background-colour: # 000; border: # 000000 1px solide; kleur: # FFCC00; zweven: links; marge links: 10 px; .scheduleBox h3: hover color: # FF9900; .scheduleBox #time: hover background: # 333333; border-bottom: # 000000 1px solid;
Uw feedback wordt zeer op prijs gesteld. Laat me weten wat je denkt in de reacties hieronder. Happy codering!
