• Tuesday , 25 February 2020

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

Code Canyon
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

3d Ocean

Related Posts

37 Comments

  1. Hugo Mora
    March 5, 2019 at 14:37

    Cual es el atajo para hacer comentarios?

  2. Marketing Curso
    March 5, 2019 at 14:37

    Excelente !! muchas gracias!

  3. jonathan espinoza
    March 5, 2019 at 14:37

    jejejeje no me quiero imaginar lo que sera cambiarle algo a ese tema en un futuro

  4. betojaton
    March 5, 2019 at 14:37

    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

  5. Juegos Dinamitas
    March 5, 2019 at 14:37

    Tengo problem as que el condo no me sale y have to do talk cual el

  6. Jose Bautista Marchant Moreno
    March 5, 2019 at 14:37

    de donde saco la imagen de fondo que coloco

  7. Mario Sawers
    March 5, 2019 at 14:37

    Que increíble la cantidad de nuevas clases que tiene Bootstrap 4, mas facil que el anterior, mas intuitivo!…

  8. Daniel G
    March 5, 2019 at 14:37

    No es compatible con plugins

  9. Daniel G
    March 5, 2019 at 14:37

    No me funcionan los plugins

  10. superlativo
    March 5, 2019 at 14:37

    Excelente iniciativa ¿Por qué recomiendas usar Bootstrap en local, en vez de hacerlo por el CDN? Muchas gracias por compartir. Saludos

  11. Carlos Luis González
    March 5, 2019 at 14:37

    la parte final del footer no puedo visualizarla! gracias!

  12. Carlos Luis González
    March 5, 2019 at 14:37

    No me aparece el ícono de bootstrap

  13. VERAIMAGEN AGENCIA DE MARKETING
    March 5, 2019 at 14:37

    Nosotros decidimos usar pingendo para crear la plantilla index es algo mas rápido no crees?

  14. Juma Fajardo
    March 5, 2019 at 14:37

    de donde saca esa carpeta images???

  15. Jonathan Tellez Giron Muñoz
    March 5, 2019 at 14:37

    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

  16. Alan Fermin
    March 5, 2019 at 14:37

    Felicidades por el video..! Dónde se descarga el solid.svg?

  17. Aitorvaan1
    March 5, 2019 at 14:37

    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

  18. Rawed Abou
    March 5, 2019 at 14:37

    por que me perdiiiiiiiiiiiiiiiiiiiiiii 🙁

  19. Sijolo Ediciones
    March 5, 2019 at 14:37

    eeeh… maestro,,, un poco más al paso,,, frécome!!

  20. ivision
    March 5, 2019 at 14:37

    Buena chileno! 😉

  21. Luis E Aponte
    March 5, 2019 at 14:37

    Ayuda: El background: url(images/bg.png); no se me ve

  22. Luis Angel GR
    March 5, 2019 at 14:37

    El mejor video y curso que he visto

  23. DarkSantiandre
    March 5, 2019 at 14:37

    Jajaja amigo, explícanos como salieron 3 cards como por arte de magia, aun no logro entenderlo.
    Muy buen contenido, sigue así!

  24. Softecnico RD
    March 5, 2019 at 14:37

    Muy buen tutorial pero esta des actualizado y no sale tal como explica. Espero que tenga un tutorial mas actualizado, gracias.

  25. Sofy Torres
    March 5, 2019 at 14:37

    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

  26. Joseph Marquez
    March 5, 2019 at 14:37

    Hola, la web Estática esta disponible para descargr?

  27. Diego Andres Benitez Mendoza
    March 5, 2019 at 14:37

    hola que tal tengo una problema, no me sale la parte en que seleccionas y decis control shift mas g , podrias explicarme mejor por favor

  28. jose A boyer
    March 5, 2019 at 14:37

    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

  29. Fernando González
    March 5, 2019 at 14:37

    Como hiciste para que de un contenido pase a tres?, dices Ctrl+Shift+G pero no hace lo mismo el Sublime que en el tuyo… aún no puedo crear los tres contenidos 🙁 solo quedo en uno.

  30. Flavia Paz
    March 5, 2019 at 14:37

    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?

  31. FRANK FRR
    March 5, 2019 at 14:37

    muy bien como explicas exelente aportacion, es solo que cuando triplicaste las entradas no me salio me podrias ayudar porfavor algun consejo o algo?

  32. Ezequiel Cabrera
    March 5, 2019 at 14:37

    la imagen de ejemplo bg.png, la puedes subir para descargarla, ya que tiene una dimención, o simplemente cuales son las dimenciones para generar una. Muchas gracias (Y)

  33. João Gabriel Santos de Aquino
    March 5, 2019 at 14:37

    Te saludo desde Málaga España. Muchas gracias por el curso, tu explicas muy bien y es muy objetivo. +1 suscrito.

  34. Legend
    March 5, 2019 at 14:37

    Excelente! una pregunta, haremos custom type post para un portafolio? gracias!!

  35. Francisco Guzman
    March 5, 2019 at 14:37

    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-!!!!!!!

  36. Jose Mª R. T.
    March 5, 2019 at 14:37

    Que ganas de la segunda parte!!!

  37. Jorge Rivera
    March 5, 2019 at 14:37

    esperaré la segunda parte 🙂 Gracias por compartir tu conocimiento en tu canal.

Leave A Comment

You must be logged in to post a comment.