Accentsconagua

Suggerimento rapido il tuo codice breve personale

Codice
Share

Probabilmente utilizzi un plug-in di incorporamento video o semplicemente usi i codici di incorporazione dei siti di video. Ma c'è un terzo modo più semplice per incorporare video nel tuo sito WordPress: un semplice (ma utile) shortcode video.

Perché dovrei usare uno shortcode video?

  • Perché i plug-in di incorporamento dei video sono solo un altro piccolo onere per il tuo blog. Prendono un po 'di spazio sul disco (garantito, non più di 1 MB), interrogano sempre il tuo database per le loro opzioni e devi imparare come usare i plugin.
  • Perché l'incorporamento dei codici dei siti video può essere danneggiato, specialmente quando si passa dall'editor WYSIWYG all'editor HTML.
  • E soprattutto: perché gli shortcode sono fantastici! Sono facili da usare, possono avere la funzionalità di molti plugin e il loro codice non si rompe nei tuoi post!

Esplorazione dei siti video

Lavoreremo con 7 siti di hosting video:

  1. YouTube (ovviamente!)
  2. Vimeo
  3. Dailymotion
  4. Yahoo! Schermo
  5. Blip.tv
  6. Veoh
  7. Viddler

Vediamo come appaiono i loro codici embed:

Youtube

Il codice di incorporamento predefinito assomiglia a questo:

 / * Video originale: youtube.com/watch?v=dQw4w9WgXcQ * /

Ma c'è una opzione, la "modalità ottimizzata per la privacy" che aggiunge "-nocookie" al dominio e lo useremo nel nostro shortcode.

Vimeo

 / * Video originale: vimeo.com/36804448 * /

Semplice ed elegante. Ecco perché la gente ama Vimeo.

Dailymotion

 / * Video originale: dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto * / 
Spot BridgeStone 15 Sec di DailymotionUSA

Penso che aggiungere un link sotto il codice embed sia giusto non fantastico, quindi non lo aggiungeremo al nostro shortcode.

Yahoo! Schermo

 / * Video originale: screen.yahoo.com/mysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html * /

Il codice di incorporamento è un po 'strano su Yahoo! Schermo ma ho trovato un modo per accorciarlo che sarà più facile da usare nel nostro shortcode.

Blip.tv

 / * Video originale: blip.tv/mister-glasses/episode-7-5600357 * /

Questo è difficile - questo non ha l'ID del video (dall'URL del video) nel codice di incorporamento. Ma grazie ad alcune ricerche, ho capito come usare l'ID! :)

Veoh

 / * Video originale: veoh.com/watch/v27458670er62wkCt * / 
Guarda il gatto intenso negli animali | Guarda altri video gratuiti online su Veoh.com

Ah, il etichetta ... Non preoccuparti, non lo useremo!

Viddler

 / * Video originale: viddler.com/v/978c9ba2 * /

È tutto. Ora, passiamo alla parte divertente!

Lo shortcode: [Vid]

Creeremo 4 attributi per questo shortcode: il nome del sito, l'ID del video e la larghezza e l'altezza del video. È possibile impostare alcuni valori predefiniti per gli attributi:

 function vid_sc ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'youtube', 'id' => ", 'w' => '400', 'h' => '250 '), $ atts)); add_shortcode (' vid ',' vid_sc ');

Quindi arriva la parte in cui la funzione genera il $ src variabile che genera il src attributo per il iframe:

 // YouTube con "modalità ottimizzata per la privacy": if ($ site == "youtube") $ src = 'http://www.youtube-nocookie.com/embed/'.$id;  // Vimeo: else if ($ site == "vimeo") $ src = 'http://player.vimeo.com/video/'.$id;  // Dailymotion: else if ($ site == "dailymotion") $ src = 'http://www.dailymotion.com/embed/video/'.$id;  // Yahoo! Schermata con alcuni tagli nell'URI: altrimenti if ($ site == "yahoo") $ src = 'http://d.yimg.com/nl/vyc/site/player.html#vid='.$id ;  // Blip.tv con alcuni "hack" nell'URI: altrimenti if ($ site == "bliptv") $ src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http : //blip.tv/rss/flash/'.$id;  // Anche l'URI Veoh ha alcuni hack: else if ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay= 0 & permalinkId =' $ id.;  // Viddler: else if ($ site == "viddler") $ src = 'http://www.viddler.com/simple/'.$id;

E ovviamente, noi ritorno L'output. Ecco il codice completo del nostro nuovo shortcode video:

 function vid_sc ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'youtube', 'id' => ", 'w' => '600', 'h' => '370 '), $ atts)); if ($ site == "youtube") $ src =' http://www.youtube-nocookie.com/embed/'.$id; else if ($ site == "vimeo") $ src = 'http://player.vimeo.com/video/'.$id; else if ($ site == "dailymotion") $ src =' http: //www.dailymotion .com / embed / video /'.$ id; else if ($ site == "yahoo") $ src = 'http://d.yimg.com/nl/vyc/site/player.html#vid = '. $ id; else if ($ site == "bliptv") $ src =' http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss /flash/'.$id; else if ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId=' . $ id; else if ($ site == "viddler") $ src = 'http://www.viddler.com/simple/'.$id; if ($ id! = ") return'';  add_shortcode ('vid', 'vid_sc');

Suggerimento nel suggerimento rapido: prendi nota che il iframe ha due classi CSS: vid e $ Sito iframe- (per esempio. iframe-youtube). Dovresti aggiungere vid border: 0; al tuo file CSS poiché non abbiamo definito il file frameborder attributo nel nostro iframe etichetta.

Esempi di utilizzo

L'utilizzo predefinito è abbastanza semplice:

[vid site = "youtube" w = "600" h = "340"]

Ma per renderlo uniforme più semplice, impostiamo i valori di default per posto, w e h. Quindi, se vuoi incorporare un video di YouTube, puoi semplicemente usarlo in questo modo:

[Vid]

Dovresti cambiare la larghezza e l'altezza in modo che corrisponda al tuo blog. Inoltre, se usi Vimeo più di YouTube, puoi modificare l'impostazione predefinita posto valore per "vimeo".

Questo è tutto! Aggiungi questo al tuo functions.php file e puoi iniziare a usare lo shortcode. Godere!

Aggiornamento: abbiamo aggiunto una sezione di esempio di utilizzo all'articolo per rendere le cose più chiare.

Codice
×