Share
Bien souvent, de nombreuses stations de radio utilisent WordPress, mais beaucoup n’exploitent pas le véritable potentiel pour créer une véritable station de radio en ligne. Ce tutoriel montrera comment transformer un site Web radio en une liste de DJ de stations de radio entièrement fonctionnelle, avec un programme radiophonique astucieux pour les émissions en vedette..
Pour notre site Web de radio en ligne, nous présenterons des DJ / animateurs qui jouent sur les ondes. Nous allons créer un type de message personnalisé pour eux, où nous pourrons ajouter une photo, une biographie et d'autres informations utiles. Nous allons également créer un programme d’émission en utilisant à nouveau le type de message personnalisé WordPress. En combinaison avec des métaboxes personnalisés, nous allons simplifier l'administration de l'émission..
Pour éviter les fichiers encombrés de code, nous allons séparer nos extraits et en utilisant la fonction PHP comprendre, nous les inclurons dans notre dossier. Ouvrez votre functions.php fichier, situé dans votre dossier de thème actuel et ajoutez l'extrait suivant:
Accentsconagua
include ('schedule.php'); Une fois terminé, créez un nouveau fichier appelé schedule.php, alors nous ajoutons nos fonctions pour enregistrer notre nouveau type de message.
Pour plus d'informations sur les types de publication personnalisés, essayez cette page type de publication personnalisée
// Register DJs 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 ('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 ('Aucun DJ trouvé', 'radios_djs'), 'not_found_in_trash' => _x ('Aucun dj trouvé dans la corbeille', 'radios_djs'), 'parent_item_colon' => _x ('Parent Dj:', 'radios_djs '),' menu_name '=> _x (' Radio Djs ',' radios_djs ')); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WordPress Radio DJS', 'supports' => array ('titre', 'éditeur', 'vignette') , 'taxonomies' => array ('category', 'radios_djs'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'type_capacité' => 'post'); register_post_type ('radios_djs', $ args); Pour ce tutoriel, nous utiliserons des images formatées pour la planification. Par conséquent, nous allons ajouter la fonctionnalité de miniatures de publication WordPress.
if (function_exists ('add_theme_support'))) add_theme_support ('post-vignettes'); set_post_thumbnail_size (150, 150, vrai); add_image_size ('dj-pic', 260, 160); Notez que nous avons ajouté la fonction add_image_size et quelques paramètres. Nous utiliserons la taille de la miniature de publication de 260x160 pour notre résultat final.
Comme à l'étape précédente, nous allons créer un type de message suivant en utilisant la même méthode et en modifiant simplement certains noms et variables..
// Enregistrer la publication du type de message add_action ('init', 'register_my_dj_schedule'); function register_my_dj_schedule () $ labels = array ('name' => _x ('Calendrier Dj', 'dj_schedule'), 'nom_s singulier' => _x ('Calendrier Dj', '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 ('Nouveau calendrier de DJ', 'dj_schedule'), 'view_item' => _x ('Voir le calendrier de Dj', 'dj_schedule'), 'search_items' => _x ('Recherche de programme de DJ', 'dj_schedule') , 'not_found' => _x ('Aucun horaire dj trouvé', 'dj_schedule'), 'not_found_in_trash' => _x ('Aucun horaire dj trouvé dans la corbeille', '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', 'supporte' => array ('titre', 'éditeur', 'vignette') , 'taxonomies' => array ('category', 'dj_schedule'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'type_capacité' => 'post'); register_post_type ('dj_schedule', $ args); Ce tutoriel n'expliquera pas tous les aspects de la création de métabox personnalisés, mais nous en soulignerons les plus importants. Cela dit, nous allons commencer par appeler deux add_action crochets pour nos metaboxes.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); Vous souhaitez en savoir plus sur les boîtes à méta personnalisées. C'est une excellente lecture: Comment créer des boîtes WordPress Write / Meta personnalisées
La fonction rschedule_box qui a été précédemment mentionné dans le crochet, enregistrera un groupe de métaboxes sur notre écran de post-édition. Nous allons utiliser ces métaboxes sur notre page Schedule Edit.
function 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'); 
Dans cette étape, nous créons une fonction qui générera une liste de sélection sur notre écran. Cette liste affiche tous les DJ / hôtes ajoutés à notre type de publication personnalisé, créé à l'étape 1. Cette fonction interroge le type de publication et renvoie les éléments sous forme de tableau. Nous allons ensuite parcourir le tableau et le mélanger avec HTML. De cette façon, nous pouvons référencer l’ID de poste DJ, dont nous aurons besoin pour générer notre sortie plus tard..
fonction radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); écho ' '; $ args = array ('post_type' => 'radios_djs'); $ loop = new WP_Query ($ args); écho ''; 
La fonction suivante est notre fonction qui affichera les jours de la semaine et les options permettant de choisir l’heure à laquelle le spectacle sera en direct. Pour que nous puissions obtenir les jours de la semaine, nous allons créer un tableau.
$ days = array ('sun' => 'Sunday', 'mon' => 'Monday', 'tue' => 'Tuesday', 'wed' => 'Wednesday', 'thu' => 'Thursday', 'fri' => 'vendredi', 'sat' => 'samedi'); Maintenant que c'est fait, créons notre fonction de créneau horaire. Ajoutez le code suivant à votre fichier.
/ * Imprime le contenu de la boîte * / function radio_time_slots ($ post) global $ days; // Utilisez nonce pour la vérification wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ days as $ key => $ value) $ selected_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ key, true); // heure de début $ selected_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Key, true); // heure de fin echo '". $ valeur."
'; écho ' '; écho ''; écho ' '; écho ''; écho '
'; Comme vous le constaterez, nous avons référencé notre éventail de jours en utilisant $ jours globaux. Nous aurions pu le placer à l'intérieur de la fonction mais nous le référencerons de temps en temps, nous allons donc le laisser à l'extérieur. En outre, jetez un coup d’œil à la façon dont le tableau de jours est utilisé. Nous avons choisi de mettre en boucle certains champs sélectionnés à l’aide des jours. Nous devrions donc avoir plusieurs champs sélectionnés pour les 7 jours de la semaine. Les variables $ selected_start et $ selected_end utiliser la fonction WordPress get_post_meta, afin d'obtenir la valeur actuellement sélectionnée pour notre liste. Nous utilisons également stratégiquement le clé de notre tableau dans notre liste pour nommer notre champ de formulaire, étiqueter et obtenir notre valeur sélectionnée. Lorsque PHP interprétera le nom du champ, il ressemblera à ceci schdule_dj-start-sun où Soleil sera changé en fonction du jour actuel dans la boucle. Cela nous sera très utile dans d’autres parties du didacticiel. Enfin, vous vous rendrez compte que nous avons référencé la fonction schedule_time_select, que nous n'avons pas encore créé. Créons cette fonction maintenant.
function schedule_time_select ($ sélectionné) $ start = 8 * 60 + 0; $ end = 24 * 60 + 0; écho ''; // Valeur par défaut pour ($ 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 '';
Cette fonction générera les options pour notre liste de sélection. Chaque option sera incrémentée de 15 minutes et est basée sur le système de 24 heures. Pour la première option, nous définissons une valeur de 0 pour les jours que nous souhaitons négliger. Dans la boucle, il y a un petit si déclaration qui vérifie la valeur envoyée par notre fonction d'intervalle de temps radio pour déterminer si l'option doit être définie sur selected.
Enfin, il est temps de sauvegarder toutes nos informations metabox. WordPress a une manière très simple et directe de sauvegarder ces options mais nous allons le rendre plus dynamique. Ajouter l'extrait suivant à votre fichier.
// Enregistrer la métadonnée, fonction dj_schedule_save_postdata ($ post_id) if (défini ('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'])); global $ 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 ])); Encore une fois, vous voyez l'utilité de notre variable de jours globale. Dans cette fonction, nous parcourons chaque jour et sauvegardons nos options de notre champ de sélection en modifiant le nom au fur et à mesure que les jours défilent..
Hou la la! Si vous êtes toujours avec moi, mettons tous ces codes au travail, allons-nous? D'accord, super! L'extrait ci-dessous montre comment nous allons parcourir chaque programme créé et placé dans des divs. Ajoutez ce morceau de code et décomposons-le.
function show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = new WP_Query ($ args); foreach ($ loop-> posts en tant que $ item): $ html. = ''; return $ html;'; $ html. = ''; fin de chaque $ 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. = '
Tout d'abord, nous faisons une boucle pour notre type de message personnalisé dj_schedule, créer un div et lister le titre. À l’intérieur de la division, nous récupérons l’ID DJ que nous avons ajouté à l’administrateur à l’aide du bouton get_post_meta une fonction. Ensuite, nous utilisons le même identifiant et appelons la fonction WordPress get_post pour les valeurs de ce post et les assigner à une variable que nous utilisons ensuite pour obtenir le nom et la photo du DJ.
Juste en dessous de notre DJ, nous avons notre boucle de jour qui parcourt chaque jour tout en vérifiant si une heure de début existe pour ce jour-là. Si elles existent, nous affichons les heures de début et de fin dans une div.
Nous pouvons faire beaucoup de choses pour ajouter le planning à une page, mais pour ce tutoriel, nous allons simplement utiliser un shortcode. Donc, avec une seule ligne de code, nous allons créer un code court que nous pouvons appeler ajouter sur n’importe quelle page et le tour est joué! Nous avons un horaire de radio qui fonctionne!
add_shortcode ('show_schedule', 'show_schedule'); Il s’agit de la première phase d’ajout de fonctionnalités supplémentaires sur le site Web de votre radio WP. J'ai choisi un style simple pour la mise en page, vous pouvez ajouter ces styles à votre style.css fichier. Dans un autre tutoriel, j'expliquerai comment créer une jolie fenêtre contextuelle en direct avec l'émission en cours, le DJ et le lecteur de radio..
.scheduleBox background-color: # 333333; bordure: # 000000 1px solide; couleur: #fafafa; float: gauche; marge gauche: 10px; hauteur: 100%; .scheduleBox h3 taille de la police: 14px; .scheduleBox #time background: # 666666; border-bottom: # 000000 1px solid; .scheduleBox: hover background-color: # 000; bordure: # 000000 1px solide; couleur: # FFCC00; float: gauche; marge gauche: 10px; .scheduleBox h3: survol color: # FF9900; .scheduleBox #time: hover background: # 333333; border-bottom: # 000000 1px solid;
Vos commentaires sont très appréciés. Faites-moi savoir ce que vous pensez dans les commentaires ci-dessous. Bonne codage!
