#3 Creando nuestro index.html con Bootstrap 4 – Cómo hacer temas para WordPress



https://i.ytimg.com/vi/nA48ItvahcY/hqdefault.jpg



ya vimos como instalar WordPress en nuestro computador, ahora es el momento de comenzar a desarrollar nuestro diseño web en HTML, como habíamos mencionado vamos a utilizar Bootstrap para este procedimiento, pero antes de comenzar quiero hacer una introducción a lo que vamos a desarrollar.

Primero vamos a descargar Bootstrap y realizaremos la pestaña de inicio la cual le colocaremos index.html

Voy a trabajar sumamente rápido en el desarrollo de nuestro tema estático, cuando digo tema estático me refiero a un diseño web en HTML y cuando hablo de temas dinámicos me refiero a WordPress. ojo con esa información.

Nuestro index.html tendrá el siguiente diseño.

En la parte superior tendremos un menú de navegación, luego un formulario para suscribirse, 6 entradas que corresponderán a los artículos en WordPress y finalmente un footer con texto.

Después desarrollaremos dos páginas más correspondientes a single.html, la cual será la página de aterrizaje de cada uno de los artículos y también un page.html, la cual será la página de aterrizaje para las pestañas del menú.

hasta acá todo será estático y escrito con HTML y Bootstrap 4.
Cuando queramos pasar este diseño a WordPress, vamos a utilizar los mismos archivos, pero los vamos a ir ordenando y llamando de diferente forma.

Por ejemplo, tomaremos el index.html y lo pasaremos a una hoja llamada index.php y este a su vez lo dividiremos en varios archivos, tomaremos primero el header, luego el contenido (que serían nuestras entradas) y finalmente el footer.

Esto es a grandes rasgos y es para que te vayas haciendo una idea, no te compliques hasta acá ya que no hemos hecho nada, solo un poco de teoría para que podamos comprender mejor cómo funcionan los temas en WordPress.

Es importante hacer un tema básico en WordPress para adquirir los nuevos conocimientos, después haremos temas más complejos e iremos aprendiendo nuevas características.

Otra cosa es que WordPress es como un universo así que al finalizar el curso serás tú el encargado de seguir nutriéndote de nuevos conocimientos.

Para esto te dejaré la documentación oficial de WordPress, la cual iremos utilizando en el resto de los videos.

uff… nada complicado hasta acá verdad… bueno… vamos a construir nuestro sitio index.html!

Documentación de WordPress: https://developer.wordpress.org/
Descargar Bootstrap 4: https://v4-alpha.getbootstrap.com/
Descargar Web Estática: (próximamente)

No olvides suscribirte a este hermoso canal y destruirme en los comentarios 🙂

También puedes seguirme en Facebook: https://www.facebook.com/bluuweb/

Finalmente visita mi sitio web: http://ignaciogutierrez.cl

Música: http://www.bensound.com/

Original source


37 responses to “#3 Creando nuestro index.html con Bootstrap 4 – Cómo hacer temas para WordPress”

  1. Gracias muy bien explicado, me fui muy util para refrescar mis conocimiento. Ahora queria preguntarte si usas algun plugin especial para crear los comentarios en el HTML ? SLds

  2. Excelente tutorial amigo, solo que si deberías dejar en claro la forma en como clonaste el código del card un par de veces más, es muy confuso.

    Sin embargo note en la parte derecha ha del Sublime como antes de "Actualizar" tienes solo el código de un card y al regresar después de la vista del navegador ya tienes 3. Y es que, cualquiera que haya utilizado Bootstrap debe saber que es la única forma de hacerlo, al menos antes de que WordPress genere las cards automáticamente.

    SALUDOS

  3. Muy bueno el vídeo. Una pregunta. En la parte final, cuando haces el ctrl+shift+g es solo para crear el div no? es que estoy usando otro editor (netbeans) y he metido toda la "card" en un div como en el vídeo pero a mano y solamente me aparece una vez la tarjeta. Gracias

  4. Hola, excelente tutorial. Una sola cosa, la imagen de background en la sección suscribir no me aparece, están correctas las rutas y también referencié al .css en el header con link, lo raro es que en el archivo style.css background-size: "cover" no cambia de color. Estoy usando Kate en Debian, y al resto de los parámetros me los coloreó de azul, menos a ese y sospecho que tiene que ver con la causa del problema. Si se te ocurre por qué puede ser te agradecería. Saludos

  5. hermano estoy viendo tu curso pero en esta etapa no se de donde sacar la imagen he echo de todo y nada que consigo una imagen como esa que tienes por favor ayuda y muchas gracias por esos videos tan bueno

  6. tus cursos son geniales… trasmitis mucha tranquilidad y paciencia a la hora de explicar. Lo que nunca entendí es donde hay que poner para ver esa parte del diseño adaptable, es decir, responsivo porque te salen las medidas etc. En cualquier navegador lo puedo ver esas medidas?

  7. te saludo desde ARGENTINA!! tengo que felicitarte,gracias a vos que explicas muy bien y simple me animó a encarar un proyecto muy bueno en diseño web!! te sigo en tu canal a la espera de los demas capitulos!! G-E-N-I-O-!!!!!!!

Leave a Reply