Share
Con suficiente frecuencia, muchas estaciones de radio se crean con WordPress, pero muchas no aprovechan el verdadero potencial para crear una verdadera estación de radio en línea. Este tutorial le mostrará cómo puede convertir un sitio web de radio en una lista de DJ de estaciones de radio completamente funcional con un horario de radio ingenioso para los programas destacados.
Para nuestro sitio web de radio en línea, presentaremos algunos DJ / anfitriones que tocan en el aire. Crearemos un tipo de publicación personalizada para ellos, donde podemos agregar una imagen, biografía y otra información útil. También crearemos una programación de shows usando el tipo de publicación personalizada de WordPress nuevamente. Combinados con algunos metaboxes personalizados, vamos a hacer que la administración del programa sea fácil de administrar.
Para evitar archivos saturados de código, separaremos nuestros fragmentos y usaremos la función PHP incluir, Los incluiremos en nuestro archivo. Abre tu funciones.php archivo, ubicado en su carpeta de tema actual y agregue el siguiente fragmento de código:
Accentsconagua
incluye ('schedule.php'); Una vez completado, crea un nuevo archivo llamado schedule.php, Luego agregamos nuestras funciones para registrar nuestro nuevo tipo de publicación..
Para obtener más información sobre los tipos de publicaciones personalizadas, intente esta página tipo de publicación personalizada
// Registrar tipo de publicación de DJs 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 ('No dj found', 'radios_djs'), 'not_found_in_trash' => _x ('No dj found in Trash', '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', 'apoya' => 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, 'capacity_type' => 'post'); register_post_type ('radios_djs', $ args); Para este tutorial, usaremos imágenes formateadas para la programación. Por lo tanto, vamos a agregar la funcionalidad de miniatura de publicación de WordPress.
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); Observa que hemos añadido la función. add_image_size y algunos parámetros. Usaremos el tamaño de miniatura de publicación de 260x160 para nuestro resultado final.
Al igual que en el paso anterior, vamos a crear un tipo de publicación siguiente utilizando el mismo método y simplemente cambiando algunos nombres y variables.
// Tipo de publicación del programa de registro 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 ('No se encontró la programación de dj', 'dj_schedule'), 'not_found_in_trash' => _x ('No se encontró la programación de dj en la Papelera', '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', 'apoya' => 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, 'capacity_type' => 'post'); register_post_type ('dj_schedule', $ args); Este tutorial no explica todos los aspectos de la creación de metabox personalizados, pero destacaremos los más significativos. Dicho esto, comenzaremos llamando a dos add_action ganchos para nuestros metaboxes.
add_action ('add_meta_boxes', 'rschedule_box'); add_action ('save_post', 'dj_schedule_save_postdata'); En usted está interesado en aprender más acerca de meta cajas personalizadas. Esta es una gran lectura: Cómo crear WordPress Write / Meta Boxes personalizados
La función rschedule_box que se mencionó anteriormente en el gancho, registrará un grupo de metaboxes en nuestra pantalla de edición posterior. Usaremos estos metaboxes en nuestra página de Edición de Programación.
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'); 
En este paso, creamos una función que generará una lista de selección en nuestra pantalla. Esta lista mostrará todos los DJ / anfitriones agregados a nuestro tipo de publicación personalizada, que creamos en el Paso 1. Esta función consultará el tipo de publicación y devolverá los elementos como una matriz, luego realizaremos un bucle en la matriz y los mezclaremos con algunos HTML De esta manera, podemos hacer referencia a la ID de publicación de DJ, que necesitaremos para generar nuestra salida más adelante.
function radio_get_dj_select_box ($ post) wp_nonce_field ('radio_schedule', 'schedule_noncename'); eco ' '; $ args = array ('post_type' => 'radios_djs'); $ loop = new WP_Query ($ args); eco ''; 
La siguiente función es nuestra función que mostrará los días de la semana y las opciones para elegir la hora en que el programa estará en vivo. Para que podamos obtener los días de la semana, crearemos una matriz.
$ days = array ('sun' => 'Sunday', 'mon' => 'Monday', 'tue' => 'Tuesday', 'wed' => 'Wednesday', 'thu' => 'Thursday', 'fri' => 'Friday', 'sat' => 'Saturday'); Ahora que está hecho, vamos a crear nuestra función de ranura de tiempo. Agregue el siguiente código a su archivo.
/ * Imprime el contenido de la caja * / function radio_time_slots ($ post) global $ days; // Usar nonce para verificación wp_nonce_field ('radio_schedule', 'schedule_noncename'); foreach ($ days as $ key => $ value) $ selected_start = get_post_meta ($ post-> ID, 'schdule_dj-start -'. $ key, true); // Hora de inicio $ selected_end = get_post_meta ($ post-> ID, 'schdule_dj-end -'. $ Key, true); // Hora de finalización echo ''. $ valor'.
'; eco ' '; eco ''; eco ' '; eco ''; eco '
'; Como se dará cuenta, hicimos referencia a nuestro conjunto de días utilizando $ días globales. Podríamos haberlo colocado dentro de la función, pero lo estaremos haciendo referencia ocasionalmente, así que lo dejaremos afuera. Además, eche un vistazo a la forma en que se usa la matriz de días, hemos optado por hacer un ciclo de algunos campos de selección utilizando los días, por lo que deberíamos tener varios campos de selección para los 7 días de la semana. Las variables $ selected_start y $ selected_end utilizar la función de WordPress get_post_meta, con el fin de obtener el valor seleccionado actualmente para nuestra lista. También estamos utilizando estratégicamente llave de nuestra matriz en nuestra lista para nombrar nuestro campo de formulario, etiquetar y obtener nuestro valor seleccionado. Cuando PHP interpreta el nombre del campo, se verá similar a este schdule_dj-start-sun dónde Dom Se cambiará según el día actual en el bucle. Esto nos será muy útil en otras partes del tutorial. Por último, te darás cuenta de que hemos hecho referencia a la función. schedule_time_select, que aún no hemos creado. Vamos a crear esa función ahora.
función schedule_time_select ($ seleccionado) $ inicio = 8 * 60 + 0; $ end = 24 * 60 + 0; eco ''; // Valor predeterminado para ($ 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 '';
Esta función generará las opciones para nuestra lista de selección. Cada opción se incrementará en 15 minutos y se basa en el sistema de 24 horas. Para la primera opción, establecemos un valor de 0 Por los días que deseamos descuidar. Dentro del bucle, hay una pequeña Si Declaración que verifica el valor enviado desde nuestra función de ranura de tiempo de radio para determinar si la opción debe configurarse como seleccionada.
Finalmente, es hora de guardar toda nuestra información metabox. WordPress tiene una forma muy simple y directa de guardar estas opciones, pero vamos a hacerlo más dinámico. Agrega el siguiente fragmento a tu archivo.
// Guardar la función de metadatos dj_schedule_save_postdata ($ post_id) if (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (! wp_verify_nonce ($ _POST ['schedule_noncename'], 'radio_schedule')) devolver; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) devuelve; 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 ])); Una vez más, se ve la utilidad de nuestra variable de días globales. En esta función, recorramos cada día y guardamos nuestras opciones de nuestro campo de selección cambiando el nombre a medida que los días se alternan.
¡Guauu! Si todavía estás conmigo, pongamos a trabajar todos estos códigos, ¿vale? ¡Vale genial! El fragmento a continuación muestra cómo vamos a recorrer cada programa que creamos y colocamos en divs. Agrega ese bit de código y vamos a desglosarlo.
function show_schedule () global $ days; $ html = "; $ html. = ''; $ args = array ('post_type' => 'dj_schedule'); $ loop = new WP_Query ($ args); foreach ($ loop-> publicaciones como $ item): $ html. = ''; devuelve $ 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 ($ 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. = '
En primer lugar, hacemos un bucle para nuestro tipo de mensaje personalizado dj_schedule, crear un div y lista el título. Mientras estamos dentro del div, obtenemos la ID de DJ que agregamos en el administrador usando el get_post_meta función. Luego usamos esa misma ID y llamamos a la función de WordPress get_post para los valores de esa publicación y asignarlos a una variable que luego usamos para obtener el nombre y la foto del DJ.
Justo debajo de nuestro DJ, tenemos nuestro bucle diario que recorre cada día mientras verificamos si existe alguna hora de inicio para ese día. Si existen, entonces generamos la hora de inicio y finalización en un div.
Podemos hacer muchas cosas para agregar el programa a una página, pero para este tutorial, simplemente usaremos un código corto. Entonces, con solo una línea de código, crearemos un código corto que podemos llamar agregar en cualquier página y ¡listo! Tenemos un horario de radio de trabajo.!
add_shortcode ('show_schedule', 'show_schedule'); Esta es la primera fase de agregar más funciones excelentes a su sitio web de radio WP. He elegido un estilo simple para el diseño, puede agregar estos estilos a su style.css expediente. En otro tutorial, explicaré cómo crear una ventana emergente en vivo con el programa actual, DJ y reproductor de radio..
.scheduleBox color de fondo: # 333333; borde: # 000000 1px sólido; color: #fafafa; flotador izquierdo; margen izquierdo: 10px; altura: 100%; .scheduleBox h3 font-size: 14px; .scheduleBox #time background: # 666666; borde inferior: # 000000 1px sólido; .scheduleBox: hover background-color: # 000; borde: # 000000 1px sólido; color: # FFCC00; flotador izquierdo; margen izquierdo: 10px; .scheduleBox h3: hover color: # FF9900; .scheduleBox #time: hover background: # 333333; borde inferior: # 000000 1px sólido;
Su opinión es muy apreciada. Déjame saber lo que piensas en los comentarios a continuación. Feliz codificacion!
