Quindi stavo leggendo alcuni blog che ho letto, come fai in un pomeriggio pigro, e mi sono imbattuto in Ideate. Ho adorato il tema così tanto, ho voluto ricreare la piccola scatola TV che contengono che contiene un video di YouTube. In questo tutorial, daremo un'occhiata a come!

Prefazione

Supponiamo che tu abbia un'installazione live di WordPress, che sia locale o ospitata.
Ci sono tutorial sull'esecuzione di WordPress localmente title = "i geek sono sexy su come installare WordPress localmente in XP"> qui per Windows,
e
qui per OS X.

Step 1 - Le necessità

Alrighty. Quindi, a parte l'ovvia necessità di un'installazione di WordPress, stiamo andando
avere bisogno anche di alcune cose in più. Ho un sacco di file di cui avrai bisogno
avere nella cartella del tema. Assegna un nome a una nuova cartella in wp-content / themes 'youtubeFeature',
e mettici dentro tutte queste cose.

• Cartella immagini - Duh, quale buon sito non ha alcune immagini!?
  • bg.png
  • containerBg.png
  • contentTop.png
  • headerImg.png
  • tag.png
  • tv.png - Un piccolo set televisivo che ho preparato per te.
    Originariamente era in realtà da
    scambio di immagini stock sxc.hu
• index.php
• style.css

Modifica style.css se vuoi, anche se di default non ti farà male. Vai al tuo wp-admin e
attivare il tema!

Abbiamo bisogno di un video post!

Ora, per l'amor del tutorial, dobbiamo creare un nuovo post in wp-admin. Quindi apri il tuo
wp-admin, fai clic su scrivi nuovo post. Vogliamo solo che il contenuto sia il video di YouTube,
destra? Vai al tuo video YouTube preferito, e nella sezione informazioni sulla destra
(proprio accanto al video player stesso) dovresti vedere il bit di incorporamento.

Prendi questo bit di codice e incollalo direttamente nel tuo wp-admin per scrivere nuovi contenuti
la zona! Non dimenticare di assicurarti che stai modificando in modalità HTML non Visual:

. Molto importante! È necessario modificare alcuni parametri in modo che il
il video si adatta al nostro schermo. In entrambe le occasioni, modifica il "425" nei parametri della larghezza
a '250' e '344' a '210'. Vai giù alle categorie e fai clic su "+ Aggiungi nuovo"
Categoria ', e giustamente chiamalo' Video ':

Fai clic su Pubblica e siamo via!

Passaggio 2: HTML

Avremo bisogno di un codice HTML di base e di informazioni WP di base, giusto? Lo faremo ora, quindi possiamo
Aggiungi il importante Codice WordPress in seguito. Questo contiene alcuni WordPress
codice, ma non i bit che mostrano il video di YouTube!

        
 
 
"title =" home ">
 
  
  
  
 
 
  

Eh? Hai detto che è molto? Si ... credo sia un po ' Ma è tutto di base.
Collega il foglio di stile, mostra il h1 a img (che capita di dire IBLOG in
Arial), mostra un piccolo tag e chiudi tutti i div. Real cose facili.

Passaggio 3: codice WordPress

Come ho detto prima, abbiamo bisogno di 2 loop. Uno per la sezione video, l'altro per il
ciclo principale. Facilità con WP_Query! La nostra prima query di loop indicherà solo il ciclo
mostra il contenuto del post più recente sotto la categoria 'Video'. Sostituisci il
commento della sezione tv con:

query ( 'category_name = video & showposts = 1'); while ($ youtube-> have_posts ()): $ youtube-> the_post (); ?> 
  
 

Ottieni i parametri nella query, giusto? Come ho detto, pubblica il nome della categoria:
Video, mostra solo 1 post. Semplice. Se non capisci WP_Query, dai uno sguardo indietro
in questo tutorial per un look più ampio. Grande! Quindi se avessi aggiunto
il post correttamente, con solo il contenuto di YouTube come contenuto, dovrebbe apparire
qualcosa come questo:

Il secondo ciclo è un ciclo di base molto più semplice. Solo il tuo ciclo di Joe medio. Dovrebbe
sostituire il secondo commento in index.php!

Ora, senza uno stile CSS, dovrebbe sembrare qualcosa di simile a questo:

Passaggio 4: CSS

Qui è dove avviene la magia!

Per iniziare, otterremo alcune cose di base fuori strada.

* margine: 0; padding: 0; confine: 0;  body font: 75% / 18px Helvetica, Arial, Tahoma; background: # 998835 url (images / bg.png) repeat-x; margine: 0; padding: 0;  #wrapper width: 800px; margine: 0 auto;  h1 margin-top: 30px; padding-left: 90px; 

Questo sta solo ripristinando i margini, stabilendo standard per il corpo (dandogli il
sfondo di 'bg.png' e # 998835, un colore giallo pukey!). Centra il tutto
cosa, e lo rende un massimo di 800px.

Tutto apposto! ora per dare uno stile alla nostra TV!

#tvSection object float: right; background: url (images / tv.png) no-repeat left top; larghezza: 250 px; altezza: 210px; imbottitura: 39px 125px 70px 55px; 

Il motivo per cui stiamo modificando l'oggetto all'interno della sezione TV è perché non importa dove
quell'oggetto si muove sulla pagina, ne prenderà il padding e lo sfondo con
esso. Quindi, per salvare i problemi, dare all'oggetto tali attributi corregge lo sfondo
dietro il video - non importa quale contenuto ci sia. Ci assicura anche che se ci
è qualsiasi altro contenuto accidentalmente inserito, viene visualizzato contro il bianco vuoto
del contenitore in modo da poter vedere che è lì! (Oppure potresti dare al p uno sfondo grigio
come didascalia, chi lo sa?)

In primo luogo, toglilo dalla direzione giusta. Un dato. In secondo luogo, gli diamo la nostra TV
immagine come sfondo! Rendendo uguale la larghezza e l'altezza della sezione TV
come è stato impostato il video di YouTube, lo vincola a quel quadratino - così
sappiamo che rimarrà nel posto giusto. Il padding mostra solo il resto di
la tv. Nel mio editor WYSIWYG, è possibile visualizzare il padding (con il puntinato
linea!). Quindi, per darti un'idea di cosa mostrerà il rivestimento specifico
sei una schermata. La linea continua che taglia la metà superiore è il margine negativo!

Il margine superiore negativo sposta l'intera pagina leggermente più in alto,
in modo che sia a metà strada tra quello che sarà presto il div contenitore bianco e il
parte superiore del corpo (giallo pukey!) La nostra TV dovrebbe ora assomigliare a questo:

Il prossimo è il contenuto e il fissaggio dei container. il contenitore deve essere bianco, mentre
il contenuto div deve essere stretto con la piccola cosa in ombra nella parte superiore. Facile
fatto:

#container margin-top: 20px; background: url (images / containerBg.png) repeat-x center top #fff;  #tag padding: 70px 0 0 34px;  #content clear: both; larghezza: 425 px; background: url (images / contentTop.png) top senza ripetizione; imbottitura: 40px; 

E infine, il resto del contenuto del post! Abbiamo prestato così tanta attenzione a
la nostra TV, che il ciclo regolare sembra insignificante! Diamo un po 'di vita con
alcune immagini rosse, grigie e fluttuanti!

.post margin-bottom: 30px;  .post h2 font: 36px Georgia, "Times New Roman", Times, serif; colore: # b30d0d; margin-bottom: 0.5em;  .post p color: # 555;  .post p a border: 0; colore: # a80509;  .post p img float: left; riempimento: 0 10px 0 0; confine: 0;  a.more-link display: block; padding-top: 5px; 

E ora dovrebbe apparire in qualche modo simile a questo:

Somiglia piuttosto al nostro mockup di Photoshop, e non diversamente
l'intestazione del sito Web di Ideate ... Sì, lo so che manca
alcune bandiere patriottiche!

Molto bene! Hai inserito un Vid di YouTube nel tube in una skin di wordpress!