Creazione di uno shortcode per il video reattivo

Se sei come me, usi YouTube per ospitare qualsiasi video che aggiungi al tuo sito WordPress. Risparmia preoccupazioni sulla compatibilità del browser o del dispositivo, fa risparmiare spazio sui server e può essere molto più affidabile.

Inoltre, significa che i tuoi video possono essere consultati dagli spettatori di YouTube e dai visitatori del tuo sito o blog.

Tuttavia, l'aggiunta di video streaming di YouTube ha due aspetti negativi:

Per impostazione predefinita, non sono reattivi. I video sono contenuti in a </code> elemento e con la migliore volontà del mondo, non è possibile rendere uno di quelli reattivi.</li> <li>Se stai sviluppando un sito per clienti che non sono programmatori, aspettarti che aprano la scheda "Testo" dell'Editor di post e copi in un codice di embed da YouTube potrebbe essere troppo scoraggiante per loro, o - peggio ancora - potrebbe dare loro l'opportunità di rompere il sito.</li> </ol> <p>In questo tutorial ti mostrerò come creare uno shortcode che permetta a te o al tuo cliente di aggiungere video YouTube incorporato nella vista di modifica "Visiva" e renderà automaticamente quel video reattivo.</p> <em><strong>Nota:</strong> Invece di aggiungere codice al file delle funzioni di un tema e / o stylesheeet, ti consiglio di creare un plug-in per aggiungerlo al tuo sito, che è il metodo che seguo. Mantiene tutto in un unico posto e significa che è possibile abilitare il plug-in in siti multipli per utilizzare lo shortcode tanto quanto è necessario.</em> <hr> <h2>Cosa è necessario per completare questo tutorial</h2> <p>Per completare questo tutorial, avrai bisogno di:</p> <ul> <li>Un sito di sviluppo o test con WordPress installato</li> <li>Un editor di codice</li> <li>Un programma FTP per caricare il tuo plugin (che può essere incorporato nel tuo editor di codice)</li> </ul> <hr> <h2>Impostazione del plugin</h2> <p>Inizia aprendo un nuovo file nel tuo editor di testo e nominandolo - il mio è chiamato <strong>wptutsplus-reattiva-video-shortcode.php</strong> ma puoi chiamare il tuo qualunque cosa desideri.</p> <p>Nel file, inserisci il seguente codice:</p> <pre> <?php /* Plugin Name: WpTuts+ Responsive Video Shortcode Plugin URI: http://rachelmccollin.com Description: This plugin provides a shortcode you wrap around the ID of a video in YouTube. The plugin then adds the necessary markup and CSS to make that video responsive. To use it, type [responsive-video]'source'[/responsive-video], where 'source' is the iframe embed code for your video. Version: 1.0 Author: Rachel McCollin Author URI: http://rachelmccollin.com License: GPLv2 */ ?></pre> <p>Questo imposta il tuo plugin e dice a WordPress il suo nome e la sua versione.</p> <hr> <h2>Aggiunta della funzione Shortcode</h2> <p>Sotto questo testo di apertura, aggiungi la funzione che creerà lo shortcode e lo collegherà al <code>add_shortcode</code> gancio di azione:</p> <pre> <?php // register the shortcode to wrap html around the content function wptuts_responsive_video_shortcode( $atts ) extract( shortcode_atts( array ( 'identifier' =>"), $ atts)); return '<div><iframe src="//www.youtube.com/embed/' . $identifier . '" frameborder="0">

 ';  add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode'); ?> Questo crea lo shortcode stesso. Diamo un'occhiata a cosa produrrà lo shortcode:
  Un contenente div con la classe wptuts-video-container, che verrà utilizzato per aggiungere CSS per rendere il video reattivo
 Un iframe elemento all'interno di quello contenente div 
 Il link al video di YouTube all'interno del codice di incorporamento, con $ identificatore al posto del codice identificativo univoco per il video
 Un attributo di $ identificatore che l'utente specificherà quando aggiungerà lo shortcode a una pagina o un post sul sito. Ciò significa che non dovrà digitare o copiare l'intero codice di incorporamento
 
 
 Aggiunta di CSS per rendere le cose reattive
 Il prossimo passo è aggiungere lo styling che lo renderà tale div reattivo. Apri un nuovo file nel tuo editor di codice e chiamalo style.css. Nel nuovo foglio di stile aggiungi quanto segue:
  / * foglio di stile da utilizzare con il plug-in shortcode video reattivo. Fornisce il CSS che rende il video reattivo. * / .wptuts-video-container position: relativo; imbottitura-fondo: 56,25%; padding-top: 30px; altezza: 0; overflow: nascosto;  .wptuts-video-container iframe position: absolute; top: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; 
 Quello che fa è il seguente:
  Rende il cointain div reattivo, usando padding-bottom per definire le proporzioni (in questo caso 16: 9). Il padding-top dichiarazione fornisce lo spazio per il bordo nella parte superiore del video. utilizzando padding-bottom invece di altezza significa che se il div viene ridimensionato, manterrà le sue proporzioni.
 Aggiunge posto assoluto al iframe elemento, assicurando che riempia lo spazio occupato dal contenitore div. Questo rende il video reattivo.
 
 Ora salva il tuo foglio di stile.
 
 Registrazione del foglio di stile nel plugin
 Il passo finale è registrare il foglio di stile all'interno del plugin in modo che utilizzi il CSS che hai appena aggiunto.
 Apri di nuovo il file del plugin. Sopra il codice per lo shortcode stesso, aggiungere quanto segue:
  
 Questo registra il foglio di stile e lo accoda usando wp_enqueue_scripts, quale è il modo corretto per aggiungere fogli di stile e script in WordPress.
 
 Utilizzando lo Shortcode
 Ora salva entrambi i tuoi file in una cartella con il nome del tuo plugin - Sto chiamando la mia cartella wptutsplus-reattiva-video-shortcode. Salvalo e caricalo nella cartella dei plugin nel tuo sito di test. Attiva il plugin.
 Userò un video di Lego Supereroi (come so che renderà felici i miei figli). Il suo identificatore univoco è O56p5nOYNHo, che puoi copiare dall'URL durante la visualizzazione del video sul sito di YouTube. In un post o una pagina nuovi o esistenti, aggiungere lo shortcode come segue:
 [identificatore responsive-video = "O56p5nOYNHo"]
 Salva il post e visualizzalo. Scoprirai che il video è in streaming, come mostrato nello screenshot:
  Ora prova a ridimensionare la finestra del browser o a visualizzare il post su un dispositivo mobile. Il video si ridimensiona automaticamente:
  Ora sei in grado di riprodurre in streaming qualsiasi video di YouTube che desideri nel tuo sito senza allontanarti dall'editor visivo e senza doversi preoccupare degli utenti su dispositivi diversi.



		
			
	   
	




Codice