Oft genug werden viele Radiosender mit WordPress erstellt, aber viele nutzen nicht das wahre Potenzial eines echten Online-Radiosenders. In diesem Tutorial wird gezeigt, wie Sie eine Radio-Website in ein voll funktionsfähiges DJ-Verzeichnis mit Radiostationen verwandeln können.
Einführung Für unsere Online-Radio-Website werden wir einige DJs / Hosts präsentieren, die im Radio spielen. Wir erstellen für sie einen benutzerdefinierten Beitragstyp, in dem wir ein Bild, eine Biografie und andere nützliche Informationen hinzufügen können. Wir erstellen erneut einen Show-Zeitplan mit dem benutzerdefinierten WordPress-Post-Typ. In Kombination mit einigen benutzerdefinierten Metaboxen wird die Verwaltung der Show vereinfacht.
Schritt 1 Erstellen eines benutzerdefinierten DJ / Host-Beitragstyps Um zu vermeiden, dass Dateien mit Code überladen werden, trennen wir unsere Snippets und verwenden die PHP-Funktion umfassen, wir werden sie in unsere Datei aufnehmen. Öffne dein Functions.php Datei, die sich in Ihrem aktuellen Designordner befindet, und fügen Sie das folgende Snippet hinzu:
include ('schedule.php'); Erstellen Sie anschließend eine neue Datei mit dem Namen schedule.php , Dann fügen wir unsere Funktionen hinzu, um unseren neuen Beitragstyp zu registrieren.
Weitere Informationen zu benutzerdefinierten Beitragstypen finden Sie auf dieser Seite zum benutzerdefinierten Beitragstyp
// DJs registrieren Beitragstyp 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 ('Add New', 'radios_djs'), 'add_new_item' => _x ('Add New Dj', 'radios_djs'), 'edit_item' => _x ('Edit 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 ('Kein DJ gefunden', 'radios_djs'), 'not_found_in_trash' => _x ('Kein DJ im Papierkorb gefunden'), 'radios_djs'), 'parent_item_colon' => _x ('Eltern-DJ:', 'radios_djs.) '),' menu_name '=> _x (' Radio Djs ',' Radios_djs ')); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WordPress Radio DJS', 'unterstützt' => 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); Post-Miniaturansichten hinzufügen Für dieses Lernprogramm verwenden wir formatierte Bilder für den Zeitplan. Deshalb fügen wir die WordPress-Post-Thumbnail-Funktion hinzu.
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); Beachten Sie, dass wir die Funktion hinzugefügt haben add_image_size und einige Parameter. Für unser Endergebnis verwenden wir die Post-Miniaturgröße von 260 x 160.
Schritt 2 Erstellen eines benutzerdefinierten Zeitplans für einen Zeitplan Genau wie im vorherigen Schritt werden wir einen nächsten Beitragstyp erstellen, der dieselbe Methode verwendet und einige Namen und Variablen einfach ändert.
// Registriere Zeitplan 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 ('Add New', 'dj_schedule'), 'add_new_item' => _x ('Add new Schedule', 'dj_schedule'), 'edit_item' => _x ('Edit Dj Schedule', 'dj_schedule'), 'new_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 ('Kein DJ-Zeitplan gefunden', 'dj_schedule'), 'not_found_in_trash' => _x ('Kein DJ-Zeitplan im Papierkorb gefunden'), 'dj_schedule'), 'parent_item_colon' => _x ('Elternteil Dj Schedule: ',' dj_schedule '),' menu_name '=> _x (' Dj Schedule ',' dj_schedule ')); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WordPress DJ Schedule', 'unterstützt' => array ('title', 'editor', 'thumbnail') , 'taxonomies' => array ('category', '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); Schritt 3 Hinzufügen benutzerdefinierter Meta-Boxen In diesem Lernprogramm wird nicht jeder Aspekt der Erstellung benutzerdefinierter Metaboxen erläutert. Wir werden jedoch die wichtigsten hervorheben. Nachdem dies gesagt wurde, rufen wir zuerst zwei an add_action Haken für unsere Metaboxen.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); Sie möchten mehr über benutzerdefinierte Meta-Boxen erfahren? Dies ist eine großartige Lektüre: Erstellen benutzerdefinierter WordPress-Schreib- / Metaboxen
Fügen Sie die Meta-Boxen hinzu Die Funktion rschedule_box die zuvor im Hook erwähnt wurde, registriert eine Gruppe von Metaboxen in unserem Post-Edit-Bildschirm. Wir werden diese Metaboxen auf unserer Seite zum Bearbeiten von Terminen verwenden.
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', __ ('Select DJ', 'dj_select_text'), 'radio_get_dj_select_box', 'dj_schedule', 'side'); Erstellen einer DJ-Auswahlliste In diesem Schritt erstellen wir eine Funktion, die eine Auswahlliste auf unserem Bildschirm generiert. In dieser Liste werden alle DJs / Hosts angezeigt, die zu unserem benutzerdefinierten Beitragstyp hinzugefügt wurden, die wir in Schritt 1 erstellt haben. Diese Funktion fragt den Beitragstyp ab und gibt die Elemente als Array zurück. Anschließend durchlaufen wir das Array und mischen es mit einigen HTML. Auf diese Weise können wir auf die DJ-Post-ID verweisen, die wir später für die Erzeugung unserer Ausgabe benötigen.
Funktion radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); Echo ''; _e ("DJ / Host", "dj_id"); Echo ' '; $ args = array ('post_type' => 'radios_djs'); $ loop = new WP_Query ($ args); Echo ''; foreach ($ loop-> posts als $ dj) if ($ dj-> ID == get_post_meta ($ post-> ID, 'dj_id', true)) $ select = 'selected'; else $ select = "; echo ' Die nächste Funktion ist unsere Funktion, die die Wochentage und Optionen zur Auswahl der Uhrzeit anzeigt, zu der die Show live sein wird. Damit wir die Wochentage erhalten, erstellen wir ein Array.
$ days = array ('sonne' => 'Sonntag', 'mon' => 'Montag', 'tue' => 'Tuesday', 'wed' => 'Wednesday', 'thu' => 'Thursday', 'Fr' => 'Freitag', 'Sat' => 'Samstag'); Jetzt haben wir unsere Zeitfensterfunktion erstellt. Fügen Sie Ihrer Datei den folgenden Code hinzu.
/ * Gibt den Inhalt der Box aus * / function radio_time_slots ($ post) global $ days; // Nonce zur Verifizierung verwenden wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ days as $ key => $ value) $ selected_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ key, true); // Startzeit $ selected_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Key, true); // Endzeit-Echo ''. $ value.' '; _e ("Start", 'schdule_dj-start -'. $ key); Echo ' '; Echo ''; schedule_time_select ($ selected_start); Echo ' '; Echo ''; _e ("End", 'schdule_dj-end -'. $ key); Echo ' '; Echo ''; schedule_time_select ($ selected_end); Echo ' '; Echo ' Wie Sie feststellen werden, haben wir auf unsere Reihe von Tagen verwiesen globale $ tage. Wir hätten es in die Funktion einfügen können, aber wir werden gelegentlich darauf verweisen, also lassen wir es außen liegen. Schauen Sie sich auch an, wie die Anordnung der Tage verwendet wird. Wir haben uns dazu entschieden, einige Auswahlfelder anhand der Tage zu durchlaufen. Daher sollten wir einige Auswahlfelder für die 7 Tage der Woche haben. Die Variablen $ selected_start und $ selected_end Verwenden Sie die WordPress-Funktion get_post_meta, um den aktuell ausgewählten Wert für unsere Liste zu erhalten. Wir nutzen auch strategisch die Schlüssel unseres Arrays in unserer Liste, um unser Formularfeld zu benennen, zu beschriften und unseren ausgewählten Wert zu erhalten. Wenn PHP den Feldnamen interpretiert, sieht es ähnlich aus schdule_dj-start-sun woher Sonne wird entsprechend dem aktuellen Tag in der Schleife geändert. Dies ist in anderen Teilen des Tutorials für uns sehr nützlich. Schließlich werden Sie feststellen, dass wir auf die Funktion verwiesen haben schedule_time_select, dass wir noch nicht geschaffen haben. Lassen Sie uns diese Funktion jetzt erstellen.
Funktion schedule_time_select ($ selected) $ start = 8 * 60 + 0; $ end = 24 * 60 + 0; Echo 'N / A '; // Standardwert 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 ''.sprintf ('% 02d:% 02d ', $ Stunde, $ Minute).' '; Diese Funktion generiert die Optionen für unsere Auswahlliste. Jede Option wird um 15 Minuten erhöht und basiert auf dem 24-Stunden-System. Für die erste Option setzen wir einen Wert von 0 für die Tage, die wir vernachlässigen möchten. Innerhalb der Schleife gibt es eine kleine ob Diese Anweisung prüft den von unserer Funkzeitschlitzfunktion gesendeten Wert, um zu bestimmen, ob die Option ausgewählt sein soll.
Schritt 3 Speichern der Meta-Boxen Schließlich ist es an der Zeit, alle Metabox-Informationen zu speichern. WordPress bietet eine sehr einfache und unkomplizierte Möglichkeit, diese Optionen zu speichern, aber wir werden es dynamischer gestalten. Fügen Sie Ihrer Datei den folgenden Ausschnitt hinzu.
// Save Meta Data-Funktion dj_schedule_save_postdata ($ post_id) if (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) return; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return; else if (! current_user_can ('edit_post', $ post_id)) return; if (isset ($ _POST ['dj_id'])) update_post_meta ($ post_id, 'dj_id', esc_attr ($ _POST ['dj_id'])); globale $ days; foreach ($ days as $ key => $ value) if (isset ($ _POST ['schdule_dj-start -'. $ key])) 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 ])); Wieder einmal sehen Sie die Nützlichkeit unserer globalen Tage variabel. In dieser Funktion durchlaufen wir jeden Tag, und wir speichern unsere Optionen aus unserem Auswahlfeld, indem Sie den Namen ändern, während die Tage durchlaufen.
Schritt 3 Speichern der Meta-Boxen Beeindruckend! Wenn du noch bei mir bist, lass uns all diese Codes einsetzen, oder? Ok, großartig! Das folgende Snippet zeigt, wie wir jeden erstellten Zeitplan durchlaufen und in divs platzieren. Fügen Sie diesen Code hinzu und lassen Sie uns ihn aufteilen.
Funktion show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = new WP_Query ($ args); foreach ($ loop-> veröffentlicht als $ item): $ 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. = '
'. $ value. ". $ start.'-'. $ end. '
'; $ html. = '
'; endforeach; $ html. = '
'; $ html. = '
Erstens erstellen wir eine Schleife für unseren benutzerdefinierten Posttyp dj_schedule, Erstellen Sie ein Div und listen Sie den Titel auf. Im Div holen wir die im Admin hinzugefügte DJ-ID mit der get_post_meta Funktion. Dann verwenden wir dieselbe ID und rufen die WordPress-Funktion auf get_post für die Werte dieses Beitrags und ordnen Sie sie einer Variablen zu, mit der wir den Namen und das Foto des DJs erhalten.
Holen Sie sich die Zeitfenster Direkt unter unserem DJ befindet sich unsere Tagesschleife, die jeden Tag durchläuft, während Sie überprüfen, ob für diesen Tag eine Startzeit vorhanden ist. Wenn sie existieren, geben wir die Start- und Endzeit in ein div aus.
Hinzufügen eines Zeitplans zu einer Seite Wir können den Zeitplan auf viele Arten hinzufügen, aber für dieses Tutorial verwenden wir einfach einen Kurzcode. Mit nur einer Codezeile erstellen wir also einen Kurzcode, den wir add auf jeder Seite und in voila! Aufrufen können. Wir haben einen funktionsfähigen Radio-Zeitplan!
add_shortcode ('show_schedule', 'show_schedule'); Fazit Dies ist die erste Phase, in der Sie Ihrer WP-Radio-Website weitere großartige Funktionen hinzufügen. Ich habe ein einfaches Styling für das Layout gewählt, Sie können diese Stile zu Ihrem hinzufügen style.css Datei. In einem anderen Tutorial werde ich erklären, wie man ein schönes Live-Stream-Popup mit aktueller Show, DJ und Radio-Player erstellt.
.scheduleBox Hintergrundfarbe: # 333333; Grenze: # 000000 1px fest; Farbe: #fafafa; Schwimmer: links; Rand links: 10px; Höhe: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; Rand unten: # 000000 1px fest; .scheduleBox: hover Hintergrundfarbe: # 000; Grenze: # 000000 1px fest; Farbe: # FFCC00; Schwimmer: links; Rand links: 10px; .scheduleBox h3: hover color: # FF9900; .scheduleBox #time: hover hintergrund: # 333333; Rand unten: # 000000 1px fest; Ihr Feedback wird sehr geschätzt. Lassen Sie mich wissen, was Sie in den Kommentaren unten denken. Glückliche Kodierung!
Share
Accentsconagua
