Donnez à vos clients des screencasts personnalisés dans le panneau d'administration WordPress

Dans ce didacticiel, je vais vous montrer un moyen simple de fournir à vos clients des screencasts vidéo personnalisés directement dans le panneau d'administration WordPress. Pour ce faire, nous utiliserons un lecteur multimédia à code source ouvert et un peu de ruse PHP afin d'automatiser le processus de mise à disposition des nouvelles vidéos sur le client..

---

Lorsque vous terminez un projet génial et le confiez à un client, quelle est votre méthode actuelle pour dispenser une formation appropriée? Bien sûr, WordPress est l’un des meilleurs panneaux d’administration disponibles et la plupart des fonctionnalités sont assez faciles à comprendre / à apprendre - mais que se passe-t-il lorsque vous rencontrez un client qui rencontre des difficultés? Comment montrer à un client moins averti comment utiliser ce nouveau plugin étonnant que vous venez d'écrire?

Vos clients vous en remercieront!

Par expérience, le moyen le plus efficace consiste à enregistrer des mini-screencasts montrant exactement comment le faire. Ceux-ci ne doivent pas nécessairement être de qualité professionnelle (bien que Jeffrey Way ait créé un cours pour les aider), car personne d'autre que le client ne les verra jamais. En outre, si vous préférez ne pas parler par la vidéo, ne le faites pas! Il suffit d'enregistrer votre écran seulement.

Cette méthode de fourniture de captures d’écran est conçue pour réduire le nombre d’appels téléphoniques et de courriels que vous recevez en demandant «Pourquoi n’avez-vous pas l’air bien? ou 'pouvez-vous me l'expliquer à nouveau?' Vos clients vous en remercieront également, car ils pourront revenir aux vidéos dès qu’ils auront besoin de parfaire leurs compétences.

---

nous ne pas vouloir:

1. Utiliser un service vidéo tiers externe
2. Pour que l'une de nos vidéos apparaisse dans la médiathèque du panneau d'administration de WordPress

nous faire vouloir:

1. Un moyen simple et rapide de fournir nos vidéos
2. La possibilité de télécharger une vidéo et de l'afficher instantanément dans le panneau d'administration WordPress

Présentation du tutoriel

Voici un bref aperçu de ce que nous allons couvrir:

1. Tout d'abord, nous allons configurer la structure des répertoires et introduire nos dépendances (nous utiliserons Flowplayer)
2. Ensuite, nous allons créer une simple page dans le panneau d'administration WordPress.
3. Ensuite, nous allons plonger dans notre répertoire vidéo et générer une liste des vidéos disponibles
4. Enfin, nous allons écrire un petit peu de JavaScript qui chargera chaque vidéo lorsque les liens seront cliqués.

Super simple et super efficace! Passons au codage!

---

Étape 1 Créer le répertoire du plugin et les fichiers

1. Créez un nouveau dossier dans votre répertoire de plugins appelé vidéos
2. Créez un fichier appelé videos.php
3. À l'intérieur de Vidéos dossier, créer 3 autres dossiers - js, mp4, swf

---

Étape 2 Télécharger Flowplayer

"Flowplayer est un lecteur vidéo Open Source pour votre site Web. Pour les propriétaires de sites, les développeurs, les amateurs, les entreprises et les programmeurs" - Cela semble parfait pour notre projet! Téléchargez-le ici: Télécharger (obtenez la version gratuite)

Lorsque vous téléchargez le fichier ZIP, celui-ci contient un exemple de répertoire, un fichier README et une licence. Nous voulons juste le JavaScript fichier et les deux swf des dossiers. Comme vu ci-dessous.

---

Étape 3: copier les fichiers dans le répertoire du plugin

Prenez les 3 fichiers indiqués ci-dessus et mettez-les dans les répertoires correspondants que nous avons créés auparavant. Votre structure de fichier à l'intérieur du vidéos répertoire devrait maintenant ressembler à ceci.

---

Étape 4 Les commentaires du plugin

Ok, alors maintenant il est temps de s'ouvrir videos.php et commencez à créer notre plugin! Comme avec tous les plugins WordPress, nous devons ajouter cette information en haut de notre fichier de plugin.

 / * Nom du plug-in: Tutorial Videos URI du plug-in: http://wp.tutsplus.com Description: Ce plug-in affiche les didacticiels de formation. Auteur: Shane Osbourne Version: 0.1 URI de l'auteur: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Étape 5 Créer la fonction de sortie

Étant donné que nous allons passer de PHP à l’autre dans ce didacticiel, je ferai de mon mieux pour expliquer chaque section. Mais ne vous inquiétez pas, cela deviendra beaucoup plus clair lorsque vous réviserez l’ensemble du fichier à la fin..

wp_videos_page ()

 function wp_videos_page () / ** Les extraits suivants vont ici ** /

---

Étape 6 Une fonction d'assistance rapide

Nous ne voulons pas nous répéter, alors j'aime bien créer une petite fonction d'assistance comme celle-ci pour renvoyer le répertoire de travail actuel du plug-in sur lequel nous travaillons (cela nous sera utile ultérieurement lorsque nous aurons besoin d'accéder aux actifs du répertoire du plugin. ).

video_plugin_path ()

 / ** retourne "http://exemple.org/wp-content/plugins/Videos" ** / function video_plugin_path () return path_join (WP_PLUGIN_URL, nom de base (nomdu répertoire (__FILE__))); 

---

Étape 7 Configurer certaines variables

1. D'abord, nous spécifions où nous allons conserver nos fichiers vidéo
2. Ensuite, nous récupérons le "chemin réel" de notre répertoire vidéo. C’est parce que plus tard nous chercherons notre mp4 répertoire pour les fichiers vidéo en utilisant glob () et cela nécessite un vrai chemin sur le système de fichiers, pas une URL.
3. Ensuite, nous créons une autre variable qui stockera l’URL entière dans notre mp4 annuaire

 / * dans wp_videos_page () * / $ wp_video_dir = '/ mp4'; $ wp_video_real_path = nom de répertoire (__ FILE__). $ wp_video_dir; $ wp_video_url = video_plugin_path (). $ wp_video_dir;

---

Étape 8 L'ouverture HTML

Nous allons maintenant abandonner PHP pour pouvoir entrer du HTML simple. Tout d’abord nous ouvrons un div tag avec une classe de emballage - Il s'agit d'une classe wrapper générique que WordPress utilise dans le panneau d'administration. Ensuite, nous définissons un en-tête pour la page et utilisons l'une des icônes de WordPress (l'utilitaire de téléchargement multimédia).

 // quitter php?> 
 

 
Vidéos du didacticiel sur la gestion de contenu.

---

Étape 9 Obtenir les fichiers vidéo dans le répertoire mp4

1. Ici nous allons utiliser glob () pour lister tous les fichiers vidéo disponibles dans le mp4 annuaire.
2. Nous transmettons notre chemin de système de fichiers avec une expression régulière qui correspond à n’importe quelle version de mp4 (MP4 et mp4, par exemple)
3. $ vidéos sera maintenant un tableau contenant tous les fichiers vidéo.

  
 
 Étape 10 La boucle
 
Maintenant que nous avons un tableau contenant les chemins de nos fichiers vidéo, nous les parcourons en boucle et générons un balisage HTML qui affichera un lien vers chaque clip..
 
 
D'abord on vérifie ça $ vidéos est ne pas un tableau vide (si c'est le cas, nous passons à un simple message)
 
Ensuite, nous mettons en file d'attente le fichier JavaScript Flowplayer
 
Nous produisons ensuite un message simple: "Choisissez une vidéo à regarder" et ouvrez un message. 
  
 
Ensuite, c'est la boucle réelle. Nous parcourons chaque chemin de fichier et extrayons le nom de fichier uniquement. Ensuite on utilise str_replace et ucwords () créer un Titre pour chaque vidéo. C’est pour que les fichiers nommés dans ce format créer une page.mp4 va devenir Créer une page.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
Ensuite, nous générons du balisage HTML pour chaque fichier vidéo avec un données-video-url attribut et un classe de lien vidéo. 
 
 données-video-url - ce sera le chemin de l'URL de chaque fichier vidéo. Nous le récupérerons plus tard lorsque nous aurons écrit le code JavaScript..
 
 lien vidéo - nous allons utiliser ce sélecteur CSS pour écouter les clics sur les liens.
 
 
 
Enfin, nous fermons la non ordonné liste et définir notre message par défaut pour quand il n'y a actuellement pas de vidéos.
 
 
 if (! empty ($ videos)) wp_register_script ('flowplayer_js', video_plugin_path (). '/js/flowplayer-3.2.6.min.js'); wp_enqueue_script ('flowplayer_js'); $ o = '
Veuillez choisir une vidéo à regarder
'; $ o. = '
'; foreach ($ videos en tant que $ video) $ video_file = basename ($ video); $ aiguilles = tableau ('-', '.mp4'); $ remplacements = tableau (","); $ video_title = ucwords (str_replace ($ aiguilles, $ remplacements, $ video_file)); $ o. = sprintf (('
% s
'), $ wp_video_url. '/' $ video_file, $ video_title);  $ o. = '
'; echo $ o;  else echo 'Désolé, il n'y a pas encore de vidéos, je vous préviens quand il y en a.'; ?> //<-- Exiting php again
 
 
 Étape 11 Le conteneur vidéo
 
Maintenant il est temps de créer un div avec un identifiant de joueur - c'est ce que le lecteur vidéo sera chargé. Nous fermons aussi l'emballage div que nous avons ouvert plus tôt.
 
Remarque: Par défaut, Flowplayer chargera vos vidéos dans le fichier spécifié. div à la résolution exacte où vous les avez enregistrés. Vous pouvez ajouter des styles en ligne à la div forcer la taille du lecteur vidéo à être ce que vous voulez - mais soyez prudent si vous le faites, car vos vidéos risquent de ne pas être superbes si vous essayez de les réduire dans un format différent.
 
 
 

 function wp_video_option_page () add_menu_page ('Vidéos de didacticiel', 'Vidéos de didacticiel', 'Options de gestion', 'wp_tutorial_videos', 'wp_videos_page');  add_action ('admin_menu', 'wp_video_option_page');