Transcripciones
1. Introducción: Bienvenido a este curso sobre la construcción un tema personalizado de WordPress responsive usando el marco libre Bootstrap. Mi nombre es Chris, y te estaré guiando paso a paso por el proceso. Empezaremos construyendo una gran plantilla de look y tema usando Bootstrap, uno de los frameworks front-end más populares del mundo. Una vez que esto esté construido, te guiaré a través del proceso de convertir esto a un tema de WordPress totalmente funcional, de
gran aspecto personalizado. En este curso, aprenderás cosas como cómo crear sitios web usando Bootstrap,
agregar menús de navegación personalizados, agregar menús de navegación personalizados el bucle de WordPress, cómo funcionan las plantillas de WordPress. Aprenderás sobre widgets, campos personalizados, imágenes de
encabezado, cómo agregar spots de traducción de idiomas a tu tema, y mucho más. Por lo que este sería el sitio web de gran aspecto que vamos a estar construyendo a lo largo de este curso. Esta es la página de inicio. Se trata de un tema de WordPress basado en Spa. Te voy a guiar a través de cada paso del proceso. Por lo que no sólo vamos a estar construyendo la página principal. En realidad vamos a estar construyendo el sitio completo, incluyendo varias páginas de blog, Contact, y About Us. Conforme lleguemos a la sección de WordPress, más adelante en el curso, áreas como la sección Últimas Ofertas, estaremos agregando campos personalizados
a, para asegurarnos de que el sitio web sea totalmente personalizable. Desplazándose más abajo, tenemos una sección Tienda Online. Después la sección Foto en la parte inferior con varios enlaces, la página Acerca de Nosotros, la página Contáctenos. Si te desplazas de nuevo a la parte superior de la página, también
tendremos un bloque totalmente funcional. Tenemos una barra lateral de trabajo, que incluye un cuadro de búsqueda, y también formas de filtrar los posts por las etiquetas, las categorías, o los meses del año, y por supuesto esto será totalmente personalizable por el sitio administrador. También nos aseguraremos de que los usuarios de tu sitio web puedan dejar comentarios en las publicaciones. Por lo que si vas a las publicaciones individuales, ahora obtendrás la versión completa. Enlaces a publicaciones anexas anteriores y a la sección Comentarios a continuación. También tendremos una sección Últimas Noticias, que se basa más o menos en la sección de blog. Pero aplicamos filtros de WordPress para filtrar las entradas de blog por publicaciones comienzan con la categoría de noticias, y te mostraremos cómo hacerlo. No habrá contenido innecesario solo para llenar el curso, solo directo al punto videos. Cada uno te enseña una nueva habilidad para usar para tus propios proyectos o para pagar a clientes, y también recogerás algo de PHP en el camino. ¿ A qué esperas? Acompáñame ahora en este curso y espero tenerte a bordo.
2. Configuración de Bootstrap: Bienvenido a la sección Bootstrap a este curso. En esta sección, estaremos construyendo nuestro sitio web usando el framework Bootstrap que más adelante en el curso, usaremos para convertir a un tema personalizado de WordPress totalmente responsive. Para empezar, dirígete a getbootstrap.com y pulsa el botón Descargar Bootstrap. Después te llevan a la sección de descargas. Hay tres versiones diferentes de Bootstrap que puedes descargar. Yo sólo voy a ir por la versión estándar de la izquierda. Pulse el botón Descargar. Una vez que eso se haya descargado, si vamos a las descargas y luego descomprimirlo. Porque nuestro tema se llama spa tranquilo. Esta es la plantilla Bootstrap. Voy a llamar a esto tranquil-wp. Entonces quiero guardar esto en el escritorio. Ahí vamos. Ya debiste haber descargado la carpeta de imágenes, cual está incluida en este video. Si no lo has hecho, sigue adelante y haz eso ahora, y luego deja eso en la carpeta Bootstrap. Si abrimos la carpeta Bootstrap y echamos un vistazo a lo que está incluido. En primer lugar, tenemos una carpeta CSS que incluye todo el CSS Bootstrap, tanto la versión estándar como los archivos minificados. También está la carpeta de fuentes, que incluye todos los iconos de glifo. Al ser nuestra propia carpeta de imágenes, que acabamos de poner, también
hay una carpeta JavaScript que incluye los archivos JavaScript de Bootstrap. Para empezar, si abrimos el editor de texto y luego voy a arrastrar en nuestra carpeta de proyectos. Ahí vamos. Por lo que la carpeta Bootstrap que acabamos descargar incluye prácticamente todo lo que necesitamos para empezar. El único que necesito agregar por ahora es una página de índice, así que voy a presionar Command y N, o Control+N, para crear una nueva página. Voy a guardar esto como index.html, y colocarlo dentro de la carpeta tranquil-wp. Una vez que tengamos nuestra página de índice, necesitamos ahora volver a getbootstrap.com. Todavía dentro de la sección Introducción, si solo nos desplazamos un poco más hacia abajo, hasta encontrar la plantilla básica. Vamos a usar esto como plantilla de inicio. Incluye toda la estructura HTML básica y también los enlaces al Bootstrap, CSS, y JavaScript. Basta con pulsar el botón de copiar, luego de nuevo en la página de índice, podemos pegar eso en. Por ahora, solo voy a cambiar el título de la página web solo a tranquil spa. Entonces vamos a presionar el botón de vista previa en vivo y luego ver cómo se ve en el navegador. Ahí vamos. Es una plantilla bastante básica. Acabamos de tener el Hola, mundo! rubro. Pero sí dice que fue mucho tiempo que creáramos una página de índice. Hemos mencionado que Bootstrap viene con sus propios archivos CSS, lo cual es genial para un punto de partida. Pero también queremos hacer nuestra plantilla personalizada, por lo que también vamos a añadir un nuevo archivo CSS. Voy a crear una nueva página y guardarla como custom.css y colocaré esto en la carpeta CSS. Ahora vamos a vincular esto en la página de índice. Como puedes ver ya hay, el enlace a la versión minificada de Bootstrap, así que si solo copiamos esto y el comentario, podemos pegar esto justo debajo y lo llamaremos el CSS personalizado, y también cambiaremos el nombre del archivo a CSS personalizado. Solo hay una o dos cosas más que necesitamos enlazar a nuestra página web para empezar. El siguiente son las fuentes personalizadas. Si nos dirigimos a Google, y buscamos fuentes. Eso nos llevará a google.com/fonts. Una vez que estemos ahí, podemos buscar en la parte superior izquierda. El tipo de letra que voy a utilizar para esta página web se llama Merriweather. Puedes elegir una fuente diferente si tienes alguna preferencias, pero me voy a quedar con esto por ahora y voy a seleccionar el Merriweather estándar. Entonces lo que tenemos que hacer, tenemos que mirar las casillas del lado derecho y dar click en el segundo cuadro en, que es la pestaña de uso rápido. Google nos proporciona diferentes pesos de fuente que podemos usar, y cada vez que seleccionamos un peso de fuente para descargar, nos muestra el impacto en los tiempos de carga de la página. Entonces las fuentes que vamos a usar en este proyecto son las 300 pesos, las 400, que es el tamaño normal, y también las 700 para el texto en negrita. Es realmente fácil de incluir en el proyecto. Podemos simplemente copiar el enlace para la sección de cabeza y pegarlo debajo de nuestro CSS. También voy a poner un comentario ahí, solo para las fuentes personalizadas. Guardaremos eso y volveremos a las fuentes de Google, y luego lo último que necesitamos hacer es integrar nuestras fuentes en el CSS. Así que copia la familia de fuentes, y luego dirígete a nuestro archivo CSS personalizado. La familia de fuentes entrará en la sección de cuerpo, y solo voy a empezar agregando un comentario solo para la sección Global. En esta sección se conservarán todos los estilos que vamos a estar utilizando en todo el sitio, y comenzaremos con la sección de cuerpo. Pega en la familia de fuentes y agregaremos el peso de la fuente, agregaremos el peso estándar de la fuente de 300, y también agregaremos el tamaño de la fuente para que sea de 16 píxeles como estándar. Es así como agregamos las fuentes a la página web. Entonces lo último que necesitamos hacer para la configuración es volver
a Google y buscar Font Awesome,
y luego ir a la página de GitHub para Font Awesome. Este va a ser el concepto I que vamos a estar usando para nuestra página web. Si quieres echar un vistazo a los iconos que están disponibles, solo tienes que seleccionar la pestaña de iconos en la parte superior y puedes echar un vistazo a todos los diferentes que están disponibles. Para descargar esto, tenemos que ir a, Empezar. Hay un par de formas fáciles de incluir estos en nuestro proyecto. Vamos a ir con la ruta CDN, que simplemente implica copiar el enlace y luego pegar eso en nuestra sección de cabecera. Esto vincula nuestro sitio web a los iconos de Font Awesome, que se alojan en esta dirección. Por último, voy a copiar el comentario, pegar eso en, y nombrarlo, Font Awesome, y luego guardar eso. Ahí vamos. Entonces esa es nuestra sección Bootstrap, toda configuración. Si te unes a mí en el siguiente video, seguiremos con el proyecto creando la sección de cabecera.
3. Sección de encabezado: HTML: Bienvenido de nuevo. Ahora, tenemos todo listo nuestro proyecto Bootstrap. Echemos un vistazo al proyecto final y un
vistazo a lo que vamos a estar construyendo en este apartado. Por lo que a continuación vamos a estar agregando el HTML para la sección de encabezados. El apartado del encabezado contiene una barra de navegación en la parte superior, cual va a tener el logotipo en la parte superior izquierda. También del lado derecho, vamos a tener los enlaces de menú. Vamos a añadir una gran imagen de fondo y también el texto destacado en el centro, que va a estar alineado tanto horizontal como verticalmente. El texto y la imagen van a ser estáticos por ahora. Pero una vez que lleguemos a la sección de WordPress más adelante en
el curso, el usuario podrá cambiar el fondo y también el texto. Entonces para empezar con la sección de encabezados, vayamos a nuestro editor de texto y nos deshagamos de la barra lateral por ahora. Entonces si nos desplazamos hacia abajo, podemos eliminar el encabezado hello world h1, y luego vamos a empezar con un comentario para la sección de encabezado. De acuerdo, entonces la sección de encabezado estará entre las etiquetas de encabezado. Vamos a empezar con la barra de navegación en la parte superior de la página. Entonces eso será en etiquetas de navegación y va a tener algunas clases de Bootstrap. El primero será navbar y luego navbar-default. Por lo que estaremos usando mucho estas clases de bootstrap a medida que pasemos por el proyecto. Si tienes curiosidad por saber exactamente qué está haciendo cada una de ellas, podemos ir al Bootstrap CSS en la carpeta CSS. Si buscaremos el bootstrap.css, por ejemplo, si buscamos navbar-default. Entonces, dirigiéndose a Bootstrap CSS, y si utilizas la función find de tu editor de texto y luego escribe la clase que quieres buscar. Entonces voy a buscar un navbar-default. Esto luego te llevará a la sección del CSS que aplica. Por lo que podemos ver que al agregar un navbar-default, incluye diversos bordes y colores de fondo. Por lo que podemos usar esto si quieres saber exactamente lo que está pasando en el CSS detrás de bambalinas. Pero también vale la pena tener en cuenta que cualquiera de estas clases de bootstrap que
hemos incluido, también podemos agregar o anular en nuestro propio archivo CSS personalizado. Entonces a continuación vamos a añadir un div con la clase de contenedor-fluido. Nuevamente, contenedor-fluido es una clase bootstrap. Puede usar contenedor-fluido, que proporciona un div fluido de ancho completo o puede usar la clase de contenedor por sí mismo, que incluye un div con un ancho fijo. Entonces dentro del fluido contenedor, vamos a crear un nuevo div con una clase de navbar-header. Dentro de este div, esta va a ser la sección que incluye la información para lectores de pantalla. También, echamos un vistazo al proyecto terminado. Se puede ver si reducimos el navegador hacia abajo, es un sitio web totalmente receptivo. Por lo que una vez que llegamos por debajo de un cierto tamaño, el menú de navegación se convierte en un menú desplegable. Por lo que el encabezado también va a contener la información para el botón desplegable. Entonces empecemos con ese botón ahora. El botón va a tener un tipo de botón. Agregaremos algunas clases de Bootstrap. El primero es navbar-toggle, y luego colapsó. Se va a colapsar por defecto, por lo que podemos agregar el data-toggle para que sea igual al colapso y el objetivo de datos es igual a.navbar-colapso. Entonces lo que está haciendo el dato-objetivo, esto está vinculado en el botón a un div con una clase todo navbar-colapso. Crearemos eso después del botón. Anidados dentro del botón, vamos a agregar las tres barras de iconos, que están en el botón desplegable. Por lo que la primera, todas
estas serán entre tags span. El primer tag span sólo será una clase para lectores de pantalla. Esto tendrá una clase de sronly y el texto para el lector de pantalla será toggle navigation. Entonces a continuación, agregaremos otro lapso con una clase de icon-bar. Por lo que esta es la primera de las tres barras de iconos. Entonces va a ser exactamente lo mismo para dos más. Por lo que podemos simplemente Copiar y Pegar o Duplicar eso y simplemente cambiar la ortografía ahí. Ahí vamos. De acuerdo, entonces vamos a comprobar eso en la vista previa. Ahí vamos. Entonces en la pantalla más pequeña, tenemos el botón desplegable que aparece ahí. Eso debería desaparecer una vez que lleguemos a cierto tamaño. Ahí vamos. A continuación, necesitamos añadir el logotipo a la esquina superior izquierda y también a los tres enlaces de navegación. Entonces para empezar, el logo va a ir justo debajo del botón, pero aún dentro del div encabezado navbar, y va a ser un enlace. Entonces vamos a poner la href de etiquetas y esto va a enlazar de nuevo a la página de índice, que es index.html. El bootstrap clase es navbar-marca. Debido a que nuestro logotipo es simplemente texto, podemos simplemente escribir esto ahí dentro. So Tranquilo Spa. Ese es el final de la sección de encabezado de barra de navegación. Por lo que sólo voy a añadir algunos comentarios. Entonces llamaremos a esto el navbar-header y terminaremos con eso ahí. Por lo que justo debajo del div de cabecera navbar-, al día siguiente tendremos los tres enlaces de home, blog y últimas noticias. Por lo que el contenedor div tendrá la clase de colapso. Entonces, a continuación, agregaremos la clase navbar-colapso, que usamos para el objetivo de datos. Entonces dentro de esta sección de colapso, agregaremos nuestra lista desordenada y agregaremos nuestras clases bootstrap de nav navbar-nav, y también navbar-derecha, que empuja los enlaces de navegación hacia el lado derecho del div, luego artículos de lista libre, que también son enlaces. Por lo que el href, para el primer enlace es para el hogar, por lo que esto enlazará al index.html, y el texto era casa. Necesitamos dos elementos de lista más. El segundo es para el blog.html y cambiar el nombre. El tercer enlace es para la última sección nueva. Ahora solo voy a dejar el enlace vacío para este, estaremos creando nuestra plantilla para la sección de blog usando bootstrap. Pero cuando se trata de la última sección de noticias, esto se va a generar dinámicamente en WordPress. Básicamente vamos a estar usando la página del blog, pero sólo vamos a usar un filtro, solo para filtrar las entradas del blog para ser la última categoría de noticias. Entonces agreguemos algunos comentarios. Entonces, primero agreguemos un comentario al div de cierre navbar-colapso, y luego el último es para el contenedor-fluido. Yo puedo cerrar eso allá arriba. Entonces veamos eso en el navegador y veamos cómo se ve eso. Genial. Entonces tenemos el logo apareciendo. Tenemos los tres enlaces del lado derecho. Disminuyendo el navegador hacia abajo, eso cae a un botón desplegable, que se expande para mostrar los tres enlaces. Por cierto, debido a que este botón desplegable está funcionando, esto también muestra que nuestro JavaScript Bootstrap, que está incluido en la carpeta js, está todo vinculado correctamente y todo está funcionando. Abajo en la parte inferior de la página, se
puede ver que los enlaces ya están incluidos en la plantilla bootstrap, tanto para jQuery como también para el JavaScript Bootstrap. Entonces sabemos que todo está funcionando correctamente. Ahora, tenemos nuestra barra de navegación completa. A continuación, vamos a empezar en la imagen de fondo y también en el texto. Vamos a llamar a esto la sección de funciones. Entonces vamos a poner esto justo debajo de la navegación. Copiemos ese encabezado y luego Pega esto justo debajo de la etiqueta de cierre y navegación pero aún dentro del encabezado. Voy a llamar a esto la SECCIÓN DE CARACTERÍSTICAS. Entonces debido a que la sección de características tiene una gran imagen de fondo la cual queremos estirar hasta el ancho completo de la página, vamos a hacer uso del bootstrap container-fluid nuevamente. Entonces dentro del fluido contenedor, necesitamos agregar otra clase bootstrap de fila y también nuestra propia clase personalizada, que es característica. Por lo que podemos enlazar a eso en el CSS en el siguiente video. Después agrega el camino a la imagen. Entonces salsa de imagen. Tenemos la carpeta Imágenes dentro del proyecto y luego la imagen de fondo grande se llama lakebg.jpeg y agrega algo de texto alt ahí. Yo sólo voy a añadir fondos lacustres. Entonces vamos a comprobar si eso está funcionando bien. Vuelvo a entrar en nuestro proyecto. Por lo que allá vamos, hay una gran imagen clavada en el fondo. Entonces vamos a añadir el texto que superpone la imagen. El texto irá en su propio div, y añadiremos una clase personalizada de feature-text. Entonces dentro de este contenedor, agregaremos nuestro texto en las etiquetas p. Por lo que el texto fue TOTALMENTE RECEPTABLE PREMIUM SPA Entonces voy a agregar algunas etiquetas de break después la palabra responsive y también después del tema de la palabra, solo para dividirlo en diferentes líneas. Entonces si volvemos al navegador y vemos cómo se ve eso, no
tendremos el texto apareciendo sobre la imagen aúnno
tendremos el texto apareciendo sobre la imagenporque necesitamos agregar algo de CSS para que eso funcione. Pero el texto está apareciendo justo debajo, así que no necesitamos preocuparnos por eso todavía. Eso lo resolveremos en el siguiente video. Por lo que acabaremos de terminar esta sección agregando algunos comentarios de cierre. En primer lugar al contenedor de fluido-y luego al div con la clase de fila, y luego el texto de la entidad. Entonces ahí vamos. Entonces ese es el final del HTML para la sección de encabezado. Si te unes a mí en el siguiente video, continuaremos con la sección de encabezado agregando el CSS. También voy a echar un vistazo a las filas de bootstrap y sistema de cuadrícula.
4. Sección de encabezado: CSS: Bienvenido de nuevo. En el último video, creamos el HTML para la sección de encabezado. Incluimos la barra de navegación superior con los enlaces del menú, la imagen de fondo principal, y también el texto de la característica. En este video, vamos a hacer que nuestra página web parezca más al proyecto terminado agregando el CSS. Vamos a cambiar el color del enlace y el fondo para la navegación. También vamos a darle estilo al texto y asegurarnos de
que esté alineado horizontal y verticalmente con la imagen de fondo. También echaremos un vistazo al sistema de cuadrícula Bootstrap, y te mostraré cómo agregar una columna a nuestro sitio web para que responda. Empecemos en nuestro Editor de Texto. Tenemos que tirar hacia arriba de la barra lateral y entrar en nuestro CSS personalizado. Simplemente sopla el cuerpo, aún dentro de la sección global, lo primero que necesito agregar es un ancho máximo para las imágenes. Vamos a ponerlos al 100 por ciento, lo que deja de que las imágenes se estiren demasiado grandes. Vamos a crear un comentario para la sección de barra de navegación. Vamos a empezar con la sección de barra de navegación. El navegación principal tiene la clase de barra de navegación. Esta es la parte que vamos a estar peinando primero, así que dot y luego navbar. Necesitamos subir el color de fondo morado. El fondo va a tener un número de 97689c. Vamos a comprobar si eso funciona bien. El color de fondo ha cambiado, pero necesitamos deshacernos del margen, que está en la parte inferior, empujando la imagen de fondo hacia abajo. Simplemente hacemos eso cambiando el fondo del margen para que sea cero. Lo siguiente que queremos hacer es quitar el borde por defecto. Es bastante difícil ver el borde predeterminado alrededor de la barra de navegación. Pero podemos eliminar eso simplemente estableciendo la frontera para que sea cero. Entonces ahora tenemos que cambiar el texto para el logotipo en la navegación. Bootstrap tiene muchas clases y mucho CSS, que se incluye como estándar. A veces puede ser difícil encontrar exactamente qué clase necesitamos enmendar. Una de las formas más fáciles de hacer eso es entrar en las herramientas de desarrollador del navegador. En Chrome, debe hacer clic derecho y seleccionar Inspeccionar elemento. Entonces si seleccionas la lupa, y luego simplemente coloca el cursor sobre el elemento que necesitamos cambiar, y haz clic. Entonces deberíamos conseguir una lista de las clases que está afectando a este elemento en particular. Podemos ver el primer elemento es el color para la marca navbar default, y eso está en la versión minificada Bootstrap. Podemos cambiar ese color. Yo sólo voy a copiar la clase que afecta ese color. Entonces vuelve a nuestro CSS personalizado, peguemos esto en, y cambiemos el color para que sea blanco. Eso cambia el color del logotipo. También tenemos que hacer lo mismo para los enlaces de navegación, que es un blog de inicio en las últimas noticias. Otra vez haz lo mismo, selecciona la lupa y elige uno de los enlaces. Nuevamente, podemos anular el color gris predeterminado estándar copiando la clase Bootstrap. Porque también queremos que esto sea blanco, podemos agregar esto en el mismo apartado. Eso cambia esos a blancos. Entonces en la vista móvil más pequeña, también
queremos que las barras de iconos gratuitas también sean blancas. De nuevo, selecciona la lupa. Si tan solo puedes seleccionar una de las barras de iconos, y asegurarnos de que podemos encontrar la que controla el color de fondo. Copiar las clases. Entonces pongamos esos en nuestro CSS. Cambiemos el color de fondo predeterminado, lo
cambiamos a blanco. Refrescar. Genial. Ahí vamos. Ahora las barras de iconos son todas blancas. Ese es todo el estilo que necesitamos agregar a la barra de navegación superior. Ahora podemos bajar al área destacada, y podemos empezar a trabajar en posición en la imagen en el texto. Vamos a crear un nuevo comentario para la sección de características. Podemos agregar el texto sobre la imagen. Tenemos que usar algún posicionamiento relativo y absoluto. Tenemos que hacer que el contenedor sea relativo. Completar el texto dentro del mismo. El contenedor para la sección de características tenía una clase de entidad, que es una clase personalizada que nos agregamos nosotros mismos. Empecemos agregando eso, y estableciendo la posición para que sea relativa. Debido a que queremos que la imagen de fondo se estire, sea del mismo ancho que el navegador, necesitamos anular el ancho máximo del 100 por ciento agregando la clase de imagen de entidad. En lugar de ancho máximo, sólo
vamos a establecer el ancho, esta vez del 100 por ciento. Esto significa que la imagen puede estirarse un poco más grande, o ligeramente más pequeña que el tamaño original de la imagen. Ahora tenemos el relativo de posición de contenedor. Ahora tenemos que cambiar el texto para que sea absoluto. Agregamos otra clase personalizada, rodeó el texto, que era una clase de texto de entidad. A continuación, empecemos con eso. La primera posición se va a fijar a absoluta, porque estamos usando el posicionamiento absoluto. Vamos a establecer tanto la posición superior como la inferior para que sean iguales. Ambos van a ser cero. Ahora porque eso está posicionado en absoluto, el texto aparece ahora sobre la imagen. Podemos empezar a trabajar con conseguir que se alinee horizontal y verticalmente. Vamos a empezar alineando verticalmente el texto ahora. En primer lugar, sólo voy a escribir esto, y luego te explicaré qué está haciendo esto después. La clase de texto de entidad, y luego antes. Establezca el contenido para que esté vacío. El tipo de visualización que será inline-block. El alto para ocupar el 100 por ciento del contenedor. Por último, alinear vertical-para ser medio. Volveremos a eso en un momento. Simplemente, en primer lugar,
agregaremos los estilos para el texto. La clase de entidad, y luego la p, que rodea el texto. Esto también va a tener el tipo de display de inline-block, y todo saldrá claro pronto. También vertical alineado para ser medio. El alineamiento de texto se centralizará en el div. El ancho para ser 100 por ciento del contenedor. Si volvemos al navegador, y si echamos un vistazo al proyecto terminado, hay un color de fondo. Es bastante débil, pero rodea el texto,
que tiene bordes redondeados, que tiene bordes redondeados, y también es semitransparente. Añadamos eso ahora. Para empezar, podemos agregar el color de fondo, cual tiene un valor RGBA. En primer lugar, necesitamos agregar los valores rojo, verde y azul. Para crear el color gris, el primer valor es 74, 82, 95, y luego el último valor es el Alfa o la opacidad. Yo quiero que eso sea 0.2, que es lo mismo que 20 por ciento de opacidad. El fondo tiene esquinas redondeadas, que se obtiene al agregar un radio de borde de 10 píxeles. El color del texto es blanco. Entonces ahí está el fondo del texto en su lugar. Entonces básicamente lo que estamos haciendo aquí es que estamos creando algo de texto y le estamos agregando algunos estilos, y luego estamos agregando un elemento falso justo antes del texto para que podamos usarlo como referencia de altura completa para alinear el texto en el div. Antes del texto, estamos creando un div vacío, que no tiene contenido, que son tanto el div falso como el texto para ser bloque en línea. Entonces estarán uno al lado del otro. Debido a que los elementos falsos tienen una altura del 100 por ciento, esto tomará la altura completa del div, y luego debido a que esta es la altura completa del div, podemos entonces establecer el alineamiento vertical para que sea medio y este hará que el texto se alinee en medio del div. Para que este truco funcione, solo
necesitamos hacer una cosa más porque por defecto, bloque
en línea tiene una brecha entre los elementos. Tenemos que quitar esto. Por lo que necesitamos agregar una propiedad que es de cero ancho. Si cambiamos el tamaño de fuente para que sea cero, eso eliminará la brecha entre los elementos falsos y el texto. Debido a que hemos establecido el tamaño de la fuente para que sea cero, entonces
necesitamos agregar el tamaño de la fuente en las etiquetas p. Entonces uno tiene que ser de 48 píxeles. Por lo que guardó eso y comprueba eso en el navegador. Eso se ve bien. Eso ahora está alineado verticalmente a la imagen de fondo, y también podemos ver el color de fondo semitransparente. Así que vamos a añadir un poco sobre él, sólo tres por ciento, y espaciar la altura de la línea para ser de 80 píxeles. Ahorremos y echemos un vistazo a eso. Genial. Eso se ve mucho mejor ahora. Lo siguiente que tenemos que hacer es alinearlo horizontalmente en el div. Eso lo vamos a hacer agregando algunas columnas de Bootstrap. Si nos dirigimos hacia atrás para obtener bootstrap.com y luego si vamos en la sección CSS, y luego seleccionamos el sistema de cuadrícula a la derecha, y luego desplázate hacia abajo hasta las opciones de cuadrícula. Bootstrap tiene un sistema de cuadrícula de 12 columnas y para acceder a que usamos el prefijo de clase de col y luego dash y luego podemos usar los xs para el número de columnas por qué queremos en dispositivos extra pequeños, sm para dispositivos pequeños o tabletas, md para dispositivos medianos o escritorios, o lg para los escritorios grandes. Por lo que podemos crear divs, que se muestra de manera diferente en dispositivos más pequeños o más grandes. continuación hay un ejemplo. Si queremos crear un div que tenga dos partes y abarque el ancho completo de la página, cada div necesita ocupar seis columnas cada una, y lo mismo, si queremos crear tres columnas lado a lado, le
daremos a cada div una clase de cuatro columnas. Pongamos esto en práctica en nuestro proyecto. Volver a la página de índice. Si buscamos el div que rodea el texto justo después de la clase de texto de entidad, vamos a agregar las columnas Bootstrap. Por lo que queremos que el texto ocupe todo el espacio disponible en una vista móvil, que podamos agregar col-xs, para dispositivos extra pequeños, 12, por lo que tomaremos las 12 columnas completas en un dispositivo pequeño. Si no queremos que sea de ancho completo en dispositivos más grandes, podemos agregar col-md-8, porque eso tomará hasta ocho partes de 12 o dos tercios y luego más grande aún, en escritorios grandes, col-lg-6, porque eso tomará hasta la mitad del ancho de la página web. Guardemos eso y echemos un vistazo. Si nos desplazamos hacia abajo hasta el tamaño pequeño, se
puede ver que el texto ocupa el ancho completo. Pero una vez que golpeamos a los dispositivos medios, este div solo se retoma ocho partes. Debido a que sólo se retoman ocho partes, está dejando cuatro columnas en el lado derecho. Por lo que para asegurarnos de que este div se quede en medio de la página, podemos agregar un desplazamiento en el lado izquierdo. Entonces para centralizar este div, necesitamos agregar un desplazamiento de dos, y la forma en que hacemos eso es col, por lo que el primero es md luego dash offset, y luego para compensarlo a dos columnas, ponemos eso en dos. Guardemos eso y veamos si eso funciona bien. Genial. Por lo que el div de ocho columnas está en medio de la página con dos columnas al costado ahora. Haremos lo mismo para los dispositivos grandes porque los dispositivos grandes se retoman seis partes. Tenemos que sumar un desplazamiento de tres. Entonces col-lg-offset tres. Ahí vamos. Las documentaciones de Bootstrap consiguieron algo más de información sobre el sistema de cuadrícula y la compensación. También hay algunos ejemplos a los que puedes echar un vistazo en la sección de compensación. Entonces ese es este video casi terminado. Sólo una cosa más que necesitamos agregar antes de irnos, es si encogemos el navegador hacia abajo, el texto es bastante grande. Por lo que bajaremos a los tamaños de tableta pequeña o móvil. Tenemos que asegurarnos de que el texto sea más pequeño. Por lo que podemos hacer eso en nuestro CSS agregando una consulta de medios. Añadamos un comentario de estilo móvil justo en la parte inferior de la página. Entonces vamos a agregar una consulta de medios, así @media pantalla, y vamos a apuntar a los dispositivos con un ancho máximo de 768 píxeles. Al usar 768 píxeles, esto se mantiene en línea con las consultas de medios de Bootstrap. Si volvemos a subir a la parte superior del sistema de cuadrícula, se pueden
ver los tamaños de consulta de medios que utiliza Bootstrap. Por lo que vamos a establecer en nuestra consulta de medios para dispositivos extra pequeños de menos de 768 píxeles. Para reducir el tamaño de fuente, necesitamos agregar la clase de texto de entidad, y luego p, y necesitamos mostrar el espacio después y, ahí vamos. Por lo que necesitamos reducir el tamaño de la fuente. Vamos a establecer esto en 28 píxeles y también la altura de línea, que puede ser la misma, que también puede ser de 28 píxeles. Guardemos eso y regresemos al navegador. Si volvemos al proyecto y luego encogemos el navegador hacia abajo. Se puede ver que el texto ahora escala hacia abajo en los dispositivos más pequeños y se coloca en el contenedor. A medida que nos hacemos más grandes y
golpeamos la consulta Media, obtendremos el texto más grande, así que eso se ve mucho mejor. Si bien estamos en la consulta de medios, también
podemos simplemente hacer los enlaces gratuitos en la vista móvil, aquí
arriba en el centro de la página, podemos agregar eso en la sección lia, porque es nuestro ítem de lista hipervínculos, por lo que text-align centro. Ahí vamos. Genial. Entonces eso es todo para esta sección. Eso es todo el CSS completado para el encabezado. Si te unes a mí en el siguiente video, continuaremos con la página web y bajaremos a la sección de bienvenida.
5. Página de inicio - sección de bienvenida: En el último video, completamos el HTML y el CSS para la sección de encabezado. A continuación, si echamos un vistazo a la página web terminada, vamos a empezar con la sección de bienvenida. Es una sección bastante simple, solo
hay un encabezado de nivel 2 en la parte superior, también
hay una imagen de división, y luego cuatro enlaces a diferentes partes del sitio web. Empecemos. Dirígete a tu página de índice y luego copia el comentario para la sección de funciones. Vamos a empezar a trabajar justo debajo de la etiqueta de cabecera de cierre y pegarla en. Esta va a ser la sección de bienvenida. El apartado de bienvenida va a estar en las etiquetas de sección, y la etiqueta de sección va a tener un ID de bienvenida, por lo que podemos usar eso en el CSS. Todo el div necesita tener una clase de contenedor. A diferencia de las secciones anteriores, solo
vamos a usar un contenedor de ancho establecido. No queremos estirar demasiado ancho. Después dentro del contenedor, agregamos el div habitual con la clase de fila. Después estableceremos el número de columnas bootstrap. Queremos que el encabezado de nivel 2 y también la imagen
divisoria sea la mitad del ancho de la página web, por lo que estableceremos el número de columnas seis y añadiremos un desplazamiento de tres en el lado izquierdo. Rodearemos el texto de la imagen con un div, con una clase de col-sm-6 y también para el offset, col-sm-offset-3. Después el encabezado de nivel 2, que es “Bienvenido a Tranquil Spa”, luego justo debajo del encabezado, agregaremos la imagen, por lo que la fuente de la imagen, esta imagen también está en nuestra carpeta de imágenes, images/divider-purple.png. Si miramos el proyecto terminado, se
puede ver que el divisor-morado está sobre el color de fondo blanco. Pero más abajo, tenemos color de fondo morado, también
tenemos una división con las macetas plateadas. Usaremos el divisor-plata en los tramos. Después de la ruta del archivo, podemos agregar el texto alt-del divider, y cerrar esa imagen fuera, y luego solo copie los comentarios div de cierre. El primero es para las columnas, el siguiente es para las filas, y el último es para el contenedor. Veamos cómo se ve eso, volver al navegador y refrescar. Ahí vamos. Se centra la imagen en el texto. Tenemos que hacer un poco de trabajo con el CSS, pero eso está bien por ahora. Entonces a continuación, crearemos las cuatro imágenes y los cuatro enlaces justo debajo. De vuelta al editor de texto, comenzamos justo debajo de la última fila de cierre pero aún dentro del contenedor principal. Vamos a crear una nueva fila. Una clase div de fila y también vamos a añadir una clase personalizada de instalaciones, podemos usar eso en el CSS. Cada uno de los enlaces individuales va a estaca de tres columnas, por lo que podemos crear cuatro divs diferentes con una clase de col-sm-3. El primero, clase div de col-sm-3, por lo que tanto la imagen como el texto van a ser un enlace, así que solo dejaremos un espacio en blanco. Dentro del enlace, agreguemos primero la imagen. El origen de la imagen de las imágenes y la primera imagen es makeup.png con el texto antiguo, vamos a deshacernos de la barra lateral. El texto antiguo es, “Cabello y Maquillaje”. Después justo después de la imagen, puedes agregar el texto para el enlace, así pelo, y luego para obtener el símbolo y, usamos el ampersand, luego amp; luego Make Up, luego agreguemos algunos comentarios a los divs de cierre. El exterior es para la fila y luego el interno es para la div de tres columnas. Porque vamos a estar usando estas tres columnas div cuatro veces, vamos a copiar la sección y luego pegarla por debajo tres veces más,
guardar eso, y echa un vistazo en el navegador, y refrescar. Genial, eso está funcionando. Tenemos las cuatro imágenes, todos hipervínculos. Podemos ver el subrayado una vez que se pasa el cursor y también el texto está ahí. Ahora cambiemos las imágenes en el texto. El primer div está bien, vamos a bajar a la segunda imagen. La segunda imagen tiene un nombre de candles.png, el texto alt es “
Instalaciones de Spa ” y también el texto es Instalaciones de Spa. Entonces la tercera sección tiene una imagen llamada lake.png y el texto es “Retiros Lakeside”, y también el mismo para el texto alt. Por último, el último, el nombre de la imagen es pool.png, el texto es “Todas nuestras instalaciones” y lo copiaremos para el texto alt también. Veamos eso en el navegador y actualicemos. Eso está bien por ahora. A continuación, voy a seguir adelante y añadir algo de CSS para esta sección. Queremos asegurarnos de que el encabezado de nivel 2 esté centralizado, necesitamos algún espaciado por encima y por debajo de las imágenes. También vamos a centralizar el texto y eliminar el subrayado cuando se pasa el puntero sobre, y también vamos a cambiar el color del texto. Hagámoslo en el CSS personalizado. Vamos a empezar con el rumbo de nivel 2 porque vamos a estar usando esto muchas veces más en el sitio, queremos poner esto en la sección Global en la parte superior, así que justo debajo de la imagen, podemos tener h2 ahí. Necesitamos texto-alinear, centrar. En el tamaño de fuente para ser 2em, y también para crear un poco de espacio en la parte superior e inferior, vamos a añadir un poco de margen. Margen superior, 30 píxeles, y también algún margen en la parte inferior para ser de 20 píxeles. Guardemos eso y comprobemos eso en el navegador. Ahora, tenemos el texto en el medio, y también un poco de espacio arriba y abajo. Si bien también estamos en la sección global, podemos eliminar el subrayado de los hipervínculos cuando pasamos el cursor sobre. Justo debajo de la h2, vamos a seleccionar a:hover. Podemos eliminar el subrayado estableciendo la decoración del texto como ninguna. También establezcamos el color del texto mientras estamos aquí. Cuando se cierne sobre, necesita ser 97689c. Ahora, cuando paso el cursor por encima, el texto cambia a morado y el subrayado que se está quitando. Porque hemos establecido el tamaño de fuente h2 para que sea 2em, eso probablemente va a ser un poco demasiado grande cuando lleguemos al tamaño del móvil, así que vayamos a la consulta de medios. Debajo del texto de la característica, vamos a agregar el h2. Simplemente reduciremos el tamaño de fuente para ser 1.6em. Ahora, hemos agregado los estilos globales, podemos empezar agregando una sección de Bienvenida y agregando algunos de los estilos específicos de Bienvenida. Vamos a copiar el comentario para estilo
móvil y lo pegaremos justo encima de la sección de estilismo móvil. Llamemos a esto la Sección de Bienvenida. la sección Bienvenida, damos un DNI de “bienvenido”. Sección de bienvenida tiene un color de fondo blanco. Añadamos algo de relleno a la parte inferior de la sección para que todo lo siguiente no se acerque demasiado. Estableceremos la parte inferior del relleno en 30 píxeles. También estableceremos sólo texto en esta sección para estar en el centro. En la sección global, cambiamos el color de los enlaces cuando pasamos por encima de ellos. Pero ahora, necesitamos establecer el color para anular el azul predeterminado. Bienvenido y luego un, porque son enlaces y el color va a tener el valor de 494646, que es un color gris más oscuro. A continuación en la sección con las imágenes y el texto, queremos hacer el texto un poco más grande y también las imágenes individuales, vamos a hacerlas un poco más pequeñas y añadir algún margen en la parte superior e inferior, solo espaciando un poco más. Alrededor de esta fila, miraremos hacia atrás en el HTML. Los cuatro divs individuales estaban todos rodeados una fila y le damos a esa fila una clase personalizada de instalaciones. Usemos nuestro ahora. Aumentemos el tamaño de la fuente. Tamaño de fuente, vamos a establecer eso en 1.5 em, y también la imagen de las instalaciones, vamos a configurar la pantalla para que sea bloque. Para hacerlos un poco más pequeños, podemos establecer que el ancho máximo sea del 60 por ciento, por lo que se ve un poco mejor. Después para agregar un espacio aquí, estableceremos el margen, queremos poner 30 píxeles en la parte superior e inferior,
y establecer la izquierda y la derecha para que sea automática. Ahí vamos, eso es lo que se acaba ahora con la sección Bienvenida. Ese es el final de este video y si te unes a mí en el siguiente video, seguiremos con el sitio web y
bajaremos para crear la última sección de Office. Nos vemos ahí.
6. Página de inicio - sección de ofertas HTML: Nuestro sitio web está tomando forma ahora, hemos completado la sección de encabezado y también la imagen y el texto destacados. Posteriormente bajamos a crear la sección de bienvenida, que tiene enlaces a todas las secciones del sitio web. Si echamos un vistazo a la página web terminada, la siguiente parte que vamos a estar creando es la sección de ofertas más recientes. Va a consistir en un encabezado y divisor de nivel 2 similar a la última sección, y luego vamos a crear una nueva fila con tres ofertas especiales diferentes. Las tres ofertas diferentes son textos estáticos por ahora, pero una vez que lleguemos a la sección de WordPress más adelante en el curso, nos aseguraremos de que el usuario pueda iniciar sesión y cambiar los valores, para que pueda mantener actualizadas las ofertas especiales incluso sin ningún conocimiento técnico. Empecemos en la página del índice, así que empezaremos con un comentario. Esta sección se va a llamar las últimas ofertas, y haremos justo debajo de la sección de bienvenida como lo hemos hecho en el último video, por lo que localizaremos la sección de cierre y luego pegaremos el comentario justo debajo de ahí, así que eso es lo más reciente ofrece. Las últimas ofertas tendrán su propia sección también y esto tendrá un ID de las últimas ofertas, se
encuentran dentro de la sección. Crearemos el div habitual con la clase de contenedor, y luego debido a que la fila que vamos a estar usando es más o menos la misma que la última sección, podemos simplemente copiar el div con la clase de fila y podemos reutilizar eso. Pega eso dentro del contenedor, y luego necesitamos cambiar el encabezado de nivel 2 a las últimas ofertas. Porque esta vez estamos sobre un fondo morado, cambiemos el divisor para que sea el divider-silver.png y echemos un vistazo a eso. Ahí está nuestra sección con el encabezado nivel 2 en el divisor, así que solo vamos a agregar una clase personalizada más la cual va a ser una clase para agregar algún margen a la parte inferior del divisor. Si miramos el proyecto terminado necesitamos asegurarnos de que los divs libres debajo del divisor estén ligeramente empujados hacia abajo desde la imagen, así que agreguemos la clase a la fila del margen inferior. Agregaremos un margen en el siguiente video, en el CSS, solo agreguemos un comentario de cierre al contenedor. Pongamos las ofertas especiales gratuitas en fila, así que vamos a crear un nuevo div con la clase de fila. Vamos a crear los divs de oferta especial gratis pero necesitamos poner
esos divs de oferta especial gratis en un contenedor, así que vamos a poner un contenedor completo de 12 columnas de ancho alrededor de esos. Div con una clase de col-sm-12, y eso creará un contenedor completo de 12 columnas. Debido a que las secciones de oferta especial gratuita están anidadas, necesitamos crear una nueva fila para que esas entren. Dentro de la fila, la primera oferta especial va a ser div class col-sm-4, por lo que ocupa un tercio de la página y también para que podamos agregar nuestros estilos personalizados, también
añadiremos una clase de oferta personalizada. Para empezar necesitamos poner el precio, necesitamos poner precio en las etiquetas span, y luego pondremos el nombre de la oferta especial en un encabezado de nivel 3, y luego dos etiquetas de párrafo separadas justo debajo. Para el precio, el lapso, y luego en medio ahí el primero tenía un precio de 60 dólares, y luego por debajo de eso en el rubro nivel 3, el nombre de la oferta. El primero es la oferta familiar, solo
voy a poner una etiqueta de break ahí dentro, y luego las etiquetas, así que la primera línea de texto fue alberca familiar y luego la línea dos fue genial día fuera, así que vamos a ver cómo se ve eso. Está todo ahí pero aún queda un poco de trabajo por hacer con el CSS, pero sigamos por ahora agregando el resto de las ofertas. Si localizamos el div, hecho hagamos algún comentario primero, así que solo copie el comentario del contenedor y luego el primero es para la clase de oferta. El segundo se llama sm-4, y luego esta es la fila, hecho esta es la fila anidada, luego justo debajo de eso es la envoltura de 12 columnas, y luego el contenedor de fila final. Copiemos la sección completa para la oferta especial, y luego peguemos dos veces justo debajo. El segundo ofrecimiento especial tenía el precio de unos 120 dólares y este es un paquete nupcial, por lo que el nombre de la oferta era para la novia. El primer renglón del texto fue cabello y maquillaje, y por último fue el paquete completo de mimar, y luego la última oferta especial fue el pase de fin de semana que tenía un precio de $90, por lo que el nombre era pase de fin de semana. El texto era instalaciones modernas, y el último tenía el texto de regalo perfecto. De vuelta al navegador, todo
eso está apareciendo bien, así es exactamente como lo queremos. Acompáñame en el siguiente video, y seguiremos con la sección agregando el CSS.
7. Página de inicio - sección de ofertas CSS: En este video, seguiremos con la sección de ofertas más recientes. En el último video, agregamos el HTML para las ofertas separadas gratuitas y en este video vamos a estar agregando el CSS para que se parezca más a los proyectos terminados. Vamos a estar agregando el color de fondo morado para la sección completa. También estaremos cambiando el color de fondo y texto para las ofertas individuales gratuitas. También nos aseguraremos de que el círculo de precios se posicione horizontalmente en medio del div y también se superponga en la parte superior. Eso haremos con algún posicionamiento absoluto. Si pasamos a nuestro CSS, podemos crear una nueva sección. Hagamos esto en la parte inferior justo antes del estilo móvil. Se trata de las últimas ofertas. El apartado de ofertas más recientes tenía el ID de las últimas ofertas. Simplemente usaremos esto para crear el color de fondo morado. Establezca el color de la fuente para que sea blanco, y también asegúrese de que todo el texto esté alineado. En primer lugar, estableceremos el text-align para que esté en el centro. Debido a que estamos usando un color de fondo púrpura o colores de fondo oscuros, queremos que el div tenga texto blanco. El color de fondo morado tiene el ID de 97689c. Echemos un vistazo en el navegador. Ahora tenemos el color de fondo morado y el texto blanco, por lo que podemos pasar a los tres divs de oferta individual. Si miramos hacia atrás en la página de índice, las ofertas gratuitas les
damos una clase de oferta personalizada, utilizamos en las tres. Podemos seleccionar eso ahora. Por lo que la clase de oferta. Vamos a establecer primero el color de fondo oscuro. El fondo de las ofertas gratuitas tiene una identificación de 4a525f. Ahí vamos. Debido a que estos serán contenedores para el precio y los círculos, vamos a establecer la posición para que sea relativa. Para hacerlos un poco más altos, agregaremos una altura mínima de 350 píxeles de alto y un poco de relleno. Voy a añadir 40 píxeles arriba y abajo, y luego 10 píxeles a izquierda y derecha. Entonces a continuación podemos empezar a cualquier precio y círculos. El precio y los círculos estaban envueltos en una etiqueta span. Selecciónelos utilizando la clase de oferta y luego span. Empecemos cambiando el color de fondo. Los círculos tendrán el color de 8abbb1 y la pantalla se va a poner en bloque. Les damos una altura y anchura de 100 píxeles. Debido a que el precio va a estar dentro, estableceremos el text-align para que sea centro. Echemos un vistazo y veamos cómo se ve eso hasta ahora. Tenemos los divs de precios gratuitos apareciendo, tenemos un color de fondo diferente. A continuación tenemos que hacerlos un círculo. Entonces necesitamos buscar una posición en los círculos donde los queremos. Para hacer esos círculos, sólo
podemos añadir un radio de frontera del 100 por ciento, y eso lo convierte en círculo. Entonces para hacer el texto alineado verticalmente, también
podemos establecer la altura de línea para que sea de 100 píxeles, que es la misma que la altura completa del div, y que mueve el precio hacia la mitad del círculo. Debido a que tenemos un contenedor relativo desde el que trabajar, podemos establecer estos círculos de precios para que tengan una posición absoluta. Empezaremos a referenciar estos círculos desde el lado izquierdo del contenedor. Vamos a sumar algún margin-izquierdo del 50 por ciento para poner eso en el medio del contenedor. Ahora no está del todo en medio porque necesitamos
compensar la mitad del ancho del círculo. Hagámoslo ahora. Si establecemos la izquierda, podemos establecer el valor para que sea negativo 50 píxeles, que es la mitad del ancho y eso debería hacerlos centrados horizontalmente. Entonces a continuación podemos referir el círculo desde arriba. Pongamos la cima. Ahora si estableciéramos que el valor de la parte superior fuera cero, lo que pasaría es que un círculo iría a la parte superior del contenedor, pero necesitamos que el círculo se superponga a la mitad de la altura. En lugar de establecer que la parte superior sea cero, podemos establecer que la parte superior sea negativa 50, que es la mitad de la altura. Ahí vamos. Ese es el posicionamiento exactamente donde lo queremos. Tan solo para terminar la sección de precios, solo
agregaremos el tamaño de la fuente y el peso de la fuente. El tamaño de fuente que terminan hasta 2ems, y por último el font-weight va a ser negrita. Ahí vamos. Entonces a continuación crearemos algo de espaciado. El nombre del autor está en un rubro de nivel 3. Añadamos algún margen a la parte inferior solo para empujar el texto favorecido y también podemos aumentar el tamaño de la fuente también. Debajo de la sección span, tenemos la clase de oferta y luego h3. Margin-bottom es de 50 píxeles y también vamos a cambiar el tamaño de fuente para que sea 1.2ems. Eso nos da un poco más de espacio por debajo del encabezamiento. También voy a agregar algo de espaciado entre las dos líneas abajo agregando algo extra de altura de línea. Las dos líneas estaban en etiquetas P. El ofrecimiento p, podemos aumentar la altura de línea a 2ems. Eso te da un poco más de espaciado vertical. Ahora vamos a crear algo de espacio entre el divisor y también las secciones de oferta especial gratuitas. Si recuerdas de nuevo en la página de índice en la primera fila, que tenía el encabezado de nivel 2 en la imagen de división. También agregamos una clase personalizada de margin-bottom. Podemos agregar ese CSS personalizado, y empujar los divs libres hacia abajo. Establezcamos el margen inferior para que sea de 70 píxeles y veamos cómo se ve eso. Genial. Así es exactamente como queremos que se vea en la vista de escritorio. Si reducimos el navegador hacia
abajo, hasta un tamaño móvil y luego nos
desplazamos hacia abajo hasta las ofertas gratuitas, solo necesitamos hacer un pequeño cambio en el margin-bottom porque los divs libres se mezclan en uno cuando están apilados uno encima del otro. Podemos arreglar eso fácilmente si encontramos la sección con la clase de oferta. Entonces podemos agregar algún margen en la parte inferior de 60 píxeles. Veamos cómo se ve eso. Eso se ve mejor ahora. Tenemos espacio entre las tres ofertas especiales en la vista móvil. Eso es todo. Ese es el final de la última sección de ofertas. Gracias por escuchar, y nos vemos en el siguiente video.
8. Página de inicio - sección de tienda en línea: En el último video, bajamos a la sección Últimas Ofertas de la página web. En este video, vamos a estar completando la sección Tienda Online. Ahora, la sección Shop Online es una sección relativamente sencilla. Vamos a utilizar un nivel similar al rumbo sobre divisor, como lo hemos hecho en las dos últimas secciones. Vamos a añadir un botón, que va a ser un enlace a una sección Shop Here. También va a haber una gran imagen de fondo a través del CSS. Encima en el editor de texto, voy a empezar en la página de índice y crear una nueva sección. Voy a pegar el comentario justo debajo de la sección Últimas Ofertas. A esto se le llama la sección Tienda Online. Esto tiene una etiqueta de sección con un ID de shop-online, y un contenedor de bootstrap habitual en fila. Entonces div con una clase de contenedor. Entonces dentro del contenedor, tenemos la fila. Copiaremos el encabezamiento y dividiremos la sección de la última sección. Copiaremos la sección de seis columnas y lo pegaremos dentro de nuestra propia fila. El encabezado de nivel 2 es el texto de Tienda Online. El imagen, tenemos que cambiar para ser la imagen morada porque está sobre un fondo blanco. Justo debajo del divisor, el a y href va a estar en blanco por ahora. La clase va a ser la clase de botón bootstrap, por lo que btn btn-default. Entonces el rol va a ser igual a botón. Después cierra el enlace y no el texto Shop Here, y echemos un vistazo en el navegador. Este es nuestro divisor de encabezamiento y también el botón predeterminado. Ahora, podemos fácilmente hacer que el botón aparezca en el centro de la página con solo agregar una clase bootstrap. Al contenedor, justo después del número de columnas, podemos agregar la clase bootstrap del centro de texto. Ahora empuja el botón hacia el medio del div. Eso es todo HTML que necesitamos agregar para esta sección. Acabaremos de cerrar algunos de los divs con comentarios. Esta es la fila de cierre en el contenedor final. De acuerdo, entonces a continuación, tenemos que entrar en el CSS personalizado. Voy a agregar el estilo para
los valores predeterminados de botón y también en la imagen de fondo grande, igual que el sitio web final. Pasado al CSS personalizado, así que empecemos con el botón. Entonces porque vamos a estar usando el botón más adelante en el curso, lo
vamos a agregar a la sección Global en la parte superior. Voy a justo debajo de la imagen. El tipo era btn-default. Anulemos los valores de bootstrap predeterminados que implican fila. En primer lugar, el color de fondo del botón no será el color azul, que es 8393ca, y vamos a añadir un borde, un borde de píxeles libres, sólido. El color va a ser ecf0f1 y un radio de borde de 5 píxeles, y luego algunos remeros para hacer el borde un poco más grande, 15 píxeles en la parte superior y botón y 30 en la izquierda y derecha, y el color del texto va a ser blanco. Echemos un vistazo. El botón se ve bien, solo
necesitamos agregar el estado de hover. Si volvemos al CSS btn-default y luego pasamos el cursor, cambiamos el color de fondo para que sea 97689c. Cuando pasamos el cursor sobre el botón, tenemos el mismo color morado que el fondo. Ahora, volvamos atrás y creemos una sección Shop Online. Copiaremos los comentarios, y justo encima del MODELO MÓVIL de nuevo, llamaremos a esto la sección Tienda Online. Empecemos con la imagen de fondo. El apartado tenía un DNI de tienda en línea. Podemos cambiar el fondo agregando fondo y luego url, y luego, entre paréntesis, podemos agregar la ruta del archivo. Entonces punto punto para volver al directorio de inicio, foward slash imágenes, y luego las imágenes que queremos es products.jpg, pero no estarán en el centro. Por último, sin repetir. Tal como está, la imagen está en su lugar, pero sólo se ocupa de la misma altura que el contenido que ya está en su lugar. Podemos cambiar eso agregando la altura mínima. Estableceré la altura mínima para que sea la misma altura de la imagen, que es de 852 píxeles. Entonces cambiemos el color del texto del encabezado Shop Online. El color va a tener el valor de 494646. Entonces finalmente, solo para separar el botón del divisor, agregaremos algún margen a la parte superior, por lo que el ID de tienda online y luego el btn-default. Empujemos el botón hacia abajo agregando algún margen en la parte superior de 25 píxeles y veamos cómo se ve eso en el navegador. De acuerdo, ahí vamos, el botón ahora se empuja hacia abajo desde el divisor. Ese es el final del video. Gracias por ver, y si te unes a mí en el siguiente video, terminaremos la página de inicio de bootstrap agregando el pie de página.
9. Sección de pie de página - HTML: Bienvenido de nuevo. En este video, vamos a estar creando la sección de pie de página para nuestra página de índice. Si volvemos a nuestro editor de textos y debajo de la sección online de la tienda, solo
copiemos los comentarios y los peguemos a continuación, y lo llamaremos Sección de Pie de página. No necesitamos usar las etiquetas de sección como secciones
anteriores porque hay una etiqueta de pie de página que podemos usar en su lugar. Utilizamos las etiquetas de pie de página. Debido a que el encabezado de nivel 2 en la imagen para la sección de pie de página es bastante similar a las últimas secciones, podemos simplemente copiar esa sección desde arriba. Hemos copiado el contenedor de la sección en línea de la tienda, y lo pegamos entre las etiquetas de pie de página. No necesitamos el botón. Por lo que podemos eliminar esa sección. El apartado de la tienda online va a ser “Manténgase en contacto” y justo después de text-center, vamos a reutilizar la clase margin-bottom, que usamos antes arriba en la sección de ofertas más recientes. Esto va a alejar el contenido del divisor. Guardemos y echemos un vistazo a eso, y actualicemos. Ahí está nuestro rumbo nivel 2 y el divisor. A continuación, necesitamos crear una nueva fila, que va a tener la dirección a
la izquierda y algunos de los enlaces de navegación en el medio, y luego algunos de los botones de compartir social a la derecha. Para poner estas tres secciones, crearemos una nueva fila justo debajo de la última. Entonces un nuevo div con la clase de fila, y luego dentro de la fila vamos a crear tres divs más, que van a ser de cuatro columnas divs. Clase Div, luego col-sm-4. Podemos copiar este div, pegarlo en dos veces. El primer div tiene el direccionamiento, por lo que vamos a ser semánticos y usar las etiquetas de dirección. El primer renglón es Tranquil Spa, luego añadir la etiqueta de break. Añadamos algunas líneas de dirección, por lo que la línea de dirección 1 luego la etiqueta de ruptura. Duplicar esto dos veces más para crear la línea de dirección 2 y 3. Entonces el segundo div tenía la lista desordenada con la navegación. Entre las etiquetas ul, crearemos cuatro elementos de lista y entre las etiquetas de lista crearemos algunos enlaces. Entonces un href, y el primer enlace va a ser sobre nosotros. Esto enlazará a about.html y pondremos ese enlace ahí para cuando creemos eso, y el texto es Acerca. Copiar y pegar o duplicar esto tres veces más. El segundo enlace es el Contáctenos. Cambiemos eso ahora y el enlace va a ser contact.html. El tercer enlace es al blog. El enlace es blog.html, y el texto de Blog. Entonces por último son las Últimas Noticias. Podemos simplemente eliminar el enlace ahí porque vamos a estar generando eso dinámicamente en WordPress. Entonces echemos un vistazo en el navegador. Ahí vamos, tenemos nuestras dos primeras secciones. Ahora, sólo necesitamos crear la sección de redes sociales a la derecha. Para el div, comenzaremos con etiquetas p y el texto de Síguenos, y luego debajo del texto Síguenos, vamos a usar los iconos Font Awesome para enlaces a redes sociales. Agregamos los iconos Font Awesome con la etiqueta i, y luego agregamos una clase. Por lo que la primera clase es fa. Eso necesitamos para todos los iconos. Entonces el icono de Facebook es fa-facebook. Después para hacer el icono un poco más grande de lo normal, agregamos la clase de fa-lg, y luego cerramos. Después crea cuatro enlaces más. El segundo es el enlace a Twitter. Necesitamos fa-twitter. Icon 3 es Google Plus, y luego Pinterest, y luego finalmente es YouTube. Entonces vamos a guardar eso y ver cómo se ve eso ahora. Bien, tenemos los cinco iconos de redes sociales donde deberían estar. Entonces lo último que tenemos que hacer es agregar la sección de derechos de autor en la parte inferior de la página. Añadamos eso ahora. Entonces justo debajo del contenedor pero almacenado en la sección de fotos, agregaremos un nuevo div con una clase de contenedor-fluido, por lo que abarca todo el ancho de la página web. También agregaremos un id de copia por copyright, y luego un div con una clase de col-sm-12 para hacer un contenedor de 12 columnas. Después el texto entre las etiquetas p, agregaremos el símbolo de copyright, que es ampersand, y luego copiaremos; 2015 Tranquil Spa. Entonces agreguemos algunos comentarios. Este es el div de cierre para la fila. Este es el contenedor de 12 columnas y finalmente el contenedor de fluidos. Echemos un vistazo. Genial, así que eso es todo el HTML que hice para la página de inicio. Si te unes a mí en el siguiente video, terminaremos nuestra página de inicio agregando el CSS.
10. Sección de pie de página - CSS: Bienvenido de nuevo. En este video, vamos a estar rematando nuestra página de índice agregando el CSS para la sección de pie de página. Si nos adentramos en nuestro CSS personalizado y luego copiamos los comentarios. Tan solo para la sección de estilismo móvil, a esto le
llamamos la sección de mantenerse en contacto. El apartado de pie de página se envolverá en las etiquetas de pie de página. Vamos a añadir un color de fondo de morado. Para que el texto destaque, estableceremos el color para que sea blanco, y luego cambiaremos el color de fondo para que sea morado, que es 97689c. A continuación necesitamos cambiar el divisor para que sea el color plateado. En HTML, vamos a cambiar el divisor de divisor púrpura para ser divisor silver.png y luego, vamos a crear algún espacio entre las líneas para la dirección y también los elementos de la lista. De vuelta en el CSS, podemos hacer eso seleccionando los ítems de la lista de pie de página, y también la sección de direcciones, y vamos a aumentar la altura de línea para ser 2ems, y eso nos da un poco más de espaciado verticalmente. Los iconos de las redes sociales están un poco puñetados, así que voy a añadir algún margen en el lado derecho sólo para separarlos un poco. Seleccionaré Font Awesome iconos con el i. Vamos a añadir algún margen, en el lado derecho, 15 píxeles. Eso se ve un poco mejor. Después queremos cambiar el color de fondo para la sección de derechos de autor en la parte inferior y alinear el texto en el centro. Para la sección de derechos de autor, le
daremos a eso un DNI de copia. Empecemos configurando el text-align para que sea centro, el color de fondo para que sea blanco, y estableceremos el color de la fuente en 494646, y las alturas del div en 60 píxeles, y también estableceremos la altura de la línea en 60 píxeles para alinear el texto, y luego finalmente, agregaremos algún margen a la parte superior del div, de 30 píxeles, refrescaremos. Parece estar funcionando, así que sólo veremos cuál es el problema. Tengo el DNI de copia. Cuando se cambia el error ortográfico que vuelva a ID y guarde eso y refresque. Eso se ve mejor. Ahora tenemos que separar su sección de derechos de autor en la parte inferior de la página. Por lo que a continuación tenemos que hacer algún trabajo con los ítems de la lista. Tenemos que cambiar el color y también quitar las balas del lado izquierdo. Lo haremos en la sección Global en la parte superior. Añadamos esto al final de la sección Global. En primer lugar para quitar los puntos de bala, vamos a quitar el estilo de lista, podemos poner eso en ninguno. Debido a que se trata de enlaces, podemos seleccionar el enlace de elemento de la lista de pie de página, y cambiar el color del enlace para que sea blanco. Después haz lo mismo para el estado de flotación, pie de página, li a, y luego pasa el cursor. El color flotante va a ser el color gris que hemos usado en el texto, así que eso es 494646. Echemos un vistazo. Todo está funcionando bien, bien. Todo se ve bien para la vista de escritorio, así que vamos a reducirla a la vista móvil y ver si es necesario realizar algún cambio. Sí, tenemos algunos relleno por defecto en el lado izquierdo, y también necesitamos alinear el texto para estar en el centro. Se moverá el relleno predeterminado, abre la sección Global. Hagámoslo justo encima de los ítems de la lista. El UL, vamos a establecer el relleno para que sea cero, eso se ve mejor, y establecer el text-align hacia abajo en la consulta de medios. Eso haremos en el pie de página, text-align para ser centro. Para separar la dirección y la lista desordenada del pie de página, quiero agregar un fondo de borde. Entonces otra vez, lo haremos en la consulta de medios, así pie de página, lista desordenada, y también las etiquetas de dirección. Border-bottom, estableceremos en un píxel y la línea a puntear. Echemos un vistazo. Eso se ve bien. Si ampliamos el navegador, todo parece estar funcionando bien. Ese es el final de nuestra página de índice para nuestro sitio web bootstrap. Sólo tenemos unas cuantas páginas más que hacer, como el blog,
el contacto y la página. Gracias por escuchar te veré en el siguiente video.
11. Página de blog: HTML: Bienvenido de nuevo. Ya terminamos nuestra página de índice, nuestra plantilla Bootstrap. En estos próximos videos, vamos a estar creando las últimas páginas para terminar nuestra plantilla Bootstrap y luego podemos empezar a convertir a WordPress. En este video, vamos a estar empezando con la página del blog. Si echamos un vistazo al proyecto terminado, podemos tener una idea de lo que vamos a estar creando. Estaremos reutilizando la sección de encabezado y también la imagen de fondo. Pero estaremos cambiando el texto a Tranquil Spa Oficial Blog. Después desplazándonos hacia abajo, vamos a tener las entradas individuales del blog en el lado izquierdo. Pondremos tres de esos en nuestra plantilla. Tendremos algunos enlaces a publicaciones más antiguas y nuevas. En el lado derecho, tendremos una barra lateral. En la barra lateral se tendrá un poco de texto sobre la página web. Tendremos una página de archivos donde todas las publicaciones del blog se almacenarán por meses y año. También estaremos separando las entradas del blog en categorías, y luego si vamos un poco más abajo de la página, también
estaremos reutilizando la sección de pie de página. La mayor parte de la barra lateral solo serán enlaces vacíos por ahora. Estos se generarán dinámicamente en WordPress. Simplemente los estaremos agregando en Bootstrap como enlaces vacíos para obtener el aspecto y la sensación del sitio. Empecemos. Nos dirigiremos a nuestro editor de textos con nuestro proyecto. Entonces vamos a crear una nueva página y guardarla como blog.html, y hacer que eso se guarde en el mismo nivel que la página de índice. Entonces si entras a la página de índice que terminamos antes y seleccionamos todo y copiamos. Entonces podemos usar esto como punto de partida para nuestra página de blog y pegar eso en. Como mencioné antes, estaremos usando la misma sección de encabezado. Si nos desplazamos hacia abajo hasta el final de la etiqueta de cabecera de cierre, que está justo ahí, podemos empezar por eliminar la sección Bienvenida y eliminar sección
[inaudible] y seguir bajando hasta
el inicio de la sección de pie de página y luego eliminar eso. En esto [inaudible], acabamos de obtener la sección de encabezado y pie de página. Lo primero que voy a cambiar es el texto de la característica. Simplemente vamos a cambiar esto a Tranquil Spa Oficial Blog. Ahí vamos. Entonces vamos a usar una plantilla Bootstrap para nuestros blogs. Si nos dirigimos a getbootstrap.com, y luego seleccionamos la sección Introducción. Si nos desplazamos hacia abajo hasta las plantillas de Bootstrap, verás estas plantillas predeterminadas que Bootstrap proporciona. Debería haber uno llamado Blog. Por lo que seleccionamos el Blog. Vamos a estar seleccionando algunas de las partes de este sitio web para utilizarlas como plantilla. El bar lateral está en el lado derecho y también la publicación de blog a la izquierda. Esto va a crear un buen punto de partida para nuestro blog. Para obtener el código para esto necesitamos Control-click o hacer clic derecho. Ir a “Ver fuente de la página”. Vamos a copiar el código con la publicación del blog en la barra lateral. Si nos desplazamos un poco más hacia abajo. Tenemos que copiar el contenedor que está justo debajo del blog-masthead. Copiar el contenedor de apertura y luego bajar más allá de los postes. Tendremos que copiar todo el camino hasta la barra lateral. Está al final de la barra lateral, termina la fila, y el final del contenedor. Copia toda nuestra sección y luego vuelve al editor de texto entre el encabezado y la sección de pie de página, peguemos eso en. Para que las cosas sean un poco más claras, podemos agregar algunos comentarios. Añadamos el primer comentario a la barra lateral. Si buscas el final del blog y pegas esto justo debajo. Cambia una sección de barra lateral de entidad y luego desplázate hacia arriba. Después hasta la entrada de blog de apertura, que está justo encima del contenedor. Pega eso en. Esta puede ser la sección de blog. A continuación, echaremos un vistazo a cómo se ve eso hasta ahora y veremos qué cambios necesitamos hacer. Tenemos nuestra sección de encabezado, y luego tenemos la publicación de blog de muestra a la izquierda, en la barra lateral exactamente donde queríamos. Después tenemos la sección de pie de página en la parte inferior. De vuelta al editor de texto, solo
queremos quitar el encabezado del blog bootstrap en la parte superior. Hagámoslo ahora. Simplemente dejaremos el div completo con el encabezado del blog. Echemos un vistazo a eso. Ese es el rubro retirado. Por defecto en la plantilla Bootstrap que acabamos de copiar. Hay tres estilos diferentes de publicaciones de blog. Para mantener nuestra página web consistente, solo
voy a usar la tercera entrada del blog. Hemos vuelto a la sección de blog,
y cada entrada de blog individual tiene una clase de publicación de blog. Por lo que sabemos dónde comienza y termina cada bloque. Este es el primero. Quiero desplazarme hacia abajo hasta la etiqueta de cierre para la entrada del blog y eliminar esta. También voy a eliminar la segunda entrada del blog. Busca el div de cierre, para la publicación del blog, y selecciona eso y elimina. Ahora, nos acaban de quedar con la tercera y última entrada en el blog. Para volver a poner esto, queremos copiar el estilo y luego pegarlo de nuevo en dos veces a continuación. Vamos a revisar en el navegador. Ahora tenemos entradas de blog gratuitas de nuevo en nuestra página pero con un estilo consistente. Entonces a continuación cambiaremos el texto en la sección Acerca de a de la barra lateral. Desplázate hacia abajo hasta la sección de la barra lateral y si
localizamos la sección Acerca, solo podemos eliminar el texto de muestra entre las etiquetas P y pongamos nuestro propio texto en. Bienvenido al blog oficial Tranquil Spar. Después una segunda oración justo debajo, también en etiquetas P. Aquí encontrarás todas las últimas noticias sobre lo que está pasando aquí en el Spa. Esa es la sección Acerca de nosotros. Mantendrá los archivos tal como está por ahora y haremos que esto funcione dinámicamente en WordPress más adelante en el curso. El apartado Otros lugares, cambiémoslo a Categorías. Añadamos algunas categorías ahí por ahora. El primero se nos puede cambiar en noticias y luego ofrece y luego, por último, descategorizar. Entonces pondremos nuestra sección de redes sociales en. Si copiamos el módulo div de barra lateral y pegamos esto en justo debajo, podemos cambiar las categorías a Síguenos. Porque ya tenemos todos los enlaces de redes sociales en la sección de pie de página. Simplemente podemos volver a nuestra página de índice. Puede localizar los iconos de las redes sociales abajo en la parte inferior del pie de página. Si copiamos los cinco enlaces de redes sociales y luego los pegamos de nuevo en la sección de blog. Elimina los primero y pegarlos en. Entonces vamos a guardar eso y ver cómo se ve en el navegador. Eso es un [inaudible]. Tenemos el texto Sobre nosotros. Tenemos entonces los Archivos,
la sección Categoría, y la sección de redes sociales. Eso casi termina con el blog HTML. Tan solo una cosita más que me gustaría cambiar es si vamos al contenedor para el blog. Algo que me gustaría cambiar por el número de columnas en el blog en la barra lateral. Por defecto, Bootstrap tiene la sección de blog ocupando ocho partes en los dispositivos más pequeños. Me gustaría que el nuestro tuviera 12 columnas de ancho, dispositivos
más pequeños, y luego cambiara a ocho en dispositivos medianos. Entonces también tenemos que bajar a la sección de la barra lateral y hacer lo mismo para la envoltura de la barra lateral. Para hacer que la barra lateral vaya de ancho completo en dispositivos más pequeños, podemos cambiar eso a 12 columnas y luego cambiarlo a col-md-3. Para tomar las tres columnas en dispositivos medianos. Entonces porque cambiamos eso a medio, también
cambiaremos el offset en los dispositivos medios a uno. Así como un poco de distancia entre la publicación del blog en la barra lateral y luego guarde eso. Eso acaba de terminar para el HTML para la sección de blog. Si te unes a mí en el siguiente video, seguiremos con nuestra página de blog agregando el CSS.
12. Página de blog: CSS: Entonces tenemos nuestra página de blog todo en su lugar ahora. Entonces ahora hagamos que se parezca un poco más al proyecto terminado agregando el CSS. Por lo que necesitamos agregar una imagen dividida debajo del título del blog para cada publicación. También estaremos agregando el esquema para cada una de las publicaciones individuales en la barra lateral. Ahora, también estaremos agregando algunos márgenes y paddings para que se vea un poco mejor. Entonces empecemos con el título de la entrada del blog. Tenemos que hacer que eso se vea un poco mejor y también en la imagen justo debajo. Entonces la forma en que hacemos eso, si nos fijamos en cada puesto individual, el encabezado de nivel 2 tiene una clase de blog-post-título. Entonces, vayamos a nuestra sección CSS. Por lo tanto, empecemos con nuestra sección de blog justo debajo de la sección Mantener en contacto. Entonces copiaré el comentario y pegaré eso. Llamaremos a esto la sección Blog. Entonces comenzaremos con el blog-post-título. Por lo que para obtener la imagen de fondo justo por debajo del encabezado de nivel 2, podemos agregar la url de fondo. Entonces entre paréntesis, vamos a poner el camino a nuestro divisor morado que hemos utilizado en la página de índice. Entonces usamos punto punto. Entonces en la carpeta Imágenes, deberíamos tener el divisor purple.png. Después para establecer la posición, vamos a agregar centro y con la barra lateral, y luego configurar la imagen para que no se repita. Entonces echemos un vistazo a eso. Entonces tenemos una imagen ahora, pero se está extendiendo todo el ancho del encabezado nivel 2. Por lo que necesitamos cambiar el posicionamiento. Entonces, en primer lugar, estableceremos la altura para que sea 80 píxeles y esta es la altura del div completo. Por lo que a continuación, podemos establecer el tamaño de la imagen y podemos hacerlo en tamaño de fondo. Por lo tanto, establece el tamaño de fondo para que sea de 300 píxeles de ancho y 40 píxeles de alto. Echemos un vistazo. Entonces se ve un poco mejor, pero sigue superponiendo el texto. Entonces movamos la posición de fondo. Entonces, primero que nada, estableceremos la posición x para que sea centro y luego la y,
pondremos eso en 35 píxeles. Debería empujar un poco la imagen hacia abajo. Ahí vamos. Por lo que ahora, la imagen está clara del rumbo de nivel 2. Entonces a continuación, solo voy a agregar un poco de margen en la parte inferior del div solo para alejar el texto. Por lo que estableceremos el margen inferior de 30 píxeles. Entonces a continuación, vamos a añadir el contorno a la publicación. Entonces si miras el sitio web terminado, cada entrada individual de blog tiene el contorno de un píxel con las esquinas redondeadas. Entonces hagámoslo ahora. Entonces si echamos un vistazo atrás en el blog.html, se
puede ver que cada entrada de blog individual tiene una clase de entrada de blog. Entonces copiemos eso y peguemos eso. Entonces, antes que nada, vamos a sumar la frontera. Esa va a ser una línea sólida de un píxel y el color va a ser 494646. Vamos a conseguir las esquinas redondeadas, vamos a añadir el radio de borde de 10 píxeles. Entonces a continuación, vamos a sumar algún margen. Por lo que para asegurarnos de que las entradas del blog tengan algún espaciado en la parte superior e inferior, podemos agregar un margen de 30 píxeles en la parte superior e inferior y cero en la izquierda y la derecha. Entonces un poco de relleno justo dentro del div de 20 pixels. A ver cómo se ve eso. Entonces ahora se ve mucho mejor. Por lo que a continuación, pasaremos a la barra lateral. Haré que los módulos de barra lateral se parezcan un poco más a las entradas del blog. Entonces, antes que nada, vamos a copiar el comentario. Esta puede ser la barra lateral del blog. Entonces para darle estilo a la barra lateral, podemos usar la clase de módulo de
barra lateral porque
vamos a estar usando el mismo estilo de frontera que acabamos de usar en la entrada del blog. Podemos simplemente copiar ese CSS y pegar eso ahí dentro. Echemos un vistazo. Ahí vamos. Por lo que ahora los módulos de la barra lateral, ahora coinciden con el estilo de las entradas del blog. Eso es todo por este video, gracias por verlo y nos
vemos en el siguiente video donde estaremos creando la página Sobre muro.
13. Página sobre nosotros: Pasando desde la página del blog que terminamos en el último video. En este video vamos a estar creando la página About Us la cual va a ser bastante sencilla. Se va a reutilizar el encabezado y la sección de pie de página de videos anteriores. Vamos a tener una imagen bastante consistente de nivel dos encabezamiento y dividir. Lo colocaremos en algún texto de Lorem Ipsum, cual puedes cambiar por el texto que quieras. Entonces también tendremos los enlaces que utilizamos en
la página de inicio a diversas partes del sitio web. Después la sección Pie de página en la parte inferior. Entonces vamos a pasar a nuestro editor de textos y vamos a copiar la página de índice. Por lo tanto Seleccione Todo y Copiar. Después comando y N o Control N para hacer una nueva página. Pegue eso en y guarde esto como about.html, nuevamente en el mismo nivel que la página de índice y guarde eso. Por lo que desde la parte inferior de la página podemos mantener la sección Pie de página. Esto va a ser lo mismo que la página de índice. Podemos quitar la sección Tienda Online. No necesitamos eso. También podemos quitar la sección Últimas Ofertas. Podemos quedarnos con la sección Instalaciones. Estos van a ser nuestros cuatro enlaces de imagen. De hecho, podemos quedarnos con toda la sección Bienvenida. Podemos simplemente reutilizar el encabezado nivel dos y la imagen. Por lo tanto, empecemos cambiando el nombre de la sección Bienvenido a la sección Acerca de nosotros. Pero asegúrate de cambiar el id de la sección a sobre. Por lo que podemos mantener la misma fila de contenedores en el mismo número de columnas y cambiar el encabezado de nivel dos a Acerca de Nosotros. Puedo quedarme con la imagen morada. Entonces veamos cómo se ve eso. Eso está bien. Por ahora podemos resolver los problemas de alineación en CSS pronto. Por lo que a continuación queremos agregar algunos párrafos de texto. Entonces si pasamos a Google y hacemos una búsqueda de Lorem Ipsum, hago click en el primer enlace y podemos usar esta página, para obtener algún texto de muestra. Por lo que sólo voy a generar dos párrafos. Seleccione por ahora el primer párrafo y cópielo. Después de la clase y la etiqueta de fila para el encabezado de nivel dos, voy a crear una fila más. Entonces el div con la clase de fila. En el primer párrafo, crearé algunas etiquetas P. Después pega en el párrafo. Entonces justo debajo de esto crearemos otro párrafo. Después vuelve al texto de muestra y copia el segundo párrafo y pega esto. Comprobemos eso en el navegador. Ahí vamos. Por lo que a continuación nos dirigiremos a nuestro CSS personalizado. Entonces para empezar, queremos agregar algo de relleno en la parte inferior de la página solo para separar esta sección del pie de página,
el texto del enlace está todo fuera de lugar, por lo que estableceremos el text-align para que sea centro. También crearemos un poco de margen en la parte superior e inferior de los párrafos. Entonces si nos dirigimos de nuevo a nuestro custom.css, entonces crea una sección Acerca de Nosotros. Por lo tanto, dale a esta sección un id de aproximadamente. Entonces comencemos agregando el relleno en la parte inferior del div. Voy a buscar píxeles y luego text-align para ser centro. Echemos un vistazo. Por lo que el text-align ha alineado el texto en el centro de la página. También se aseguró de que nuestra imagen dividida esté en el medio y también texto
del enlace de abajo está ahora 30 píxeles de margen de desconexión en la parte inferior del div. Entonces lo último que quiero hacer es agregar algún margen a la parte superior e inferior del texto. Entonces vamos a seleccionar el sobre id y luego las etiquetas p. Lo único que queremos hacer en esta p es agregar algún margen de 30 píxeles en la parte superior e inferior,
y cero en la izquierda y en la derecha. Entonces refresca. Ahí vamos. Entonces ese es el texto separado y terminó la página Acerca de Nosotros. Entonces gracias por ver. En el siguiente video crearemos la página final de nuestra plantilla Bootstrap, que va a ser la página Contacto.
14. Página de contacto - HTML: Así que bienvenido de nuevo. En este video, vamos a estar creando la página final de nuestra plantilla Bootstrap, que va a ser la página Contáctenos. Entonces así es como se va a ver. Por lo que tenemos la sección Contáctenos la cual tiene contenedores de dos-seis columnas. Entonces el del lado izquierdo será para los detalles de
la dirección y luego en el lado derecho, incrustaremos un iFrame de Google con una ubicación junto al lago y luego justo debajo de eso, agregaremos una sección para Send Us a Message, y esto abarcará todo el ancho de la página web. Cuando lleguemos a la sección de WordPress, esto será totalmente funcional. Entonces empecemos en nuestro editor de textos. Empecemos con la página Acerca, voy a copiar todo eso y luego usar esto como punto de partida para nuestra nueva página, y luego pegarlo en. Guardemos esto como contact.html. Esta página estará usando el mismo pie de página, por lo que mantenemos toda la sección de pie de página ahí dentro. Por ahora, podemos mantener la sección Acerca de qué, pero solo podemos cambiar esto a la sección Contáctenos y luego cambiar la sección id a Contacto. El encabezado de nivel dos se puede cambiar a Contacto y que mantendrá toda esta fila consistente con el resto de la página web, y la siguiente fila con el texto. Podemos eliminar todo el texto por ahora, no
necesitamos eso, pero podemos quedarnos con la fila y vamos a reutilizar eso. Entonces dentro de esta fila, estas van a ser las secciones de dos-seis columnas. El de la izquierda tendrá la Dirección, y la sección de la derecha tendrá el iFrame de Google Maps. Entonces, empecemos por crear dos nuevos divs con una clase de col-sm-6. Haré exactamente lo mismo para el iFrame de Google. Entonces, en primer lugar, comenzaremos en el div de la izquierda, que tendrá la información de Dirección. En primer lugar, vamos a añadir algo de CSS personalizado. Por lo que podemos agregar nuestra propia clase de Dirección y también, si echamos un vistazo a la página web terminada, se
puede ver que la dirección tiene la imagen de fondo más oscura y esto es de un pozo Bootstrap. Entonces agreguemos la clase de pozo y la dirección va a ser la misma que la sección de pie de página. Entonces si nos desplazamos hacia abajo hasta la parte inferior de la página y luego copiamos las etiquetas Address, y pegamos esto en el div de la izquierda y también es un icono Font Awesome, que está justo a la izquierda del nombre. Entonces agreguemos eso justo después de la etiqueta de dirección de apertura. Añadamos el ícono. Tiene etiqueta i con una clase de fa fa-map-marcador. Entonces, justo debajo de la Dirección, vamos a agregar alguna información de correo electrónico y teléfono. Por lo que tanto el correo electrónico como la sección telefónica tiene un ícono de Font Awesome. Entonces el primero es para el correo electrónico, y esta es una clase de fa fa-envelope-o, y luego justo después del ícono, podemos agregar el texto del correo electrónico. Sólo voy a poner correo genérico ahí, así que envía correo a mail.com y luego agrega una etiqueta de break en el segundo ícono. Esto para el teléfono. Por lo que esto tiene una clase de fa fa-phone y texto todo el teléfono. De nuevo, solo pondré ahí un número genérico. Entonces echemos un vistazo a eso, si volvemos al navegador y luego actualizamos. Entonces tenemos el div del lado izquierdo mostrando muy bien. Tan solo algo que cambiar en la sección Correo electrónico. Volveremos a subir. Entonces sólo tenemos unas cuantas cosas que necesitamos cambiar ahí, así que cambiaremos eso a un colon y luego un símbolo en, y ahí vamos. Por lo que a continuación, necesitamos crear el iFrame en el lado derecho. Entonces si vas a Google Maps, y si encuentras una bonita ubicación junto al lago, y entonces lo que tienes que hacer es dar click en el Menú y luego seleccionar Compartir o Insertar mapa y seleccionar la segunda pestaña que es Insertar Mapa y luego copiar el enlace que Google proporciona. Entonces, si entramos en nuestro segundo div, podemos pegar esto y veamos cómo se ve eso. Ahí vamos, así que eso está funcionando bien. Agregaremos algo de CSS en el siguiente video para esto, pero eso se ve bien por ahora. Entonces esa es esta fila terminada, así que a continuación nos moveremos hacia abajo y añadiremos la sección Envíanos un Mensaje. Entonces de nuevo en el editor de texto, y si localizamos el div con la clase de fila en instalaciones, ya no
necesitamos la clase de instalaciones, pero agregaremos nuestra propia clase de Área de Mensajes, y luego todo el contenido entre este fila de la que podemos deshacernos. Entonces si buscamos la clase en contenedor de fila, son todas las imágenes y todos los divs. Empecemos en la sección Mensaje. Entonces vamos a crear una sección de ancho completo. Le daremos al div una clase de col-sm-12 y luego anidado por dentro, también
añadiremos un div con una clase de pozo, por lo que eso destaca un poco más. Entonces dentro del pozo, vamos a crear la forma HTML. Vayamos al proyecto terminado y echemos un vistazo. Entonces para darle estilo, agregaremos el texto en la parte superior de Enviar un Mensaje, luego
añadiremos algunos form-grupos con las entradas para el nombre, correo electrónico y el área de texto del mensaje y luego añadiremos un botón Enviar a la parte inferior. Empecemos con el texto en la parte superior. Agregaremos algunas etiquetas p y luego el texto o Envíanos un Mensaje. Entonces justo debajo, agregaremos el primer div con la clase de form-group y esta es una clase Bootstrap que estaremos usando para rodear las entradas gratuitas. Entonces para empezar, agregaremos una entrada con un tipo de texto y una clase de form-control, que también es una clase Bootstrap. Después id de nombre de entradas y luego el texto de marcador de posición simplemente de nombre y cerrar. Por lo que a continuación vamos a añadir una etiqueta y esta etiqueta va a ser para los lectores de pantalla. Entonces démosle una clase de sronly. Para vincular esta etiqueta a la entrada dentro de la etiqueta de apertura, podemos agregar fall y luego coincidirla con el id de entrada de nombre de entradas. Entonces entre las etiquetas de etiqueta, podemos agregar el texto para aparecer de nombre. Entonces vamos a copiar este form-grupo y vamos a utilizar esto para la sección Email y luego pegarlo en abajo. Entonces dentro de este form-grupo, necesitamos cambiar la entrada para que sea input-email y el texto para que sea correo electrónico y luego dentro de las entradas, cambiaremos el nombre de entrada para que sea entrada-email y el texto de positor para que sea correo electrónico, y luego pega en el form-grupo una vez más. Entonces esta vez va a ser mensaje de entrada y el nombre del mensaje. En lugar de usar la entrada, podemos simplemente eliminar eso y esta vez porque va a ser un mensaje, podemos agregar un área de texto. Por lo que el área de texto tendrá la clase de form-control. El id de input-message, que es el mismo que la etiqueta, y el texto del placeholder va a ser igual a message, y luego el último atributo va a ser el número de filas que queremos que aparezcan como predeterminado. Por lo que voy a poner esto para que sea libre inicialmente. Después para cerrar la sección del área de texto y luego justo después del área de texto, lo último que quiero agregar es la entrada para el botón Enviar. Insumos, por lo que tenemos un tipo de presentación. Esto tendrá la clase familiar que hemos utilizado anteriormente de btn btn-default y esto tendrá los mismos estilos que hemos utilizado en los botones de la página de índice. Por último, el valor, que es el texto en el botón, será Enviar y luego cerrar y debo agregar algunos comentarios de cierre. Entonces justo encima de la fila, esta es la etiqueta de cierre para la sección de 12 columnas. Entonces justo por encima de eso, esto es para la clase de pozo,
así que vamos a guardar eso y echar un vistazo a esto en el navegador. Ahí vamos. Entonces ahí está nuestro formulario al final de la página. Entonces eso es todo el HTML que necesitamos para la página Contáctenos. Entonces únete a mí en el siguiente video y terminaremos la página de contacto agregando el CSS.
15. Página de contacto - CSS: Bienvenido al último video de esta sección de plantillas de Bootstrap. Hemos agregado el HTML para la página Contáctenos, continuación añadiremos el CSS para que se parezca un poco más al proyecto final. Por lo tanto, pasemos a nuestro CSS personalizado. Si copiamos los comentarios, y pegamos esto justo debajo de la sección Acerca de
Nosotros, vamos a llamar a esto la sección Contáctenos. Daremos a esta sección un DNI de contacto. Para empezar, voy a agregar algo de relleno en la parte inferior del div de 30 píxeles, solo para darle algo de espacio desde el pie de página. También agregaremos el text-align del centro, y esto asegurará que la imagen dividida esté en el medio de la página. Entonces a continuación empezaremos en el div de la izquierda. Entonces comencemos agregando un poco de estilo para la sección de direcciones. Si volvemos a la página de contacto, agregamos una clase de dirección personalizada. Esta clase rodeaba toda la sección de direcciones. Por lo que de nuevo en el CSS personalizado, podemos usar eso ahora. En primer lugar, nos aseguraremos de que el texto esté alineado a la izquierda. Agregaremos un poco de espacio en la parte superior, así que ese es un margen superior de 30 píxeles. Para hacer el font-size un poco más grande, solo
aumentamos el font-size para ser 1.2 ems. Para espaciar las líneas, vamos a establecer la altura de la línea para que sea 2 ems. Echemos un vistazo, y refresquemos. De acuerdo, entonces a continuación quiero cambiar el color de los iconos para que coincida con el resto de la página web. Dentro de la clase de direcciones, podríamos apuntar a los iconos con el I. Así que cambiemos el color de los iconos para que sean 97689c. Echemos un vistazo a eso. Está bien, bien. Eso ha cambiado el icono al color púrpura meñky. Eso está todo bien por ahora. Entonces lo siguiente que quiero hacer es igualar el margen de 30 píxeles para que el iframe esté alineado en la parte superior. Por ahora el iframe se estira un poco demasiado grande, por lo que vamos a añadir el ancho máximo de un 100 por ciento para mantener eso dentro del contenedor. Seleccionemos el ID de contacto y el iframe. Emparejemos el margen superior del div de la izquierda para que sea de 30 píxeles. Para que el iframe no se vuelva demasiado grande, estableceremos el ancho máximo para que sea del 100 por ciento. Ahorremos y echemos un vistazo a eso. Genial, por lo que se ve mucho mejor. Ahora tenemos los dos divs alineados desde la parte superior y además el iframe no se estira demasiado ancho. Entonces lo último que quiero cambiar es solo agregar un poco de relleno o margen en la parte superior de la sección de mensajes, para que mantenga eso consistente con el resto de la página web. Estableceremos que sea de 30 píxeles. Por lo que le daremos a esta sección una clase personalizada de área de mensajes. Solo necesitamos agregar algún margen en la parte superior de 30 píxeles y refrescar. Gran sitio, se ve bien en la vista de escritorio. Si simplemente reducimos el navegador hasta la vista móvil, no
hay mucho que realmente tengamos que hacer, solo
hay una cosa que quiero cambiar. Tenemos que agregar la línea de texto para ser el centro en la vista móvil. Por lo que podemos hacer eso abajo en la consulta de medios. Debido a que también tenemos la clase de pie de página del centro text-align, podríamos simplemente agregar esto al final. Para que podamos agregar nuestra clase de dirección, y guardar y echar un vistazo a eso. Genial. Entonces ahí vamos. Por lo que se ve mucho mejor. Ahora ese es el acabado de plantilla Bootstrap para nuestros proyectos, y ese es el final de esta sección. Entonces gracias por escuchar. Si te unes a mí en la siguiente sección, podemos empezar por convertir nuestra plantilla Bootstrap a WordPress.
16. Configuración de Localhost e instalación de WordPress: Bienvenido de nuevo a esta nueva sección cuando me meto en la parte emocionante del curso donde
vamos a empezar a convertir nuestra plantilla Bootstrap a un tema de WordPress. Justo antes de empezar, [inaudible] necesitaremos descargar un servidor web en nuestra máquina. Para desarrollar sitios web de WordPress en nuestra máquina localmente, necesitamos instalar un servidor web. Si te diriges a MAMP, M-A-M-P, .info, y una compilación para instalar la última versión de MAMP. Si solo hace clic en el botón de descarga, esto está disponible de forma gratuita tanto en Mac como en Windows. Haga clic en el botón de descarga para empezar y luego descargue allí la última versión. Hasta ahora, hemos estado construyendo nuestro sitio web en Bootstrap, que incluye HTML, CSS, y JavaScript, todos los cuales se ejecutan en el navegador. No necesitamos herramientas especiales para que el sitio web aparezca en el navegador. Pero debido a que estamos usando WordPress y WordPress está construido usando PHP y utiliza una base de datos MySQL, necesitamos instalar MAMP para crear un servidor local en nuestra máquina. Esto nos permitirá construir sitios web de WordPress sin tenerlos en vivo en internet. Basta con pausar el video un minuto mientras eso se está descargando y nos vemos en un minuto. Bienvenido de nuevo. Esperemos que ahora tengas MAMP descargado. Si solo nos dirigimos a nuestras descargas y hacemos doble clic en el instalador, esto debería llevarte a través del proceso de instalación. Debería ser bastante similar tanto en Mac como en Windows. Debería obtener el script de instalación. Si tan solo continuamos y aceptamos la licencia y el acuerdo. Entonces vamos a instalar para todos los usuarios en este equipo. Después haga clic en instalar, y no debería tardar demasiado en instalarse, así que solo le damos un momento para terminar de instalar. Tenemos un MAMP y el MAMP Pro se ha instalado con éxito. Solo vamos a estar usando la versión gratuita de MAMP. Eso es todo lo que vas a necesitar para este curso, no
necesitamos pagar la versión pro. Una vez que eso haya terminado de instalar, basta con dar click en cerrar. Ahora tenemos instalado MAMP. Si estás usando un Mac, si vas a las aplicaciones, se debe guardar ahí dentro. Si estás usando una máquina Windows, debe almacenarse en tu ubicación habitual como la C Drive. Si sólo pasamos al MAMP y hacemos doble clic en el MAMP con el icono del elefante. Entonces deberías conseguir una ventana que se vea así. Si entramos en las preferencias y luego hacemos clic en la pestaña de puertos, los puertos Apache, que es el servidor web se utilizan en el puerto 8888. Entonces si hace clic en el servidor web. Por defecto, la ruta para la raíz del documento debe ser la htdocs. Si no lo es, basta con dar click en la carpeta. Entonces, una vez que estés en la carpeta, si solo encuentras el camino a la unidad donde está instalado el MAMP. Entonces si bajamos a buscar a MAMP y luego abrimos. Entonces si buscas la carpeta htdocs, entonces selecciona eso. Cualquier sitio web para el que vamos a estar usando PHP, necesitamos poner la carpeta del proyecto en los htdocs, pero lo haremos en tan solo un poco. Si empezamos haciendo clic en iniciar servidores y ojalá si todo está bien, deberías obtener la página de inicio la cual te dice que MAMP se ha instalado con éxito. Está bien, genial. Ahora está instalado MAMP. Si nos dirigimos a Google y si buscas WordPress. Entonces, una vez que eso sea buscado, necesitamos ir a wordpress.org. Si quieres echar un vistazo a la página de inicio de WordPress, siéntete libre de hacerlo. Pero solo voy a dar clic en descargar WordPress y luego descargar la última versión, que actualmente es 4.3. WordPress no toma mucho tiempo en instalarse. Solo toma unos 10-15 segundos si tienes buena conexión a internet. Una vez que eso esté descargado, podemos simplemente deshacernos de eso y luego dirigirnos a las descargas y luego hacer clic en el archivo zip de WordPress y descomprimir eso. Ahora, esta es nuestra nueva carpeta de proyectos para nuestra página web. Voy a renombrar este tranquil-wp. Sólo para que no haya confusión, la carpeta original de Bootstrap, voy a cambiar esto a tranquil-bs. Entonces necesitamos mover esto a nuestros htdocs. Yo sólo voy a abrir una nueva ventana. Entonces voy a encontrar los htdocs. Si volvemos a la carpeta MAMP y luego a htdocs, y luego arrastramos a htdocs la carpeta WordPress. Ahora tenemos WordPress instalado en nuestra raíz de documentos o en los htdocs. Si volvemos al MAMP y luego hacemos clic en la página de inicio abierta, esto debería llevarnos de vuelta a la pantalla de bienvenida del MAMP. Entonces, si da clic en las herramientas en la parte superior y da clic en phpMyAdmin. Esto debería llevarnos al área de administración para crear bases de datos. Necesitamos crear una nueva base de datos para WordPress. De la forma en que hacemos eso, si seleccionamos la pestaña de bases en la parte superior y luego bajo crear base de datos, voy a poner ahí el nombre de nuestra base de datos. Voy a llamar a mina tranquil-spa, y luego dar click en crear. Después abajo a la izquierda, deberíamos conseguir que la base de datos tranquil-spa aparezca en la lista. Entonces a continuación crearemos un usuario para esa base de datos. Entonces si vamos a las pestañas en la parte superior de la página y hacemos clic en privilegios y luego seleccionaremos al nuevo usuario, o agregaremos usuario, que está en la parte inferior. Entonces podemos ingresar la información del usuario. El nombre de usuario nos dará el campo de texto. Voy a llamar a mi usuario spa-admin. Entonces para el anfitrión, queremos seleccionar local. Entonces puedes teclear la contraseña de tu elección o puedes generar una contraseña. Asegúrate de que si generas una contraseña la copia. Usaremos eso solo en un momento, y luego desplázate hacia abajo por la página y pega go go. Ahí está nuestro usuario spa-admin creado. Entonces ahora tenemos que volver a WordPress y decirle a WordPress información de
la base de datos y la información del usuario que acabamos de crear. Cerraremos el navegador por ahora y luego abriremos tu editor de texto. Entonces si volvemos a los htdocs donde hemos guardado nuestra carpeta tranquil-wp. Si solo arrastras eso al editor de texto. Está configurada la base de datos de WordPress. Si entramos en la carpeta WordPress y seleccionamos wp-config-sample. Entonces podemos ingresar la información de nuestra base de datos. Desplácese hasta el nombre de la base de datos. Entonces puedes ver solo necesitamos incluir aquí el nombre de nuestra base de datos. Elimina eso. Llamamos a nuestra base de datos tranquil-spa, tan tranquil-spa. Entonces debajo del nombre de la base de datos, podemos incluir el nombre de usuario. Elimina el nombre de usuario aquí. Llamamos a nuestro usuario spa-admin. Pon spa-admin o el nombre que hayas creado. El password, que debiste haber copiado en el portapapeles. Podemos pegar eso en. Utilizamos el localhost, por lo que podemos simplemente dejar el host tal como está. Entonces a continuación, necesitamos generar las claves sobre sales para la autenticación. Dónde está el enlace de la página web, que acabamos de copiar esto. Después dirígete a tu navegador web y pega eso. Esto debería generar las claves que son únicas. Selecciona todo en la página y copia. Después reemplaza estos por los que acabamos de copiar. Pega esos en. Entonces lo último que necesitamos hacer dentro de este archivo es desplazarnos hacia abajo hasta la parte inferior de la página. Podemos cambiar el prefijo de tabla de base de datos desde el WP estándar. Voy a cambiar la mía a tranquildb. Esto puede ser lo que quieras, realmente no importa. Guarda eso. Entonces lo último que necesitamos hacer para este archivo es eliminar la palabra de muestra. Necesitamos cambiarle el nombre wp-config.php. Asegúrate de que eso esté guardado. Si recuerdas cuando descargamos MAMP por primera vez, entramos dentro de las preferencias en los puertos. Si recuerdas que el puerto era 8888. Podemos usar esto para entrar en nuestro navegador web. Si entras al navegador web y luego tecleas localhost, y luego un dos puntos, y luego 8888 y luego entras, esto debería darte un índice de todo el sitio web que se almacena dentro de los htdocs. Por ahora, sólo tenemos el tranquil-spa. Si hacemos clic en eso, y ojalá si todo te ha ido bien,
puedes conseguir el script de instalación de WordPress. Es realmente sencillo de seguir. En primer lugar, necesitamos seleccionar nuestro idioma, que el mío es inglés, Reino Unido y luego seleccionar continuar. Entonces solo necesitamos un poco de información sobre el sitio. El título del sitio va a ser Tranquil Spa. Ya tengo mi nombre de usuario guardado como tranquil_admin y luego creo una contraseña. Ten en cuenta que esta contraseña va a ser diferente a tu base de datos. Esto va a ser para iniciar sesión en el administrador de WordPress. Crea una contraseña segura de tu elección. Después escribe un correo electrónico y luego privacidad, podemos desmarcar esto por ahora. Podemos cambiar eso más adelante en la configuración una vez que hayamos terminado el sitio web y luego hacer clic en instalar WordPress. Ahí vamos, inicia WordPress instalado. Así de rápido y fácil es iniciar WordPress en tu máquina. Si solo vas a iniciar sesión y nosotros [inaudible] para ir al panel de control. Ponga nombre de usuario y contraseña en, y nos han llevado al panel de WordPress. Si quieres ver cómo se ve
el sitio web de WordPress hasta ahora usando el tema predeterminado, solo
podemos hacer clic en el icono de casa Tranquil Spa en la parte superior. Este es nuestro sitio web, y este es sólo el tema estándar que viene con WordPress. Ahí vamos, eso es WordPress ahora instalado. Gracias por verlo, y nos vemos en el siguiente video donde
empezaremos a importar nuestros archivos Bootstrap a WordPress.
17. Carpeta de temas de WordPress: Está bien. Ahora tenemos nuestro anfitrión local y WordPress todo instalado. Ahora vamos a llegar a trabajar sobre la importancia de las carpetas bootstrap en nuestro tema personalizado. Si volvemos a la carpeta MAMP y luego bajo los docs HT, podemos encontrar nuestra carpeta tranquilwp. Abre esto. Estos son todos los archivos y carpetas que se incluyen con WordPress por defecto. La mayor parte del trabajo que estaremos haciendo para el tema personalizado será dentro de WP Content y luego dentro de la carpeta de temas. Dentro de la carpeta de temas, están los temas predeterminados estándar que se incluyen con WordPress. 2015 es el más actual. Esa es una que vemos cuando abrimos nuestra página web antes. Dentro de la carpeta de temas, empecemos con nuestro tema personalizado. Si vas a carpeta nueva, voy a llamar a esto tranquilwp. Si abrimos la carpeta tranquilwp y también nuestra carpeta bootstrap, podemos empezar a poner algunas de las carpetas en nuestro tema personalizado. Solo voy a seleccionar todos los archivos por ahora y copiarlos, y luego pegarlos en nuestra carpeta. No necesitamos del blog ni de la página de contacto solo por ahora. Yo sólo voy a deshacerme de esos. El índice de la página, necesitamos cambiar esto a index.php para que WordPress lo reconozca. Utilizamos una extensión PHP allí. Necesitamos mantener las imágenes, el JavaScript, el CSS en la carpeta de fuentes. Pero dentro de la carpeta CSS, necesitamos mover nuestro
archivo CSS personalizado y tendremos que moverlo para estar al mismo nivel que nuestra página de índice. Si seleccionamos el CSS personalizado, y se movió hacia atrás un nivel, y con la página de índice en las carpetas, porque ahí es donde WordPress requiere que esté el CSS. Además, requiere style.css, en lugar de la costumbre. Cambiaremos eso a style.css. Además de ser nuestra hoja de estilo personalizada en nuestro style.css, también
podemos incluir alguna información importante de WordPress sobre nuestro tema. Si volvemos a nuestro editor de texto, es posible que debas refrescarte porque hemos cambiado algunos de los archivos y carpetas. En el tranquilwp, si vamos a contenido,
temas, y luego tranquilwp, podemos entonces encontrar la hoja de estilo que acabamos de renombrar. Justo en la parte superior de la página, si solo
hacemos algo de espacio, necesitamos volver al navegador web. Entonces dirígete a Google. Yo sólo voy a hacer una búsqueda. Si buscas códice,
el códice es básicamente la documentación de WordPress. Estamos usando eso bastante en esta sección, para encontrar mucha información como funciones PHP. Por ahora, si solo buscas las hojas de estilo del tema del códice, entonces es un enlace superior que necesitamos, pero si solo haces clic en el salto a la hoja de estilo del tema, y esto saltará a la parte de la página que necesitamos. Bajo el encabezado de la hoja de estilos temática, WordPress nos da una muestra
del comentario que necesita incluir en la parte superior del style.css. Copiemos esa muestra, y luego la peguemos en la parte superior de nuestra hoja de estilo. Deshaznos de esta barra lateral y podemos empezar a editar la información. Justo en la parte superior, bajo el nombre del tema, vamos a poner nuestro nombre del tema que es tranquilo WP. Entonces el sitio web temático. Puedes meter ahí lo que quieras por ahora. Solo quieres poner algo genérico ahí por ahora. tranquilspatheme.com. En el autor, pones tu nombre en o el nombre de tu empresa. Si tienes un sitio web, también puedes ponerlo ahí dentro. Entonces puedes poner en una descripción para el tema. Sólo voy a poner en un tema de spa WordPress totalmente sensible, construido usando Bootstrap 3. Ahí vamos. El versión, podemos salir a 1.0, y la licencia podemos dejar. Vamos a cambiar algunas de las etiquetas. Ahora, ten en cuenta que las etiquetas que se pusieron en la hoja de estilo, no
podemos simplemente poner en cualquier etiqueta que elijamos. Tienen que ser etiquetas aprobadas por WordPress, que puedes encontrar en el códice. Por ahora, sólo voy a añadir la barra lateral derecha. Después éstos se separan por comas. Diseños adaptativos, encabezado
personalizado, y menú personalizado, imágenes destacadas. Entonces al final, la traducción realmente. Ahora, algunos de estos, puede que no entiendas lo que son, pero a medida que pasemos por el curso, entenderás cada vez más de lo que es cada uno de estos. Estaremos agregando cosas como imágenes destacadas y estamos preparando el tema para que las personas traduzcan a diferentes idiomas si así lo desean. El dominio de texto, vamos a hacer que sea igual nuestro nombre de tema. Eso va a ser tranquilizwp. Lo usaremos más adelante en este curso cuando estemos preparando el tema para la traducción. Podemos eliminar la información en la parte inferior. Ahí vamos. Eso es todo lo que necesitamos incluir en la hoja de estilo por ahora. Guarda eso. Si volvemos a nuestra carpeta temática, que está en los docs HT, entonces ábrela, y luego vamos, de nuevo, a contenido de WordPress, temas, y tranquilwp. Lo último que tenemos que hacer antes de activar nuestro tema en WordPress es, si vamos a la carpeta de imágenes en nuestro tema personalizado, si
localizamos el screenshot.png, necesitamos mover esto hacia arriba un nivel hacia el mismo ya que trasladamos nuestra hoja de estilo a antes. Entonces si vamos a nuestro navegador web, y luego de vuelta a nuestro panel de WordPress. Si vamos al Tranquil Spa en la esquina y pasamos el cursor sobre, y luego pinchamos en el tablero. Básicamente, el tablero es realmente sencillo de usar. el lado izquierdo, tenemos una lista de todos los enlaces donde podemos agregar varios posts, páginas. Podemos cambiar cosas como los temas. Si bajas a la apariencia y seleccionas temas, así como puedes ver, activo es el tema 2015, pero queremos usar el tema Tranquil Spa que acabamos de crear. Si todo va bien, deberías ver tu tema apareciendo en esta página, y luego dar click en Activar. Ahí vamos. Ahora si hacemos clic en el icono de Inicio en la parte superior izquierda, en el Sitio de Visita, ojalá, que todo te haya ido bien, y tu tema ahora debería estar activado. Como puedes ver, todo está funcionando, pero aún queda mucho trabajo por hacer para que
se vea como nuestra plantilla Bootstrap. Empecemos agregando algunas de las carpetas que necesitamos. De vuelta a nuestra carpeta temática, en los docs HT, una cosa que tal vez quieras hacer es configurar un atajo en tu escritorio, o si estás usando un MAC, puedes agregar una de las etiquetas de color para que no tengas que ir a través del proceso de encontrar cada vez. MAMP, y luego los documentos HT, tranquilwp, contenido, temas, y luego tranquilwp. Para esta carpeta tranquila, solo
voy a crear la etiqueta azul, así que solo puedo seleccionar el azul y encontrarlo mucho más rápido. Si estás usando una máquina Windows, tal vez
quieras guardar un atajo en tu escritorio. Tenemos que añadir algunos archivos básicos más a nuestra carpeta. Si pasamos a corchetes y sacamos la barra lateral, voy a presionar Command y N para crear una nueva página. La primera página que necesitamos agregar es el header.php. Simplemente guarda eso como header.php, y asegúrate de que eso esté incluido en nuestro tema personalizado, junto con la página de índice. Eso lo guardaremos por ahora, y luego otra página nueva. Guarde esto como footer.php. Después sólo dos más para crear. El siguiente va a ser para la barra lateral, y vamos a guardar el sidebar.php. Esta vez voy a usar un atajo, y guardarlo con la página de índice. Entonces, por último, el último archivo que vamos a guardar es para las funciones, así que una nueva página y guárdala como functions.php. De nuevo, asegurándose de que esté en la ubicación correcta. Eso es todo por ahora. Te veré en el siguiente video.
18. Página del índice: Está bien. Bienvenido de nuevo. En este video, vamos a estar mirando la página de índice y vamos a
empezar a reorganizar el encabezado y el pie de página, y además añadir algún contenido a nuestro archivo de funciones. Está bien. Entonces un par de cosas antes de que empecemos. Si te aseguras de que el MAMP, que descargaste en el último video esté en funcionamiento. Entonces si dices iniciar servidores, asegúrate de hacer clic en ellos para empezar eso. Entonces en tu editor de texto, si abres el tranquilwp, que es la carpeta temática para el proyecto, y luego dirígete a tu navegador web, y luego si escribes el host local ,:8888 y luego forward slash tranquil-wp, y esto nos llevará a la página de índice en la que necesitamos empezar a trabajar. Si necesitas volver al panel de WordPress, solo
tenemos que añadir /admin al final de la URL, y eso nos llevará de vuelta al panel. Está bien. Entonces, empecemos. En el editor de texto, creamos nuestros archivos de encabezado y pie de página en el último video. Entonces vamos a poner tanto el encabezado como el pie de página en estos archivos. Entonces vamos a sacar el encabezado y el pie de página de la página de índice. Entonces si vas al index.php y luego te desplazas a la parte superior de la página, necesitamos copiar o citar todo el contenido desde la parte superior de la página web, todo el camino hacia abajo hasta llegar a la etiqueta de cabecera de cierre, que está justo ahí. Entonces copia todo eso derecho a la parte superior y luego corta eso, y ahora la sección de encabezado va a entrar en su propio archivo, que es el header.php. Entonces pega eso ahí y guarde, y luego si volvemos a la página de índice, haremos exactamente lo mismo con la sección de pie de página. Así que desplázate hacia abajo hasta la parte inferior de la página y luego debajo de la sección online de la tienda, si buscas el comentario del pie de página, y luego corta todo el contenido hasta el final de la página del índice. Así que corta eso, y luego dirígete al footer.php, y pega eso y guarda. Está bien. Entonces si volvemos al index.php. Entonces lo que nos queda es sólo el contenido principal de la página web. Hemos sacado el encabezado y la sección de pie de página. Entonces porque ahora el encabezado y el pie de página están en sus propios archivos, necesitamos vincular esos de nuevo a la página de índice. No del todo sencillo de hacer. Si volvemos a la parte superior donde estaba la sección de encabezado, vamos a empezar a usar algo de PHP. Entonces para empezar con PHP, primero que nada necesitamos tener el nombre del archivo con la extensión PHP, y luego para usar PHP en la página, usamos un corchete de ángulo de apertura y luego un signo de interrogación, y luego PHP. Entonces esta es la etiqueta de apertura y la etiqueta de cierre es el signo de interrogación y luego el corchete de ángulo de cierre. Está bien. Entonces entre el corchete de apertura y cierre, usamos la función de cabecera get de WordPress. Entonces get_header. Porque es función, usamos los corchetes rizados y luego un punto y coma al final, y luego hacemos exactamente lo mismo pero usamos get footer en la parte inferior de la página. Entonces de nuevo, usaremos las etiquetas PHP de apertura y cierre, y luego dentro de las etiquetas, usamos una función de WordPress get footer, los corchetes, y luego el punto y coma. Entonces efectivamente lo que hemos creado es un encabezado y una plantilla de pie de página, y cada vez que queremos reutilizar estos en WordPress, lugar de volver a escribir sobre el mismo código una y otra vez, simplemente
podemos usar el PHP y usar el encabezado get o la función get footer. Entonces y guardar la página de índice, y luego a continuación tenemos que ir a nuestro functions.php, y como todas las funciones van a estar en PHP, necesitamos asegurarnos de que todo el contenido de
esta página esté entre la apertura y cerrando etiquetas PHP. Entonces empecemos por crear una función PHP. Si no has usado PHP antes, utiliza la palabra clave function. Una función es básicamente solo un trozo de código al que le damos un nombre, y podemos llamarla cuando lo necesitemos. Entonces para configurar esto, use la función y luego el nombre después, que es tranquilwp_setup, y luego al final del nombre de la función usamos los corchetes rizados, y luego usamos un conjunto de llaves, y toda la información que ponemos entre las llaves va a ser el código que se ejecuta cuando se configura el tema. Entonces agregaremos más a esto más adelante, pero por ahora solo vamos a agregar algún soporte temático para RSS o presentaciones automáticas. Entonces lo hacemos por add_theme_support, y entre las comillas, escribimos automático-feed-links, y luego un punto y coma al final, y aseguramos que ese es el feed ahí. Por lo tanto, asegúrate de que la información RSS llegue a la sección de cabecera correctamente. Vamos a agregar soporte de tema también para la etiqueta de título, y esto permite que tanto temas como plug-ins accedan al título del documento, que podamos cambiarlo dinámicamente. Entonces add_theme_support, y no olvides las citas ahí dentro. Esta va a ser la etiqueta del título. Entonces título-etiqueta. Entonces a continuación tenemos que decirle a WordPress que ejecute esta función al configurar el tema. Entonces si salimos fuera de las llaves y luego necesitamos agregar una acción y el corchete, y luego el punto y coma al final. Esto va a tomar dos parámetros. Entonces el primero de las comillas es después de _setup_theme, y luego separado por una coma, necesitamos poner el nombre de la función, que es configuración tranquilwp. Entonces vamos a copiar eso y pegar eso entre las cotizaciones. Tan solo una pieza más de PHP que necesitamos agregar al archivo de funciones antes de seguir adelante, es si subimos hasta la cima. Está bien. Entonces vamos a usar una declaración PHP if. Entonces si no has visto uno de estos antes, realmente no
es nada de qué preocuparse. Entonces solo empezaré tecleando y luego hablaremos de lo que está pasando exactamente. Entonces solo vamos a comprobar si se cumple una condición, y si lo es, ejecutamos la pieza de código entre estas llaves. Entonces la pieza de código que queremos ejecutar es
que queremos agregar una variable llamada el ancho del contenido, y esto se va a establecer en 660 píxeles. Este valor va a controlar el ancho máximo de cualquier pieza de contenido que esté en el tema de WordPress, y lo usamos para asegurarnos de que el usuario no pueda subir algo como una imagen que es demasiado grande para el diseño y causa problemas de diseño, y luego pondremos nuestra condición entre los corchetes en la parte superior. Entonces voy a usar el signo de exclamación y luego isset y luego entre dos corchetes más rizados, vamos a poner nuestra variable que es el ancho de contenido. Entonces esta sentencia if verificaría normalmente si esta variable existe mediante el uso de isset, pero como estamos usando el signo de exclamación antes de
él, está comprobando lo contrario. Entonces, si no se establece el ancho de contenido variable, entonces use la variable entre estas llaves y asegúrese de que el contenido no sea mayor que 660 píxeles de ancho. Está bien. Entonces esas son las funciones terminadas para este video. Vamos a añadir más a esto a medida que avancemos por el curso, pero solo una cosa más quiero mostrarles antes de terminar este video es ahora volvamos a nuestro PHP a nuestra página web. Tenemos que asegurarnos de que la depuración esté habilitada, y solo te mostraré exactamente por qué. Si vamos a Chrome, y luego vamos a visitar el sitio, así es como se ve ahora el sitio, no
se ve muy bonito, pero está funcionando. Entonces si pasamos a nuestra página de índice y luego cometemos un error tipográfico, entonces por ejemplo si vamos al PHP en la parte superior de la página, y por ejemplo, si no estuviéramos poniendo la etiqueta de cierre después del PHP, y luego si actualizamos el navegador, se puede ver que obtenemos una pantalla blanca. Entonces porque tenemos una pantalla blanca en blanco, sabemos que hemos cometido un error en alguna parte, pero no tenemos ninguna indicación que nos muestre exactamente dónde nos hemos equivocado. Entonces para darnos una indicación de exactamente en qué línea de código nos hemos equivocado, necesitamos ir a nuestra carpeta WordPress, que está en los htdocs. Entonces encontramos a MAMP, htdocs, tranquilwp, y luego necesitamos volver al archivo config,
donde vemos la información de nuestra base de datos. Entonces, solo haga doble clic para abrir eso, y luego si se desplaza hacia abajo toda la información de contraseña e base de datos, y luego las claves y sales. Justo en la parte inferior de la página, si busca la depuración define WP, forma
predeterminada esta se establece en false. Entonces vamos a establecer esto en verdadero, y luego guardar eso, pero no olvides cambiarlo de nuevo a falso si vas a subir esto a un servidor web. Así que guarda eso y luego refresca en Chrome, y luego esto nos dará una línea de error, y nos dice exactamente dónde nos hemos equivocado. Entonces en nuestra página de índice en la línea tres. Echemos un vistazo. Entonces podemos ver que el tema estaba en la línea uno, pero WordPress no descubrió que había un problema hasta que encontró algo de HTML en la línea tres. Por lo que podría no estar exactamente en la línea pero da una buena indicación exactamente dónde radica el problema. Entonces podemos simplemente cerrar el PHP, guardar y luego refrescar, y todo debería estar funcionando de nuevo. Está bien. Entonces ese es el final de este video. Te veré en el siguiente video. Empezaremos a trabajar en el encabezado y el pie de página.
19. Encabezado y pie de página: Ahora, vamos a hacer que nuestra sección de cabeza y el pie de página sean más dinámicos, amigable con WordPress. De vuelta en un editor de texto si vas al archivo header.php. Por el momento, sólo tenemos HTML estático. Vamos a querer hacer que esto sea dinámico agregando algunas funciones de WordPress y algunas PHP. Empecemos por hacer dinámico el lenguaje. lugar de tener el lenguaje en la parte superior, vamos a abrir las etiquetas PHP exactamente de la misma manera que lo habíamos hecho antes. Entonces dentro del PHP, vamos a agregar language_atributos, y luego porque es una función, usamos los corchetes y el punto y coma, y esto permite a WordPress agregar el lenguaje dinámicamente, y entonces a continuación vamos a añadir el conjunto de caracteres dinámicamente. En lugar de tener el conjunto de caracteres igual a UTF-8, podemos permitir que WordPress haga esto dinámicamente. Nuevamente, las etiquetas PHP de apertura y cierre. Ahora bien, si quieres copiar estos y pegarlos en lugar de volver a escribir lo puedes hacer. Voy a usar la función bloginfo, y luego dentro de los corchetes, y luego añadimos el juego de caracteres entre las citas, y luego un punto y coma al final. Ahora, ten cuidado al escribir las funciones PHP porque como has visto en el último video con la depuración, si solo tenemos un personaje mal escrito o fuera de lugar, las posibilidades son que te vayas a conseguir una pantalla blanca, así que ten cuidado con eso, y luego en lugar de nuestro título estático Tranquil Spa, cambiemos eso para permitir que WordPress incluya eso. Nuevamente, entre las etiquetas PHP, podemos agregar el título de WordPress con wp_title, y luego dentro de los corchetes, solo deja las comillas vacías, y luego el punto y coma al final, y luego desplázate hacia abajo justo antes de la cabeza de cierre justo al final ahí. Si solo encontramos la línea justo antes, y entonces no voy a incluir la función wp_head, que básicamente permite a WordPress agregar
scripts a los datos de nuevo a la sección de cabecera cuando lo necesite. Nuevamente, entre las etiquetas PHP escribiendo wp_head, luego los corchetes y el punto y coma. Entonces en la etiqueta de cuerpo de apertura, podemos agregar la clase de cuerpo de WordPress. Entre el PHP, usamos la función body_class, y los corchetes y el punto
y coma, para luego WordPress agregará el body_class en la sección derecha. Desplazemos hacia abajo hasta la sección de encabezado. El siguiente que vamos a cambiar es el Tranquil Spa. El enlace Tranquil Spa es el que se encuentra en la parte superior izquierda de la página de inicio, que es nuestra sección de logotipos y nuestro enlace de vuelta a la página de inicio. Hay dos piezas de PHP que necesitamos incluir aquí. Yo sólo voy a deshacerme de la barra lateral por ahora sólo para darnos un poco más de espacio. En primer lugar, necesitamos cambiar el nombre del sitio web, que es Tranquil Spa. Necesitamos incluir el PHP para que este nombre sea dinámico. Pega en las etiquetas de apertura y cierre de PHP, y lo pondré en una línea separada solo para que quede más claro. Ahí vamos. Entre el PHP. PHP utiliza el nombre de eco para hacer eco de los contenidos del navegador, y luego usamos la función WordPress de get_bloginfo. El bloginfo que queremos es el nombre del sitio. Poner en nombrar ahí y el punto y coma al final. Ahora, WordPress generalmente está a nombre de nuestro sitio web, que es Tranquil Spa. Ese va a ser el texto que aparece en la esquina superior izquierda donde está el logo. Pero necesitamos hacer de este texto un enlace activo. Porque ya no tenemos un index.html, porque estamos usando PHP. Tenemos que decirle a WordPress que vincule este nombre de nuevo a nuestro home_url. De nuevo, lo haremos entre las etiquetas PHP, y luego eco. Hay un par de maneras diferentes en las que podemos hacer esto en WordPress. Pero voy a usar la URL de escape, que desinfecta la URL y asegurarme de que no haya código malicioso ahí dentro. Eco esc_url. Después entre paréntesis después, vamos a poner el enlace al home_url. Después vuelve a abrir y cerrar los corchetes rizados, y luego el punto y coma. Ahí están nuestras dos piezas de PHP. El primero proporciona el enlace al home_url, y el segundo proporciona el nombre del sitio web. Después vuelve a subir a la sección de cabeza. Vamos a añadir los enlaces CSS de una manera ligeramente diferente. Si eliminamos el enlace para el CSS personalizado y también el CSS Bootstrap. Agregaremos esos de nuevo en el archivo de funciones en tan solo un momento. Guarda eso y luego abre nuestra barra lateral y dirígete al footer.php. No hay mucho que tengamos que lidiar con el pie de página. Una de las cosas que queremos cambiar es el año. Porque queremos que esto cambie dinámicamente cada año, podemos agregar algo de PHP al fondo de aquí. En lugar de tener 2015 codificado duro, podemos hacer eco al navegador de la fecha. Entonces entre corchetes, podemos poner la Y mayúscula, que es la forma en que PHP agrega el año. Utilizando PHP, también puedes agregar los días y los meses en diversos formatos. Eso lo veremos con más detalle cuando hagamos las entradas del blog. Después justo en la parte inferior de la página, y luego justo antes de la etiqueta de cuerpo de cierre. Aquí, vamos a añadir otra función PHP, que es el wp_footer. Esto permite a WordPress agregar datos con scripts a la sección de pie de página. Guarda eso. Entonces podemos eliminar el JavaScript de Bootstrap. Vincularemos esto con el CSS en el archivo de funciones. Debido a que WordPress ya viene con jQuery, podemos eliminar esto también. Ata un poco esto y luego dale “Guardar”. Ahora, hemos sacado el CSS de la sección de encabezado y los guiones de la sección de pie de página. Tenemos que permitir que WordPress vuelva a agregar estos a la página web. Vamos a hacer esto de la forma en que lo recomiende WordPress poniendo en cola los guiones. El modo en que hacemos eso es si vamos al functions.php. Si vas a la sección inferior después de la add_action, asegúrate de que sigues dentro de las etiquetas PHP. Vamos a crear una nueva función PHP. Este se va a llamar tranquil_scripts. Después los corchetes, y luego después los tirantes rizados. Simplemente agrega un comentario aquí para que sepamos exactamente lo que estamos haciendo. Esta sección va a estar agregando los estilos a la función. Para volver a agregar estos correctamente al tema, necesitamos usar el WordPress o wp_enqueue_style. Entonces dentro de los corchetes rizados, y también entre las comillas, vamos a darle un nombre a la primera hoja de estilo. Este es el bootstrap-core, luego separado por una coma. El segundo parámetro que necesitamos incluir es la ruta del archivo al CSS Bootstrap. Añadamos esto en WordPress. Escribimos get_template_directory_uri, y luego los corchetes. Después agregamos la ruta del archivo mediante el uso del punto. Entonces dentro de las cotizaciones, agregamos el enlace a nuestro archivo bootstrap, por lo que /CSS/Bootstrap.min.css. Después un punto y coma al final. Simplemente nos desharemos de una barra lateral por ahora. Aquí, le estamos dando un nombre a la hoja de estilo. Entonces estamos agregando el directorio de plantillas. Después agregando al directorio de plantillas, la ruta del archivo para el CSS. Porque tenemos un CSS Bootstrap y también tenemos el CSS personalizado. Podemos simplemente copiar esto y luego pegarlo directamente abajo. Basta con cambiar el nombre y la ruta del archivo. Esto es para nuestro archivo personalizado. Entonces también incluimos get_template_directory. Entonces necesitamos cambiar la ruta del archivo. Debido a que nuestra hoja de estilo personalizada está en una raíz de documento en lugar de la carpeta CSS, simplemente
podemos cambiar esto a style.css. Entonces hacemos una cosa muy similar para volver a agregar los guiones. Agregar comentarios de agregar scripts. Es JavaScript de vuelta en, funciona de manera similar a la hoja de estilo. Simplemente copiamos este enlace y lo pegamos en. Pero esta vez, en lugar de enqueue estilo, ponemos en cola el guión. Después agregamos el nombre del inicio. Voy a llamar a esto el bootstrap-js. Utilizamos get_template_directory de la misma manera. Pero esta vez la ruta del archivo está en nuestra carpeta JS. No olvides la barra delantera antes. Entonces necesitamos vincular esto a la versión minificada bootstrap. Bootstrap.min.js. Esto reemplaza al JavaScript de la sección de pie de página. Después de eso añadir una coma. Hemos incluido el nombre del script, la fuente del script. Ahora a continuación necesitamos incluir cualquier dependencia. Ahora, debido a que Bootstrap requiere jQuery, necesitamos asegurarnos de que jQuery se cargue antes de Bootstrap. Hacemos esto agregando una matriz. Entonces entre paréntesis ponemos el nombre de la dependencia, que es jQuery, separado por coma. El último valor que voy a poner es un booleano de verdad. Esto habilita el enlace scriptable a la sección de pie de página. En el footer.php, incluimos la función wp_footer. Porque agregamos esto en, WordPress sabe exactamente dónde agregar el script ahora. Ahora bien, esta función está toda configurada. Tenemos que hacer algo similar que hicimos desde el principio. Para la configuración del tema, necesitamos agregar la acción. Fuera de la función, debajo del último corsé rizado, podemos pegar en el add_action y reemplazar after_theme_setup, tenemos wp_enqueue_scripts. Entonces el segundo parámetro es el nombre de nuestra función, que es tranquil_scripts. Podemos copiar eso y pegarlo y guardarlo. Porque tienes que habilitar la depuración, si refrescamos el navegador, ojalá no tengamos ningún problema. Se puede empezar a ver que algunas cosas están cambiando. Tenemos algunos colores apareciendo, lo que significa que el CSS personalizado debe estar vinculado correctamente. También el CSS Bootstrap debe estar vinculado correctamente. Porque se puede ver que el sistema de cuadrícula, como las secciones libres, están configuradas correctamente. Nos faltan las imágenes, pero nos encargaremos de esas pronto. Eso no es nada de qué preocuparse. Por último, si simplemente reducimos el navegador a un tamaño más pequeño, al tamaño del móvil o tableta, podemos comprobar que el JavaScript está funcionando haciendo clic en el botón desplegable. Si todo eso está funcionando bien para ti, eso es genial. Si tienes un desplegable, eso significa que el JavaScript está funcionando. Enhorabuena por llegar hasta aquí, y nos vemos en el siguiente video, donde agregaremos la navegación de WordPress.
20. Menú de WordPress usando navwalker: Bienvenido de nuevo. En este video, vamos a estar concentrándonos en que nuestra navegación esté abierta y funcionando. Debido a que WordPress y Bootstrap utilizan diferentes clases personalizadas para la configuración del menú, necesitamos incluir una forma de convertir nuestras clases de Bootstrap a WordPress. Ahora por suerte, alguien ya ha creado una herramienta útil llamada Bootstrap nav walker. Si vas a Google y tienes una búsqueda de Bootstrap navwalker, entonces deberías conseguir el primer enlace, que es la página de GitHub y puedes ver que nav walker es una clase personalizada de navegación de WordPress para implementar Twitter Bootstrap en nuestros temas personalizados de WordPress. Podemos empezar pulsando el botón “Descargar”. Debería descargar bastante rápido, es solo un archivo zip. Entonces si bajas a la instalación, la instalación es bastante sencilla de seguir. Empezamos copiando la función. Entonces copiamos eso, y luego nos dirigimos al functions.php. Esto se va a incluir dentro de la función tranquilwp_setup. Justo debajo de la función título-etiqueta, pega eso en. Esto incluye el archivo navwalker en nuestro proyecto. Volver al navegador. Después, para el uso, copia el array nav walker, y luego pasa a un editor de texto en el header.php. Localizará la navegación. Tenemos que encontrar la navegación principal que está en la página de inicio, que tiene los enlaces a la página de índice, el blog, y también las últimas noticias. Tenemos que sustituir la lista completa desordenada. Por lo que podemos eliminar todo este apartado. Pero asegúrate de dejar el div circundante con el colapso de clase fuera. Después pega en la matriz entre estas etiquetas. Tan solo amarraremos esto un poco. Esta matriz formatea correctamente nuestro tema de WordPress para incluir un menú desplegable bootstrap. Podemos dejar todos los incumplimientos como están en el lado derecho. El único que necesitamos cambiar es la clase de menú. Nuestro menú bootstrap clases cuando nav, navbar-nav, y luego también navbar-derecha, porque nuestro menú estaba bien alineado. Todo lo demás podemos dejar como predeterminado. Después vuelve al navegador. A continuación necesitamos registrar el menú. Copia el register_nav_menus y luego en functions.php, justo debajo donde hemos incluido el enlace del andador de navegación. Justo debajo de eso, podemos pegar esto ahí dentro. Esto registra la navegación con el tema. Simplemente amarramos esto y luego cambiamos el TEMAME a tranquilwp y guardamos eso. Esto establece el menú con el enlace de inicio y los enlaces de blog en la parte superior de la página web para que sea nuestro menú principal. Volveremos a esto más adelante en el curso y registraremos los menús fotográficos. Lo último que necesitamos hacer es ojalá eso se haya descargado para ti ahora, dirígete a tus descargas y luego descomprima el paquete que acabamos de descargar, y abre. Entonces necesitamos el arrastrar el archivo PHP a un tema personalizado. Después también abre tu carpeta temática y luego arrastra dentro de la carpeta PHP y pegarlo en el directorio raíz, igual que
la página de índice. Eso lo voy a hacer ahora. Ahora todo eso debería estar funcionando. Si vamos al editor de texto y luego guardamos eso, y luego en Chrome y en WordPress y luego refrescamos WordPress. Entonces podemos crear nuestro menú principal. En el salpicadero del lado izquierdo, vaya a la apariencia y luego a los menús. Después crea un menú y luego cambia el nombre del menú a Menú Principal. Después desplázate hacia abajo cuando esté marcada las dos casillas en la parte inferior y esto asegura que el menú principal sea el menú principal y también que las nuevas páginas que creamos se agreguen automáticamente al menú. Guarda eso. Entonces visitemos el sitio y veamos si el menú está funcionando bien. Nuestro menú está funcionando. Podemos ver que ha aparecido en la parte superior de la página. ahora solo tenemos el enlace Inicio y la Página de muestra porque no
hemos creado el blog ni la última sección nueva. Pero eso está bien. Eso significa que todo está funcionando correctamente. Eso es todo, dejaremos este video por ahora. Te veré en el siguiente video. Arreglaremos todos los enlaces para las imágenes.
21. Rutas de archivos de imagen: Nuestro tema personalizado de WordPress, está empezando a tomar forma ahora. Uno de los principales problemas que podemos ver es que las imágenes que incluimos en la plantilla Bootstrap no están apareciendo en el sitio de WordPress. Tenemos que arreglar eso ahora. Para empezar, la mayoría de las imágenes están en la página de índice. Nos dirigimos a index.php. Para que aparezcan las imágenes, necesitamos cambiar correctamente la ruta del archivo. El primero está en la sección “Bienvenida”, y éste es el divisor-morado. Dentro de la fuente de imagen, vamos a iniciar las etiquetas php, las etiquetas de apertura y cierre. Entonces usamos la misma función que usamos para incluir la ruta del archivo para el CSS. Por lo que echo esc_url. Entonces entre paréntesis,
obtendremos _the_templates_directory_uri y luego un par de corchetes. Asegúrate de volver a poner el punto y coma al final. Basta con abrir la barra lateral. Estamos obteniendo el directorio de plantillas uri, que es nuestra carpeta temática. Después lo incluiremos en la carpeta “Imágenes”, que se encuentra en el Directorio raíz. Asegúrate de tener una barra corta justo antes ahí porque eso no se agrega automáticamente. Guardemos eso y comprobemos que eso está funcionando antes de que vayamos más allá. Ahí vamos. Ahí está nuestra imagen morada. Vamos a “Copiar” esto para ahorrar mucho mecanografiar. Si solo copiamos todo desde la barra inclinada hacia adelante antes la carpeta de imágenes hasta la etiqueta PHP de Apertura, y luego bajamos a la sección Facilidad, y luego solo “Pegar” esto antes de cada una de las imágenes. El maquillaje, las velas, la imagen del lago, y la piscina. Después tenemos la imagen plateada en la Sección Últimas Ofertas. “ Pega” eso y desplázate más abajo para ver si hay más que necesitamos cambiar. Hay una imagen más en la Sección Tienda Online. Guardemos eso y veamos cómo se ve eso y “Refresca” el navegador. Estamos llegando a algún lugar ahora. Eso se ve mejor. Necesitamos incluir la imagen de fondo principal, pero eso está en el encabezado. Eso lo haremos ahora. En el header.php, desplácese hacia abajo hasta la Sección de características y “Pegar” que enfrente de la imagen del lago, luego guardar y luego refrescar eso. Bien. Estamos llegando a algún lugar ahora. Desplazemos hacia abajo hasta la sección de pie de página. Solo hay un par de imágenes que necesitamos incluir en la Sección Footer, que es la imagen divisor y también la imagen de fondo “Shop Online”. El footer.php luego desplácese hacia arriba para el divisor. “ Pega” eso en y “Guardar” luego “Refrescar”. Dice: “Una imagen dividida”. Entonces es solo la imagen de la sección “Tienda Online” y agregamos esto como imagen de fondo en el CSS. Dirígete al “Style.css” y luego desplázate hacia abajo hasta la sección Tienda Online. Para que esto funcione correctamente en WordPress, necesitamos eliminar la barra y los dos puntos. Guarda eso y luego refresca. Esa es la imagen que apareció en el fondo, cual necesitamos para asegurarnos de que el botón “Shop Online” esté debajo del divisor. Creo que sólo nos falta una etiqueta de rotura. De vuelta a la página de índice, tenemos el encabezado y la imagen divisoria, y luego el botón justo después. Solo voy a agregar etiqueta de ruptura ahí y luego refrescar, y espero que eso funcione. Eso es genial. Ahí vamos. Eso está funcionando perfectamente ahora. Creo que esas son todas las imágenes cubiertas en la página de índice. Simplemente me desplazaré hacia arriba y hacia abajo y veré si falta algo. Genial. Nuestra página de inicio ahora se ve como debería hacer. Ahora tenemos todas las imágenes en su lugar y
se parece exactamente a la plantilla Bootstrap que creamos. Gracias por ver y nos vemos en el siguiente video.
22. Crear la página de inicio.php: Bienvenidos de vuelta a todos. En este video, vamos a estar echando un vistazo a cómo WordPress trata las plantillas y el sistema de jerarquía para seleccionar qué plantilla usar. Nos dirigimos a Google y buscamos la jerarquía de plantillas de WordPress. El primer enlace que surja debe ser el que necesites. Si seleccionamos eso, así seríamos llevados al sitio web de WordPress y si simplemente nos
desplazamos hacia abajo, podemos encontrar la lista de las plantillas que WordPress reconoce y te daré una idea de cómo WordPress utiliza esto. Ahí hay un diagrama visual al que echaremos un vistazo en tan solo un momento. Pero si nos desplazamos un poco más abajo por la página, podemos encontrar algunos detalles más sobre cómo WordPress trata las plantillas. Por defecto, WordPress utiliza la portada o la página principal para mostrar las últimas entradas del blog y eso realmente no es lo que queremos para este diseño. En nuestro diseño Bootstrap, tenemos una portada y luego mantenemos nuestra entrada de blog separada en su propia página de blog. Necesitamos cambiar nuestro tema de WordPress, necesitamos usar el front-page.php como nuestra nueva página de inicio. En este video, estaremos tomando el contenido de la página de índice y estaremos creando el front-page.php. Después utilizaremos nuestra página de índice para ser la página predeterminada para mostrar publicaciones de blog o contenido de WordPress. Desplazándose hacia abajo, te darán una idea a algunas de las plantillas que estamos construyendo en este curso. Hay una plantilla para el único post que tiene la página de índice como plantilla de reserva si ninguna de estas existe, también
crearemos una plantilla de página que WordPress
usará si no encuentra una plantilla más específica. Nuevamente, si no se puede encontrar ninguno de estos, volverá por defecto a la página de índice y hay varias de unas plantillas personalizadas que podemos construir. Los veremos más adelante en el curso. Si quieres echar un vistazo a la visión general visual que te da un bonito diagrama visual de cómo WordPress trata las plantillas, qué plantillas busca en un orden más particular. Empecemos a crear nuestra nueva portada. Si vuelves al panel de WordPress y luego en el tablero de la izquierda si bajas a páginas, solo
voy a eliminar la página de muestra, no necesitamos eso. Entonces vamos a dar click en “Añadir nuevo”. Simplemente vamos a llamar a esta página de inicio y luego hacer clic en “Publicar”. Después dirígete al editor de texto y crearemos el front-page.php que buscamos antes. En primer lugar, entra en la página de índice, selecciona todo y copia y luego Comando N o Control N para crear una nueva página y luego pega eso en, y luego guarde eso de inmediato como front-page.php. Esta ahora va a ser nuestra primera página de la página web. Podemos eliminar todo el contenido en la página de índice, todo entre el encabezado get y obtener etiquetas de pie hasta el fondo. Simplemente selecciona todo el contenido, y luego desplázate hacia abajo y elimina, dejando solo el encabezado y el pie de página. Simplemente guardaremos esta página por ahora y volveremos a esto en el siguiente video donde empezaremos a crear el bucle de WordPress para recorrer todo el contenido de las entradas del blog, así que guarde. Después, si vuelves al tablero y luego en la configuración, selecciona la “pestaña Lectura”. Si vamos a la portada que está en la parte superior, mencionamos al inicio de este video que por defecto, WordPress utiliza la portada para mostrar las últimas entradas del blog. Vamos a cambiar eso para que sea una página estática. Voy a cambiar eso a la página de inicio que se va a crear. Voy a cambiar eso y luego dar clic en “Guardar cambios”. Ojalá eso debería estar todo funcionando de nuevo. Haga clic en “Visitar sitio” refrescar y ahora parece estar funcionando bien. Acabamos de obtener algunos enlaces de menú en la parte superior, así que ahora solo voy a deshacerme de esos. De vuelta a la aparición en los menús, podemos eliminar la página de muestra. No necesitamos eso en el menú y también el enlace de la página de inicio para luego guardar el menú. Después de volver a nuestra portada, así que todo está funcionando de nuevo. Gracias por ver. Te veré en el siguiente video.
23. Bucle de WordPress y page.php: Entonces en este video, vamos a estar echando un vistazo al famoso bucle de WordPress. Entonces si solo te diriges a Google y entonces buscarás bucle de WordPress. Deberíamos llevarnos directamente al códice. Entonces haga clic en el primer enlace, que nos lleva a la página web de WordPress. Por lo que el bucle es el código PHP utilizado por WordPress para mostrar publicaciones. Usando el bucle WordPress procesa cada publicación que se mostrará en la página actual y formato de acuerdo a cómo coincida con especificar criterios dentro de las etiquetas de bucle. Cualquier código HTML o PHP en el bucle será procesado en cada publicación. Entonces, básicamente, lo que eso significa es, lugar de lo que estamos haciendo en nuestra plantilla de blog bootstrap, donde creamos tres entradas de blog separadas. Para guardar repitiendo este código una y otra vez, solo
creamos una entrada de blog de muestra dentro del bucle. WordPress seguirá dando un bucle a través, tirando de todo el contenido de las entradas del blog hasta que no haya más publicaciones que mostrar. Entonces desplazándose hacia abajo. Por lo que para empezar a usar el bucle de WordPress, necesitamos copiar las etiquetas de bucle de apertura. Entonces si copiamos donde dice que el bucle comienza aquí, copia la primera línea de PHP. Después, entre el encabezado get y get pie de página, pega esto y luego copia el final del bucle, que está justo debajo. Después pega esto dejando un poco de espacio en el medio para el contenido. Entonces si conoces un poco de PHP, esto debería parecer bastante familiar. Si no, básicamente todo lo que está pasando es WordPress es comprobar si hay publicaciones disponibles y si bien las publicaciones no están disponibles, va a recorrer en bucle el contenido que jalamos aquí muy pronto. Entonces si no hay más publicaciones, entonces termina el bucle. Entonces si no hay publicaciones iguales al navegador. La palabra perdón, no hay publicaciones que coincidan con tus criterios. Por lo que ahora el bucle está en su lugar, necesitamos tirar en el contenido de la publicación de la columna. Lo haremos abriendo las etiquetas PHP. Entonces entre estas etiquetas, tiramos en el contenido y los corchetes y punto y coma. Por lo que esto imprimirá el contenido de los posts mientras estén publicados disponibles. Actualmente no tenemos ningún post en la página web de WordPress pero los crearemos en el siguiente video. Entonces, vamos a guardar eso. Si bien vamos a estar usando esto como la copia de seguridad o la plantilla predeterminada para las publicaciones, también
necesitamos crear una plantilla predeterminada para las páginas si no existe ninguna plantilla más específica. Entonces vamos a crear la página. PHP que miramos al inicio de este video. Entonces si solo seleccionamos todo el contenido y copiamos y luego hacemos una nueva página y pegamos ahí. Esta página se va a guardar como page.PHP. Entonces guarde eso, ahí vamos. Debido a que esta es la plantilla predeterminada para páginas en lugar de publicaciones, necesitamos cambiar el mensaje de error, para lo siento, no hay páginas que coincidan con tus criterios, y guardar eso. Entonces si te unes a mí en el siguiente video, empezaremos a crear algunas entradas de blog de WordPress.
24. Página de índice del blog, parte 1: Ahora vamos a empezar agregando algunas entradas de blog a nuestra página web. También crearemos la página del blog para que estos se muestren en. Para conseguir algún contenido para las entradas del blog, voy a ir a Google y buscar algo de Lorem ipsum, para conseguir algún texto de muestra para los posts. Haga clic en “Lorem Ipsum” y luego desplácese hacia abajo hasta el generador. Voy a generar cinco párrafos de texto así que tenemos mucho contenido para el post. Haga clic en “Generar”, luego copie los cinco párrafos, y luego vuelva al panel de WordPress. Una vez que llegues al tablero, haz click en el “Posts”. Podemos mantener ahí por ahora el post de muestra hola mundo. Voy a generar cinco nuevos puestos. click en “Añadir un nuevo post” y luego dale un título de tu elección. Voy a llamar a esta entrada de blog uno, y luego en el cuadro de texto, pega en el Lorem ipsum. Ya he creado las noticias en la categoría de oficina. Simplemente selecciona “Agregar nueva categoría” y escribe una categoría de tu elección, como promociones. Después pulsa “Enter”, y luego obtienes el nuevo periodo de categoría ahí. Justo debajo de las categorías se encuentra también el área para etiquetas. Es posible que desee agregar algunas etiquetas también. Escribe y pulsa “Enter”. Voy a crear belleza, cabello, maquillaje, y eso servirá por ahora. Haga clic en “Publicar” y luego agregue nuevas en la parte superior, y voy a hacer cinco nuevas entradas de blog en total. Tenemos mucho contenido con el que trabajar. Puedes o crear las tuyas propias o seguirlas conmigo. El siguiente va a ser oferta de agosto. Ahora estoy pegando en el texto de muestra en la categoría de oficina. Añadiré algunas etiquetas y luego haga clic en “Publicar”. En el tercero, esto puede ser noticias de agosto o boletín informativo. Esta puede ser la nueva sección en las etiquetas, puede ser noticias y actualizaciones, pegar en el contenido, y luego presionar “Publicar”. Yo sólo voy a hacer dos más. Agrega el nuevo y luego muestra post. Pega eso en y esto se puede descategorizar. Ahora publicaré y luego uno más. Muestra post 2 y luego publica eso. Entonces tenemos cinco posts ahora en total, así que tenemos mucho contenido con el que trabajar. En la página de inicio, sólo tenemos el enlace de vuelta a la página de inicio. A continuación necesitamos crear la página del blog. De nuevo en el Dashboard un ir a Páginas, Agregar Nuevo, llamar a esto la página del blog, y luego presionar “Publicar”. Tenemos que decirle a WordPress que esta es la página para mostrar las entradas del blog, así que vamos a Ajustes, Lectura, y cambiamos la página de entradas para que sea el blog que acabamos de crear, luego guardar los cambios. Después echa un vistazo al sitio y comprueba si la página del blog ha sido agregada al menú. Está bien, eso es genial. A continuación necesitamos transferir el contenido del blog de nuestro proyecto bootstrap a WordPress. Si solo encontramos nuestra carpeta bootstrap, la mía aún está en el escritorio. Después ábrela, luego arrastra el blog.html a tu editor de texto, y podemos empezar a copiar parte del contenido a WordPress. No necesitamos el encabezado ni la sección de pie de página. Lo que tenemos que hacer es desplazarnos hacia abajo hasta la sección del blog, y luego necesitamos copiar toda la sección del blog. Copia esto y luego sigue yendo todo el camino hacia abajo hasta que encontremos la barra lateral. Ahí están los módulos de barra lateral. Después copia todo hasta la sección de pie de página. Copia y luego entra en el index.php y luego pega todo esto justo debajo de get_header. Empezaré a trabajar con esto ahora. Lo estoy haciendo WordPress amigable. Empezaremos recortando la barra lateral y poniendo la barra lateral en el archivo sidebar.php. Si buscamos el div de la barra lateral del blog-cierre, entonces mira el div justo antes de eso, y luego copia los módulos hasta el número de columnas. Recorta los contenidos. Deberíamos quedarnos con el contenedor de 12 columnas. Después ve al sidebar.php, pega eso y guarda, luego vuelve a la página de índice, y ojalá deberías estar teniendo una idea de lo que estamos haciendo aquí. De la misma manera que obtuvimos el encabezado, y también de la misma forma en que volvimos a meter el pie de página, vamos a hacer exactamente lo mismo. Entre el div de la barra lateral, abramos las etiquetas PHP y luego
tecleemos get_sidebar, los corchetes y el punto y coma, y luego guardemos eso. Ojalá eso tenga sentido. Hemos cortado la barra lateral, puesto en su propio archivo, y luego la hemos agregado de nuevo en el uso de PHP. Lo siguiente que tenemos que hacer es, necesitamos agregar nuestra entrada de blog al bucle de WordPress que agregamos antes. Solo necesitamos una de las entradas del blog bootstrap para trabajar, y actualmente tenemos tres, así que eliminemos dos de ellas. Si localizamos el final de las entradas del blog, hay una y hay dos, así que nos deja solo con una entrada de blog. En realidad no necesitamos ninguno del contenido ni ninguno del texto, por lo que podemos eliminar eso para hacer más espacio. Simplemente amarraremos esto para que sepamos lo que estamos haciendo. Entonces nos dieron el contenedor, la fila, y el número de columnas, luego la publicación del blog ahí. Tal como está, este es el contenido de nuestra entrada de blog y queremos asegurarnos de que esto esté dentro de bucle de WordPress. Por lo que cada vez que recorre una entrada de blog, imprimirá el título de la entrada del blog, también la fecha, el autor, y luego el contenido. Podemos empezar a rodear esto con el bucle de WordPress. Entonces si cortamos el bucle de extremo abierto y luego pegamos esto justo encima del div con la clase de post de blog. Entonces pegamos eso en. Si cortamos el extremo del bucle y luego pegamos esto al final del blog. Eso lo pego justo ahí. Recortamos todos los párrafos del texto, por lo que necesitamos volver a agregar el contenido. Cortamos las etiquetas PHP para el contenido y luego pegamos esto de nuevo en justo encima del final del bucle. Entonces ese es el contenido en. Ahora solo para asegurarnos de que nuestros divs estén todos en su lugar. Tenemos el div con la entrada del blog y creo que solo
necesitamos una etiqueta de cierre después del contenido. Sí, eso mucho está arriba con la entrada de blog apertura div. Simplemente pondré un comentario ahí de entrada de blog. Haré un poco de espacio entre el final del bucle. Ahora tiene el bucle y algo de información de blog ahí dentro. Vayamos a nuestro sitio web y veamos cómo se ve y te damos una indicación visual de lo que está haciendo el bucle. Entonces si seleccionas el blog y luego desplázate hacia abajo. Por lo que podemos ver que algunas publicaciones de blog comienzan a
aparecer a la izquierda y nuestra barra lateral está siendo replegada. Pero uno de los problemas que tenemos hasta ahora es que creamos cinco entradas de blog diferentes. Pero a medida que nos
desplazamos hacia abajo, estamos recibiendo la misma publicación de blog una y otra vez, y eso es porque en la página de índice, está tirando del contenido, que es el texto de Lorem Ipsum para toda la información como la encabezado, la fecha, y la oferta es todo HTML estático. Por lo que necesitamos ahora convertir esto a PHP. Por lo que WordPress puede tirar de la información correcta para las entradas de blog que creamos. Entonces empecemos eso ahora. Empezaremos con el encabezado Nivel 2 de nueva característica. Yo quiero separar esto en una línea diferente para que quede más claro. Entonces abre el PHP. Nuevamente, solo voy a copiar estas etiquetas
PHP porque las estaremos reutilizando una y otra vez. Para obtener el título, escribimos en el_ título. Guardemos eso y regresemos al blog y actualicemos. Entonces ahora podemos ver que tenemos diferentes títulos. Estos son los títulos de las cinco entradas de blog que hemos hecho antes. Se pasa el cursor sobre ellos, se puede ver que estos títulos son enlaces. Por lo general en el blog, no necesitarás el enlace a la publicación completa. Por lo que podemos hacer eso en WordPress agregando el permalink. Por lo que podemos rodear este PHP en una etiqueta de enlace. Entonces un href va a ser igual a, luego pegamos en nuestro PHP. Para que sea un enlace, escribimos el permalink. No olvides los corchetes y el punto y coma. Tenemos que decirle a WordPress dónde enlazar estos dos. Entonces haz esto agregando un título. El título va a ser igual a, pegar en el PHP. Después escribimos el _title_attribute. Pongámoslo en líneas separadas para que quede más claro. Entonces cuando se cierra la apertura una etiqueta, justo después del atributo title y luego agrega el cierre una etiqueta después del título. Entonces echemos un vistazo a eso y actualicemos en el navegador. Entonces ese es un buen comienzo. Nuestras entradas de blog ahora son azules, lo que indica que ahora es un enlace. Por lo que de nuevo en el editor de texto. Entonces haremos lo mismo con la fecha y el autor. Por lo que a partir de la fecha, pega en el PHP. Eco al navegador get_the_date. Entonces dentro de los corchetes, necesitamos decirle a WordPress qué formato nos gustaría que apareciera la fecha. Por lo que dentro de las cotizaciones, pase tres parámetros. Entonces el primero es una F mayúscula, que en PHP significa el mes, y luego separado por una coma. Un pequeño j es para el día del mes. Entonces como usamos en la sección de pie de página, podemos usar la Y mayúscula para conseguir el año. Al siguiente haremos el autor. Entonces vamos a cambiar el nombre del autor, pegar en el PHP. El autor es bastante sencillo. Es sólo el_author. Después corchete y punto y coma. Guardemos eso y echemos un vistazo. Genial. Por lo que ahora se publica en el nombre de usuario, que es tranquil_admin. También nos da la fecha en la que se creó el post. Todo debe ser igual porque todos crearán al mismo tiempo. Entonces mientras estamos en la sección de publicaciones del blog, me gustaría agregar un poco más de información al blog. Justo debajo del autor, me gustaría agregar alguna información
que muestre qué categoría y qué etiqueta hemos utilizado para todas las publicaciones. Entonces eso es bastante sencillo de hacer. Si solo vamos por debajo de la sección de autor que acabamos de hacer ahí. También voy a añadir algunos Iconos de Font Awesome para que estos se vean un poco mejor. Por lo que Font Awesome se agrega con la etiqueta i y la clase es fa. Por lo que agregaremos primero las etiquetas. Por lo que el icono Font Awesome para etiquetas es fa-tag. Entonces cierra eso. Entonces podemos generar los nombres de las etiquetas escribiendo en the_tags. Guardemos eso y comprobemos que funciona bien y actualicemos. Entonces conseguimos una foto de la apariencia de la etiqueta. Entonces vamos a bajar a una entrada de blog donde tenemos algunas etiquetas, tenemos noticias y actualizaciones,
y luego aquí empieza todo funcionando correctamente. Después agrega una etiqueta de break. Empezaremos en las categorías. Por lo que un icono de fuente impresionante. Entonces i clase fa, y esto podría ser fa-folder-open, y luego agregar algo de PHP. Esta vez usamos la_category y luego guardamos. Entonces echemos un vistazo. Entonces tenemos apareciendo el icono Font Awesome, pero tenemos los nombres de las categorías que aparecen a continuación. Queremos asegurarnos de que estén en línea con la carpeta. También queríamos que se separaran con coma. Entonces esto es bastante sencillo de arreglar si vamos dentro de los corchetes y en las cotizaciones. Todo lo que necesitamos hacer es agregar una coma, que es el separador, y luego un espacio. Por lo que hay un espacio entre cada una de las categorías para luego refrescar. Ahora, también los tenemos ahora en línea con el Font Awesome Icon. Para que esto se parezca un poco más a las etiquetas uno, solo
agregaremos las categorías de palabras frente a ella. Entonces justo antes de la categoría, agregaremos etiquetas PHP y luego haremos eco o podemos usar una taquigrafía que es una e con un guión bajo antes de ella. Entonces la palabra que vamos a hacer eco es categoría. Después un colon, tenemos cosas del espacio ahí también. Por lo que es un espacio antes del nombre de primera categoría. Así que guarda y luego refresca. Eso se ve bien, se ve mucho mejor que antes. Entonces ojalá eso tuviera sentido para ti. Bueno, agrega un icono de Font Awesome. Después, justo después, usamos en PHP echo para hacer eco de la categoría de palabras. Después, justo después de la palabra, estamos usando la función de categoría para imprimir todas las categorías asociadas a la entrada del blog. Entonces guarde eso. Algunos de ustedes pueden haber notado al desplazarse hacia arriba y hacia abajo de la página, que estas entradas de blog son bastante largas. Normalmente en un blog, solo tienes una breve introducción, tal vez solo un párrafo o así. Entonces si haces clic en el blog o en el título, entonces
tomas en la entrada completa del blog en una página separada. Podemos hacer esto con bastante facilidad en WordPress. Es sólo un caso de cambiar el contenido para que sea el extracto. Entonces guarde, y ahora debería ser una versión acortada de las entradas del blog. Justo así. Por lo que un poco más tarde en el curso crearemos la plantilla para la entrada completa del blog. Quieres dar click en el título. Tan feliz diría que esto ha llegado por ahora. Entonces vamos a terminar este video ahí. Realmente estamos haciendo buenos progresos. Ahora vamos a ir contenido de WordPress, que se genera dinámicamente en lugar de las publicaciones estáticas bootstrap. Entonces gracias por ver, y nos vemos en el siguiente video.
25. Página de índice del blog, parte 2: Bienvenido de nuevo. Estamos haciendo buenos progresos con nuestro blog de WordPress. Ahora tenemos WordPress tirando del contenido de todas nuestras publicaciones de blog y mostrándolas en la página del blog. Hemos utilizado el extracto de WordPress para acortar el contenido de las publicaciones, solo sean un par de frases. Ahora, queremos agregar un botón Read More al final del texto. Esto también puede enlazar a la entrada completa del blog de la misma manera que el título. Para agregar el botón Read More al final, podemos agregar esto en nuestra página de índice justo después de la exenta. Tan solo haz un poco de espacio ahí. Vamos a crear un enlace y luego dentro de las citas, pegando las etiquetas PHP. Esta vez, vamos a hacer eco al navegador, get_permalink (), y punto y coma al final, luego cerraremos la etiqueta “a” y agregaremos ahí la etiqueta de cierre. Ahora, tenemos el enlace, necesitamos agregar el texto. PHP otra vez, y usamos una taquigrafía otra vez, por lo que _e sólo hace eco al navegador. Entonces dentro de los corchetes, el primer parámetro va a ser el texto que quisiéramos mostrar, que va a ser Read More y luego corto tres puntos después. Entonces guardar y ver si eso está funcionando bien. Eso es al final de cada una de las publicaciones del blog, así que eso está bien. Un pequeño cambio que te gustaría hacer es, no
me gustan los corchetes al final del texto, así que solo los voy a quitar y sólo convertirlo en los tres puntos. Veamos cómo hacer eso. Si nos dirigimos a los códecs de WordPress, y buscaremos los códecs para WordPress. A continuación, busque en
la parte superior el extracto y haga clic en la referencia de función al extracto. Desplázate un poco más hacia abajo, y dará algo de información sobre cómo usarlo y algunos ejemplos. Pero si vas un poco más allá a aproximadamente a mitad de camino y buscas el título que dice quita los tres puntos entre corchetes usando filtros. Si simplemente copiamos la función, entonces dirígete al functions.php. Vamos a pegar esto dentro pero fuera de la función de configuración. Desplázate hacia abajo hasta la parte inferior de la página y vamos a pegar esto debajo del add_action para los scripts. Al minuto, volveremos en los puntos de los corchetes, pero sólo queremos eliminar esos corchetes y guardar eso. O puedes poner en cualquier cosa que prefieras. A ver si eso está funcionando. Volver a la página del spa y refrescar. Bien, todo eso funciona correctamente. Se han quitado los corchetes. Simplemente queremos volver a cambiar este título para que sea del mismo color que el sitio web bootstrap, que es el gris oscuro. Si solo hacemos clic en Inspeccionar Elementos y luego lo seleccionamos con la lupa, podemos ver que el clúster que usa Bootstrap es blog-post-title. Copia eso, voy a cambiar este color en el style.CSS. Echemos un vistazo a la sección de blog y luego
pegamos esto en justo debajo de la sección de título que hemos creado antes. Porque ahora es un enlace, agregaremos la “a” y estableceremos el color para que sea el valor de 494646. Guarda eso y refresca. El título es ahora del mismo color que el sitio web de Bootstrap. Ya te habrás dado cuenta de que nos falta la imagen de fantasía que separa el título del blog y el resto del contenido, eso es porque aún nos dieron los puntos y el aguanieve. vamos a quitar y luego refrescar, y esto vuelve a meter las imágenes en el blog. Si volvemos a bajar al final de la página, se
puede ver que son los botones “Anterior” y “Siguiente”. Ahora vamos a conseguir que estos funcionen en WordPress. Vuelve a la página de índice. Si echa un vistazo a la sección Páginas, y podemos mantener los enlaces [inaudibles] tal como están. Pero ya no necesitamos estos enlaces porque
vamos a ponerlos de una manera WordPress. Simplemente podemos eliminar los hipervínculos de Anterior y Siguiente. Para obtener la siguiente página de publicaciones, inserte el php. Después para obtener los siguientes posts, escribimos next_posts_link y luego queremos que el botón diga “Publicaciones más antiguas”, por lo que escribimos eso dentro de los corchetes. Después copiaremos esta pieza de PHP y luego la pegamos justo debajo entre los ítems de la lista. Pero esta vez, en lugar de next_posts, se cambia a anterior. Entonces cambiaremos “Publicaciones más antiguas” por ser “Más nuevas” y guardaremos, y ojalá, eso debería funcionar bien, luego refrescarnos. Eso provoca que desaparezcan los botones y quizá te estés preguntando por qué. Bueno, la razón es porque no hay una página anterior o
una página siguiente a la que ir porque sólo tenemos cinco o seis entradas de blog, y por defecto, WordPress pone 10 entradas de blog en una página. Solo para probar si el buscapersonas está funcionando, vuelve al panel de control y luego baja la Configuración, en Lectura, luego cambia las páginas de blog para mostrar como máximo de 10 a cinco, y luego guarda los cambios. Entonces ojalá, si todo está funcionando correctamente, cuando nos desplazamos hacia abajo hasta la parte inferior de la página en el blog, ahora
deberíamos conseguir una página aquí porque sólo tenemos cinco posts. Eso va como el botón “Post Viejo” y ahí está el seis poste. Después haga clic en “Nuevos Posts”, conseguiremos los primeros cinco. Enhorabuena por llegar hasta aquí y conseguir que todas
las publicaciones del blog funcionen. Gracias por ver. Si te has unido a mí en el siguiente video, crearemos una sentencia PHP “if else”, que cambiará el texto de la función en la parte superior de la página dependiendo de qué página estemos. Te veré ahí.
26. Características dinámicas del texto: Entonces si vamos a nuestro sitio web, todas las páginas tal como está, digamos Full Responsive Premium Spa tema para WordPress en la parte superior, y eso va para la página de inicio, la página del blog, y cualquier otra página que vamos a estar creando como las últimas noticias, el Contáctenos, y Sobre Nosotros. Por lo que quiero asegurarme de que el texto de la característica en la parte superior de la página refleje en qué página estamos en lugar de que solo sea texto estático. El motivo por el que es el mismo texto en cada página es porque si vamos en el header.php, acabamos de tener HTML estático. Entonces voy a cambiar eso en este video agregando una función php. Entonces si eliminamos todo el texto entre las etiquetas P, pero nos aseguramos de que las etiquetas sigan en su lugar, y luego abrimos el php, y luego los corchetes de cierre, vamos a agregar en nuestra propia función personalizada, y Voy a llamar a este FeatureText, y luego los corchetes y punto y coma. Eso es todo lo que necesitamos hacer en la sección de encabezados. Vamos a crear esta función de texto de característica en el functions.php. Entonces si bajas a la parte inferior de la página de funciones, justo debajo de la última función pero aún dentro de las etiquetas php. Hagamos un poco de espacio para esas celdas. Entonces la palabra clave de función, luego un nombre de función que era FeatureText, y luego los corchetes, y luego par de llaves. Por lo que dentro de esta función va a ser una declaración if else. Por lo que WordPress estará revisando si se está viendo una determinada página. Si se está viendo una determinada página, entonces vamos a establecer la visualización correcta del texto en el FeatureText. Por lo que empezaremos usando una declaración if. Entonces si is_front_page. Entonces si actualmente estamos viendo la primera página, entonces queremos hacer eco al navegador,
el texto que acabamos de cortar de la sección de encabezado, que es Fully Responsive Premium Spa Theme para WordPress. Por lo que TOTALMENTE RECEPTABLE, y luego una etiqueta de break ,
y TEMA PREMIUM SPA, seguido de la etiqueta de break, PARA WordPress, y luego guarde eso. Entonces justo después del corsé rizado ahí, vamos a usar más si en lugar de lo contrario porque podemos usar tantos otros ifs como queramos. Por lo que a medida que pasamos por el sitio web, cada vez
que creamos una nueva página, que es la página Contáctanos crearemos una nueva condición para esa página, y luego imprimiremos el texto correspondiente. Entonces elseif, y los tirantes rizados. Por lo que la condición para el blog es que revisamos is_home. Por lo que la clase WordPress es la página de inicio como el área donde se están mostrando las principales entradas del blog. Entonces tenemos la portada, y luego tenemos is_home, para el home de las entradas de blog, éste hará eco del navegador, y un punto y coma al final del primero también. Por lo que eco al navegador. Si es el blog, queremos que esto diga Tranquil Spa Oficial Blog. Entonces vamos a guardar eso y echar un vistazo si esto está funcionando. Así que refresca el sitio web de WordPress. Eso parece estar funcionando hasta ahora, tenemos seleccionada la página del blog y el texto se cambia a Tranquil Spa Official Blog. Ahora, si volvemos a la página principal, obtendremos el texto original que pusimos para que todo funcione bien. Por lo que dejaremos eso por ahora y seguiremos añadiendo a las funciones cada vez que agreguemos una nueva página al blog. Entonces gracias por ver. En el siguiente video, crearemos la plantilla de página para mostrar las entradas completas de un solo blog.
27. Plantilla single para entradas de blog: Entonces en nuestra página de blog, tenemos los posts acortados hacia abajo, y en este video, queremos asegurarnos de que si hacemos clic en el botón Read More o en el título, que este enlace a una página que va a mostrar el post de longitud completa, y lo hacemos creando una plantilla llamada single.php. Entonces dirígete a tu editor de texto y crea una nueva página, y guarda esto como single.php, con todo el resto de los archivos PHP. WordPress tiene dos tipos diferentes de plantillas de página que podemos utilizar. Ahí está la plantilla de un solo uso, que estaremos usando para la página Contacto y Acerca de Nosotros, y eso sólo se va a usar en una página en particular, o también hay una plantilla Global, que es un poco más general plantilla. Tenemos que poner un comentario en la parte superior de la página. Por lo que la única página se va a basar libremente en nuestra página de blog. Podemos reutilizar mucho el contenido. Copia el contenido de la página Índice y luego pega esto en el single.php, y como esta va a ser una plantilla global, necesitamos agregar un comentario en la parte superior. Todavía WordPress es el nombre de la plantilla. Agrega los comentarios. Va a ser el nombre de la plantilla, por lo que va a ser Plantilla de Post Único. Esto tendrá algunas de la misma funcionalidad que la página del blog, pero con sólo uno o dos pequeños cambios. Por ejemplo, en la página del blog, tenemos el título enlazando a la entrada completa, pero no queremos eso porque ya estamos en la entrada completa. Vamos a eliminar el hipervínculo que rodea el título, eliminar el hipervínculo, por lo que el cierre una etiqueta. También podemos eliminar el atributo title, el permalink, y todo el camino a la apertura una etiqueta. Guarda eso y dirígete al blog y haz clic en una de las entradas del blog. Esta es la única página en la que ahora estamos trabajando, y aún tenemos que añadir el título al principio de la página. Ahora puedes ver cuando hacemos clic en el enlace en la parte superior, ya no
es un enlace, es solo el título del blog. Tenemos que cambiar la versión acortada del post para que sea de longitud completa. Hacemos eso cambiando los extractos de nuevo al contenido. Guarda eso y luego refresca. Entonces tenemos la longitud completa del poste. A continuación, solo quiero dirigirme a la hoja de estilo y agregar un poco de altura de línea en, solo para crear algún espacio entre las etiquetas, la categoría, y el texto de abajo. Si pasamos al style.css y copiamos un comentario, quiero pegar esto justo debajo de la barra lateral del blog, el Sobre Nosotros, el Contáctenos. Lo pondré justo antes del estilo móvil. Pega eso en y llamaremos a esto el Blog Single Post. Vamos a echar un vistazo a la clase que necesitamos para apuntar aquí. Si entramos a la página de índice, quiero agregar estilo a las etiquetas y a la categoría. El tipo que los rodea es blog-posts-meta. Acabo de notar que hay un pequeño error ahí. Tenemos que mover la etiqueta P de cierre para empezar realmente antes de las etiquetas y la categoría, y luego terminar justo después. De lo contrario, eso no funcionará. Sólo pongamos eso y guardemos eso. Volver a la hoja de estilo y luego pegar en la clase. No olvides poner un punto delante de él porque es una clase, y luego solo agrega algo de interlineado con la propiedad de altura de línea de dos M, y vamos a refrescar el navegador y ver cómo se ve eso. Está bien. Eso aún no ha cambiado, así que todavía hay un problema en alguna parte. Si solo echamos un vistazo. Es porque hemos cambiado la etiqueta de párrafo de cierre en la página Índice, pero no lo hemos hecho en el single.php. Entonces dirígete a single.php, y luego simplemente mueve la etiqueta p de cierre, y pon esto después de la categoría, y guarda eso. A ver si eso está funcionando ahora. Creo que eso está funcionando, sólo nos faltan las etiquetas ahí solo porque no
creo que esa publicación tenga etiquetas, lo cual no lo hace. Si probamos la de Agosto Newsletter uno, tenemos las etiquetas, solo necesitamos agregar un Tag break ahí. Justo después del autor y después del cierre de una etiqueta, la etiqueta de ruptura. Esperemos que eso lo resuelva todo ahora. Genial. Eso se ve mucho mejor. Ahora tenemos algo de altura de línea entre las etiquetas y las categorías. Eso se ve bien ahora. Entonces si bajamos un poco más la página, también
podemos quitar el botón Read More, porque no necesitamos eso. De hecho, podemos mover todo
el enlace y simplemente subirlo un poco más y ahorrar, luego refrescar eso, y ahí vamos. Ese es el botón Read More eliminado. Algo de lo que necesitamos estar conscientes a la hora de construir temas de WordPress es que a veces los usuarios pueden subir publicaciones que son realmente largas. Eso fue en sólo cinco párrafos, por lo que se ve bastante bien en la página, pero si alguien sube un post de lectura, posible
que quiera dividirlo en páginas diferentes. A lo mejor queremos agregar buscapersonas con anterior y siguiente encendido al final del post, solo dividirlo un poco. De la forma en que podemos hacer eso es que podríamos permitir a los usuarios poner una etiqueta de ruptura. Si elegimos una entrada de blog, solo escogeremos una en la que estamos ahora, que es el boletín de agosto, y si solo elegimos un punto en el que quieras agregar un buscapersonas, podemos agregar un comentario ahí dentro, que es lo mismo que un comentario HTML, que dice Página siguiente. Solo voy a copiar esto y pegarlo en una vez más, luego actualizar esa publicación, y volver al sitio. Echemos un vistazo a eso. Ahora tenemos nuestra entrada de blog apareciendo, y se cortó después de dos párrafos, donde pondremos el punto de ruptura de página siguiente, lo cual es genial. A continuación necesitamos sólo añadir un buscapersonas en la parte inferior de las publicaciones, lo que nos permitirá saltar a la siguiente página. Podemos hacer eso en el single.php y agregar esto justo debajo del contenido, así que abre el PHP, y luego la función WordPress que agregaremos un wp_link_pages, corchetes y punto y coma, para luego guardar y refrescar la página del blog. Ahora podemos ver al fondo, tenemos el número de páginas, así que tenemos 1, 2, y 3, y todas parecen estar funcionando correctamente. El último que queremos hacer es añadir un buscapersonas en la parte inferior de la publicación para que podamos saltar al siguiente o al anterior post si quieres. De vuelta en single.php, baja al buscapersonas, y en lugar de decir próximos posts, sólo
tomamos la S del final y eso enlazará al anterior o al siguiente post, y no necesitamos el texto dentro de los corchetes, porque el nombre de la publicación se pone con WordPress dinámicamente. Guarda eso y luego actualiza el navegador. Ahí vamos. Ahora tenemos el boletín de agosto y podemos enlazar con la publicación
anterior o siguiente con solo hacer clic en los botones de la parte inferior. Estamos haciendo buenos avances, y lo último que tenemos que hacer es justo en el texto en la parte superior de la página para el único post. Lo haremos de nuevo en la página Funciones y añadiremos otra declaración de Elseif. Elseif, de hecho, en lugar de agregar una nueva declaración ahí, podemos simplemente añadirla al is_home. Sólo porque vamos a estar usando el mismo texto de Tranquil Spa Official Blog. Entonces justo después de is_home, usamos las dos pipas, lo que significa todo, así que si estamos en la página principal o la página es soltera, entonces imprime el texto Tranquil Spa Official Blog. Guardar y actualizar. Está bien. Bien. Entonces esa es la plantilla terminada para la única entrada de blog, y si te unes a mí en el siguiente video, haremos posible que los usuarios agreguen comentarios a las publicaciones.
28. Añadir comentarios en el blog: Bienvenido de nuevo. En este video, vamos a crear la facilidad para que los usuarios comenten las publicaciones. El modo en que hacemos eso es que vamos a crear una nueva página. Esta va a ser una plantilla de página. Guarda esto como comments.php, y guárdalo en el mismo directorio que todos tus PHP. Entonces para esto no vamos a reinventar la rueda, sólo
vamos a copiar la página de comentarios del tema 2014,
que se incluye con la descarga de WordPress. Si vas a tu instalación de WordPress en htdocs y luego abres trunquil-wp. Entonces si entras en el contenido sobre temas, voy a usar el tema 2014 y luego abrir el comments.php. Seleccione todo y copie, y luego pegue el contenido en comments.php y guarde eso. Podemos dejar prácticamente todo el comments.php tal como está. Simplemente moveremos las referencias de WordPress 2014 justo a partir de ahí. Algunos beneficios de usar la plantilla de uno de los temas incluidos, tenía algunas características agradables como comprobar si una publicación está protegida por contraseña. Sólo hay una o dos cositas que necesitamos cambiar. Si nos desplazamos hacia abajo hasta la línea printf, y vamos a personalizar esto ligeramente cambiando un pensamiento para comentar, y luego en la siguiente línea cambie pensamientos a comentarios, y luego guarde eso. Después para incluir esto de nuevo en nuestro tema, tenemos que ir a la plantilla single.php. Entonces voy a poner esto debajo del buscapersonas. Necesitamos el estilo de WordPress paradero en la entrada del blog, queremos que aparezcan los comentarios y suele estar en la parte inferior de la publicación. Entonces pongamos esto justo debajo del buscapersonas. Cuando agrego un comentario justo aquí, este comentario voy a decir cargar la plantilla de comentarios. Después de eso, abre las etiquetas PHP y luego usa la función de plantilla de comentarios. Entonces guarde. Pasará a una entrada de blog y actualizará. Deberías ver en la parte inferior de la publicación tenemos las facilidades ahora para dejar comentarios. Sigamos adelante y agreguemos algunos comentarios de muestra, y comprobemos que todo está funcionando bien. Ahí están nuestros primeros comentarios. También podemos responder a los comentarios. Dices hola ahí dentro y luego publicas los comentarios y comprueba que todo está funcionando. Ahí están nuestros dos comentarios, así que eso está bien. A continuación solo quiero entrar en el CSS, agregar un poco de estilo personalizado y asegurarme de que los comentarios encajen un poco más con el resto de la página web. Entonces dirígete a nuestro style.css. Entonces quiero agregar algo de estilo en la parte inferior de la página. Copia los comentarios y agrega esto justo debajo del plug single post y cambia el comentario para que sea la sección de comentarios. Para empezar, quiero asegurarme de que la sección de comentarios en la parte inferior tenga un estilo similar en los módulos de la barra lateral y también en las entradas del blog. El modo en que voy a hacer eso es copiando el mismo estilo que usamos en el módulo de barra lateral. Entonces solo copia esta sección y luego encuentra el selector. Por lo que abrimos las herramientas de desarrollador de Chrome con elemento inspect. Tenemos que encontrar el ID del contenedor que rodea toda la sección de comentarios. Haga clic en la lupa y luego encuentre el contenedor circundante. Es el div con ID de comentarios y luego el área de clase de comentarios. Añadamos eso ahora. El div con un ID de comentarios, y luego la clase de comentarios-área, y luego pegar en el estilo. Veamos cómo se ve eso. Bueno, el estilo ahora coincide con el resto de la página. A continuación, solo quiero resaltar los comentarios solo para que destaquen un poco más del resto del fondo. Le daremos a esto un fondo gris oscuro y además le agregaremos un tablero redondo y también un poco de margen solo para separarlos. Entonces la clase que necesitamos es comment-body. Entonces, en primer lugar, comenzaremos con el fondo y el color de fondo es eee. Entonces el radio del borde es de 10 píxeles para que coincida con el resto del sitio. Después el margen, 30 píxeles en la parte superior e inferior, 0 en la izquierda y la derecha. Entonces vamos a guardar y refrescar. A continuación quiero agregar la imagen dividida entre el encabezado y los comentarios. Averigamos lo selectivo [inaudible]. Haga clic en la lupa y el encabezado. Eso se llama una clase de título de comentarios h2. Añadamos eso ahora. Entonces h2 y luego la clase de comentarios-título. Después se recorta el mismo estilo que usamos en el título de la entrada del blog. Por lo que nos desplazamos hasta la sección del blog y buscamos el título de la entrada del blog. Podemos copiar exactamente el mismo CSS, lo que nos da la imagen y también el estilo. Pegue esto en la sección de título de los comentarios
y guarde, y echemos un vistazo. Entonces eso se ve bien. A continuación quiero agregar un poco de margen en la parte inferior de
los comentarios y también una línea discontinua a través para separar la sección de respuesta. Para ello, necesitamos usar la clase de lista de comentarios. Añadamos algún margen, márgenes en la parte inferior de 60 píxeles y luego borremos en la parte inferior de 1 píxel y la línea discontinua. Echemos un vistazo. Ahí vamos. Entonces lo que tenemos que hacer ahora mismo, vamos a hacer un poco de estilo en la sección de respuesta. Voy a hacer que el área de texto sea el ancho completo. Consigamos la clase por eso. El selectivo para eso es el área de texto con la idea de comentarios. Entonces escribe en el área de texto, luego ID de comentarios. Establezca el ancho del área de texto 100 por ciento y agregue algún margen en la parte inferior de 20 píxeles. Entonces refresca. Entonces ahora eso es ancho completo. Lo último y quiero hacer es darle estilo al botón enviar. Vamos a hacer lo mismo que el botón de envío que utilizamos en la página web bootstrap. Tiene el mismo color azul que el resto de la página web. Averigamos cuál es el selectivo. El insumo tiene un ID de enviar. Podemos simplemente agregar el ID de envío en el botón por defecto arriba en la sección global. Justo después de botón predeterminado separado por una coma, también agregue el ID de enviar. Después haz lo mismo en el estado de hover. Presentar el cursor, y luego volver a bajar a la sección de comentarios. Debajo de la sección de área de texto, también agregue el ID de envío y hagamos que el botón coincida con el área de texto dando un ancho del 100 por ciento. Entonces vamos a guardar eso y ver cómo se ve eso y refrescar. Ya no necesitamos las herramientas de desarrollador. Entonces eso se ve mucho mejor ahora, eso se ve bien. Algo que quizá no sepas es hasta ahora cuando hemos
estado agregando los comentarios y hacemos click en el botón de respuesta. En cuanto golpeas respuesta, nos llevan a la parte inferior de la pantalla en respuesta. Esto está bien por ahora cuando queremos ir uno o dos comentarios. Pero en una página, tiene decenas o cientos de comentarios. No queremos que nos lleven hasta el final de la página. Queremos que el cuadro de comentarios aparezca justo debajo de la publicación que hemos comentado. Por suerte, WordPress tiene algo de JavaScript para hacer esto. El modo en que podemos agregar el JavaScript en es por nota de cabeza al functions.php. Si buscaremos la sección de script enqueue en la configuración del tema justo debajo del JavaScript de Bootstrap, vamos a agregar el script de respuesta común. Por lo que comprobaremos primero si el post es singular. Ahora pondremos en cola el script igual que arriba, con wp_enqueue_script. El nombre del guión es respuesta de comentario, y un punto y coma al final de eso. Entonces guarde eso. Si vas a WordPress y refrescas, ahora si haces clic en el botón de respuesta, y no funciona por algunas razones. Entonces solo comprobaremos por qué. Esto te llevará al final de la página. Echemos un vistazo sobre esto. Tenemos que asegurarnos de que esté dentro de las llaves. Entonces corta esta sección ahora que acabamos de hacer y pégala dentro de las llaves o dentro de la función. Guarda eso y veamos si está funcionando ahora. Da click en la respuesta, y ahí vamos. Ahora en lugar de llevarnos a la parte inferior de la página, ahora
tenemos habilitado el JavaScript, y esto te hace que el cuadro aparezca justo debajo de los comentarios que responderán en ellos. Para que vayamos a una sección de comentarios tan completamente funcional. Gracias por escuchar, y nos vemos en el siguiente video.
29. Cómo hacer que nuestra barra lateral sea dinámica: Bienvenidos de nuevo, chicos. En este video, vamos a echar un vistazo a la barra lateral. Vamos a asegurarnos de que sea totalmente funcional. Nos vamos a asegurar que el módulo de archivos y la sección de categorías vaya a ser dinámico, lo que significa que WordPress poblará las categorías y los meses del año por las entradas de blog que están disponibles. Por lo que los filtraremos hasta cómo nos gustaría que se mostraran. El texto que está en los archivos está en la sección de categorías. Es solo que actualmente es HTML estático. Es justo lo que hemos sacado del sitio Bootstrap. Voy a cambiar eso ahora. Cambiaremos esto en el sidebar.php. Enfréntate a eso ahora. Empezaremos con el mes del año. Si solo eliminamos todos los elementos de la lista por ahora, voy a reemplazar esto por una función PHP de WordPress. Abre las etiquetas PHP. Entonces dentro de esto, lo vamos a reemplazar por wp_get_archives, con los corchetes y un punto
y coma, para luego guardar eso, y volver al blog y refrescar. Ahora, usaremos todos los meses de Bootstrap del año, que pusimos antes. Ahora nos acaban de quedar con los meses generados por WordPress. Actualmente, solo tengo puestos en el mes de agosto. Sólo para darle un poco más de contenido, solo
voy a añadir una publicación más. Simplemente copiaré el texto de muestra. Por lo tanto, agrega una publicación más. Voy a llamar a esto la noticia de septiembre, y luego pegar un poco de texto ahí dentro. Esto puede ir en la categoría de noticias, y una etiqueta de noticias, para luego publicar eso. Después vuelve a la sección de blog. Ahora tenemos publicaciones de dos meses separados. Podemos ver que WordPress agrega estos en automáticamente. Vamos a hacer exactamente lo mismo con la sección de categorías. Vuelve al sidebar.php y encuentra la sección de categorías, que está justo debajo de los archivos, luego eliminar los elementos de lista libre que tenemos ahí dentro. Abre el PHP, y la función PHP que usamos es wp_list_categories y guarda eso, luego refrescar el blog. Ahora el módulo de barra lateral bajo las categorías tiene las categorías de WordPress, que vamos a ingresar a medida que creamos los blogposts. Tenemos un título de categorías extra ahí el cual no queremos, por lo que la forma de eliminar que está de vuelta en sidebar.php, dentro de la función WP Listas Categorías, entre los corchetes, podemos eliminar el título entre las cotizaciones escribiendo en title_li es igual, sólo
podemos dejar ese espacio en blanco para que no aparezca ningún título. Guardaremos y refrescaremos. Nos acaba de quedar con nuestro nivel de rumbo que nos hemos puesto en nosotros mismos. Ahora WordPress ha puesto los meses y las categorías en. En realidad podemos seleccionar estos enlaces ahora. Esto debería llenarlo la página del blog para mostrar las publicaciones solo por la categoría del mes que seleccionamos. Seleccionamos Noticias ahí y solo comprobaremos que todo está funcionando desplazándose hacia abajo. Acabamos de tener dos posts ahí, ambos para la categoría de noticias. Entonces si seleccionamos septiembre, solo deberíamos conseguir el único post que hicimos hoy. Ahora, probemos uno más. Probemos la sección Ofertas. Acabamos de obtener la publicación de un blog con la categoría Ofertas. Eso todo parece estar funcionando bien. Si te unes a mí en el siguiente video, crearemos el archive.php, que controla el diseño de esta vista.
30. Plantilla de archivos: Bienvenido de nuevo. En el último video, arreglamos los módulos de barra lateral. Cuando seleccionamos el mes del año o las categorías, WordPress y [inaudible] está abajo en las entradas del blog a lo que hemos seleccionado. En este video, vamos a crear el archive.php, que va a ser la plantilla que controla el look
del blog cuando seleccionemos en alguno de estos archivos. Para empezar, dirígete a los corchetes o a tu editor de texto, y luego crea una nueva página y guarda esta página como archive.php. Asegúrese de que eso está en el directorio del proyecto. Vamos a utilizar el single.php como punto de partida. Seleccione todo, copie, y luego pegue esto de nuevo en nuestra nueva página, que es el archivo, y guarde eso. Después de volver a la parte superior de la página, vamos a crear los comentarios. El comentario que necesitamos, vamos a llamar a esto La plantilla para mostrar páginas de
archivo, y guarde eso. La página se va a ver más o menos igual cuando hacemos clic en los archivos como cuando hicimos clic en la entrada del blog. Echemos un vistazo a la vista completa. No necesitamos hacer nada en la plantilla de archivos por ahora, pero sí queremos entrar en la página de funciones y asegurarnos de que el texto
sobre el área destacada se cambie de nuevo a Tranquil Spa Official Blog. Pero esta vez vamos a hacer algo un poco diferente. Vamos a añadir un poco más de PHP, que se mostrará justo debajo del texto. Nos mostrará qué categoría hemos seleccionado o qué mes estamos mostrando. Vuelve al editor de texto, y pasa al functions.php, y luego debería estar al final de tu página Funciones. Deberíamos tener la función de texto de característica. Vamos a continuar esta sección con otra declaración elseif, justo después de la última. Escriba elseif, y luego la condición y las llaves. El estado que queremos comprobar es si la página es archivo, y si lo es, vamos a hacer eco al navegador para empezar con
el mismo texto de Tranquil Spa Official Blog. Vamos a copiar y pegar eso. Como mencionamos antes, debajo del texto, vamos a poner una nueva línea. Esta línea va a mostrar el mes o la categoría que estamos mostrando, así que vamos a asegurarnos de que vaya en la siguiente línea. Yo sólo voy a hacer eco de una etiqueta de ruptura, y asegurarme de que esto vaya entre citas, así como eso. Para empezar, vamos a hacer eco de la categoría o del nombre de la etiqueta. Eso lo haremos escribiendo single_term_title, y luego el texto que queremos aparecer antes del título es,
navegando, y luego un dos puntos y un espacio. Guardemos eso y veamos cómo se ve eso. Actualiza el navegador. Ahora, tenemos el texto del Blog Oficial de Tranquil Spa, después la etiqueta de break, y justo después tenemos el texto de navegación que acabamos de poner. El texto de navegación es seguido entonces por la categoría, que es, actualmente, ofertas. Demos click en noticias y comprobemos que eso está funcionando. Ahora tenemos la sección de noticias. Yo sólo voy a probar una más. Promociones. Bien. Ahora, eso fue bastante sencillo meter eso ahí dentro, pero va a ser un poco más difícil tirar en el mes del post, pero te voy a mostrar cómo hacerlo ahora. En primer lugar, necesitamos poner en otro comunicado if, que comprueba si el archivo se está filtrando para el mes en curso. Ponemos entre corchetes, si es mes, y luego los corchetes después, y luego creamos las llaves. Para empezar, necesitamos saber qué mes del año es actualmente. Voy a almacenar eso en una variable, por lo que el signo $. Voy a llamar a esta variable el MonthNum, y vamos a establecer esto igual a get_query_var, y luego entre paréntesis, y las citas. Vamos a poner el número del mes, y luego un punto y coma al final ahí. A continuación, vamos a crear dos variables, una para el mes y otra para el año. Empezaremos con el mes. Vamos a establecer eso igual a la fecha PHP, y el primer parámetro en el que vamos a pasarlo es el formato. El formato que queremos devolver es una F, que devuelve el mes actual en forma larga, como enero o febrero, y luego separado por una coma. Entonces a continuación, queremos devolver la marca de tiempo de la unidad. Vamos a hacer eso escribiendo mktime, y luego necesitamos pasar algunos parámetros. El primero es la hora. No necesitamos poner nada ahí dentro. El segundo es el minuto. De nuevo, eso es cero. El tercero es el segundo. Eso va a ser cero. El cuarto es para el mes. Debido a que hemos creado una variable llamada MonthNum, podemos simplemente copiar eso, y podemos pegarlo en. Eso debiera devolver el mes en curso. Entonces creamos la variable de año. El año va a ser igual a, y haremos lo mismo que el número del mes, así que get_query_var. Esta vez pasaremos en la palabra, año, y un punto y coma al final. Ahora crearemos dos variables con el mes y el año. Tenemos que hacer eco de esto al navegador. Eco, en primer lugar, el texto, que va a ser, post desde, con un espacio justo después, y luego periodos en la variable. El primero va a ser el mes, y luego vamos a sumar un espacio. Pon las comillas simples con un espacio entre medias, y luego vamos a sumar la última variable, que fue el año, con el punto y coma, y pega “Guardar”. Después dirígete a WordPress y refresca. Seleccionaremos uno de los archivos y veremos si esto está funcionando. Eso se ve bien. Tenemos el post del texto, y después hemos agregado en la variable mes, y luego la variable para el año. Solo revisemos los de agosto y veamos si eso está funcionando. Todo parece estar funcionando correctamente. Tenemos el post mostrado del mes en curso. También tenemos las categorías de la etiqueta actual que se muestran. Ahora, si te unes a mí en el siguiente video, seguiremos con la página web agregando la última página de noticias.
31. Página de las noticias nuevas: Bienvenido de nuevo. En este video, vamos a crear la página Últimas Noticias. Ahora, la página Últimas Noticias va a ser bastante similar a la página del Blog. Pero sólo vamos a añadir un filtro de WordPress, que llenaremos en la entrada de columna para mostrar solo los que están etiquetados con la categoría de noticias. Para empezar, dirígete a los corchetes y crea una nueva página, y guarda esta página como page-news.php. Entonces porque va a ser bastante similar a la página del blog, sólo
podemos copiar la página del índice. Selecciona todo el contenido y copia, y pega eso en la página de noticias, y guárdalo. A diferencia de las últimas plantillas que hemos hecho, esta va a ser una plantilla de un solo uso, por lo que sólo vamos a vincular esto a la página Últimas Noticias. Para asegurarnos de que podamos vincular esto a una página de WordPress, justo en la parte superior, añadiremos un comentario que le dará un nombre de plantilla. Entonces agrega los comentarios en la parte superior, y luego agrega un nombre de plantilla. Esto se muestra en el tablero, y esto se va a llamar Últimas Noticias, y guarde eso. Ahora, le daremos a esto un nombre de plantilla. Si nos dirigimos a WordPress y luego pasamos al tablero, seleccionamos las páginas de la izquierda, y luego vamos a Agregar nuevo, y vamos a crear las Últimas Noticias. Esta vez, si vamos a los Atributos de la Página en el lado derecho, podemos seleccionar una plantilla para usar. Esta vez podemos seleccionar la plantilla Últimas Noticias porque hemos añadido el nombre de la plantilla en la parte superior. Selecciona las Últimas Noticias y luego Publicar, y esto debe agregarse automáticamente a la página de inicio. Entonces tenemos el hogar, el blog, y ahora las últimas noticias. Creo que ahí tenemos un error ortográfico. Simplemente editaremos ese título ahí. Agrega la “t” al final y actualiza. Genial, así que ahora tenemos la página principal, el blog, y las últimas noticias. Ahora hemos utilizado la página de índice como plantilla para las últimas noticias. Necesitamos ahora filtrar estos hacia abajo para sólo mostrar los posts que tienen la categoría de noticias. Vuelve a la page-news.php. Para agregar el filtro de categorías, abre el PHP, y luego usamos la función WordPress, que es query_posts, y luego entre los corchetes, le
diremos a WordPress qué publicaciones consultar;
las que tienen el nombre de la categoría. Entonces category_name igual a noticias y un punto y coma al final, y guardar. Si volvemos a la página web y actualizamos, por lo que ahora cuando hacemos clic en la sección “Últimas Noticias”, sólo
debemos mostrarnos con los posts que tienen la categoría de noticias. Eso está funcionando bien, así que eso es bueno. Es posible que hayas notado que necesitamos añadir el texto o el texto de la característica en la parte superior. Esto lo haremos dinámicamente en el functions.php. Esta vez lo haremos un poco diferente. Haremos que WordPress tire en el nombre del sitio web, que será Tranquil Spa, y luego le agregaremos una etiqueta de break. Entonces debajo, agregaremos el título de la página, que debe ser Últimas Noticias. Pasar al archivo de funciones. Agregaremos otra declaración else-if. Asegúrese de no agregar else-if en el corsé rizado de cierre para las declaraciones if. Ve al siguiente abajo. Else-if, entre paréntesis es plantilla de página. El template de página va a ser el page-news.php. Esta vez la sentencia else-if está comprobando el nombre de la plantilla real, luego las llaves. Si se trata de una plantilla de página de noticias, agregaremos el nombre del sitio agarrando la información del blog. Entre paréntesis, simplemente escribe un nombre, y eso jalará en el nombre del sitio, y luego haremos eco al navegador de una etiqueta de ruptura, pongamos esto en una línea separada, y luego conseguiremos el título de la página de Últimas Noticias. Basta con escribir la_title y guardar y actualizar. Ahí vamos. Ahora hemos jalado en el título de la página web y después en el título de la página. Si alguna vez vamos a cambiar alguna de esta información, ahora se mostraría automáticamente. Ahí vamos. Entonces esa es la sección Últimas Noticias terminada. Gracias por verlo, y nos vemos en el siguiente video.
32. Añadir imágenes a nuestras publicaciones: Bienvenido de nuevo. En este video vamos a agregar soporte de tema para miniaturas de
post y esto permitirá a los usuarios al crear una nueva publicación subir también una imagen destacada para que la publicación se vea un poco más agradable así que no sea solo texto plano. El modo de hacerlo es que necesitamos ir a nuestro functions.php, y luego necesitamos agregar soporte de tema para miniaturas de post. Ve a functions.php, y luego vuelve a subir a la parte superior dentro de la configuración. Hacemos esto de manera similar a los feeds y la etiqueta de título que agregamos al inicio. Por lo que en la configuración agregar soporte de tema. Entonces dentro de los corchetes, vamos a poner las post-miniaturas y el punto y coma y guardar eso. Ahora hemos incluido soporte temático. Si pasamos al panel de WordPress, y luego si entramos a la sección de blog. Elige una de las publicaciones del blog
y, a continuación, selecciona “Editar publicación”. Después desplácese hacia abajo hasta la parte inferior. Deberías ver que ahora hay un cuadro de imagen destacado apareció. Podemos usar esto para establecer una imagen para adjuntar al post. Simplemente selecciona eso, podemos tener un Subir Archivos o podemos usar la Mediateca. Por ahora solo voy a ir al Select Files en la sección upload, y luego en el escritorio en la carpeta bootstrap, y las imágenes, he incluido una imagen llamada thumbnail.jpg. Podemos usar eso si lo deseas, o puedes elegir uno propio. Entonces solo voy a poner algunos textos alt de imagen del lago y luego establecer la imagen destacada y luego actualizar el post. Entonces volveremos al blog y solo haremos uno más. Esta vez voy a seleccionar el segundo post luego agregar la imagen destacada de la misma manera. Esta vez solo vamos a ir a la mediateca y usar la misma si quieres, luego ponerla y actualizarla. Si ingresas al blog al minuto, no te
preocupes que aún no puedes ver la imagen. Hay un par de pequeños pasos que necesitamos dar primero. Pasa al index.php y luego necesitamos buscar el extracto, que es el texto. Desplácese hacia abajo hasta las etiquetas PHP con el extracto. Para mostrar la imagen justo encima del extracto, abre las etiquetas PHP y luego configuramos la miniatura de la publicación, corchetes y
el punto y coma, y guarde eso. Si actualizas el navegador ahora deberías conseguir que aparezcan las imágenes. Ahí vamos. Ésas son las dos primeras imágenes que pusimos antes. Esto sólo hace que el post se vea mucho mejor. Podemos agregar un poco más de color al post. Eso se suma a la página de índice, pero también tenemos entradas de blog apareciendo en la página de noticias y también el single.php. Pasa a la página del índice y copia la miniatura del post. Entonces si entra en el single.php, y esta vez más que en el extracto, esto irá justo por encima del contenido. No olvides ahorrar. También en la página noticias, esto irá justo por encima del extracto. Pega eso y seguro. Ésa ahora deberían ser nuestras imágenes que se muestran en el post en las noticias, el índice, y también la sola página. Si desea cambiar el tamaño predeterminado de la imagen que muestra, podemos hacerlo en el tablero. Así que dirígete al tablero, configuración y luego a los medios. Se pueden establecer las imágenes predeterminadas para la miniatura, mediana o grande. Si quieres establecer, por ejemplo, la miniatura como imagen predeterminada en el blog,
dirígete al blog y luego en la página de índice pondría dentro de los corchetes la miniatura y luego guardaría eso. Entonces si refrescas el blog ahora deberíamos obtener la pequeña imagen en miniatura por defecto. Puedes hacer lo mismo para mediano o grande. Pero sólo voy a eliminar eso por ahora y sólo dejar el tamaño de imagen estándar. Esta página está casi hecha. Sólo un poco de CSS para agregar. Yo solo quiero agregar algún margen a la parte inferior de la imagen y también hacer que la imagen sea 100 por ciento del contenedor. Si entramos en el style.css, y luego agregaremos esto en la sección de blog. Echemos un vistazo a la sección de blog. Entonces en la parte inferior de esta sección, podemos reutilizar la clase de post blog pero luego seleccionar la imagen. Añadiré algún margen en la parte inferior de la imagen. Tan solo de 20 píxeles y establece el ancho de la imagen en 100 por ciento. Guarda y luego actualiza el blog. Ahí vamos. Eso es para lucir mucho mejor y dejémonos ahora terminar con la sección de blog. Te veré en el siguiente video donde agregaremos el menú de WordPress al pie de página.
33. Menú de pie de página de WordPress: Bienvenido de nuevo. En este video, vamos a estar creando el menú de WordPress para la sección de pie de página. Actualmente, si nos desplazamos hacia abajo hasta el pie de página que tiene la lista desordenada que ponemos en la plantilla Bootstrap, queremos que el menú de pie de página sea más dinámico como el menú arriba de la barra de navegación. Entonces vamos a entrar en el Dashboard y crear un nuevo menú. Dirígete a Apariencia y luego Menús, y luego selecciona Crear nuevo menú. Voy a llamar a este menú el Menú
Pie de página, para luego crear el menú. A la izquierda, bajo la pestaña Páginas, podemos seleccionar qué enlaces queremos agregar a este menú. no hemos creado la página Acerca de Nosotros ni la página Contáctenos,
pero podemos agregar el Blog y las Últimas Noticias. Selecciona esos dos y luego selecciona Agregar al menú, y el blog simplemente va por encima de las Últimas Noticias. Guarde eso, y luego si nos dirigimos al functions.php, podemos registrar el menú. Entonces vuelve a functions.php, y luego busca la sección register_nav_menus que hicimos temprano en el curso. Entonces debajo de esto, necesitamos agregar el menú de pie de página. Simplemente copiamos el menú primario y luego pegamos esto justo debajo. El apodo es el pie de página, y luego el nombre del menú es el Menú Pie de página. Guarda eso de nuevo en el tablero y luego actualiza la página del menú. Ahora la página está actualizada, asegúrate de seguir en el Menú Pie de página y luego selecciona la pestaña Menú de pie de página debajo de Ubicaciones del tema y guarda eso. Después añadiremos el andador de navegación
al archivo de pie de página de la misma manera que hemos hecho en la sección de cabeza. Entonces ve al header.php, y luego si buscamos la barra de navegación, que es todo desde wp_nav_menu hasta los corchetes de cierre, que está justo ahí. Entonces copia esa sección, y luego pasa al footer.php,
y luego busca la navegación que está justo por encima de los iconos de las redes sociales. Si localizamos la lista desordenada, y luego podemos eliminar toda la sección de lista desordenada con la sección Acerca, el Contacto, el Blog, y la Sección Últimas Noticias. Así que elimínalos, pero asegúrate de dejar el contenedor exterior luego agrega las etiquetas PHP. Después dentro de las etiquetas, pegue en el navwalker. Este no necesita tanta información como el de cabecera. Para el nombre del menú, este va a ser el pie de página. Podemos eliminar la ubicación del tema y también la profundidad porque es solo un nivel. Sólo voy a sacar eso. El contenedor es la lista desordenada que se eliminaron antes. Entonces cambia de div a UL. No necesitamos subir la clase de menú, el ID de contenedor o la clase de contenedor para este, que podamos eliminarlos, y todo lo demás podemos dejar tal como está, y luego guardar eso. Tan solo para terminar el Menú Pie de Página, añadiremos las dos últimas páginas, así que Ir a páginas y luego Agregar Nuevo. Entonces vamos a agregar en la página Acerca de Nosotros, entonces Acerca de Nosotros y luego golpear “Publicar”, y luego “Agregar nuevo”. La última página que entra en el Menú Pie de Página es la página Contáctanos, por lo que Contáctenos y luego “Publicar”. Después agrega estas dos últimas páginas al pie de página, así Apariencia y Menús, y selecciona el Menú Pie de página, luego selecciona la página Contáctanos y la página Acerca de Nosotros que acabamos de crear aquí, “Agregar al Menú”, para luego reorganizarlos en el orden correcto. Entonces la página principal fue Acerca de Nosotros, luego fue Contáctenos, luego el Blog, y las Últimas Noticias, luego golpeó “Guardar Menú”, y luego pasó al sitio. Entonces Parece que hemos logrado agregar estas páginas, el menú superior también, así que las eliminaremos en tan solo un momento. Pero si bajamos al fondo, podemos comprobar si todo está funcionando correctamente. Entonces selecciona el Blog, ahí está nuestra sección de blog y las Últimas Noticias. Eso se ve bien. Aún no hemos creado la página Acerca de Nosotros o Contacto. Simplemente eliminaremos estos enlaces de menú de la parte superior. Por lo que de nuevo al Dashboard, Apariencia y Menús. Después selecciona el Menú Principal desde la parte superior, y podemos quitarlos fácilmente del menú seleccionándolos. A continuación, seleccione y elimine. Haga lo mismo para la página Contáctenos, y luego guarde ese menú. Entonces eso se ve como debería ahora. Ahora, tengo todos los menús funcionando correctamente en la página web. Gracias por ver. Cuídate.
34. Añadir los widgets de la barra lateral: Bienvenido de nuevo. En este video, te
voy a mostrar cómo hacer que nuestra barra lateral sea más modular agregando widgets de WordPress. Un widget de barra lateral es esencialmente solo uno de los bloques que ya hemos creado, pero lo vamos a poner en WordPress. Eso le da al administrador del sitio la oportunidad reorganizar y cambiar las cosas sobre en la barra lateral si lo desean. El camino para empezar, es si pasamos a los Códecs y si buscamos la sección sobre Temas Wigdetizing. Es bastante fácil conseguir que los widgets funcionen en nuestro tema. Al minuto, si pasamos al Dashboard, y luego si entramos al Apariencia, actualmente no
hay opción para los widgets. Vamos a cambiar eso agregándolo a nuestro archivo de funciones. Si buscamos la sección sobre cómo registrar un área de widget, y luego copiamos el código de muestra, y luego pasamos al functions.php. Voy a pegar esto justo antes de la función de texto de característica. Pega eso ahí dentro. No necesitamos las etiquetas php porque ya están en estrella al final
del archivo de funciones. Podemos quitarlos. Entonces es solo un caso de cambiar algunos de los valores, por lo que el nombre de nuestra barra lateral va a ser barra lateral. Entonces el ID, podemos cambiarlo a cualquier cosa
que queramos porque usamos la barra lateral en la sección de bloques de este lado, lo
voy a llamar la barra lateral. Voy a llamar a esto un blog. Entonces cuando es un WordPress lo que va antes y después del widget. Si vas al sidebar.php, y lo que básicamente estamos haciendo es reemplazar estos módulos de barra lateral. Tenemos que decirle a WordPress todo el contenido dentro estos módulos está rodeado por el div con una clase de módulo de barra lateral. Cambiemos el div antes del widget para tener la clase igual al módulo de barra lateral, y este es el div de cierre. Ahora eso está bien. Después antes y después del título, volvemos a la barra lateral. El título como rubro h4 o nivel 4. Cambia antes título para ser h4, y luego h4 después del título y luego guarde eso. Si vuelves a los códecs de WordPress, y luego desplázate hacia abajo hasta cómo mostrar nuevas áreas de widget, necesitamos copiar el código de muestra y pegarlo en nuestra barra lateral. Copia esta sección. De hecho, solo
voy a copiar todo sin las etiquetas php. Copia y ve al sidebar.php, y luego desplázate hasta la parte superior y pega esto justo antes de todo el resto del código. Damos a nuestra barra lateral el ID de sidebar_blog. Cámbialo a zonas donde está el derecho de casa. Cambiaremos esto a sidebar_blog, y lo mismo en la parte inferior, lo cambiaremos a sidebar_blog también. Entonces guarde eso. Ahora si volvemos al Dashboard y presionamos “Refrescar”, deberías ver que cuando vamos a la Apariencia, ahora
tenemos una opción de widgets. Seleccione eso. Ahora podemos ver una lista de todos los widgets disponibles, y también podemos hacer unos personalizados. Todo lo que necesitamos hacer es simplemente arrastrar estos a la barra lateral, y la mayoría de los widgets que agregamos van a ser los personalizados, que sean los mismos que nuestro sitio bootstrap. Pero el primero que queremos agregar es un cuadro de búsqueda. Todavía no tenemos un cuadro de búsqueda en el sitio, así que ¿por qué no usar un widget prehecho? Simplemente arrastra el cuadro de búsqueda a la barra lateral, y voy a crear el widget Acerca de nosotros. Eso haremos con el cuadro de texto. Arrastre el texto hasta la barra lateral. El título para esto fue Acerca de. Para el contenido, podemos copiar el texto del sidebar.php. Copia todas las etiquetas, luego pegarlas ahí dentro. No necesitamos la etiqueta p para que podamos quitarlos. Yo quiero cerrar en etiqueta p ahí. Guarda esos y selecciona “Agregar automáticamente párrafos”. Podemos cerrar ese ahora, y también el cuadro de búsqueda. Antes de que vayamos más allá, solo
echemos un vistazo al sitio, y veamos si todo funciona bien. Dirígete al blog. Parece que tenemos error en el sidebar.php. Dirígete al sidebar.php y está en la línea 5. Eso parece que sólo nos faltan algunas etiquetas de apertura, cierre de php. En la parte superior, abre el php, y entonces eso mucho es lo cerrado ahí dentro. Con arrancar la etiqueta, cerrar y arrancar la etiqueta ahí. Sólo tenemos que cerrar eso y ahorrar,
y eso debería estar bien ahora, así que refresca. Bien. Ahora tenemos el cuadro de búsqueda en la barra lateral. Tenemos la sección Acerca de Nosotros mostrando dos veces. Entra en la barra lateral y borra el módulo de barra lateral para la sección Acerca de Nosotros y guarda. Ahora nos acaba de quedar con el widget About Us. A continuación haremos los archivos y las categorías. Volver a WordPress, en el Dashboard, Apariencia y Widgets. WordPress lo hace realmente fácil para nosotros en los archivos y categorías. Se puede ver a la izquierda los archivos y categorías ya han sido creados para nosotros. Arrastra los archivos y dale título. Después guarda, y haz lo mismo con las categorías. Deja caer el final justo debajo. Darle un título de categorías, y guardar. Entonces podemos eliminar estos ahora de nuestro pie de página. El módulo de barra lateral para archivos, puedo ir y también para las categorías, vamos a hacer eso también. Por último, haremos la sección Seguidores, este va a ser un widget de texto como la sección Acerca de Nosotros. Si bien estamos en la barra lateral, vamos a copiar el contenido. Necesitamos copiar la fuente de algunos iconos para Facebook,
Google, Pinterest, y YouTube. Cortarlas. En realidad puedo simplemente eliminar el módulo ahora, y guardar eso. Vuelve a los widgets, arrastra un cuadro de texto más a la barra lateral. El título es Seguidores. Pega en el contenido y pulsa “Guardar”. Después de volver al blog y comprobar, todo está funcionando. Bueno con la Búsqueda, el Acerca, los Archivos, Categorías y la sección de redes sociales. Genial. Mucha de estas barras laterales se ve casi igual que antes, ahora
es mucho más modular y permite al usuario conectado o al administrador del sitio poder cambiar el sobre o agregar nuevos widgets. Eso es más o menos todo hecho hacer este bit. Yo solo quiero agregar un poco de CSS, particularmente para el cuadro de búsqueda sólo porque el botón Buscar necesita un poco de espacio. También haré que el cuadro de búsqueda se parezca más los botones de entrada que utilizamos en el sitio web de Bootstrap. Pasemos al style.css, y luego copiemos un comentario. Después haremos una sección de barra lateral. Justo por encima del estilo móvil, cambia el comentario para ser barra lateral. Cada uno de los módulos de barra lateral tiene una clase de módulo de barra lateral. Empezaremos con eso. El tipo de módulo de barra lateral, y luego empezaremos con la entrada. Para espaciar, vamos a tener algún margen de 10 píxeles. Estableceré el ancho máximo para que sea del 100 por ciento. Ahorra y echa un vistazo. Ahora hay un poco de espaciado alrededor de las entradas. A continuación necesitamos obtener el ID de la clase para el botón de entrada. Entra en las herramientas de desarrollador y luego selecciona la lupa, y haz clic ahí. Podemos ver que tenemos el ID de searchsubmit, y luego volver a la hoja de estilo. Crea el ID. De hecho, en lugar de poner los estilos o duplicar los estilos en la barra lateral, sólo
vamos a agregar estos, abrir la sección global. Si buscamos los estilos para el botón, Default, vamos a estar usando exactamente los mismos estilos para esto. También podemos agregar esto al final. El ID fue searchsubmit, y luego guarde eso. También vamos a añadir el hover. ID de búsquedaenviar, y luego pasar el cursor. Guarda eso, luego refresca. Ahora eso está funcionando, así que tenemos el mismo estilo para el botón, y hover también funciona. Eso va, eso funciona todo y así es como añades widgets personalizados a los temas de WordPress.
35. Página sobre nosotros: En este video, vamos a crear la página Acerca de Nosotros. Ya tenemos la plantilla para eso en el diseño bootstrap, por lo que va a ser bastante sencillo de hacer. Entra en tu editor de texto, crea una nueva página, y guarda esta página como page-about.php, y para empezar, vamos a copiar la plantilla de noticias de página. Entonces copia el contenido y pega esto en la plantilla sobre. No necesitamos la barra lateral ni la sección de blog, por lo que podemos prácticamente eliminar todo de esta página. Eliminaremos eso y cambiaremos los comentarios en la parte superior para que el nombre de la plantilla sea Sobre Nosotros. Después ve al Panel de WordPress, y luego a continuación, vamos a añadir esta plantilla a la página que creamos. Entonces ve a las páginas y luego busca la página Acerca de Nosotros y toca Editar. Después podemos cambiar la plantilla a la plantilla Acerca de nosotros, y luego actualizar esa página. Ahora podemos ir al sitio de Bootstrap. Si abrimos la carpeta y luego abrimos la página Acerca de nosotros en el editor de texto. Eso reduciré hacia abajo, y luego arrastraré about.html al editor de texto, y luego podremos copiar toda la sección y copiar toda la sección Acerca de nosotros. No necesitamos el encabezado. Ya tenemos eso. No necesitamos sección de características. Eso se hace en WordPress. Copia la sección Acerca de Nosotros, todo el camino hasta la etiqueta de la sección de cierre. Copia eso, y luego vuelve a la página Acerca de Nosotros y pega eso entre el encabezado y el pie de página. A continuación solo necesitamos corregir la ruta del archivo de imagen, así que solo voy a copiar el PHP desde la página de índice. Basta con buscar una imagen. De hecho, necesitamos la primera página para eso. Entonces copia la ruta del archivo PHP y luego entra en la página Acerca de Nosotros. Empezaremos desde arriba. Iremos con la imagen divisoria para empezar, así que pega eso en, y asegúrate de que tienes la barra inclinada hacia adelante antes de la carpeta de imágenes. Después desplázate hacia abajo. Agrega esto a todo el resto de las imágenes. Después golpea Save, y luego dirígete a la página Acerca de Nosotros y mira si eso está funcionando. Por lo que hasta abajo en el menú del pie de página, la sección Acerca de nosotros. Eso todo parece estar funcionando. Sólo necesitamos cambiar el texto en la imagen destacada y hacemos el en las funciones, la misma manera que todo el resto. Por lo tanto, encuentra la función de texto de característica. Vamos a permitir que WordPress tire del título de la página de la misma manera que hemos hecho con la plantilla de noticias. Entonces tendremos el nombre del sitio de Tranquil Spa, y luego la siguiente línea va a ser el título de la página. Si agregamos esto a la misma declaración elseif, entonces copia la plantilla de página. Copia cada plantilla de página, y luego los corchetes, y pon el símbolo todo, que son las dos tuberías, y luego pega esto en. Pero esta vez, la plantilla de página es para la página-about. Guarda eso y actualiza la página. Eso está funcionando todo. Tenemos el título del sitio,
y luego el título de la página a continuación. Eso está todo terminado ahora con la página Acerca de Nosotros.
36. Página de "Contacto": Esta es la página Contáctenos que creamos en la plantilla Bootstrap. Ahora vamos a convertir esto a WordPress de
una manera similar a la página de arco que creamos en el último video. Por lo que va a ser bastante sencillo
convertir ahora a la mayor parte del trabajo arduo en Bootstrap. Entonces como de costumbre, vamos a crear una nueva página y servicios page-contacts.php. Entonces vamos a usar la plantilla de noticias de página para empezar. Entonces copia todo el contenido y luego pegarlo en. Después vuelve a los comentarios. Haremos lo mismo que antes, pero esta vez con cambios a Contáctenos. Entonces guarde eso. Si vas a WordPress y luego al tablero, y luego buscas la página que creamos. Por lo que el Contáctenos y edite. Después cambia la plantilla que vamos a usar para ser Contáctenos y luego obtén esa página. Después copia de seguridad al editor de texto. Entonces vamos a eliminar toda la sección de bloques y también la barra lateral, todo el camino hasta el pie de página. Entonces dejando el encabezado y el pie de página adentro. Entonces a continuación necesitamos encontrar la página Contáctenos que creamos en Bootstrap. Entonces vuelve a la carpeta traquil-bs. Después arrastra el contacto o HTML a tu editor de texto. Después copiaremos esta sección que es la barra de contacto. Entonces busca los comentarios de la sección Contáctenos. Después copia todo el camino hasta la etiqueta de cierre y sección, que está justo antes del pie de página. Entonces copia eso. Después pega esto entre el encabezado y el pie de página. Después de volver a la parte superior de la página. Por lo que un par de pequeños cambios para hacer en esta página. En primer lugar, obtuvimos el encabezado de nivel dos, que es sólo texto estático. Entonces vamos a cambiar esto para que sea WordPress php. Entonces php, el título de subrayado. Entonces ciérralo. Ahora usa php, es pull en el título de la página. Tenemos que arreglar las rutas del archivo de imagen. Entonces voy a volver a la portada y también copiar la misma parte que hicimos la última vez, que es el php. Nuevamente, no te olvides de la barra delantera. Por lo que vuelve a la página de contacto y pega esto antes de la imagen dividida. Ya no veo estos. No, creo que está bien. Entonces veamos que eso funciona. Así que vuelve al sitio. Después, en el menú de pie de página selecciona Página de contacto. Está bien, bien. Por lo que lo único que hay que hacer es la sección de tecnología de características. Por lo que ya debemos saber hacer esto, si vas a Functions.php, y usaremos el mismo nombre de info del blog y también el título de la página. Por lo que es bastante sencillo de agregar. Podemos agregar esto a la misma función. Entonces copia esta plantilla de página y luego paste-up a continuación. Tenemos que poner el enlace impresionante y cambiar de página sobre los contactos de página. Está bien. Así que guarde y luego refresque. Entonces esa es la página Contáctenos ahora terminada, y únete a mí en el siguiente video cuando creemos la página de decaimiento.
37. Página personalizada 404: Este video se trata de crear una página 404 personalizada. Una página 404 es donde vas cuando no se encuentra la página. Entonces esencialmente cuando estás un poco perdido en la página web. Si vamos a la URL en la barra superior y escribimos en página no reconocida, como muchas A's, y luego tocamos “Enter”, entonces esta es la página a la que te llevan. Tenemos el bucle de WordPress y parte de la información de la barra lateral, que es una de las plantillas de copia de seguridad. Pero queremos algo un poco más bonito y también quizá algunas opciones y algunos enlaces para que el usuario vuelva a subir a camión. Si pasamos al Editor de texto y como de costumbre, crear una nueva página y guardar esta página como 404.php, y copiar la página Acerca de. Utilizamos esto como base para nuestra página 404. Pega eso en y guarda. Cambia el nombre de la plantilla en la parte superior. Vamos a llamar a esta página 404. Refresca eso. Ahora tenemos la plantilla About Us siendo usada cuando hemos encontrado la página 404. En primer lugar, voy a empezar en el área de texto de la característica. Simplemente agrega un poco de texto solo para que el usuario sepa que están perdidos y que necesitan volver a encarrilarse. Vaya al function.php, y luego en el cierre del rizado después del título, agregaremos otra declaración elseif. Pero esta vez va a ser si la página es 404 y luego las llaves. Entonces si la página es la página 404, sólo
vamos a igualar algún texto. Puedes poner el texto que quieras pero voy a poner “Whoops, estamos un poco perdidos”. Entonces a ver si eso está funcionando bien. Tenemos un problemita, veamos eso y veamos qué es. Creo que solo le falta un punto y coma al final. Ahora tenemos el texto que aparece ahí. Lo que voy a crear es que voy a eliminar el texto de muestra, y luego vamos a crear cuatro divs separados, que vas a compartir con algunos enlaces. Los enlaces van a ser a Archives, Categories, Recent Posts, todo por las etiquetas. Vamos a poner estos enlaces con
los widgets de manera similar a cómo los usamos en la barra lateral. Pasa a la plantilla 404. En lugar de About Us como el encabezado de nivel 2, sólo
vamos a poner un texto para decir: 'Volvamos a ponernos en marcha”. Abre el PHP_Echo y cierra el PHP. El texto va a ser : “Volvamos a ponernos en marcha” con dos puntos al final. Ahí hay un problema. Echemos un vistazo. Debido a que hemos utilizado una cotización simple, necesitamos cambiar las cotizaciones circundantes para que sean dobles, y luego no olvides el punto y coma al final. Se ve ahora tenemos el, Volvamos a la pista de nivel 2 rumbo. Podemos eliminar el texto de muestra después del Lorem ipsum. Elimina el primer párrafo y también el segundo párrafo, pero mantén la fila circundante reutilizaremos al alza. Vamos a crear cuatro divs separados para los widgets. Entonces agrega un div con una clase, la clase bootstrap de col-sm-6. Entonces sólo tienes que copiar este div y pegar tres veces más. Entonces tenemos cuatro secciones. Tocamos los widgets anteriormente en el curso en la sección de la barra lateral. También podemos utilizar widgets en diversas partes de oferta del cartel. Vamos a añadirlos aquí. Abre el PHP y luego está tirando del widget. Utilizamos the_widgets, y luego entre paréntesis usamos el nombre del widget que queremos tirar. En primer lugar, para conseguir los archivos, usamos WP_Widgets_Archives, y luego un punto y coma al final de ahí. Las categorías son exactamente las mismas. Pero en lugar de archivos son categorías, y luego vamos a proporcionar un enlace para las publicaciones recientes. Entonces pega eso en. Pero esta vez entre paréntesis, es WP_Widgets, luego Recent Posts o Recent_Posts. Después para obtener una lista de las etiquetas disponibles, en lugar de archivos, es Tag_Cloud. Entonces Tag_Cloud y guarde eso, luego refresca el navegador. Parece que hay un problema con las publicaciones recientes. Eso tiene que ser reciente, así que quita el s al final ahí. Ahí vamos. Ahora el usuario ahora puede volver a una página de trabajo seleccionando algunos de los enlaces a continuación. Por cierto, si quieres utilizar algún widget diferente o diferentes enlaces, puedes encontrarlos en los códecs bajo la sección de widgets. No necesitas usar los cuatro que he mostrado ahí. Ahora todo está funcionando, solo quiero agregar un poco de estilo, solo para que encaje con el resto de la página web. Vamos a poner el mismo borde de un píxel con las esquinas redondeadas alrededor de cada una de las cuatro secciones. Vaya al style.css y creará una sección 404. Copia cualquiera de los comentarios, luego dirígete a la derecha hacia abajo. Voy a hacer que los comentarios sean la página 404. Entonces los widgets, tienes una clase de widgets. Para mantener el estilo consistente, vamos a usar los mismos estilos que usamos para la barra lateral o los módulos de barra lateral. Si subes a la sección de barra lateral, busca la clase de módulos de barra lateral, y luego copia todos estos. Después pega estos de nuevo en la sección del widget. Guarda eso, luego echa un vistazo. Entonces necesitábamos eso ahora, eso se ve mucho mejor, y simplemente se ve un poco viejo con las cajas estando en alturas pares. Entonces solo para que eso se vea un poco mejor, voy a agregar una altura mínima de 300 píxeles y luego refrescar eso. Ahora asegúrate de que las secciones con poco contenido ocupen un poco más de altura. Gracias por ver, y ese es el final de nuestra página 404.
38. Organizar nuestro código utilizando la parte de la plantilla de get: Al construir sitios web o hacer cualquier tipo de codificación en general, una cosa que queremos intentar y evitar es volver a escribir el mismo código una y otra vez. Si entramos a nuestra página de inicio, tenemos la sección de instalaciones. Hemos usado es un par de veces en la página web ahora. Por lo que hemos reutilizado el mismo código. Entonces tenemos que hacerlo en primera plana. Si también bajamos a la página sobre nosotros, reutilizamos la misma sección en la parte inferior. También está en la página 404 que creamos en el último video. Una forma de que podamos reducir la cantidad de líneas de código en nuestro sitio web, y hacer que nuestro sitio web sea un poco más organizado, es utilizar la parte get template. Esto es básicamente solo una sección de nuestro sitio web, que pones en su propio archivo. Podemos entonces llamarlo a nuestra página la
misma manera que hicimos con el encabezado y el pie de página. Para obtener el código de esta sección, vamos a crear una nueva página. Voy a llamar a esto el content-facilities.php. Empecemos por ir a la portada de nuestra página web. Si buscamos la sección de instalaciones, que es esta parte aquí. Es el div con la clase de fila en instalaciones. Busca la etiqueta de cierre y fila. Entonces recorta este contenido. Entonces corta eso asegurándote de que aún dejes el contenedor en su lugar. Entonces en el archivo que acabamos de crear, podemos pegar esto en y luego guardar aquello. Después vuelve a la portada, y en la misma sección que acabamos de eliminar este contenido, abre las etiquetas PHP. Entonces usamos gets_templates_part. Entonces entre paréntesis usamos el nombre de la plantilla que acabamos de crear. Sus contenidos-instalaciones. Guardemos eso y vayamos a la portada y veamos si funciona bien. Sí, así que eso es todo. Tan solo para demostrar que lo está sacando de la plantilla. Si solo cometemos un error ortográfico ahí y luego refrescamos. Ya verás que eso se está quitando. Corregiremos eso y guardemos. Copia esta sección de PHP, y haremos lo mismo en la página 404 de la página de bowers. Entonces comenzaremos con la página sobre, luego buscaremos el div con la clase de instalaciones. Encuentra en las etiquetas cerrar y fila, y elimina esta sección, y luego pegarla en PHP. Lo mismo con la página 404, así como la etiqueta de cierre de instalaciones de fila. Coloca pasta en la parte get template y toca “Save”. Pasemos a la página web y veamos si está funcionando. Sabemos que todo de la página está funcionando bien. Vayamos a la página Acerca de Nosotros y justo ahí. Escribamos una dirección que reconoceremos y comprobamos a la página 404. Ahí está la sección de instalaciones otra vez en la parte inferior. Podemos utilizar esto con cualquier sección del sitio web que
desee o si crea en su propio tema personalizado. Si encuentras que creas en el mismo HTML una y otra vez, solo ponlo en su propia plantilla y tira hacia adentro obtienes parte de plantilla. Realmente hace que tu página web sea mucho más organizada. Entonces eso es todo, y te veré en el siguiente video donde
crearemos la plantilla personalizada para la página de búsqueda.
39. Plantilla de búsqueda personalizada: Bienvenidos de vuelta chicos. Este video se trata de crear la plantilla de búsqueda. Hace algunos videos cuando creamos el widget de barra lateral, también
agregamos un cuadro de búsqueda. Si buscas algo en el cuadro de búsqueda, como noticias, puedes ver que debería funcionar más o menos directamente fuera de la caja. No hay nada que realmente tengamos que hacer para que eso funcione. Pero una cosa que podemos hacer es darle a nuestro tema una plantilla de búsqueda personalizada porque por el momento, es solo por defecto volver a la página de índice. Es por ello que tenemos el diseño bastante similar al blog. Lo cual está bien por ahora porque queremos que la página de búsqueda se vea como el blog. Pero crearemos una plantilla personalizada para que podamos agregar el texto de la característica en la parte superior y también mostraremos el término en la sección de características
para la que el usuario investigó y también imprimirá una declaración en caso de que no se hayan encontrado resultados de búsqueda. más al Editor de texto, nueva página, guardar como search.php. Se ve bastante similar a la página del blog. Copia el contenido de la página de índice para empezar, y pega eso en. Sólo para comprobar que la plantilla de búsqueda está funcionando en realidad y está anulando la página de índice solo escribe algún texto aleatorio ahí dentro y guarda y luego refresca. Ahí vamos. Sólo podemos ver que el texto que creamos está en la parte superior de ahí y esto significa que la plantilla está entrando en vigor. Eso lo vamos a mover ahora. Prácticamente todo el trabajo que necesitamos hacer ahora para esta plantilla está en la página de funciones, porque vamos a estar trabajando en la sección de encabezado para crear el texto de la característica. Pasa al functions.php y luego por debajo del 404, agregaremos otras declaraciones elseif justo en el corsé rizado allí. Entonces elseif is_search. En la parte superior del texto, solo
haremos un Blog Oficial de Tranquil Spa. Copia eso y luego pega eso y veamos si eso está funcionando. Debajo de eso añadiremos una etiqueta de ruptura y un punto y coma al final ahí. Entonces debajo de esto vamos a imprimir los resultados de búsqueda o el término de búsqueda que el usuario ha buscado y en lugar de hacer eco de esto al navegador, vamos a usar printf y luego entre paréntesis estamos va a empezar escribiendo algo de texto sin formato. resultados de búsqueda para y luego el colon. Después para mostrar en los resultados de la consulta de búsqueda use el porcentaje y el s y luego ponga una coma después de esta sección, y luego use la función get_search_query, lo que get_search_query y todo esto necesita estar rodeado de corchetes. Entonces uno antes, uno al final con punto y coma. El motivo por el que estamos usando printf en lugar del eco es porque lo usamos en formato en los resultados de búsqueda y printf nos permite hacerlo. Guarda eso y comprueba si está funcionando tocando “Refresh”. Puedes probar esto un par de veces más para comprobar que está funcionando. tenemos la noticia como el término de búsqueda actual, así que cambiemos esto a pelo y eso parece estar funcionando bien. Haré una más. No voy a publicar eso, así que solo revisaremos a Lorem el Lorem Ipsum y deberíamos conseguir mucho puesto por esto. Todo eso está funcionando bien. Si notas cuando buscamos algo antes como pelo, recibimos el mensaje de error de lamentar no hay publicaciones que coincidan con tus criterios. Queremos que esto sea un poco más específico a la búsqueda en lugar de a los posts. Ve al search.php y luego desplázate hacia abajo hasta la parte inferior, y así encontramos el mensaje de error ahí, así que solo elimina eso y en su lugar agregaremos nuestro propio mensaje personalizado de lo siento, no hay coincidencias para y luego está tirando de la palabra que el usuario buscado. Simplemente agregaremos al final ahí la función de get_search_query y luego el punto para concatenar, texto
pequeño sobre eso así que empiece abriendo
nuevamente las cotizaciones y una coma de favor busque de nuevo. Guardemos eso y echemos un vistazo. Ahí hay un mensaje de error así que echemos un vistazo a eso. Fue un error ortográfico ahí, eso debería ser get_search_query. Ahora eso está funcionando tenemos el mensaje de error. Lo siento, no hay coincidencias para, sólo
necesitaré al espacio después de la palabra para y luego refrescar. Para el cabello, por favor busque de nuevo. Gracias por ver, y así es como creamos una página de búsqueda personalizada en WordPress.
40. Campos personalizados de nivel avanzado, parte 1: Bienvenido a este video sobre campos personalizados avanzados. Por ahora todos los cambios que hemos hecho hasta ahora al tema, hemos hecho codificar en el editor de texto, aunque si el usuario final de tu tema quiere cambiar alguna información, algún texto o algunas imágenes, necesitamos proporcionar una manera para que cambien el contenido de forma rápida y sencilla sin saber
codificar y una gran manera de hacerlo es agregando campos personalizados avanzados. Si vas al sitio web, que es advancedcustomfields.com, este es el sitio web para un plugin realmente fácil de usar, que vamos a implementar en nuestro tema en este video. Debido a que este es un plugin, podemos agregar esto fácilmente en el tablero. Acceda al panel de control
y, a continuación, seleccione plugins, luego agregue nuevos. En caso de que no hayas usado un plugin de WordPress antes, es solo una forma de agregar funcionalidad extra a la llamada de WordPress, y hay miles de plugins diferentes de WordPress disponibles, y realmente vale la pena una búsqueda rápida para encontrar algunos grandes características para agregar. Voy a buscar campos personalizados avanzados, y luego Enter. La versión que voy a usar es la primera que aparece, que son los campos personalizados avanzados, y luego selecciona “Instalar ahora”. Una vez que tengas el mensaje de éxito en la parte inferior de ahí, luego haz clic en “Activar Plugin”. Ahora eso está activado, obtenemos una nueva opción en el tablero, así que baja a campos personalizados y haz clic en eso. Te voy a mostrar cómo hacer esto pasando por la portada, cambiando algunas de las áreas de ahí, como el texto en las secciones de oficina. Voy a entrar a un grupo de campo, que es un grupo de campos que se quiere cambiar. Selecciona el botón “Añadir nuevo”, y mantén esto organizado. Voy a llamar a esta sección la primera página, luego publicar eso, y luego voy a agregar un campo, y un campo es una de las áreas que se quiere cambiar. Si entramos en nuestra portada, así que de nuevo en el anfitrión local y el sitio Tranquil. Voy a empezar por cambiar el texto de la característica en el frente ahí, y esto va a ser un campo. De vuelta en el tablero, la etiqueta de campo es el nombre, por lo que llamaremos a esto el texto de la característica, y si solo presionas Tab, WordPress generará automáticamente nombre de campo, y este es el nombre que agregaremos al código más adelante. El tipo de campo está bien como texto, y luego podemos agregar algunas instrucciones que aparecen en el tablero para el usuario. Voy a cambiar esto para usar este campo para cambiar el texto de la característica principal, y requerido, sí, no siempre estarás ahí. Puedes crear un valor predeterminado si quieres, pero como es requerido no es realmente necesario por ahora. Agrega este campo ahí. Ahora tenemos nuestro campo de texto de característica incluido, y tenemos el nombre de campo de feature_text. Simplemente voy a copiar ese nombre, y luego en la sección de funciones, si buscamos la función FeatureText, y en la sección de portada, podemos eliminar este mensaje de spa premium totalmente responsive. Elimina eso, y luego ponemos en la función, the_field, y luego entre paréntesis, ponemos en el nombre del campo que acabamos de crear. Ya habíamos copiado eso antes, así que pega en feature_text y guarde. Si vuelves a la página de inicio y refrescas. No hay nada ahí por ahora porque necesitamos agregar esto al tablero. Debido a que solo queremos que estos campos personalizados aparezcan en la primera página, necesitamos cambiar la ubicación para que sea el tipo de página igual a la página principal, y luego actualizar eso, así que vuelve a la parte superior y pulsa “Actualizar”. Ahora si vamos a la primera página y luego editamos la página, y luego nos desplazamos hacia abajo, deberíamos ver la sección de texto de la característica que acabamos de crear. Ahora tenemos esto como parte del tablero. El usuario puede agregar o cambiar diferentes partes del sitio web sin conocer ningún código. Se puede volver a poner el encabezado, así TOTALMENTE RECEPTABLE, y la etiqueta de break, TEMA
PREMIUM SPA, y la etiqueta de break, PARA WordPress,
y actualizar, para luego ver la página. Ahí vamos, así que ese es nuestro texto de nuevo en su lugar. Si volvemos a editar página, una cosa que solo quiero eliminar es el editor de contenido porque nuestra página se genera a través de la plantilla. Para eliminar eso, solo tienes que ir a los campos personalizados avanzados, y luego en la sección Ocultar en pantalla, solo revisa el editor de contenido, luego actualiza, y luego actualiza la sección de edición de página, y ahora eso se ha ido ahora. Ahí tienes, así que así es como añades un campo personalizado en WordPress. Continuaremos con la portada en el siguiente video. Empezaremos en campos personalizados hasta la última sección de Office.
41. Campos personalizados de nivel avanzado, parte 2: Ahora entendemos un poco más sobre cómo usar campos personalizados
avanzados cambiando el área de texto destacado. Vamos a continuar con la portada y les voy a mostrar cómo hacerlo para la sección de ofertas más recientes. Vuelve al Panel de control, y luego a la pestaña Campos personalizados, y luego haz clic en la “Página principal”. Porque vamos a estar creando las acciones de oferta especial gratuita, lo que vas a ser bastante similar, voy a añadir una pestaña a sección está desactivada. Agrega un nuevo campo y la etiqueta para esto puede ser Oferta 1 y el tipo de campo va a ser una Tab, y luego agrega eso. Después una segunda pestaña para la Oferta 2, y cambia el campo de texto para que sea una Tab, y lo mismo para la oferta número 3. Nuevamente, cambia eso para que sea una Tab, y luego cierra. Ahora, empecemos con la Oferta 1. Esta vez vamos a añadir un campo. Este campo será el precio de la oferta. Escogeremos el nombre del campo generado. Porque este es el precio, necesitamos cambiarlo de texto a ser número, ¿requerido? Sí. Simplemente cerraré el campo. Entonces ahora tenemos el precio de la oferta. Esto va a ser para la primera oferta. Por lo que podemos simplemente arrastrar y poner esto bajo la pestaña Oferta 1. Entonces crearemos ahora el nombre de la oferta. Esto puede estar bien como texto, ¿requerido? Sí, y luego cerrar. Entonces poner es nombre de la oferta justo debajo del precio de la oferta. Entonces porque cada una de estas ofertas especiales tiene dos líneas de texto, haremos dos campos separados. Por lo que Oferta Línea 1, pondremos eso como se requiera también. Entonces, agrega también la línea de oferta 2, está bien. ¿Se requiere texto? Sí. Voy a cerrar nuestros campos y también a cerrar ese. Después arrastra estos hacia arriba en la primera pestaña. Ahora, porque vamos a utilizar los mismos campos para la oferta 2 y oferta 3. Si solo entramos en los campos de oferta 1, podríamos hacer click en “Duplicar”. Voy a mantener el texto del precio de la oferta como el mismo. Pero necesitamos cambiar el nombre del campo, que necesito ofer_price_2, luego cerrar. El que acabamos de crear, que es el offer_price_2, luego arrastra esto hacia abajo debajo de la pestaña Oferta 2, que está justo ahí. Debajo del precio de la oferta, duplicaremos el nombre de la oferta. Simplemente elimino la copia y cambio esto a offer_name_2 para el nombre de campo único. Entonces cierra esto. Offer_name_2, arrástrelo hacia abajo a la pestaña Oferta 2 debajo del precio. Por lo que voy a necesitar duplicar la Línea de Oferta 1 y la Línea de Oferta 2. Entonces duplique esa. Oferta Línea 1, manténgalo en eso. Esto voy a cambiar el nombre único a offer_2_line_1, y luego cerrar. Por lo que offer_2_line_1, arrastra esto hacia abajo a la segunda sección otra vez, justo debajo del nombre, y podemos duplicar esto. Esta vez, su Línea de Oferta 2. Esta vez, su offer_2_line_2, y cerrar. Por lo que espero que eso tenga sentido hasta ahora. Entonces tenemos la pestaña para la línea de oferta 1 y la primera oferta tiene un precio, un nombre, y luego las dos líneas, y luego una segunda pestaña para la oferta 2 y otra vez, tenemos el precio, nombre, y las dos líneas, asegurándose de que cada uno tenga un nombre de campo único. Ahora, sólo necesitamos hacer una tercera vez para la oferta 3. Por lo tanto duplicar el precio, mantener el nombre el mismo abajo offer_price_3. Después cierra ese campo y arrastra el offer_price_3 hasta la oferta 3. Después del precio de la oferta, necesitamos nombre de la oferta nuevamente. Por lo que duplicamos offer_name_3. Después cierra eso y arrastra el nombre de la oferta 3 hacia abajo por debajo del precio. Entonces, ya casi estamos terminados, solo
necesitamos copiar la línea 1 y la línea 2. Así que oferta la línea 1 y luego el nombre del campo es offer_3_line_1, y luego cierra, y arrastra eso a su lugar correcto y duplica la línea 2, esta vez el nombre único es offer_3_line_1, y luego arrastra eso hasta el fondo. Ahora, no tocamos el botón “Captación”. Te mostraré por qué lo pondremos en pestañas ahora. Si pasas a la página de inicio y luego seleccionas “Editar página”, ahora tenemos la Oferta 1, Oferta 2, y Oferta 3 en pestañas individuales mientras que si no pusiéramos las pestañas, tendríamos una larga lista de campos y podría resultar confuso para el usuario. Entonces si entramos en el front-page.php y luego podemos agregar el PHP para enlazar a los campos personalizados. Así que baje a la última sección de ofertas cual realmente va a decidir pero para darle una habitación pequeña. En primer lugar, si eliminamos el precio de la primera oferta y luego abrimos el PHP, y luego usamos lo mismo que el último video, the_field, y luego entre paréntesis, escriba el nombre del campo. El primero, si volvemos al Dashboard en los Campos Personalizados, el precio de
la oferta tenía el nombre del campo de la oferta en este precio de llamada. Vincularemos eso ahí dentro, y luego copiaremos esto y luego pegamos esto en lugar del encabezado nivel 3. A esto se le llama el nombre de la oferta. Entonces cambia offer_price a offer_name. El Pool Familiar, pega el PHP en, y ese es el offer_line_1. Great Day Out se cambia a offer_line_2. Eso es todo para el primer campo, así que si guardamos eso y luego pasamos a la página de inicio y nos desplazamos hacia abajo. Ahora debes ver que tenemos una sección de últimas ofertas vacía porque no hemos puesto el texto en su lugar en la página Editar. Oferta 1, porque esto está todo en blanco, no
tenemos nada apareciendo, pero lo arreglaremos pronto. Sigue bajando a la segunda oferta. Esto es offer_price_2, luego offer_name_2. El texto de la primera línea. Tenemos que cambiar eso a offer_2_line_1, luego offer_2_line_2, luego a la tercera. Por último, el precio. Por lo que offer_price_3. Entonces debajo de ella, offer_name_3. Entonces el texto. Por lo que su offer_3_line_1. Entonces, por último, es offer_3_line_2. Entonces guarde eso. Ahora, nuestra página de inicio debe estar en blanco o al menos la oferta debe estar en blanco de todos modos. Todo lo que queda ahora es volver a poner el contenido en la sección Editar página. Entonces si quieres irte y hacerlo tú mismo, siéntete libre de hacerlo. Si no, sígueme. En primer lugar, el precio de la oferta era de $60, el nombre de la oferta era OFERTA FAMILIAR, línea 1 era Family Pool, luego Great Day Out, luego ve a ofrecer 2. Este era de $120, el nombre de la oferta era PARA LA NOVIA, línea de
oferta 1 era Hair & Make Up, línea 2 era el Paquete Full Pamper, y luego en oferta 3. El precio era de 90 dólares, y este era PASS DE FIN DE SEMANA, línea 1 era Instalaciones Modernas, luego la línea 2 era Regalo Perfecto. Entonces Actualiza eso y ve a la página de inicio. Echemos un vistazo a eso. Simplemente nos falta uno de los campos ahí. Veamos cuál es el problema. Offer_3_line_2, eso se ve bien. Vamos al tablero de instrumentos a Campos personalizados. Echemos un vistazo a eso y veamos cuál es el problema. Creo que ahí tenemos dos subrayados. Sólo actualicemos eso y volvamos a la primera página, actualicemos. Todavía nada en, no hay minutos añadidos de nuevo, voy a cambiar el nombre del campo. Oferta número 3, que necesita agregar el regalo perfecto a eso y Actualizar eso. Ahí vamos. Todo eso está funcionando ahora. Yo sólo quiero agregar una regla horizontal blanca sólo para separar las dos líneas allí. Simplemente agrega esto entre el offer_line_1 y offer_line_2. offer_line_1, justo después de la etiqueta p de cierre, agrega un hr ahí. Después copia. Entonces lo mismo después de offer_line_2, haz lo mismo en la segunda oferta. Después de la línea 1 y 2, lo mismo en la tercera oferta 2. Guarda y luego actualiza el navegador. Ahí vas. Entonces así es como utilizas Campos personalizados avanzados en temas de WordPress. Siéntase libre de continuar y agregar tantos campos como desee a la página web. Pero voy a dejar eso ahí por ahora. Gracias por escuchar y te veremos en el siguiente video.
42. Imágenes de encabezado personalizadas: En el último par de videos, hemos mirado campos personalizados avanzados y hemos permitido al administrador cambiar ciertas cosas como el texto en la página web. En este video, vamos a hacer que nuestro sitio web sea aún más personalizable permitiendo que el administrador o cierto usuario cambie la imagen destacada de fondo sin saber codificar. WordPress nos permite hacer esto en lo que llamamos encabezados personalizados. Si vas a Google, y buscas los encabezados personalizados del códex, debería ser el primer resultado. Entonces yendo a la sección de encabezado personalizado y luego si nos desplazamos hacia abajo por la página, y si buscamos el ejemplo, entonces copia este ejemplo y luego entra en el functions.php. Esto puede ir justo al fondo, pero aún dentro de las etiquetas PHP. No vamos a tener el ancho fijo, por lo que podemos quitar eso o la altura fija. Simplemente voy a comentar estas dos líneas hacia fuera, y luego tenemos la ruta de imagen predeterminada en caso de que el usuario no suba una imagen. Entonces la imagen predeterminada va a ser el lakebg, y esa ha sido nuestra carpeta de imágenes, así que está bien. Guarda eso y muestra una cosa más en la matriz, que es cargas. Esto permite al usuario subir una imagen, por lo que sube igual o mayor que y eso va a ser un Booleano de verdad. Entonces si entramos en el header.php, podemos cambiar la ubicación de la imagen. Entonces encuentra ese archivo y luego desplázate hacia abajo hasta la sección de características en la parte inferior y luego podemos eliminar la fuente de imagen, así que todo entre las comillas dobles. En lugar de tener esta imagen, que se está sacando de nuestra carpeta temática, podemos usar el encabezado personalizado. Entonces, entre las etiquetas php, usamos la función WordPress de encabezado subrayado imagen y guardamos eso y luego pasamos al Panel de WordPress, abajo a Apariencia y luego Personalizar y luego seleccionar la “Imagen de encabezado” y podemos añadir una nueva imagen. Entonces esta es la miniatura de las publicaciones, por lo que subiremos una nueva imagen. Entonces en tu carpeta de imágenes, hay un segundo fondo y ahora cuál es lakebg2. Selecciona eso y Abrir y luego poner en los fondos antiguos del lago textil, luego selecciona eso y salta el cultivo, y luego Guardar y publicar. Entonces una vez que he guardado, sólo tienes que marcar la X en la esquina y luego ir a Visitar sitio y ahí está nuestra nueva imagen como fondo. Entonces ahora eso hace que sea realmente fácil para los propietarios del sitio cambiar la imagen de fondo. Sólo hay que entrar en el Dashboard y personalizar como acabamos de hacerlo, y ese es el final de este video. Entonces gracias por ver.
43. Añadir la clase de publicación: Bienvenido de nuevo. Nuestro tema de WordPress está empezando a tomar muy buena forma. Este video se trata de hacer aún
más personalizables las publicaciones del blog agregando la función de la clase de post. Si quieres conocer algo más de información sobre la clase de post, solo tienes que dirigirte al Códice de WordPress y buscar la función de post class. Bueno, básicamente, agregar una clase de post para nuestro tema permite los autores del tema de WordPress tener un mejor control CSS sobre las publicaciones. Entonces, por ejemplo, podemos establecer valores CSS para las publicaciones por su ID o por el nombre de la categoría. Por lo que quizá podamos tener el blog con diferentes colores de fondo dependiendo del nombre de la categoría o la etiqueta. Entonces como ejemplo, voy a poner esto en nuestro tema, y permitir que el estilo por la ID. Por lo que actualmente si entramos en nuestro blog, y si entramos en la sección de blog. Entonces si entramos en las herramientas de Chrome Developer, haga clic
derecho Inspeccionar elementos, y luego si usamos la lupa, y si buscamos uno de los blogs que tiene la clase de post de blog, luego echar un vistazo, puedes ver que el div tiene una clase de publicación de blog, pero no hay identificación individual. Entonces si quisiéramos darle estilo a los posts individuales, no
pudimos hacer eso porque todos los posts tienen la misma clase. Entonces agreguemos un ID individual a cada una de estas entradas de blog. Entonces solo cerraré eso por ahora, y luego si vuelves al Códice, y debajo del encabezado de uso, copia el PHP. Después ve a la página de índice, y luego encuentra el div con la clase de publicación de blog, y luego simplemente elimina esta línea, y luego pega en el PHP. Por lo que esto ahora agregará un ID personalizado a cada una de las entradas del blog. Acabamos de eliminar la clase de publicación de blog. Entonces, vamos a añadir eso de nuevo ahora, y luego guardemos eso. Entonces si actualizamos el blog, y volverá a entrar en las herramientas de desarrollador, como lo hemos hecho antes, para luego golpear la lupa y seleccionar la entrada del blog. Ahora si miras por el lado derecho, puedes ver que el postal tiene la clase de post de blog, pero justo después de ella, ahora
hay un ID generado. Entonces si queríamos darle estilo a esta publicación individual, ahora
tenemos una referencia para el CSS, y puedes usarlo de manera similar, si quisieras usar el nombre de la categoría o cualquiera de los otros valores de ahí. Nos limitaremos a dirigirnos al CSS y comprobaremos que esto está funcionando bien. Entonces tenemos un ID de entrada de blog de 50 ahí, y luego metemos uno único abajo. Entonces este es el post todo 40, y se puede ver esto es 38, 36, 34. Por lo que nos limitaremos a dirigirnos al style.css. Entonces si vas a la sección de blog, solo
vamos a añadir un estilo aquí. Entonces la id del post-50, que es la de arriba, y para comprobar que está funcionando, sólo le daremos un color de fondo. Ahora voy a poner esto en bbb, y guardar eso, y 50 fue el top. Por lo que voy a golpear Refresh. Entonces ahí vamos. Entonces los colores de fondo cambiaron a gris, y eso se debe a que esto tiene una identificación única. Por lo tanto el estilo solo se llevará a cabo para esta entrada de blog. Por lo que ojalá eso te dé algunas ideas de cómo puedes personalizar y darle estilo a tu tema. Entonces gracias por ver y nos vemos en el siguiente video.
44. Hacer que el formulario de contactos sea funcional: Bienvenido de nuevo. Anteriormente en el curso, creamos la página Contáctenos, y el enlace está abajo en la parte inferior del pie de página. Si entramos a la página Contáctenos, aún
tenemos el diseño bootstrap en la parte inferior para la sección Enviarnos mensaje. Pero en realidad no funciona al minuto porque solo es HTML y CSS. En este video, vamos a asegurarnos de que esto funcione usando un popular plugin llamado Formulario de Contacto 7. Por lo que pasaremos al “Dashboard” y seleccionaremos los “Plugins”, y luego en el cuadro de búsqueda, entonces vamos a “Agregar nuevo” primero, luego en el cuadro de
búsqueda, buscamos el formulario de contacto 7. Formulario de Contacto 7 es uno de los plugins de WordPress más populares para crear formularios de contacto. Pulsa “Instalar ahora”, y solo tienes unos momentos para instalarlo, luego ve a"Activar Plugin”. Una vez que tengas eso instalado, ahora
deberías ver que hay una nueva opción en el panel llamado Contacto. Haga clic en eso, y por defecto ya hay un formulario de contacto ahí como ejemplo. Haga clic en “Editar”, y cuando echemos un vistazo cómo se construye. Por lo que esta sección aquí va a ser nuestro formulario de contacto. En tan solo un momento, vamos a dirigirnos a la plantilla de contactarnos y luego
vamos a cortar la sección de contacto y pegarla. Necesitamos reemplazar algunos de los valores en el formulario utilizando
el mismo formato que requiere el formulario de contacto. Al trabajar con esta forma, cada una de las secciones es una entrada particular. Tenemos que poner el tipo de entrada y también el resto de la información entre los corchetes. Para empezar, echemos un vistazo al primer ejemplo. Esto creará una entrada con el tipo de texto, y luego seguida por la estrella. El star significa que esto es requerido, por lo que el usuario debe ingresar el nombre antes de poder enviar eso, y luego tu nombre, que es el nombre de la entrada, y luego ejemplos bastante similares a continuación. Tenemos el tipo del tipo de entrada de correo electrónico, que es un campo obligatorio, y el nombre es tu correo electrónico. También podemos agregar valores sobre entradas como áreas de texto y botones de envío. Yo sólo voy a eliminar esto por ahora, y luego vamos a pasar a nuestra página de Contacto. Tenemos que ir al page-contact.php, y luego vamos a copiar la sección completa para el formulario de contacto, y luego buscar el div con la clase de pozo, que está justo en la parte inferior, así que busca eso, y luego encuentra el div de cierre o la etiqueta de cierre. Copia toda esta sección. De hecho, voy a cortar eso porque ya no lo necesitas, y guarde eso, entonces podemos pegar esto en el formulario de contacto. El primero que queremos hacer es eliminar las
etiquetas de formulario porque éstas se agregan de nuevo automáticamente. Eliminar la etiqueta de apertura y de cierre. Entonces necesitamos reemplazar nuestros tipos de entrada, así que basta con eliminar la sección de entrada completa, primer lugar para el nombre. Después los volveremos a poner en el mismo formato que miramos antes en el ejemplo. Entonces entre estos corchetes, el primero tiene un tipo de texto y éste es para el nombre, así que queremos que esto sea requerido, así que pon la estrella ahí, el nombre de tu nombre de guión, entonces necesitamos volver a meter nuestras clases, por lo que la clase y luego un colon. Entonces el primero va a ser form-control, y también teníamos un id ahí dentro, así que id con el colon de inputs-name, y también podemos agregar el texto de placeholder, entonces placeholder, no necesitamos un colon después de eso, por lo que sólo un espacio. Entonces entre las comillas, ponga el nombre del nombre. Eso es todo lo que necesitamos hacer para la entrada de nombres. Yo sólo voy a copiar esto y luego bajar a la siguiente entrada, que es el correo electrónico. Entonces borra eso y luego reemplácelo por el código entre corchetes. Esta vez, en lugar de texto, esto tiene el tipo de correo electrónico, y también lo dejaremos como se requiera. El nombre en esta ocasión va a ser tu-email, y aún necesitamos la clase de control de formulario. Pero esta vez el id va a ser inputs-email. En el texto del marcador de posición es simplemente correo electrónico. A continuación, vamos a reemplazar el área de texto para eliminar esa sección, y luego pegar en el nuevo código. Esta vez, el tipo de entrada va a ser textarea, dejaremos este campo como se requiera, pero esta vez cambie su nombre a tu-mensaje. El tipo de control de formulario, podemos mantenerlo ahí, pero necesitamos cambiar la entrada, es de nombre de entrada a mensaje de entrada. Entonces después de eso, necesitamos decirle al formulario cuántas líneas debe mostrarse por defecto el área de texto. Entonces vamos a poner el mío en tres, así lo hacemos con una x y luego 3. Entonces el texto del marcador de posición cambió de nombre a Mensaje. Entonces la última parte de la caída es la entrada, así que elimina el botón de enviar desde la parte inferior del formulario, luego abre los corchetes. interior, damos el tipo de submit, la clase va a ser la clase bootstrap de btn, y luego la segunda clase de btn-default. Entonces hay lo mismo que hemos usado en el sitio bootstrap, y luego el texto entre corchetes de Enviar, así que “Guardar” eso. Debido a que hemos sacado el formulario de contacto de la plantilla de contacto, necesitamos volver a poner esto. Si copia el código corto, así que copia esa parte, luego vuelve al page-contact.php, y en la misma sección que solo cortaremos el código de, abrimos el php, y luego hacemos eco al navegador, do_shortcode, luego entre corchetes y las citas, pegue en el código corto y diga eso. Ahora, si volvemos a los sitios de WordPress y ojalá, si bajamos a la página Contacto, deberíamos ver el formulario de contacto todo funcionando correctamente, cual es, así que eso es bueno. Entonces eso es todo mostrando bien es una o dos pequeñas cosas que necesitamos cambiar en el “Dashboard”, así que ve de nuevo a la sección “Contacto”. En realidad es conseguir este formulario para enviarlo al administrador del sitio web. Tenemos que poner en la dirección de correo electrónico a la que enviar. Eso se puede hacer en el formulario Contacto bajo la pestaña Correo. Podemos cambiar los valores predeterminados y en su lugar la dirección de correo electrónico a la que te gustaría que pasaran los mensajes. También puedes ir a la sección Mensajes, y puedes cambiar los mensajes que recibe el usuario una vez que envía correos electrónicos, y como valores predeterminados ya establecidos ahí, pero todos estos están disponibles para cambiar. Una vez que hayas cambiado, pulsa “Guardar”, y eso es todo. Ahora, tendremos un Contacto a sección totalmente funcional. Gracias por ver y nos vemos en el siguiente video.
45. Añadir CSS básico de WordPress: Está bien, bienvenido. Hasta el momento, hemos agregado todo nuestro CSS Bootstrap y también hemos agregado algunos CSS personalizados. Pero esto sólo va a ser un video rápido, solo para agregar algo de WordPress core CSS, que se requiere para el tema. Por lo que nos dirigimos a Google y buscamos WordPress core CSS. El primer resultado debe ser el códice con la sección CSS, así que selecciónelo. Entonces, si te desplazas hacia abajo, deberías encontrar que hay sección Core WordPress, que vamos a copiar y colocar en nuestro tema. Ahora, la mayoría de esto es para subtextos y alinear imágenes, y un poco para la accesibilidad. Estos son los estilos básicos de WordPress requeridos. Por lo que quiero copiar la sección, todo el camino hasta el fondo. Por lo que también lectores de pantalla ahí. Entonces copia eso, y luego, a nuestra carpeta temática en el style.css, solo
voy a pegar esto justo encima de la sección Global y luego guardar eso. Entonces tenemos el CSS para lectores de pantalla. Tenemos un poco de estilo personalizado para los subtextos y el texto de subtítulo en las imágenes. También hay un margen agregado a las leyendas y también algún estilo para la alineación, para la derecha, izquierda, centro o ninguno. Entonces sólo voy a guardar eso, y eso es todo. Eso es todo lo que quería mostrarte en este video. Solo queríamos asegurarnos de que los estilos centrales no se perdiesen de nuestro tema. Entonces eso es todo y te veremos en el siguiente video.
46. Preparación de los textos del tema para su traducción: la hora de construir temas de WordPress es realmente importante
consideramos que no hablantes de inglés que pueden estar usando nuestros temas. En esta sección se trata de preparar nuestro tema, y proporcionar la capacidad para que las personas traduzcan el tema a diferentes idiomas. Ahora la mayoría de nosotros no tenemos la capacidad de traducir completamente el tema nosotros mismos. No obstante, lo que podemos hacer es desarrollar todo el tema para que pueda ser fácilmente traducido por otros o en otras palabras, preparar nuestra traducción temática. Este proceso se conoce como internacionalización, y también hay otro término que se puede encontrar llamado localización. Esto lo veremos más en el siguiente video. Este es el proceso de traducir realmente las palabras en el tema, pero en este video sólo vamos a ver la preparación real o la internacionalización. En realidad haciendo lista nuestra traducción temática. No es tan difícil como puede sonar. Hay algunos pasos que hay que dar como agregar una función a nuestro archivo de funciones, crear la carpeta de idiomas, para almacenar todas las traducciones en. También necesitamos mirar a través de nuestras plantillas temáticas, para que WordPress sepa qué palabras nos gustaría poner a disposición para su traducción. Para empezar, pasa al editor de texto o en realidad puedes pasar a la carpeta de temas. Nos vamos a la carpeta tranquilwp. Entonces vamos a añadir una carpeta nueva, y llamar a esto idiomas. Entonces necesitamos entrar en el archivo de funciones y vincular esto en la configuración del tema. Por lo que pasa al functions.php. Voy a agregar esto dentro de la función de configuración tranquilwp. Justo en la parte superior, necesitamos usar una función, load_theme_textdomain, y luego los corchetes. Si recuerdas el dominio de texto, lo establecemos en el style.css, en el comentario en la parte superior. Tenemos que hacer esto igual que el dominio de texto, que ponemos ahí dentro. Podemos copiar eso. Después de volver a las funciones. El primer parámetro dentro de las citas es el dominio de texto. Entonces necesitamos poner dentro de la ruta del archivo a nuestra carpeta de idiomas que acabamos de crear. Lo separamos por una coma, get_template_directory, luego los corchetes. Entonces necesitamos concatenar al final, la carpeta de idiomas. Eso lo deletreé bien. Dentro del directorio de plantillas, entonces
tenemos la carpeta de idiomas. Usa la barra inclinada hacia adelante, y luego los idiomas, y luego termina eso con un punto y coma. Ahora el siguiente paso es localizar cualquier texto o cadena que queremos hacer traducible. En este video sólo estaremos concentrándonos en las cadenas de texto, pero en el siguiente video echaremos un vistazo a cómo traducir llamadas a funciones. Por ahora, empecemos por entrar en la página 404. Yo quiero empezar desde arriba. Por lo que empezaremos con el 404. Necesitamos identificar cualquier tipo de cadenas de texto. En la página 404, en la parte superior hacemos eco en el navegador, ahí algún texto. Queremos poner esto a disposición para su traducción. El modo de hacerlo, es justo después del texto, añadir una coma. Entonces simplemente entre citas, pegue en el dominio de texto de tranquilwp, y luego guarde eso. Después, hasta la página de archivos, necesitamos localizar cualquier cadena de texto. Entonces desplácese hacia abajo. Ahí hay una función de eco, por lo que necesitamos traducir este texto. De nuevo, sólo separaremos el texto con una coma. Después, en las citas puestas en el dominio de texto. Por lo que WordPress puede identificarlo, y eso debería estar apagado. Ahora veremos las funciones en el siguiente video. Guarda eso. Después bajando a los comentarios, porque este es el archivo de comentarios para el tema veinticatorce, solo
voy a usar una búsqueda y reemplazo. Podemos ver que algunas de las funciones, ya está ahí incluyen el dominio de veinticatorce texto. Por lo que necesitamos reemplazar todos estos. Voy a pasar y hacer los de manera individual o hacer una búsqueda y reemplazo. Entre paréntesis, sólo tienes que ir a Buscar, Reemplazar, y buscar la palabra veintitrece, y reemplazar eso por tranquilwp o tu dominio de texto, y pulsar “Batch” Hay ocho coincidencias no existe. Golpea “Reemplazar” y luego guarda eso. El siguiente es el contenido-instalaciones. Necesitamos hacer los enlaces para esta página. Al minuto, acabamos de obtener texto plano para los cuatro enlaces. Queremos cambiar eso para que sea una función de eco php. Empezamos con las etiquetas php, y luego usamos la taquigrafía, que es el subrayado, y luego e. Luego rodeamos el texto entre corchetes y una cita, con el punto y coma al final [inaudible] y. Ahora tenemos el anillo de texto. Utilice la coma para separar eso, y luego poner en el dominio de texto. Sólo para acelerar este proceso, sólo
voy a copiar esto,
y luego pasar a las instalaciones de spa, y reemplazar el cabello y maquillarme con el texto de las instalaciones de spa. Pega eso en, y no te olvides de cerrar las etiquetas php ahí, y justo ahí también. Copiar eso. Entonces a continuación tenemos el retiro junto al lago. Nuevamente, copia el texto, y reemplaza las instalaciones de spa por el texto del retiro junto al lago. Entonces hacemos lo mismo para el último enlace. Corta ese texto, y pega el último ahí dentro. Ese es el último ahí. Nuevamente, porque tenemos el dominio de texto inmediatamente siguiendo la cadena, WordPress sabe que queremos traducir esto. Te mostraremos cómo hacer eso en el siguiente video. Guarda ese archivo, y pasaremos al footer.php. Empecemos con el nivel 2 rumbo en la parte superior de mantenernos en contacto. Tenemos que transformar esto en un eco, por lo que php, voy a ver abreviatura de subrayado e, y luego el texto entre paréntesis. También pon esto entre comillas simples. Después, justo después de la cadena, poner en el dominio de texto. Tan tranquilwp, y luego después de los corchetes, punto y coma y luego cerrar el PHP. Por lo que solo es un par más que hacer en esta página. El primero es el texto Síguenos. Entonces deberíamos estar consiguiendo el ahorita en esto. Entonces PHP y luego eco, luego rodear la cadena entre corchetes. No olvides las cotizaciones. Después separado por una coma, pega en el dominio de texto, tranquilwp, y luego el punto y coma y ciérrelo. Después en la sección de pie de página, está el nombre de Tranquil Spa en la parte inferior. Entonces solo copiaremos este php, solo para agilizar eso. Después en el lugar del texto Tranquil Spa, pega eso en. Después vuelve a cambiar el texto a Tranquil Spa. Guarde eso, ese es todo el texto para el área de pie de página. Entonces, después del pie de página, es la primera página. Entonces desde arriba, necesitamos cambiar el rumbo del nivel dos. Entonces solo voy a pegar en el php. Simplemente arreglaré esto un poco y sangraré,
y luego copiaré o recortaré el título y sustituiré la sección Síguenos. Guarda eso. Entonces volvamos a copiar esto. Después desplazándonos hacia abajo por la página para más cadenas, necesitamos hacer lo mismo con las últimas ofertas. Entonces haré exactamente lo mismo que antes, solo
recortaré este encabezado de nivel dos y pegaré esto. Después sigue bajando la página, así que desplázate hacia abajo más abajo. El siguiente es el nivel dos rumbo nuevamente de Tienda Online. Entonces voy a cortar esto y añadir esto a la cuerda. Entonces simplemente bajando un poco más allá, tenemos el texto Shop Here, que es parte del botón. De nuevo, pegando el php y cambiar el texto para ser Tienda aquí Ahí vamos. Así que toca Guardar y seguiremos bajando la página. No necesitamos hacer nada en funciones. Entonces siguiente es el header.php, y no creo que haya nada que realmente necesitemos cambiar en el encabezado. Tenemos el título que es dinámico, tenemos el menú de navegación en la parte superior, pero todos los nombres de las páginas se tiran dinámicamente. Por lo que se establecerán en cualquier idioma que el usuario prefiera de todos modos. Así que sigue bajando. Observe que no hay nada que cambiar en el encabezado. Entonces siguiente es la página de índice. Así que desplázate hacia abajo y echa un vistazo a cualquier función de eco. Tenemos la categoría ahí, así que justo después del nombre de la categoría, pon en el dominio de texto de tranquilwp. Entonces sigue yendo más allá por la página. También está el texto Leer más. Entonces exactamente lo mismo ahí dentro, tranquilwp. Entonces eso es todo para la página de índice. A continuación tenemos la página-sobre. Entonces tenemos el sobre nosotros rumbo nivel dos. De hecho en lugar de hacer que esto sea traducible, en realidad lo haremos dinámico, por lo que cambiaremos hasta el _title como hemos hecho con algunas de las otras secciones. Entonces eso está bien salir como está. Tenemos el párrafo principal del texto About Us. Por lo que sólo voy a dejar esta sección porque esto probablemente será mejor
como campo personalizado para permitir que el usuario escriba su información. Por lo que solo guardaremos este por ahora y echaremos un vistazo a la página-contacto. Ya tenemos el título ahí dentro y creo que en realidad está bien salir. Ahí no hay nada que cambiar. Entonces hasta la página de noticias. Echemos un vistazo a cualquier cadena para traducir. Entonces tenemos la categoría. Entonces cambia eso para tener el dominio de texto en, el tranquilwp. Nuevamente, igual que la página de índice, haremos lo mismo para el texto leer más. Tan tranquilizwp. El buscapersonas, la publicación más antigua y nueva en realidad necesitará traducir también. Pero eso lo haremos en el siguiente video de una manera ligeramente diferente, así que solo podemos salir de la página de noticias por ahora. Así que hasta el page.php, por lo que nuestra plantilla básica de página. Ahí tenemos la función de eco, así que vamos a añadir el dominio de texto justo después de ahí. Tan tranquilwp, y que no se olvide de guardar eso. Entonces siguiente después de la página se encuentra la plantilla de búsqueda. Entonces toma un pergamino hacia abajo. De nuevo tenemos la categoría. Entonces cambiamos eso. Tenemos el Leer más. De acuerdo, entonces ahora pasaremos a la barra lateral. Entonces no hay cadenas que traducir ahí, así que bajamos al single.php y echamos un vistazo a eso. Entonces tenemos el título dinámico. Creo de nuevo, tenemos que hacer la categoría. Desplázate hacia abajo más abajo, tenemos el mensaje de error. Por lo tanto, agrega el dominio de texto ahí. Entonces eso está casi terminado. Solo quiero ir realmente a la página de funciones porque sí
agregamos algunas cadenas ahí con nuestra función featured_text. Entonces solo una o dos cuerdas necesitamos cambiar ahí dentro. Entonces haré exactamente lo mismo. Agrega el dominio de texto, y si solo copio este. Entonces pega esa en justo debajo. Podríamos hacer lo mismo para el texto de navegación, así que pega eso en. Después sólo uno o dos más en la parte inferior. Porque este tiene formateo, realidad
vamos a dejar eso y hacer eso en el siguiente video. Eso lo vamos a hacer de una manera un poco diferente. Creo que eso es todo para todas las cadenas de texto. Entonces vamos a guardar esa página. Entonces cuando descarguemos el software para que esto sea traducible más adelante, deberíamos conseguir que todas estas cadenas de texto estén disponibles para traducir. Entonces eso es todo para todas las cadenas de texto, pero si el texto es parte de una función, necesitamos hacer esto de una manera ligeramente diferente. Si te unes a mí en el siguiente video, te
mostraré cómo hacer eso.
47. Preparar nuestro texto para la traducción: De acuerdo, bienvenido de nuevo. Ahora tenemos todas las cuerdas disponibles para la traducción. Vamos a seguir adelante y hacer lo mismo para las funciones. Mencionamos en el último video, las funciones como el buscapersonas para el siguiente y los posts anteriores. También tienen texto dentro de los corchetes, por lo que necesitamos hacer esto de una manera ligeramente diferente a la que teníamos antes. Todavía es muy fácil de hacer. Empezamos con una forma similar a antes. Usamos la coma y luego ponemos en el dominio de texto de tranquilwp, pero esta vez, antes y después, vamos a rodear estos entre algunos corchetes extra y luego usar dos guiones bajos y luego cerrar corchetes
al final y luego hacer lo mismo en publicaciones más nuevas. La coma, el dominio de texto, tranquilwp, y entre los corchetes de apertura, agregan los dos guiones bajos, y luego cierran nuestro segundo corchete ahí. También tenemos un buscapersonas en la plantilla de noticias. Dirígete a la página-noticias y luego abajo en la parte inferior, haremos exactamente lo mismo. Para las publicaciones más antiguas, agrega en el dominio de texto de tranquilwp, y luego los corchetes adicionales que rodean con los dos subrayados, cierran, y lo mismo para las
publicaciones más nuevas , ahí vamos. Entonces solo quería cambiar en el archivo de funciones. Por lo tanto, dirígete al functions.php. Ahora necesitamos cambiar el texto de navegación, pero parece que saltamos el arma en el último video y agregamos el dominio de texto ahí dentro,
pero esto en realidad es una función. Tenemos que hacer el mismo intervalo con los corchetes, los dos guiones bajos, y luego cerrar el segundo corchete apagado, y luego busquemos la sentencia printf, así que desplácese hacia abajo hasta la parte inferior. El modo de hacer esto con una variable ahí es agregando los dos guiones bajos ahí dentro y luego después de la cadena, agregue en el dominio de texto de tranquilwp, y luego guarde eso. Eso es todo, esa es solo una forma ligeramente diferente de preparar el texto si es parte de una función. Establece nuestro tema ahora la traducción lista. Ahora le hemos dicho a WordPress qué palabras queremos poner a disposición para su traducción. Entonces eso es todo. Dejaremos ahí ese video. Si te unes a mí en el siguiente video, descargaremos algún software el cual sacará estas palabras las cuales has hecho traducibles. Los pondrá a todos en una plantilla y
nos permitirá traducir realmente las palabras. Nos vemos allí.
48. Creación del archivo de traducción con Poedit: Por lo que ahora nuestro tema está todo listo para ser traducido. Te voy a mostrar a continuación cómo hacer un proceso llamado localización. Esto consiste principalmente en crear un archivo de plantilla llamado archivo POT, y es sinónimo de plantilla de objeto portátil. Este será básicamente un directorio o un catálogo de todas las palabras traducibles en el tema. Entonces, usaremos el contenido de este archivo POT para crear un archivo PO, que en realidad mantendrá las cadenas traducidas en un idioma de su elección. Entonces vamos a empezar con algún software llamado Poedit. Entonces voy a ir a Google y buscar Poedit. Después selecciona “poedit.net”, que debería ser la de arriba. Poedit será el software que utilicemos para realmente hacer la conversión de idiomas. Es de descarga gratuita para Mac, Windows, o Linux. Hay una versión pro lo que la hace un poco más fácil, pero no necesitamos eso por ahora. Por lo que basta con dar click en la “Descarga gratuita” para tu sistema operativo y darle unos momentos solo para descargarlo. Entonces una vez que eso esté descargado,
descomprima el archivo y descárgalo de la manera habitual. Entonces voy a poner el mío en la carpeta Aplicaciones. Entonces, una vez que empieces, deberías ver una ventana de bienvenida, similar a ésta. Ahora vamos a crear nuestro POT o archivo de plantilla en Poedit. Vaya a Archivo y luego Nuevo y luego seleccione el idioma de su tema. Entonces el mío es inglés y luego presiona “Enter”. Entonces si subes al Catálogo en la parte superior y luego vas a Propiedades. Entonces empieza con alguna información del proyecto. Entonces voy a llamar a la mía tranquiliza-nueva. Entonces, necesitamos decirle a Poedit las fuentes de las palabras traducibles. Entonces ve a la pestaña de palabras clave de fuentes y luego para agregar algunas palabras clave, selecciona el segundo botón, que es para el nuevo elemento. Entonces voy a empezar con los dos guiones bajos. Los dos subrayados fue el prefijo que utilizamos para las funciones. Entonces agrega eso y presiona “Enter”. Entonces, voy a añadir una más, que era la _e, que era la función de eco. Entonces entra. También voy a añadir uno más para cuerdas escapadas. Entonces escape esc_attr_e Así que también añadiremos ese en. Si hay alguna palabra clave que uses en tus temas, asegúrate de añadirlas también, y luego ve a “OK”. Después vaya a, “Extracto de fuentes”. En realidad necesitamos guardar este archivo primero antes de que hagamos eso. Así que ve a Archivo y luego Guardar como. Entonces, este va a ser nuestro archivo POT. Entonces vamos a guardar esto en nuestro tema, abrir la carpeta del tema, y asegurarnos de que la carpeta de idiomas que creamos esté abierta. Por lo que el nombre del tema que agregamos era tranquil_new. Entonces, necesitamos guardar esto como un archivo POT. Pero por defecto, no debería dejarnos hacer eso. Se guardará automáticamente como un archivo PO. Por lo que solo podemos usar PO y luego simplemente podemos cambiar
manualmente la extensión si entramos a la carpeta de idiomas. Así que basta con hacer clic en el archivo lo que se creó y cambiar la extensión de archivo a POT y luego usar eso. Entonces vuelve a Poedits y vamos a extraer el texto a traducir. Así que seleccione, “Extraer de fuentes” en la parte inferior. Entonces, ¿vamos a sumar el camino a nuestro tema? Por lo que debajo de los caminos, haga clic en el icono “Plus” y vaya a “Agregar carpetas” y luego seleccione la carpeta del tema y luego seleccione el tema tranquilwp y luego abra. Después, haga clic en “Aceptar”. Por lo que ahora nuestro archivo POT ha extraído todas las cadenas de texto de nuestro tema. Este es ahora nuestro catálogo que podemos utilizar como plantilla. Entonces guarde eso. A continuación, podemos usar esta plantilla para crear un archivo PO, que contendrá las cadenas traducidas. Así que ve a “Crear Nueva Traducción”. Entonces, necesitamos seleccionar el idioma de la traducción que queremos. Por lo que solo podemos seleccionar un idioma al que te gustaría traducir. Entonces solo voy a escoger uno al azar. Entonces lo hará para griego y luego, “OK”. Entonces ahora si miras la parte superior de la página, tenemos un archivo PO llamado EL, que es un prefijo griego. Entonces voy a guardar eso. De nuevo, asegúrate de que esto esté en la carpeta de idiomas y luego pulsa, “Guardar”. Entonces ahora cuando pasamos por las cuerdas, podemos ver que algunas sugerencias de traducción aparecieron a
la derecha o podemos teclearlas manualmente en la parte inferior. Entonces es solo un caso de seleccionar el texto que queremos traducir y luego agregarlo ahí. Puedo ir por estos principalmente admin o hacer clic en las sugerencias y luego obtienes la traducción griega que aparece a la derecha. Entonces, una vez que lo termines, solo tienes que pulsar el botón “Guardar”. Entonces ahora cuando vuelvas a entrar en el tema y la carpeta de idiomas, ahora
deberíamos tener el archivo POT que es la plantilla y luego deberíamos tener dos archivos con el nombre de archivo del país que has seleccionado. Se debe terminar en PO, que es la traducción y luego también tenemos un archivo MO, que si se vuelve a la documentación, puede ver esta es la versión compilada real legible por máquina del archivo PO. Por lo que también necesitamos eso. Entonces eso es todo. Así es como traduces tu tema a diferentes idiomas. Puede que no necesariamente tenga que agregar los archivos PO a su tema, pero mientras tenga el archivo de plantilla o el archivo POT, podemos permitir que los usuarios finales traduzcan a su propio idioma en particular. Entonces gracias por ver y ese es el final de la sección de traducción.
49. Temas de iniciación: Bienvenido de nuevo. En este video, te
voy a mostrar un par de temas de inicio los cuales son realmente útiles para darte una buena salida a la hora de construir temas de WordPress. A lo largo de este curso hemos construido todo desde cero y esa es realmente una gran manera empezar
hasta que entiendas lo que pasa a la hora de construir un tema de WordPress. No obstante, si construimos en muchos temas, solo
queremos dar un salto en el desarrollo. Es una buena idea empezar con un tema de inicio de WordPress y un par de populares son guiones bajos y huesos. Entonces un tema de inicio es más o menos lo que suena. No son los productos finales terminados los cuales puedes descargar fuera de lugares como ThemeForest o la página de inicio de WordPress. Es solo el tema en su más b