Share
Så jeg leste noen blogger som jeg leser, som du gjør på en lat ettermiddag, og jeg kom over ideen. Jeg elsket temaet så mye, jeg ønsket å gjenskape den lille TV-boksen de har som inneholder en YouTube-video. I denne veiledningen vil vi se på hvordan!
Vi antar at du har et levende WordPress-installasjon, enten det er lokalt eller vert.
Det er opplæringsprogrammer for å kjøre WordPress lokalt title = "Geeks er sexy på hvordan du installerer WordPress lokalt under XP"> her for Windows,
og
her for OS X.
Alrighty. Så bortsett fra det åpenbare behovet for et WordPress-installasjon, går vi
å trenge noen ekstra ting også. Jeg har en hel masse filer du trenger
har i temamappen din. Gi en ny mappe i wp-innhold / temaer 'youtubeFeature',
og legg alle disse tingene inn i det.
Rediger style.css hvis du vil, selv om det er standard vil ikke skade. Gå til wp-admin og
aktiver temaet!
Nå for tutorials skyld, må vi lage et nytt innlegg i wp-admin. Så åpne opp din
wp-admin, klikk skriv nytt innlegg. Vi vil bare at innholdet skal være youtube vid,
Ikke sant? Gå til din favoritt YouTube-video, og i info-delen til høyre
(rett ved siden av selve videospilleren) bør du se embedbiten.
Ta den lille koden, og lim den inn i wp-admin, skriv nytt innlegg
område! Ikke glem å sørge for at du redigerer i HTML-modus, ikke Visual:
. Veldig viktig! Du må endre noen parametere slik at
video passer på skjermen vår. Ved begge anledninger endrer du '425' i breddeparametrene
til '250' og '344' til '210'. Gå ned til kategoriene, og klikk på + Legg til ny
Kategori ', og passende navnet det' Video ':
Klikk på Publiser, og vi er borte!
Vi trenger litt base HTML og grunnleggende WP info, ikke sant? Vi gjør det nå, så kan vi
Legg til viktig WordPress-kode senere. Dette inneholder noen WordPress
kode, men ikke biter som viser YouTube vid!
<?php bloginfo('name'); ?><?php wp_title(); ?> "title =" home ">
; ?>/images/tag.png )
Hu h? Sa du det er mye? Ja ... Det er litt jeg antar. Men det er alle grunnleggende ting.
Koble stilarket i, vis h1 a img (som skjer med å si IBLOG i
Arial), vis litt tag, og lukk alle divs. Virkelige enkle ting.
Som jeg sa før, trenger vi 2 sløyfer. En for videoseksjonen, den andre for
hovedløkke. Lett ferdig med WP_Query! Vår første sløyfeforespørsel vil bare si om sløyfen
vis innholdet i det siste innlegget under kategorien 'Video'. Bytt ut
tv-seksjon kommentaren med:
spørring ( 'category_name = video & showposts = 1'); mens ($ youtube-> har_posts ()): $ youtube-> the_post (); ?>
Du får parametrene i spørringen, ikke sant? Som jeg sa, legg inn fra kategori navn:
Video, bare vis 1 innlegg. Enkel. Hvis du ikke forstår WP_Query, ta en titt tilbake
på denne opplæringen for et mer omfattende utseende. Flott! Så hvis du hadde lagt til
Posten riktig, med bare YouTube-innholdet som innholdet, bør det se ut
noe sånt som dette:
Den andre sløyfen er en mye enklere, grunnleggende sløyfe. Bare din gjennomsnittlige Joe-løkke. Det burde
erstatt den andre kommentaren i index.php!
Nå, uten CSS styling ennå, bør det se noe som ligner på dette:
Her er hvor magien skjer!
For å starte, får vi noen grunnleggende ting ut av veien.
* margin: 0; polstring: 0; grense: 0; kropp font: 75% / 18px Helvetica, Arial, Tahoma; bakgrunn: # 998835 url (images / bg.png) repeat-x; margin: 0; polstring: 0; #wrapper width: 800px; margin: 0 auto; h1 margin-top: 30px; polstring-venstre: 90px;
Dette er bare å tilbakestille margene, sette standarder for kroppen (gir den
bakgrunn av 'bg.png' og # 998835, en pukey gul farge!). Sentrer hele
ting, og gjør det maksimalt 800 px.
Ok! nå for å stilen vår TV!
#tvSection objekt float: right; bakgrunn: url (images / tv.png) no-repeat left top; bredde: 250px; høyde: 210px; polstring: 39px 125px 70px 55px;
Grunnen til at vi redigerer objektet i TV-delen, er fordi uansett hvor
det objektet beveger seg på siden, det kommer til å ta det padding og bakgrunn med
den. Så for å lagre problemer, får bakgrunnen til å gi objektet slike egenskaper
bak viden - uansett hvilket innhold det er. Det forsikrer oss også om det hvis
er noe annet innhold ved et uhell lagt inn, det vises mot den hvite blanken
av beholderen slik at du kan se det er der! (Eller du kan gi p en grå bakgrunn
som bildetekst, hvem vet?)
For det første, få det ut av veien til høyre. En gitt. For det andre gir vi den vår TV
bilde som bakgrunn! Ved å gjøre bredden og høyden til TV-delen den samme
Som hva YouTube-videoen ble satt som, begrenser den den til det lille firkanten - så
Vi vet at det vil forbli på riktig sted. Padding viser bare resten av
TVen. I WYSIWYG-editoren er det mulig å vise polstring (med stiplede
linje!). Så for å gi deg en ide om hva den svært spesifikke polstringen skal vise
du et skjermbilde Den faste linjen som skjærer seg gjennom den øverste halvdelen er negativ marginen!
Den negative toppmarginen bare skyver hele greia litt høyere opp på siden,
slik at det er halvveis mellom hva som snart skal være den hvite container div, og
toppen av kroppen (pukey gul!) Vår TV bør nå se slik ut:
Neste opp er innholdet og beholderfiksingen. Beholderen må være hvit, mens
innholdet div må være smal med den lille skygge ting øverst. Lett
gjort:
#container margin-top: 20px; bakgrunn: url (bilder / containerBg.png) repeat-x center top #fff; #tag polstring: 70px 0 0 34px; #content clear: both; bredde: 425px; bakgrunn: url (images / contentTop.png) no-repeat center top; polstring: 40px;
Og til slutt, resten av innleggets innhold! Vi har betalt så mye oppmerksomhet til
vår TV, at den vanlige sløyfen føles ubetydelig! La oss gi det litt liv med
noen røde og grå og flytende bilder!
.Legg inn margin-bunn: 30px; . post h2 font: 36px Georgia, "Times New Roman", Times, serif; farge: # b30d0d; margin-bunn: 0.5em; .post p color: # 555; .post p a border: 0; farge: # a80509; .post p img float: left; polstring: 0 10px 0 0; grense: 0; a.more-link display: block; polstring: 5px;
Og nå skal det se litt ut som dette:
Det ser ganske ut som vår Photoshop mockup, og ikke ulikt
Ideatwebstedets header ... Ja jeg vet at det mangler
noen patriotiske flagg!
Bra gjort! Du har satt en Youtube Vid i røret i en wordpress hud!
Accentsconagua
; ?>/images/headerImg.png )
; ?>/images/tag.png )