Dus ik was een paar blogs aan het lezen die ik las, zoals je op een luie middag doet, en ik kwam Ideate tegen. Ik hield zo veel van het thema, ik wilde de kleine tv-box die ze hebben, opnieuw maken met een YouTube-video. In deze zelfstudie bekijken we hoe!

Voorwoord

We nemen aan dat u een live WordPress-installatie hebt, ongeacht of deze lokaal of gehost is.
Er zijn tutorials over het uitvoeren van WordPress lokaal title = "geeks zijn sexy over hoe WordPress lokaal onder XP te installeren"> hier voor Windows,
en
hier voor OS X.

Stap 1 - De noodzaak

Alrighty. Dus afgezien van de overduidelijke behoefte aan een WordPress-installatie, gaan we
om nog een paar extra dingen nodig te hebben. Ik heb een heleboel bestanden die je nodig hebt
hebben in je themamap. Een nieuwe map een naam geven in wp-content / themes 'youtubeFeature',
en stop al dit spul erin.

• Afbeeldingenmap - Duh, wat een goede site heeft niet wat afbeeldingen!?
  • bg.png
  • containerBg.png
  • contentTop.png
  • headerImg.png
  • tag.png
  • tv.png - Een kleine tv die ik voor je heb klaargespeeld.
    Origineel was eigenlijk van
    sxc.hu Stock afbeelding uitwisseling
• index.php
• style.css

Bewerk style.css als je wilt, hoewel het standaard geen kwaad zal doen. Ga naar je wp-admin en
activeer het thema!

We hebben een videopost nodig!

Omwille van de tutorials moeten we een nieuw bericht plaatsen in wp-admin. Dus open je
wp-admin, klik op nieuwe post schrijven. We willen alleen dat de inhoud de youtube-vid is,
rechts? Ga naar je favoriete YouTube-video en in de infosectie aan de rechterkant
(direct naast de videospeler zelf) zou je de embed-bit moeten zien.

Pak dat stukje code en plak het rechtstreeks in je wp-admin om nieuwe berichtinhoud te schrijven
Gebied! Vergeet niet om ervoor te zorgen dat je in de HTML-modus bewerkt, niet in Visual:

. Erg belangrijk! U moet enkele parameters wijzigen zodat de
video past op ons scherm. Wijzig bij beide gelegenheden de '425' in de breedteparameters
tot '250' en de '344' tot '210'. Ga naar de categorieën en klik op '+ Nieuw toevoegen'
Categorie ', en noem het toepasselijk' Video ':

Klik op Publiceren en we zijn weg!

Stap 2 - HTML

We hebben basis HTML en elementaire WP-info nodig, toch? Dat doen we nu, dan kunnen we dat
voeg het toe belangrijk WordPress code later. Dit bevat een aantal WordPress
code, maar niet de bits die de YouTube-vid weergeven!

        
 
 
"title =" home ">
 
  
  
  
 
 
  

Huh? Zei je dat dat veel is? Ja ... Het is een beetje denk ik. Maar het zijn allemaal basale dingen.
Link het stylesheet in, toon het h1 a img (wat toevallig gebeurt met IBLOG in
Arial), laat een klein label zien en sluit alle divs. Echte eenvoudige dingen.

Stap 3 - WordPress-code

Zoals ik al eerder zei, hebben we 2 loops nodig. Een voor de videogedeelte, de andere voor de
Hoofdlus. Eenvoudig gedaan met WP_Query! Onze eerste loop-query zal alleen de lus vertellen
toon de inhoud van de meest recente post onder de categorie 'Video'. Vervang de
tv-sectie commentaar met:

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

Je krijgt de parameters in de vraag, toch? Zoals ik al zei, post uit de categorienaam:
Video, laat maar 1 bericht zien. Eenvoudig. Als je WP_Query niet begrijpt, kijk dan terug
in deze tutorial voor een uitgebreidere kijk. Super goed! Dus als je had toegevoegd
de post correct, met alleen de inhoud van YouTube als inhoud, het zou moeten kijken
iets zoals dit:

De tweede lus is een veel eenvoudiger, standaard lus. Gewoon je gemiddelde Joe-loop. Het zou moeten
vervang de tweede opmerking in index.php!

Nu, zonder enige CSS-styling op dit moment, zou het er ongeveer zo uit moeten zien:

Stap 4 - CSS

Hier gebeurt de magie!

Om te beginnen, zullen we wat basisdingen uit de weg ruimen.

* marge: 0; opvulling: 0; rand: 0;  lichaam font: 75% / 18px Helvetica, Arial, Tahoma; achtergrond: # 998835 url (images / bg.png) repeat-x; marge: 0; opvulling: 0;  #wrapper width: 800px; marge: 0 auto;  h1 margin-top: 30px; padding-links: 90px; 

Dit is gewoon het resetten van de marges, het instellen van normen voor het lichaam (het geven van de
achtergrond van 'bg.png' en # 998835, een puike gele kleur!). Centreert het geheel
ding, en maakt het een max van 800px.

Alright! nu om onze tv te stylen!

#tvSection-object float: right; achtergrond: url (images / tv.png) no-repeat links bovenaan; breedte: 250 px; hoogte: 210 px; opvulling: 39px 125px 70px 55px; 

De reden dat we het object binnen het tv-gedeelte bewerken, is omdat het waar dan ook is
dat object beweegt op de pagina, het gaat zijn opvulling en achtergrond meenemen
het. Dus om problemen te voorkomen, wordt het achtergrondbeeld bepaald door het object dergelijke kenmerken te geven
achter de vid - ongeacht welke inhoud er is. Het verzekert ons ook dat als daar
is er een andere inhoud die per ongeluk is ingevoerd, dan wordt deze weergegeven tegen het lege wit
van de container zodat je kunt zien dat hij er is! (Of u kunt de p een grijze achtergrond geven
als een onderschrift, wie weet?)

Ten eerste, haal het uit de weg naar rechts. Een gegeven. Ten tweede geven we het onze tv
afbeelding als achtergrond! Door de breedte en hoogte van het tv-gedeelte hetzelfde te maken
zoals de YouTube-video was ingesteld, beperkt hij die tot dat kleine vierkantje - dus
we weten dat het op de juiste plek blijft. De opvulling geeft alleen de rest weer
de televisie. In mijn WYSIWYG-editor is het mogelijk om de opvulling te bekijken (met de gestippelde
lijn!). Dus om u een idee te geven van wat de zeer specifieke opvulling is, zal ik laten zien
jij een screenshot. De volle lijn die door de bovenste helft snijdt, is de negatieve marge!

De negatieve bovenmarge schuift het hele ding een beetje hoger op de pagina,
zodat het halverwege ligt tussen wat binnenkort de witte container div wordt en de
bovenkant van het lichaam (pukey geel!) Onze tv zou er nu ongeveer zo uit moeten zien:

De volgende stap is de inhoud en container-fixing. de container moet wit zijn, terwijl
de inhoud div moet smal zijn met het kleine gearceerde ding aan de bovenkant. Gemakkelijk
gedaan:

#container margin-top: 20px; achtergrond: url (images / containerBg.png) repeat-x center top #fff;  #tag opvulling: 70px 0 0 34px;  #content duidelijk: beide; breedte: 425 px; achtergrond: url (images / contentTop.png) no-repeat center top; opvulling: 40px; 

En tot slot, de rest van de berichtinhoud! We hebben zoveel aandacht aan besteed
onze tv, dat de normale lus onbeduidend aanvoelt! Laten we er wat leven in geven
sommige rode en grijze en zwevende afbeeldingen!

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

En nu zou het er enigszins op moeten lijken:

Het lijkt veel op onze Photoshop-mockup, en niet anders dan
de header van de Ideate-website ... Ja, ik weet dat het ontbreekt
sommige patriottische vlaggen!

Goed gedaan! Je hebt een Youtube Vid in de tube gezet in een Wordpress-skin!