[ad_1]
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”
Cual es el atajo para hacer comentarios?
Excelente !! muchas gracias!
jejejeje no me quiero imaginar lo que sera cambiarle algo a ese tema en un futuro
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
Tengo problem as que el condo no me sale y have to do talk cual el
de donde saco la imagen de fondo que coloco
Que increíble la cantidad de nuevas clases que tiene Bootstrap 4, mas facil que el anterior, mas intuitivo!…
No es compatible con plugins
No me funcionan los plugins
Excelente iniciativa ¿Por qué recomiendas usar Bootstrap en local, en vez de hacerlo por el CDN? Muchas gracias por compartir. Saludos
la parte final del footer no puedo visualizarla! gracias!
No me aparece el ícono de bootstrap
Nosotros decidimos usar pingendo para crear la plantilla index es algo mas rápido no crees?
de donde saca esa carpeta images???
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
Felicidades por el video..! Dónde se descarga el solid.svg?
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
por que me perdiiiiiiiiiiiiiiiiiiiiiii 🙁
eeeh… maestro,,, un poco más al paso,,, frécome!!
Buena chileno! 😉
Ayuda: El background: url(images/bg.png); no se me ve
El mejor video y curso que he visto
Jajaja amigo, explícanos como salieron 3 cards como por arte de magia, aun no logro entenderlo.
Muy buen contenido, sigue así!
Muy buen tutorial pero esta des actualizado y no sale tal como explica. Espero que tenga un tutorial mas actualizado, gracias.
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
Hola, la web Estática esta disponible para descargr?
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
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
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.
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?
muy bien como explicas exelente aportacion, es solo que cuando triplicaste las entradas no me salio me podrias ayudar porfavor algun consejo o algo?
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)
Te saludo desde Málaga España. Muchas gracias por el curso, tu explicas muy bien y es muy objetivo. +1 suscrito.
Excelente! una pregunta, haremos custom type post para un portafolio? gracias!!
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-!!!!!!!
Que ganas de la segunda parte!!!
esperaré la segunda parte 🙂 Gracias por compartir tu conocimiento en tu canal.