Así que estaba leyendo algunos blogs que leo, como lo hacen en una tarde perezosa, y me encontré con Ideate. Me encantó tanto el tema, quería recrear la pequeña caja de TV que tienen que contiene un video de YouTube. En este tutorial, echaremos un vistazo a cómo!

Prefacio

Asumiremos que tiene una instalación de WordPress en vivo, ya sea local o alojada.
Hay tutoriales sobre cómo ejecutar WordPress localmente title = "los geeks son atractivos sobre cómo instalar WordPress localmente en XP"> aquí para Windows,
y
aqui para OS X.

Paso 1 - Las necesidades

De acuerdo Así que, aparte de la evidente necesidad de una instalación de WordPress, vamos
Para necesitar algunas cosas extra también. Tengo un montón de archivos que necesitarás
tener en su carpeta de temas. Nombra una nueva carpeta en wp-content / themes 'youtubeFeature',
y poner todas estas cosas en ella.

• Carpeta de imágenes - Duh, qué buen sitio no tiene algunas imágenes!?
  • bg.png
  • containerBg.png
  • contentTop.png
  • headerImg.png
  • tag.png
  • tv.png - Un pequeño televisor que he preparado para ti.
    Original fue en realidad de
    sxc.hu Stock intercambio de imágenes
• index.php
• style.css

Edita style.css si quieres, aunque no está mal. Ve a tu wp-admin y
activar el tema!

Necesitamos un video post!

Ahora, por el bien de los tutoriales, necesitamos hacer una nueva publicación en wp-admin. Así que abre tu
wp-admin, haga clic en escribir nueva entrada. Solo queremos que el contenido sea el video de youtube.,
¿Correcto? Vaya a su video favorito de YouTube, y en la sección de información a la derecha
(justo al lado del reproductor de video) debería ver el bit de inserción.

Coge ese fragmento de código y pégalo directamente en tu wp-admin escribe el nuevo contenido de la publicación
¡zona! No olvides asegurarte de que estás editando en modo HTML, no en Visual:

. Muy importante! Necesitas cambiar algunos parámetros para que la
El video se adapta a nuestra pantalla. En ambas ocasiones, cambie el '425' en los parámetros de ancho
a '250', y el '344' a '210'. Vaya a las categorías y haga clic en '+ Agregar nuevo
Categoría ', y acertadamente nombre' Video ':

Haga clic en Publicar, y estamos lejos!

Paso 2 - HTML

Necesitaremos algo de HTML básico e información básica de WP, ¿verdad? Lo haremos ahora, entonces podemos
añade el importante Código de WordPress más adelante. Esto contiene algunos WordPress
Código, pero no los bits que muestran el video de YouTube!

        
 
 
"title =" home ">
 
  
  
  
 
 
  

Eh ¿Dijiste que eso es mucho? Sí ... es un poco, supongo. Pero todo es básico..
Enlace la hoja de estilo en, muestre la h1 a img (lo que pasa a decir IBLOG en
Arial), muestra una pequeña etiqueta, y cierra todos los divs. Cosas realmente fáciles.

Paso 3 - Código de WordPress

Como dije antes, necesitamos 2 bucles. Una para la sección de videos, la otra para la sección de videos.
bucle principal. Fácil hecho con WP_Query! Nuestra primera consulta de bucle dirá el bucle a sólo
Muestra el contenido de la publicación más reciente en la categoría 'Video'. Reemplace la
Comentario de la sección de tv con:

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

Obtienes los parámetros en la consulta, ¿verdad? Como dije, postear desde categoría nombre:
Video, solo mostrar 1 post. Sencillo. Si no entiendes WP_Query, mira atrás
en este tutorial para una mirada más extensa. ¡Genial! Así que si hubieras agregado
la publicación correctamente, con solo el contenido de YouTube como contenido, debería verse
algo como esto:

El segundo bucle es un bucle básico mucho más simple. Sólo su bucle de Joe medio. Debería
Reemplace el segundo comentario en index.php!

Ahora, sin ningún estilo CSS por el momento, debería tener un aspecto similar al siguiente:

Paso 4 - CSS

Aquí es donde ocurre la magia.!

Para empezar, sacaremos algunas cosas básicas del camino..

* margen: 0; relleno: 0; borde: 0;  body font: 75% / 18px Helvetica, Arial, Tahoma; fondo: # 998835 url (images / bg.png) repeat-x; margen: 0; relleno: 0;  #wrapper ancho: 800px; margen: 0 auto;  h1 margin-top: 30px; relleno-izquierda: 90px; 

Esto es solo restablecer los márgenes, estableciendo estándares para el cuerpo (dándole el
Fondo de 'bg.png' y # 998835, ¡un color amarillo pukey!). Centra el conjunto
cosa, y lo hace un máximo de 800px.

¡Bien! ahora para estilizar nuestro televisor!

objeto #tvSection float: derecha; fondo: url (images / tv.png) no-repetir izquierda superior; ancho: 250px; altura: 210px; relleno: 39px 125px 70px 55px; 

La razón por la que estamos editando el objeto dentro de la sección de TV es porque no importa dónde
ese objeto se mueve en la página, va a tomar su relleno y el fondo con
eso. Así que para salvar problemas, al dar al objeto tales atributos se arregla el fondo.
Detrás de la vid - no importa qué contenido hay. También nos asegura que si hay
se ha insertado accidentalmente cualquier otro contenido, se muestra contra el blanco en blanco
del contenedor para que puedas ver que está ahí! (O podrías darle a la p un fondo gris
como una leyenda, ¿quién sabe?

En primer lugar, sacarlo del camino a la derecha. Un dado. En segundo lugar, le damos nuestro televisor.
Imagen como fondo! Al hacer el mismo ancho y alto de la sección de TV
como se configuró el video de YouTube, lo limita a ese pequeño cuadrado - así
Sabemos que permanecerá en el lugar correcto. El relleno solo muestra el resto de
la televisión. En mi editor WYSIWYG, es posible ver el relleno (con el punto
¡línea!). Así que para darte una idea de lo que hace el relleno específico, te mostraré
usted una captura de pantalla. La línea continua que corta a través de la mitad superior es el margen negativo.!

El margen superior negativo solo empuja todo un poco más arriba en la página,
de modo que está a medio camino entre lo que pronto será el div contenedor blanco, y el
parte superior del cuerpo (¡pukey amarillo!) Nuestro televisor debería tener este aspecto:

El siguiente es el contenido y la fijación de contenedores. el contenedor debe ser blanco, mientras que
el contenido div debe ser estrecho con la pequeña cosa sombreada en la parte superior. Fácil
hecho:

#container margin-top: 20px; fondo: url (images / containerBg.png) repeat-x center top #fff;  #tag padding: 70px 0 0 34px;  #content claro: ambos; ancho: 425px; fondo: url (images / contentTop.png) no-repetir parte superior central; relleno: 40px; 

Y finalmente, el resto del contenido del post! Hemos estado prestando mucha atención a
Nuestro televisor, que el bucle regular se siente insignificante! Vamos a darle un poco de vida con
Algunas imágenes rojas y grises y flotantes.!

.post margin-bottom: 30px;  .post h2 font: 36px Georgia, "Times New Roman", Times, serif; color: # b30d0d; margen inferior: 0.5em;  .post p color: # 555;  .post p a border: 0; color: # a80509;  .post p img float: left; relleno: 0 10px 0 0; borde: 0;  a.more-link display: block; relleno superior: 5px; 

Y ahora debería verse algo similar a esto:

Se parece más a nuestra maqueta de Photoshop, y no es diferente
El encabezado del sitio web de Ideate ... Sí, sé que falta.
algunas banderas patriotas!

¡Bien hecho! Has puesto un video de Youtube en el tubo en un skin de wordpress!