Personaliza un tema de WordPress con HTML y CSS

1. Introducción: Hola, me llamo Victoria Anna, y soy diseñadora de comunicación visual. Diseño logotipos, identidades corporativas, sitio web, e ilustración. En esta clase de Skillshare, me gustaría mostrarte cómo personalizar el tema predeterminado 2019 y transformarlo de esto a esto. Este proceso es válido para transformar y personalizar otros temas de WordPress. Espero que encuentres inspiración y empieces a trabajar en algunas personalizaciones. Vamos a echar un vistazo a los archivos de plantilla y cómo trabajan juntos para construir un tema de WordPress, y vamos a hacer algunos cambios en ellos. Vamos a cambiar el encabezado, el pie de página, personalizar el logotipo, el menú, crear contenido, incrustar Google Maps, instalar algunos plugins. Asumo que ya tienes instalado tema de WordPress y WordPress y echó un vistazo a la configuración y que tienes algo de experiencia con CSS y HTML. Si tienes alguna pregunta, comunícate conmigo. Vas a encontrar los archivos de recursos y ejercicios adscritos a algunas de las lecciones. Ahora empecemos. 2. Archivos de temas de WordPress y jerarquía y de WordPress: He empezado el cliente FTP de FileZilla, que es mi preferido. Vamos a tener una visión general sobre los archivos de instalación de WordPress. Por lo general, descargamos desde el sitio de WordPress, la carpeta zip con WordPress con la versión más reciente y ZIP la encendemos a nuestro ordenador, y enviamos todos los archivos hasta nuestro servidor para instalarlo con instalación de la base de datos y todos los demás ajustes. Bueno, aquí en el WP Content, tenemos nuestros temas también plug-ins. Echemos un vistazo. Este es nuestro tema 2019, y WordPress en estos días viene instalado con tema 2017 y 2016. Vamos a tener un pico en nuestro tema 2019 y a ver qué archivos hay. Por lo general, el tema de WordPress sólo puede funcionar con un archivo PHP índice y estilo CSS. Pero las funciones PHP también es muy agradable. Es posible que también desee tener algunas interacciones agradables y algunas fuentes bonitas. Todos estos archivos son básicamente componentes modulares que construyen una cosa. Es realmente importante entender la jerarquía de los archivos de plantilla de WordPress. Tenemos todos estos archivos de plantilla que te he mostrado en FileZilla, y luego por supuesto, las hojas de estilo e imágenes de JavaScript y otros archivos de plantilla como funciones PHP que construyen todo el tema. Todos estos archivos de plantilla son como pequeños módulos que puedes combinar para crear el tema que deseas tener. Están dando la estructura para la información en su página web. Por ejemplo, en nuestro tema, la barra lateral PHP con widgets es en realidad una parte del pie de página PHP. Se pueden combinar todos estos pequeños módulos juntos a un tema grande, y hay una jerarquía especial, por ejemplo, la más especializada de las plantillas es, por ejemplo, se tiene una página PHP para todas esas páginas que hemos creado en nuestro tema. Pero digamos que vamos a necesitar una página de contacto y va a verse un poco diferente a todas las demás páginas. Entonces voy a crear entonces una página, contactar PHP. Esta va a ser la plantilla sólo para la página de contacto. En caso, por ejemplo, que haya creado una página de contacto pero no le haya asignado plantilla de página de contacto, el WordPress va a caer de nuevo en la página plantillas PHP. Por lo que la plantilla más especializada es, como zapatos de categoría o categoría. Categoría zapatos es más especializado que categoría. Por lo que WordPress siempre va a mostrar la plantilla más especializada, y si no la encuentra, va a volver a caer sobre la menos especializada. Entonces en última instancia, si no tiene ninguna otra plantilla en el tema, va a mostrar el archivo PHP índice. Entonces cuando estás cambiando un tema, cuando lo estás personalizando, normalmente solo trabajas con estilo CSS, pero a veces hay partes que quieres cambiar, y para esto, vas a tener que tener un cliente FTP para abrir arriba estos archivos, edítelos y crea la nueva estructura que quieres tener en tus archivos de plantilla. 3. El tema del niño en acción: Para empezar a personalizar nuestro tema. Tenemos que crear primero una copia de la misma. Porque ir de aquí, el tema por defecto 2019 a este que ya probé para este lado de negocios no es recomendable cambiar todos los archivos originales de tu instalación temática de WordPress. Porque podrías romper algo, cometer un error, o el tema se va a actualizar y todos tus cambios se van a perder. Tienes que volver a empezar todo. Existe la posibilidad, por supuesto, ir al personalizador y subir el logotipo, cambiar los colores, crear menús, cambiar los widgets, y aquí hay un campo CSS adicional, que puedes rellenar con tu CSS. Digamos algo realmente sencillo. El color de fondo va a ser verde, genial. Ahora lo guardas y tienes un sitio web verde, pero 2019 se actualiza y todos estos cambios se pierden. ¿ Qué hacer? Existe otra posibilidad donde como administrador en el tablero, acudas al editor de Aspecto Tema. te he mostrado esto antes en el otro video, para que puedas cambiar todos estos archivos de tema y editarlos. Pero por supuesto esto podría romper tu tema, eres tema original. La recomendación es siempre crear un tema infantil, y esto es realmente genial. Se llama tema child porque el tema principal sigue ahí, y todos los archivos, todas las funciones, todo el JavaScript, etc sigue ahí. El tema infantil puede usarlos, pero si quieres hacer cambios solo tienes que copiar uno de los archivos, hacer cambios en ellos y dejarlo en el tema secundario. Porque va a sobrescribir los archivos que están aquí en el tema principal. Es mucho más allá de nuestro alcance crear un tema infantil, y encontré en línea que hay un gran sitio que se llama ChildThemewp.com y el gran equipo que trabaja ahí, y algunos de ellos trabajan para WordPress.org están creando los temas infantiles para los temas conocidos de WordPress. Aquí está el enlace de descarga. Lo vas a encontrar en los archivos de ejercicios que puedas descargar el tema infantil por ti mismo. Ya lo he descargado, solo tengo que empujarlo hasta mi servidor. Está descomprimidos, y así que acabo de sacar un archivo aquí arriba en mi servidor y aquí está. El tema infantil consiste en funciones PHP y estilo CSS y la captura de pantalla, por supuesto, para el tema, que creo que está en blanco, y algo de JavaScript. Todo esto, el gran equipo de ChildThemewp.com ha creado. No tenemos que preocuparnos por crear todos estos archivos. ¿ Cómo funciona esto con el tema infantil? Tenemos un tema de padres aquí y el niño aquí, y ¿cómo se comunican los archivos entre sí? Bueno, eso no es un problema, solo abriré aquí el WordPress en mi computadora solo para tener una visión general de los archivos y para explicar. Ya ves que el tema infantil tiene muy pocos archivos sobre las funciones y estilo CSS. Por ejemplo, si quiero cambiar el encabezado, solo voy a copiar el encabezado PHP al tema de mi hijo y hacer los cambios en ese archivo. Todo lo demás va a venir otra vez, quédate igual. Todos los archivos de plantilla van a ser del tema padre. Todo lo que quieras cambiar en el tema infantil, solo tienes que copiar ese archivo y hacer tus cambios en el tema infantil. Por supuesto, hay que mantener también la estructura de las carpetas con el fin de mantener la vinculación entre las diferentes partes de plantilla. En el lado frontal, instalar un tema infantil va a verse así. Iré aquí en el tablero y temas de apariencia y recuerda, te he dicho que la captura de pantalla del tema infantil está en blanco. Vamos a tener que cambiar esto en un rato. Yo sólo voy a activar este tema y si vuelvo a nuestro lado, sigue siendo el mismo. Ya ves que funciona, básicamente es una copia de este sitio. Pero si quiero cambiar un archivo o simplemente copiar al tema infantil y cambiarlo allí en lugar de romper el tema original de los padres. 4. Cómo cambiar las fuentes: En primer lugar, quiero cambiar la tipografía. Ya he buscado la fuente antes. Se llama Fuente Sans Pro. Me gustó para este proyecto. Voy a seleccionarlo aquí y elegir los estilos que necesito; el regular, el cursiva, y el audaz. Cuando miro aquí, voy a necesitar este enlace en los archivos PHP de mi función porque vamos a cambiar las fuentes vía las funciones PHP como enlace de estilo. Después de copiar este enlace a las fuentes que hemos elegido, me dirijo al distribuidor de archivos para abrir la carpeta infantil 2019 y editar las funciones archivo PHP, porque en la versión más reciente de WordPress, los estilos están en cola en el tema. No se ponen como enlace, sino en cola en el archivo de función. Aquí, ves que el archivo parent-css está integrado en el tema, y aquí está el archivo child-css. Si escribimos algo aquí en el child-css, va a sobrescribir el parent-css. Lo mismo vale para el archivo JavaScript hijo. Si tenemos JavaScript personalizado en nuestro tema infantil, se va a sobrescribir el del tema padre. Entonces aquí solo voy a pegar el enlace de las fuentes de Google y luego copiar este WP en la función de estilo clave aquí, y nombrar mi función child-googlefonts, hacer una coma y luego pegar esta referencia al CSS de esta fuente aquí dentro y poner un punto y coma aquí, y por supuesto borrar este enlace. Yo sólo voy a poner un pequeño comentario aquí. Agregar Googlefonts. Para que sepa lo que he cambiado en caso de que algo no funcione. Voy a guardar esto, y sí, confirmarlo. Ahora, veamos si algo ha cambiado en nuestro sitio. No, no lo ha hecho. El motivo es que si usamos el Inspector Web de Firefox, vamos a ver que este h1 aún tiene la familia de fuentes que hace está en el tema de los padres. Por lo que tenemos que sobrescribir esto en nuestro archivo child-css. Entonces hagámoslo ahora. 5. Cómo cambiar los colores: Si voy a cambiar los colores, voy a necesitar mi archivo, mi boceto del sitio web, y tengo una pequeña app que se llama ColorsLurp. Se trata de una app gratuita que hace sonidos divertidos cuando eliges un color. Bueno, eso lo he apagado porque lo he encontrado un poco irritante cuando trabajé con él. Ya he guardado este color de fondo aquí, que es un cálido gris medio. Sólo voy a copiar este código, abrir a mi inspector, y encontrar la etiqueta del cuerpo. Aquí está. Dice, cuerpo de color de fondo es blanco. Voy a cambiar eso. Aquí está. Se ve un poco gracioso y raro, pero no está mal. Ahora voy a copiar aquí todo porque incluye también el color de la fuente. Entonces Copia, abre mi archivo de estilo CSS en la app atom y simplemente pégalo aquí. Por supuesto, tengo que borrar esto aquí y tal vez también, esto tiene m color. Podría poner blanco, pero no creo que vaya a ser correcto, creo que necesito elegir un muy, muy claro en gris. Voy a volver aquí y usar ColorsLurp, voy a elegir este gris aquí. Este es el punto más ligero, y voy a copiar esto en mi color de fuente. Esto viene aquí. Guarda y luego cambia también la familia de fuentes. En este sitio web en este proyecto, me gusta tener lo menos posible diferentes fuentes. Guarde, y luego por supuesto, guardando relleno de fuente también en el servidor. Regresa, cierra esto y veamos qué pasó. Se ve bonito. Por supuesto el texto es ilegible aquí, pero estos son bloques y esta es la parte bonita que solo tengo que cambiar básicamente el color del cuerpo, el color de la fuente. A lo mejor en algunas otras ocasiones como links, tengo que cambiar algunos colores, pero por lo demás todo lo demás solo puedo editar aquí en el bloque. Veamos eso. Ajustes de color. Voy a poner el texto color blanco y el fondo gris claro, actualizar y comprobar. Sí, eso se ve un poco más legible, pero no realmente más agradable. Para que nuestro tema sea un poco más bonito y para personalizarlo, por supuesto vamos a necesitar muchos ajustes, y si fui a todos estos enlaces de forma individual, va a tomar un tiempo cambiar sus colores y estados flotantes. Encontré en GitHub, que la desarrolladora Ann Pohl ha puesto la anulación de color personalizado 2019 por ahí para usarla. Simplemente voy a copiar todo esto y ponerlo en nuestra hoja de estilo. Déjame solo comprobar si editas. Ya he comentado aquí, la tipografía. Yo sólo voy a poner otro comentario para saber dónde buscar las cosas. Colores, anula, y luego pega todo aquí. Entonces tengo que buscar la a, los enlaces. Esto es en lo que estamos trabajando en este momento. Simplemente guárdalo por un segundo. Este es el color de los enlaces. He preparado el que quiero aquí en mi archivo de texto, copia éste, vuelve al código e ingresa aquí. Lo más probable es que si vuelvo aquí, claro que tengo que guardar el archivo también en el servidor. Veamos en el navegador qué pasó. Ves que no pasa nada. Bueno, este es el truco con trabajar con temas infantiles que tienes que usar la regla importante con bastante frecuencia para anular muchos de los ajustes de CSS. No se siente bien, se siente un poco hacky y realmente no me gusta, pero eso es todo. Ese es el trabajo con los temas infantiles. Este es ahora el aspecto de los enlaces. Por supuesto, cuando me paso el rato, no está pasando mucho. Tengo que cambiar también la tapa flotante, que he preparado aquí, y es ésta. Creo que es un amarillo de maíz o algo así. A ver, dice el hover. Yo lo voy a poner aquí. No olvidar importante, guardar, y comprobar en el navegador lo que pasó. Aquí vamos. Ahora, quería tener también la animación de la frontera debajo. Porque aquí se puede ver hay un subrayado de decoración de texto que en realidad no se puede animar. Voy a añadir la animación ahora en el estado de hover. Para cambiar esta transición flotante, voy a quitar el subrayado aquí y luego agregar el borde que voy a transitar, no animar transición. Siempre estoy acostumbrado a casa, y me pareció mejor porque transitar subyacente a una decoración de texto siempre está dando como resultado algunos jitters. Me dirijo de vuelta al archivo CSS, y aquí en el estado hover, solo voy a copiar este color porque quiero que el borde tenga el mismo color, por supuesto, que el texto. Voy a añadir sólo color de borde aquí. Ahorra, y luego sube a la transición esto. En primer lugar tengo que decir, decoración de texto no es ninguna. Después declarado el botón Border transición de dos píxeles sólido transparente al color que he declarado en el estado de desplazamiento. Voy a poner la transición o lineal y la más simple, luego 0.3 segundos. Encontré 0.3 segundos para llenar lo más natural de velocidades. Algunos van a guardar esto aquí y hacer lo mismo en FileZilla y comprobar lo que pasó en el navegador. Ah, aparentemente todos los enlaces ahora tienen esa misma transición. Bueno, la barra de administración no es realmente mi preocupación. Veamos aquí. No hemos quitado la decoración subyacente. En primer lugar, se me olvidó escribir importante. ¿ Ese fue el caso? Vuelve atrás. Ahora puedo transitarlo. Veamos aquí, todos los demás enlaces también. Genial. También quiero cambiar el color de este elemento. Es algún borde izquierdo. Veamos cuál es, su contenido de entrada y blockquote. Quiero poner esto del mismo color que el color del enlace, y me dirijo al archivo CSS. Veamos aquí está el color del enlace, copiándolo, pegándolo aquí con el blockquote, ahorrando, confirmando. Checking en el navegador. ¿ Qué pasó? Ha cambiado el mismo color que el enlace antes del estado de hover. Pero si miro esto en el panorama general, estas líneas me parecen demasiado finas considerando la tipografía. Yo quiero hacerlos un poco más gruesos. Voy a cambiar eso aquí atrás, agregando el ancho del borde, y voy a empezar con los nueve píxeles sólo para exagerar un poco, y confirmar y refrescar. Se ve un poco más en armonía con la topografía, pero tal vez un poco demasiado gruesa. Sólo para tonificarlo estoy poniendo ocho píxeles y fresco, eso se ve un poco más sincronizado. Hemos editado los colores del tema, y ahora vamos a pasar al área de pie porque no quiero tener estos widgets en mi pie de página. 6. Cómo cambiar el pie del pie: Para cambiar la apariencia de nuestro pie de página, primero, quiero cambiar el color de fondo. Voy a aquí, revisa las herramientas web, qué está pasando con el pie de página. Ahí está, no hay declaración de color de fondo, y por supuesto está tomando el control de la declaración de color de fondo del cuerpo. Voy a hacer uno aquí, color de fondo y chequear con mi App Color Slope porque estaba jugando con los colores y quería tener un menor contraste en el pie de página, por lo que el área de contenido es un poco más visible, solo sutilmente pero con un poco de diferencia. Sí, voy a volver con el inspector, poniendo el color aquí. Sí, así es como se supone que debe verse. Entonces tengo que recordar que un ID de pie de página es colofón y la clase es site-pie de página, copia. Ir a la hoja de estilo, y en algún lugar aquí arriba, tenemos los colores anulados. Veo que he cometido un error, voy a eliminar eso y pegar aquí el color de fondo. Hacer los paréntesis así y footer-id de colofón y la clase de site-pie de página. Ahora déjame comprobar si esto va a funcionar, sin declarar el atributo importante. Refresca, sí, está funcionando. Esto es genial y ahora podemos trabajar en los widgets. Cada vez que veas Meta en WordPress, puedes tomar una apuesta de que este es un widget y yo voy a revisar aquí con el Inspector Web. Sí, aquí está el elemento aparte el cual se declara como un widget-area. En algunos temas de WordPress, había una barra lateral a la izquierda o a la derecha, que también está widgetizada, donde puedes poner estos trozos de código, unos elementos funcionales muy prácticos que van a realzar tu tema. Voy a dirigirme al tablero porque no necesito todos estos widgets. Aquí en la apariencia van a Widgets, y voy a quitar todos estos así. Echa un vistazo a mi boceto, ahora aquí tengo cuatro listas, listas de texto, y algunas de ellas tienen enlaces. Lo que necesito básicamente, no puedo encontrar entre estos widgets aquí, voy a usar el HTML personalizado, que es un widget muy práctico donde puedes crear cualquier contenido en HTML directamente para tu pie de página o las barras de lado, dependiendo de dónde esté tu elemento Aside. Para mi pie de página con widget, voy a poner en el HTML y widget personalizados, no necesito un título para ello. Simplemente voy a declarar un elemento flex parent, Va a ser muy original, footer-flex. Entonces dentro van a tener cuatro elementos div. El primero va a ser Copyright, el segundo, Clase, esa va a ser la dirección. El tercero, sólo va a copiar estos para ponerlos dentro y luego cambiar este contacto e idiomas porque un día esta página va a estar en alemán e inglés, va a guardar esto en el medio y luego declarar las listas. Esto no es realmente lo que quería que pareciera, así que después de mucho retoque, he jugado con este código y con los widgets alrededor. Encontré una solución para que el pie de página se vea como un 1 y un 2, y eso está aquí en el código CSS, tengo que cambiar varias cosas. Por ejemplo, aquí para el flex tengo que crear espacio entre y también tengo que disminuir el tamaño de fuente. Voy a ponerle un 0.7 EM. Además, el div footer-flex tiene un relleno de 12 por ciento y tiene un ancho. Voy a poner aquí 300 píxeles, y también muy importante alinear-self para autoarrancar. Esto va a empujar el texto en el propio div para estar alineado con la línea superior y el footer-flex va a tener una línea ítems en el centro, el centro vertical del pie de página. También aquí en la UL, tengo que declarar el ancho de los 200 píxeles. Creo que he declarado todo lo que he olvidado. Voy a guardar esto, empujarlo en el Servidor 2 y luego actualizarlo. Todavía necesita un poco de ajuste, por ejemplo, no está alineado con el inicio del contenido aquí de la izquierda. Esto se debe a que este elemento, también, sólo voy a inspeccionar el elemento aquí. El copyright también tiene un relleno en ambos lados, así que voy a eliminar eso yendo a CSS y declarando el div footer-flex, no se permite a primer hijo tener relleno. Acolchado de primer hijo 00, vamos a refrescar. Ahora bien esto se ve mejor, hay un problema sin embargo, que estuve pensando más adelante, y esa es la capacidad de respuesta. Si veo esto en el iPhone, en el smartphone, voy a ver sólo dos de las listas, así que me veo obligado a crear dos widgets con HTML personalizado. Esto va a cambiar aquí, así que sólo voy a crear otro widget, HTML personalizado y copiar estas dos últimas listas, que es, creo contacto e idiomas, sí. Tengo que cerrar el div y luego pegar esto aquí, pero me falta este div inicial, que es el footer-flex. Al editor le gusta eso, no hay errores, guardar y esto se hace así que voy a refrescar aquí. Cuando empujo esto a las dimensiones del smartphone, se puede ver que tengo las cuatro de las listas aquí apiladas una encima de la otra. Solo tengo que declarar puede ser otra clase a este pie de página, y para hacer esto, me dirijo a CSS de nuevo. Declarando otra clase footer-flex-1 la cual voy a aplicar al primero de los widgets personalizados. Tengo que preparar esto aquí y copiar footer-flex-1 en todas las declaraciones excepto ésta. Este es el primero que no va a tener el relleno y footer-flex-1 UL. Creo que lo he cubierto todo ahora en el footer-flex-1, así que voy a actualizar esto en el servidor y comprobar lo que he hecho aquí. Sí, me olvidé de cambiar la clase en el widget, vamos a entrar ahí y declarar esto aquí, footer-flex-1, guardar, hecho y voila. Ahora este es el pie de página como yo quería que se viera. Voy a agregar iconos para los idiomas en algún momento, pero por ahora, quiero deshacerme de este descargo de responsabilidad aquí en la parte inferior, y sólo puedo hacer eso en la plantilla. Aquí es donde vamos a ver este propósito del tema infantil. Y lo que te he dicho que puedes cambiar la estructura del tema copiando archivos del tema padre al tema secundario y cambiando los archivos ahí. Me dirijo a FileZilla y abriendo el tema 2019, que tengo en mi computadora, de lo contrario, tendría que subir al tema de mi padre en el servidor mientras me gusta tenerlo aquí en mi computadora, así que puedo simplemente fácilmente copiar mi archivo de pie de página hasta el tema infantil. Eso voy a editar. Aquí está, este es el pie de página Id, Colofon clase site-pie de página. Si le echo un vistazo, este descargo de responsabilidad aquí, va a checar en herramientas web, voy a volver a poner esto en el lado derecho para que pueda tener una mejor vista. Este elemento aquí es el lado que acabamos de personalizar, pero este es el site-info y dentro del site-info esta la clase nombre-sitio y luego la huella de clase. Creo, esto es lo que tengo que quitar, así div clase site-info y el link-imprint, clase-imprint. Aquí es donde comienza la siguiente función, no voy a tocar esa. Sólo voy a eliminar aquí, guardarlo en el servidor y echar un vistazo aquí en el navegador, perfecto. 7. Consejo extra: íconos de pie: Aquí tienes un consejo de bonificación para aquellos que, como yo, necesitan implementar banderas de iconos o iconos de bandera junto a estos dos enlaces o en cualquier otro lugar del código. Tengo búsqueda en internet y encontré aquí en GitHub, un gran repositorio de lipis, quien es desarrollador web en Wire app y Google, y ha creado este paquete que se llama flag-icon-css. Puedes instalar este paquete con tus herramientas de gestión de tareas si tienes un gran proyecto y si trabajas con JavaScript, pero vamos a implementar esto realmente a pie porque nuestro proyecto no es tan enorme y podemos implementarlo solo con una línea de código HTML. He descargado este archivo, el archivo zip. Está aquí. Lo he descomprimido, y dentro está el CSS, que voy a necesitar y las banderas. Porque voy a necesitar sólo los rectángulos, no voy a subir toda la carpeta. Voy a crear una copia aquí y llamarla banderas, abrir y luego subir un rectángulo, iconos de bandera, SVG allá arriba. Mientras tanto, voy a echar un vistazo al CSS, y ahí está. Estos son los iconos, los SVG, los cuadrados, y los rectángulos. Esta línea aparentemente sólo considera los iconos cuadrados, así que voy a copiar sólo esto. Copiarlo y pegarlo en mi archivo CSS tema hijo. Por supuesto que voy a comentar esto si puedo encontrarlo más tarde y pegarlo aquí y guardar. Entonces, necesito la bandera de Estados Unidos, voy a encontrar aquí, y no necesito la cuadrada, necesito la de rectángulo. Copia esto. Bueno, SVG enlaza y péguelo en mi CSS. Entonces necesito una bandera alemana, y la voy a encontrar aquí, el rectángulo uno, copiar y pegar. Este es el archivo de estilo CSS, que tengo que confirmar que he cambiado. Sí. Ahora tenemos las banderas aquí. El CSS está en nuestro estilo, y ahora necesitamos esa línea de código HTML, que está aquí. El más bajo, el de abajo es para las banderas cuadradas. Necesito las banderas rectangulares. Me dirijo a hacer widgets, y a mi segundo widget donde están los enlaces a los idiomas, a las versiones de idiomas. Voy a pegar el HTML aquí y cambiar la dominación aquí a DE para Alemania. Pega de nuevo y cambia a EU por USA, porque los lectores de esta página también van a estar en los Estados Unidos de América, guardar, hecho. A ver. Refrescar. Se supone que están aquí. Ya ves cómo se está extendiendo el enlace, pero no se están mostrando. ¿ Qué pasó? Te voy a mostrar lo que olvidé hacer. Te puedo mostrar aquí. ¿Ves la URL? Aquí es lo mismo. El camino al archivo. Por supuesto, aquí, tengo que salir de la carpeta aquí e ir a la carpeta bandera aquí el estilo está en la raíz, solo necesito ir a la carpeta bandera. Eliminar estos dos, guardar, poner en el servidor y refrescar, y voila, aquí están. Podría molestarme en quitar este enlace subrayado, pero eso sería un poco demasiado por encima del alcance de este corto consejo. Espero que hayas visto cómo puedes retocar con el tema infantil y cambiar el look ya sea a través de la edición de los archivos PHP, los archivos de tema padre que copias en tu tema hijo o a través del área de widgets, y por supuesto en tu estilo CSS archivos. Este es nuestro sitio web ahora, y al siguiente tenemos que lidiar con el encabezado y el contenido. 8. Personalización de tu contenido: parte 1: Para poder personalizar aún más nuestra portada, echemos un vistazo al boceto. Aquí está. Aquí está el encabezado, luego el contenido, y el pie de página que acabamos de terminar de personalizar. Recuerda, hemos hablado de los archivos de plantilla, del encabezado php, y luego de todas estas plantillas para el contenido. Nuestro post fue mostrado en el índice php. Ahora estamos usando la página php porque ponemos el ajuste de lectura como una página estática para nuestra portada y el elemento del sitio con los widgets en este tema está integrado en el pie de página php. Ahora bien, ¿cómo sabemos que estamos usando la plantilla de página php para nuestra portada? Echemos un vistazo en el navegador. Esta es nuestra instalación de WordPress, nuestro dashboard, y la página que hemos creado. Estamos viendo la vista previa y aquí arriba en el tablero está el botón de editar página. No dice editar post, sólo página. También podemos checar aquí en la fuente. Si echamos un vistazo a la cláusula body, dice home, page template default, page template default, page, and page ID. Ahora puedo estar seguro de que estoy usando una de las plantillas php de página. Por lo general hay varios, pero ahora sólo tenemos uno. Es una página php, estoy seguro. Cuando miras nuestro boceto, puedes identificar que aquí no tenemos título. No se parece en absoluto a nuestro boceto. Vamos a editar esto en el editor de Gutenberg. Aquí está el título y puedo quitarlo así, actualizarlo, y echarle un vistazo. Se ha ido. Genial. Lo que puedo hacer ahora es simplemente seguir editando esta página sin el título. Para eso, necesito algunas imágenes. El primer bloque fue una imagen con algún texto. Voy al panel y voy a subir las imágenes que he preparado para este sitio web y eso está aquí en el botón de medios. Sólo voy a decir añadir nuevas imágenes, seleccionar los archivos. Va a ser éste, todos estos y otro lado abierto. Maravilloso. Ahora puedes esperar aquí, volveré cuando se suban estos. Se va a llevar un tiempo. Genial. Nuestras imágenes se suben ahora las podemos encontrar aquí en la biblioteca. Aquí es donde se van a organizar todos tus archivos multimedia. Mes tras mes, los puedes ver en una lista o en cuadrícula. Bueno, voy a volver a la página. Déjame revisar aquí. Editar página y estoy construyendo el primer bloque. Va a ser combinación de medios y texto. Voy a quitar éste y éste. Todos ellos. Basta con dar click aquí en los puntitos, quitar bloque. Estoy creando uno nuevo y necesito medios y texto. Yo quiero que sea de ancho completo en la página. Aquí en la biblioteca, necesito esta foto. Seleccionar. Entonces quiero cambiar el color de fondo y aquí va a estar mi párrafo. Primero va a ser un rumbo y va a ser así. Voy a decir biocomputación, algo así. Entonces necesito otro buck va a ser un párrafo y sólo necesito un texto ficticio. Aquí en generador de texto, copiar, pegar, y actualizar. Echemos un vistazo. Este es nuestro primer bloque, una imagen con un párrafo y un título, tal vez poner el título siendo más grande. Pero ahora no sé cuánto es la distancia entre esto y el encabezado. Si recuerdas en el boceto están justo detrás del otro. Déjame intentarlo y probarlo con el inspector web. Voy a revisar esto. Va a ser un encabezado y le voy a dar un color de fondo. Ya ves aquí siempre hay esta brecha que se supone que es un lugar para el título. Ahora puedo ir y hacer altura del encabezado, ponerlo ocho rem. Pero todavía hay esta brecha. Por supuesto que puedo hacer algo de hackeo y volver aquí en los mottos de la página de edición y decir: “Quiero que este bloque tenga una clase CSS”, sin título así. Entonces llama a una clase CSS en la hoja de estilos y digamos, pon el margen superior de menos cinco rem o algo así”. Pero no quiero cambiar esto cada vez que había una página responsive o que había un encabezado diferente. Quiero tener una plantilla nueva completa para la portada donde no tengo que preocuparme si hay un título, si lo he borrado, y si he puesto suficientes unidades menos en el margen superior de este primer párrafo. No voy a hacer eso. Voy a crear una plantilla completamente nueva. Así es como vamos a hacer eso. Para fines de demostración, estoy poniendo de nuevo en un título biocomputing, esto se va a tratar este sitio web. Actualizar, ver página. Aquí está. El título que no necesitamos. Estoy revisando las herramientas web. No es el H1, es el encabezado, todo el elemento que no necesitamos. Tiene un encabezado de entrada de clase. Imagino que ya que estamos usando la plantilla de página php, echemos un vistazo. En nuestro Cliente FTP, no está aquí en nuestro tema infantil. Tenemos que subir al tema de los padres de 2019. Aquí están todas nuestras plantillas. Aquí está la página php, ver en nuestro editor y aquí está. Dice: “La plantilla para mostrar todos los mensajes individuales”. Bueno, un contenido de página es tratado como una sola publicación porque no va a cambiar, no va a ser una lista de publicaciones cronológicas, es solo este post que se supone que es un sitio estático, que no va a cambiar. Entonces es simple, consigue encabezado, muéstrame el encabezado. Entonces aquí está el área de contenido de la sección, nuestro contenido principal del sitio. Entonces el famoso bucle de WordPress, dice, Mientras que tienen post, la publicación. Significa, si tienes algún post o mientras tienes algún post que mostrar, cualquier contenido, entonces muéstrame. Aquí no encontramos nuestro título, encontramos esta parte get template. Significa conseguirme esta parte que está en la carpeta, partes de plantilla, contenido de subcarpeta, en la página de contenido de archivo slug, y luego mostrar los comentarios. Pero no lo vamos a utilizar en nuestra página web y esta mostrando del contenido y conseguir el pie de página. Eso es todo. Esta es una plantilla de página simple. 9. Personalización de tu contenido: parte 2: ¿ Qué vamos a hacer ahora? Estamos recuperando esta parte de plantilla en nuestro Cliente FTP. Aquí están las partes de la plantilla de carpeta y aquí está el contenido. En este contenido dice, esto es por mostrar el extracto. Esto por el caso no tenemos ningún contenido en esta página. Esta es la página de contenido que nos interesa para nuestra página php. Este es el contenido de una sola publicación, un solo artículo que hemos escrito, y este es el contenido general. Esto es, por ejemplo, si tenemos 20 posts, va a mostrar 20 posts. Echemos un vistazo a esta página de contenido que nos resulta tan interesante. Estamos cazando la cabecera y aquí está. Aquí dice plantilla parte para mostrar el contenido de la página en la página php. Esto significa que la página de contenido php es un pequeño módulo de la página php. Es como una pequeña parte lego de esta casa de página entera que estamos construyendo con legos. Aquí está el encabezado que no necesitamos. No lo voy a borrar aquí porque entonces lo voy a arruinar para las otras páginas que quieren tener un encabezado. Yo sólo voy a copiar esto. Para eso estoy creando aquí un nuevo archivo y llamándolo uno. No soy muy imaginativo con esto. Solo estoy copiando y ampliando. Entonces lo voy a abrir y aquí está, vacío. Ahora, solo puedo seleccionar con calma todo esto, copiarlo, y ponerlo aquí. Es básicamente la misma página de contenido, solo página de contenido 1. No necesito este encabezado aquí. Por eso lo voy a quitar. Guardar. Hemos cambiado este pequeño módulo diminuto, cerrarlo y volver aquí, confirmar que lo hemos creado. Ahora tenemos este pequeño módulo minúsculo que hemos creado para las páginas que no tienen este título, este encabezado con el título en él. Ahora tenemos que volver a esta página php y crear una copia de la misma. Estoy arrastrando esta página hacia abajo a mi computadora para guardarla y tenerla con la que trabajar. Lo estoy abriendo en mi editor y creando un archivo completamente nuevo, que va a ser nuestra nueva plantilla de página personalizada para las páginas sin título. El único que necesito para eso es un comentario que diga nombre de plantilla. Voy a llamar a esta página, no hay página de título. Perdón, tipográfico como de costumbre. Cierra el comentario y cierra los corchetes. Ahora, voy a guardar esto aquí y llamarlo ninguna página de título, por ahora, podríamos cambiar eso después. También lo estoy guardando aquí y lo único que tengo que hacer ahora es copiar todo esto de la página, copiar, y ponerlo aquí así. Ahora porque aquí están los corchetes de cierre, tengo que eliminarlo aquí y ahora tengo esta plantilla. Pero va a la página de contenido y solo necesito la página de contenido 1, así. Voy a cerrar todo esto y sólo subir el, lo siento, tengo que refrescar aquí. El no title page, solo hay que subirlo aquí en mi tema de gráfico. Yo solo quiero revisar una cosa más aquí con la plantilla, página 1 que es tiene un contenido. Sí, sí lo hace. Ahora veamos qué pasó en el navegador. Whoops. Esta es nuestra página. Vamos a refrescarnos. Ahora puedes ver aquí en la página atributos tenemos una plantilla para elegir. El segundo es el que creamos. Se llama No Title Page. Si actualizo aquí y veo la página, wow, la tengo ahora sin el título. Eso es maravilloso. Es así como creas una plantilla de página personalizada y la subes al tema de tu gráfico. Solo tienes que cuidar las partes de plantilla que necesitas cambiar si están en tu código del archivo php de la página predeterminada. Ahora construyamos algunos bloques. Voy a dar clic aquí en editar página y no me importa este título del anuncio. Es justo ahí. No lo puedo quitar por ahora. Supongo que el tablero y el editor tienen sus hojas de estilo CSS separadas y no me voy a molestar por eso ahora. Sólo necesito un nuevo bloque que va a ser rumbo, productos, y luego va a estar centrado y actualizaciones. Entonces necesito un bloque nuevo con tres columnas. He creado el bloque de columnas y tendré que seleccionarlo aquí y aumentar el número de columnas a tres. También quiero que sea el ancho completo sobre la página. He preparado algo de texto aquí, sólo voy a copiarlo. Copiar y pegar y luego necesito una imagen. Aquí, no, aquí. Es un poco difícil seleccionar bloques en este editor de Gutenberg. Espero que se les vaya a dar algo de optimización. Pero por ahora, acabo de poner una imagen aquí y se ve insertada la imagen encima del párrafo y la necesito abajo. Doy click en esta flecha. Voy a elegir uno de la mediateca. No son bonitas, pero solo lo están haciendo bien para fines de demostración, agrega el título, copia y pega. Aquí puedes ver que puedo vincular una imagen a un archivo multimedia, otro archivo multimedia y una página de datos adjuntos y una URL personalizada. Por supuesto, siempre puedo agregar una clase CSS extra, pero solo voy a dejar esto así y luego seguir haciendo para el siguiente bloque también. Te veré cuando terminemos con esta cuadra. 10. Personalización de tu contenido: parte 3: Entonces este es nuestro producto, bloque de tres columnas. Como pueden ver difícilmente puedo leer este título, así que voy a cambiar eso. Voy aquí a editar página, y seleccionando esta imagen así, y agregando aquí una clase CSS avanzada, vamos a decir imagen de producto, actualización. Tan sólo para comprobar aquí, este elemento debe ser sí, higo de leyenda como de costumbre. Me dirijo a mi archivo CSS y luego agregando esta imagen de producto de clase, y luego fig subtion, por supuesto, y digamos color blanco, guardar, actualizar en el servidor y, comprobar en el navegador. Ya ves, he cambiado sólo esta imagen en particular. Entonces tengo que subir un nivel, y esta es toda la cuadra. ir aquí y asignar a este bloque una clase CSS extra, voy a llamarlo bloque de producto, actualización. Vaya a mi estilo CSS, y luego diga bloque de producto. Guardar, actualizar y comprobar en el navegador. Sí, ahora los tres subtítulos son visibles en color blanco. Este título no me gusta. Es un poco demasiado a la izquierda, así que tengo que checar en este bloque si puedo poner un margen extra a la izquierda. Por lo que estamos seleccionando este. Estoy agregando aquí una clase de producto, bloque, título. Uno tiene que ser bastante específico sobre esta actualización. Acude a mis hojas de estilo y luego a la derecha, producto-block-title. Digamos margin-izquierda, van a ser cinco rem, guardar y actualizar, y revisar en el navegador. No pasó nada porque probablemente me olvidé de poner aquí la regla importante. Debe haber algún otro fallo que esté anulando este estilo CSS editor, así que actualice. Aquí vamos. Está en el medio. Podría hacer también el estilo CSS de eliminar esta línea aquí. Probablemente es antes elemento. Es éste. Yo sólo voy a copiar el estilo y decir copia. Decir aquí, mostrar ninguno. Tal vez mejor poner. No, no quiero estas líneas en ninguna parte de mi sitio. Entonces sí y actualización, se ha ido. Ya ves que es bastante genial cómo puedes simplemente agregar una clase extra a un elemento de un bloque o al bloque en sí. Entonces sólo tienes que ir a la hoja de estilo y darle estilo a esta clase. Eso es todo. 11. Personalización de tu contenido: parte 4: El siguiente bloque es bastante sencillo. Sólo necesitamos dos columnas, una es con el texto, otra con el botón. Aquí, voy a añadir nuevas, y dos columnas. Déjame comprobar si son dos. Sí, lo son. Yo quiero que sea de ancho completo, y aquí voy a poner un encabezamiento, H3. Se va a decir: “Quiero saber más sobre nuestra empresa”. Aquí necesito un botón y en el texto voy a poner Aprender Más. Yo quiero que el color de fondo sea más a turquesa y más brillante, así que actualice. No les gusta esta combinación, piensan que el contraste es demasiado viejo para leer, pero lo voy a dejar por ahora. Aquí quiero poner el enlace a nuestra página Acerca. Yo he creado una página ficticia sobre nosotros solo para tener un tenedor de plaza, ver que no hay nada en ella. Pero necesito esta URL aquí, copia, vuelve a la primera página, edita. ¿ Dónde está el botón? Aquí, va a poner el enlace URL, así que actualiza. Quiero que este bloque tenga un color de fondo gris claro, y lo puedo hacer aquí. Tengo que poner una clase CSS avanzada, voy a poner más bloque, actualizar, dirigirme a mi hoja de estilo. En la hoja de estilo, voy a agregar la clase más bloque, y decir color de fondo, gris claro, guardar y actualizar, y comprobar en la página de vista del navegador. ¿ Qué pasó? Es gris claro, pero no puedo leer nada y el botón está ahí arriba. Entonces vuelve a esta hoja de estilo y dice más bloque también tiene que tener un color de gris, actualizar eso y comprobar, sí. Pero también quería tener un relleno superior, superior e inferior, pero superior. Epígrafe 2.2, correr. Veamos cómo se ve eso. Sí, moviéndose demasiado rápido, actualización. Sí, eso se ve un poco mejor, pero tal vez un poco menos de relleno, y quiero que este botón esté más a la derecha. Necesito esta clase aquí. Creo que va a ser, sí, botón de bloque WP. Voy a decir sólo editar como HTML, y copiar este botón de bloque WP, copiar, volver a Style Sheet y luego decir relleno top va a ser 2.1, y relleno inferior va a ser 1rem. Entonces necesito esta clase de botón de bloque más WP. Tiene que tener un margen a la izquierda, digamos 4rem. Veamos cómo se ve esto ahora. Refrescar, eso parece un poco más aceptable. Pero ya sabes, hay mucho trabajo de detalle por hacer, tendría un estados y todas estas cosas más bonitas como quiero tener más énfasis en este bloque, etc. Siguiente bloque es solo una copia de éste. Tiene un texto a la izquierda y una imagen a la derecha. Vamos a hacer exactamente eso. Aquí está nuestra primera cuadra. Yo lo voy a seleccionar aquí, y en este menú, voy a seleccionar Duplicar. Eso es todo. Tengo que cambiar los medios para mostrar a la derecha, y también tengo que cambiar esta imagen aquí, seleccionar, bastante fácil, y luego quiero empujarlo todo el camino por debajo de este bloque más. Me olvidé aquí, quería apilar uno encima del otro en el móvil, para gente pueda leer ver página. Como he adivinado, tenemos este bonito bloque nuevo, pero este bloque de aquí es éste. Este div tiene un margen. Además, este div tiene un margen, éste tiene un fondo y éste tiene un top. Ahora el anterior es el bloque más, lo tenemos ya en nuestra Hoja de Estilo. Yo sólo voy a decir aquí más bloque, necesito que el margen inferior sea cero, y por si acaso voy a poner importante. No quiero que nada se meta con eso. Ahora tengo que volver, primero voy a guardar esto, sí, y tengo que volver atrás. Ya verás si me refresco, sigue ahí. Pero puedo mostrarles aquí en el elemento inspect. Este div ya no tiene un fondo de margen, pero éste tiene un margen superior. ¿Qué hacemos? Simplemente agregamos una clase a esta última fila que acabamos de hacer, así que la selecciono aquí y digo que va a ser, actualizar. En la Hoja de Estilo, pon la anémona a trabajar, y digamos que la parte superior del margen va a ser cero y va a ser importante. Vamos a revisar. Sí, FileZilla no nos olvidamos, ver página, sí. Así es como se supone que debe verse, genial. Solo tenemos que retocar un poco entre crear bloques, y crear clases CSS adicionales para ellos y trabajar en ellos en tu Hoja de Estilo, y no olvides la regla importante. Ahora el último bloque va a ser el Contacto y los Google Maps. 12. Personalización de tu contenido: parte 5: Para crear nuestra última fila de contenido en la portada, necesitamos un Formulario de Contacto y Google Maps. Estamos haciendo una pequeña excursión aquí, estamos agregando un plugin que se llama, Formulario de contacto 7. Un plugin muy popular porque está integrado con tantos otros servicios. Se puede tener una recaptura. Se puede utilizar con PayPal y Stripe. Plugin muy, muy versátil. Entonces lo voy a activar. Aquí yendo a la Configuración, tengo Formulario de contacto 1, puedo dejar este nombre aquí porque voy a tener solo un formulario de contacto por ahora. Estoy copiando el código corto aquí y lo construyo en mi portada en la columna de la izquierda. Entonces estoy agregando aquí un nuevo bloque, dos columnas, y solo voy a escribir el código corto aquí dentro de la columna izquierda y luego comprobar porque quiero que sea de página completa, por supuesto, de ancho completo, lo siento, y Actualizar. Si le echo un vistazo aquí, aquí está nuestra forma, genial. Es solo un poco, ya sabes, los campos son demasiado grandes y estas etiquetas suelen tener que dejarlas arriba. Es muy útil para la accesibilidad para las personas que usan el teclado para navegar por el sitio, solo para dejar esta etiqueta arriba. Pero para este sitio web, creo que va a estar bien si solo lo pongo dentro como texto de marcador de posición. Para ello, voy de nuevo al panel aquí en Contacto, Formularios de Contacto, y Editar. Yo quiero que este texto esté aquí en esta área como portador de lugar, puedo eliminar éste, luego usar Texto como formulario de campo. Se va a llamar, tu nombre. Tu nombre. Valor predeterminado, los textos que he copiado de arriba. Utilice este texto como titular del lugar del campo. Voy a agregar un atributo ID porque más adelante, si construyo otro formulario de contacto en este sitio web, me gustaría tener la posibilidad de llamar solo a este campo específico. Va a ser, tu nombre, “Insertar etiqueta”. Aquí está, puedo borrar éste. Para el correo electrónico, es más o menos lo mismo. Copiar, puedo eliminar esto y poner Email. Campo requerido, va a ser tu correo electrónico. Valor predeterminado, el que copié de arriba. Utilice este texto como Placeholder. ID, su correo electrónico, “Insertar Etiqueta”. Puedo borrar éste. El formulario dice que tiene algún tipo de conflicto. No lo sé, todo está bien. Al igual que, Guardar forma, estamos de vuelta. Tema, al igual que. Sí, tengo que hacer es aquí también. Texto, y no va a ser un campo requerido. Sólo va a ser sujeto. Valor por defecto, sujeto. Usa este texto. Asunto, “Insertar Etiqueta” y eliminar aquí. Entonces el último es, tu mensaje. Yo sólo voy a eliminar aquí. Área de texto, exactamente. Voy a dejarlo aquí. Valor predeterminado, su mensaje. Usa esto. No voy a usar un atributo de ID de texto. Entonces este es nuestro nuevo formulario Guardar, y echar un vistazo a la página. Déjame ver. Ahora se ve diferente y sólo tengo que darle estilo aquí. Para darle estilo a este campo, solo voy a abrir mis herramientas web aquí y comprobar. Esta es mi forma, clase de formulario, wcpf7-form, realmente agradable. Cada uno de los elementos está aquí en un párrafo, la etiqueta y la clase span, y dentro de la clase span está el elemento de entrada que quiero darle estilo. Entonces voy aquí, sólo voy a empujar esto hacia arriba para que sea más fácil de leer. Texto de tipo de entrada y etcétera. Yo quiero que el fondo sea gris, así que sólo voy a escribir aaa. No quiero ninguna frontera aquí, ninguna. Eso es todo. Voy a copiar este primer texto [inaudible]. Asegúrese de seleccionar todo. Vuelve a la hoja de estilos, escribe esto, y luego copia esta clase del formulario. Editar HTML, y la clase está aquí. Estoy copiando esto, poniéndolo en mi hoja de estilo como clase, y por supuesto es un tipográfico como ese. Voy a guardarlo aquí y luego volver porque también quiero cambiar este color aquí. También va a ser gris. Simplemente lo tiraré un poco así, quizá un poco más arriba. Sí. Entonces quería que fuera Source Sans Pro y sans-serif, y la altura de línea cinco. Tengo que copiar todo esto. Bueno, no todo pero, sí, lo estoy intentando aquí. Copia y luego edita aquí y agrega la clase. De acuerdo, guárdalo. Confirmar. Vuelve al navegador. Además, quiero cambiar el tamaño de la fuente. Va a ser 8.8rem. Voy a copiar esto aquí. Copiarlo y pegarlo aquí, wpcf7-form como la clase. Por supuesto, tengo que ponerlo frente a cada uno de estos elementos. No dejes que nadie te diga de manera diferente. Lo cual por supuesto, es más fácil hacer eso en SAS, pero aquí estamos haciendo las cosas manualmente. Sí, no tengo que volver a escribir esto aquí, sólo voy a añadir font-size, rem y todo lo que no aparece, probablemente va a ser una regla importante. Veamos qué hemos hecho hasta ahora. Refrescar. Básicamente parece que quería que pareciera. De acuerdo, tal vez no el botón, pero tú consigues el punto. Solo tienes que abrir tus Herramientas Web, elegir los Elementos, ver sus clases y luego editarlas en tu hoja de estilos. Vamos a los Google Maps, nuestra segunda columna. Para incrustar Google Map aquí en nuestro sitio web, simplemente vamos a Google Maps, ingresamos la dirección del negocio que queremos mostrar, y luego tal vez haciendo clic en este marcador y luego Compartir. Déjame solo comprobar si esto va a funcionar, veces no lo hace y no sé por qué. No podemos incrustar mapa, no funcionó ahora. Voy a refrescar esto así, y luego hacer clic en “Compartir”, incrustar un mapa, y ahora funcionó. Entonces aquí incluso puedo elegir, voy a copiar esto, “Copiar HTML” y luego elegir hasta el tamaño. Voy a poner la talla que he visto que necesito. Tiene 650 de ancho y 595 de altura, y luego “Copiar HTML” de nuevo con las dimensiones. Vaya a Nuestra Página, Editar página, y edite la columna. Entonces aquí hago clic en este botón Agregar bloque y tengo seleccionada una columna y de inmediato quiero agregar una clase CSS adicional, lo voy a llamar Google map, solo para tener la posibilidad de darle estilo a este mapa. Voy a actualizar aquí. Entonces aquí dentro, voy a elegir el bloque HTML personalizado. Entonces así, introduce el código de la página de Google Maps y luego Actualizar. View Page, y este es nuestro mapa. Podemos darle estilo de nuevo con nuestra clase CSS extra, pero básicamente ahora hemos agregado Google Maps con la dirección del negocio. Eso fue todo con la personalización del contenido, estamos pasando al encabezado. 13. Personalización del logotipo de la cabeza del encabezado: Para personalizar nuestro encabezado, por supuesto necesitamos un logotipo aquí. He preparado una pequeña demo aquí del logo por defecto para este tema. Voy a personalizar una identidad de sitio y aquí voy a seleccionar un logotipo de la mediateca. He subido una imagen donde se encuentran como plantilla en Internet, y la voy a seleccionar. Aquí dice, “Recortar imagen," publicar, cerrar el personalizador, y este es el logotipo completo para el tema 2019. Según entendí, el tema tiene un énfasis en el texto y la escritura, por lo que, es genial para periodistas, bloggers, y autores, pero para mi sitio web y los propósitos de branding, realmente necesito un logotipo más grande. Vuelvo al personalizador para quitar éste, quitar logo, publicar de nuevo, y luego me dirijo a la mediateca para agregar nuevo archivo, mi logo SVG. A mí me gusta SVG, es archivo vectorizado y no pierde calidad al escalar, pero a WordPress no le gusta aquí. Dice, no está permitido por razones de seguridad, cual es genial porque alguien se está ocupando de la seguridad de archivos en WordPress, pero entonces significa que voy a tener que usar en un plugin, y encontré uno que se llama soporte SVG. Aquí está. Va a instalarlo y activarlo. Ir a la configuración, si le echo un vistazo, no voy a cambiar nada. Dice, “Restringir a los administradores”, lo cual es bueno, solo que me permiten lidiar con los SVG y subirlos, entonces, eso es todo. Vuelvo a la mediateca, y agregando de nuevo mi logo SVG, abierto, y aquí está, funcionó. Esto es bueno. Volviendo al personalizador, identidad del sitio, seleccione “Logo”, aquí está, seleccione, y dice, “Recortar imagen ", pero dice: “Ha habido un error. Todavía no nos gusta”. Bueno, he buscado la razón de esto y he encontrado que en el tema de los padres 2019, en las funciones archivo PHP, hay una función considerando este logotipo personalizado, lo voy a encontrar aquí, logo personalizado. Dice: “La altura es de 190 píxeles, el ancho es de 190 píxeles”, entonces, es un cuadrado, y luego está Flex width establecido en false, no hay ancho flexible, y no hay altura flexible, entonces, tengo que cambiar esto. He mirado a través de los foros de WordPress org y encontrado en los códecs, aquí está este código que voy a copiar, y lo he puesto como respuesta a muchas preguntas de personalizar el logo 2019, entonces, me dirijo a mis funciones PHP en el tema infantil aquí, y voy a añadir este código y adaptarlo a mi tema. Entonces aquí bajo esta función encola WP child theme, que termina aquí con estos corchetes, voy a pegar esta función y luego cambiar el nombre, voy a llamarlo logo personalizado L-yaks, y va a ser 100 píxeles de alto y 400 píxeles de ancho. El ancho flexible se establece en true y también quiero que la altura flexible se establezca en true. Al igual, y eso es todo. Creo que voy a borrar esto. Oh, tengo que cambiar esto aquí, claro. Es mi función de logotipo personalizado L-yaks. Prefijo, sí, creo que eso es todo. Voy a guardar esto y subirlo al servidor, y echar un vistazo aquí. Nuevamente, personaliza, identidades del sitio, selecciona “Logo”, “Archivo SVG”, y solo voy a omitir recorte. Eso es todo, publicar, cerrar, y aquí estamos. Tenemos aquí este diminuto logo que no es para nada lo que necesitamos. También tenemos el título del sitio que no quiero aparecer aquí. Pero ahora ya sabes cómo vamos a cambiar esto. Vamos a dirigirnos al archivo CSS de estilo y adaptar el encabezado a nuestras necesidades. Sólo necesitábamos crear la posibilidad de un tamaño flexible del logo en nuestras funciones PHP. Entonces nos vemos en un poco en nuestro estilo CSS. Apenas rápido antes de sumergirnos en nuestra hoja de estilo, hay un elemento estructural esencial que falta. Su nuestro menú aquí. Voy aquí a los menús y a darle un nombre a mi menú. Voy a llamarlo menú superior. Va a estar encima de una página, crear menú. Va a ser un menú primario. Guárdalo. Entonces voy a agregar todas estas páginas que he creado como tenedores de lugar al menú aquí, luego simplemente arrastrarlas y soltarlas en el orden que quiero que estén en los menús. Esto viene aquí, así, y guardar menú, echar un vistazo, está aquí. Es hacerse cargo del estilo de los enlaces, pero queremos que esté aquí del lado derecho y que tenga tipografía más pequeña. Entonces voy a abrir mis herramientas web y echar un vistazo. Se trata de la navegación del sitio de ID de navegación. Voy a editar como HTML copiar esto, ponerlo en mi hoja de estilo. Tengo que crear un nuevo capítulo aquí llamado headers styling y pegar este ID, y decir, quiero que flotes bien y también quiero que tengas un tamaño de fuente de 0.7 RM, guardar. Por supuesto, en el servidor también volver al navegador. Comprobando esto y algo sucedió aquí. Tenemos la tipografía correcta, pero no queremos este menú minimizado aquí. Esto es para el sitio móvil y apenas en un minuto, te voy a explicar lo que pasó. Entonces a continuación, quiero eliminar el título del sitio aquí y copiar este título del sitio de clase, ir a mi hoja de estilos, agregarlo aquí y decir error tipográfico del sitio de clase. Por favor, muestre ninguno. Guardar y comprobar. Se ha ido y ahora tenemos nuestro minúsculo logo redondo que absolutamente no está haciendo su trabajo por nuestra página web. Déjame revisar aquí es el logo del sitio. Sí, este es el posicionamiento del div. Dentro del div está el enlace que tiene el radio de frontera cuadro de transición sombra todo esto, solo voy a copiarlo, ponerlo en mi hoja de estilo, y decir, quiero que el radio de borde sea cero. Está bien, esto está bien. No quiero sombras de caja y así muestra bloque y ancho y alto. No creo que haya 50 pixel vaya a estar bien. Transición, por favor ninguno. Ahorra y comprueba lo que hemos hecho. Aquí. Es pequeñísimo y por supuesto el estado flotante, tengo que cambiar ese también. Aquí en el inspector, voy a echar un vistazo al estado flotante aquí y dice logo del sitio tiene una sombra de caja negra. También tiene un borde, el borde amarillo que tenemos en todos los enlaces de nuestra página. Entonces tengo que cambiarlo en mi hoja de estilo aquí. Voy a decir que pegue esto aquí y diga box shadow none, transition none y border color tiene que ser transparente. Pero esta es una regla importante porque es una regla general para todos los vínculos. Esto tiene que ser más específico. Ahorra en el servidor y comprobando el navegador y el estado de desplazamiento, ahora se ha ido. Esto es bueno. Apenas ahora tenemos que lidiar con el tamaño de estos logotipos. Si pongo aquí, solo checa esto son 50 pixels. Si pongo 400. Entonces el logo se ha ido y esto se debe a que la posición de este sitio logo div está de vuelta a la derecha. Entonces tengo que decir auto y sí, también hay que cambiar la altura. Van a ser 100 pixeles. Sí, y la posición tiene que cambiar por supuesto también. No voy a hacer eso. Esto es demasiado grande. Entonces voy a las hojas de estilo y diciendo la hoja de estilo, necesito quizá el 80 por ciento de este ancho, altura. Entonces y si le echo un vistazo, el logo se ha ido, así que tengo que cambiar la posición de este logo del sitio, y luego también lo importante aquí es que el negocio es una consulta de medios para pantallas grandes que son todo lo que está arriba 768 píxeles. Yo también tengo que encargarme de eso y aquí, voy a copiar esto. Voy a decir derecho auto e importante, pero también tengo que agregar la consulta de medios y min-width es de 768 pixels. Sí entonces, y necesito algunos corchetes aquí y aquí guardar y comprobar y aquí está nuestro logo. Ahora, sólo necesitamos posicionar esto en la posición correcta con relleno y margen y también tengo que cambiar el color de este encabezado, que este sea el encabezado, cabecera ID. Yo sólo voy a copiar esto. Ponlo en la hoja de estilo. Es una identificación y creo que el color de fondo, lo he escrito aquí en nota. El color de fondo es 353942. He dado estilo a esto un poco más. Por lo que para el encabezado, he aumentado la altura aquí, no sólo he cambiado el color y para la navegación, que es sólo un botón. Ahora, también he cambiado la parte superior del margen, por lo que está más iluminada con el logo. Y no hay límites para el estilo CSS en tu hoja de estilo. Solo quería mostrarte qué función en el archivo de funciones se encarga de mostrar el tamaño de este logotipo, y luego hemos cambiado un poco el CSS para quitar el radio, quitar los bordes, y la posición para que podamos mostrar ese logotipo completo. Aquí ahora nos dirigimos a ver qué pasó con la navegación. Ya he empezado también un poco para la versión móvil. Pero lo que quería mostrarte es en realidad un pequeño truco. Me estaba volviendo loco por esta pantalla del botón en la versión de escritorio en pantallas grandes y pasé por archivos prístinos de palabra entera. Lo que he encontrado es en realidad el aquí en 2019 en sí en archivos JavaScript, hay un archivo llamado menú prioritario JS. Cuando eché un vistazo por dentro para ver qué función está jugando realmente con este menú de navegación, descubrí que hay un error tipográfico y dice navivation en lugar de navigation. Ahora bien, no sé si este fue un nombre con propósito. Acabo de comprobarlo, aplaudí la versión corregida y ahora ves si actualizo nuestro menú principal de navegación está aquí. Entonces eso fue básicamente todo lo hemos terminado la varilla, la primera creación o personalización del 2019 para que se vea como el tema en el que se supone que debemos trabajar y ahora por supuesto, los pequeños detalles van a suceder haciendo que el topografía imágenes bonitas, etcétera. No hay límites para eso. Solo quería mostrarte cómo trabajar con los archivos de funciones, con los archivos de plantilla, con el CSS para crear el tema que te gustaría tener para tu sitio web. 14. Conclusión: Ahora hemos visto cómo los archivos de plantilla, las funciones PHP, la hoja de estilos CSS, los widgets, y los plugins pueden trabajar juntos para personalizar el 2019, o los demás temas para ese asunto, y cómo adaptarlo a nuestro propio diseño. Espero que hayas encontrado algunos consejos valiosos para tus propias personalizaciones, y realmente espero ver tu sitio de WordPress y lo que has hecho para personalizarlo. Feliz personalización.