Academia de desarrollo de temas en WordPress 5 con Bootstrap v4

1. Introducción: Bienvenido a la Academia de Desarrollo Temático de WordPress usando Bootstrap. Este es un curso de desarrollo de tema de WordPress totalmente actualizado usando WordPress versión 5 y el marco bootstrap 4. Si quieres llevar tus habilidades de WordPress al siguiente nivel, el desarrollo del tema de aprendizaje es perfecto para esto. Te permitirá construir sitios web personalizados de WordPress que se vean y se sientan exactamente como quieres que lo hagan. También te dará una ventaja sobre otros desarrolladores de WordPress utilizando los temas preconstruidos y tratando personalizarlos en base exactamente lo que están tratando de construir. Esto es lo que podrás construir para el final de este curso. Al final de esto, podrás construir casi cualquier tipo de sitio web nuevo que quieras usando WordPress o tomar cualquier sitio web existente y convertirlo a un tema de WordPress. ¿ Qué es exactamente un tema de WordPress? Para ver qué puede hacer WordPress, echemos un vistazo a algunos ejemplos. Esta es la página del blog para el tema que vamos a construir juntos. Tenemos el encabezado en la parte superior; vinculando a las páginas de inicio y blog, un subtítulo, una imagen de encabezado, y una superposición de texto. Entonces debajo de nosotros tenemos la entrada de blog listada a la izquierda y luego la barra lateral a la derecha. A continuación, usando exactamente la misma versión de Wordpress y el mismo contenido exacto, todo lo que he hecho aquí es cambiar a un tema diferente al hacer clic de un botón. Esto tiene la misma entrada de blog y también podemos ver que los enlaces de página son los mismos, pero una apariencia y sensación completamente diferentes. Otra vez cambiando el tema una vez más, así es como nos veremos usando otro tema preconstruido. Esto cambia por completo nuestra página de blog y todas las demás páginas de nuestro sitio. También lo mismo para este ejemplo dos, cambiando por completo el campo de nuestros sitios de Wordpress. En este curso, no solo estaremos haciendo el tema mínimo de WordPress, comenzaremos por crear una versión estática HTML y CSS de este tema usando Bootstrap 4. Aprender Bootstrap también es una habilidad valiosa en sí misma, pero luego pasamos a configurar WordPress y mirar exactamente lo que se necesita para convertir este sitio en un tema. Cubrimos todos los pasos incluyendo algunos de los conceptos más avanzados y desafiantes como campos personalizados, traducción de temas, formularios de búsqueda personalizados, uso de ganchos, y también algunas funciones personalizadas para obtener la funcionalidad exacta que queremos. Si quieres ponerte en serio sobre el desarrollo de tema de WordPress, insértate en este curso y te veré en clase. 2. ¿Qué es un tema de WordPress?: Sabemos para este curso vamos a construir en un tema de WordPress. Pero, ¿qué es exactamente un tema de WordPress? Bueno, sólo documentación oficial de WordPress. En la sección de lo que es un tema de tema, podemos ver que un tema de Word Press y cambia un diseño de los sitios web, y muchas veces cambiando el diseño, lo que luego cambiará cómo el usuario final ve nuestras miradas en el front-end, decir, qué es un visitar enfermedad. Básicamente un tema puede tener diferentes diseños, puede usar un diseño estático o sensible. Estará usando Bootstrap para crear un layouts responsive con varios anchos de columna. Eso generalmente toma todo el otro contenido de WordPress, bueno, si esa es la página que hemos creado, lo haremos si eso cualquier post de blog, cualquier medio como imágenes de videos y los muestra de cualquier manera lo que creamos en nuestro tema. Continuando más abajo, los temas están conformados por algunos archivos requeridos, como el index.php, y también el style.css, y pronto los agregaremos a nuestro tema. También estaremos agregando muchos más archivos de plantilla PHP, también estaremos creando archivos para Localización, que es lo que traduce nuestro tema. Se utilizará en múltiples archivos CSS y JavaScript para incluir Bootstrap y generalmente todo el resto de los contenidos que necesitaremos para construir nuestro tema. Si echamos un vistazo al lado terminado por aquí, esta es la piel del tema que vamos a estar construyendo para todo este curso. Incluirá muchas columnas de Bootstrap, filas, imágenes y texto para crear la versión final, que se ve aquí. Si vamos a la sección de blog, van a ser todas las entradas de blog que crearemos en WordPress, y va a recorrer por ellas y mostrarlas todas en esta página, junto con nuestra barra lateral en el lado derecho, lo que nos permitirá buscar a través de estos posts. Y también filtrar por los archivos, las categorías, o cualquier etiqueta que se añadirá. Si pasamos al tablero, y luego en la sección temática, este es el tema del spa Tranquil que hemos activado. Al instalar WordPress también tenemos temas por defecto los cuales vienen con él. Voy a activar un tema diferente llamado 2019. Entonces si volvemos a nuestro sitio y nos refrescamos, vemos estas mismas dos páginas de casa y blog. Ya que está usando la misma información, que actualmente está en WordPress, simplemente crearemos en un diseño diferente. También tenemos nuestras mismas entradas de blog. A pesar de que se ha aplicado un estilo diferente y el layout, este es el mismo contenido exacto, pero presentado de la manera diferente. También tenemos nuestra barra lateral abajo en la parte inferior. Estos son los mismos bloques de contenido que hemos creado en nuestro tema, pero simplemente dispuestos de una manera diferente. Volver a la sección temática, echemos un vistazo a una más. Este es el tema de 2017. Echemos un vistazo a esto, empezando por el hogar. Esto de nuevo se ve completamente diferente. A pesar de que aún tenemos nuestras mismas páginas, tiene una sensación completamente diferente a nuestro sitio original, y esto es lo que hará un tema, haciendo click en el blog. Todavía vemos todo el mismo contenido, como las entradas de blog que están todas listadas. Se ven estas mismas imágenes destacadas las cuales se agregaron, y también esta barra lateral de la derecha tiene todos los mismos bloques de contenido simplemente reordenados de una manera diferente. Este es el poder que tenemos como desarrollador de temas. Podemos crear cualquier tipo de sitio web que queramos usando WordPress, y esto nos permitirá crear nuestro sitio web Tranquil spa a medida que pasamos por el curso, junto con brindarte estas habilidades y conocimientos para construir cualquier tipo de sitio web de WordPress que te gustaría, ya sea para ti, o para un proyecto, para el negocio o para los clientes. 3. Configuración de Bootstrap 4: Bienvenido a la sección Bootstrap de este curso. Aquí es donde iniciamos las cosas con la creación de nuestro tema personalizado. En esta sección se trata de crear un HTML estático y sitios web CSS. Hamel creó exactamente cómo queremos que se vea nuestro tema de Wordpress. No obstante, no te preocupes por WordPress en este momento, que se factura esto como haríamos con cualquier sitio web HTML normal. Después manejamos la conversión a WordPress en una sección posterior. El primero que tenemos que hacer es agarrar el núcleo de Bootstrap, CSS y archivos JavaScript. Para ello, necesitamos de cabeza para obtener bootstrap.com. Esto nos llevará a la versión cuatro de Bootstrap. Estoy usando la versión 4.3, y te recomendaría usar la misma si es posible. Para empezar con Bootstrap, voy a pasar a la documentación en la sección de introducción. En aquí tenemos algunos enlaces Quickstart, tenemos un enlace CDN para el CSS, y también el JavaScript. Entonces debajo de esto tenemos una plantilla de inicio para nuestra página de índice, y volveremos a agarrar esto pronto. A pesar de que voy a dar clic en el botón de descarga del menú, luego dar clic en el enlace CSS compilado y JavaScript, para luego iniciar la descarga con este botón aquí. Obvio en esta descarga compilada de CSS y JavaScript, que empezaremos muy rápido. Una vez hecho esto, podemos hacer click en el paquete y descomprimir. Una vez que esto se descomprima, voy a mover esto al escritorio. Vamos a arrastrar esto, y luego voy a renombrar esto. El nombre que voy a llamar a esto es tranquil-bs. Esto es por la versión tranquila boost up de nuestro proyecto. Posteriormente se creará un tranquil-wp, que es para nuestra conversión Wordpress. Lo siguiente que queremos hacer es agarrar las imágenes. Con este curso se incluyen las imágenes. Adelante y agarra esos si aún no lo has hecho, y luego arrastra esto a nuestra carpeta. Tendría Visual Studio Code abierto aquí, y puedes usar cualquier editor de texto que te guste para este curso. Para empezar en VS Code solo tenemos que arrastrar sobre nuestra carpeta del proyecto, y luego esto se abrirá con los contenidos en el ciber-cibernético. Es versión compilada utiliza varios archivos CSS y JavaScript. Solo voy a estar usando el bootstrap.min.css para este curso. Que es una versión minificada del CSS principal, que incluye los diseños y componentes de Bootstrap disponibles que necesitamos. También hay diferentes versiones, si quieres hacer uso de la cuadrícula CSS o de los reinicios de Bootstrap, y puedes saber más sobre lo que se incluye en estos archivos en la documentación de Bootstrap, si quieres. A continuación tenemos la carpeta JavaScript, que está justo en el buttom aquí. Lo mismo vale para el JavaScript, solo voy a estar usando el archivo principal bootstrap.min.js. Entonces por supuesto tenemos las imágenes que se suministran para este curso. También sabrás que no es un archivo index.html. Esto no se proporciona, por lo que necesitamos ir y crear uno nosotros mismos, en las raíces de este proyecto. En la ruta principal, vamos a dar click en nuevo archivo y vamos a crear nuestro index.html. Si volvemos al navegador y luego volvemos a la sección de introducción. Ahora podemos copiar las plantillas de inicio que buscamos antes, sin embargo puedes seleccionar todas y copiar, o simplemente puedes hacer clic en el botón de copiar en la esquina superior. Copia esto y luego pasa a nuestro index.html. Ahora podemos pegar esto en. En primer lugar, tenemos el CSS Bootstrap, que está arriba en la sección de cabeza. Este kit básico de inicio apunta a los archivos CSS y JavaScript que necesitamos desde bootstrap y estos alojados en CDN. Puedes ver por estos enlaces aquí. Cambiemos esto para apuntar a nuestros archivos locales que agregamos a nuestro proyecto, empezando por el CSS Bootstrap. En la href, podemos eliminar esto y luego podemos apuntar esto a nuestra carpeta CSS, css/bootstrap.min.css. Abajo, entonces podemos mirar nuestros JavaScripts, desplazarse hacia abajo hasta el fondo en las secciones de script, tenemos tres scripts diferentes aquí. En primer lugar, tenemos jQuery, que podemos dejarlo por ahora ya que no tenemos esto instalado en nuestro proyecto. También podemos eliminar el Popper.js, que es el guión medio justo aquí. Esto no es necesario para nuestros proyectos, y esto solo es necesario para ciertos componentes de Bootstrap, como cuando se usan las sugerencias de herramientas y los enlaces caídos. No obstante, si sí pretendes personalizar la plantilla, recrea, hacer uso de éstas, puedes por supuesto, dejar esto en, entonces necesitamos cambiar el archivo core Bootstrap JS para que apunte a nuestro archivo local. Si eliminamos la fuente aquí en este enlace CDN, entonces cambia a nuestra carpeta JavaScript y el archivo que queremos es bootstrap.min.js. A la par del core bootstrap CSS que nos han proporcionado, también queremos agregar nuestro propio estilo personalizado. Para anular cualquiera de los estilos predeterminados de Bootstrap, que podemos tratar con un archivo CSS personalizado. De vuelta en la barra lateral, en la carpeta CSS y crea un nuevo archivo, y se llama Custom.css. Llevaría a entonces vincular esto en el index.html a puntos a este nuevo archivo. Abierto en la parte superior, vamos a agregar esto justo después del núcleo Bootstrap CSS. Añadamos un comentario de CSS personalizado. Podemos entonces añadir nuestro enlace. Esta hoja de estilo es una hojas de estilo y href apunta a nuestra carpeta CSS, y el nombre era custom.css. Al igual que con cualquier proyecto sobre sitio web, debemos incluir nuestras propias hojas de estilo personalizadas last. Posteriormente se cargarán en último lugar y anularán cualquiera de las hojas de estilo anteriores si es necesario. En nuestro caso, el CSS Bootstrap personalizado. El último que debe hacer es cambiar el título de esta página para ser tranquilo spa. Podemos darle un guardado a este archivo, voy a ir al index.html, copiar la ruta, y luego pegar esto en una nueva pestaña del navegador, para abrir esto. También puedes entrar a tu carpeta de proyecto y hacer doble clic en la página de índice para llevarte a esto, y ahora vemos el texto Hello World, que es de nuestro código de muestra, que es h1 justo aquí. Eso es todo ahora para nuestra configuración del proyecto. Te veré ahora en el siguiente video donde empezaremos a personalizar nuestro tema añadiendo Google Fonts. 4. Agregar fuentes personalizadas de Google: Ya que estamos creando nuestro propio tema personalizado, somos libres de hacer uso de cualquier tipo de fuente que quisiéramos. Voy a hacer una noticia de una fuente de Google en su tema, y por supuesto puedes elegir cualquiera de las que prefieras. Puedes tener una búsqueda de fuentes de Google, o puedes dirigirte a fuentes dot google.com. Echa un vistazo a estos y selecciona cualquiera que prefieras para el tema, o puedes seguir junto con el mismo que yo, que se va a llamar merriweather, así que hagamos una búsqueda de merriweather y este es uno que queremos justo aquí. Desde el desplegable aquí podemos seleccionar qué versión queremos. Voy a estar usando una versión ligera, que es ligera 300, así que selecciona esto, y luego para agregar esto, podemos hacer click en el símbolo más justo aquí. Esto luego lo agrega al abajo en la parte inferior y luego podemos ampliar esto para obtener parte de la información que necesitamos para incluirla en nuestros proyectos. Eso es todo lo que podemos incluir en estas hojas de estilo en nuestro proyecto copiando el enlace justo aquí, después pasar a nuestra página de índice. Cierra estos abajo, por lo que el index.html, y luego incluimos esto justo por encima de nuestro CSS personalizado, por lo que las fuentes personalizadas. Entonces justo después de esto, podemos pegar esto en. Ahora podemos volver a los sitios web de Google Fonts, y puedes ver cómo configurarlo como regla CSS en nuestras hojas de estilo personalizadas. Abajo en la parte inferior, podemos copiar esta línea aquí, que es para la familia de fuentes, y luego otra en nuestro CSS personalizado, eso es en este extremo. Primero agarremos el selector de cuerpo y luego peguemos en la familia de fuentes, que va a buscar un merriweather si se puede encontrar, si no, volverá por defecto a un serif estándar. Dale a esto un guardado, y luego vuelve al navegador, vuelve a cargar nuestra página de índice, entonces los factores necesitan ahorrar. El index.html le da a eso un guardar, y luego volver a cargar. Ahora ve las fuentes personalizadas ha tomado efecto en el navegador, y esto es todo lo que necesitamos hacer para incluir fuentes personalizadas de Google en nuestro proyecto. A continuación pasaremos a crear una sección de encabezado. 5. Navegación entre encabezados: Actualmente sólo tenemos un ejemplo básico de Hello World de las plantillas de arranque bootstrap. Cuando los órganos cambien esto agregando la navegación superior, irá a la versión terminada aquí. Esta va a ser la barra de navegación superior, que está aquí. encima del lado izquierdo, tendremos un enlace de inicio con un título de sitio. Y luego a la derecha tendremos nuestros enlaces. Si reducimos el navegador hacia abajo, esto será totalmente sensible, y esto también caerá a un botón, que al hacer clic en él para obtener nuestros enlaces de menú en dispositivos más pequeños. Empecemos de nuevo en el index.html. Lo primero que voy a hacer para no tener ningún problema en el CSS de Bootstrap, quiero saber si estos dos atributos de integridad y también el último de origen cruzado, luego traer esto de nuevo en la misma línea. También lo mismo para el JavaScript en la parte inferior. la única forma en que vinculamos nuestra versión minificada, podemos quitar el origen cruzado en la integridad y luego darle a esto un salvamento. El siguiente paso es quitar nuestro HelloWorld. El código de muestra. Ya no necesitaré esto. En cambio vamos a empezar con un encabezado. Abre el encabezado y luego anidado en el interior tenemos los elementos nav. En el elemento nav va a contener dos cosas. En primer lugar, en el lado izquierdo, vamos a tener el título del sitio, que pareces, y luego el menú enlaza a la derecha. Estos enlaces de menú colapsarán en el botón desplegable en dispositivos más pequeños. Empecemos agregando estos ahora. Empecemos con nuestro enlace, que va a ser para el título del sitio de spa tranquilo. Esto va a tener algunas clases de Bootstrap, si guardamos esto, y luego echa un vistazo a esto. Podemos ver que solo son textos bastante estándar en este momento. Empecemos en los elementos de navegación agregando algunas clases de Bootstrap. El primero es el simple navbar. Si le damos a esto un guardado y luego recargar, podemos ver que esto ahora se mueve desde el borde superior. Podemos ver qué estilos se han aplicado entrando herramientas de desarrollador con el botón derecho e inspeccionar. Si luego hacemos click en el selector y luego tenemos sobre nuestra barra de navegación. Asegúrate de que esta línea de navegación esté resaltada y luego a la derecha podemos ver qué estilos se han aplicado por bootstrap de esta clase navbar. Podemos ver que utiliza el cuadro flex CSS como el tipo de pantalla. También estamos usando algún relleno que se movió desde la esquina superior, que ya hemos visto antes. Podemos agregar clases adicionales a esto también para que justo después de la barra de navegación, pero agrega navbar, expand-md, dale a esto un guardado y estos estilos se aplicarán sobre los dispositivos de tamaño mediano. Si recargamos esto, podemos ver en la consulta de medios, estos estilos se aplicarán cuando el ancho mínimo de pantalla sea de 768 píxeles. Si lo hacemos encoger esto por debajo de 768. Apenas un poco más lejos, cargamos. Podemos ver que apenas ahora tenemos la barra de navegación aplicando desde antes. Ya no tenemos la segunda clase aplicando. Esta clase de expansión de barra de navegación establecerá el CSS flexionado con la fila sin rap, como podemos ver aquí, y justificará que el contenido sea flexed start, que está terminado en el lado izquierdo. Entonces agreguemos algunos colores de fondo para que esto destaque un poco más. Justo después de esto, podemos añadir la luz navbar y también bg-light. Podemos usar cualquier combinación de estos colores aquí. Estoy usando la luz de barra de navegación, que solía usarse con colores de fondo claros, y luego bg-light para especificar el color de fondo de luz real del nav. Si recargamos, ahora podemos ver toda esta diferencia en segundo plano. Ahora vamos a trabajar con nuestro enlace de tranquilo spa. Esto va a tener una clase, una clase bootstrap de la marca Navbar-y luego solo podemos añadir un vacío [inaudible], el enlace a nuestra página de inicio. Si ahora guardamos esto y recargamos el navegador, ahora vemos que esto aplica un estilo, color y propiedades de espaciado a nuestro enlace. A continuación voy a crear el botón, que es para nuestro menú desplegable. Tan solo un botón HTML normal. Por lo que dentro de aquí, podemos agregar algunas clases de Bootstrap. El primero va a ser navbar-toggle, y luego los atributos de tipo de botón. No vamos a agregar ningún texto dentro de aquí porque pronto estaremos agregando un ícono y este ícono son las líneas libres que se ven en la versión terminada de en la esquina. Por lo que los siguientes dos atributos que agregamos el botón estarán relacionados con la pantalla pequeña y el contenido desplegable que controla. En primer lugar, agreguemos el data-toggle para que sea igual al colapso, y luego también podemos agregar el objetivo de datos, y vamos a establecer que esto sea igual a la ayuda. Entonces agreguemos el hash y llamemos a esto el navbar nav. Aquí vemos un bonito data-toggle y declaramos que queremos que el contenido colapse cuando se ha hecho clic en este botón. Pero, ¿qué contenido queremos colapsar? Bueno, si miramos la versión terminada, esto va a colapsar y ampliar este menú de navegación. Todavía no hemos creado esto, pero una vez que lo hagamos, vamos a dar esta AYUDA de navbar-nav. Este data-target puede ser cualquier selector CSS que queramos. Por lo que sólo lo usaremos como JavaScript regular. Si quieres apuntar a clase, podemos usar el punto o usar el hash para un ID. Justo antes de crear el div que queremos controlar por el botón. Voy a añadir un lapso, que se va a sumar en los iconos que acabamos de ver antes. El span va a tener la clase para agregar estos iconos en de nav bar toggle icon. Vamos a echar un vistazo a esto en el navegador, y abajo, hasta la pantalla más pequeña y ahora tenemos el botón con los iconos libres de nuestro hilado. Si ampliamos el navegador, también deberíamos ver que este botón desaparece porque hemos agregado este expandir en dispositivos medianos. Ahora vamos a crear nuestros div follow links. Este va a ser el contenedor para nuestro hogar y nuestro enlace de navegación de blog y va a ser el contenedor, que es botón alterna abrir y cerrar. Pongamos a trabajar justo debajo de nuestro botón. Añadamos nuestro div que es nuestro contenedor. La primera clase va a ser igual al colapso. Esto se utiliza para ocultar el contenido cuando lo necesitamos. A continuación tenemos colapso navbar. La segunda clase bootstrap agrupará todos los contenidos juntos, y también se usará en conjunto con el navbar expand md. Sabe esconder este contenedor debajo estos puntos de ruptura y el tercero es para el flex box CSS, esto es justify content end y esto empujará nuestros enlaces hacia el lado derecho de la navegación. Dentro de esta tabla, podemos seguir adelante y crear nuestros enlaces, que va a ser una lista desordenada. Lista desordenada también toma en algunas clases son el estilo y el diseño y el primero va a ser navbar-nav. A continuación añadimos nuestros artículos de lista. Las clases de elementos de lista van a ser elemento nav, y luego anidados dentro tenemos un enlace mediante el uso de un elementos con los textos de casa. Este enlace va a tener una clase de enlace de navegación y luego podemos configurar el borrador de odio para que apunte a nuestro índice de punto HTML. Bien, copiemos esto y agreguemos una vez más para nuestro blog. Este primer elemento de la lista, pega esto en. Esto va a ser para el blog y también puedes cambiar el href para que sea nuestro blog dot HTML. Por supuesto, no hemos creado esto, pero llegaremos a esto en un video posterior. Entonces dale a ese archivo un guardado y luego pasa al navegador. Recarguemos y ampliemos esto. Vemos en las pantallas más grandes tenemos nuestros enlaces de casa y blog, y luego encuentra al botón se esconde el contenido en estos pequeños dispositivos. Pero si hacemos clic en este botón en la esquina superior, no vemos caer los enlaces. Esto se debe a que si vamos a nuestro botón, establecemos el objetivo de datos de navbar-nav. Ambos no agregaron esto a nuestro contenedor. Dentro de este div, agreguemos el ID de navbar-nav. Dale a esto un guardado, recarga el navegador y ahora obtenemos un trabajo en el menú desplegable. Expande esto y esto ahora vuelve a la vista de pantalla completa. Bueno, entonces esto es todo ahora para el menú, y seguiremos con el encabezado siguiente cuando agreguemos la imagen de fondo destacada. 6. Sección de imágenes principales: La siguiente etapa de nuestro Encabezado es agregar esta imagen destacada, que es el fondo que vemos aquí. Posteriormente en el curso, también nos permitirá ser cambiados en el panel de WordPress sobre un control por parte del usuario. En primer lugar, vamos a seguir adelante y añadir una nueva sección y aún dentro de este elemento de cabecera. Localicemos la etiqueta de cabecera de cierre. Entonces podemos crear una nueva sección. El apartado va a tener una clase Bootstrap de fluido contenedor. Para colocar una página en Bootstrap, utilizamos una serie de contenedores, filas y columnas, que utiliza el cuadro flex CSS debajo del capó. Existe una clase de contenedor que agrupa el contenido en un contenedor de ancho de píxel sensible, lo que deja un hueco en el lado derecho e izquierdo de la página. Pronto veremos esta alternativa. Ahí está este fluido de contenedor como acabamos de utilizar aquí, que proporciona un contenedor de fluido el cual se estirará hasta el 100 por ciento del ancho de pantalla disponible. Con si tipo se puede utilizar como referencia para centrar y separar nuestro contenido dentro. Anidados dentro de este contenedor, agregamos una clase de fila. Las filas nos permiten contenido NES dentro y suspiran el contenido mediante el uso de columnas, y lo veremos muy pronto. Pero por ahora vamos a ir a sumar nuestra fila. Esta va a ser una clase en una envoltura div. En el interior aquí podemos añadir nuestra imagen, que va a ser la imagen de fondo que hemos visto antes. El origen de la imagen va a ser de la carpeta de imágenes que se proporcionaron con este curso. En el interior, hay una imagen llamada Lake.JPEG. También podemos agregar el texto antiguo de fondos de lago luego una clase que es una clase personalizada, llegaremos pronto de Header_img. Justo después de esta imagen, también vamos a añadir un div. Este div va a ser para el texto que se coloca sobre la imagen. Entonces en el interior podemos agregar los elementos p para agregar algún texto. Voy a añadir tema de ruta de primas totalmente responsive para WordPress. Puedes agregar cualquier texto que te guste dentro aquí, y luego vamos a añadir algunas etiquetas de break, solo para dividir esto en dos líneas diferentes. Esto después de responsive y también después del tema. Podemos controlar estos textos en el CSS. También necesitamos agregar una clase. Esto de nuevo es una clase personalizada de texto de entidad. El texto de la característica es una de nuestras propias clases personalizadas y nada que ver con Bootstrap. Simplemente vamos a aprovechar nuestras propias clases también para poder controlar estos textos en el CSS, o al navegador. Después recargar, ahí está nuestra imagen y también nuestro texto. Nuestro texto ahora está sentado debajo de la imagen. Este no es el resultado que queremos para nuestro proyecto final. Vamos a seguir adelante y agregar algunas clases CSS personalizadas y también algunas clases de Bootstrap también, para hacer que este texto superponga la imagen. En primer lugar configuremos las clases de Bootstrap. Podemos establecer la fila circundante para que sea una posición de relativa. Vamos a nuestra fila circundante que está justo aquí, podemos agregar el relativo de posición bootstrap, y esto es exactamente lo mismo que entrar en nuestro CSS y establecer en una posición relativa, pero de esta manera es solo una clase bootstrap, y luego bootstrap se encarga de agregar todo el CSS que necesitamos. Si guardamos esto y luego recargamos, abrimos las herramientas de desarrollador, ves que la clase relativa de posición ha agregado el valor de posición CSS de relativo, y luego bootstrap también se agrega importancia al final. Sólo asegúrate de que nada anula esto. A continuación, necesitamos establecer el texto para que sea una posición absoluta. En el div que rodea nuestros elementos p, una clase, nuestra posición absoluta. Ahora deben mover el texto. Si recargamos el navegador sobre la parte superior de la imagen, configurando el texto para que sea una posición de absoluta, sacaremos el texto el flujo normal de la página web. Entonces se posiciona al contenedor relativo más cercano, que es nuestra fila, la siguiente etapa, es centrar este texto en medio de la imagen. Hagamos esto yendo a nuestra fila, que está justo aquí. Podemos configurar el tipo de pantalla para que sea flexbox con el flujo del tablero. También podemos establecer el valor flexbox de justify content center, que alineará el contenido en el centro del eje principal. Guardar y recargar. Esto nos deja a mitad de camino, ahora tenemos el contenido en el centro horizontalmente. Ahora sólo necesitamos la alineación vertical también. Busco hacer esto agregando una clase más a nuestra fila. Esta clase es alinear elementos, centro del navegador y ahí vamos. Posicionamiento como este solía ser mucho más difícil antes de flexbox. Tanto la propiedad del centro de alinear ítems, alinearán nuestro contenido ahora en el eje transversal u opuesto, que nos da una perfecta alineación horizontal y vertical. Un pequeño retoque que podemos hacer es fijar el texto para que también se centre. Por el momento todo está alineado a la izquierda del contenedor. Nuevamente, podemos aplicar esto a nuestra fila justo después del centro de alinear ítems. Podemos agregar centro de texto y ahí vamos. Ya podemos terminar esta sección con un poco de CSS personalizado. Ya tenemos una clase personalizada de imagen de cabecera que usará ahora. Ahora agreguemos uno a nuestro texto circundante div dos. Aquí está nuestro texto y en el contenedor circundante, después de posición absoluta. Añadamos feature dash BG, esto se usará para agregar la caja circundante. Si vamos a la versión terminada que rodea los textos, así podremos escribir un poco más fácilmente sobre la imagen. Este fondo también sería el 60 por ciento del contenedor en pantallas más grandes, luego saltar hasta ser el ancho completo en pantallas más pequeñas. Vamos a trabajar más en el CSS personalizado. primer paso es establecer la imagen para que sea un ancho máximo del 100 por ciento. Entonces podemos usar la clase de entidad BG para comenzar a crear nuestro fondo. El fondo se va a crear usando un color RGBA. Entonces le damos esta bonita transparencia que podemos ver aquí. Los cuatro valores van a ser 255, 255, 255, y luego el cuarto es para la opacidad. Voy a establecer que esto sea 30 por ciento, que es un valor de 0.3. Asegúrate de que esto sea un guión. Ahora en el ancho, el ancho va a ser de 100 vw para las pantallas más grandes, que abarcarán el ancho completo del navegador o el puerto de vista. El radio fronterizo de 10 píxeles, nos da un ahorro. Abre la pestaña y vuelve a cargar. No ha cambiado mucho ahí, creo que solo necesitamos guardar el índice para la clase personalizada. Dale una oportunidad a esto. Ahora hagamos esto un poco más grande. Tenemos un div circundante de texto de característica. Agarremos esto. El tamaño de fuente va a ser de dos REMS. También la altura de línea que aumentan para ser cuatro REMS, recarga. El siguiente paso es agregar una altura mínima a nuestra imagen de cabecera. Desplazemos hacia abajo hasta el guión bajo del encabezado IMG, Todo lo que vamos a hacer aquí es establecer la altura mínima de la velocidad de imagen 25 VH. Significa que la imagen siempre será un mínimo de 25 por ciento de la altura de la barra de vista. El último que hay que hacer en nuestro CSS es crear una consulta de medios. Si echamos un vistazo a la versión terminada, haz que el ancho de este fondo sea del 60 por ciento en las pantallas más grandes. Como medios, apuntemos a las pantallas. También podemos igualar nuestros puntos de ruptura con los puntos de ruptura Bootstrap. El ancho mínimo de 768 píxeles. Va a agarrar la característica BG y ajustar el ancho a 60 vw. En pantallas más grandes, el fondo será del 60 por ciento, luego en pantallas más pequeñas, el fondo será del 100 por ciento. Guarda este archivo, en el navegador. Si lo encogemos y cerramos las herramientas de desarrollo para obtener más espacio, el fondo y los textos para nuestra pequeña pantalla es el ancho completo. Si aumentamos el espacio disponible en pantalla, esto ahora cae para ser del 60 por ciento, que es exactamente lo que queríamos. Esto es todo para nuestro encabezado ahora. Apenas rápido antes de irnos, quiero mostrarles la diferencia entre el contenedor y el fluido contenedor. Actualmente hemos establecido la sección para que sea fluido de contenedor. Si solo configuramos esto en el contenedor y luego recargamos, esto hace que el contenedor sea un ancho fijo basado en píxeles, lo que significa que hay un espacio en blanco en el lado izquierdo y derecho. Donde como contenedor fluido que teníamos antes, se estirará a toda la anchura del navegador, y haremos más uso de estos contenedores a medida que pasemos por el resto del curso. 7. Sección de bienvenida: En el último video, terminamos la sección de encabezados. Si echan un vistazo a la versión terminada, ahora vamos a pasar a esta 'sección de Bienvenido', vemos aquí. Esto nos dará la oportunidad de trabajar con columnas para colocar contenido en partes iguales o tres partes en nuestro caso. Si encogemos el navegador, vemos esta sección, junto con todas las secciones pequeñas, es de plena respuesta. Entonces abasteceremos en una vista de pantalla más pequeña. En el índice punto HTML. Este contenido irá justo debajo del encabezado que terminamos. Vamos a hacer esto ahora. Localizamos la etiqueta de cabecera de cierre. El primero que hay que hacer es crear un div. Esto va a tener una clase de fluidos de contenedores, al igual que la sección de encabezado, también lo hizo. Entonces también una clase de Tech Center, para sumar nuestro posicionamiento de texto. Entonces vamos a añadir algo de relleno. Vamos a usar esto con py-5. Ahora esto puede parecer un poco confuso. Vamos a la documentación de Bootstrap en la barra lateral. Si vamos a utilidades y luego bajamos al espaciado. Esto explica cómo podemos usar el margen y el relleno como nuestros nombres de clase. Tenemos que acumular estos con una P para relleno o una M para margen. En nuestro caso, hemos usado py-5. P para relleno y luego podemos usar, los valores superior, inferior, izquierdo y derecho. O podemos establecer las x e y para aplicarlas a la parte superior e inferior o izquierda y derecha, seguido de un tamaño de cero a cinco. En nuestro caso, la py es sin duda el valor de relleno en la parte superior e inferior. También puede tener una jugada con estos diferentes valores también para ver a tu proyecto. Lo siguiente que quiero hacer es crear una fila la cual va a ser envolvente para nuestros textos y también este ícono en el medio. Dentro de nuestro contenedor, agreguemos un segundo div con la clase de fila. Entonces anidarlo dentro aquí podemos agregar nuestras columnas, Bootstrap utiliza una cuadrícula de 12 columnas. Si establecemos un div para que tenga seis columnas de ancho, ocupará la mitad del ancho de la pantalla. Por el momento, cada una de estas tiene cuatro columnas, por lo que cuatro, cuatro, y cuatro. También podemos configurar nuestro texto Welcome to tranquil spa para que sea del tamaño de seis columnas. Después lo compensará por un valor de tres, lo que empujará esto hacia el medio. Dar tres columnas a la izquierda y luego tres columnas a la derecha. Dentro de nuestra fila, vamos a añadir el div. A la clase para establecer nuestras columnas se le va a llamar -md, -six, lo que significa que este será el ancho de seis columnas en dispositivos medios y superiores, todo el ancho completo en dispositivos más pequeños. Como mencionamos antes, también podemos compensar esto en dispositivos medianos por tres columnas. Si ahorita guardo y luego vuelvo a cargar, no ves nada porque aún no hemos agregado ningún contenido. Si sumamos nuestro nivel tres rumbo dentro aquí con un texto de, 'Bienvenido a Tranquil Spa. ' Ahora deberíamos poder guardar y luego ver algo en la pantalla. El encabezado de nivel tres ocupa seis columnas o la mitad de la cuadrícula de 12 columnas. Las seis columnas restantes se han dividido a ambos lados porque compensamos esto por un valor de tres. A continuación necesitamos agregar nuestro icono o nuestra imagen justo debajo. El origen, esto está en la carpeta Imágenes. El imagen que se ha proporcionado para esto es divisor morado, el texto antiguo del divisor dos. Después una clase de W25. Nuevamente, si volvemos a las utilidades de Bootstrap, podemos echar un vistazo al dimensionamiento. W25 fijará el ancho en 25 por ciento. W50 establecerá el ancho en 50 por ciento y así sucesivamente. Guarda esto y luego podemos echar un vistazo a esto en nuestra recarga de proyecto. Está bien, bien. El siguiente paso es bajar y sumar estas imágenes. Estas imágenes también van a tener un envoltorio que va a ser un div. Esta va a ser una fila separada también porque estamos en una nueva línea. Entonces dentro de esta fila vamos a crear tres nuevos divs. Cada una con un ancho de cuatro columnas. Justo después de esta fila aquí, pero aún dentro de nuestro contenedor. Eso es sólo un error ortográfico ahí. De acuerdo, justo después de este div aquí, vamos a hacer algo de espacio y luego añadir una nueva fila. El div con la clase de fila, también va a agregar algunas clases adicionales a este div. También vamos a sumar algún margen a la parte superior. Agrega algo de espaciado que es un valor de cuatro. Ir a configurar el tipo de pantalla para que sea flex usando d flex y luego agregar algo de espaciado Flexbox con justificar contenido alrededor. En el interior aquí podemos echar un mejor vistazo a cómo funcionan las columnas. Podemos entonces añadir una clase de col sm cuatro. Significa que está en pantallas pequeñas y por encima de esta mesa, la mitad del ancho de cuatro columnas. Si pegamos esto en dos veces más, digamos a, b, y c. Echa un vistazo a esto en el navegador. Cada uno de estos tres divs ocupará un espacio igual. En lugar de a, b, y c, queremos agregar una imagen y luego algunas texturas a continuación. Solo eliminemos estos dos divs por ahora. En lugar de un, podemos agregar una imagen. El origen de la imagen va a ser la carpeta de imágenes. Entonces el makeup.jpeg, componen imagen como el alt. Entonces podemos agregar algunas clases de Bootstrap aquí. Voy a construir esto como una tarjeta Bootstrap. Pasará a la documentación. Ya vemos cómo se verá la tarjeta. Si vamos a los componentes, entonces abajo a una tarjeta. Hay muchas variaciones diferentes que podemos usar. Quiero usar uno muy simple para conseguir un layout muy similar a éste. Vamos a utilizar la tarjeta en la imagen de tarjeta, imagen superior. Cuerpo de tarjeta para la sección bomba. Entonces tarjetas texto para los contenidos reales, lo que nos dará algún bonito diseño y estilo. En primer lugar, en imagen, podemos agregar la clase de tarjetas img top. Entonces un div para el contenido real justo debajo. Este div tendrá una clase de cuerpo de tarjeta. Entonces anidado dentro de nuestro texto. Aquí un maquillaje. En lugar del ampersand, voy a usar una entidad HTML de AMP. Este texto necesita una clase de texto de tarjeta. De acuerdo, así que guarden esto y vean cómo se ve esto. Solo tenemos un div al minuto por lo que esto está centrado en el medio, pero esto se va a empujar hacia un lado una vez que agreguemos nuestro segundo, y tercer div. Si echamos un vistazo a la versión terminada, podemos ver en la imagen que tiene esta esquinas redondeadas. Se trata de una novedosa clase de utilidad Bootstrap que se está proporcionando. Podemos agregar esto como una clase sobre imagen de la imagen de la tarjeta superior. Esto es círculo redondeado. Esto es todo lo que necesitamos agregar para ahora transformar nuestra imagen. En lugar de volver a escribir todas estas clases, voy a copiar este div y luego pegar esto en dos veces más. El medio, si miramos el proyecto final, éste va a ser la imagen de las velas y luego necesitan textos de las instalaciones de spa, este probablemente maquillaje, este es candles.jpeg, el texto antiguo de la imagen de las velas luego las instalaciones de spa. Todo el resto de las clases se mantendrán igual. El tercero va a ser para el retiro, retreat.jpeg. La imagen de maquillaje ahora es imagen de retiro. Después el texto al final, haré un recorrido. De acuerdo, veamos cómo esto está mirando hacia atrás en el navegador. Refrescar hay las tres imágenes. Todo bien. De acuerdo, entonces ahora solo hay una o dos cosas más que necesitamos hacer solo para terminar esto. Si echamos un vistazo a la versión terminada, podemos ver que las imágenes son un poco más pequeñas y el texto es un poco más grande. Esto se debe a que si miramos nuestra versión, hemos usado todas las 12 columnas disponibles. Entonces cuatro, cuatro, y cuatro. Voy a hacer esto un poco más pequeño cambiando los tres para que sean un valor de tres. Guardar, refrescar. Ahora tengo un poco más de espaciado alrededor de las imágenes. Todos estos siguen centrados porque hemos justificado el contenido alrededor, entonces tenemos igual espacio por todos lados. A continuación, podemos hacer que el texto en la parte inferior sea un poco más grande anulando los estilos Bootstrap. Se ha aplicado al texto la clase Bootstrap de texto de tarjeta. Vamos a nuestro CSS personalizado, justo encima de la consulta de medios. Podemos agregar el texto de, 'Sección de Bienvenido'. El único estilo que necesitamos agregar es el texto de la tarjeta. Voy a necesitar que esto sea un tamaño de fuente de 1.2 rems. Abre Chrome, recarga. Ahora eso se ve mucho mejor y más como la versión final. Acabemos de terminar con la sección de bienvenida y echemos un vistazo a cómo podemos usar columnas junto con el uso de diferentes utilidades de Bootstrap. Gracias y nos vemos la próxima vez. 8. Sección de últimas ofertas: HTML: Estamos haciendo buenos avances con nuestro tema bootstrap y ahora es el momento de pasar a lo último de la sección. El apartado estará justo debajo de esta sección de bienvenida que creamos en el último video y si vas a la versión final aquí, esta es una sección que vamos a estar creando ahora. Nos dará más práctica usando tarjetas y también columnas para maquetación, junto con mirar clases de bootstrap pequeñas las cuales están disponibles. En este video, vamos a estar agregando todo el HTML para la sección junto con las clases de bootstrap necesarias. No obstante, pequeñas cosas como el precio sobre la parte superior aquí serán CSS personalizado, y pasaremos al estilo en el siguiente video. En los pabellones con el HTML en nuestra página de índice. Bajemos al fondo por debajo de los divs de cierre. Justo encima del JavaScript, podemos crear un nuevo div. Este nuevo div va a tener una clase de fluido de contenedores. Queremos que el texto esté alineado en el centro, para que podamos tener clases de bootstrap. Vamos a tener un fondo oscuro el cual puedes ver justo aquí. Podemos hacer esto con una clase bootstrap de bg-dark y luego finalmente algún relleno en la parte superior e inferior, que podemos agregar con PY para el eje y y el valor de cinco para mantenerlo consistente. En el interior de aquí sumamos nuestra fila familiar. Por lo tanto, agrega un nuevo div con la clase de fila. Eso es todo lo que necesitamos para este. Entonces dentro vamos a crear el título, que es las “Últimas Ofertas de Spa”. Haremos esto de una manera similar a ésta arriba en la parte superior. Vamos a crear un div o una sección con un lapso o ancho de seis columnas y luego lo compensaremos tres columnas para colocar esto en el centro. Entonces abre el div, la clase, col-md, por lo que se trata de seis columnas en dispositivos medianos y ambos, lo que significa que cualquier cosa por debajo de los dispositivos de tamaño mediano será ancho predeterminado. También podemos proporcionar las compensaciones en dispositivos medianos para que sean tres columnas, empujando hacia el centro de la página. Nuestro título en el h3, esto va a tener la clase de diapositivas de texto. Ya que estamos usando bonitos colores de fondo oscuros y el texto de “Últimas Ofertas de Spa”. Está bien, bien. Debajo de esto necesitamos nuestra imagen. Esta imagen va a ser similar a la de arriba, que es justo ésta de aquí. Va a tener un color ligeramente diferente ya que tenemos un fondo diferente que son iguales con la imagen. Entonces imj, la fuente, esto está en la carpeta de imágenes, y esta es la divider-silver.png El texto alt, simplemente divider y luego una clase bootstrap. Entonces solo vamos a agregar algo de relleno en la parte inferior de esto, comienza en espaciado, así que a continuación estamos relleno de fondo o pb y el valor de cuatro. También, podemos establecer el ancho para que sea ancho personalizado w-25, que ya ha mirado, es un ancho de 25 por ciento. Entonces podemos echar un vistazo, recargar, e ir por debajo de nuestra sección de bienvenida y ahí está nuestro título. Ahora necesitamos crear una nueva fila justo debajo para estas tres cartas de aquí. Cada tarjeta va a estar en un ancho de cuatro columnas en su propio div separado. Entonces, empecemos por crear la primera sección. Necesitamos crear un nuevo div justo debajo de esta fila. Div con la clase de fila. Cierra esto y asegúrate de que esto aún esté dentro del contenedor circundante. Ahora podemos construir nuestro div con la clase de col-sm-4. Este es un tercio del ancho de página en dispositivos más pequeños bajo ambos. Cada una de estas va a ser una tarjeta, añadir un div con la clase de tarjetas, y esto nos dará la oportunidad de hacer algo similar que hemos hecho en el último video, donde podemos agregar un encabezado de tarjeta, un cuerpo de tarjeta, y este agregará todas las bonitas fotos de estilo bootstrap. En primer lugar, agreguemos un encabezado de tarjeta. Añadamos esto en un encabezamiento de nivel cuatro. Tenemos que darle a esto una clase de encabezado de tarjeta. Ya que es un encabezado arriba en la parte superior, vamos a agregar algo de relleno para darle un poco de espaciado desde la parte superior. Podemos hacer eso con py-5, y esto se aplicará a la parte superior e inferior del encabezado. Dentro de aquí vamos a añadir el texto de paquete de natación familiar. Por supuesto, escribe cualquier texto que prefieras dentro aquí, seguido de un lapso con el precio. Voy a sumar 60 por esto, y este va a ser el precio que se sienta en la parte superior aquí y lo posicionaremos usando CSS en el siguiente video. Pero ahora que acabamos de añadir el HTML, así que voy a añadir una clase a este lapso. El costo va a ser igual a fond-peso-negrita. Esto sólo lo hará un poco más audaz por lo que destaca más. Debajo de nuestro h4 podemos entonces agregar el cuerpo de la tarjeta. Ya hemos usado esta clase antes, esto es card-body. Antes de ir más lejos, echemos un vistazo a esto en el navegador. Refresca, y ahí está nuestro encabezado de tarjeta y el cuerpo de nuestra tarjeta justo debajo. Este cuerpo de tarjeta va a conseguir el texto, que está justo aquí, y luego otra lista con tres ítems de lista. De acuerdo, vamos a trabajar dentro del cuerpo de nuestra tarjeta. Lo primero que vamos a hacer aquí es agregar un texto de blockquote. Esta blockquote también significa una clase bootstrap de blockquotes. Entonces una clase de blockquotes, y eso está en el margen en la parte inferior a un valor de cero. Podemos agregar nuestro texto dentro de los elementos P. Este texto va a ser nuestro paquete de natación más popular, gran valor para familias o grupos de 12 personas. Ahora tenemos que ir por debajo del blockquote y por debajo de este div para el cuerpo de la tarjeta. Entonces dentro de aquí vamos a añadir otra lista, que va a tener una clase de grupo de lista. Estos van a ser nuestros artículos de lista gratis. Entonces el primero va a tener clase. Este va a ser lista-grupo-ítem, seguido de font-italic. El texto es de hasta 12 personas. Se puede escribir el siguiente fuera, así que voy a copiar y pegar en dos veces más ya que tiene las mismas clases. El texto sobre este es sesiones privadas, y luego la tercera va a ser clases de natación también disponibles. Ahí subimos al navegador. Ahora vamos a la primera pestaña, recargar, y no se ve bien. Tenemos que replicar ahora esto dos veces más para nuestra segunda y tercera sección. Entonces para hacer esto, voy a copiar esto para evitar mucha repetición. Si quieres una pequeña práctica, puedes seguir adelante y teclear esto tú mismo. Voy a seguir adelante y localizar el div de cierre. De hecho sólo necesitamos el col-sm-4, así que copiaremos este div aquí y la sección col-sm-4. Asegúrate de que sigues siendo dos etiquetas div de cierre al final, que es para la fila y el contenedor exterior. Pega esto en justo debajo. Esta va a ser para la novia, y entonces el precio de ésta va a ser de 40. El texto, éste va a ser “Nuestros paquetes de boda son perfectos para tu gran día”. Entonces podemos atender a grupos, grandes o pequeños. Entonces todo lo que nos queda por hacer es los artículos de la lista libre. El primero va a ser su maquillaje y esto va a ser usando la entidad HTML de amp, agrega el maquillaje. El siguiente va a ser para grupos de cualquier tamaño. Este va a ser champán y cócteles disponibles. Sólo tenemos una más ahora. Así que abajo en la parte inferior, nuevamente asegúrate de usar estas dos etiquetas div extendidas al final y luego pegar esto en y por tercera y última vez y va a ser pase de fin de semana por 60 dólares. Quiero agarrar el texto para este justo aquí, y agregar lo mismo entre los elementos P. Este va a ser alberca y sauna. Después uso completo de nuestro gimnasio y el punto y coma al final ahí. El tercero va a ser incluye dos tratamientos por persona. Está bien, bien. Creo que eso es todo ahora, abajo si vamos al fondo y solo agregamos un comentario rápido, solo digamos que este es un contenedor de cierre y lo mismo para la fila. Bien. Por lo que más a Chrome, podemos echar un vistazo a esto y podemos seleccionar la pestaña para el proyecto, recargar y esas son nuestras tres secciones ahora. Si reducimos esto también, podemos ver que esto será totalmente sensible por defecto debido a las clases bootstrap que hemos agregado. Vamos a jugar un poco con esto en el siguiente video cuando agreguemos algún CSS personalizado. pero por ahora aunque la mayoría está en su lugar. Entonces nos vemos a continuación. 9. Sección de últimas ofertas: CSS: Para redondear esta sección de 'última oferta', solo necesitamos aplicar algún CSS personalizado. Esto va a ser muchos para la sección de 'precios', que está arriba en la parte superior aquí. Voy a hacer que se vea igual que la versión final de aquí, lo que se posiciona en la parte superior de la tarjeta. El código que vamos a estar escribiendo, que va a ser CSS estándar, que no va a ser proporcionado por Bootstrap. Esto no es un problema sin embargo, ya que un tema de WordPress puede estar conformado por cualquier HTML y CSS. Independientemente de si está usando Bootstrap, HTML regular, o cualquier otro marco para ese caso, nuestro precio que creamos en el último video está rodeado en un elemento span. Subamos, y éste es el que podemos ver justo aquí. Podemos etiquetar esto en nuestro CSS. Vamos a estar haciendo esto en nuestro archivo CSS personalizado, y comenzaremos hacia abajo en la consulta de medios. Por lo que esto se aplica a las pantallas más grandes, que nuestro fondo de característica. Etiquetemos los elementos span, y en primer lugar, podemos sacar el flujo normal de los documentos añadiendo una posición de absoluto, y voy a crear el fondo, que va a ser para el círculo que lo rodea. Podemos agregar algo de transparencia, este será un valor rgba de 175, 169, 169 y el valor alfa de 0.6, que es de 60 por ciento, también vamos a hacer esto en un círculo. Podemos comenzar agregando una altura de 80 píxeles y también un ancho fijo de 80 píxeles también. Por lo que nuestro precio está posicionado en el centro. También vamos a sumar la altura de la línea, y esto también va a coincidir, esto va a ser de 80 píxeles. Después para crear nuestro círculo, vamos a sumar el radio de frontera, y podemos hacerlo agregando esto como un valor de 100 por ciento. Antes de ir más lejos, veamos dónde estamos con esto, así que nuestro proyecto y recargar. Ahí está nuestro círculo con el fondo con un radio de borde 100 por ciento para hacerlo redondo y un ancho y altura fijos de 80 píxeles. El siguiente paso es posicionar esto en el centro y sobre la parte superior de la tarjeta. Ahora, para empujar esto al centro, porque se trata de referencias absolutas del contenedor relativo más cercano, que es este div justo aquí. Por lo que vamos a poner esto en un valor de 40 negativo en la parte superior izquierda, por lo tanto posicionando esto en el centro de la Córdoba. Agregemos un valor superior de 40 píxeles negativos, y lo mismo para la izquierda, negativos 40 píxeles, y veamos cómo nos deja esto. Ahora esto empuja esto a la esquina superior. Dado que este es un ancho de 80, hemos compensado el valor en 40 píxeles. Tenemos la alineación vertical va a necesitar, y ahora solo necesitamos empujarla en un 50 por ciento y podemos lograr esto con algún margen a la izquierda del 50 por ciento, y ahí vamos. El paso final es solo para aumentar el tamaño de fuente para ser 1.8 rems y luego estamos bien para ir, 1.8 rems, tanto el navegador como allá vamos. Si encogemos el navegador, podemos ver cómo se ven estas secciones en los dispositivos más pequeños. Bajemos al tamaño móvil, estas secciones se ven un poco juntas en la parte superior e inferior, por lo que podemos agregar algún margen a la parte inferior de cada tarjeta fuera de la consulta de medios. Vamos a desplazarnos hacia arriba. Hagámoslo justo sobre la 'sección Bienvenida'. Por lo que se aplica a todas las tarjetas, incluyendo estas, tarjeta de punto, agregar algún margen en la parte inferior de 20 píxeles, recargar. Ahora podemos ver el espaciado entre cada uno. El último que tenemos que hacer es restablecer el margen de vuelta a 0 para esta vista más grande, necesitamos hacer esto de nuevo dentro de la consulta de medios por debajo de nuestro lapso, nuevamente, etiquetar las tarjetas. Todo lo que necesitamos hacer para esto es establecer el margen en la parte inferior para que sea un valor de 0. Buen trabajo. El plantilla Bootstrap está empezando a tomar forma, así que sigue adelante. A continuación nos pondremos a trabajar con el, 'sobre nosotros'. 10. Sección "Acerca de nosotros": En esta versión terminada aquí, podemos ver, si nos desplazamos hacia abajo desde la última parte de la sección, tenemos una pequeña sección Acerca de Nosotros justo debajo. Esta sección Acerca de Nosotros es bastante básica y probablemente algo que podrías completar por tu cuenta, si te sientes seguro al hacerlo. Simplemente contiene nuestro encabezado de About Us, una imagen que hemos utilizado anteriormente, junto con una fila de texto Lorem Ipsum. Esto se coloca en nuestra página de Índice, justo debajo de la última sección de ofertas que acabamos de crear. Vayamos a nuestro index.html. Vamos a crear comandos. Esta es la sección Acerca de Nosotros. También haremos lo mismo, justo arriba también, en el último apartado. Esto es para las últimas ofertas. Esto sólo nos ayudará más adelante cuando se desplace hacia arriba y hacia abajo. En la sección Acerca de Nosotros, esto se volverá bastante familiar ahora. Tenemos un div circundante con la clase. Quiero volver a usar el fluido contenedor para que abarque todo el ancho de la página. También voy a agregar un valor de relleno en la parte superior e inferior de cinco, posicionando textos para estar en el centro, y además añadir un color de fondo de luz. Esto compensará el valor de la oscuridad, que está justo arriba. Dentro de este div, vamos a añadir una fila familiar. Para mantener las cosas consistentes, vamos a estructurar el título de la misma manera que las dos últimas secciones. Hacemos esto con un div. Esto va a tener un valor de col-sm-6, por lo que es la mitad del ancho de la página, luego compensar esto con un valor de 3 para empujar esto hacia el medio. Título de nivel 3, que va a ser About Us, la imagen, por lo que la fuente va a estar en la carpeta Imágenes. Y recuerda estos dos diferentes [inaudibles] aquí, ya que estamos usando el color de fondo más claro, vamos a usar el divisor de morado, texto alt de divider está bien, y luego la misma clase que usamos antes para darle un peso de 25 por ciento. Echemos un vistazo a esto. Dale a eso un ahorro, y ahí está nuestro título y la imagen. A continuación, solo necesitamos crear una nueva fila justo debajo para el texto de muestra. Entonces de vuelta, tenemos la fila de cierre, por lo que las columnas de cierre, y la fila de cierre. Añadamos algo de espacio, de nuevo, asegurándonos de que esto esté dentro del contenedor circundante, div con la clase de fila, coloquemos esto en una nueva línea. También agregaremos algún margen en la parte superior. Separe esto del título con mt y el valor de dos. Cada fila necesita tener un div anidado dentro. Voy a hacer algo un poco diferente esta vez y solo pondré esto para que sea col. Si solo establecemos esto para que sea col en lugar de un valor, cada vez que agreguemos un nuevo col, ocupará una cantidad igual de espacio. Entonces si queremos tener este div uno , serán las 12 columnas completas. Si tuviéramos tres divs uno al lado del otro, todos de la misma clase de col, cada uno ocupará un tercio igual de la página. Añadamos nuestro texto de muestra dentro con los elementos P y la clase de centro de texto. Entonces hay un par de formas diferentes de hacer esto. Si estás usando Visual Studio Code, puedes escribir los códigos cortos de lorem, presionar Tab, y luego obtenemos algún texto de muestra colocado en las fotos. Si no, puedes pasar al navegador, y pasar a lipsum.com, y esto nos dará algún texto de muestra que podemos generar abajo en la parte inferior, luego copiar y pegar esto en el proyecto. Una vez hecho esto, y dale a eso un guardado, y podemos echar un vistazo a esto en el navegador, y veremos nuestro texto. De hecho voy a generar un poco más. En lugar de hacer eso, podemos agregar más escribiendo lorem y luego una estrella, generar cinco párrafos, golpear Tab, y eso es todo lo que tenemos que hacer. Esta es la sección Acerca de Nosotros ya terminada. Fue bastante sencillo, pero nos da un poco de práctica extra usando Bootstrap. 11. Sección de lista de precios: Todo hecho con la sección About To, que hicimos en el último video, si te desplazas hacia abajo en el proyecto final, esta sección de lista de precios va a ser un poco más detallada que la que acabamos de crear. Contamos con algunas columnas de diferentes dimensiones para el diseño las cuales tienen las imágenes por un lado y también los precios para cada tipo de tratamiento disponible por el otro. Esta es la sección que vamos a estar creando ahora de nuevo en el index.html. Empezaremos por crear un título e imagen familiares, y lo haremos en contenedor de presentación lateral y primera fila. Justo después de que se creará la sección Acerca de Para, desplázate hacia abajo hasta la parte inferior y agreguemos comentarios. Esto va a ser para nuestra sección de lista de precios. Justo debajo de esto, podemos agregar nuestro div, que seguirá la misma estructura que antes, esto tendrá una clase para el envoltorio de fluido contenedor. Algunos relleno en el eje Y el valor de cinco. Esta vez pondré el fondo para que quede oscuro. Dentro de aquí necesitamos una fila, así que esto va a la mitad de la clase de fila dentro de aquí, y esta fila luego necesita tener algunas columnas anidadas. En primer lugar, podemos sumar nuestro título, como el resto del costado esto va a tener un ancho de columna de seis. Por lo que col md -seis, podemos agregar el offset, que es el valor de libre. Es empuja hacia el centro y también la clase de centro de texto también. A continuación aquí podemos sumar nuestro rubro de nivel tres. El encabezado de nivel tres es para nuestro texto de lista de precios, y esto también necesita una clase, ya que estamos usando un fondo oscuro, podemos agregar la clase de textos luz. Ahí está nuestro título, el siguiente paso es para nuestra imagen. Fuente de imagen está en la carpeta Imágenes, y esta vez es el divisor, silver.png las clases de imagen. En primer lugar, necesitamos algo de relleno en el valor inferior antes, y también dijo que esto es un ancho de 25 por ciento con W 25. lo mismo vamos a echar un vistazo a esto. Dentro de la pestaña derecha debajo de lo anterior este texto, ahora deberíamos tener nuestras listas de precios, y apenas nos falta la imagen de eso, y revisar la carpeta de imágenes. Dividir una plata ¿hay? A lo mejor sólo necesita guardar eso. Solo queremos guardarlo después de la imagen y eso está bien. La siguiente etapa es crear una nueva fila. Esto va a ser para nuestra sección de tratamientos de masajes, que es esta primera fila aquí. Esto tendrá la imagen correcta y luego una lista desordenada en el lado derecho. Justo debajo de esta fila pero vamos a añadir un comentario, sólo para que quede claro lo que estamos haciendo aquí, este es el contenedor de cierre. Justo arriba, necesitamos nuestro div, clase o fila y luego siguiente dentro de nuestras columnas. La imagen va a ser más grande que la lista desordenada, así que voy a establecer esta para que sea una columnas de ancho con call sm-8, y de hecho, para la fila también vamos a añadir algún margen en la parte superior e inferior, añadir algo de espaciado. Entonces dentro de nuestras columnas podemos agregar nuestra imagen. A la imagen proporcionada para este se le llama el masaje. JPEG, y el texto antiguo. Después de la envoltura para las imágenes, bajemos y creemos un segundo div dentro de esta fila, y esta tabla va a ser para la lista desordenada. Hemos acostumbrado a ocho columnas o filas, por lo que podemos seguir adelante y usar las cuatro restantes. Nosotros llamamos sm-4. Esto va a tomar en una lista desordenada, pero antes que nada, necesitamos un título en un encabezado de nivel cuatro, que es este texto de masajes está aquí. Agrega nuestros masajes h-4 como encabezamiento. Ahora podemos agregar nuestras clases de Bootstrap. El primero va a ser título, título no es una clase bootstrap, esta es una clase personalizada en la que he agregado, y pronto lo usaremos en el CSS. Seguido de una clase bootstrap de tech center empuja hacia el medio. Después de esto, podemos agregar una lista desordenada, que también toma en algunas clases para peinar. El primero es grupo de lista, y después de esto, este grupo se descarga, y vamos a echar un vistazo a lo que hace esto en tan solo un momento, y luego finalmente, text-light. Sólo voy a agregar en algunos elementos de la lista de muestras. El primero sólo va a ser masaje, advierten. Las clases de Bootstrap para el elemento de lista es Elemento de grupo de lista. Entonces después de esto podemos agregar las etiquetas span justo después del nombre, y podemos agregar un precio. Queremos agregar estos en medio de las etiquetas M, por lo que se enfatiza o en cursiva y un guión, luego agregar un precio dentro de aquí. Dentro de modelo estos álbumes puedes pegar dentro y antes y bajar aquí y simplemente cambiar los nombres. Podría ser más imaginativo si quieres, así que solo voy a ir 1, 2, 3, 4, 5, y luego echar un vistazo a esto en el navegador. Pasamos a nuestro proyecto, para luego refrescar. Tenemos nuestra imagen en el lado izquierdo, se retoma ocho partes, y después retoma cuatro partes, la derecha está nuestra lista desordenada. El texto es un poco difícil de ver, pero si destacamos esto, podemos ver que está ahí, y lo haremos en CSS en tan solo un rato. Bajemos y creemos las siguientes dos secciones, que es esta sección facial aquí, y luego el cabello y el maquillaje. Estas siguientes dos secciones, seguiremos un patrón similar a éste. Vamos justo por encima de nuestro contenedor aquí, y crearemos una sección similar a ésta. Vamos a crear nuestro div con la clase de fila. Esto también va a tener un margen en el eje Y de cuatro. Entonces vamos a hacer lo contrario de lo que hicimos aquí, lugar de tener ocho columnas a la izquierda de la imagen y luego cuatro columnas a la derecha. Vamos a hacer los cuatro viene primero, para que podamos sumar la lista desordenada. Entonces div clase de core sm-4, y luego debajo de esto dentro de la fila, vamos a agregar un segundo div. Esta va a ser para las ocho columnas, así que llama sm-8, y luego cierra esto. Para la primera sección que tiene cuatro columnas, va a tener una lista desordenada, igual que teníamos aquí, y también un encabezado de nivel cuatro, deja cortar y pegar estos en. Este son faciales, ahora podemos cambiar estos textos a continuación. Copiemos esto y peguemos esto en cada uno. Al igual que eso, puedes cambiar los precios si quieres, pero quiero mantenerlo así. Entonces dentro de nuestra sección de 8 columnas, esto toma en nuestra imagen. Esta imagen va a estar en la carpeta Imágenes, y ésta se llama facial.jpeg. Diga esto, y luego al navegador, vuelva a cargar los proyectos. Bajen y ahí vamos. Nuevamente, las imágenes están ahí, pero el texto es un poco difícil de ver, y lo arreglaremos con un poco de CSS más adelante. El tercero abajo va a seguir la estructura similar a nuestra primera fila con la imagen de la izquierda y los enlaces de la derecha, vamos a subir a nuestra sección de Masajes, y voy a copiar esta fila completa y luego pegar esto en tan solo por encima de nuestro contenedor. En primer lugar, la sección de 8 columnas en la parte superior, la imagen para ésta es cosmetics.jpeg. Podemos cambiar el texto antiguo. El texto para el encabezado es Hair and Makeup, y luego en cualquier texto que te guste en estos enlaces, simplemente pega estos en, y eso debería ser que da un fail-safe, y hasta la recarga del navegador. Ahí vamos, ahí están nuestras tres secciones, y ahora podemos ir al CSS y hacer un poco de estilo para esto. Vamos a un custom.css necesita salir fuera de la consulta de medios. Eso es comentarios agregados, esta es la sección de lista de precios dentro de aquí. Cuando teníamos la clase personalizada de título, voy a establecer su título para que sea un color de carga dorada, y luego después de esto, podemos agregar la lista-grupo-ítem. Este elemento de grupo, si pasamos a la página de índice, esta es la clase que se había agregado a cada elemento de la lista, y lo que vamos a hacer aquí es quitar esta imagen de fondo blanco para que podamos ver el texto. Para ello, tenemos que hacer es establecer el fondo a conocer, y también podríamos cambiar el tamaño de fuente para que sea 1.1mz. Guarde eso, y veamos cómo se ve esto. Ese es el fondo ahora eliminado para cada elemento de la lista. para que podamos ver nuestro texto. No mencionamos antes sobre esta clase extra. Si subimos cuál es lista-grupo-flush. Entonces si quitamos esto de los cosméticos y luego recargamos abajo en la parte inferior, veremos la diferencia. Esto tiene toda la frontera a su alrededor, mientras que el resto sólo tiene las líneas en medio. Añadamos este back end y luego reinstamos nuestro proyecto. Esto ahora para la sección terminaremos la página de inicio en el siguiente video completando el pie de página y también agregando en nuestros iconos Font Awesome. 12. El pie de página y agregar Fontawesome 5: La parte final de esta página principal es crear el área del pie. Si bajas a la versión terminada, esta es la zona justo en la parte inferior de aquí, que se va a dividir en tres secciones. Tendremos un lado izquierdo formal para registrarnos vía e-mail, tendremos el centro Setting sobre la ubicación, y también tendremos algunos enlaces de navegación sobre los derechos. También puede que te hayas dado cuenta de que tenemos algunos iconos demasiado abajo para los enlaces de redes sociales. Todos estos se van a proporcionar con una biblioteca llamada Font Awesome. Empecemos instalando esto en nuestros proyectos. Me dirijo a fontawesome.com. Esto tiene una versión gratuita. Entonces, vamos a dar click en este botón justo aquí. Esta es una versión pro-pagada gratis. Simplemente necesitamos esta versión gratuita para nuestras necesidades, cual podemos descargar desde este botón justo aquí. Es diferentes formas de usarlo. Podemos hacer click en el “Descargar” y empezar eso. Hay diferentes formas de instalar para bibliotecas como View, React, y también puedes descargarlo usando herramientas como sketch. A continuación asegúrate de que estamos en la sección web aquí y da click en el “Descargar”, que dará inicio al instalador. Sitios web como este suelen tener el hábito de cambiar diseños y diseños. Entonces si se ve un poco diferente a esto, solo echa un vistazo a la descarga. También hay un enlace CDN disponible, pero quiero descargarlos y añadirlos directamente a nuestro proyecto. También puedes sentirte libre de echar un vistazo a los iconos con este enlace aquí, y podrás ver todos los iconos disponibles que acabarán de descargar. Usaremos algunos de estos a lo largo del proyecto. Empecemos abriendo la carpeta. El nombre de la carpeta incluye el número de versión y solo voy a acortar esto a Font Awesome por lo que es fácil trabajar con. Entonces pasa esto a nuestros proyectos. Si abrimos, el tronco será como carpeta en el CSS. Después puedes arrastrar por encima de la carpeta completa font-awesome y colocarla allí. Ahora, si abres la barra lateral y luego en el CSS, solo asegúrate de que esta carpeta haya sido incluida. Dentro de la carpeta Font Awesome, voy a enlazar a la versión minificada de todas las fuentes. Esto está en CSS, y luego esto es todo.min.css. Podemos agregar la ruta del archivo en la página de índice. Si subimos a nuestros enlaces CSS en el encabezado, voy a agregar el enlace justo encima de nuestro CSS personalizado. Añadamos un comentario de Font Awesome, el enlace. Esta de nuevo está en nuestra carpeta CSS. Está en la carpeta Font Awesome después de esto, luego css/all.min.css. Esto es todo lo que necesitamos hacer ahora para vincular Font Awesome a nuestro proyecto. Vamos a probar todo esto está funcionando pronto, cuando lleguemos a sumarlos en el pie de página. Por ahora sin embargo, vamos a trabajar con la adición del pie de página, que se puede ver aquí. Podemos agregar un contenedor abajo en la parte inferior para sostener esto. Entonces abajo en la parte inferior justo por encima de nuestro JavaScript. Añadamos un comentario o sección de pie de página. Voy a usar el elemento de pie de página HTML para esto. Todavía puedes agregar las mismas clases de fluido de contenedor y también py-5. Dentro de aquí esto toma un div con la clase de fila, para que luego podamos anidar dentro de nuestras columnas. El primero va a ser para la sección de redes sociales de permanecer conectada por un costado, que va a ser un título, un formulario de registro, y luego añadiremos nuestros iconos de redes sociales más adelante. Ya que hay tres secciones diferentes, podemos dividirlo en cuatro columnas cada una con una clase de col-sm-4. El texto en un encabezamiento de nivel 5 de mantenerse conectado. Después de esto, coloquemos en nuestro formulario, no necesitamos una acción ya que solo estás creando estructura HTML por ahora. Dentro de aquí vamos a añadir un div que va a rodear o agrupar nuestros elementos de forma. Se va a tomar en algunas clases de Bootstrap. El primero va a ser fila de formulario para hacer una forma en línea, luego el segundo de grupo de forma para agrupar nuestras entradas. Este formulario sólo va a contener las entradas de la dirección de correo electrónico y luego el botón. El ingreso de la izquierda va a ser de ocho columnas de ancho, y luego podemos usar las cuatro restantes para el botón de registro. Vamos a crear nuestras secciones para estos. El primero es para la entrada. Por lo que esto se llamará sm-8. Entonces el para nuestro botón y justo debajo, para las cuatro secciones restantes. Empecemos con la entrada de formulario. Esta va a ser una entrada con el tipo de correo electrónico, las clases de bootstrap de control de formularios, y algún texto de marcador de posición de dirección de correo electrónico, luego hasta la sección inferior. Por lo que el botón va a tener el texto de registro. También necesita un tipo. El tipo de envía dentro aquí y luego la clase Bootstrap. El primero de btn, btn-primary, para darle el color azul. También estaremos agregando un pequeño icono de Font Awesome al lado derecho del texto. Volveremos a esto en tan solo un rato. Guardemos y veamos cómo se ve esto, recarguemos, y ahí está nuestra forma en la parte inferior y vamos a añadir los iconos de las redes sociales muy pronto, que ven aquí. Por ahora justo después del formulario vamos a añadir un comentario. Entonces iconos de redes sociales, y volveremos a estos muy pronto. Después de este div de cierre, tenemos dos secciones más las cuales cuatro columnas cada una. El siguiente va a ser para el texto y luego la navegación a la derecha. Entonces div con la clase de col-sm-4. Este tendrá un encabezado de nivel 5 y esta vez el texto es nuestro ajuste, y una coma. Después, todo lo que vamos a hacer es agregar el elemento p con algún texto de muestra. De nuevo, si usas Visual Studio Code, puedes escribir Lorem y luego presionar “Tab”. Esto es todo lo que necesitamos hacer para nuestra sección media. Por lo que ahora después de nuestro col-sm-4, podemos agregar uno más, que es para nuestros ítems de lista en la clase correcta col-sm-4. Este también tendrá un encabezado de navegación de nivel 5, seguido de una lista desordenada, que contendrá nuestros enlaces de navegación. El bootstrap clase para la lista desordenada es un grupo de lista y elementos de lista, que toma en la clase de list-group-item. Estos van a ser enlaces, así que agreguemos el un elemento dentro de aquí, el href, el enlace. Este va a ser para el blog a HTML. Todavía no hemos creado esta página, pero le pediremos el texto del blog, copiar y pegar. Este es para la página de contacto. Este será contacto para HTML, luego el texto de contactores y enlace UML para la política de privacidad. En realidad tenemos href nos da ir al navegador. Eso es todo el contenido que ahora necesitamos. Ahora vamos a aplicar un poco de CSS solo para terminar esta página. A partir de estos enlaces azules justo aquí, pasemos a nuestro style.CSS, o Custom.CSS, y fuera de la consulta de medios, vamos a apuntar al pie de página, empezando por los enlaces, por lo que estos son los a elementos. Podemos restablecer el color para que sea un valor de 212529. A ver cómo se ve mucho mejor esto. Ahora si volvemos sobre el infarto podemos encoger el navegador ahora primero, vemos que las cosas necesitan un poco más de espaciado, cosas como si nos desplazamos hacia abajo el título dorado que está aquí, es un poco espaciado en la parte superior e inferior, abajo a el pie de página. También estas entradas y botón necesita algo de espaciado también. Para solucionar esto en el Custom.CSS, voy a crear una nueva consulta de medios dirigida a un ancho máximo de 768 píxeles. Los estilos sólo funcionarán en las pantallas pequeñas. Después de esta consulta de medios, puede agregar más uno nuevo en medios quiere dirigirse a estas pantallas, y también el ancho máximo de 768 píxeles. Agrega las llaves calli. Empecemos sumando el margen superior o el título, este es el título dorado que hemos visto antes. Un em está bien por esto. Podemos agregar algo de espaciado a nuestro Botón escribiendo botón de pie de página. Esto sólo surtirá efecto en cualquier botón dentro del pie de página. Los márgenes también deben ser un valor de 1em, guardar y luego recargar. Tendremos un poco más de espacio. Alrededor de eso, también tenemos nuestro espaciado por encima de los títulos. Por fin rematar, quiero agregar algo de relleno y también un fondo de borde a cada una de estas secciones. Las secciones también desde el pie de página, pueden agarrar cada div con la clase de col-sm - 4 para que un fondo de borde comience alineado, para separar cada uno de un píxel. Una línea sólida, y un color de ddd. Después un poco de relleno en el interior de 20 píxeles en la parte superior e inferior, y luego 10 píxeles en la izquierda y la derecha. Abre esto, refresca. Parece como si tuviéramos una línea extra por aquí así que echemos un vistazo. Abajo al pie de página, esto está justo al lado del botón, para tener uno justo debajo de ahí. Este es el 1.5 real aquí, y se supone que estos son para dispositivos medianos. Cambiemos esto para que sea MD. Estos son en líneas propias en estos dispositivos móviles. Vamos a romper en la carretera junto a cada uno de eso en dispositivos medianos y superiores, guardar y refrescar. Esto ahora se ve mucho mejor en las pantallas más pequeñas y también para las pantallas más grandes. Todo lo que queda por hacer ahora para este pie de página es agregar los iconos de las redes sociales. Volver al pie de página. Creamos un comentario, y también los añadiremos al botón Registrarse. La versión gratuita nos permite acceder a dos estilos diferentes de icono, que se llama marcas y sólido. Iconos sólidos a medida que suenan o un icono negro sólido, y es usos para cosas como un icono de empresa o tarjeta de crédito. Utilizamos la clase CSS FAB para marcas, y FAAS para sólido. También las versiones irregulares y ligeras, pero éstas sólo están disponibles en la versión pro. Empecemos en el botón Registrarse. Podemos agregar un icono Font Awesome usando los elementos I. Voy a añadir estos en dos líneas separadas para que quede más claro. Abre los elementos I, y luego necesita una clase. En el interior aquí, primero especificamos qué tipo de botón queremos. Si queremos los sólidos o la versión marrón, voy a ir por la versión sólida. Por lo que escribiremos en FAS que es Formed Awesome Solids, y luego escribimos el nombre del ícono. Lo seguimos por el sitio web de Font Awesome. Puedes obtener el nombre de cada ícono justo debajo. Agregaremos estos en agregando un nombre de clase de FFA. Entonces el nombre de ángulo doble a la derecha. Dale a eso un ahorro y luego vuelve a cargar los proyectos abajo en el área de pie de página. Ahora tenemos el icono de derechos de doble ángulo en el que empezamos. Voy a volver a nuestros iconos de proyectos justo debajo de esto para nuestra sección de redes sociales así que justo debajo de los iconos de las redes sociales, vamos a hacer exactamente lo mismo agregando los elementos I. La clase esta vez va a empezar con FAB, por lo que son los iconos de la marca, el nombre de FA, que va a ser para nuestro icono de Facebook. Entonces Facebook-cuadrado, y luego una tercera clase que es opcional. Esto para hacer las fuentes el doble del tamaño. Podemos hacer esto con FA, y luego 2X. Voy a copiar y pegar esto en tres veces más. El segundo sustituirá a Facebook por Twitter. El tercero esto va a ser para Instagram. El último es Pinterest. Todo el resto permanecerá igual. Echa un vistazo a esto en el navegador. Echamos de menos un Instagram, y esto no necesita cuadrado al final, lo siento por eso. Después pasa a Chrome, recarga, y ahora tenemos nuestros cuatro iconos. Eso es todo ahora para nuestra página de inicio, para nuestras plantillas Bootstrap. Espero que hayas disfrutado de esta sección y hayas aprendido mucho sobre el uso de un Bootstrap. A partir de la siguiente sección, terminaremos este proyecto agregando las páginas adicionales, como el blog y la página Contáctenos. Gracias y allí los veré. 13. Publicaciones de blog y paginación: Estamos haciendo buenos avances con nuestras plantillas de Bootstrap, y ahora nos hemos encargado de la página de inicio. Ahora vamos a pasar ahora a las páginas adicionales empezando por el blog. En la última sección, creamos un enlace a una página de blog, aún no hemos creado ningún contenido. Si echamos un vistazo al sitio terminado que estaba justo aquí, y si vamos a uno de los enlaces del blog, así es como se va a ver el blog. Tendremos una sección de cabecera la cual va a ser la misma que la página de índice. También el pie de página, que también será el mismo para mantener el tema más consistente. Entonces el blog va a consistir en nuestros posts a la izquierda en un contenedor llamado. También tendremos algunos enlaces a la página anterior y siguiente, y también una barra lateral de cuatro columnas en el lado derecho. El único contenido que agregaremos por el momento en esta página, es solo para mostrar, es básicamente una plantilla con la que podríamos engancharnos a WordPress más adelante. Encima en Visual Studio Code, podemos crear el blog a una página HTML. Vamos a cerrar esto, y podríamos hacerlo en la raíz del proyecto junto al índice. Esto se va a llamar el blog a un HTML. Saca esto a la raíz del proyecto, ahí vamos. Asegúrate de que esto esté al lado del índice y lo primero que voy a hacer es copiar todo el contenido de la página de inicio. Selecciona todo, copia y luego pegarlo en el blog. Esto nos permitirá mantener las mismas secciones de pie de página y encabezado y solo podemos eliminar todo el contenido desde dentro. Voy a eliminar justo encima del pie de página, seleccionaría este contenedor y tengo que ir todo el camino hasta la etiqueta de cabecera de cierre. Es bastante contenido para eliminar aquí. Ahí está el encabezado, suficiente, y todo justo debajo de esta etiqueta de encabezado aquí, podemos quitar esto, darle un guardado, y luego podemos ver si esto está bien en el navegador, e ir a nuestro blog y asegurarnos de que solo tenemos el encabezado y el área de pie de página con este aspecto. Si siempre se ve así, estamos bien para ir y podemos empezar a personalizar nuestra página de blog. Empecemos con el título, que va a ser tranquilo spot blog. Entonces después de esto, también podemos cambiar el texto de la característica. En lugar de un tema de spa premium con plena respuesta, lo cambiamos a necesitar al blog oficial de Tranquil Spa. Justo después de la etiqueta de break, podemos agregar blog oficial. Guarda esto y con el CSS que ya hemos proporcionado, aún debería haber en el centro aquí, así que no necesitamos hacer ningún trabajo adicional con esto. Lo siguiente que hay que hacer es bajar y crear un contenedor de blog. Hagamos esto, justo después del encabezado, podemos agregar un comentario. Esta va a ser la sección de blog. Entonces esta sección de blog va a ser un contenedor fluido, que será una clase sobre el elemento principal, sólo va a ser el contenido principal. Construyamos nuestras clases Bootstrap de contenedor, fluido de dash y también algo de relleno y, que es la parte superior e inferior. Como siempre, también tenemos un div anidado dentro con la clase de fila. Ahora esta fila va a tener dos secciones. Como mencionamos antes, cuando miramos la versión final, el lado izquierdo va a ser una sección de ocho columnas. Posteriormente también crearemos una barra lateral para llenar las cuatro columnas restantes. Nuestro div con la clase de col sm-8 dentro de aquí, podemos construir una plantilla de blog bastante simple. Recuerda que esto es solo un HTML básico el cual podemos adaptar a WordPress más adelante en el curso. Un div circundante para la publicación del blog, un encabezado de nivel dos. Añadamos algunos datos de muestra, por lo que nueva característica, luego abrimos los elementos p y vamos a añadir una fecha en la que se creó la publicación del blog. Podemos agregar cualquier fecha aquí. También tendremos que añadir la oferta, lo que podemos decir que esto es por y podemos añadir el nombre de un autor dentro de un enlace. Voy a agregar mi nombre aquí dentro, y el enlace solo puede tener un h-ref vacío por el momento. De nuevo, lo arreglaremos en WordPress más adelante. Entonces podemos agregar otros elementos p justo debajo. Solo con alguna fecha de muestra aquí, solo estoy escribiendo Lauren y fecha del texto de muestra del código VS. Vamos a echar un vistazo a esto en la recarga del navegador y tenemos nuestra primera entrada de blog. Nuevamente, el contenido no importa por el momento. Estaremos agregando todos estos en el uso del panel de WordPress. Lo siguiente que hay que hacer justo después de esta fecha es que voy a agregar una pequeña sección, para mostrar cualquier etiqueta asociada a la entrada del blog, y asegurarme de que el elemento a esté cerrado. Ahí vamos. Vamos a crear una sección justo debajo de esto. Esto va a ser un div. Podemos agregar algo de relleno en la parte inferior, y agregar una clase de pb y el valor de dos. Esto sólo le dará a esto un poco de espaciado del texto. Dentro de aquí podemos usar Font Awesome con los elementos i. Esto montaría un ícono de etiqueta. Este debería ser el tipo sólido con FAS, y luego FA, un icono se llama etiquetas. Justo después de esto podemos agregar un p elementos y va a tener el texto de etiquetado. W\ e'll acaba de agregar algunas etiquetas de muestra dentro de aquí. Esto de nuevo será generado por WordPress más adelante. Este pequeño icono en el medio es la tilde. Es posible que tengas que mirar alrededor en tu teclado para este, pero puedes agregar cualquier icono dentro de aquí. Digamos esto. En primer lugar, podemos agregar una clase. El en línea hace que los elementos p en línea en lugar del nivel predeterminado o de bloque. Esto mantendrá las etiquetas que añadimos aquí en la misma línea que nuestro icono justo arriba. Echa un vistazo a esto recargar el navegador. Ahí hay un pequeño icono de Font Awesome, y luego podemos tener nuestras etiquetas justo después en línea. Esto se ve muy bien. Para agregar un poco más de contenido, voy a copiar y pegar en esta entrada de blog. Si vamos a nuestro div, que está rodeando todo el contenido aquí, copia esto en, asegúrate de que todavía estamos entre el elemento col sm-8, y luego pega esto en dos veces más. Para redondear las cosas para este video, algunos botones en la parte inferior de los postes. Simplemente deduerás las páginas más antiguas y nuevas, igual que tenemos en la versión terminada aquí. Pasado a nuestro blog, a nuestro HTML, y justo después de nuestra última publicación de blog que agregamos, la página anterior y siguiente va a estar dentro de un nav elementos. Este elemento nav va a ser una lista desordenada con la clase bootstrap de nav. El listado desordenado tendrá nuestros artículos de dos listas. El primero va a ser para la siguiente página, y copiar y pegar esto en, y éste va a ser para nuestro anterior. Después a la recarga del navegador. Ahí están nuestros enlaces ahora, sólo podemos agregar un espacio en medio con entidad HTML. Ampersand, espacio que no rompe, y ahí vamos. Nuestro blog ahora empieza a tomar forma. Observe cómo hemos contenido la publicación del blog a ocho columnas de ancho. Esto nos dará cuatro columnas con las que trabajar para la barra lateral, en el siguiente video. 14. Barra lateral de la página del blog: Dejaremos este espacio de cuatro columnas apagado en el lado derecho. Aquí es donde vamos a añadir una barra lateral para nuestro blog. Al igual que la versión terminada que ves aquí, tendrá algunas secciones con alguna información sobre esta barra. También podemos filtrar hacia abajo por categorías o por el mes en que se creó. Deja un poco de sección de redes sociales en la parte inferior también de cualquier blog, a HTML. Podemos crear algo de espacio justo encima de esta fila de cierre. Si ayuda, puedes agregar un comentario dentro aquí. Diga que esta es la fila de cierre. También podemos decir que este es el contenedor, sólo para que quede más claro que tenemos razón. Entonces creamos nuestro div. De hecho, agregamos esto como un aparte. Ya que es una barra lateral. Esta barra lateral va a tener una clase, que sea cuatro columnas de ancho en dispositivos más pequeños y superiores, llamados sm-4. En la barra lateral se contendrán los cuatro bloques como acabamos de mirar. El primero es sólo un poquito sobre este bar. Un div circundante para este bloque aún tendrá una clase de py-3. Tan solo para agregar un poco de espaciado en la parte superior e inferior. Un título para este bloque “font-italic”, y el título de sobre. Entonces el texto en los elementos p. Los elementos p tendrán una clase, para agregar margen y fondo de cero. Entonces queremos pegar en el texto para éste. Simplemente vamos a agarrar esto del lado terminado. Pegue lo mismo, seguido de una regla horizontal con los elementos hr justo debajo de esto. Vamos a echar un vistazo a esto hacia Chrome. Recarga nuestra página de blog. A continuación tenemos la sección de archivo. En la versión terminada, esta va a ser una lista ordenada, que va a tener cada ítem de lista como fecha. Podemos empezar con un div circundante como contenedor aún dentro del col-sm-4. Mi nuevo surround en div. Al igual que arriba esto va a agregar una clase de py-3, así que agrega nuestro espaciado. Después vamos a sumar un rubro de nivel cuatro. Esto también va a ser cursiva, sería tipografía clase cursiva. Después el título de los archivos. Nuestros artículos van a estar dentro de una lista ordenada. Esta lista ordenada va a tener algunas clases de Bootstrap. El primero va a ser lista-sin estilo. List-unstyled elimina el estilo de lista predeterminado y el margen izquierdo en nuestros ítems de lista. Entonces estableceremos el margen inferior para que sea cero. Estos elementos de la lista tendrán un enlace anidado en el interior. Podemos sumar algunas fechas aquí. Después un href para los elementos a. Podemos simplemente dejar esto vacío. Todo lo que necesitas hacer ahora es copiar y pegar esto en unas cuantas veces más. Agrega algunas fechas aleatorias aquí. Esto sería generado por WordPress más adelante, guardar y luego refrescar dentro de Chrome. Eso es todo lo que tenemos que hacer ahora por los archivos. A continuación vamos a hacer una sección similar, y esto será para las categorías. Un nuevo div justo antes de nuestra sección lateral. Siguiendo el mismo patrón. El tipo de py-3, título que va a ser nivel cuatro, clase de fuente cursiva, y el texto de categorías. Esto también tomará en una lista ordenada con las mismas clases que arriba. Este será list-sin estilo para eliminar cualquier estilo de lista y también establecer el margen inferior para que sea cero. Los elementos de la lista también anidados con un enlace en el interior, un href vacío. Podemos sumar en las noticias. También podemos sumar en las ofertas también. El apartado final es para nuestra sección de seguidores que va a ser algunos enlaces de redes sociales usando los iconos impresionantes de la fuente. Crearemos nuestro div, clase de py-3. Dentro de aquí, volveré a tener un rumbo de cuatro, que de nuevo va a ser cursiva, con el texto de los seguidores. Esto va a tener algunos elementos i para nuestros iconos. Primera clase de fab y luego Fa-facebook.Va a ser cuadrado y luego fa veces 2 x para hacerlos el doble del tamaño. Añadamos otros tres aquí. Este siguiente quiere ser Twitter y luego en surround que no necesita la plaza. Entonces finalmente Pinterest. Guarda esto y vuelve a cargar. Esta es nuestra barra lateral ahora completa. De hecho, esta es nuestra página de blog también completa. Ahora tenemos una plantilla de blog la cual podemos convertir WordPress en una sección posterior. A continuación terminaremos nuestras plantillas de Bootstrap agregando una página de contacto con nosotros. 15. Página de "Contacto": Con nuestro blog, ahora terminado, vamos a seguir adelante y crear nuestra página final, que va a ser la Contáctenos. Si nos desplazamos hacia abajo, tendremos aquí un enlace a la página Contáctenos. También tenemos un enlace de política de privacidad. Pero no vamos a estar creando esta página ya que esto sería algo específico para tu negocio o necesidades. Puedes seguir adelante, y crear esto si quieres. Ahora voy a crear este Contáctenos dentro de las raíces de nuestro proyecto, junto a un blog y página de índice. Vamos a crear este archivo, que puede ser contact.html. Nuevamente, vamos a reutilizar el mismo encabezado y pie de página para mantener el diseño consistente, y luego crear una nueva sección en el medio. Para acelerar las cosas podemos ir al blog, copiar todo el contenido, y luego pegar esto en. Al igual que lo hicimos antes arriba de la sección de pie de página, seleccionemos desde el contenedor principal todo el camino hacia arriba. Queremos seleccionar esto justo encima de la sección de bloque luego eliminar todos estos. Se puede reemplazar la sección de encabezado y también el pie de página. Podemos decir esto y comprobar si funciona bien recargando la página de contacto, cual está bien, para que podamos ir y cambiar el título arriba en la parte superior. Podemos cambiar el título de la página para que sea Contáctenos. Entonces el texto de la característica, vamos a bajar a esta sección aquí. Podemos volver a utilizar el texto index.html que fue FULL Responsive PREMIUM SPA TEMA. Copia esto y reemplaza nuestra sección de blog. A continuación vamos a trabajar entre la sección de encabezado y pie de página creando nuestro Contáctenos a sección. Empecemos con un Comentario, Ayúdenos al desplazarnos hacia arriba y hacia abajo. Esto va a tener un div, y este div será el contenedor fluido para toda la página. Entonces también algo de relleno en la parte superior e inferior un valor de cinco está bien. Dentro de aquí, div con la clase de fila. Esta va a ser la primera fila dentro de nuestro contenedor. En la versión terminada, si vas a nuestra página de contacto, esto sólo va a ser una fila la cual tendrá el título Contáctenos y luego la imagen. Después de esto, crearemos un formulario en una segunda fila justo debajo. Esta primera forma, haremos lo mismo que hicimos en la página de índice. Este será un contenedor de seis columnas con una compensación de columna libre, por lo que col-sm-6, y luego proporcionar las compensaciones a punto de hacer de este un dispositivo medio llamado Md. Entonces el valor de offset de tres, nivel tres rumbo, que va a ser Contáctenos. El imagen para nuestro divisor que es la carpeta de imágenes y queremos elegir el divisor morado, el texto viejo, y luego una clase de w-25 por lo que es el 25 por ciento del ancho. Nuevamente, si ayuda, puedes agregar un comentario y esto va a ser para la fila de cierre. Después pasa a nuestro proyecto en el navegador, y algo no está del todo bien ahí. Tenemos nuestros contactos de imagen, solo necesitamos agregar una nueva clase de centro tecnológico. Eso debería hacer el truco, recargar, y eso es todo. Simplemente sopla esto vamos a añadir una nueva fila para nuestro formulario. Tan solo ten este comentario aquí. Esta sería una clase de fila, y luego anidada por dentro aquí, podemos hacer de nuestra fila un contenedor de 12 columnas para hacer de nuestro formulario un ancho completo para la página. Abre nuestro div, va a ser col-sm-12, que sería el envoltorio para nuestros elementos de forma. No necesitamos acciones ya que WordPress estará manejando esto, pero sí necesitamos una clase. Voy a agregar una clase de texto a la izquierda, y como suena, esto alineará todos los textos al lado izquierdo del formulario. Cada entrada va a tomar en una envoltura de grupo de formularios para que bootstrap pueda controlar el posicionamiento y el diseño. Un div circundante para cada entrada, una clase de form-grupo. Cada entrada va a tener una etiqueta también. Esta va a ser una etiqueta de texto. El primero va a ser Tu Nombre. Después agregamos el atributo for que va a ser nombre, y esto lo vinculará a esta entrada que ahora vamos a crear. El input va a ser un tipo de texto, ya que es un campo de nombre, una clase bootstrap de control de formulario, el ID y este ID deben coincidir con esto para atributo aquí por lo que el navegador sabe que esta etiqueta está vinculada a esta entrada. Otro beneficio de tener estos enlazados es el usuario también puede hacer clic en esta etiqueta o en el texto, y también resaltará la entrada para que el usuario pueda comenzar a escribir. Un marcador de posición para los textos de Escriba su nombre. Antes de ir más lejos, veamos cómo se ve esto. Como dijimos antes si hacemos click en esta etiqueta, también pondrá en foco la entrada para que podamos teclear de inmediato. Hagamos un par más. Ya que la siguiente va a ser muy similar, podemos copiar el grupo de formularios, pegar esto ya que estamos usando las mismas clases. Esta va a ser una etiqueta para correo electrónico. El texto de sus entradas de correo electrónico, correo electrónico y la identificación también. También necesitamos cambiar el portador del lugar para ingresar tu correo electrónico, y echemos un vistazo a esto en el navegador. Eso se ve bien. Encima en la versión final, también vamos a agregar un área de texto en la parte inferior, y luego un botón para enviar esto apagado. El ingreso de mensajes va a ser un área de texto. Añadamos nuestro grupo de formularios una vez más. El sello va a ser mensaje, el texto de tu mensaje. Podemos eliminar el tipo de entrada de texto, y en su lugar podemos agregar nuestra área de texto. Voy a quitar el nombre, establece el ID al mensaje para que coincida voy a etiquetar. Columnas, voy a eliminar pero voy a establecer las filas para ser libres seguido de una clase bootstrap de control de formularios. El último que hay que hacer justo por la etiqueta del formulario de cierre es agregar un botón usuario pueda enviar esto apagado con el texto de Enviar mensaje... Algunos atributos, la etiqueta de apertura, este es un tipo de envío. También algunas clases bootstrap de btn, luego btn-primary para darle el color azul y también el dimensionamiento. Echemos un vistazo a esto. Esto es todo lo que necesitamos saber para seguir la sección Contáctenos. Lo último que voy a hacer es solo comprobar que todos los enlaces están funcionando bien. El homepage se remonta al índice. Tenemos la página del blog. Al final de la página del índice, podemos revisar el blog funciona y lo hace, Contáctenos, me gusta esto aquí también, así que todo está funcionando bien. Esto nos deja ahora con un buen bootstrap de aspecto para plantilla con la que trabajar para nuestro tema. Espero que ahora estés emocionado por pasar a convertir esta plantilla a WordPress. 16. Instalar WordPress utilizando Flywheel: En este video y también en el siguiente, estaremos buscando dos formas de abrirnos corriendo con WordPress en nuestro equipo. Podemos empezar a crear temas y ponerlos a prueba. Alternativamente, si tienes un proveedor de hosting en vivo y prefieres usar esto, siéntete libre de seguir adelante y hacer eso. Este video va a cubrir conseguir configuración con un servicio llamado Local por volante, que es nuestro local por flywheel.com. En el siguiente video, que es opcional, cubriremos la instalación y configuración de MUMP como alternativa. Yo recomendaría seguir junto con este video en vez del siguiente sobre todo si eres principiante, ya que MUMP puede causar problemas a mucha gente, pon esto depende de ti. Empecemos de nuevo yendo a la página principal, las versiones sin pavimentar para equipos y agencias. Pero sólo necesitamos la edición comunitaria gratuita, que está disponible para Mac y Windows. Flywheel nos permite configurar rápidamente proyectos de WordPress en nuestro equipo con mucha facilidad, y también se encarga de configurar las fotos del servidor y de la base de datos. No tiene características demasiado grandes. Podemos ver nuestro sitio, y también la sección de administración al hacer clic de un botón. También podemos generar un enlace en vivo para ver nuestro proyecto en cualquier lugar en línea, y también para compartirlo con otros. Junto con un montón de características más avanzadas, como la capacidad de configurar WordPress multi-site y mucho más. Para empezar, hacemos click en el enlace de descarga, que justo aquí arriba en la parte superior aquí. Después elige qué plataforma te gustaría, introduce tus datos y luego haz clic en, Consíguelo ahora. Esta descarga puede tardar unos minutos, así que volveré una vez que esto se complete. Una vez que local haya terminado de descargar y vienes a través de la instalación para tu máquina, debería estar llevándola a una pantalla de inicio de aspecto similar que tenemos aquí. Esto es solo con un sitio de prueba de muestra, que viene con la descarga. Pero cuando se va a bajar a este icono más abajo en la parte inferior, creamos nuestros nuevos sitios. primer paso es crear un nombre y se va a llamar Tranquil Spa, vamos Continuar. Después de esto, obtenemos un ambiente que quieres elegir. Me voy a quedar con las versiones preferidas de PHP y MySQL, pero también son versiones personalizadas. Si sientes la necesidad de cambiar alguna de estas versiones, continúa. A continuación necesitamos agregar un nombre de usuario y contraseña para iniciar sesión. Voy a llamar a mi nombre de usuario Tranquil underscore admin, la contraseña depende de ti y quiero agregar el mío aquí. Entonces el correo electrónico, que es un correo electrónico de su elección. Después agrega nuestro sitio a local haciendo clic en este botón, danos unos momentos para generar nuestro sitio. Una vez que tu sitio haya sido configurado, serás llevado a esta página y has visto la luz verde junto al nombre del signo, estás listo para ir. Las dos cosas principales a notar aquí en la pantalla son los botones en la esquina superior. El primero es ver sitios, esto abre una nueva pestaña de prensa de palabra en el navegador, por lo que hacemos click en esto. Esta es nuestra instalación real de WordPress que estamos viendo con el tema predeterminado. Esto es lo fácil que es conseguir la configuración con WordPress on Local. Si ahora volvemos a la Admin, también es un botón admin justo aquí. Esto luego nos llevará a la página de inicio de sesión para el panel de WordPress y este es el nombre de usuario y contraseña que proporcionamos al configurar nuestros sitios. Mis detalles eran tranquilos admin, y a la contraseña. Voy a dar clic en Recordarme, y luego Entrar. Este es el panel de WordPress con el que nos familiarizaremos mucho más a medida que pasemos por el curso. Cuenta con enlaces donde podemos seleccionar nuestros posts, diferentes activos mediáticos que queremos agregar. Podemos crear nuevas páginas, podemos crear o ver nuestros comentarios, junto con cambiar cualquier apariencia y configuración de nuestros sitios de WordPress. Pero vamos a cubrir todo esto a medida que vamos a lo largo del curso. También puedes hacer clic en este enlace aquí arriba, que también nos llevará al mismo sitio que ven aquí. Otra gran característica sobre el uso del volante es que también proporciona un enlace en vivo. Si hacemos clic en Activar abajo en la parte inferior, habilitando esto generará un enlace al cual iría en el navegador en cualquier dispositivo. Si haces clic en esto, podrás abrirla en tu dispositivo móvil en diferentes navegadores o también puedes compartir este enlace con familiares y amigos para mostrar tu progreso. Si estás en esta etapa, ahora es bueno ir con la creación de nuestro sitio de WordPress, comenzando nuestra conversión temática de Bootstrap. Ya los veré en el siguiente apartado donde comenzaremos este proceso. 17. OPCIONAL: instalación de WordPress utilizando MAMP: Este es un video opcional si prefiere utilizar un servicio llamado MAMP. Configura Wordpress en tu propia computadora. Si seguiste con éxito en el último video y configuraste WordPress usando Flywheel, entonces puedes seguir adelante y omitir este video y pasar a la siguiente sección. Si prefieres usar el MAMP y aún no lo tienes instalado, tendrás que pasar a mamp.info, y luego dar click en el botón “Descarga gratis. MAMP es un entorno de desarrollo local que se puede utilizar en Mac y Windows y nos proporciona un entorno que ejecutará PHP y también MySQL Database que es un requisito para usar WordPress. El siguiente paso es descargar WordPress de wordpress.org. Haga clic en “Get WordPress” y luego podremos descargar la última versión, que actualmente se encuentra en 5.2. Descargar este es su requisito si estamos auto hospedando WordPress en nuestro equipo usando MAMP. El siguiente paso, una vez descargado el MAMP es pasar a la carpeta MAMP y también abrir las descargas. El MAMP dentro de aquí tendrá un icono de elefante. Podemos hacer doble click en esto y abrir la página de inicio del MAMP. Esto nos va a permitir iniciar los servidores, y se ven las dos luces verdes en la parte superior para el servidor y la base de datos, entonces todo está funcionando bien. A continuación dentro del directorio MAMP, tenemos esta carpeta htdocs, y es dentro de aquí donde agregamos todos nuestros proyectos. Voy a añadir nuestro proyecto de WordPress aquí en las descargas. Voy a descomprimir la carpeta WordPress y luego renombrar esto, tranquilwp, presionar “Enter” y ahora puedo arrastrar esto a los htdocs. Si estás usando un Mac, es posible que necesites agregar una contraseña en esta etapa y luego podemos cerrar ambas ventanas hacia abajo. El siguiente paso es crear una base de datos para nuestros proyectos de WordPress. Podemos hacer esto usando MAMP desde la página de inicio web. Si hacemos clic en este icono, ve a Herramientas y luego phpMyAdmin. Desde aquí podemos crear una nueva base de datos desde la pestaña de la base de datos. Voy a llamar a mi base de datos tranquil-spa con un guión. Haga clic en “Crear” y eso está todo hecho. El siguiente paso es ir al MAMP, comprobar dos veces en qué parte estás corriendo haciendo clic en “Preferencias”. Estoy corriendo en el puerto 8888. Todo lo que necesitamos hacer ahora es ir a localhost 8888. Se “Enter” y luego nos llevan al contenido de los htdocs. Esto nos dará un enlace para el único y único proyecto que tengo, que tranquilwp. Si seleccionamos esto, entonces nos llevan a los scripts de instalación de WordPress. Donde podemos comenzar eligiendo nuestro idioma. Haga clic en “Continuar”. Esta etapa nos dice qué requisitos necesitaremos como un nombre de usuario y contraseña de base de datos. Ya tenemos esta configuración todo. Podemos dar click en “Vamos”. El nombre de la base de datos exactamente como lo hicimos en phpMyAdmin era tranquil-spa, con el guión. No configuramos agregar usuario adicional. Si lo hicimos, necesitarás agregar un nombre de usuario y contraseña a tu base de datos. De lo contrario podemos simplemente escribir root y root para la contraseña dos. Estamos usando un host local, y también podemos cambiar opcionalmente el prefijo de tabla y cambiemos el mío a tranquil_db. Enseguida presenta esto. Si ves este mensaje, eso significa que ahora todo ha estado conectado a nuestra base de datos, y estamos listos para ejecutar la instalación de WordPress. Esto no toma demasiado tiempo para hacerlo. La instalación de WordPress necesita conocer el Título del Sitio. Yo quiero llamar a esto el Tranquil Spa. Este es el nombre de usuario y contraseña que vamos a utilizar para iniciar sesión en el back-end de WordPress o en el panel de WordPress. Yo quiero llamar a la mía, tranquil_admin. El password puedes mantenerla como la generada, o bien puedes agregar una contraseña de tu elección. La dirección de correo electrónico, para luego completar la instalación haciendo clic en este botón. Bien, ya estamos listos para iniciar sesión usando el nombre de usuario y contraseña que acabamos de crear. Haga clic en “Iniciar sesión” y podemos ingresar estos detalles en WordPress. Tan tranquil_admin, la contraseña Recuérdame y luego Ingresa. Una vez que estemos registrados se llevará al panel de WordPress, que es el área de administración de nuestro sitio. Nos permitirá controlar cosas como las páginas, los posts. Podemos subir cualquier medio. Podemos controlar los comentarios y la configuración y apariencia de nuestro sitio. Pasaremos por estos con más detalle a medida que avancemos por el curso. También podemos ver nuestro sitio al pasar el ratón sobre Tranquil Spa y hacer clic en 'Visitar sitio”. Esto nos llevará entonces al tema predeterminado. Verás algo que se parece a esto una vez que llegues a esta etapa. Si necesitas volver al dashboard, todo lo que tienes que hacer es hacer clic en este título del sitio o bajar al enlace de Dashboard y esto nos llevará de vuelta al Dashboard. Si ahora llegas a esta etapa, esto es WordPress todo ahora configurado en tu computadora y ahora puedes avanzar a la siguiente sección donde comenzaremos a construir nuestro sitio de WordPress. 18. Nuestra carpeta de temas de WordPress: Bienvenido de nuevo. Ahora tenemos una versión de WordPress ejecutándose en nuestro equipo. Ahora vamos a comenzar el proceso de transferir nuestra plantilla Bootstrap a un tema de WordPress. Dentro de local por volante, podemos proporcionar la nueva carpeta temática navegando a nuestro directorio. En este pequeño ícono justo aquí, podemos hacer click en esto y luego nos llevan a donde se almacena nuestro proyecto, dentro del nombre del proyecto, podemos ir a arriba, luego abajo a “WP content” y luego a “Themes” y luego dentro de aquí podemos ver los temas predeterminados libres, que se instalan con WordPress por defecto. Si has optado por seguir junto con este curso, usa MAMP, necesita navegar al directorio MAMP, abre esto, luego ve a los documentos HT, abre el proyecto, luego ve al contenido y luego temas y entonces puedes continuar exactamente como vamos a hacer. Por lo que dentro de aquí es donde vamos a colocar nuestro nuevo tema. Para ello, voy a duplicar nuestra plantilla bootstrap y luego una vez hecho esto, voy a renombrar este, tranquilo WP. Una vez que lo hayamos hecho, podemos arrastrar esto hacia nuestros temas, por lo que WordPress tiene acceso a nuestra carpeta de temas. El siguiente paso es arrastrar esto hacia tu editor de texto. Esto se abre en lugar de la versión bootstrap. Ahora como WordPress usa PHP, el primer paso es cambiar el nombre de la página de índice de index.html. Vamos a cambiar la extensión al final para que sea index.php. Este es uno de los archivos requeridos en un tema de WordPress y luego dentro de aquí necesitamos añadir un comentario en la parte superior del archivo. Este comentario va a estar dentro de las etiquetas PHP, luego sintonizado en código PHP, luego podemos cerrar esto con otro signo de interrogación y la flecha de cierre. Entonces podemos agregar nuestro comentario PHP dentro. Un comando PHP es un adelante/ y luego una estrella y luego termina con una estrella y luego adelante/. Entonces podemos teclear cualquier contenido que quieras dentro aquí. Simplemente voy a agregar el texto del archivo de plantilla principal y luego guardar esto. El otro archivo requerido en nuestro tema es el style.css. Tenemos un archivo CSS personalizado dentro de la carpeta CSS, así que voy a agarrar el CSS personalizado y arrastrar esto a la raíz del proyecto. Asegúrate de que esto sea a lo largo del resto de las páginas que tendremos aquí dentro. Este archivo para WordPress necesita ser renombrado como style.css. Por lo que es reconocido por WordPress. El style.css también necesita un comentario en la parte superior del archivo. No obstante, este comentario es un poco diferente al que agregamos en la página de índice. Si pasamos al navegador, entonces abrimos un motor de búsqueda, si buscamos las hojas de estilo del tema del códice, el primer enlace que obtenemos debe ser para el códice de WordPress. Nos hemos referido al códice muchas veces a lo largo de este curso para ver la información sobre las funciones de WordPress, que podemos utilizar. También podemos dar click en este enlace para saltar a las hojas de estilo temático y esta es la sección exacta que necesitamos. Este es el comentario que necesitamos agregar a la parte superior de nuestra hoja de estilo y este comentario proporciona información diferente sobre nuestro tema, como el autor, el nombre del tema, podemos agregar una descripción, cualquier licencia información junto con cualquier etiqueta que sea relativa a nuestro tema, tipos como el tema de color, el número de columnas, si esto es responsive y llegará a la traducción lista. Podemos simplemente agregar cualquier etiqueta aquí que nos guste, sí necesitamos referirnos a las etiquetas de WordPress disponibles en el manual de revisión de temas y puedes echar un vistazo a esto si quieres. En [inaudible], voy a copiar este comentario como iniciador y luego por encima de la sección de cuerpo, podemos pegar esto en y es solo un caso de editar los contenidos para que se adapten a nuestro tema. Esto va a ser tranquilo WP. No tenemos enlace aquí, así que solo voy a hacer uno, tranquilspantheme.com, el autor, puedes agregar tu nombre aquí. Puedes agregar tu página web si lo deseas, también una descripción. Yo sólo voy a añadir tranquilspantheme para nuestro WordPress. Voy a dejar la versión, la licencia y para las etiquetas, voy a quitar los colores, sólo dame cualquier color de tu elección, así que dejaré esto fuera y luego editaré el resto. Yo iba a estar lista la traducción. Agregaremos esto en un apartado posterior. Podemos agregar barra lateral derecha. También incluiremos encabezados personalizados, tendremos imágenes destacadas y también un menú personalizado. Se puede por supuesto, después de esto más adelante, una vez que agreguemos más características pero solo para rematar, voy a añadir el dominio de texto, que coincidirá con nuestro nombre de carpeta temas de tranquil WP y luego podemos eliminar el texto derecho en la parte inferior y luego guarde este archivo. El siguiente paso es mover las capturas de pantalla, cuales se te han proporcionado en la carpeta de imágenes. Si agarras el screenshots.png y luego podemos arrastrar esto a la raíz de nuestro proyecto junto a nuestras hojas de estilo y también a todas las páginas. Esta será la imagen que aparecerá junto a nuestro tema dentro del tablero. Si guardamos este archivo, esto es exactamente lo que vamos a hacer ahora. Tenemos que ir al host local en el navegador o si estás usando volante, podemos seleccionar el botón admin, podemos seleccionar el botón admin, iniciar sesión si es necesario y el siguiente paso es bajar a la apariencia y luego a los temas. Esta sección temática tendrá una lista de todos los temas que hemos visto antes dentro de la carpeta de temas, como los predeterminados proporcionados por WordPress y ahora también deberíamos tener el tema que hemos proporcionado de WP tranquilo. Esta es también la captura de pantalla de fondo, que puedes ver aquí. Podemos consultar nuestra vista previa en vivo, que simplemente voy a activar este tema. Podemos comprobar esto está funcionando haciendo clic en visitar sitio. Este es todo el contenido HTML para nuestro sitio. Se puede ver que el sitio necesita algo de trabajo, ese es el contenido HTML básico pero esto no está bajo el control de WordPress todavía, simplemente estamos poniendo algo de HTML básico. Para iniciar el proceso de conversión, voy a crear cuatro archivos nuevos, que podamos empezar a trabajar en esto. En las raíces del proyecto, el primero se va a llamar el header.php. El segundo se va a llamar footer.php. El tercero será para la barra lateral con extensión a.php y el cuarto será para nuestro functions.php y el propósito de estos cuatro archivos es desglosar las secciones de nuestro HTML, luego colocarlas en su propio archivo PHP personalizado y luego podemos importarlos a nuestro tema según sea necesario y comenzaremos con este proceso en el siguiente video. 19. Comenzar y nuestra página de índice: Una de las primeras etapas de crear un tema de WordPress es romper nuestras secciones de nuestros sitios web en sus propias carpetas de WordPress. Por momentos, creamos las carpetas de archivos en el último video, que va a contener el encabezado, el pie de página, la barra lateral. También creamos uno para las funciones, pero también tenemos el index.php que por el momento solo contiene nuestro contenido de plantilla Bootstrap. Pongámonos a trabajar llevando nuestro contenido a sus propios archivos separados. Empezaremos con el encabezado, así que si nos desplazamos hacia abajo hasta la etiqueta de cabecera de cierre, que es ésta de aquí, seleccione todo el camino hasta el DOCTYPE. Ir a apagar esto, luego pegar su contenido en el header.php dividiendo nuestro código en pequeños archivos como esta es una forma realmente conveniente de hacer las cosas en lugar de tener este encabezado codificado duro en cada página. WordPress sólo lo tendrá en un solo archivo y luego lo inyectará a cada página según sea necesario. También podemos volver a nuestro índice y hacer lo mismo para el pie de página, abajo en la parte inferior. Desplázate hacia abajo hasta nuestra sección de pie de página, pon la sección hacia fuera hasta la parte inferior incluyendo el HTML. Pegue esto en nuestro footer.php, si guardamos esto y recargamos el navegador en nuestro índice, vemos que solo tenemos el contenido que se coloca en el medio. Ya no tenemos el encabezado y el pie de página. Para volver a poner estos en nuestro tema, tenemos que ir a la página de índice donde una vez estos en. Salto en la parte superior, en lugar del contenido del encabezado, podemos abrir las etiquetas PHP, que es el corchete de ángulo izquierdo, signo de interrogación, PHP. Entonces podemos usar una función de WordPress, tirando de este encabezado. Es función de WordPress se llama “get_header” con los corchetes rellenos después. Ya que ahora estamos volviendo a PHP y luego a HTML normal, necesitamos cerrar nuestras etiquetas PHP con un signo de interrogación y los corchetes angulares, así como esto. Entonces hacemos una cosa muy similar en la parte inferior en lugar de nuestro pie de página, donde estaba nuestro pie de página cuando estaba dentro del PHP. Utilizamos una función de WordPress esta vez llamada get_footer, luego cerrar nuestro PHP, guardar esto, y volver a cargar el navegador. Todavía no parece que mucho nuestro contenido esté de vuelta en su lugar, tenemos la sección de encabezado, abajo en la parte inferior, tenemos nuestro pie de página, y esto está todo bien por ahora. cualquier función de PHP, podemos empezar a trabajar con esto agregando un comentario en la parte superior. Esto va a ser un comando PHP, así que vamos a abrir y cerrar los corchetes PHP. Empezamos un comentario con barra delantera y estrella, luego cerramos esto con el reverso con una estrella, y una barra hacia adelante, y luego una estrella para cada nueva línea. Esta va a ser una descripción del archivo y solo voy a agregar definiciones de funciones para tema Tranquil Spa ya que este archivo va a contener todas las funciones que se requieren para nuestro tema. Este archivo se utiliza para cambiar el comportamiento predeterminado. Se puede utilizar para agregar funcionalidad y también nuevas características. Estas funciones pueden ser funciones nativas de WordPress proporcionados tubérculos, o también podemos añadir nuestras propias funciones personalizadas también. Observaremos ambos tipos durante este curso. Lo primero que hay que hacer es crear una función de configuración. Esto se ejecutará tan pronto como se cargue nuestro tema. Entonces dentro de esta función podemos agregar cualquier funcionalidad necesaria la cual necesitamos cargarla de inmediato, como nuestros menús de navegación. Debajo de los comentarios, voy a abrir el PHP, luego crear una función PHP, este nombre de la función va a ser Tranquil wp_setup, los corchetes justo después. Entonces nuestro cuerpo de funciones, lo primero que queremos hacer es agregar soporte de tema. Esto registrará nuestro soporte temático para una característica dada. El primero va a ser automático-feed-links, separados por los guiones. Automático-Feed-Links habilita las publicaciones y comentarios RSS de forma predeterminada. Estos feeds se mostrarán automáticamente en la sección del cabezal. Voy a duplicar esto y también añadir soporte de tema para la etiqueta de título, title-tag y los puntos y comas al final. Esto permite que WordPress administre nuestro título de documento, en lugar de la etiqueta de título. Esto básicamente está diciendo que no vamos a WordPress para controlar el título de la página. En lugar de usar nuestro codificado duro. Fuera de nuestra función, luego agregamos una acción. Esto va a tomar dos argumentos, el primero es after_setup_theme, y luego el segundo es el nombre de nuestra función, que es tranquilwp_setup, un punto y coma al final, y puedo cerrar el PHP. After_Setup_theme, que pasamos como primer argumento, es un gancho de WordPress, que se llamará carga de página en cola, una vez que el tema se inicializa, generalmente se usa para formar una configuración básica, registro, y también cualquier necesidad de acciones para nuestro tema. Después seguimos adelante y pasamos en nuestro propio conjunto de funciones personalizado. También ejecuta y proporciona nuestra propia funcionalidad de inicio personalizada, que has agregado aquí. A continuación, se puede agregar el ancho de contenido. En primer lugar, hay que comprobar si ya se ha establecido el ancho del contenido. Esta característica nos permite establecer el ancho máximo permitido o cualquier tema de contenido añadido 12, como una imagen en una publicación. Nuestro diseño no se ve fuera de lugar. Si usamos un era para seguir adelante y subir una imagen más grande de lo esperado. El primero que tenemos que hacer es crear una sentencia PHP if. Para comprobar si el contenido que ya se ha establecido, podemos acceder al contenido con la variable de content_width. Recuerde, PHP utiliza un símbolo $ para declarar una variable. Nosotros, sin embargo, queremos hacer lo contrario, y comprobar si no se ha establecido el ancho del contenido. Hacemos esto con un signo de exclamación. Si no se ha establecido el ancho del contenido, queremos seguir adelante y establecerlo nosotros mismos. Podemos agarrar esta variable de ancho de contenido y establecerla en un valor de píxel de 660. También se puede acceder al ancho de contenido mediante plug-ins para permitir que nuestros temas se integren con cualquiera de los plug-ins que se instalan. Si seguimos adelante y guardamos este archivo, no deberíamos ver nada diferente dentro del navegador una vez recargado, ya que no hemos hecho nada más que una ruptura de este contenido en archivos separados. No obstante, este es un primer paso importante para crear nuestro tema de WordPress. Ahora avanzaremos a trabajar con los archivos de encabezado y pie de página. 20. Hacer que el encabezado y pie de página sean dinámicos: Ahora, en el encabezado y pie de página. Por el momento, tenemos nuestro código HTML de las plantillas bootstrap. Esto está bien para sitios web estáticos pero queremos entregar el control a WordPress. Voy a empezar por pasar a nuestro HTML y luego pasar el control a WordPress agregando algunas etiquetas PHP para hacer uso de las funciones integradas de WordPress, empezando por el header.php. Abramos este archivo y luego subamos hasta la parte superior. Podemos agregar un comentario PHP. Abre el PHP, cierra esto, que es así. Tu comentario simplemente será el encabezado de nuestro tema. Dado que WordPress está construido en el lenguaje de programación PHP, necesitamos agregar cualquiera de nuestras funciones integradas de WordPress. También entre estas etiquetas PHP, podemos abrir y cerrar estas etiquetas en cualquier lugar de nuestro HTML. Por ejemplo, vamos a reemplazar el atributo de lenguaje. Eliminemos esto de la etiqueta HTML de apertura, abrimos el PHP, cerramos esto, y luego podemos agregar una función de WordPress llamada los atributos del lenguaje, seguido de los corchetes y luego el punto y coma. Estos soportes PHP cuando se usan dentro del HTML, señalarán el inicio del código HTML. Después cerramos esto, y luego el archivo volverá al HTML normal. Los atributos del lenguaje es una función de WordPress que se utiliza para establecer el idioma de la página. Pero, ¿cómo sabe WordPress qué idioma quieres usar? Pasemos al navegador y echemos un vistazo. Recarguemos esto, haga clic derecho, y luego “Ver fuente de página”. Si buscamos en la parte superior los elementos HTML de apertura, vemos que tenemos el atributo de idioma establecido en inglés, US. El tuyo puede ser diferente para tu instalación, pero podemos ver que esto no es lo que pusimos en nuestro archivo. No vemos ninguno de este código PHP que se añadieron en. En cambio, vemos el lenguaje real que estamos utilizando. Esto se debe a que PHP se renderiza en el servidor. Cuando recuperamos esta página y abrimos el navegador, en realidad no vemos el código PHP. De hecho vemos el HTML que se regenera en su lugar. Este idioma se establece en el panel de WordPress. Si abrimos Flywheel, pincha en “Admin”, luego baja a “Settings” y “General”, tenemos el idioma del sitio, que hemos establecido justo aquí. Si quieres saber más sobre alguna de las funciones de WordPress que cubriremos, puedes visitar el codex.wordpress.org, y buscar el nombre de la función para conocer algo más de información. A continuación, vamos a establecer los conjuntos de caracteres. De vuelta en nuestra cabecera. Para el juego de caracteres meta, podemos quitar nuestra versión codificada de UTF8, luego dentro de estas citas, podemos abrir las etiquetas PHP, cerrarlas, y luego dentro agregar una función de WordPress llamada blog info. El info del blog que queremos establecer es el conjunto de caracteres, el cual se establece así. La codificación predeterminada en WordPress es UTF8. Esto es lo que se mostrará. También podemos recargar la fuente del navegador solo para volver a comprobar esto. Ahí vamos. Esto se establece en el UTF8 predeterminado. A continuación tenemos el título del sitio, que voy a quitar. Entonces desplázate hacia abajo, tenemos el título usado aquí. Podemos eliminar completamente o comentar esto. Esto se debe a que en el functions.php, que agregamos recientemente, que establece el soporte de tema para la etiqueta de título. Al hacer esto, este soporte de tema permite a WordPress gestionar de forma segura las fotos del título de la página y también declara que no estamos usando un título codificado duro para nuestro tema. Volver a nuestro header.php. Podemos usar una función PHP llamada WP_Head. Esto le dirá a WordPress exactamente dónde queremos agregar la información generada automáticamente. El lugar de esto es importante ya que esto se utiliza para inyectar todas las cosas tirando como nuestros archivos CSS, cualquier script y se van a insertar aquí exactamente donde hemos agregado esto. También vamos a echar un vistazo a cómo WordPress maneja nuestro CSS y nuestros scripts en tan solo un momento pero primero, vamos a pasar a la clase body. Añadamos esto dentro de la etiqueta de cuerpo de apertura, que significa PHP. Cierra esto. luego añadir otra función de WordPress llamada body_class; En este también. Todavía asegurándose de cerrar la etiqueta HTML justo al final. Al agregar esta clase body a la sección body, esto permite a WordPress agregar cualquier clase CSS, lo cual se requiere, justo de la misma manera que lo haríamos en HTML normal agregando los atributos de clase. Pero ahora en cambio, esto está bajo el control de WordPress. Si guardamos esto y luego recargamos nuestra fuente de página, y si localizamos los elementos del cuerpo de apertura, que está justo aquí, ahora vemos todas estas clases que WordPress ha agregado. Estas clases sí cambian dependiendo de la página que estamos viendo, nuestros estados de inicio de sesión, si hay algún error, y así sucesivamente, pero todo esto lo maneja WordPress detrás de bambalinas. Incluso podemos añadir nuestras propias clases a cada página también, simplemente agregándolas como una cadena dentro de la clase body. Vamos por la costumbre. Dale a esto un ahorro, recarga, y también deberíamos ver nuestra clase personalizada agregada al final. Esto se agrega como una cadena. Si tuviéramos varias clases, podríamos agregar esto como una matriz. Escribiré en array. Dentro de los corchetes, podemos agregar nuestro primer valor separado por una coma. Podemos agregar un segundo valor, digamos custom 2, “Save” y “Reload”. Esto suma múltiples clases a nuestro cuerpo. No los necesitamos para este proyecto, así que los voy a quitar y simplemente dejar la clase de cuerpo vacío. Al ver la fuente de la página, es posible que también hayas notado que ahora tenemos algún contenido extra en la sección de cabecera. Si nos desplazamos hacia arriba, tenemos todo este código que está encendido aquí y también todos los enlaces abajo. Estos todos siendo agregados automáticamente por WordPress. Todos estos son estilos y scripts que WordPress ha agregado desde que incluimos la función WP_Head. Esto está justo debajo de nuestro CSS personalizado. Si buscamos aquí nuestro CSS personalizado, este es todo el contenido WP_Head que se agrega justo debajo. También tenemos nuestro título de sitio, que se está agregando automáticamente a pesar de que eliminamos el título de página codificado duro. El cambio final al encabezado que quiero hacer en este video es el título del sitio en la parte superior. Si pasamos a nuestro proyecto, este es el título del sitio que tenemos en el enlace. Actualmente, esto es de código duro y WordPress no tiene control sobre esto. Adelante y cambiémoslo ahora. Manejar sobre el control a WordPress, usamos get_bloginfo pasando en el nombre. Si nos desplazamos hacia abajo hasta nuestro nav, tenemos el título del sitio dentro del elemento A. Podemos quitar esto. Abramos los elementos PHP y luego lo cerramos. Dentro de aquí podemos hacer eco del nombre del blog por get_bloginfo. Dentro de aquí vamos a pasar la información que queremos recibir de vuelta. Este es el nombre del sitio. Si guardamos esto, y una vez más, si vemos la fuente de la página y luego nos desplazamos hacia abajo hasta nuestra sección de cabecera, mía está en la línea 62, y aquí vemos el título del sitio de Tranquil Spa. Volver a nuestro sitio y recargar. También lo vemos justo aquí. Para ver dónde se establece esto, una vez más podemos ir a la configuración general y luego ir al título del sitio. Si agregamos algo justo después de aquí, pulsa “Guardar”, “Volver a cargar el sitio”; vemos que los cambios se reflejan en el navegador. Volvamos a cambiarlo a Tranquil Spa y luego a ahorrar. Lo último que quiero hacer ahora en el encabezado es tener el enlace del título del sitio de vuelta a la página de inicio cuando hacemos clic en él. Actualmente, si hacemos clic en él ahora, sólo estamos usando un href vacío, que se establece aquí. Esto funciona por ahora, pero queremos asegurarnos de que WordPress también esté totalmente en control de esto agregando el elemento PHP. Cierra estos y luego vamos a eco escape URL, pasando en el home_url como una función. Por lo que el home_url recupera la página de inicio de WordPress, y la pasamos a escape URL para eliminar o limpiar cualquier carácter innecesario como cualquier signo ampersands, símbolos por ciento, o generalmente cualquier carácter que no sea necesario. Guarda esto y ahora solo vuelve a comprobar todo sigue funcionando haciendo clic en Tranquil Spa y vuelve a la página de inicio. También hay un pequeño cambio que hacer al pie de página. Si abrimos el footer.php, desplácese hacia abajo hasta la parte inferior del archivo. Justo encima de la etiqueta de cuerpo de cierre, necesitamos agregar una función de WordPress llamada wp_footer. Pondremos los corchetes, el punto y coma. Esto es un poco como el wp_head, que hicimos en la sección de encabezados justo aquí. Será utilizado por WordPress para inyectar cualquier script que pueda agregar. Agregar en el wp_footer, por lo tanto, le dice a WordPress dónde poner estos scripts. También necesitamos un comentario PHP arriba en la parte superior del archivo. Simplemente sigue el pie de página, abre y cierra el PHP. Esta va a ser la plantilla para mostrar nuestro pie de página. Dale un guardado a este archivo. Volveremos al pie de página en una etapa posterior cuando veamos agregar cosas como menús personalizados. Pero por ahora, este es el encabezado y pie de página ahora cambiado para ser más dinámico y también para vincularse más profundamente a WordPress. 21. Cómo formar una cola de hojas de estilos y scripts: Por el momento, tenemos nuestros scripts y nuestros estilos añadidos directamente a nuestro área de encabezado y pie de página. Esto es de antes cuando creamos la plantilla Bootstrap. Tenemos el CSS en el encabezado. Entonces en el pie de página abajo en la parte inferior, tenemos nuestro JavaScript. Si visitamos la palabra precisa, no vemos ningún estilo y también cosas como las imágenes e iconos. Lo que vamos a hacer ahora es eliminar estos enlaces codificados de forma dura, y luego trasladarlos al functions.php. Entonces podemos incluirlos en WordPress mediante el uso de funciones llamadas wp_enqueue_style, hojas de estilo de fila, y para que nuestro script obedezca a wp_enqueue_script. Pero, ¿por qué necesitamos hacer esto en absoluto? Bueno, hay algunas razones. Pero imagina, nuestro tema de WordPress requería un jQuery para que funcionara, y luego imagina si tuviéramos dos plugins y ambos esos plugins también requieren un jQuerry. Si jQuery estaba codificado en tema civil y también en los plugins. Esto significaría que WordPress necesitaría descargar jQuery tres veces separadas. Esto ralentizaría nuestros sitios. Después de esto, también podrían ser versiones diferentes del mismo script, lo que puede provocar conflictos de versiones. Además, un script en particular también se puede incluir con WordPress, por lo que es posible que no necesitemos descargarlo en absoluto. Usando estas funciones, esto permitirá que WordPress tome el control y solo cargue exactamente lo que se requiere. También puede hacerse cargo de cualquier script adicional que sean dependencias a. Comencemos de nuevo en el header.php eliminando las hojas de estilo de aquí. Tenemos los cuatro de estos, y luego también podemos eliminar todos estos guiones de la parte inferior del pie de página. Tenemos dos aquí, también podemos quitar estos comandos, guardar el archivo, y puedo pasar al functions.php. Podemos agregar estos back-in creando una función PHP. Abajo en la parte inferior, aún dentro de nuestra sección de PHP, vamos a añadir una función PHP llamada tranquil_scripts como los corchetes justo después. En primer lugar, voy a agregar los estilos sin un comentario sobre la parte superior, así que agrega los estilos. Entonces dentro de aquí, podemos empezar con la función de WordPress llamada wp_enqueue_style, punto y coma al final. WP_enqueue_style puede tomar hasta cinco parámetros. El primero es el nombre de las hojas de estilo, que vamos a añadir como una cadena de llamada Bootstrap. Este nombre también debe ser único. El segundo parámetro que necesitamos es la fuente. Aquí, podemos utilizar una función de WordPress llamada get_template_directory_uri, que designa las raíces o el directorio de inicio de nuestro proyecto. Añadamos esto ahora. Entonces [inaudible], y es tu punto a nuestro directorio de inicio, que son todos nuestros archivos y carpetas de la izquierda aquí. Después usamos un punto, y luego podemos agregar en una ruta de archivo a nuestro CSS. Esta va a ser nuestra versión minificada de Bootstrap, que está en la carpeta CSS. Como cadena, podemos agregar /CSS, y luego el archivo es el bootstrap.min.css. Si damos esto para ahorrar ahora, cierra la barra lateral, pasa al navegador, y luego pulsa “Recargar”. No vemos ningún cambio en nuestro proyecto por el momento. Para ejecutar realmente la función, necesitamos agregar una acción, y esta acción va a ser la responsable de iniciar nuestra función. Justo debajo, podemos add_action. Esto es igual que agregamos arriba para nuestra configuración. Esta vez ahora, este va a ser nuestros guiones. El primer argumento es para wp_enqueue_scripts, y luego el segundo es nuestro nombre de función personalizada de tranquil_scripts. Esta acción ejecutará nuestra función personalizada de tranquil_scripts, que es esta sección aquí. Cada vez que se llama a la función WordPress es wp_enqueue_scripts. Ahora, podemos guardar esto, y luego refresca el navegador. Ahora, ¿cómo se han aplicado los estilos Bootstrap? También son pequeñas hojas de estilo que necesitamos agregar a esta función como Font Awesome, nuestras Fuentes de Google, y también nuestro CSS personalizado. Hagamos exactamente lo mismo que antes. Voy a copiar y pegar este estilo. Esta vez, voy a llamar a este fontawesome como el nombre. El enlace esta vez necesita ser ajustado para apuntar al archivo Font Awesome. Entonces esto es /cssfontawesome/css, y luego necesitamos el todo.min.css. Vamos a comprobar si estos iconos están funcionando, pulsa “Guardar”, “Recargar”, y esos son nuestros iconos abajo en el pie de página. También es nuestro archivo CSS personalizado 2. Recuerda, como requisitos de WordPress, necesitábamos mover esto a un archivo style.css, y esto está en la raíz de nuestro proyecto. Debajo de aquí, vamos a copiar y pegar en una nueva línea. Esto se convierte en B para nuestro archivo personalizado. También necesitamos agarrar el directorio de inicio, que es get_template_directory_uri. Esta vez, no necesitamos agregar una ruta de archivo ya que esta está en la raíz. Todo lo que necesitamos hacer es agregar el nombre de archivo de style.css, guardar y recargar. Podemos ver que ahora se han aplicado algunos estilos personalizados. Todavía no tenemos las imágenes introducidas, pero volveremos a esto muy pronto. El último que hay que añadir son nuestros scripts para jQuery y Bootstrap. Podemos agregar nuestro archivo bootstrap-js de una manera similar a los estilos. Pero esta vez, en lugar de wp_enqueue_style, ejecutamos wp_enqueue_script, así que son lo mismo, justo después de nuestro tercer estilo. El nombre de la función wp_enqueue, y esta vez este es script dentro. Aquí, primero agregamos nuestro nombre, por lo que este va a ser bootstrap-js. Nuevamente, este es el nombre de nuestra elección, y debe ser único. En segundo lugar, desde aquí vamos a copiar la ruta del archivo. Al mismo tiempo, también necesitamos usar esto para apuntar al directorio home, y luego la ruta del archivo que vamos a usar se supone que es /js, para luego reenviar barra el nombre de nuestro archivo, que es bootstrap.min.js. También podemos agregar cosas a esto, una matriz de dependencias. Voy a agregar una dependencia de jQuery. Podemos agregar múltiples scripts aquí, y jQuery está empaquetado con WordPress por defecto, lo que no necesitamos agregar esto como un script separado por una coma. Justo después de esto, también podemos agregar un cuarto argumento, que es si quieres usar un número de versión específico, así que voy a agregar esto como nulo, el quinto y último valor va a ser cierto. Establecer este valor en true declarará que queremos que WordPress agregue este script al pie de página, Solo necesitas la etiqueta wp_footer, que agregamos antes, y este es éste de aquí. Por último, si guardamos esto y luego recargamos nuestro tema. También me dieron errores de sintaxis, vamos a echar un vistazo a esto, y podríamos simplemente faltar un punto y coma. Tienes que ahorrar. Podemos comprobar que se está cargando JavaScript. Si nos desplazamos por el navegador, y sabemos que el JavaScript está funcionando porque nuestro menú desplegable es totalmente funcional. Si ahora ampliamos el navegador un poco más grande, y luego vamos a recargar recurso. En primer lugar, vamos a la parte superior del expediente. Si miramos de cerca, podemos ver nuestro CSS personalizado. Podemos ver nuestro fontawesome, y también lo que llamamos bootstrap-css se ha cargado. Entonces hasta el fondo, también tenemos un script aquí, que es uno de nuestros bootstrap.min.js. Ahora has aprendido a agregar hojas de estilo y scripts a WordPress de la manera correcta. Esto permite a WordPress controlar lo que se carga, y evitar cualquier problema potencial. 22. Menú de navegación de encabezados: En nuestra sección de encabezados, nuestro menú enlaza hacia arriba en la parte superior. Si hacemos clic en el Inicio, esto enlaza a nuestras versiones HTML de nuestra página de índice, y también si hacemos clic en el Blog, esto también va a nuestro blog a HTML. Esto no es lo que queremos sin embargo para un tema de WordPress, ya que queremos que WordPress controle las páginas y también la navegación. Comencemos las cosas creando un nuevo menú de WordPress en el tablero. Entonces vamos al panel principal y luego vamos a Apariencia y luego Personalizar. Desde aquí podemos ir al personalizador y añadir un nuevo menú. Como adivinaste, podemos hacer esto en la pestaña Menús y luego crear un nuevo menú. Esta es nuestra primera mirada a lo que se llama el personalizador. Esto nos permite hacer cambios visualmente en ciertas partes de nuestro tema, y también podemos ver una vista previa sobre el lado derecho de nuestros cambios. Para que podamos jugar con estos ajustes y ver cómo se ve en nuestro tema antes de comprometernos. Estaremos usando el personalizador para agregar este nuevo menú a nuestro tema. Después agregue un nombre de menú del menú principal, haga clic en “Siguiente”, agregue ítems a otras páginas que queremos agregar a nuestro menú. El primero va a ser para casa, y luego aún no tenemos una página de blog. Por lo que podemos sumar el justo a continuación. Haga clic en “Agregar”, y asegúrese de que tenemos los enlaces de inicio y blog en el lado izquierdo. Si quisiéramos también podríamos añadir enlaces personalizados. También podríamos agregar enlaces a diversos posts y las categorías o etiquetas asociadas a esos posts también, pero por ahora estas dos páginas son todo lo que necesitamos para reflejar nuestras plantillas bootstrap. También podemos agregar páginas automáticamente a nuestro menú ya que se crean haciendo clic en este botón aquí. Pero sólo queremos a los dos por ahora. Entonces da click en “Publicar”, cierra esto, y podemos ir a refrescar nuestra página. Por lo que se crea el menú pero no lo tenemos apareciendo en nuestro tema todavía. Estos son los enlaces de nuestro HTML. Apenas adelante haz esto vamos a pasar al códice de WordPress, que está disponible en developer.wordpress.org. Por lo tanto, dirígete a esta página. Entonces podemos hacer una búsqueda de wp_nav_menu, separados por guiones bajos. Por lo que wp_nav_menu. Busca esto, luego pasa a la referencia de función. Vemos en la parte superior wp_nav_menu se utiliza para mostrar un menú de navegación y esto es exactamente lo que necesitamos. Debajo de esto tenemos algunos parámetros que podemos agregar a nuestro menú. Estos parámetros nos permitirán personalizar el menú agregando cosas como contenedores junto con diversas clases e ID de clientes. Usar todos estos parámetros nos permitirá decirle a WordPress exactamente qué clases queremos agregarlo a nuestro menú, para mantener nuestro estilo y diseño exactamente cómo está usando Bootstrap. Voy a hacer esto usando lo que se llama un Navwalker Bootstrap. Pasemos a la pestaña y en busca del Bootstrap para navwalker, que nos llevaría a la página de GitHub. Este navwalker nos permitirá enlazar todas las clases e ID de Bootstrap y la estructura básica a nuestro menú de WordPress. Por lo que no tenemos ninguna diferencia en el estilo. Lo primero que tenemos que hacer es descargar el archivo zip. Demos click en “Clonar o descargar”. Descarga el archivo zip. Yo quiero que se descargue necesitamos agregar esto a la raíz de nuestro proyecto. Entonces abre esto, entonces dentro de aquí tienes una clase que se llama class-wp-bootstrapnavwalker.php. Entonces vamos a copiar esto o de hecho voy a arrastrar esto hacia la barra lateral. Esto colocará esto dentro de nuestra carpeta temática en la raíz del proyecto. Si volvemos a la página de GitHub para el navwalker, desplácese hacia abajo hasta la instalación. Ya hemos completado el primer paso, que es colocar nuestro archivo PHP en nuestra carpeta. Lo siguiente que tenemos que hacer es ir al functions.php y agregar el siguiente código. Entonces voy a copiar esto en el archivo de funciones y luego desplazarme hacia arriba y voy a agregar esto justo después de nuestro soporte de tema para la etiqueta de título, pegarlo en, y estamos bien para ir. Por lo que requieren una vez que está en el inicio de esta línea es una función PHP, que incluirá el archivo que especifiquemos. En nuestro caso, lo estamos señalando al directorio principal, y luego al archivo PHP que agregamos. Requerir una vez es similar a la función PHP require. Primero comprobaremos si este archivo ya se ha incluido en el pasado antes de requerirlo una vez más. Con esto ahora registrado volvamos a la documentación y el siguiente paso es usar una función de WordPress llamada register_nav_menus. Por lo que podemos copiar esta función justo aquí. Esto también necesita pasar a nuestro archivo de funciones, y quiero agregar esto justo en la línea de abajo. Pega esto en. También hay una función para crear un solo menú llamado register_nav_menu en lugar de menús. Pero también estaremos agregando un menú de pie de página en una fecha posterior. Para que podamos quedarnos con los menús. Esto contiene una matriz de menús. Si no sólo tienes el uno en los momentos. Aquí estamos agregando en nuestro menú como primario y vamos a echar un vistazo a esto en tan solo un momento. Después de esto, tendremos una descripción del menú. Una vez llegamos a la descripción, el menú principal del encabezado. Después de esto tenemos el nombre del tema. Yo sólo me tranquilizaré. Este nombre debe coincidir con los comentarios en la parte superior del style.css. Debe mucho este dominio de texto, que declaramos antes. De vuelta en las funciones, este dominio de texto también se utilizará más adelante a cuando nos fijemos en traducir nuestro texto en el tema. Ahora volvamos a la documentación y continuemos con este menú. Si nos desplazamos hacia abajo hasta el uso, la siguiente pieza de código es wp_nav_menu. Esto es lo que miramos en el códice de WordPress justo antes. Esto se utilizará en wp_nav_menu para registrar nuestro menú, que luego podremos seguir adelante y mapear nuestras clases de WordPress con la equivalencia bootstrap. Vamos a copiar esta función justo aquí a nuestro encabezado, que es donde se almacena nuestro menú. Nuestro menú para navegar a la lista desordenada. Podemos tener un eliminar esto o comentar esta sección hacia fuera. Ya que ya no estamos usando esta versión codificada. En su lugar es que vamos a agregar algunas etiquetas PHP, ya que ahora estamos saltando en código PHP, luego pegar en nuestro menú. Observe la lista de parámetros en el lado izquierdo de esta matriz. Estos son los parámetros que vimos antes cuando miramos wp_nav_menu dentro del sitio web de WordPress. Estos son todos los que se acaban de poner aquí. Tenemos entonces la opción sobre en el lado derecho para mapear cualquiera de estos a nuestra equivalencia Bootstrap. Por lo que las clases de Bootstrap surtirán efecto en lugar de los valores predeterminados de WordPress. Si empezamos guardando esto y luego recargando nuestra página de inicio, vemos que nuestro menú ahora ha desaparecido desde que lo comentamos. Iremos a añadir un menú, pero necesito llevarme a nuestro menú principal que creamos antes. Ahora necesitamos establecer este menú principal a nuestra ubicación temática del menú de cabecera principal. Entonces selecciona esto, guarda nuestros cambios y nota bajo la apariencia ahora tenemos un menú de menús. Podemos volver a nuestro sitio haciendo clic en este enlace justo aquí. Ya puedes ver ya tenemos nuestros enlaces de Inicio y nuestro Blog desde nuestro menú. Esto se acabó ahora del lado izquierdo, pero esto es algo que fácilmente podemos arreglar ahora. Vuelve al menú en tu archivo header.php que rodea nuestro menú y de hecho solo voy a eliminar esta lista desordenada. Todavía tenemos este div circundante con las clases de Bootstrap. Vamos a quitar esto en tan solo un momento. Pero por ahora podemos usar esto como referencia, ya que básicamente estamos reemplazando esto por los parámetros que figuran a continuación. La ubicación del tema se establece en primaria. Esto está bien ya que esto enlaza con el nombre en nuestras funciones de primaria justo aquí. A continuación tenemos la profundidad del menú. Vamos a establecer que esto sea un valor de uno. Ya que este menú no es un desplegable. Nuestro contenedor también tiene la clase de justify-contenido-end. Entonces voy a copiar esto y añadir esto al final de la clase de contenedor. Esto moverá nuestro menú de nuevo hacia el lado derecho. El ID de navbar-nav, podemos tomar esto y añadir esto como el ID de contenedor. También podemos eliminar el valor de margen derecho del auto, ya que no usamos esto en nuestro tema. Este es nuestro contenedor ahora replicado, y abajo en la parte inferior creamos una nueva instancia de navwalker para usar ahora tema. Todo lo que queda por hacer ahora es quitar el div circundante, la apertura, y también las etiquetas de cierre del navegador y luego podemos recargar. De acuerdo, bueno nuestro menú ahora es empujado hacia la derecha. Si vamos a las herramientas del desarrollador haciendo clic derecho e inspeccionamos, Haga clic en el “Inspector”, y vaya al menú. Cuando es encontrar el div con el ID de navbar-nav, que ahora contiene todos nuestros div y clases que se restablecerán en el navwalker, y luego anidados dentro tenemos nuestra lista desordenada y luego nuestros ítems de lista. Si ahora cerramos esto, podemos hacer click en los enlaces. WordPress ahora tiene control total sobre dónde nos llevan. Ya no vemos ninguno de los enlaces HTML en la parte superior. Por lo que nuestro menú ahora está funcionando como se esperaba y así podemos agregar un menú personalizado a nuestro tema. A continuación vamos a trabajar en arreglar nuestras imágenes. 23. Rutas de archivos de imagen: Nuestras imágenes dentro de nuestro Tema de WordPress no han estado funcionando desde que comenzamos la conversión. Esto es algo que vamos a arreglar en este video. Si vas a hacer clic con el botón derecho y luego vas a las herramientas de desarrollador con inspecciones, podemos echar un vistazo a la consola haciendo clic en esta pestaña. Tenemos una lista de cuatro o cuatro mensajes de NOT_FOUND. Estas las cuatro de nuestras imágenes como se puede ver aquí. Esto es algo que podemos arreglar con bastante facilidad. Realmente es solo un caso de cambiar las rutas de archivo para la fuente de imagen. Empecemos en la parte superior con la imagen de fondo principal, que el en header.php. Si desea reubicar los elementos de imagen, que es una sección de características ordenada, desplácese hacia abajo. Esto es lo que necesitamos sólo escuchar. Voy a reemplazar fuente de imagen. Antes de nuestra ruta de archivo para ir a entrar al PHP, abre y cierra esto. Dentro de aquí vamos a hacer eco de una cadena PHP. Entonces podemos usar la función URL de escape, que comprobará y también limpiará la URL proporcionada, eliminando cualquier carácter que no esté permitido, entonces tal como hicimos cuando agregamos el CSS en archivos JavaScript en las funciones, podemos hacer uso del URI de plantilla gets. Es punto al directorio raíz de nuestro tema. ¿ Son corchetes en los extremos? ¿ Son punto y coma al final? También necesitamos agregar una barra inclinada hacia adelante antes de la carpeta de imágenes. Dado que esto no se agrega por defecto del proyecto y recargar. Ahora, ahora tenemos nuestra primera imagen de vuelta en pantalla. Ahora es sólo un caso de pasar por el resto de las imágenes del tema y luego [inaudible]. Puedes tener una copia y pegar esto o puedes escribirlo manualmente si prefieres acelerar las cosas. Voy a copiar todo. Una etiqueta PHP de apertura justo a través de la barra inclinada hacia adelante, copió esto. Podemos encontrar el resto de las imágenes en nuestro index.PHP. Hagamos una búsqueda con comando o control F, busquemos las etiquetas de imagen. Ahora copia y pega nuestro PHP. El primero, el segundo, las velas, la imagen del retiro. Se necesita la división para seguir bajando tenemos otra imagen aquí para un divisor. Tenemos la imagen del masaje, tenemos los cosméticos faciales, y eso se parece a todos. Guardemos esto y comprobemos el todo vinculado ahora el navegador, me desplazaré hacia arriba y hacia abajo y comprobaré solo las imágenes están donde deberían estar y todo se ve bien. Si tiene algún problema con alguna imagen, asegúrese de que todos tengan el código PHP insertado en el lugar correcto. Esas son nuestras imágenes, sobre nuestro trabajo otra vez. A continuación echaremos un vistazo a la jerarquía de plantillas, sin usar desde la página. 24. Jerarquía de plantillas y la portada: Ahora pasamos a crear en la portada de nuestro tema. Puede que estés pensando, ¿no tenemos ya nuestra página de inicio mostrando? Sí, tienes razón. Cuando visitamos el tema, vemos el contenido del punto índice PHP. Esto se debe básicamente a que, ya que ahora hemos creado unas plantillas de página principal adecuadas, WordPress volverá por defecto a nuestro punto índice PHP. Para entender mejor cómo funciona esto, vayamos a Google, y busquemos la jerarquía de plantillas de WordPress. Este es el enlace que necesitamos justo por encima de la parte superior. Las plantillas con usos de WordPress pueden ser archivos reutilizables para mostrar nuestras páginas web. Ya hemos utilizado las plantillas de encabezado y pie de página, que hemos reutilizado en todo nuestro tema. No obstante, no todas las plantillas necesitan ser utilizadas a lo largo de todo nuestro tema. Podemos crear plantillas de página para mostrar solo algunas páginas, o incluso usar el control de renderizado condicional cuando las usamos. Vamos a desplazarnos hacia abajo a la jerarquía de plantillas en la sección de detalles, y esta es la sección que acaba de llegar. Estamos a punto de enterarnos de que en su más básico, WordPress utiliza un sistema de jerarquía para decidir qué plantilla controla qué página. Pero en el momento en que esto es bastante fácil ya que solo tenemos realmente el punto índice PHP nos pone nuestro tema crece, que pronto lo harás. Tenemos que estar al tanto del orden de selección, que se utiliza ya que tenemos más plantillas de página disponibles. Vamos a estar usando el archivo PHP index dot para mostrar nuestras publicaciones de blog, lo cual es bastante común en WordPress, y luego crear un nuevo a partir de plantillas de página. Si vas a la pantalla de la página de inicio, que ves aquí, por defecto, WordPress establecerá la página de inicio de los lados para mostrar las últimas entradas del blog. Obviamente, todavía no tenemos ninguna entrada en el blog, y veremos cambiar el tema. Primero buscará un home dot plantillas PHP. Si esto no se encuentra, volverá por defecto al punto de índice PHP. El elemento clave a recordar aquí es que nuestras entradas de blog volverán por defecto página de índice si no se encuentra una página más adecuada. Es entonces cualquier nota justo debajo que dice el punto de primera página PHP anulará ambos, y este es un archivo que estará creando a continuación para nuestra Página Principal. Si nos desplazamos hacia abajo, ahora podemos ver el punto de primera página PHP. Este punto de primera página PHP se utiliza para renderizar los lados de la página, y esto es exactamente para lo que vamos a estar usándolo. Si el punto de primera página PHP no se puede encontrar, entonces buscaremos un punto inicial secundario PHP. Después de esto, si no se puede encontrar esta página, entonces buscaremos la página dot PHP, y luego finalmente el punto índice PHP. Si nos desplazamos hacia abajo aún más, las plantillas que podemos usar para el único post, una sola página, diferentes categorías, y mucho más. Haremos uso de muchas de estas a lo largo del curso, pero esta página siempre es una buena referencia si necesitas entender cómo funcionan las cosas. Ahora vamos a trabajar en la creación de las plantillas de primera página. Si pasamos al panel, haciendo clic en la esquina superior aquí, podemos crear una nueva página yendo al enlace de nuestras páginas y luego agregando nueva. Aquí es donde creamos cualquier página para nuestro tema, comenzaría por crear la página de inicio, luego dar click en publicar en la parte superior. Ahora podemos llegar a trabajar en mover el contenido de nuestro índice punto PHP al archivo de página desde. Vamos a duplicar o copiar y pegar el punto índice PHP, y luego podemos renombrar esto el punto de primera página PHP. Dado que nuestra página de índice ya no se va a utilizar para nuestra página de desde, podemos eliminar todo el contenido de entre el encabezado y el pie de página. Elimina todas las secciones, dejando sólo el encabezado y el pie de página. Podemos comprobar si esto está funcionando bien visitando los sitios, y aún vemos todas las secciones de nuestra página de inicio. ¿ Por qué aún vemos todos los contenidos de nuestra página de inicio? Bueno, esto es porque ahora tenemos unas plantillas o portada más específicas, y ahora tiene todos los contenidos que necesitamos. Volveremos a esta página de índice en la siguiente sección, donde usaremos esto para renderizar nuestras entradas de blog. Lo siguiente que hay que hacer es pasar al tablero, y aquí abajo en la configuración. Entonces en la lectura, podemos establecer qué página quieres mostrarla para la página principal y también para todas las entradas del blog. Nuestra página de inicio mostrará una página estática. Esta va a ser la página de inicio que creamos antes. Guarda los cambios, y ahora estamos listos para irnos. Podemos volver a comprobar si todo está limpio desde nuestras plantillas de portada simplemente agregando algo aquí. Cambié barra de estrángulos de bienvenida. Eso es suficiente para escuchar, también en primera plana, y ese es nuestro texto aquí que viene de primera plana. Bueno, así que esa es nuestra primera página ahora configuramos y nuestra primera veremos plantillas de página personalizadas. A continuación se desplazará de nuevo al punto índice PHP. Crearemos el bucle de WordPress, y mostraremos nuestras entradas de blog. 25. Reiniciar el bucle: Ahora vamos a pasar a echar un vistazo al famoso bucle de WordPress, y cómo podemos usarlo para recorrer todas nuestras publicaciones de blog y mostrarlas en la pantalla. Acabo de entregarlo a los sitios de desarrolladores de WordPress y luego en la sección de bucle, lo que nos puede dar un poco más de información sobre lo que es el bucle y lo que puede hacer. Pero he resaltado probablemente una de las secciones más importantes y simples aquí, que básicamente dice que el bucle recorrerá cada post recuperado para la página actual una a la vez, y luego podemos realizar una acción para cada post que recuperará. Entonces básicamente lo que vamos a hacer es recorrer cada post que se ha creado en WordPress, y luego podemos estructurar nuestra entrada de blog de cualquier manera que nos guste usar HTML y también algunas funciones de WordPress. Si nos desplazamos hacia abajo, podemos ver cómo se ve el bucle en PHP. Por lo que esto puede parecer un poco extraño si no has acostumbrado a PHP. En primer lugar, si sacas las etiquetas PHP, que son bastantes de ellas a medida que entramos y salimos al código para luego dar un paso atrás y vio a Redis como era inglés. Básicamente estamos diciendo que si se publica disponible por tener posts, entonces vamos a usar un bucle, que se llama un bucle while y luego vamos a recorrer todos estos posts y luego agarrar el contenido de cada post. Esto significa el lado interno de esta sección de bucle while. Después tenemos acceso a todo el contenido de post disponible, como el título, la sección de cuerpo, cualquier etiqueta o categoría o cualquier otra cosa que creemos. Entonces después de esto, todo lo que estamos haciendo es simplemente cerrar el bucle y luego cerrar la sección if desde arriba. Sigamos adelante y creemos esto ahora. Por el momento en nuestro blog a HTML. Todo esto es solo contenido estático y esto está bien para sitios web HTML normales. Si queremos que WordPress tenga control sobre cómo se mostrarán estas entradas de blog en la página. Entonces vamos a crear el bucle y luego crearemos la estructura para nuestro WordPress pasando cosas como el título, la fecha, y la descripción. Como mencioné antes, vamos a estar creando nuestras entradas de blog en el index.php. Podemos escribir el bucle entre el encabezado y el pie de página. Empecemos abriendo las etiquetas PHP. Entonces vamos a crear nuestra declaración if para comprobar si existe alguna publicación. Tener puestos de subrayado. Esta es una función de WordPress, luego un colon justo después. Este colon es una abreviatura o una sintaxis alternativa para PHP, lo que significa que podemos agregar nuestro contenido justo después si esta condición es verdadera. Entonces voy a cerrar esto con un endif y un punto y coma, cerrar el PHP al final. Entonces si sí tienes post disponible, ¿qué quieres hacer? Queremos crear nuestro while loop to loop a través de publicaciones mientras están disponibles. Por lo que podemos usar la misma función donde tenemos posts. Pero voy a recorrer cada uno. Otra vez usar un colon, y luego declaramos después de esto lo que queremos hacer mientras se publique disponible. Cuando se publique disponible, queremos usar la función WordPress, el post de subrayado, al que llamaremos los datos de la siguiente publicación en línea, que estamos buceando y un punto y coma al final, y luego podemos cerrar nuestro bucle while con fin. Esto saldrá del bucle una vez que terminemos de bucear sobre todos los postes, punto y coma al final. Por lo que ahora dentro de esta sección mientras, tenemos la información de post. Podemos seguir adelante y crear nuestro HTML para crear nuestras entradas de blog. Si seguimos adelante y agregamos un elemento HTML como un dif, así como este, podemos ver que el editor de texto ha resaltado este blanco ya que esta no es sintaxis válida. Esto se debe a que estamos creando una sección PHP con las etiquetas de apertura y cierre y por lo tanto el editor de texto espera que todo el contenido sea PHP. Pero como ahora lo transferimos a HTML, necesitamos cerrar ahora nuestro PHP. Para que esto sea más legible, podemos poner todo esto en su misma línea. Entonces después de este HTML, estamos saltando de nuevo a PHP. Por lo que necesitamos volver a abrir esto. También podemos poner esto en la misma línea para que sea más legible. Ahora el PHP todo tiene las etiquetas de apertura y cierre, estamos libres ahora para agregar el HTML donde necesitemos. Ahora tenemos nuestra sección donde podemos crear nuestra estructura de post blog. No voy a usar una función PHP llamada el contenido. Abre las etiquetas PHP, cierra esto y la función WordPress llama el contenido de subrayado. Esto se utiliza para filtrar el contenido de la publicación del blog de la base de datos y luego lo renderiza a la pantalla. Volveremos a esto muy pronto y agregaremos más contenido a nuestra publicación de blog. Pero por ahora voy a añadir otra sección. Estamos diciendo aquí, si tenemos posts y vamos a construir nuestra entrada de blog dentro. Si no, podemos agregar otra sección, el colon. Entonces si no hay publicado disponible, vamos a crear algún HTML, los elementos p, y luego un texto de lo siento, ninguna publicación coincide con nuestros criterios. Podemos ver de inmediato que esto está resaltado en blanco ya que necesitamos cerrar nuestro PHP justo arriba. Podemos entonces empezar una vez más después de esto. Entonces vamos a envolver nuestro texto en una función de eco. Por lo que PHP subrayan e para mostrar esto al navegador. Entonces como cadena, podemos pegar más en nuestro texto, agregar un punto y coma, cerrar el PHP, y ahora todo lo está, como debería ser. uso de esta función de subrayado e permite que nuestro texto se traduzca más adelante en un tema, que es una parte bastante esencial de cualquier tema, a menos que planees poseer usa tema para ti mismo en un idioma en particular. Por lo que esto puede parecer bastante confuso si eres nuevo en todo esto. Pero solo para recapitular, estamos comprobando si hay puesto disponible. Si lo son, estamos buceando con un bucle PHP while y cada póster define dentro de WordPress, vamos a mostrar el contenido de la publicación con encerrar fuera del bucle. Entonces no hay más código debajo para la corrida es esta publicación están disponibles. No obstante, si estas publicaciones no están disponibles, ejecutará la sección justo después de lo contrario y luego recibiremos un mensaje diciendo: “Lo sentimos, ninguna publicación coincide con tus criterios. Volveremos a esto más adelante donde construimos el resto de nuestra entrada de blog. Por lo que deberían quedar un poco más claros en un video futuro. Este índice es ahora nuestra página de blog predeterminada. Si no se puede encontrar plantilla más específica. También tenemos que hacer lo mismo ahora para la plantilla de página también, que va a ser una página predeterminada si no se puede encontrar otra página. Seleccionemos todos, copiemos esto, y podemos usar esto como nuestra base. Dentro de nuestra barra lateral, creamos la página dot plantillas PHP, pegamos esto en. Dado que se trata de las plantillas de página por defecto, no para las entradas de blog, podemos decir que no hay páginas que coincidan con tus criterios. Por último, la plantilla comenta en la parte superior. Esta va a ser la plantilla para mostrar todo solo post. Entonces esto es todo ahora para nuestros conceptos básicos de bucle, pero seguiremos con esto en los próximos videos para construir el resto de nuestras publicaciones de blog. 26. Publicaciones dinámicas de un blog: Con todo bucle básico ahora, toda la configuración. Ahora será un buen momento para agregar algunas entradas de blog para realmente dejar espacio. Podemos hacer esto si vamos a la página web y luego nos dirigimos al panel de control. Abajo en la sección de correos, podemos ir a Todos los mensajes o Agregar Nuevo. A partir de aquí voy a añadir el nuevo post, así que simplemente Blog post 1. Algún texto de muestra simple un párrafo está bien, péguelo en. Podemos agregar algunas etiquetas. Vamos por noticias, actualizaciones. Después publicamos. Añadamos dos más. Haga clic en “Añadir nuevo”, imaginativo con títulos si quieres, Publicación de blog 2. Agrega algunos contactos de muestra, luego algunas etiquetas van por tratamientos de maquillaje y belleza. Estos tipos también se mostrarán en la pantalla. Una vez que los agregues a un bucle, podemos agregar en algunas categorías. Cuando esto está bien, publicas. Después vamos a sumar una tercera y última. Va libre. Justo debajo, podemos elegir un nuevo bloque, pegar en el contenido. Puedes por supuesto, dar click en el icono más aquí y elegir diferentes estilos de bloques si lo prefieres. Subcategorías. Vamos por el pelo y luego pinchemos en publicar. A continuación necesitamos en algún lugar, en realidad es mostrar estas entradas de blog. Recuerda, hemos creado un enlace de blog en nuestro menú. Si bajamos a páginas y hacemos click en esto, tenemos todas las páginas aquí las cuales creamos a partir de nuestro menú antes. También si vamos a la página web haciendo clic en este enlace, luego haga clic en el enlace del blog en la parte superior. Siempre ver en la sección de bloque es este encabezado y el pie de página sin contenido en el medio. Bueno para mostrar nuestro post en el medio, necesitamos configurar esto en el tablero. Tenemos que ir al panel de control, hasta la configuración, y luego leer desde aquí, igual que configuramos nuestra página de inicio antes ser la página de inicio. También podemos mostrar los posts en la página del blog. Guarda estos cambios. Visita nuestro sitio y luego vuelve a nuestro link de blog. Ves estas entradas mostrando aquí, porque estamos usando la página de índice. Si recuerdas antes cuando miramos la jerarquía de plantillas, la página de índice siempre será la página predeterminada debajo de las entradas de blog. Si no se puede encontrar una página más específica. Volver a nuestro índice PHP. Ahora podemos empezar a construir esto para reflejar nuestras plantillas bootstrap. Si vamos a nuestra página de blog, que es el blog a HTML. Desea copiar todo el contenido de la sección principal. De esta sección de bloques aquí, probablemente ábrela en etiqueta principal. Después todo el camino hasta el contenedor principal de cierre. Copia esto, de vuelta a la página del índice. Vamos a pegar esto justo debajo del encabezado. Volver arriba a la parte superior donde tenemos nuestra entrada de blog. Voy a eliminar los primeros, dejando solo una entrada de blog en su lugar. Simplemente sopla este “coll-sm-8". Agarremos este primero y quitemos y hagamos lo mismo con el segundo, dejando solo una entrada de blog en su lugar. Esta sección va a ser bastante importante. Esta va a ser la que necesitamos para bucear dentro del bucle de WordPress. Entonces podemos usar esto como estructura para cada entrada de blog. En lugar de tener el texto codificado como la nueva característica, vamos a agregar una función php o función WordPress dentro de aquí, que agarrará cada título de la base de datos y luego lo colocará aquí. Con esto en mente, ahora necesitamos agregar esto como el contenido de nuestro bucle de WordPress. Hemos creado el bucle a continuación. Adelante y agarremos la sección de apertura, que es esta línea de arriba aquí. Podemos llamar a esto nuestro lugar. Copia de seguridad de desplazamiento. Por encima de todo post de blog. Vamos a pegar esto con una necesidad se cierra. Volver abajo a nuestro bucle. Podemos cortar el extremo mientras sección. Saca esto y luego pega es justo después del final de nuestra publicación de blog. El siguiente paso es pasar por cada pieza de contenido estático que tenemos en la entrada del blog. Después reemplácelos en con funciones de WordPress. Rápida escribir el título y las etiquetas h2. Esto puede ser reemplazado por una función llamada el título. Este es código PHP. Tenemos que abrir las etiquetas PHP, cerrarlas. A continuación, el nombre de la función del título, seguido de los paréntesis punto y coma. Esto como se esperaba, recuperará el título de la entrada del blog, para cada entrada. Si guardamos esto y luego pasamos al navegador, podemos ver qué efecto tiene esto, recargar. Tenemos el título dinámico de las entradas de blog 3, 2, 1. Todo el resto del contenido acaba de ser reemplazado por el HTML estático y esto es lo mismo para las tres publicaciones. Tenemos que seguir adelante y hacer esto más dinámico. Podemos hacer esto de nuevo con funciones de WordPress comenzando con la fecha, así eliminar la fecha codificada en el PHP. Dentro de aquí vamos a eco para mostrar esto, el navegador y una función llamada obtener la fecha. Obtener la fecha se va a tomar en argumentos libres dentro de las cotizaciones. Va a ser una F mayúscula, una j minúscula, luego una coma para separar esto de una Y. mayúscula Si eres nuevo en PHP, estas letras F, j, e Y pueden parecer extrañas. Todo lo que estamos haciendo aquí es establecer los formatos que queremos que se muestre el día, mes y año. Por ejemplo, ¿quieres que una entrada de blog creada en enero se muestre como la palabra enero o simplemente enero, o incluso un mes número uno. Si quieres saber más sobre esta función, puedes dirigirte a WordPress y buscar el formato de fechas y hora. Aquí adentro, si nos desplazamos hacia abajo, podemos ver lo que representa cada una de estas letras. Por ejemplo, hemos utilizado la Y mayúscula, que va a ser un año de cuatro dígitos, tal y como vemos aquí. Podemos hacer lo mismo para el mes y los días también, para obtener el formato exacto que queremos. Ahora si le damos a esto un guardado, podemos echar un vistazo a esto en el navegador, recargar nuestra página de blog y vemos esa fecha cada publicación ha sido creada. A continuación, queremos crear al autor justo después. En la misma línea, tenemos un enlace a la oferta de post blog. En lugar de la versión codificada. Vamos a reemplazar esto por una función de WordPress llamada el autor. Esto es bastante simple, no toma en ningún argumento, solo recortará al autor de los posts, podemos recargar. El autor en nuestro caso es el usuario conectado, que es administrador tranquilo. Yo sólo voy a añadir la palabra por justo antes. Simplemente sigue un enlace aquí puedes agregar por, di esto. De hecho necesita un espacio justo después. Recargar. Ahora a estos texto a continuación. También podemos hacer que estos sean más dinámicos, mediante el uso de una función de WordPress llamada las etiquetas. En lugar de esta versión codificada, vamos a eliminar esto. Agrega una función PHP, que son las etiquetas de subrayado. Esta función puede tomar hasta tres argumentos dentro de los corchetes. El primero es el texto que desea agregar antes de que se muestren las etiquetas. Voy a añadir en la palabra etiquetada, seguida de dos puntos, un espacio y una coma justo después. El siguiente va a ser el separador. Esto es lo que va a aparecer entre cada etiqueta. Por defecto, las etiquetas estarán separadas por una coma. En nuestro tema, utilizamos el icono tilda. Añadamos esto con el espacio a ambos lados. También podemos agregar un tercer argumento opcional, que es cualquier texto que desee mostrar después de la etiqueta. Pero sólo voy a dejar esto tal como está, pasando al navegador. Recargar. Nuestro feed de publicaciones de blog no tiene ninguna etiqueta. Para la segunda tiene el texto antes de etiquetas. Tenemos cada etiqueta individual con la tilda separando cada una, también conocida como dos. Si pasamos por encima de cada una de estas etiquetas. Estos también enlaces y si hacemos clic en estos también nos lleva a una página en la que se mostrarán todos los posts con esta etiqueta en particular. Teníamos múltiples posts con la misma etiqueta. Todo aparecería en una lista. Esto es como casi ahora terminó con la entrada del blog. El final de la parte inferior es el contenido. Ya sabemos agarrar esto. Ya tenemos la función abajo en la parte inferior, que es el contenido. Eso podría merecer un lugar. Entonces mueve esto de nuevo a nuestro blog. A esto en lugar de nuestro texto lorem ipsum a este fin y vamos a recargar. Ahora en un listado de publicaciones de blog. Al igual que esto, la cantidad de contenido que tenemos no se ve muy mal. Pero si esto fuera mucho más largo como cinco, seis, siete párrafos, cada página se pondría realmente mucho tiempo en lugar de este contenido. Lo que muchas veces queremos hacer en una página como esta, es acortar el texto que se muestra. Podemos hacer esto con una función de WordPress llamada Excerpt. En lugar del contenido, vamos a colocar esto al Excerpt. Esto ahora debería mostrar en el navegador una versión más corta. Esta página no se hace demasiado tiempo. Entonces si el usuario quiere leer la versión completa, puede entonces dar click en esta entrada de blog y serán llevados a una sola página completa.Esto es con lo que vamos a llegar a trabajar en el siguiente video. 27. El enlace permanente: Tendremos una versión acortada de la entrada del blog en el último video usando una función PHP o WordPress llamada los extractos. En un blog típico, también queremos que esta publicación se vincule a la versión completa en una nueva página al hacer clic en ella. Para ello, voy a hacer que se pueda hacer clic en este título de la entrada de blog, que todos enlazará a esta sola página que se muestra en el contenido completo y además crear un enlace de lectura más debajo de este extracto para enlazar a la versión completa. Para ello, queremos pasar a donde se producen todos los blogs, y esto está en el punto índice PHP. Dentro del bucle tenemos este título de entrada de blog. Quiero rodear esto en un HTML Una etiqueta que está antes del título y justo después podemos cerrar esto. Dentro de este enlace, necesitamos proporcionar los atributos HREF. Entonces esto va a enlazar con nuestro permalink. Abre el PHP. Cierra esto. Entonces dentro de aquí podemos enlazar al permalink agregar los corchetes justo después y el punto y coma. Permalink es lo que WordPress llama la URL actual. En nuestro caso, será la URL de cada entrada de blog. Si guardamos esto y luego pasamos al navegador, ahora podemos refrescar. Ahora ve cuando pasas el cursor sobre cada título de entrada de blog, esto ahora es un enlace. Después podemos hacer clic en y luego lo estamos llevando a una página con sólo esta entrada de blog. También podemos ver en el título, esta se tiene su propia URL única, que es la misma que el título. Esta es la entrada del blog 3. Haga clic en el número 1, y la URL es exactamente la misma. Volveremos a esta página más adelante en el curso para mostrar el contenido completo de la entrada del blog en lugar de solo el extracto que vemos aquí. Ahora pasemos al texto Read More justo debajo de este extracto. Vuelve atrás. Entonces en nuestro índice de PHP, podemos hacer algo de espacio debajo del extracto y luego crear un nuevo div, que va a ser el envoltorio de nuestro texto. Voy a agregar una clase Bootstrap, que va a ser algún margen inferior con MB y un valor de tres. El contenido también va a ser un enlace, por lo que podemos agregar esto en las etiquetas A. Cierra esto. Simplemente podemos enviar cualquier texto plano que quieras aquí. Pero en cambio voy a agregar algo de PHP, que va a ser la función de subrayado E, que hará eco o mostrará algún texto al navegador. Esto también significa que esto es traducible más adelante en el curso. Podemos agregar el texto de leer más. Entonces así como lo hicimos anteriormente con el título, también podemos agregar el permalink para enlazar a la URL de esta entrada de blog actual. El HREF va a ser igual al permalink. Guarda esto y podemos probarlo en el navegador. Vuelve a nuestro blog. Haga clic en cualquiera de estos. Consulta el texto Leer más. Esto ahora también enlazará a nuestra entrada de blog completa. De nuevo con la URL establecida como título. Todavía no tenemos un conjunto de plantillas para la única página de entrada de blog. Se va a volver por defecto a nuestro punto índice PHP. Es por ello que sólo vemos la versión acortada de nuestra entrada en el blog. Justo aquí. Bueno, esto es algo que arreglaremos en un rato. 28. Paginación: Nos vamos a concentrar en agregar una característica importante llamada paginación a nuestra página de blog. Por el momento, sólo tenemos tres entradas individuales de blog, que son cuatro con la muestra uno. Pero si tuviéramos cientos de entradas de blog, esta página se pondría realmente larga. La paginación nos permite dividir los posts en páginas separadas. Después podemos hacer clic en algunos botones anteriores y siguientes para recorrer en ciclo todas nuestras publicaciones sobre el index.php desde nuestras plantillas bootstrap, ya tenemos nuestros enlaces para la siguiente página y página anterior, por lo que vamos a hacer dos cosas en este video. Primero vamos a reemplazar nuestro texto de página anterior y siguiente algunas funciones de WordPress para proporcionar la funcionalidad para que esto funcione. También vamos a quitar esto fuera del bucle por lo que en la sección L, sólo tenemos el texto abajo en la parte inferior. Por lo tanto, comencemos recortando nuestra sección de navegación, con nuestra lista desordenada, y también el div de cierre en la parte inferior, así que ponga esto fuera de lugar. Entonces esto va a ir justo después de la sección endif, que es el final de nuestro bucle. Aquí abajo, podemos pegar esto y simplemente sangrar esto de nuevo. De acuerdo, empecemos con la siguiente página. Vamos a reemplazar este texto por una función PHP. Abre PHP y luego vamos a usar la función de WordPress llamada next_posts con un s y luego link, punto y coma al final. Entonces vamos a reemplazar la página anterior por una función de WordPress muy similar. Este será enlace de publicaciones anteriores, separado por los guiones bajos, coma al final, y coma al final,para luego cerrar el PHP. Guarda este archivo, y luego pasa al navegador. Vamos a recargar la página. Ahora si nos desplazamos hacia abajo hasta la parte inferior, seguimos viendo nuestras entradas de blog, pero no vemos nuestros botones para la página anterior y siguiente. Esto se debe a que no tenemos suficientes entradas de blog para realmente crear la paginación. Podemos ir al Dashboard, luego bajar a Ajustes. En la sección de lectura necesitamos mirar hacia fuera las páginas del blog, mostrar a lo sumo. Tenemos este set para ser 10 posts, por lo que no vamos a crear una nueva página hasta que tengamos 10 o más publicaciones. Para ver esto en acción, reducimos esto a cinco, guardemos los cambios. Ahora podemos seguir adelante y crear algunas nuevas entradas de blog. Tengo 1, 2, 3. Vamos a crear el número cuatro. Copia el texto de muestra, pega esto en. Podemos añadir algunas etiquetas aquí. Publicar este. Publicación en blog cinco, algunos textos de muestra. Vamos por uno más, haremos el número seis, blog 6 pega esto y publiquemos. Ahora podemos echar un vistazo a nuestros sitios visitando la página del blog. Tenemos el número 6, 5, 4, 3 y 2, así que ahí son cinco entradas de blog. Ahora tenemos el siguiente enlace de página. Si hacemos click en esto, tenemos la entrada de blog 1 y también nuestro ejemplo hola mundo. También podemos dar click en anterior para volver atrás. Esto evitará que nuestra página de blog se vuelva realmente larga cuando tengamos un montón de publicaciones individuales. Es así como podemos agregar una paginación a nuestro tema. A continuación echaremos un vistazo al uso de ganchos de filtro. 29. Ganchos de filtro: La siguiente tarea es quitar los corchetes, que se encuentra al final de nuestra entrada en el blog. Voy a quitar los corchetes y luego sólo dejar los tres puntos justo después. Esto es completamente opcional, pero prefiero la forma en que se ve esto. Estos se agregan automáticamente en su lugar cuando se utiliza la función de extracto para mostrar la versión acortada. También nos da la oportunidad de ver cómo podemos usar un gancho de filtro también. Si no sabes lo que es un gancho, gancho nos permite engancharnos al resto de WordPress, lo que nos permite proporcionar una acción o un filtro. En el caso de este video, estaré usando un gancho de filtro llamado 'excerpt_more'. Para saber más sobre estos ganchos y cualquier otra función de WordPress, podemos ir a developer.wordpress.org/reference. Esta página sí cambia con el tiempo. No se sorprenda demasiado si esto se ve un poco diferente. Ya ves, aquí, podemos navegar a través de las funciones disponibles, ganchos, clases y métodos que ofrece WordPress. Si hacemos click en el enlace de ganchos, nos llevan a todos los ganchos disponibles a los que tenemos acceso. Hay muchas de estas disponibles. Voy a dar click en esta lupa y hacer una búsqueda 'excerpt_more' y vemos esto apareciendo. Voy a buscar esto. Después tenemos la referencia de código para el gancho de filtro 'excerpt_more' y podemos ver este es un filtro el cual va a filtrar la cadena en el “más link” que se muestra después de un extracto recortado. Esto es perfecto para lo que necesitamos. Pasemos al 'functions.php' hasta la parte superior. En el interior de aquí ya hemos usado algunos ganchos de acción antes. Ya hemos utilizado el 'after_setup_theme', que es éste justo aquí. Corriremos nuestra configuración 'tranquilwp' justo después de este gancho, dura carrera. También hemos utilizado 'wp_enqueue_scripts, que correrán nuestros propios 'tranquiscripts' justo después. Voy a añadir nuestro propio filtro justo después de esta línea. Pero aún así necesitábamos el PHP. Voy a crear una función PHP. Voy a llamar a esto cualquier cosa de tu elección. Quiero llamar al mío 'new_excerpt_text' separado por los guiones bajos. Abre los tirantes rizados. Todas estas funciones que hay que hacer es devolver una cadena. Tenemos todo lo que queremos mostrar en lugar de los corchetes. Podemos usar la declaración return para devolver una cadena. En su lugar solo voy a agregar los tres puntos con un punto y coma al final y la cadena puede ser cualquier texto que prefieras. Se puede ver que tenemos un error justo aquí. Creo que necesitamos agregar un punto y coma al final y eso arreglará esto. Entonces después de nuestra función, podemos agregar en nuestro filtro con 'add_filter'. Esto toma dos argumentos. El primero es el nombre del filtro, que es 'excerpt_more', que acabamos de ver en la documentación, separado por una coma. El segundo documento es el nombre que le dimos a nuestra función justo arriba. Esto es nuevo y agrega esto como una cadena, nuevo extracto y luego texto, punto y coma al final y luego sobre nuestro tema en el navegador, se recarga. Ahora, son sólo tres puntos al final sin los corchetes. Creo que esto le da un aspecto mucho más limpio a nuestro blog. Para la clave para esto es recordar que cada vez que queremos hacer algo en WordPress, a menudo hay un gancho disponible para que esto use, y solo se necesita una búsqueda de la documentación para encontrarlos. Además, recuerda nunca sentirte tentado a cambiar los archivos core de WordPress directamente por usar estos ganchos en nuestros temas personalizados o nuestros plugins está perfectamente bien. 30. Reintroduciendo la barra lateral: En nuestra página de blog, puede que hayas notado que no tenemos la barra lateral del lado derecho, que teníamos en nuestras plantillas bootstrap. Esto se debe a que aún tenemos esto ubicado dentro de nuestro bucle Wordpress en la sección else. Esto no se renderizará en la pantalla mientras actualmente tenemos alguna entrada en el blog. Para solucionar esto, podemos ir a nuestro index.php y luego si vamos a nuestra sección de mas, justo después, tenemos esta sección aparte, que es el contenedor para nuestra barra lateral. Si seleccionamos toda la sección a un lado, entonces también cierran y rodan sobre contenedor. Ya que todo lo que necesita ser contenido dentro de eso. Eso es sólo plantear esto. Entonces voy a agregar esto justo después del siguiente y anterior postlink justo encima de la sección de pie de página, podemos pegar esto en. Dejando en su lugar la sección asignada, me voy a llevar todos los divs dentro de aquí. Por lo que codifica todos los bloques de nuestra barra lateral y ahora podemos usar este contenido para entrar dentro de nuestro sidebar.php. Simplemente ordenados pequeños pedacitos simples. Toma los contenidos y luego abre la barra lateral y ve a nuestro sidebar.php. Podemos pegar este contenido dentro de aquí. De manera similar a la que hicimos con el encabezado y el pie de página, dentro de nuestro index.php, podemos reintroducir el contenido de una barra lateral usando una función de WordPress. Aquí en la parte inferior, usamos get footer para la barra lateral como probablemente adivinaste, necesitamos usar get side debar. Abrir y cerrar el PHP. Entonces función Wordpress que obtiene barra lateral de subrayado, los corchetes y el punto y coma. Por defecto, obtén barra lateral, buscaremos un archivo llamado sidebar.php. Si alguna vez tienes la necesidad de introducir más de una barra lateral en tu tema, como un sidebar-dark.php. Si tuviéramos este archivo, lo haremos, entonces eliminaría la sección de barra lateral y luego solo agregaría el nombre de oscuro dentro aquí. Entonces esto buscaría el archivo dark.php de la barra lateral, y luego agregaría esto en lugar del valor predeterminado. No necesitamos esto, así que sólo voy a eliminar esto y hasta que esté vacío. Esto es ahora exactamente lo que teníamos antes en nuestras plantillas bootstrap. La única diferencia es el contenido de la barra lateral de ahora ser externalizado en un archivo separado, igual que con el encabezado y el pie de página. Ahora podemos probar esto en el navegador y ahora se vuelve a introducir la barra lateral en nuestra página. Volveremos a la barra lateral siguiente, donde reemplazaremos todo este HTML con contenido dinámico, diciéndole a WordPress. 31. Hacer una barra lateral dinámica: Mostrar esta barra lateral en la página ahora es un paso en la dirección correcta. Por el momento sólo tenemos los datos ficticios que se añadieron a nuestro tema. En esto nos vamos a centrar en este video. En primer lugar, el bloque anterior en la parte superior, es sólo un texto plano básico. Podemos dejar esto tal como está. Después de esto, tenemos nuestras secciones dinámicas de archivos y categorías, y podemos trabajar con éstas más en el sidebar.php. Este es el bloque superior con el texto. El segundo son los archivos. De lo que necesitamos hacer, necesitamos eliminar nuestros ítems de lista libre que tenemos dentro de las listas ordenadas, y luego en lugar de esto podemos agregar una función de WordPress llamada wp_get_archives. Corchetes, y luego punto y coma al final. Comprobemos este trabajo en el navegador. Recargar. Bien, solo he creado estas entradas de blog en un mes. Sólo vemos aparecer un mes en los archivos. Podemos hacer click en esto, vemos que la fecha se está poblando en la URL, y también las entradas de enchufe que creamos en este mes. Ahora pasemos a las categorías justo debajo. Podemos hacer algo muy similar quitando nuestros dos elementos de la lista y luego reemplazando esto por una función de WordPress. Esta función de WordPress esta vez se llama wp. Estas categorías, echa un vistazo a esto. Tienes múltiples categorías, así que Refresca. Tenemos las noticias, ofertas y también una sección para cualquier blog-posts sin categoría. Por defecto, también tenemos un título de categoría en la parte superior. No obstante, ya tenemos esto como rubro. Podemos eliminar esto, si volvemos a la función WordPress de categorías de lista. Dentro aquí como una cuerda, podemos establecer el título. Entonces title_li. Voy a podría simplemente establecer esto para que sea igual a nada. Guarda esto, Recargar y el título ha sido desconfigurado. Si también quieres echar un vistazo a la referencia de la función de WordPress, también encontrarás muchos otros argumentos si es necesario. Tal como la capacidad de ordenar categorías, agregar cualquier estilo adicional y también agregar un separador entre cada categoría. Simplemente voy a dejar esto por ahora ya que ya hemos agregado el estilo usando Bootstrap. Ya podemos dar click en “Categoría”, vamos por Noticias. Ya veremos cómo una publicación de blog gratis aquí, ofrece. Sólo tenemos dos que se etiquetan con ofertas, y luego cualquiera que no caiga en una categoría. El último que tenemos en nuestra barra lateral son nuestros iconos de redes sociales. De acuerdo con sus propias páginas de redes sociales aquí. Yo sólo voy a agregar uno como ejemplo, así que vamos por Twitter. Se puede agregar el enlace con elementos HTML. Podemos encontrar la ubicación del enlace con la href: https://twitter.com/chrisdixon161. Cierra esto. Entonces justo después de nuestros elementos i, podemos cerrar nuestro enlace, y luego sangrar esto. Ahora te voy a dejar el resto si quieres seguir adelante y añadir más enlaces de redes sociales. Una vez que hayas terminado con esto, entonces te veré en el siguiente video. 32. Etiquetas condicionales de WordPress: Si nos fijamos en nuestras plantillas originales de Bootstrap que he abierto aquí, tenemos el texto de tema de spa premium full responsive para WordPress en el encabezado. Entonces, si hacemos click en la Sección de Blog, el texto cambia a tranquil spa blog oficial. Vuelve a pasar el ratón en nuestra versión para WordPress, solo tenemos el mismo texto si hacemos click en ambas páginas. Ya que ambos archivos utilizan nuestro header.php, lo que significa que el texto va a ser el mismo. Para solucionar esto, vamos a ver cómo podemos agregar algún código PHP personalizado a nuestro tema. Este código detectará en qué página estamos actualmente, y luego podremos renderizar condicionalmente el texto en base a la página. Este texto se almacena en el header.php. Pongámonos a trabajar allá. Si localizamos el área de texto de la característica, voy a eliminar el texto de aquí, así que recorta esto, y luego en su lugar vamos a agregar algún PHP personalizado. Esta va a ser nuestra propia función PHP personalizada y nada que ver con WordPress. Llamemos a esto el texto de característica mayúscula T. Ahora podemos configurar esto de nuevo en nuestras funciones dot PHP, vamos a ir a aquí. Entonces justo después de nuestro filtro, aún dentro de las etiquetas PHP, podemos crear esta función, que se llama el texto de la característica. Dentro del cuerpo de esta función, el trabajo es comprobar si estamos en la primera página o en la página del blog y luego mostrar el texto correspondiente. Podemos hacer esto con una sentencia if para comprobar primero usando la función WordPress, si la página es la primera página. Si lo es, entonces agregamos algunos tirantes rizados después. Es portada, es una etiqueta condicional de WordPress, que nos permitirá establecer el texto que queremos para la primera página. Al igual que esto, podemos agregar un guión bajo, e, el eco nuestro texto. Esto va a ser una cadena, para agregar entre las cotizaciones. Cito los textos fuera del encabezado antes, por lo que ahora podemos pegar esto de nuevo en su lugar. Comprobemos esto todo funciona en el navegador. Asegúrate en la versión de WordPress, oops, y tenemos un error. Línea 43, punto y coma otra vez, guarde eso, recarga y hay texto en nuestra página de inicio. No obstante, si pasamos a nuestro blog, vemos que no se está generando ningún texto. Esto se debe a que sólo establecemos el texto si la página es la primera página. Si no es la portada, podemos agregar una etiqueta nunca condicional llamada es casa. El is home función se referirá a la página de entrada del blog. Mirando esto en una sección else-if, dentro de los corchetes, utilizamos nuestra etiqueta condicional de es casa. Abre los tirantes rizados y quiere hacer algo similar a antes. Vamos a hacer eco al navegador y son actos de spa tranquilo, blog oficial con punto y coma al final. Guardemos esto y recarguemos. Nuestro texto de tranquil spa blog oficial ahora se muestra en la página del blog. Si eres nuevo en, si las declaraciones else ejecutarán el código dentro de las llaves. Por ejemplo, si es de página devuelve true, entonces se ejecutará el texto dentro de estas llaves. Si no estamos en primera plana, entonces volverás a la siguiente sección, que es elseif. Check in si la página está en casa y luego ejecutará el código dentro del conjunto de llaves en su lugar. También podemos agregar múltiples secciones elseif y lo haremos más adelante en el curso. Al enterarse al final, si ninguna de estas condiciones se cumplió, podemos agregar una última sección L. Esto actuará como suplente si no se cumple ninguna de las dos condiciones anteriores. Si no, sólo vamos a hacer eco a la pantalla el texto estándar que tenemos en la página de inicio. Pegue esto en y esto funcionará para cosas como un seguimiento de cuatro páginas o cualquiera de las páginas que no establecemos el texto personalizado. Seguiremos agregando a esta función a medida que creamos más plantillas de página, tanto análisis, todo lo que necesitamos. A continuación pasaremos a nuestras plantillas de una sola página. 33. La plantilla Single.php: En la última sección cuando creamos esta página de blog, también agregamos una función permanente para permitir que esto se vincule a la página de entrada del blog completa. Al hacer clic en el Título, nos llevan a una sola vista de post, para ver más detalles sobre el post. Por el momento sin embargo, todavía vemos la versión acortada de la entrada del blog, todo el extracto como se le llama, y también podemos ver el texto leer más en la parte inferior, que también necesitamos quitar. Esto se debe a que el tema volverá por defecto al archivo index.php, si no se puede encontrar el archivo más específico. En este video, ahora quiero crear una nueva plantilla de página Tranquil llamada single.php, y este es un archivo que es reconocido por WordPress como la plantilla para mostrar una sola entrada de blog. Pasemos a nuestro editor de textos en la raíz del proyecto. Haga clic en “Nuevo archivo”. Este es el single.php. Podemos comenzar como siempre con nuestros comentarios en la parte superior. Abre o cierra las etiquetas php, y luego agregamos un comentario con la barras hacia adelante, y luego las estrellas se cierran. En realidad va a ser la plantilla para mostrar todas las entradas del blog. Dado que este archivo compartirá muchas similitudes con el index.php, voy a ir por allá y copiar el contenido para empezar. Abajo en la parte inferior desde el pie de página, copiamos todo hasta el encabezado. Toma esto, y agrega esto justo debajo de nuestros comandos en un single.php. Empecemos en la parte superior de este expediente. El título, sólo queremos mostrar el título en la parte superior de la entrada del blog. No necesitamos esto para enlazar al post completo ya que ya estamos ahí. Podemos quitar el enlace que rodea esto. Quita esto, deberíamos irnos ahora en nuestro single.php. Si recargamos, ahora deberíamos ver que no podemos hacer clic en el título de esta página, es decir, el único archivo que creamos ahora está entrando en vigor. Lo siguiente que hay que hacer es hacer estos textos aquí, el contenido completo más que el extracto. Si nos desplazamos hacia abajo al extracto, que es esta función justo aquí, todo lo que tenemos que hacer es simplemente cambiarlo de nuevo para que sea el contenido, y esta ahora es la versión completa de los contenidos de nuestra entrada de blog. Sólo tenemos un párrafo por el momento. Podemos ver este es el contenido completo que tenemos. El siguiente paso es eliminar este texto leer más. que ya tenemos la entrada de blog completa, pasando a single.php, si buscamos esto lee más texto aquí, voy a eliminar el enlace completo o el div completo que rodea esto. Ya no necesitamos nada de esto. Diga esto y el texto ya está desaparecido. Solo confirmemos que todo esto está funcionando bien, si volvemos a nuestro blog, aún vemos la versión acortada. Todavía vemos el enlace para el título y el texto leer más. Volver a nuestro single.php. Para envolver este video, si te das cuenta, arriba en la parte superior, tenemos el texto VG predeterminado. Esto se debe a que más en el functions.php, creamos la sección else como un fullback, si no se encuentra ninguna página más específica en los dos. Por lo que el valor predeterminado volver al texto que vemos aquí. No obstante, queremos el texto de Tranquil Spa Official Blog ya que seguimos dentro de la sección de blogs. Podemos agregar un operador dentro de esta otra sección if para comprobar si la página es home, o podemos usar las dos tuberías para comprobar si esto es si es casa o está en soltero, lo que apuntará a las plantillas single.php. Ahora, pasando al único archivo y nuestro texto se está mostrando ahora como el blog oficial. Volveremos a esta sola publicación en el siguiente video y te mostraremos cómo incluir la paginación. 34. Paginación: Bienvenido de nuevo. En este video vamos a introducir la paginación. Esto nos permitirá organizar nuestra publicación de blog de dos maneras. En primer lugar, podemos descomponer publicaciones realmente largas en páginas más pequeñas, más manejables, que luego tienen números de página en la parte inferior, que puedes hacer clic para saltar entre ellas. En segundo lugar, cuando estamos en la vista de un solo post, podemos entonces agregar un enlace en la parte inferior del post. Esto dan hacia adelante y hacia atrás al siguiente o anterior post. Empecemos con añadir un buscapersonas cuando tengamos una publicación de blog realmente larga. Esto es algo realmente sencillo de hacer. Tenemos que ir al post de edición. Entra a cualquier entrada de blog y luego haz clic en editar, luego tomaremos en la sección de edición del tablero y aquí vemos que tenemos un párrafo de texto. Si luego hacemos clic en el símbolo más arriba en la parte superior, podemos insertar un nuevo bloque para todo post. Voy a hacer una búsqueda de salto de página. A continuación, haga clic en el salto de página justo aquí. Entonces podemos continuar con nuestros contenidos los cuales solo voy a copiar este párrafo y luego añadir un nuevo bloque, que va a ser un párrafo de texto. Pega esto en. Hagamos una más. Justo debajo de esto, podemos agregar un nuevo bloque, agregar un nuevo salto de página, copiar texto pequeño. Haga clic en el símbolo más para obtener un nuevo párrafo. Pega esto en. Haga clic en Actualizar para guardar nuestros cambios y luego ver nuestra publicación. De inmediato vemos nuestro primer párrafo de texto y esto depende de nuestro primer salto de página. Pero no vemos ningún número de página en la parte inferior para saltar a la siguiente página del contenido. Pero esto necesitamos decirle a WordPress dónde quieren que aparezcan estos enlaces en nuestro tema. Queremos que esto aparezca en el archivo single.php y vamos a utilizar una función llamada páginas de enlace WP, que voy a agregar justo debajo del contenido. Para la función de contenido debajo de aquí, abre el PHP. Después dentro, use la función de páginas de enlace WP, corchetes justo después y un punto y coma. Si ahora decimos esto y refrescamos. Tan bueno, ahora vemos los números de página abajo en la parte inferior, que enlaza ambos desde una página actual este CSS está un poco mal. Antes de arreglar esto, solo comprobemos que el resto de la página está funcionando. Podemos hacer click en la página 2, que también muestra la página actual en la URL. Probemos con el número 3 y todo funciona también. Antes de avanzar más, cambiemos el CSS. Esto se está aplicando porque si entramos en las herramientas de desarrollador con el botón derecho e inspeccionamos, pasemos el cursor sobre esta página actual y esto se funda en un elemento span. El span elements ya cuenta con algún estilo personalizado de nuestra página de inicio, que es para la sección de precios para cada una de las oficinas. Vamos a editar esto. Si entramos en la barra lateral y luego bajamos de página dentro de aquí tenemos estos elementos span. Voy a añadir una clase personalizada. Vamos a nombrar a esto el precio. Ese es el primero. Podemos hacer esto para el segundo lapso y también el tercero abajo cerca de la parte inferior, dar ese ahorro y luego pasar a nuestro style.css. Nunca hay que buscar nuestro lapso, que está justo aquí. Procedencia, podemos llamar a esto el precio con un punto, ya que esta es una clase. Cierra estos archivos, vuelve a cargar. Estos siguen funcionando bien, echemos un vistazo a nuestro blog. Haga clic en cualquiera de estos blogs individuales, y vaya a nuestras páginas gratuitas y ahora abajo en la parte inferior. Siguiente pick en un link abajo en la parte inferior aquí, que va a ser un enlace a la anterior o a la siguiente entrada del blog. Volver al single.php. Tenemos algunos enlaces abajo en la parte inferior los cuales copiamos de nuestro index.php. Estos enlaces, si vamos a nuestro blog, estos enlaces recorrerán nuestra página anterior y nuestra siguiente o entradas de blog. Queremos hacer algo similar para todas las páginas. Todo lo que necesitamos hacer es cambiar el nombre de esta función para ser post en lugar de tener la S al final. Haz eso para el anterior o siguiente, es seguro. Entonces entra en cualquiera de nuestras publicaciones de blog y como nuestros dos enlaces. Estamos en las entradas del blog 1, por lo que la anterior será nuestro hola mundo. Entonces podemos saltar hacia adelante a la entrada del blog 1, número 2, número 3, y esto todo funciona bien. Es así como podemos usar la paginación en WordPress. A continuación continuaremos con la vista de publicación única mirando cómo podemos habilitar los comentarios. 35. El formulario de comentarios: Una característica común al trabajar con un blog es tener una sección de comentarios debajo de cada publicación. Esto permite a nuestros lectores comentar o hacer preguntas sobre el post y también otros pueden responder y comentar también. agregará la funcionalidad de comentarios a lo largo del próximo par de videos. Este video se concentrará en agregar la entrada real del formulario y luego el siguiente será el código para mostrar los comentarios bajo la entrada del blog. Para los comentarios, voy a agregar un nuevo archivo que se llama comments.php. Esto va a estar en las raíces del proyecto, al lado del resto de las plantillas de página. Crea el comments.php, agrega etiquetas PHP en la parte superior para nuestros comentarios, cierra esto con el texto de la plantilla para mostrar comentarios. WordPress tiene una función incorporada que mostrará un formulario de comentario estándar, esto se llama el comentario en la forma del cráneo. Dado que se trata de una función PHP, necesario abrir las etiquetas PHP. Entonces a esto se le llama el comentario sobre la forma del cráneo. Le daremos a este archivo un Guardar y luego abriremos nuestro archivo single.php, recargar cualquier entrada de blog. No vemos ningún contenido nuevo agregado a esta página. Bajo esta causa, necesitamos configurar donde queremos que aparezca el formulario en esta plantilla. Podemos sumar esto en nuestro single.php. Vamos a ir justo encima de la sección de navegación para todas las páginas, las etiquetas PHP. Dentro de aquí vamos a crear una declaración PHP if. Aquí adentro, esto va a revisar dos cosas: Primero, vamos a comprobar si los comentarios están realmente abiertos. Después utilizamos el operador, que son las dos tuberías. El segundo requisito es comprobar si tenemos al menos un comentario disponible para mostrar. Esto lo hacemos con la función WordPress llamada get_comments_number. Entonces necesitas dos puntos al final donde agregamos el contenido, que quieres mostrar es esta condición es verdadera, el contenido que queremos mostrar es la plantilla de comentarios. Esta plantilla de comentarios usará por defecto nuestro archivo comment.php, cual ya hemos creado. Vamos a echar un vistazo a esto en el navegador. Tiene error de sintaxis en la línea 52 del sencillo, solo necesitamos agregar si al final para cerrar nuestra declaración if. Se muestra la forma de comando estándar de WordPress. Dejamos esto en el estado por defecto o también podemos agregar argumentos a este comentario formar el customizar, incluyendo algunas clases de bootstrap para que encaje mejor con el resto de nuestro tema. En el archivo comments.php, podemos configurar una matriz de valores para personalizar cada campo en el formulario. Añadamos estos justo encima del formulario de comentarios. Podemos crear una variable con el símbolo $, que voy a llamar args. Set es a una matriz PHP. Entonces podemos pasar en nuestros argumentos a nuestra forma de mando. Esto surtirá efecto y agregará un punto y coma al final. Antes de añadir en nuestros argumentos, echemos un vistazo rápido a nuestra forma. Voy a empezar por personalizar este formulario en la parte superior, que es el texto de dejar una respuesta. Todas estas modificaciones se realizan realizando cambios a los parámetros por defecto en nuestra matriz. Si pasamos a la página web de WordPress y echamos un vistazo a la sección de formulario común. Esto nos mostrará todos los parámetros disponibles los cuales podemos cambiar. Si nos desplazamos hacia abajo hasta la sección de parámetros. Por el momento estamos trabajando con el título. Tenemos que apuntar a un campo llamado title underscore reply. Si buscamos esto, que es este campo justo aquí, este es un campo que necesitamos personalizar el título del formulario de comentarios. Haciendo de este el primer argumento que necesitamos agregar en título, subrayado, contestar. Después un operador de flecha, que es el símbolo igual, y luego la flecha derecha. Después podemos configurar el nuevo título para que sea respuesta o comentarios o puedes personalizar esto a cualquier texto que prefieras. Este operador de flecha cuando se utiliza en PHP con una matriz, se utiliza básicamente para establecer el valor en el lado derecho a la tecla de la izquierda. Después ve a nuestro proyecto y refresca. Ahora hemos cambiado el título del formulario. También podemos agregar algunas clases de Bootstrap para agregar algo de espacio en la parte superior e inferior de este título. Podemos hacer esto agregando un div dentro de nuestra cadena. Una clase Bootstrap o título responde un valor de tres, luego cierra nuestro div, justo después, se recarga y ahí está nuestro espacio en la parte superior e inferior. A continuación podemos pasar a nuestra sección común, que es esta área de texto. Para esto, utilizamos un campo si vamos a nuestra referencia llamada comentario en el campo del cráneo, que es éste justo aquí. Esto es para establecer el área de texto y la etiqueta del cuerpo de comentarios. En nuestros argumentos te hace añadir una coma justo después de nuestra respuesta de título. Entonces podemos apuntar a estos campos comunes, configurar nuestra flecha y luego nuestra cadena. Para que esto quede más claro, voy a agregar esto en múltiples líneas, comenzando con una sección div. Podemos agregar clases de Bootstrap al igual que hicimos anteriormente, esta va a ser la clase de grupo de formulario. Entonces podemos definir una etiqueta si cuatro atributos, esto va a ser para comentarios, el texto de comentarios, luego cerrar nuestra etiqueta. Después una etiqueta de ruptura para agregar esto a una nueva línea. A continuación, tenemos nuestro área de texto, las etiquetas de apertura y cierre. Dentro de la etiqueta de apertura, podemos agregar nuestros atributos. El ID va a ser igual a comentarios. Tomate puso la etiqueta, el nombre del comentario dos la clase Bootstrap se va a formar control. Entonces finalmente en la última línea, esto va a ser para cerrar nuestro div, por lo que el archivo estaba bien proyectar y recargar. Bien. Esta área de texto ahora encaja mejor con nuestro tema. A continuación, también tenemos este botón de enviar en la parte inferior. Muy pronto también voy a volver y crear un campo de nombre y correo electrónico. Quién hará esto más adelante ya que esto es un poco diferente. Este es objetivo, el botón de enviar. Justo después de nuestra cadena podemos añadir una coma. Esto es para el botón Enviar, por lo que Enviar en el botón cráneo. Configura nuestra flecha, luego como una cadena, podemos agregar nuestro botón Bootstrap con el tipo de envíos. El bootstrap clases de btn, btn-primary. El texto a mostrar en un botón de enviar y luego cerrar nuestro botón escribe al final. Todavía dentro de una cadena agrega una coma, pulsa “Guardar” luego recargar, ahora como nuestras clases de Bootstrap ahora surtieron efecto. Siguiente Voy a agregar un campo de nombre y correo electrónico. Si volvemos a la documentación para la forma común, entonces lo que queremos a continuación es este valor de campo. Esto va a ser para los campos de entrada de oferta, correo electrónico, URL y cookies. Para trabajar con esto, necesitamos configurar la matriz de campo anidada dentro de nuestros argumentos es matriz de campo también hace uso del formulario de comentarios. Los campos predeterminados se enganchan para aplicar el filtrado, por lo que vuelve a los comentarios de PHP ya podemos ver esta inacción. Tus cosas que nuestro botón, asegúrate de que haya una coma al final. Podemos preguntar a nuestros campos. Configura esto igual que antes, pero esta vez vamos a aplicar sobre los filtros de cráneo en los paréntesis. El primer parámetro dentro de nuestro filtro es el nombre del gancho de filtro, que hemos visto antes como campos predeterminados de forma común. Agregue esto como una cadena, formulario de comentarios, campos predeterminados. Entonces el segundo parámetro es nuestra matriz de campos que desea filtrar. Dentro de esta matriz, podemos agregar el correo electrónico de oferta, URI o cookies, que hemos visto antes. En nuestro caso así solo queremos apuntar la oferta y el correo electrónico. Empecemos con la oferta como una cuerda. Esta es una configuración tal como hicimos con cualquier otro campo justo arriba. Añadamos esto como una cuerda y hagamos algo de espacio. Necesita un div circundante con las clases de Bootstrap o formar grupo. Siguiente etiqueto, cierre etiqueta de dos. Podemos sumar nuestros atributos en el interior. El primero va a ser cuatro, esto es por la oferta con el texto de tu nombre. Entonces formaré entradas, esto tendrá el ID, que va a ser autor, después del enlace tenemos etiqueta, el nombre de la oferta, este es un tipo de texto. Entonces finalmente se cierra la clase Bootstrap de control de forma. Entonces también necesitamos cerrar nuestro div circundante. Siguiente parada es el correo electrónico, que va a ser otro elemento en nuestra matriz. Entonces voy a copiar la sección off, agregar una coma, y luego pegar esto en justo debajo, esta va a ser para el correo electrónico, vamos a copiar esta sección de correo electrónico. Tenemos estos redondo y div va a ser la etiqueta para email, texto de tu email, input Id, cambios, el nombre y también el tipo. Guarda este archivo y luego pasa al navegador en nuestros proyectos. Vemos justo debajo de nuestros comentarios y enviamos que no tenemos esta sección de nombre y correo electrónico mostrando. Esto se debe a que estos campos no necesitan mostrarse cuando actualmente logramos iniciar sesión. Actualmente iniciamos sesión como administrador tranquilo, por lo que haremos clic en cerrar sesión. Es así como busca el formulario para los usuarios que no han iniciado sesión. Entonces vamos a agregar en el nombre y correo electrónico también. La siguiente etapa es agregar el inicio a los campos requeridos. Voy a agregar esto a los comentarios, oferta y correo electrónico. En primer lugar, hasta nuestro área de texto para los comentarios en la etiqueta, lo que significa añadir una estrella, después la oferta, así que justo después de tu nombre. Entonces el correo electrónico en la parte inferior, esa es tu lista de comprobación está trabajando con una recarga, esto ahora es para la parte uno de los comentarios. En el siguiente video, veremos cómo podemos realmente mostrar los comentarios en la pantalla. 36. Mostrar comentarios: La parte 2 de esta sección de comentarios será para mostrar realmente cualquier comentario que se hubiera dejado debajo de la entrada del blog. Esto nuevamente estará en el archivo Comentarios/PHP. Empecemos dentro de ahí. Empezamos por arriba comprobando primero si no pudieron publicar ¿está protegido por contraseña? En caso de no haber ingresado contraseña por el visitante actual, podemos salir regresando antes de cargar alguno de los comentarios. Hagamos esto arriba en la parte superior, justo por encima de nuestra matriz. Añadamos un PHP if sentencias. Vamos a comprobar si la publicación está protegida por contraseña con una función de WordPress llamada post_password _ requerida. Si la publicación está protegida por contraseña, simplemente vamos a regresar sin cargar ninguno de los comentarios. Con este check in place, podemos ir abajo. Justo después de esto, vamos a crear una sección para nuestros comentarios, que es sólo HTML regular. Por lo tanto, necesitamos cerrar el PHP justo arriba, y luego reiniciarlo justo después. Dentro de aquí vamos a comprobar si existen algún comentario, por lo que PHP hará esto en una declaración if. Podemos comprobar si existe algún comentario primero con una función de WordPress llamada have _comments, un colon al final luego se cierra. También necesitamos hacer algo de espacio, y después añadir una sección endif al final. Si los comentarios sí existen, se ejecutará el código dentro del aquí. Voy a añadir un encabezado nivel dos con algo de relleno, así que h2, una clase bootstrap, que va a ser igual a py-3, cierra nuestro rumbo. lugar de agregar codificación en un título estático como encabezado, vamos a hacer esto dinámico usando PHP, así que vamos a abrir y cerrar el PHP en su interior. Este rubro va a ser dinámico y cambiar para el número de entradas del Blog. Por ejemplo, puede decir algo como comentarios gratis en una entrada de Blog 1, y luego el número aumentará por cada comentario. Si sí tenemos comentarios queremos saber cuántos, podemos acceder a esta información utilizando la función de WordPress llamada get_comments_number. Entonces vamos a almacenar esto dentro de una variable, que hacemos con un prefijo de símbolo de dólar, y luego voy a llamar a esta variable el número_of_comments, separado por guiones bajos, y establecer esto igual a get_comments_number. Ahora podemos usar esta variable para alterar el texto que mostrará este encabezado. Si sólo tenemos un comentario, queremos que el texto se muestre como un solo comentario como singular. Si hay múltiples comentarios, sin embargo, necesitamos mostrar la versión plural, como seis comentarios con el s al final, esto se puede lograr usando un condicional if else enunciados. Justo debajo de nuestra variable, agreguemos if section, y diremos number_of_comments, que es la variable que creamos arriba, va a ser igual al valor de uno. Ejecutaremos este código dentro, lo contrario ejecutaremos el código dentro de esta siguiente sección. Este si y el resto del bloque se usarán ambos para agregar un título pero usando la versión singular o plural, que mencionaste antes. Estos textos se pueden mostrar usando printf, que generará una cadena formateada y quiero agregar esto a ambos bloques. Usaremos printf porque nos permite insertar variables en nuestra cadena de texto, que veremos en tan solo un momento. Dentro de estos corchetes printf, voy a añadir una función de WordPress como primer parámetro, que es para el formato, o en otras palabras, el texto que se desea utilizar. Posteriormente en este curso, veremos cómo podemos agregar la capacidad de traducir el texto en nuestro campo, por lo que algunos de estos pueden tener un poco más de sentido más adelante, pero por ahora voy a rodear la sección if statement con el _x y esto tomará tres parámetros. Empecemos sumando en los dos primeros parámetros requeridos, después explicaré qué significan estos. El primero como cadena es el texto de un comentario y luego en adelante. Después de esto vamos a añadir algunas entidades HTML así “ y luego el”, separados por una coma. El segundo va a ser el texto de los comentarios título, así que empecemos con el primer parámetro, que es esta línea justo aquí. Esta es la cadena de textos que se mostrarán en nuestro tema. También será una cadena que podremos traducir más adelante en el curso. Terminamos esta cadena con la comilla doble izquierda y también la comilla doble derecha aquí. Estas entidades HTML que son la forma más segura de agregar símbolos en nuestros sitios web. De hecho, así es como se mostrará en los sitios web, como un comentario sobre entonces las cotizaciones, línea dos, que es éste justo aquí. Esta es la información de contexto para los traductores. Después más adelante en el curso, añadiremos un tercer parámetro opcional a la hora de traducir nuestro tema. Entre estas citas dobles, también queremos mostrar el título de la entrada, por lo que esto diría algo así como un comentario en una entrada de blog 4. Recuerda antes lo dijimos mediante el uso de printf, nos permite dar salida a una cadena formateada. Bueno, esto nos permite agregar variables a nuestro texto. Podemos agregar una variable agregando un símbolo de porcentaje seguido de un valor, así que solo la letra s, lo que significa que estamos esperando un valor de cadena. Entre las cotizaciones, agregue un símbolo de porcentaje, y luego un s, y esto va a ser donde todos ponemos nuestra variable. Pero ¿de dónde sacamos el valor de para insertar? Esto lo obtenemos agregando un segundo parámetro a nuestra función printf, así que justo después de estos x agregamos una coma, y luego podemos agregar una función de WordPress llamada get_the_title. Esta función agarrará el título de la publicación y lo agregará la cadena en el lugar de nuestro símbolo de porcentaje y luego s. si pudiera simplemente agregar un punto y coma justo después del printf abajo a la sección else, esta sección también mostrará similares texto o ambos, pero esto también puede soportar texto que es una forma singular o plural. Para apoyar esto, en lugar de usar la función _x, usamos la función llamada _nx como primer parámetro. Nuevamente, primero escribamos todo esto y luego te explicaré justo después. El primero va a ser una cadena, por lo que el%1$s comentan, y luego podemos agregar justo después nuestras citas izquierda y derecha, por lo que estos son los códigos de entidad HTML de &ldquo con un punto y coma al final, y entonces la cita correcta, que es el &rdquo y un punto y coma. Entre estos dos, también necesitamos sumar nuestras variables, as%2$s. sé que esto se ve un poco extraño, pero solo aguanta conmigo por ahora. Voy a agregar una coma luego copiar y pegar esta línea, y luego todo lo que tenemos que hacer es agregar un s al final de los comentarios. A partir de la primera línea, vamos a explicar qué está pasando aquí. Esta primera línea o este primer parámetro de nuestra función nx es la cadena singular de texto. El segundo renglón es la versión plural del mismo texto, es decir, con la S al final de los comentarios. Estas cuerdas también tienen las comillas dobles izquierda y derecha en el exterior de aquí con nuestras variables colocadas dentro. Después de esto podemos agregar un tercer parámetro, y este será el número a comparar para decidir si estamos usando la versión singular o plural de nuestro texto. Ya tenemos una variable de número de comentarios, por lo que podemos sumar esto con símbolo de dólar, número de comentarios. Si esta variable es igual a uno, por lo que sólo tenemos un comentario, se ejecutará la versión singular con la palabra de comentarios. Si es más de uno, no será la segunda línea que dirá la palabra de comentarios en su lugar. Si ambos parámetros, que también podemos agregar a esta función nx, es la información de contexto para los traductores a menos que vaya a ser una cadena de título de comentarios, y esto aparecerá en el software de traducción que usaremos más adelante. Habrás notado que tenemos que marcador de posición esta vez en nuestras cadenas. Como todos sabemos de antes, esto comienza con el símbolo de porcentaje, y luego tenemos un valor de uno y también de dos. Estos valores se insertan agregando un segundo y tercer parámetro o printf, por lo que justo después de la función nx, podemos agregar una coma. Estas variables se insertan en orden por lo que la primera que vamos a sumar aquí irá al lugar titular número 1, que es el número_of_comments. Nuevamente, ya tenemos esto almacenado en la variable de number_of_comments para permitir que este número se localice o traduzca posteriormente. Lo envolveremos en una función llamada número_formato _i18n. Escribamos esto, number_format_ i18n, abrimos los corchetes, y luego al final podemos cerrar el corchete para rodear nuestra variable. Si no has visto i18n antes, esta es una versión abreviada para la internacionalización, así que en lugar de atar la palabra completa de 20 caracteres, a veces usas el prefijo abreviado, así que es i, 18 caracteres, y luego n separados por una coma. Podemos agregar en el segundo valor para la segunda variable, este va a ser el título de la página. Podemos hacer esto a través de la función WordPress llamada get_the _title, cerrar esto. Ahora, si le damos a esto un guardado, y luego recargar el navegador, así que tenemos una inesperada brace rizado de cierre en la línea 38, así que solo necesitamos agregar un punto y coma al final de printf. Recarga y ahora esto elimina cualquier error de nuestro formulario de comentarios. La siguiente etapa es agregar una función de WordPress para mostrar nuestros comentarios. Voy a hacer esto en el formulario de comentarios justo debajo del rubro nivel dos. Vamos a crear una lista ordenada para mostrarlos, luego cerrar lista ordenada a continuación. Esto lo generará WordPress, por lo que tenemos que añadir esto como una etiqueta PHP. A la función WordPress que vamos a añadir se le llama wp_list_comments. Lista de comentarios toma en una matriz donde podemos pasar en algunos ajustes que queremos agregar. El estilo por defecto que podemos agregar aquí es la lista desordenada, pero quiero cambiar el suyo para ser ol, separado por una coma. También podemos establecer el tamaño del avatar, que desea mostrar, con avatar_size. Esto es entonces igual a un valor de píxel, que voy a establecer para ser 70. WordPress junto con muchos otros sitios web, agarrará tu imagen de avatar de un sitio llamado gravatar.com. Entonces si has subido una imagen a este sitio web en el pasado, esto se mostrará entonces en WordPress. Ahora, si guardamos esto y luego pasamos al sitio, voy a ir a la sección de administración, el primer inicio de sesión, agregar el nombre de usuario y contraseña, y vamos a marcar esta casilla para iniciar sesión. Acude a los sitios, a la sección de blog, y elige cualquier entrada de blog, que sea una cadena aleatoria de texto como comentario y pulsa “Enviar”. Bien, probemos uno más. Entonces comentario 2, hit “Submit”. Genial. Por lo que ahora todos nuestros comentarios están funcionando. En el próximo par de videos, haremos algunas mejoras más a nuestro sistema de comentarios. Entonces te veré ahí. 37. Javascript para responder a un comentario: Por el momento, hay un pequeño tema que puede no parecer un problema por el momento pero este tema va a crecer a medida que obtenemos muchos más comentarios. Por el momento, si le echas un vistazo a una entrada de blog, y he añadido tres comentarios diferentes aquí abajo, seguirá adelante y dará clic en “Responder” a este primer comando. El recuadro de respuesta está justo en la parte inferior de todos los comentarios. Esto está bien con el número de comentarios que tenemos, pero imagínate si hicimos clic en el primer comentario cuando eran 50 comentarios, entonces lo estaremos llevando hasta el fondo, resultando en una mala experiencia de usuario. Esto es algo por lo que WordPress ha descubierto al permitirnos cargar algo de JavaScript, colocar el cuadro de comentarios justo debajo de los comentarios en los que estamos aplicando. Esto es tan sencillo como poner en cola un nuevo script, igual que lo hicimos antes con nuestro bootstrap. La única diferencia esta vez es que vamos a cargar esto dentro de una declaración if. No queremos que este script de WordPress llamado respuesta de comentario se cargue siempre. Sólo queremos que se cargue en la página de una sola publicación si los comentarios están abiertos, y también si los comentarios anidados también están habilitados. Pasemos a nuestro functions.php. Esto se sumará justo después de nuestro JavaScript Bootstrap por lo que sí conocemos la función de scripts [inaudible]. Hagamos algo de espacio, y luego dentro aquí voy a empezar con una declaración php if. Escribamos esto para empezar, y luego hablaremos de lo que hace cada función. En primer lugar, queremos comprobar si is_singular, y voy a añadir esto en una nueva línea para que quede más claro. Entonces una vez que tuve el doble ampersands, también comprobaré si los comentarios están abiertos. Siguiente línea, también comprueba si la opción get de los comentarios de hilo está habilitada. Si todas estas condiciones son verdaderas, entonces queremos cargar nuestro script con script WP enqueue. El script que queremos cargar es el JavaScript llamado respuesta de comentario. La respuesta del comentario está agrupada con WordPress, por lo que no necesitamos agregar esto a nuestro tema, por lo que lo primero que estamos haciendo es comprobar si is_singular. IS_Singular es una etiqueta condicional de WordPress, comprueba si esta es la página de publicación única. Después queremos comprobar si los comentarios están abiertos, que es otra etiqueta condicional. Compruebe si los comentarios están habilitados para esta publicación. Esto se hace dentro del tablero. Get option, recuperaremos una opción de la base de datos de WordPress. Las opciones son básicamente piezas de datos que utiliza para almacenar los ajustes de configuración. Aquí incluimos en los comentarios del hilo, y este es un valor de opción para comprobar si los comentarios anidados están habilitados. Esto es importante ya que este JavaScript que estamos cargando se utiliza para traer el cuadro de comentarios debajo de las respuestas anidadas. La opción de habilitar y deshabilitar comentarios se puede encontrar en el panel de control. Vamos a ir por ahí ahora, bajar a la configuración, y luego en discusión encontrarás todas las opciones que tenemos relacionadas con nuestros comentarios, como habilitar nuestros comentarios anidados, que ves aquí, o asegurarnos de que los usuarios deben estar registrado e ingresado para comentar. Todo lo que tenemos que hacer ahora es asegurarnos de que este archivo se guarde, pasar a nuestra sección de blog a unos comentarios. Elige cualquier entrada de blog con algunos comentarios, vamos por la primera, haz clic en “Responder”, y ahora esta casilla para responder está directamente debajo del comentario en el que hicimos clic, y esto ahora deja nuestra casilla de respuesta directamente debajo del comentario al que estamos respondiendo, resultando en una experiencia de usuario mucho mejor. 38. Cierre de comentarios: Como autor de un tema, también necesitamos manejar qué hacer cuando no se permiten comentarios en una publicación. Si pasamos al tablero y luego bajamos a un post, pinchamos en “Todos”, podemos seleccionar cualquier post que tenga comentarios, podemos ver el número de comentarios dentro de la burbuja del habla justo aquí, así que vamos a dar click en “Blog post seis” y luego en “Editar”. En el menú de la barra lateral aquí abajo vemos una sección de discusión, si hacemos clic en esto, esto tiene la opción de permitir o desactivar comentarios. Si desmarcamos “Permitir comentarios”, haga clic en “Actualizar”, y luego vaya a “Ver publicación”, vemos que los comentarios existentes siguen mostrándose. Te mostraré cómo eliminarlos en el siguiente video pero por ahora, un usuario puede estar confundido ya que no hay nada que les diga que los comentarios están cerrados. Ahora podemos poner algo de texto en este caso en el archivo comments.php, así que vamos a ir por ahí ahora en nuestro editor de texto. Entonces si localizamos esta etiqueta de sección de cierre, que es para los comentarios, queremos agregar un php if-sentencias, así que abre las etiquetas php. Se puede agregar un if-sentencias y luego cerrar esto justo después. Queremos comprobar si los comentarios no están abiertos. Podemos hacer esto haciendo el reverso con un signo de exclamación, esto hará lo contrario a los comentarios abiertos, por lo que esto sólo será cierto si los comentarios están cerrados, agrega coma justo después, que ejecutará el código en el siguiente línea. Si la condición es verdadera, el código saldrá es un simple párrafo o texto, podemos agregar un p-elements dentro de aquí, que es solo HTML estándar, anidado por dentro, podemos abrir el php, cerrar esto y luego queremos ejecutar una función llamada escape html_e Esta es una función que mostrará el texto traducido que se está escapando para un uso seguro en salida HTML, y el texto que queremos agregar es simplemente “Los comentarios están cerrados para esto post”, agrega un punto y coma justo después. Ahora, vamos al navegador y luego recarguemos, hemos cerrado un error de sintaxis y solo queremos cerrar nuestra sección if-. Entonces php y nuestra sección if-, luego cierra esto, pulsa “Guardar” y luego refresca, y ahí vamos. Dice texto [inaudible] en la parte inferior de “Los comentarios están cerrados para esta publicación”, y podemos confirmar que no vemos este texto si vas a una entrada de blog diferente. Volvamos a cinco, no vemos el texto, cuatro, número tres, y tenemos todos los comentarios abiertos, así que no vemos el texto en la parte inferior. Entonces esto es sólo un pequeño cambio, pero este es un bonito toque que puede ayudar al usuario a experimentar y evitar se confundan por qué no ven un formulario de comentarios que se muestra en la publicación. 39. Paginación de comentarios: Al igual que miramos antes al agregar paginación para nuestra lista de entradas de blog, también podemos agregar esta función para comentarios también. A esto, voy a añadir cinco comentarios en cualquier entrada de blog. Vayamos por las pruebas. Prueba uno, “Enviar”, Prueba dos, “Enviar”. Prueba tres. Dejando estos cinco comentarios en este post en particular. Ahora si pasamos al “Panel” luego a “Configuración” y luego a “Discusión”, sólo con fines de demostración, voy a reducir el número de comentarios por página para ser dos. Si buscas la opción de romper los comentarios en páginas, podemos cambiar es