Share
Deci, am citit câteva bloguri pe care le-am citit, așa cum faceți într-o după-amiază leneș, și am dat peste Ideate. Mi-a plăcut tema atât de mult, am vrut să re-creez caseta mică pe care o au, care conține un videoclip YouTube. În acest tutorial, vom analiza cum!
Vom presupune că aveți o instalare live WordPress, indiferent dacă este locală sau găzduită.
Există tutoriale despre rularea WordPress local title = "geeks sexy despre cum să instalezi WordPress local sub XP"> aici pentru Windows,
și
aici pentru OS X.
În regulă. Deci, pe lângă nevoia evidentă a unei instalări WordPress, mergem
să aveți nevoie și de câteva lucruri suplimentare. Am o grămadă de fișiere de care ai nevoie
aveți în dosarul tematic. Denumiți un nou dosar în wp-content / themes 'youtubeFeature',
și a pus toate lucrurile în ea.
Editați stil.css dacă doriți, deși este implicit rănit. Du-te la wp-admin și
activați tema!
Acum, pentru dragul tutorialelor, trebuie să facem o nouă postare în wp-admin. Așa că deschideți-vă
wp-admin, faceți clic pe scrieți un mesaj nou. Vrem doar conținutul să fie vidul pe YouTube,
dreapta? Accesați videoclipul YouTube preferat și în secțiunea de informații din dreapta
(chiar lângă playerul video în sine), ar trebui să vedeți bitul de încorporare.
Prindeți acest cod de cod și inserați-l direct în wp-admin, scrieți conținut nou
zonă! Nu uitați să vă asigurați că editați în modul HTML nu Visual:
. Foarte important! Trebuie să modificați câțiva parametri, astfel încât
video se potrivește ecranului nostru. În ambele ocazii, schimbați parametrul "425" în parametrii de lățime
la "250" și la "344" la "210". Mergeți la categorii și faceți clic pe "+ Adăugați noi"
Categoria "și denumirea potrivită" Video ":
Faceți clic pe Publicați, iar noi suntem departe!
Vom avea nevoie de o bază HTML și informații de bază pentru WP, nu? O să facem asta acum, atunci putem
adaugă important Codul WordPress mai târziu. Acest lucru conține unele WordPress
cod, dar nu biți care arată vidul YouTube!
<?php bloginfo('name'); ?><?php wp_title(); ?> "title =" home ">
; ?>/images/tag.png )
Nu-i asa? Ai spus că e mult? Da ... Cred că sunt puțin. Dar toate lucrurile de bază.
Legați foaia de stil în, arătați h1 a img (care se întâmplă să spună IBLOG în
Arial), arătați o etichetă mică și închideți toate diviziile. Lucru real ușor.
După cum am mai spus, avem nevoie de 2 bucle. Unul pentru secțiunea video, cealaltă pentru
bucla principală. Ușor de făcut cu WP_Query! Prima noastră interogare cu buclă va spune numai buclă
afișați conținutul celei mai recente postări din categoria "Video". Inlocuieste
tv-Comentariu cu:
interogare ( 'CATEGORY_NAMESTART_BOLDFEATURE_NAMEEND_BOLD = film & showposts = 1'); în timp ce ($ youtube-> have_posts ()): $ youtube-> the_post (); ?>
Obțineți parametrii în interogatoriu, nu? Cum am spus, postați de la numele categoriei:
Video, afișați numai 1 postare. Simplu. Dacă nu înțelegeți WP_Query, aruncați o privire înapoi
la acest tutorial pentru o privire mai extinsă. Grozav! Deci, dacă ați adăugat
postarea corectă, numai conținutul YouTube ca conținut, ar trebui să arate
ceva de genul:
A doua bucla este o buclă mult mai simplă. Doar buza medie Joe. Ar trebui
înlocuiți al doilea comentariu în index.php!
Acum, fără un stil CSS încă, ar trebui să pară ceva similar cu acesta:
Iată unde se petrece magia!
Pentru a începe, vom ieși din lucruri de bază.
* marja: 0; umplutura: 0; frontieră: 0; corp font: 75% / 18px Helvetica, Arial, Tahoma; fundal: # 998835 url (imagini / bg.png) repeat-x; marja: 0; umplutura: 0; #wrapper width: 800px; marja: 0 auto; h1 margin-top: 30px; padding-left: 90px;
Aceasta este doar resetarea marjelor, stabilirea de standarde pentru organism (oferindu-i
fundalul "bg.png" și # 998835, o culoare gălbui galben!). Centrează întregul
lucru, și face o maximă de 800px.
În regulă! acum pentru stilul televizorului nostru!
Obiectul #tvSection float: right; fundal: url (images / tv.png) no-repeat stânga sus; lățime: 250px; înălțime: 210px; zăpadă: 39px 125px 70px 55px;
Motivul pentru care editați obiectul în secțiunea TV este pentru că nu contează unde
acel obiect se deplasează pe pagină, va avea nevoie de zgârieturi și de fundal
aceasta. Deci, pentru a salva problemele, dând obiect astfel de atribute fixează fundalul
în spatele vidului - indiferent ce conținut există. De asemenea, ne asigură că, dacă există
este orice alt conținut introdus accidental, este afișat contra albului gol
a containerului, astfel încât să puteți vedea că este acolo! (Sau ai putea da p un fundal gri
ca o legendă, cine știe?)
În primul rând, scoateți-o din cale spre dreapta. O anumită. În al doilea rând, îi oferim televiziunea noastră
imagine ca fundal! Prin faptul că lățimea și înălțimea secțiunii TV sunt la fel
ca ceea ce a fost setat video YouTube, îl constrânge la acel mic pătrat - deci
știm că va rămâne în locul potrivit. Plăcuțele arată doar restul
televizorul. În editorul meu WYSIWYG, este posibil să vizualizați căptușeala (cu elementul punctat
linia!). Deci, să vă dau o idee despre ceea ce voi arăta foarte bine
o fotografie de ecran. Linia solidă care taie jumătatea superioară este marginea negativă!
Marginea superioară negativă doar împinge totul puțin mai sus în pagină,
astfel încât să fie la jumătatea distanței dintre ceea ce urmează să fie în curând div div container, și
partea superioară a corpului (galben-pușcă!) Televiziunea noastră ar trebui să pară așa:
Următorul lucru este stabilirea conținutului și a containerului. containerul trebuie să fie alb, în timp ce
conținutul div trebuie să fie îngust cu un mic lucru umbrit în partea de sus. Uşor
Terminat:
#container margin-top: 20px; fundal: url (imagini / containerBg.png) repeat-x centru de top #fff; #tag padding: 70px 0 0 34px; #content clar: ambele; lățime: 425px; fundal: url (images / contentTop.png) nu-repeta centru de sus; padding: 40px;
Și, în cele din urmă, restul conținutului post! Am acordat atât de multă atenție
televizorul nostru, bucla obișnuită se simte nesemnificativă! Să-i dăm viață
unele imagini roșii și gri și fluorescente!
.post margin-bottom: 30px; .post h2 font: 36px Georgia, "Times New Roman", Times, serif; culoare: # b30d0d; marginea inferioară: 0,5; .post p culoare: # 555; .post p a graniță: 0; culoare: # a80509; .post p img float: left; umplutura: 0 10px 0 0; frontieră: 0; a.more-link display: bloc; padding-top: 5px;
Și acum ar trebui să pară ceva asemănător cu acesta:
Arată mai degrabă machetul Photoshop-ului nostru, și nu altfel
antetul site-ului Ideate ... Da, știu că lipsește
unele steaguri patriotice!
Foarte bine! Ai pus un Youtube Vid în tub într-o piele wordpress!
Accentsconagua
; ?>/images/headerImg.png )
; ?>/images/tag.png )