Je lisais donc quelques blogs que je lisais, comme vous le faites par un après-midi de farniente, et je suis tombé sur Ideate. J'ai tellement aimé le thème que je voulais recréer le petit boîtier TV contenant une vidéo YouTube. Dans ce tutoriel, nous verrons comment!

Préface

Nous supposerons que vous avez une installation WordPress en direct, qu’elle soit locale ou hébergée.
Il y a des tutoriels sur l'exécution locale de WordPress title = "les geeks sont sexy sur la façon d'installer WordPress localement sous XP"> ici pour Windows,
et
ici pour OS X.

Étape 1 - Les nécessités

Très bien. Donc, mis à part le besoin évident d'une installation WordPress, nous allons
avoir besoin de quelques choses supplémentaires aussi. J'ai tout un tas de fichiers que tu vas devoir
avoir dans votre dossier de thème. Nommez un nouveau dossier dans wp-content / themes 'youtubeFeature',
et y mettre tout ça.

• Dossier images - Duh, quel bon site n'a pas d'images!?
  • bg.png
  • containerBg.png
  • contentTop.png
  • headerImg.png
  • tag.png
  • tv.png - Un petit téléviseur que j'ai préparé pour vous.
    Original était en réalité de
    sxc.hu Échange d'images
• index.php
• style.css

Modifiez style.css si vous le souhaitez, même si cela ne fait pas mal par défaut. Allez sur votre wp-admin et
activer le thème!

Nous avons besoin d'un post vidéo!

Maintenant, dans l’intérêt des tutoriels, nous devons créer un nouveau message dans wp-admin. Alors ouvrez votre
wp-admin, cliquez sur écrire un nouveau message. Nous voulons seulement que le contenu soit la vidéo youtube,
droite? Accédez à votre vidéo YouTube préférée et à la section d'informations à droite.
(juste à côté du lecteur vidéo lui-même), vous devriez voir le bit incorporé.

Prenez ce morceau de code et collez-le directement dans votre nouveau contenu de publication pour wp-admin
surface! N'oubliez pas de vous assurer que vous éditez en mode HTML et non pas visuel:

. Très important! Vous devez modifier certains paramètres afin que le
La vidéo convient à notre écran. Dans les deux cas, modifiez le paramètre '425' dans les paramètres de largeur
à '250' et le '344' à '210'. Descendez dans les catégories et cliquez sur '+ Ajouter un nouveau
Catégorie ', et nommez-la' Vidéo ':

Cliquez sur Publier, et nous sommes partis!

Étape 2 - HTML

Nous aurons besoin d'informations HTML de base et de base WP, n'est-ce pas? Nous allons le faire maintenant, alors nous pouvons
ajouter le important Code WordPress plus tard. Cela contient du WordPress
code, mais pas les bits qui montrent la vidéo YouTube!

        
 
 
"title =" home ">
 
  
  
  
 
 
  

Hein? Avez-vous dit que c'est beaucoup? Ouais… C'est un peu je suppose. Mais tout est basique.
Lier la feuille de style dans, montrer le h1 a img (ce qui arrive à dire IBLOG dans
Arial), montre une petite étiquette et ferme tous les divs. Vraiment facile.

Étape 3 - Code WordPress

Comme je l'ai dit précédemment, nous avons besoin de 2 boucles. Un pour la section vidéo, l'autre pour le
boucle principale. C'est facile avec WP_Query! Notre première requête en boucle indiquera à la boucle que
affichez le contenu du message le plus récent dans la catégorie "Vidéo". Remplace le
Commentaire de la section tv avec:

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

Vous obtenez les paramètres dans la requête, non? Comme je l'ai dit, poste du nom de la catégorie:
Vidéo, montrer seulement 1 message. Simple. Si vous ne comprenez pas WP_Query, regardez en arrière
à ce tutoriel pour un regard plus complet. Génial! Donc, si vous aviez ajouté
poste correctement, avec uniquement le contenu YouTube comme contenu, il devrait ressembler
quelque chose comme ça:

La seconde boucle est une boucle beaucoup plus simple et basique. Juste votre boucle moyenne Joe. Cela devrait
remplace le deuxième commentaire dans index.php!

Maintenant, sans aucun style CSS pour l'instant, cela devrait ressembler à ceci:

Étape 4 - CSS

Voici où la magie opère!

Pour commencer, nous obtiendrons quelques informations de base..

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

Il s’agit simplement de réinitialiser les marges, d’établir des normes pour le corps (en lui donnant le
fond de 'bg.png' et # 998835, une couleur jaune pukey!). Centre le tout
chose, et en fait un maximum de 800px.

Bien! maintenant pour coiffer notre téléviseur!

#tvSection object float: right; background: url (images / tv.png) no-repeat à gauche en haut; largeur: 250px; hauteur: 210px; rembourrage: 39px 125px 70px 55px; 

La raison pour laquelle nous modifions l'objet dans la section télévision est que peu importe où
cet objet se déplace sur la page, il va prendre son remplissage et arrière-plan avec
il. Donc, pour sauver les problèmes, donner à l'objet de tels attributs corrige le fond
derrière la vidéo - peu importe le contenu. Il nous assure également que si
tout autre contenu mis accidentellement est-il affiché contre le blanc vide?
du conteneur afin que vous puissiez voir qu'il est là! (Ou vous pouvez donner au p un fond gris
comme une légende, qui sait?)

Tout d'abord, éloignez-vous du chemin vers la droite. Une donnée. Deuxièmement, nous lui donnons notre télévision
image comme fond! En rendant la largeur et la hauteur de la section TV identiques
en tant que ce que la vidéo YouTube a été définie en tant que, il le contraint à ce petit carré - afin
nous savons que cela restera au bon endroit. Le rembourrage affiche simplement le reste de
la télé. Dans mon éditeur WYSIWYG, il est possible d’afficher le remplissage (avec le
ligne!). Donc, pour vous donner une idée de ce que le rembourrage très spécifique fait je vais montrer
vous une capture d'écran. La ligne continue coupant la moitié supérieure est la marge négative!

La marge supérieure négative pousse le tout un peu plus haut dans la page.,
de sorte qu'il est à mi-chemin entre ce qui sera bientôt le div conteneur blanc, et le
haut du corps (pukey yellow!) Notre téléviseur devrait maintenant ressembler à ceci:

La prochaine étape est la fixation du contenu et du conteneur. le conteneur doit être blanc, tandis que
le contenu div doit être étroit avec la petite chose ombrée au sommet. Facile
terminé:

#container margin-top: 20px; background: url (images / containerBg.png) repeat-x center top #fff;  #tag padding: 70px 0 0 34px;  #content clear: both; largeur: 425px; fond: url (images / contentTop.png) no-repeat centre top; rembourrage: 40px; 

Et enfin, le reste du contenu du post! Nous avons tellement prêté attention à
notre télé, que la boucle normale semble insignifiante! Donnons-lui de la vie avec
quelques images rouges et grises et flottantes!

.post margin-bottom: 30px;  .post h2 font: 36px Georgia, "Times New Roman", Times, serif; couleur: # b30d0d; marge inférieure: 0.5em;  .post p color: # 555;  .post p a border: 0; couleur: # a80509;  .post p img float: left; remplissage: 0 10px 0 0; bordure: 0;  a.more-link display: block; rembourrage en haut: 5px; 

Et maintenant, cela devrait ressembler à ceci:

Il ressemble plutôt à notre maquette Photoshop, et pas à la différence
l'en-tête du site Ideate… Oui, je sais qu'il manque
des drapeaux patriotiques!

Bien joué! Vous avez mis un Youtube Vid dans le tube dans une skin wordpress!