Ofrezca a sus clientes capturas de pantalla personalizadas en el Panel de administración de WordPress

En este tutorial, le mostraré una manera fácil de proporcionar a sus clientes algunos screencast de video personalizados directamente en el Panel de administración de WordPress. Haremos esto usando un reproductor de medios de código abierto y un poco de trucos de PHP para automatizar el proceso de hacer que los nuevos videos estén disponibles para el cliente.

---

Al completar un proyecto increíble y entregarlo a un cliente, ¿cuál es su método actual para proporcionar la capacitación adecuada? Claro, WordPress tiene uno de los mejores paneles de administración disponibles y la mayoría de las funciones son bastante fáciles de entender / aprender, pero ¿qué sucede cuando te encuentras con un cliente que encuentra alguna dificultad? ¿Cómo le muestra a un cliente que no sabe cómo usar ese nuevo e increíble complemento que acaba de escribir??

Tus clientes te lo agradecerán.!

Por experiencia, la forma más efectiva de hacerlo es grabar mini-screencasts que muestren exactamente cómo hacerlo. Estos no tienen que ser de calidad profesional (aunque Jeffrey Way ha creado un curso para ayudar con eso) ya que nadie más que el cliente los verá. Además, si prefieres no hablar sobre el video, ¡entonces no lo hagas! Solo graba tu pantalla solo.

Este método de proporcionar capturas de pantalla está diseñado para reducir la cantidad de llamadas telefónicas y correos electrónicos que recibe preguntando "¿por qué no se ve bien?" o 'me puedes explicar eso otra vez?' Sus clientes también se lo agradecerán, ya que pueden volver a los videos siempre que necesiten mejorar sus habilidades.

---

Nosotros no hacer querer:

1. Tener que usar un servicio externo de video de terceros.
2. Para que cualquiera de nuestros videos se muestre en la biblioteca de medios dentro del Panel de administración de WordPress

Nosotros hacer querer:

1. Una manera fácil y rápida de proporcionar nuestros videos.
2. La capacidad de cargar un video y mostrarlo instantáneamente en el Panel de administración de WordPress

Descripción general del tutorial

Aquí hay una breve descripción de lo que cubriremos:

1. Primero, configuraremos la estructura del directorio y traeremos nuestras dependencias (usaremos Flowplayer)
2. Luego crearemos una página simple en el Panel de Administración de WordPress.
3. A continuación, nos sumergiremos en nuestro directorio de videos y generaremos una lista de los videos disponibles.
4. Finalmente, escribiremos un poquito de JavaScript que cargará cada video cuando se haga clic en los enlaces

Super simple y super efectivo! Vamos a obtener la codificacion!

---

Paso 1 Crear el directorio de plugin y archivos

1. Crea una nueva carpeta dentro de tu directorio de plugins llamado videos
2. Crear un archivo llamado videos.php
3. Dentro de Videos carpeta, crea 3 carpetas más - js, mp4, swf

---

Paso 2 Descargar Flowplayer

"Flowplayer es un reproductor de video de código abierto para su sitio web. Para propietarios de sitios, desarrolladores, aficionados, empresas y programadores" - ¡Suena perfecto para nuestro proyecto! Descárgalo aquí: Descarga (obtén la versión gratuita)

Cuando descargue el archivo ZIP, contendrá un directorio de ejemplo, un archivo README y una licencia. Solo queremos el JavaScript archivo y los dos swf archivos. Como se ve abajo.

---

Paso 3 Copie los archivos en el directorio de complementos

Tome los 3 archivos que se muestran arriba y colóquelos en los directorios correspondientes que creamos anteriormente. Su estructura de archivos dentro de la videos El directorio ahora debería verse así.

---

Paso 4 Los comentarios del plugin

Ok, ahora es el momento de abrirse videos.php y comienza a crear nuestro plugin! Al igual que con todos los complementos de WordPress, debemos agregar esta información en la parte superior de nuestro archivo de complementos.

 / * Nombre del complemento: Videos tutoriales URI del complemento: http://wp.tutsplus.com Descripción: Este complemento muestra los Videos de capacitación tutorial. Autor: Shane Osbourne Versión: 0.1 Autor URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Paso 5 Crear la función de salida

Debido a que entraremos y saldremos de PHP en este tutorial, haré lo mejor para explicar cada sección, pero no temas, se volverá mucho más claro cuando revises todo el archivo al final..

wp_videos_page ()

 function wp_videos_page () / ** Los siguientes fragmentos de código van aquí ** /

---

Paso 6 Una función de ayuda rápida

No queremos repetirnos, así que me gusta crear una pequeña función auxiliar como esta para devolver el directorio de trabajo actual del complemento en el que estamos trabajando (será útil más adelante cuando necesitemos acceso a los recursos en el directorio del complemento). ).

video_plugin_path ()

 / ** devuelve "http://example.org/wp-content/plugins/Videos" ** / function video_plugin_path () return path_join (WP_PLUGIN_URL, basename (dirname (__FILE__))); 

---

Paso 7 Configurar algunas variables

1. Primero especificamos dónde vamos a guardar nuestros archivos de video.
2. Luego recuperamos el 'camino real' a nuestro directorio de videos. Esto es porque más tarde estaremos buscando nuestro mp4 directorio para archivos de video usando glob () y requiere una ruta real en el sistema de archivos, no una URL.
3. Luego creamos otra variable que almacenará la URL completa en nuestro mp4 directorio

 / * dentro de wp_videos_page () * / $ wp_video_dir = '/ mp4'; $ wp_video_real_path = dirname (__ FILE__). $ wp_video_dir; $ wp_video_url = video_plugin_path (). $ wp_video_dir;

---

Paso 8 El HTML de apertura

Vamos a abandonar PHP ahora para que podamos ingresar algún HTML simple. En primer lugar abrimos un div etiqueta con una clase de envolver - esta es una clase de contenedor genérico que WordPress utiliza en el panel de administración. A continuación, establecemos un encabezado para la página y usamos uno de los iconos de WordPress (el cargador de medios)

 // saliendo de php?> 
 

 
Videos tutoriales de administración de contenido.

---

Paso 9 Obtenga los archivos de video en el directorio mp4

1. Aquí vamos a utilizar glob () para enumerar todos los archivos de video disponibles en el mp4 directorio.
2. Pasamos nuestra ruta del sistema de archivos junto con una expresión regular que coincidirá con cualquier versión de mp4 (MP4 y mp4, por ejemplo)
3. $ videos ahora será una matriz que contiene todos los archivos de video.

  
 
 Paso 10 El Loop
 
Ahora que tenemos una matriz que contiene rutas a nuestros archivos de video, hacemos un bucle a través de cada uno y generamos un marcado HTML que mostrará un enlace a cada clip..
 
 
Primero comprobamos que $ videos es no una matriz vacía (si es así, saltamos a un mensaje simple)
 
Luego ponemos en cola el archivo JavaScript Flowplayer
 
A continuación, emitimos un mensaje simple de "elija un video para ver" y abrimos un 
  
 
Entonces es el bucle real. Pasamos por cada ruta de archivo y extraemos el nombre del archivo solamente. Entonces usamos str_replace y ucwords () para crear un título para cada video Esto es para que los archivos nombrados en este formato. create-a-page.mp4 se convertirá Crear una pagina.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
A continuación generamos un marcado HTML para cada archivo de video con un data-video-url atributo y un clase de enlace de video. 
 
 data-video-url - esta será la ruta URL a cada archivo de video. Lo recuperaremos más tarde cuando escribamos el JavaScript..
 
 enlace de video - Usaremos este selector de CSS para escuchar los clics en los enlaces..
 
 
 
Finalmente, cerramos la desordenado enumerar y configurar nuestro mensaje predeterminado para cuando no hay videos actualmente.
 
 
 if (! empty ($ videos)) wp_register_script ('flowplayer_js', video_plugin_path (). '/js/flowplayer-3.2.6.min.js'); wp_enqueue_script ('flowplayer_js'); $ o = '
Por favor elige un video para ver
'; $ o. = '
'; foreach ($ videos como $ video) $ video_archivo = nombre base ($ video); $ needles = array ('-', '.mp4'); $ Repuestos = array (","); $ video_title = ucwords (str_replace ($ agujas, $ reemplazos, $ video_file)); $ o. = sprintf (('
% s
'), $ wp_video_url. '/'. $ video_file, $ video_title);  $ o. = '
'; echo $ o;  else echo 'Lo sentimos, no hay videos para ver todavía, te avisaré cuando haya.'; ?> //<-- Exiting php again
 
 
 Paso 11 El contenedor de video
 
Ahora es el momento de crear una div con una identificación de jugador - esto es en lo que se cargará el reproductor de video. También cerramos la envoltura. div que abrimos antes.
 
Nota: Por defecto, Flowplayer cargará tus videos en el espacio especificado. div en la resolución exacta en que los grabó en. Usted podría agregar algunos estilos en línea a la div para forzar que el tamaño del reproductor de video sea lo que usted desea, pero tenga cuidado si lo hace, ya que sus videos pueden no verse muy bien si está tratando de comprimirlos en una relación de aspecto diferente.
 
 
 

 función wp_video_option_page () add_menu_page ('Videos Tutoriales', 'Videos Tutoriales', 'manage_options', 'wp_tutorial_videos', 'wp_videos_page');  add_action ('admin_menu', 'wp_video_option_page');