Cómo construir sitios web de Wordpress de manera eficiente con Divi

1. Introducción: Hola y bienvenidos a cómo construir de manera eficiente sitios web WordPress con Divi. Mi nombre es Chris, y he estado trabajando como desarrollador web durante los últimos tres años, a menudo trabajando con WordPress. largo de los años he venido a aprender a construir sitios web de WordPress de la manera correcta, y lo que quiero decir con eso es cómo construir sitios de manera eficiente que también sean capaces de actualizarse fácilmente y mantenerse por el camino. Ya ves cuando construí mi primer sitio web, decidí construir mi propio tema desde cero. Tomé una clase de siete horas solo para aprender los conceptos básicos y luego pasé las siguientes semanas trabajando en mi página web a tiempo completo para que funcionara. No sólo me tomó mucho tiempo construir, cada vez que quería actualizarlo, incluso solo para cambiar algún texto en una página de aprendizaje, necesitaba saltar al código back-end y actualizar el sitio web manualmente. Confía en mí, es un dolor en el culo y me preguntaba a mí mismo cómo hacen los freelancers y agencias profesionales los sitios de WordPress? Seguramente no pasan 40 horas a la semana construyendo un solo sitio, ¿qué es lo que me falta aquí? Bueno, no fue hasta que pasé meses y años trabajando como freelance con WordPress, hablando con otros desarrolladores y trabajando para agencias que me di cuenta de la manera correcta de desarrollar sitios de WordPress. Ahora bien, no me malinterpretes si quieres crear tu propio tema para vender como producto en bosque temático o mercados similares, sé mi invitado. Pero para construir rápido e [inaudible] personalizar sitios web de WordPress para clientes, no quieres tener que reinventar la rueda cada vez que te encomienda un nuevo desarrollo de sitio. Entonces en este curso, te voy a enseñar a desarrollar y actualizar sitios web de WordPress mucho más rápido personalizando un tema premium como Divi. Divi es ahora lo que uso para desarrollar todos mis propios sitios web así como sitios web para clientes, y he encontrado que es uno de los temas más versátiles y eficientes para crear cualquier diseño o diseño que le plazca. Entonces si estás listo para aprender la forma correcta de desarrollar sitios web de WordPress, haz clic en el siguiente video y empecemos. 2. Lo que necesitarás para esta clase: Antes de que empecemos, vas a necesitar algunas cosas. Número 1, algunas habilidades previas. Vas a necesitar algunos conocimientos básicos de HTML, CSS, y PHP, y algunas habilidades básicas de webmaster es decir, cómo hospedar y usar herramientas para actualizar tu sitio web. Si este es tu primer curso de desarrollo web y no estás familiarizado con lo básico, definitivamente te recomiendo que veas mi primera clase de habilidades compartir “Entendiendo Desarrollo Web”, que te dará el conocimiento principiante para participar en esta clase. En cuanto a nuestra pila de tecnología, es muy básico. Número 1, vamos a necesitar un servidor que sea un lugar para hospedar tu nuevo sitio web. Vamos a necesitar WordPress y vamos a necesitar Divi. Hosting cubrimos en la comprensión del desarrollo web y cubrimos un poco de instalar WordPress. Divi por supuesto, es un tema premium personalizado, por lo que sí viene con un costo. Por último, las herramientas que necesitas para desarrollar tu sitio WordPress incluyen, un editor de código, un cliente FTP, y si estás construyendo tu sitio localmente, un servidor web PHP, como MAMP en Mac, o WAMP en PC. Pero de nuevo, todos esos estaban cubiertos en mi última clase. Por lo que ahora debes entender eso y estar listo para ponerlo en práctica. Si no, quizá revise algunas de esas partes de la clase anterior, y vuelva a visitarnos aquí cuando esté listo. Creo que eso cubre lo que necesitaremos para empezar. Te veré en el siguiente video donde discutiremos WordPress y Divi, y cómo juntos podemos construir sitios web de WordPress súper rápido, y sin embargo totalmente personalizables al mismo tiempo. 3. Introducción a Wordpress: Si tomaras mi curso anterior entendiendo el desarrollo web, te habrían introducido a WordPress a través de la lección de bonificación al final de la clase. Para recapitular, WordPress es básicamente un sistema de gestión de contenido libre y de código abierto basado en PHP y MySQL. Esencialmente, se trata de un montón de código que establece las bases para un sitio web basado en contenido. Pero, ¿a qué me refiero cuando digo sitio web basado en contenido? Bueno, si alguna vez has leído un blog en línea o has leído a través de páginas de un sitio web de la empresa, entonces has interactuado con un sitio web basado en contenido. Es simplemente un sitio web que puede mostrar contenido, ya sea un montón de páginas o entradas de blog que se liberan de forma regular. La mayoría de los sitios web, diría yo, se ajustan a este modelo de un sitio basado en contenido. Es decir que el sitio web es simplemente una fuente de contenido donde la finalidad principal del sitio web es que los usuarios consuman contenido. Eso es todo. Para comparar eso con lo que se llama Aplicación Web. Las aplicaciones web proporcionan algunas funcionalidades personalizadas. Por ejemplo, Google Docs. Es un lugar donde puedes escribir, editar y ver documentos compartidos. Facebook, otra Aplicación Web para redes sociales y conectarse con amigos, y Dropbox una aplicación para almacenamiento de archivos. Ahora bien, si bien los sitios web basados en contenido que se construyen en WordPress también podrían considerarse aplicaciones, todos comparten una funcionalidad básica, que es compartir contenido. tanto que todos los ejemplos que mencioné anteriormente, todos hacen algo muy distinto. Básicamente, a menos que quieras desarrollar una nueva pieza de software para rivalizar con Facebook o ABNB, entonces la mayoría de las veces cuando alguien dice que quiere un sitio web, probablemente estén hablando de un sitio web basado en contenido. WordPress es definitivamente el software más popular para desarrollar estos sitios. De hecho, según algunas fuentes, alimenta casi un tercio de Internet. La popularidad de una plataforma en particular es algo bueno porque esto significa que hay una enorme comunidad de desarrolladores que brindan soporte y crean miles de temas y plug-ins para tu sitio de WordPress. Espera, ¿cuáles son los temas y los plug-ins? Me alegra que lo pidieras porque estaba a punto de cubrirlos ahora mismo. Al instalar un sitio de WordPress, obtendrás el siguiente diseño. Básicamente, se ven así. Esto se personalizará en función de lo que pongas en el formulario al instalar. Vamos a repasar la instalación más tarde. Pero básicamente este es tu título de blog y este es tu lema, que termina como un subtítulo. Eso es dinámico desde cuando haces la instalación. Pero este look con la parte y el mundo Hola aquí abajo será el mismo si estás lanzando un sitio de WordPress en este momento al mismo tiempo se grabó este curso. El descargo de responsabilidad aquí es que WordPress cambia su tema cada año, sacan un nuevo tema predeterminado. Si estás haciendo este curso más adelante en el año o 2019, 2020, probablemente el tema predeterminado haya cambiado para entonces. Pero por ahora, cualquiera que instale WordPress recibe este tema que se llama 2017. A pesar de que es 2018, aún no han lanzado el tema de 2018. Lo que queremos hacer ahora solo para mostrarte temas y plugins es entrar en nuestro Dashboard de WordPress. Actualmente estoy desconectado ahora, así que voy a tener que poner en mis datos de inicio de sesión. He guardado estos aquí. Estos son los que vamos a utilizar en el video posterior sobre la instalación de WordPress. Pero básicamente es lo que sea que configures cuando instalas WordPress. Lo que obtienes es el panel de WordPress. Esto es todo. El front end de su página web es lo que vimos antes. Esto es lo que verás. Si estás conectado, conseguirás esta barra aquí arriba, que solo te muestra que estás conectado y luego puedes entrar y hacer dashboard. Entonces dependiendo de qué plugins o cosas no hayas almacenado, podría haber más aquí arriba. De hecho, usando Divi, habrá algunos botones nuevos que subirán aquí. También ciertas partes de la página que puedes editar como Admin, podrás editar, iniciar sesión. Esa es tu cara frontal de la página web. Este es su panel de control que sólo utiliza su sitio web ver y puede entrar. Entonces todos estos campos, todos estos pequeños menús, cosas que sólo los admins pueden ver. De lo primero que quiero hablar son temas. Vas a Apariencia, haz click en temas, y puedes ver aquí el tema del que estaba hablando 2017 está instalado. Si instalaras esto en 2015, habrías conseguido eso como tu tema predeterminado. En 2016, habrías conseguido eso como tu tema predeterminado. Puedes entrar aquí y puedes vivir vista previa y ver cómo sería tu tema si utilizaras ese tema. En lugar de cambiar de inmediato, puedes tener un poco de vista previa si te gusta. Genial. Puedes activar y publicar o puedes cambiar algunos de los ajustes aquí y luego activar y publicar y obtendrás ese tema. Ahora para explicar un poco los temas, es básicamente como la piel de tu sitio web. Organizará el diseño y esas cosas. Si miramos el adelanto de 2017 aquí, tiene esta gran imagen con el título y subtítulo de tu blog. Perdón, tagline es como lo llaman en WordPress. Entonces tienes la barra de menús, y es algo de paralaje, por lo que la imagen no cambia, pero el contenido sale de abajo. Ahora hay por supuesto, alguna personalización con esto. Podemos establecer esto en una página con contenido estático en ella en lugar de una lista de todas las entradas del blog. Hay mucho que podemos hacer, pero básicamente la piel o la disposición está dictada por el tema. En realidad una de las razones por las que me gusta usar Divi como tema, es que empieza bastante bajo o no hace nada loco con el layout. Simplemente tiene una barra de menús, la barra lateral. Es bastante minimalista, lo cual es bueno porque nos da mucho espacio para la personalización. Una vez que instalemos Divi y empecemos a usarlo, empezarás a entender los temas un poco mejor. Pero las otras cosas principales que conectamos a WordPress se llaman acertadamente plugins. Puedes entrar aquí y puedes ver qué plugins ya tenemos instalados. Estos son algunos plugins predeterminados que han venido con esta instalación de WordPress. Si quisiéramos agregar nuevos, hay miles y miles de plugins. ¿ Cuáles son los plugins? Los plugins son básicamente una funcionalidad extra que puede entrar en tu proyecto. Si quisiéramos añadir editar una meta descripción, que haremos en un video futuro. Voy a repasar algunos de los plugins más populares. Podemos añadir un plugin SEO. Podemos agregar cosas como Google Analytics. Hay algunos que hacen funcionalidad muy básica, que es sólo clonar una página, suena muy básico, pero WordPress no lo incluye por defecto. Alguien duplicar páginas. El que uso. Alguien hizo un plugin con el que puedes duplicar páginas. Para resumir temas y plugins. Temas como tu piel, es el diseño, es en lo que se construye el sitio web. Se dicta lo que va en las páginas, pero el diseño y el estilo básico está determinado por el tema. Los plugins le dan a su sitio web una nueva funcionalidad que no tenía antes. Hay un trade-off de plugins a veces agregan demasiado. Puede pesar su sitio web. Si todo lo que requiere es un pequeño cambio de código y estás feliz entrar y cambiar el código, entonces estás bien. De lo contrario, a veces es mejor usar un plugin. Eso debería establecer lo que es un tema y un plugin. Te quiero mostrar una vez que entremos en un tema determinado, hay una opción para personalizar. Ahora esto lo configura el desarrollador del tema. Eligen qué poner en este menú personalizado. Solo estás limitado por lo que el desarrollador del tema decide poner aquí. Pero lo que podemos hacer es poner nuestro propio logo. Podemos cambiar el título y el lema del sitio, que es lo que viene aquí arriba. Podemos optar por no mostrarlos en absoluto. Algunos de estos cambios se mostrarán en vivo como los estamos haciendo. Podemos cambiar esquema de color. Aquí abajo va a ser texto claro sobre un fondo oscuro en lugar de texto oscuro sobre un fondo claro. Podemos crear menús aquí. Podemos crear widgets aquí, que probablemente mejor hacerlos en el tablero. Pero básicamente vamos a crear un cambio. A mí me gusta este fondo oscuro, así que voy a dar clic en eso y luego voy a dar clic en publicar. Eso va a hacer que nuestros cambios vivan. Ahora eso fue sólo un adelanto. Ahora está en vivo porque dice publicado aquí. Ahora, ese es probablemente el primer lugar al que irías a personalizar tu tema. Pero puedes ir muy profundo. Lo profundo que puedes ir es realmente puedes cavar en el código. Se puede bajar a aquí a editor. Tienes control completo del código fuente de tu tema. WordPress nos está dando una advertencia. Tienes la capacidad de estropear todo tu sitio web si te metes con las plantillas de PHP. No se aconseja que hagas cosas aquí sin saber lo que estás haciendo y lo que estás tratando de lograr. Voy a dar clic a entender. Entonces vemos aquí nuestros archivos temáticos. Esta es las hojas de estilo que tiene todos nuestros estilos. Entonces tenemos todos estos ficheros de plantilla, que te explicaré un poco más adelante en el curso. Básicamente lo que quería salir aquí es esto lo que hace poderoso a WordPress. Tienes opciones de personalización de nivel superior que te permiten cambiar las cosas. Al hacer clic en personalizar de nuevo, puedes entrar en constructores visuales y hacer clic en y cambiar las cosas, cómo lo harías en cualquier sitio web sin ningún código. Pero entonces si necesitas profundizar, tal vez haya algo aquí que puedas cambiar. Puedes entrar a la derecha en el código y toda la base de código es de código completamente abierto. Tengo una instalación local aquí mismo. Entonces te puedo mostrar. Esto es algo que voy a configurar más adelante en el curso en el Instalar WordPress localmente. Pero como puedes ver, esto es WordPress justo aquí. Sí, también hay una base de datos que es completamente editable, pero aquí están todos tus archivos. Si entramos en WP Content y entramos en temas, entonces entramos en 2017, esto coincidirá con lo que hay aquí. Ya ves tenemos la hoja de estilo aquí. Hoja de estilo ahí. El archivo functions.php, muy importante está ahí, y también está ahí. Puedes editarlo aquí o puedes editarlo aquí. El punto que estoy haciendo es la personalización completa de la base de código y también el beneficio de tener un tablero en el que puedes entrar y cambiar las cosas sin tener que cavar en el código. Eso es lo que hace a WordPress realmente poderoso. Por eso es un CMS muy popular. 4. Introducción a Divi: Divi es un tema premium creado por una empresa llamada Elegant Themes. Desafortunadamente, como mencionamos anteriormente, Divi es un tema de pago, y al momento de grabar este curso, es de 89 dólares anuales tener los derechos para usar Divi. Ahora bien, si 89 dólares te suena mucho, sólo entiende aquí el posible valor. Con una suscripción de $89 al año, puedes crear tantos sitios Divi como quieras. Si estás freelance o dirigiendo una agencia, este $89 se convierte en un no-cerebro ya que solo pagas una vez al año, y luego eres capaz de ofrecer ese valor a todos tus clientes. Pero, depende de ti. Sólo puedo hablar por mí mismo cuando se trata de Divi, y debo decir que bien vale la pena. Hay algunas alternativas aunque que discutiremos en tan solo un segundo así que mantente atentos. Por ahora sin embargo, quiero explicar más sobre Divi, y para eso, es hora de regresar a la computadora. Vamos a repasar cómo instalar Divi en un video posterior. Pero solo para darte una demostración rápida, después de instalar y activar Divi, tu sitio web cambiará a esto. Esto es básicamente Divi por defecto, y puede que no parezca tan impresionante a primera vista, pero el poder de Divi está en la compilación de páginas. Entonces lo que voy a hacer es dar clic en “Nueva página” y podemos empezar a ver qué les gusta a los constructores de páginas Divi. Ahora en una página de wordpress tradicional o post de wordpress sin Divi, esto es lo que usarías. Por lo que tus opciones aquí arriba y puedes poner en un Encabezado. Entonces aquí arriba sería un encabezamiento 1, así que pondré en ellos están rumbo 2, y estar como bien, llamémoslo rumbo 2 No sé qué poner ahí, y entonces tienes párrafo bla, bla , bla, bla, bla. Puedes atrevirlo, puedes cursiva, puedes alinearte al centro a la izquierda, a derecha, convertirlo en una cita, insertar un enlace, todas esas cosas, pero eso es más o menos todo. Se puede ir al texto y editarlo en estilo HTML. Entonces verás que cuando salimos alineados algo, está poniendo un estilo para alinear a la izquierda, así que solo para demostrar que un alinear a la izquierda, lo siento, texto en línea a la derecha, y lo cambia ahí, pero podemos entrar en HTML y cámbialo a izquierda y queda a la izquierda. Ahora, es decir, el editor normal de wordpress, pero el poder de Divi está en el constructor de páginas, como dije antes. Voy a dar click en este gran botón morado para usar el constructor de páginas. A mí me gusta usar el editor por defecto porque se puede ver la estructura, pero también se puede usar un constructor visual que permite crear cosas, y verlo visualmente de inmediato. En esta demo para mostrarte el poder de Divi, creo que va a ser más impresionante usar el constructor visual, así que voy a saltar a eso. Se pregunta si quieres tomar el tour, definitivamente puedes hacer ese tour, solo voy a empezar a construir porque ya lo he hecho antes. Tienes tu página que está como en blanco, pero luego tienes esta que es tu sección, reas, puedes agregar en otra fila. Puedes convertirla en una fila de dos columnas, y luego puedes insertar módulos. Simplemente estoy corriendo por esto rápidamente como una demo, verás lo que podemos hacer con más detalle más adelante por la pista. Pero déjame sólo ver qué es lo que voy a poner en una imagen. Todavía no tengo ninguna imágen. ¿ Qué fotos tengo? Tengo una foto mía. Entonces puedo poner eso ahí, y eso ocupará la mitad de la página porque he configurado un diseño de dos columnas. Entonces aquí a lo mejor puedo armar algún texto, y tal vez la primera parte del texto sea un título grande diciendo: “Hola, soy Chris”. Se puede ver que estos cambios están sucediendo con vida frente a ti, ese es el poder del constructor visual de divi. Esto es esencialmente lo que hace un constructor de páginas, no necesariamente de esta manera visual, pero permite construir una página basada en secciones, filas, columnas y módulos. Eso difiere ligeramente entre diferentes constructores de páginas, pero eso generalmente es una buena estructura, una buena jerarquía para mirar las cosas: secciones, columnas, filas y módulos. Definitivamente así funciona en Divi. Entonces si te gusta esto, por ejemplo, tal vez querías poner en otra sección, y puede ser una sección de ancho completo o una sección regular, entonces te va a preguntar de nuevo, ¿cuántas columnas quieres en tu fila? A lo mejor cuatro columnas, se puede ver aquí. Ahora, puedo presionar el botón y agregar más módulos. También puedes agregar un módulo de código personalizado, solo pon el código que quieras y aún está alineado. Supongo que los mayores beneficios de la construcción de páginas es el diseño, porque podemos crear fácilmente estos diseños responsivos de cuatro columnas. Si fuera a hacerlo, no creo que funcione cuando se tiene constructor visual. Entonces puedes ver aquí es sensible, eso estaba a la izquierda y eso a la derecha. Pero ahora, como lo he encogido, se va a un entorno más encogido. Este es el poder de usar un tema premium por cierto, definitivamente está todo optimizado para móviles para que puedas tener estos diseños fluidos, pero luego también puedes aprovechar los módulos. Entonces lo que sería uno fresco, como un contador de círculos. Entonces todo lo que necesitas hacer es poner un número. Tienes este círculo que anima directamente con solo ponerlo en like. Codificar esto llevaría mucho más tiempo, pero obtienes estos elementos o sus módulos de código en Divi que solo puedes arrojar cosas así que digamos en 50 por ciento completo. Después presionas “Tick”, y luego vienes aquí abajo, y luego puedes publicar o guardar borrador. Entonces ese es esencialmente el constructor de páginas Divi y esto es lo que hace de Divi una poderosa herramienta para el desarrollo en la prensa web. Pero es importante tener en cuenta que Divi no es el único tema que viene con un constructor de páginas. Siento que sería una negación de mi parte sólo hablar de Divi y no de otra cosa. Uno de los más populares era conocido anteriormente como Visual Composer y ahora se le llama WP bakery page builder. No sé por qué cambiaron el nombre a eso, pero aún lo puedes encontrar usando el término de búsqueda visual builder. Puedes ir a su página, y dicen ser el plugin de constructor de páginas de prensa número uno. Por lo que tiene la forma muy similar de construir páginas con secciones, filas, diferentes módulos. Pero la gran diferencia entre esto y Divi es que es para cualquier tema de wordpress. Estos dos son los que he usado personalmente. He usado este constructor de páginas en un tema llamado Fortuna. Para que veas si entras en los bosques temáticos, que es un lugar donde puedes encontrar temas premium, encontrarás algunos temas con compositor visual o WP Bakery page builder como algo que está incluido. Si me desplazo aquí abajo [RUIDO] eso es todo. Eso son muchas demos. [ RISAS]. Por lo que destaca el largometraje, obviamente tiene que ser plenamente receptivo, en el día y la edad de hoy, todo necesita ser receptivo. Compositor visual, del que aún no han cambiado el nombre, viene con este y también plugin premium llamado Revolution Slider, así que eso es solo un ejemplo. Seguro encontrarás otros temas que tienen compositor visual instalarlo también. Ahí hay otro llamado Elemental, que mi amigo Louis, como me puso. Dice que es el mejor constructor de páginas, es el nuevo. También afirma ser el constructor de páginas wordpress número uno. No tiene tantos usuarios como WP panadería page builder porque llevan más tiempo por ahí. Pero jura por ello y en realidad tiene una versión gratuita. Entonces si estás en un presupuesto, solo voy a hacer clic en precios aquí. Si estás en un presupuesto, puedes conseguir la versión no pro, supongo que la versión gratuita, tener funcionalidad similar. Si quieres aprender más sobre elemental, hay un video que puedes ver aquí, no voy a tocarlo porque puedes verlo en tu propio tiempo. Yo personalmente no he usado uno antes, pero definitivamente darle una oportunidad si yo estaba en un presupuesto. Entonces como dije, el resto del curso está enfocado puramente en Divi, porque sería demasiado tiempo para mostrarte cómo hacerlo en cada constructor de páginas, y muchos de los principios son los mismos. Entonces el punto que estoy tratando de cruzar aquí es el poder de usar un constructor de páginas con un tema premium, nos permite crear sitios web mucho más rápido. Pero estamos usando wordpress, y si el constructor de páginas está configurado correctamente, todavía tenemos muchas opciones de personalización; podemos construir sitios web basados en un diseño que el cliente nos da o que hemos ideado nosotros mismos. Nos da un gran equilibrio de poder construir páginas con relativa rapidez, pero después poder personalizar y editar cualquier cosa que necesitemos. Si estás listo para pasar de la teoría y del siguiente video, por fin vamos a quedarnos atrapados en la construcción de nuestro sitio wordpress usando Divi. Por lo que me emociona verte en el siguiente video. 5. Instalación de Wordpress: a nivel local: En este video, vamos a instalar WordPress. Ahora, hay dos formas en que podrías hacer esto. Podemos instalar WordPress en un host, por lo que está en vivo en Internet. Podemos hacer eso usando cPanel, y en realidad es bastante fácil, o podemos hospedar localmente. Hosting localmente solo significa que configuramos nuestro propio servidor, hay un poco más de configuración que continúa, pero luego está completamente alojado justo en nuestro equipo. No está en internet en absoluto, básicamente. Hay pros y contras para ambos, pero instalar localmente es un poco más complicado, así que pensé que íbamos a repasar eso primero. Si solo quieres saltarte esta parte e ir directamente a instalar WordPress en directo en tu hosting, puedes simplemente saltarte por delante y echa un vistazo a eso. Pero lo que voy a hacer primero, porque lo que necesitamos primero es WordPress en sí. Entonces voy a ir a wordpress.org. En realidad, antes incluso de descargar WordPress, vamos a necesitar una nueva carpeta para albergar nuestra página web. Entonces voy a entrar a mi carpeta de códigos, y voy a poner en, cómo debo llamar a esto, sitio de Skillshare Wordpress. Por lo que ahora tengo un directorio donde puedo almacenar nuestra página web. Voy a hacer clic en este botón aquí en “wordpress.org” asegurarme de que vayas a wordpress.org, no a wordpress.com, y luego solo puedes hacer clic en este botón aquí para descargar la última versión. Por lo que voy a navegar hasta donde va a estar nuestro sitio de WordPress, haga clic en “Guardar” y eso va a guardar como archivo ZIP a esa ubicación. Entonces si entro aquí, ahí está el archivo ZIP, puedo extraerlo haciendo doble clic en “Mac”, y esta es nuestra configuración de WordPress aquí. Entonces voy a mover eso a ese directorio, deshacerme de este directorio que fue creado por el archivo ZIP, y deshacerme del archivo ZIP. Ahora, lo otro que vas a necesitar es un servidor para ejecutar esto. Al igual que hablé en el último curso, el servidor que uso se llama MAMP. Eso es porque uso un Mac, puedes usar WAMP. Quiero entrar en muchos detalles aquí porque sí lo cubrí en mi clase anterior sobre entender el desarrollo web. Pero básicamente, las letras en MAMP significan para Mac, Apache, MySQL, y PHP. Entonces lo importante a tener en cuenta aquí es que WordPress está construido sobre PHP y MySQL, así que por eso necesitamos eso en la pila. Apache realmente no importa demasiado por qué estamos usando Apache. Entonces M es sinónimo de Mac, porque estoy ejecutando un Mac. Si estuviera ejecutando Windows, usaría WAMP, que es todas las mismas letras excepto W para Windows, y luego LAMP para Linux. Para no confundirte demasiado, si no tienes MAMP ya descargado e instalado, puedes dar click aquí. Si necesitas ayuda para configurar eso, definitivamente echa un vistazo al video sobre la instalación de un servidor de mi clase anterior. Por lo que ya tengo instalado MAMP, así que voy a entrar aquí. Lo que necesito hacer, si recuerdas del último curso, es dirigir MAMP al directorio de proyectos. Perdón, tal vez lo hice un poco rápido. Aquí hay un anuncio, muy molesto. Voy a entrar en Preferencias MAMP, y luego voy a entrar al servidor Web. Como puedes ver, enlaces a la última clase de Skillshare que hice, que acabo de llamar el Curso de Skillshare Directorio de Proyectos en ese. Este lo estoy almacenando en código, voy a ir al sitio de Skillshare WordPress y voy a dar clic en “Seleccionar”. Después voy a dar clic en “Ok” y luego voy a dar clic en “Iniciar servicio”. Tardará un poco de tiempo, pero entonces esperemos que estos dos se iluminen de verde, y de repente comienza tu página de inicio del MAMP. Por lo que si quieres llegar rápidamente a tu sitio web, puedes hacer clic en “Mi Sitio Web” y lo que pasará es que traerá a WordPress. Entonces en esta etapa, todo lo que hay que tener claro, son los archivos de WordPress en ese directorio. Ahora, hay dos aspectos para WordPress. Uno es el código, que son todos los archivos de código que tenemos aquí. Básicamente, las plantillas PHP y todo lo demás que va con ello, las cosas de front-end que se almacenan en temas, pero nos estamos adelantando un poco. Entonces la otra parte es la base de datos. Por lo que necesitas ambos para ejecutar WordPress. Tenemos nuestro servidor aquí, que en realidad está ejecutando MySQL, como podemos ver aquí, pero aún no tenemos un servidor configurado para WordPress. De nuevo, si estás configurando esto en cPanel en tu host, ni siquiera tienes que hacer esto, solo se instala automáticamente. Pero como lo estamos haciendo a nivel local, va a armar una nueva base de datos para nosotros. Entonces después de haber elegido el idioma, me llevan a esta pantalla, que me está informando que necesito configurar la base de datos. Desafortunadamente, a través de la configuración de WordPress, no son capaces de afectar la base de datos, pero la información que vamos a poner y luego la siguiente pestaña, vamos a entrar en lo que se llama un archivo wp-config, que es donde se almacenar esta información arriba aquí, que permite a WordPress conectarse a su base de datos. De nuevo, si estás usando cPanel y lo estás haciendo directamente en tu hosting, todo esto se hace automáticamente, por lo que no tienes que preocuparte por esto. Entonces tal vez si esto es un poco demasiado complicado, simplemente alojarlo a través de la instalación de un solo clic, que será el siguiente video. De lo contrario, si definitivamente quieres hospedarlo localmente, continúa. Lo que tendremos que hacer es, como dice, crear una base de datos. Entonces voy a volver a la página de inicio aquí, vaya a Herramientas y haga clic en “phpMyAdmin”. Si has perdido esa página, la URL es solo host local. Entonces el puerto, que para mí es 8888/phpMyAdmin. Ahora, lo que vamos a necesitar hacer aquí es configurar una nueva base de datos, y podemos hacerlo haciendo click en “Nuevo”. Entonces aquí, sólo voy a llamar a esta habiliza wordpress. Entonces ahora tenemos una base de datos en blanco en nuestro phpMyAdmin, que es todo lo que necesitamos para que WordPress entre y cree todas las tablas y los datos de inicio para básicamente empezar con WordPress. Por suerte, no tenemos que crear todas las tablas en la base de datos nosotros mismos. También podríamos configurar un usuario aquí como lo he hecho aquí, pero tampoco necesitamos hacer eso. Entonces lo que podemos hacer, es que hay un usuario por defecto que podemos usar, que es solo el usuario raíz. Si vuelvo a entrar aquí, pongamos esto en práctica. Voy a copiar el nombre de la base de datos, ponerlo ahí, y luego por nombre de usuario y contraseña, solo puedo poner root. No es tan importante cambiar tu nombre de usuario y contraseña y tener todo configurado porque lo estamos ejecutando localmente. Básicamente, nadie podría hackear tu base de datos, a menos que tuviera acceso a tu computadora. tanto que si esto estuviera en línea, probablemente no querrías usar root y root porque eso sería mucho más hackable. Host de base de datos, podemos salir como localhost y prefijo de tabla. Por lo que siempre es buena idea dejar eso como wp_ sólo para seguir la convención. Entonces cuando hacemos clic en “Enviar” aquí, ojalá la conexión sea exitosa. Por lo que esto confirma que todos los detalles son correctos, y solo podemos hacer clic en “Ejecutar la instalación” y ahora WordPress va a configurar la base de datos para nosotros. Entonces para el título del sitio, lo voy a llamar Christopher Dodd porque ese es mi nombre. Nombre de usuario, solo voy a llamarlo Admin. Voy a usar su sugerencia, y siempre es buena idea guardar nombres de usuario y contraseñas. Por lo que voy a abrir un archivo de edición de texto y hacer clic en “Nuevo documento”. Entonces pondré esto aquí para que no lo olvide. Este va a ser tu inicio de sesión de WordPress. Sí, asegúrate de aferrarte a eso porque lo vas a necesitar en cualquier momento que inicies sesión en tu sitio web de WordPress. Voy a poner en mi dirección de correo electrónico para que me puedan contactar sobre este sitio web, porque lo estamos haciendo localmente, no necesitamos desalentar a los buscadores de indexar el sitio web, porque ni siquiera está en internet. El paso final es hacer clic en “Instalar WordPress”, y dice que ahora está instalado. Ahora, lo que quiero que hagas es volver a tu phpMyAdmin y solo refrescarte. Entonces puedes refrescarte aquí o puedes refrescarte aquí, y de repente verás que hay todas estas tablas. Algunos de ellos, estoy bastante seguro, tendrán muchos datos puestos ya. Por lo que ir a través y hacer esto manualmente sería ridículo, por lo que afortunadamente, WordPress establece todo esto para nosotros en la famosa instalación de cinco minutos. Ahora, podemos iniciar sesión en nuestro sitio web, o si solo queremos verlo, este es nuestro sitio web. Entonces si queremos iniciar sesión, puedes agarrar esto, y bueno. Ahora el beneficio de hospedar localmente es, número 1, si quieres mantenerlo completamente privado y definitivamente no quieres que nadie lo vea. No está en Internet, así que nadie lo puede encontrar. Además, tienes acceso a los archivos justo en tu computadora, por lo que puedes editar cualquier cosa de manera muy rápida y sencilla. No tienes que subir, descargar. Podríamos simplemente pasar y abrir con nuestro editor de códigos. Sí, hay beneficios, pros y contras de tener localmente versus hospedado desde el principio. Uno de los negativos de esto es que vamos a tener que migrar el sitio para conseguirlo en internet, pero eso no es gran cosa porque te voy a estar mostrando cómo hacer eso al final del curso. Entonces así es como instalar WordPress localmente. Tan solo recuerda, cada vez que enciendas tu computadora, tendrás que volver a arrancar tu servidor para poder acceder a este sitio web. No funciona a menos que el servidor se esté ejecutando. Pero sí, eso es todo. Ahora tienes una nueva instalación de WordPress con la que trabajar. En el siguiente video, voy a cubrir brevemente cómo hacer esto directamente en cPanel on the Cloud, en Internet, en tu cuenta de hosting, lo cual es un poco más fácil. Por lo que te veré en el siguiente video. 6. Instalación de Wordpress: cPane: En el último video, configuramos WordPress localmente. Pero en este video, te voy a mostrar cómo configurar WordPress en cPanel, en tu hosting. En realidad es bastante simple, cPanel lo hace muy fácil. Lo que voy a hacer es abrir una nueva ventana y voy a ir a un dominio que ya he configurado. Si hicieras el último curso conmigo, recordarías habilissharecourse.space. Actualmente no hay nada ahí, así que voy a conseguir este error. Pero puedes acceder a tu sitio web cPanel poniendo dash cPanel. Ahora, si no estás siguiendo aquí mismo, básicamente lo que ya he hecho es que he creado un dominio y luego me he vinculado a ese dominio a hosting y si todo esto es nuevo para ti, definitivamente vuelve a la clase anterior, que es entender el desarrollo web y revisar las secciones sobre el despliegue de su sitio web a Internet. Echa un vistazo a la diferencia entre dominio y hosting, si no estás familiarizado con eso. Pero básicamente estamos empezando desde el punto final de la última clase. Si algo de esto no tiene sentido, definitivamente te animo a que vuelvas y tomes esa clase. De todos modos, ahora estamos en cPanel y como ven, ya tengo un montón de inicios de sesión porque manejé cPanel en muchas cuentas. Pero lo que básicamente he hecho para mi sitio web, ya he configurado un nombre de usuario de cPanel. Estoy usando la misma contraseña que hicimos para nuestra instalación local. Pero no podía usar admin porque ya había usado ese antes. Por lo que el curso de Skill Share es el nombre de usuario en mi instancia. Voy a dar click en “Entrar” y ahora estoy en cPanel. Ahora cuando estás en cPanel, todo lo que necesitas hacer para instalar WordPress es ir a aplicaciones web y luego hacer clic en “WordPress”. Lo bueno de instalar a través tu cPanel es que no necesitas configurar la base de datos. Simplemente hago clic en este botón, instalo esta aplicación y no quiero un directorio, solo lo voy a tener derecho en el dominio raíz. Todo lo demás está bien, lo que voy a hacer es usar los mismos detalles de inicio de sesión que establecemos para la versión local. Idealmente, no querrías tu contraseña igual para cPanel y WordPress pero después de este curso, voy a eliminar de todos modos, así que realmente no importa demasiado. Para el correo de administrador, voy a poner en mi correo electrónico para que este sitio web pueda llegar a mí si hay algún problema o una notificaciones, título del sitio web va a ser Christopher Dodd y voy a poner mi lema como Desarrollador Web WordPress. Podemos dejar todo como predeterminado y luego hacer clic en “Instalar”. Además, si tomaras la última clase en el desarrollo web en pie, me hubieras visto hacer esto antes también, es muy rápido y bastante fácil. Así que así como así, tu sitio web de WordPress ahora está instalado y puedes ir a aquí y de repente estoy en mi nuevo sitio web de WordPress y si quería entrar al admin, entro al admin así y es solo el nombre de usuario y contraseña que configuré en el proceso de instalación. Ahí lo tienes, tenemos una nueva instalación de WordPress. Entonces a partir de este punto, puedes decidir, quiero decir, probablemente ya lo hayas decidido, pero a partir de este punto puedes trabajar en el basado en la Nube o puedes trabajar en la instalación local. Parece que ya lo tengo configurado localmente aquí y generalmente es más fácil trabajar con archivos locales además voy a estar migrando en un video posterior. Yo lo voy a hacer en el hosting local. Pero también puedes hacerlo directamente desde el hosting en línea. Eso cubre la configuración de WordPress. El siguiente paso es que cambiemos este tema. Este es el tema predeterminado de WordPress y por supuesto el tema que estamos usando es Divi. Pero hay un concepto importante para aprender sobre la construcción temas o la personalización de temas y ese es tema infantil. En el siguiente video, vamos a crear un tema infantil y hablar de qué es un tema infantil y por qué deberías usar uno. Te veo en el siguiente video. 7. Creación de un tema secundario de Divi: Entonces porque estamos hablando de configurar un nuevo tema en nuestro sitio de WordPress, estoy empezando aquí mismo en la sección Temas. En realidad, no podemos agregar un tema Divi desde aquí, porque es un tema premium. Solo para mostrarte, si tuviéramos que hacer clic en “Añadir tema”, podemos buscar a través de todos los temas ya disponibles en WordPress.org, y todos estos, al instalarlos, deberían ser gratuitos o al menos gratuitos para empezar. Podrían cobrar más por una versión premium más tarde, pero si solo quisieras ir con un tema gratis, entonces podrías mirar justo aquí. Porque estamos usando un tema premium, en el caso de Divi, tenemos que agarrar ese archivo de ellos, y la forma en que lo hacemos es iniciar sesión en nuestra cuenta de Elegant Themes. En realidad, antes de saltar a eso, solo quería hacer nota de que voy a estar creando mi sitio de WordPress en host local, así que lo estoy haciendo localmente. Recuerda, también lo hice en un dominio remoto también, SkillShareCourse.space. Si recuerdas de antes, sí configuramos WordPress en nuestro hosting en internet antes, pero va a ser un poco más complicado acceder a esos archivos. Lo que voy a hacer con mi instalación local es que solo puedo ir directamente aquí y editar estos archivos. En el caso de que estés ejecutando tu sitio web de WordPress completamente en hosting, completamente remotamente, y no lo estés hospedando localmente, tendrás que encontrar la manera de acceder a esos archivos y la mejor manera para que yo lo haga que es FTP. Ahora, porque cubrimos FTP en la última clase, no volveré a repasarlo, pero si necesitas ayuda para acceder a los archivos de tu servidor remoto, definitivamente vuelve a entender el desarrollo web y echa un vistazo a la lección sobre FTP. Con eso fuera del camino, voy a ir a Elegant Themes y voy a iniciar sesión, y voy a agarrar la última versión de Divi. Cuando inicies sesión en Elegant Themes, obtendrás este Área de Miembros, donde podrás ver tus descargas. Tienen algunas otras cosas que puedes descargar aquí también, entre ellas Monarch, que es un plug-in de compartir social que uso. Ve a Divi y luego haz clic en “Descargar” y verás que tengo este entre paréntesis, porque en realidad ya he descargado Divi, pero solo para asegurarme de que tengo la última versión, voy a guardar eso y bang, lo tengo descargado. Ahora que lo tienes descargado, puedes volver a tu Dashboard de WordPress y luego en tu sección Tema, haz clic en “Subir Tema”, entra aquí y subirlo. Ahora, porque soy local, en realidad no es subir, en realidad es solo hacerlo todo en mi propia computadora. Subir es un término un poco falso aquí, pero no importa. Es lo mismo. Será lo mismo haciéndolo en tu hosting remoto también. Si no estás convencido de que quieres activarlo, puedes vivir la vista previa en vivo al principio, pero porque estamos empezando desde cero, no hay avances realizados. Es completamente seguro hacer click en “Activar”. Tenemos instalado Divi, y quiero que se den cuenta de lo que sucede aquí cuando vamos a nuestro sitio de WordPress. A ver cómo es completamente diferente. No me malinterpreten, los tipos de post que teníamos antes, todavía tenemos Hello World, todavía tenemos estos comentarios ficticios, y todavía tenemos una página de muestra, pero cómo se presenta todo es completamente diferente. Si recuerdas antes, teníamos este tema yendo con la pequeña planta pop y el título ahí, tenemos a Divi ahora, que en primera mirada, se ve bastante oso, pero eso en realidad es algo bueno, porque nosotros puede personalizarlo más fácilmente a lo que queremos. Es mejor empezar desde un punto de partida desnudo y poder construir encima de eso, que tener todos estos diseños de fantasía y luego tener que averiguar cómo simplemente volver a un diseño regular. Lo que voy a hacer ahora, antes de que empecemos a personalizar nuestra instalación Divi, es crear un tema infantil, que es el punto principal que quiero hacer en este video. Para aprender un poco más sobre temas infantiles, he copiado aquí una URL. Esto está en el códec de WordPress.org. Puedes leer más sobre temas infantiles aquí. Habla de por qué usar un tema infantil, cómo crear un tema infantil, y los diferentes archivos de plantilla y todo, pero tal vez lo que no se cubre es lo que realmente es un tema infantil? Un tema infantil es básicamente un tema nuevo. Aquí va a haber un nuevo tema, pero esencialmente sólo va a tener unos pocos archivos diferentes ahí dentro, y hace referencia a un tema padre. En este caso, va a ser Divi, que va a ser el tema de los padres. El punto de un tema secundario es que podemos hacer actualizaciones o ediciones al tema principal, sin tocar realmente el tema principal. Lo que pasa es que cuando creamos este tema infantil, y te mostraré en tan solo un segundo, la instalación de WordPress buscará el tema infantil, irá primero a esos archivos, pero si no los puede encontrar, irá directo al padre. Esto está realmente limpio. Si vas a estar haciendo edición del tema, lo mejor es simplemente dejar esto limpio como está, para no entrar y cambiar lo que Divi ha hecho, pero si sí quieres hacer modificaciones, lo mejor es ponerlo en un tema infantil. La forma más fácil de pensar en un tema infantil, diría yo, es solo un tema en el que pones todas tus personalizaciones sin dejar de aprovechar el tema principal, y manteniendo tus personalizaciones y el tema central separados, pero aún así poder apalancar ambos beneficios. De nuevo, solo estoy hablando teórico aquí, en realidad vamos a ver un tema infantil en este momento. En primer lugar, ¿por qué usar un tema infantil? Ya hablamos un poco al respecto. Es una gran manera de aprender sobre el desarrollo de temas, pero la razón más grande es mantener las cosas limpias. Vas a tener tus archivos modificados en un solo tema y vas a tener el tema original sin modificar en su propia carpeta de temas. Podemos seguir los pasos aquí, pero debido a que estamos usando Divi, Divi en realidad tiene un tutorial sobre cómo crear un tema infantil específicamente para Divi. Voy a escribir en Divi child theme, y aquí mismo, he accedido a esto algunas veces. Se acaba de llamar la guía definitiva para crear un tema infantil Divi. Porque estoy haciendo esto localmente, puedo entrar directamente a este directorio aquí. Lo que necesito hacer es entrar en el directorio de temas. Voy a ir contenido WP. Entraré en temas. Oops, accidentalmente abrí ambas. Entraré en temas y se puede ver aquí Divi. Ahora no queremos tocarlo, como dijimos antes, queremos mantener a Divi limpio y eso significa que cuando actualicemos Divi, esto no romperá nada de esa personalización. En cambio, vamos a crear una nueva carpeta llamada Divi child, y puedes llamar a esto como quieras. Divi child es sólo el nombre más descriptivo posible. Para que funcione un tema infantil, hay un archivo esencial que necesitas, y ese es un style.css. Voy a desplazarme hacia abajo donde te da el código exacto para poner. Aquí puedes ver la dirección que acabo de darte con la creación de un directorio Divi-child en el directorio de temas, y luego el siguiente paso es agregar el style.css. Simplemente puedes copiar y pegar esto directamente. Voy a copiar eso y voy a crear un nuevo archivo con mi editor de códigos, Atom. Atom ya está abierto. Voy a crear un nuevo archivo. Voy a poner esa copia y código pegado. Voy a “Guardar como”, y voy a volver a mi directorio de WordPress. Voy a entrar en mi directorio Temas, encontrar a mi tema infantil, Divi-Child, y no voy a llamarlo “fz3temp-2", eso es simplemente ridículo. Tiene que llamarse style.css. Definitivamente no cambies esto. Este es el nombre de archivo que WordPress va a buscar, así que asegúrate de que sea style.css. Esa es la base para el tema de tu hijo. Otra cosa que debes poner es un archivo PHP de funciones, y que pondrá en cola tu hoja de estilo de tema principal, lo que significa que mirará esto primero, obtendrá la información, pero luego tomará los estilos del tema padre. De nuevo, solo copia y pega. Yo me voy a llevar eso. Voy a crear un nuevo archivo en átomo, pegarlo en. Voy a guardar eso como functions.php. Nuevamente, es muy importante lo que se llama a estos, porque estos son todos archivos de plantilla de WordPress. WordPress buscará específicamente estos nombres. Llamaré a eso function.php. Esencialmente, eso es todo lo que necesitas. Puedes crear una miniatura para tu tema infantil Divi, pero realmente no necesitas hacerlo. Podrás simplemente leer el nombre. Si quieres ponerte creativo, puedes cambiar la miniatura, pero en realidad no es importante. Lo que va a pasar ahora es que vamos a entrar de nuevo en nuestra sección Temas de nuestra página web. Por cierto, esta zona de aquí, todo lo que está haciendo es hacer referencia a las carpetas aquí. Se puede ver Divi, 2015, 2017, 2016. Ésos son todos los temas aquí. Entonces si actualizamos la página, verás nuestra carpeta recién creada, el niño Divi está ahí y no tiene una miniatura, porque como acabo de mencionar, no pusimos una miniatura, pero sí realmente no importa. Podemos entrar y hacer clic en “Activar”, y ahora pasaremos a nuestro tema infantil. Si todo salió bien, podemos recargar y es exactamente el mismo sitio web. Podrías estar pensando, bueno, Chris, si va a ser exactamente lo mismo, ¿por qué creamos un tema infantil? El motivo por el que, como dije, es sólo poner tus modificaciones en un archivo diferente. Lo que podemos hacer es poner más funciones aquí. Lo que podemos hacer es agregar estilos personalizados aquí, que por cierto, vamos a hacer algunas personalizaciones de temas en este curso, para que en realidad veas lo que es actualizar un tema infantil y qué modificaciones realmente vamos a hacer, pero por ahora, nuestra base teórica, podemos poner todos los cambios que queremos en este tema y entonces no tenemos que modificar el tema original. Esperemos que ya entiendas lo que es un tema infantil, al menos desde un punto de vista teórico. Como dije, en realidad vamos a editar este tema infantil, crear algunas modificaciones. Es muy buena práctica tener un tema infantil. Yo diría que esa es una de las cosas que no hice cuando estaba empezando, y ojalá lo hiciera. Es solo una buena práctica de hacer y también hace las cosas mucho más limpias. Realmente importante que consigas configurar ese tema infantil, y con eso hecho, es hora de realmente quedarte atascado en Divi y hacer algunas personalizaciones. Te veré en el siguiente video. 8. Primeros pasos con Divi: En este video, vamos a cubrir cómo empezar con Divi. A lo que me refiero con eso es, cambiar algunos de los ajustes predeterminados aquí. Obviamente, lo primero que me destaca es que tenemos el logo Divi en lugar de nuestro propio logo. El menú es terrible, tenemos “Página de muestra” y “Sin categoría”. Esto es solo un comportamiento por defecto, estamos mostrando en nuestra portada una colección de todas las entradas del blog. En este momento sólo tenemos una entrada en el blog que dice, “Hola Mundo”, que es sólo una pieza de contenido ficticio con la que empieza WordPress. Pero si tuviéramos múltiples entradas de blog este sería un índice por el que podríamos desplazarnos. También se pone en la barra lateral. Por último se pone en un pie de página con, “Designed by Elegant Themes” “Powered by WordPress”. Es muy marca Divi en este momento, los Menús están equivocados, el contenido ficticio, y tenemos una barra lateral. Lo primero, como mencioné, es que quiero actualizar el logotipo del sitio. Ahora, hay dos lugares donde puedes personalizar tu tema. Puedes usar el “Personalizador de temas”, como pasamos antes. Divi ofrece un montón de opciones aquí. El lugar que me gusta lucir primero cuando estoy cambiando opciones para Divi es, si entro al “Dashboard”, tenemos un nuevo menú aquí el cual no estaba aquí antes obviamente, acaba de ser puesto por Divi, donde podemos entrar nuestras “Opciones Temáticas”. Nuevamente, los dos lugares que debes buscar para personalizar Divi antes de profundizar en cualquier código serían, “Theme Options”, “Theme [inaudible] “, y “Module Customizer”, no he tenido que usar mucho pero, eso también es un lugar donde se pueden crear personalizaciones. Ahora, una vez que llegues a las opciones temáticas “General” de Divi, que es la primera pestaña que aparece, obtendrás el primer campo como “Logo”, cual es apropiado porque eso es lo primero que me gustaría cambiar. Voy a entrar a una carpeta que he preparado de archivos para este curso de WordPress. Tengo este logo, es un logo bastante terrible, que he creado. Simplemente básicamente rastreé alrededor de una foto de mi cara y sólo voy a usar eso como mi página web. Ahora, por razones de S.E.O, vas a querer poner algo un poco más descriptivo aquí. De hecho, el título probablemente debería ser un poco diferente. Por aquí, voy a decir, “Christopher Dodd, Desarrollador Web”. Entonces, voy a dar clic en “Establecer como Logo” y ese será el logotipo. Aquí hay muchas otras opciones en las opciones Divi, pero por ahora solo voy a dar clic en “Guardar cambios” y luego voy a ver el sitio. Como pueden ver, mi cara ahora es el logo de la página web. Lo que quiero hacer a continuación es cambiar esta portada. Lo que necesito hacer para eso es, por defecto, y esto sucede en cualquier tema de WordPress, es que mostrará todas las entradas de blog que proporcionará un índice de blog. A veces, la mayoría de los sitios web que no quieres simplemente mostrar tu índice de blog. Es importante saber cómo cambiar esto y es un asunto muy sencillo. Acabas de entrar en “Ajustes ", creo que es leyendo. Entonces tu página de inicio muestra lo que vas a necesitar cambiar. En este momento, muestra las últimas publicaciones pero podemos crear una página estática. Debí haber creado una página por adelantado pero solo usemos la página de ejemplo por ahora. Voy a dar clic en “Guardar cambios”. Ahora, cuando volvemos a la página de inicio, tenemos la página de muestra y es buena porque se pone en algún contenido ahí. Se puede ver cómo se vería ahora con una página en lugar del índice de blog en la portada de su sitio web. Lo siguiente que quiero hacer es, actualizar mi menú. Voy a volver a “Dashboard”. El modo de acceder al menú es a través de “Apariencia” y luego haga clic en “Menús”. Voy a darle un nombre a mi menú y sólo voy a llamarlo, “Menú Principal”. Ya puedes ver que ya he hecho esto antes porque tengo sugerencias por venir. Haga clic en “Crear menú”. Ahora, tengo este menú y antes de ponerle páginas, que por cierto no tenemos ninguna, voy a dar clic en la “Ubicación de visualización”, que es “Menú primario”. “ Guardar Menú” para asegurarse de que aparece en esa ubicación. Porque sólo tenemos una página, voy a añadir sólo una página al menú. “ Guardar Menú” de nuevo. Cuando vaya aquí, antes de que te refresques, asegúrate de mirar esto y pronto verás que cuando lo refresque, se me ocurre mi nuevo menú, que solo tiene un elemento en este momento. Para que quede claro, la razón por la que es azul y no oscura como el resto de éstos es porque, esta es la página activa. En este momento sólo tenemos una página por lo que va a ser azul para la portada pero podemos agregar en más páginas. Tan solo para demostrar el menú, no tenemos muchas páginas a las que enlazar, pero podemos crear nuestros enlaces personalizados. La mejor manera de crear un enlace ficticio es solo poner un hash. Pero podemos decir que tal vez, queremos tener una “Tab de Portafolio”, tal vez queremos tener una “Tab de Servicios”, y tal vez queremos un “Tab for Blog”. Lo que verás aquí es que ya tienes todos estos enlaces. Voy a deshacerme de “Página de muestra” porque es la página de inicio, realmente no necesitamos tenerla como enlace de menú. Pero una cosa más te mostraré sobre los menús es que podemos tener menús anidados. Te lo mostraré ahora. Digamos que, tenías un blog y tenías diferentes temas, así que tal vez uno de los temas es, “WordPress”. Se sumará a este menú. Lo que puedo hacer para que sea un elemento de submenú de otro elemento de menú es dar click en él. Por cierto, puedo arrastrarlo a diferentes posiciones en el menú pero, si lo arrastro un poco a la derecha, puedes ver que está un poco sangrada. Yo lo metí. Ahora va a decir, “Sub Item” y eso es un “Sub Item” de “Blog”. Para ver este cambio, voy a dar clic en “Guardar Menú” y luego voy a refrescar. Como puedes ver, tenemos el enlace “Portafolio”, y luego tienes el enlace “Blog”, y luego tienes ese subenlace de blog que es “WordPress”. Esos son tus menús. El siguiente tema de importancia es probablemente el “Personalizador de temas”. Voy a entrar a la página. Haga clic en “Personalizador del tema”. Puedes hacerlo desde la parte delantera o desde la parte trasera. Cómo lo harías en el back-end sería, “Apariencia” y luego, “Personalizar” aquí. Pero, puedes hacerlo mientras estás en la página web. Lo que es poderoso en Divi es que podemos cambiar la configuración de “Tipografía”, podemos aumentar el “Tamaño del texto corporal”. Estos son algunos cambios generales como los de tipografía que irán a lo largo de nuestro sitio, a menos que los anulemos. Nos permitirá cambiar la fuente del encabezado y la fuente del cuerpo, para que podamos cambiar lo que quieras. Escojamos, creo que [inaudible] es bonito si lo tienen. No. ¿Y qué pasa con “Anaheim?” No. Es un poco boxy, ¿no? Entiendes el punto. Puedes poner lo que quieras ahí dentro. Entonces, fuente de cuerpo. Haré “Abel”. Wow, eso no es muy legible. Eso tampoco es genial. Estos son muy elegantes pero no muy legibles. Droid Sans, está bien, Droid Sans servirá. Podemos cambiar el color del enlace del cuerpo. Como puedes ver aquí eso es un enlace. Podemos modificar y luego de repente eso cambia. Voy a crear por defecto porque el azul ha sido históricamente el color del enlace por lo que mucha gente sabe que un texto azul es un enlace, y podemos cambiar el color del texto del cuerpo. A lo mejor queremos más desmayos lo que probablemente recomendaría o más negro. Nosotros también podemos hacer eso. Entonces obtienes el punto. Voy a dar clic en publicar para que esos cambios estén en vivo. Voy a volver a entrar aquí, ajustes de diseño. Tienes muchos ajustes en Divi para ser honesto. Te puedes llevar muy lejos y solo podrías quedarte por aquí y en realidad esa es probablemente una buena recomendación solo pasar el rato aquí y ver qué puedes personalizar. Juega porque esta es la capa de nivel superior de personalización en Divi. El nivel más profundo sería escribir código, pero este es probablemente el primer lugar en el que deberías mirar esto y las opciones temáticas de las que había hablado antes. Podemos cambiar el esquema de color general también.Se obtiene la imagen. Podemos personalizar cosas que le sucederán a todo nuestro sitio web a través de este menú. Entonces tenemos el logo, tenemos nuestro propio menú, y hemos cambiado la portada de posts a una sola página que vamos a editar más adelante. Pero la barra lateral en la página de inicio, no es una buena mirada en este momento. Entonces lo que voy a hacer es ir a los menús y voy a entrar en widgets. Es un lugar un poco confuso, pero tu barra lateral está configurada con widgets. Entonces si quieres encontrar tu barra lateral y personalizar los widgets dentro de ella puedes entrar ahí. Ahora tiran mucho aquí que probablemente no necesites. Apenas veo a nadie teniendo un metamenú en la barra lateral. Categorías que puedes poner si crees que eso es bueno, archivos si crees que eso es lo que quieres mostrar a tu público, pero probablemente podamos deshacernos de mucho de esto. Entonces lo que voy a hacer es simplemente eliminar todos estos archivos, comentarios recientes, búsqueda. Se puede buscar la barra superior, en realidad la barra de menús. Realmente no necesitamos buscar dos veces. Sólo voy a dejar publicaciones recientes porque personalmente me gusta tener posts recientes en mi barra lateral, y le voy a dar un título de posts recientes para que la gente sepa que son mis posts recientes. Creo que tiene publicaciones recientes por defecto. Si actualizo la página ahora puedes ver que la barra lateral de aquí ha cambiado. En lugar de ver todos estos widgets que realmente no necesitamos, acabamos de recibir las publicaciones recientes. Eso es genial. Al mismo tiempo, todos modos no quiero tener una barra lateral en la portada de mi sitio web. Ya verás como construimos esta portada con Divi, voy a querer que la primera sección sea de ancho completo y además no quiero confundir a un usuario con demasiados enlaces en la portada. Entonces en realidad no quiero que esa barra lateral se presente para nada. Con Divi, es bastante sencillo desactivar la barra lateral. Voy a dar clic en “Editar página” y en realidad hay más a la derecha aquí, ajustes de página Divi. Entonces por aquí en el diseño de página, está configurado para incluir la barra lateral derecha ahora mismo pero podría mover la barra lateral a la izquierda si quisiera, o puedo ir por el ancho que se deshace por completo de la barra lateral. Eso me gusta. Voy a dar click actualizar y dice página actualizada. Por lo que puedo hacer clic en ver página y de repente no hay barra lateral. Entonces si voy a revisar una entrada de blog, digamos hola mundo, puedo acceder a ella así con la URL, y si miramos el post podemos ver el post ahí y podemos ver la barra lateral. Entonces si quieres apagar este lado por completo, hay formas de hacerlo. Podemos ocultarlo con CSS. También podemos cambiar la plantilla. Pero si estás feliz de editar eso para cada página individual, puedes hacerlo a través de Editar página. Entonces lo último que quería cambiar fue el pie de página. Ahora mismo dice Designed by Elegant Themes, powered by WordPress. Pero realmente no necesitamos primar temas elegantes o WordPress si no queremos. De hecho, ese es un buen espacio para poner en alguna información de copyright o un enlace a nuestro propio sitio, o si eres capaz y al cliente no le importa tal vez quieras poner diseño por y vas a enlazar ahí. Pero definitivamente pregúntale a tu cliente o a quien estés construyendo el sitio web si puedes hacer eso primero si quieres hacerlo. Esencialmente no hay necesidad de tener Elegant Themes y enlaces de WordPress a continuación en tu pie de página. Entonces lo que voy a hacer es que voy a cambiar eso entrando en el Personalizador de temas. Que recuerden, podemos entrar en el nombre de nuestro sitio web, desplazarnos hacia abajo, hacer clic en Personalizador de temas, o por supuesto podemos entrar en apariencia personalizada a través del tablero también. Simplemente puedo ir al pie de página que en realidad es sólo una parte de la barra inferior del registro completo, la parte que estamos tratando de editar. que pueda ir a la opción de barra inferior y puedo editar los créditos fotográficos. Entonces sólo voy a decir derechos de autor Christopher, y luego puedo poner algo de HTML allí también. Por lo que podría poner en una etiqueta de enlace y puedo conseguir que se vincule a otro sitio web. Nuevamente, solo estoy poniendo un hash solo para ser un tenedor de lugar y luego se puede ver ahora el texto es un poco diferente para indicar que es un enlace. También puedes desactivar por completo los créditos fotográficos para que ni siquiera tenga que decir copyright Christopher en absoluto. Por lo que solo puedes desactivarlo por completo o puedes activarlo y tener tu texto personalizado. En la parte inferior derecha podría haber notado estos enlaces que provienen de Divi. Si solo hago clic en publicar aquí, te mostraré dónde puedes acceder a ellos. Tengo las opciones temáticas ya abiertas aquí. Puedes poner en tu Facebook, tu Twitter, tus enlaces de Google Plus ahí dentro y así cuando alguien haga clic en estos, irá a esos enlaces. Honestamente, tengo Facebook y tengo Twitter y no un gran usuario de Google Plus. Por lo que muchas veces estoy escondiendo esta sección y poniendo mis propios vínculos sociales. A mí me gusta enlazar también con otros perfiles, no sólo esos tres. Entonces no estoy seguro de por qué Divi eligió esos probablemente porque son los más amigables blogueros, pero me gusta enlazar a YouTube e Instagram. Normalmente creo mi propia pequeña foto con esos enlaces ahí dentro. Entonces básicamente, tenemos la base de nuestra página web. Tenemos una portada y un menú que en realidad no hace nada todavía pero llegaremos a eso. Lo más importante que nuestro sitio web necesita en este momento es el contenido. Entonces, en el siguiente video vamos a hablar de agregar contenido, porque si no tienes ningún contenido, tienes nada que mostrar y es difícil incluso organizar tu sitio web cuando no tienes nada en él. Por lo que vamos a agregar algo de contenido en el siguiente video, y en los siguientes videos vamos a seguir con algunas personalizaciones y construcción de páginas. Entonces te veré en el siguiente. 9. Cómo añadir contenido a tu sitio web: Está bien. Entonces este video, vamos a estar hablando todo de contenido y vamos a agregar algún contenido a nuestro sitio web de WordPress. Recuerde, WordPress es la plataforma más popular para construir sitios web basados en contenido y para un sitio web basado en contenido, para ser un buen sitio web basado en contenido, necesita tener contenido bastante obviamente. En WordPress, hay algunos tipos de contenido diferentes que podemos agregar, en WordPress, hay dos cosas llamadas Tipos de Post, lo cual es un poco confuso porque uno de ellos en realidad se llama Posts. Pero esencialmente los tipos de Post operan de la misma manera. Divi realmente agrega un tercer Tipo de Post llamado Proyectos, y realmente no he explicado qué es todavía un Tipo de Post, pero básicamente es solo una forma de agregar contenidos dinámicamente. Por lo que podemos ver aquí en el menú de posts, podemos mirar todos los posts. Podemos añadir nuevas publicaciones, podemos categorizar nuestras publicaciones y podemos etiquetarlas. Si voy a páginas, no permite categorías y etiquetas, pero nos permite ver todas las páginas y agregar páginas nuevas. Si vamos a proyectos que es agregado por Divi, podemos ir a todos los proyectos, tú categorizas y etiquetas. Entonces la diferencia entre las publicaciones y las páginas es que las publicaciones, puedes pensar en ellas como entradas de blog. Por lo que tienen un tiempo establecido y se suman a lo que se llama tu feed RSS. Entonces si alguien quiere suscribirse a su blog a través de un lector de blogs, cuando publiques una nueva entrada de blog, se les va a notificar. Entonces de muchas maneras se opusieron como mucho a una página, pero sólo tiene una fecha en ella y solo está construida para ser como una publicación de blog. Por lo que pasar a páginas, las páginas son bastante similares a las publicaciones como se mencionó, lo diferente es que las páginas no tienen fecha en ellas, menos que fueras a poner específicamente una fecha dentro del contenido. No tienen categorías y no tienen etiquetas, porque las páginas generalmente se utilizan para la navegación o para construir una página especial que realmente no representa el contenido regular en el sitio web. Por ejemplo, si vamos a uno de mis sitios web favoritos de bloggers llamado Nomadic Matt, en nomadic matt.com. Aquí podemos ver que lo primero que estamos viendo es una página, se está agregando a la navegación porque nos está vinculando a sus diferentes libros aquí. Pero se puede ver aquí en esta sección que nos está vinculando a sus posts de blog, y esencialmente conseguimos lo mismo, nos dieron una página y supongo que se podría considerar esto como una página también. Pero si miras la publicación, es obvio que es una entrada de blog. Llegaste a la fecha aquí, y él pone la barra lateral ahí dentro. Entonces sí, es una diferencia un poco sutil, pero las publicaciones que puedes pensar como entradas de blog y páginas son básicamente cualquier otra cosa. Por supuesto, en Divi, Es un poco diferente en el sentido de que tienes un tercer tipo de post y eso es proyectos. Esto es lo que hace a Divi realmente bueno para construir sitios web de portafolio personal, es porque tal vez quieras poner tus proyectos anteriores, cartera de trabajo de cliente anterior, quieras llamarlo en una sección separada. Entonces Divi lo hace fácil dándote otro Tipo de Post, y esto es lo que se conoce como un Tipo de Post Personalizado porque no viene por defecto con WordPress. Por suerte para nosotros sin embargo, Divi lo pone automáticamente, así que no tuvimos que configurar eso nosotros mismos. Está bien. El último trozo de contenido del que hablar es de medios y básicamente si sólo vamos a medios ahora, voy a abrir una nueva pestaña y tenemos todas las imágenes que ya hemos puesto aquí en la página web. Podemos agregar nuevas imágenes agregando nuevas aquí. Entonces, básicamente, los medios por sí mismos no hacen nada realmente, a menos que tal vez ponga aquí un documento y vincule a alguien a él. Pero podemos incrustar medios en las páginas de correos y proyectos. Por lo que los medios la mayoría de las veces van a ser imágenes que tal vez quieras poner archivos de audio aquí. A lo mejor quieres poner archivos de video aquí y tal vez solo quieres almacenar documentos. Entonces supongo que los medios son sólo otro tipo de contenido, pero va de la mano e incrustado con posts, páginas y proyectos. Entonces ahora que te he dado una visión general, es hora de realmente crear algún contenido. Entonces voy a entrar a post y hacer clic en All Posts, y puedes ver aquí en la tabla que podemos ver nuestro primer post, y nos está dando el título, el autor, y la categoría, que en WordPress tienes que tener una categoría. Entonces si no tienes ninguna configuración de categorías , solo dirá uncategorized. Entonces lo que voy a hacer ahora es porque hola mundo es solo un post de blog ficticio, realmente no me importa. Voy a estropearlo y empezar de cero. Por lo que voy a dar clic en Agregar Nuevo para agregar una nueva publicación, y por cierto, la funcionalidad entre esto y las páginas y proyectos prácticamente exactamente igual. Por lo que no hay curva de aprendizaje con tener que crear páginas y proyectos, esto es exactamente lo mismo básicamente. Entonces voy a decir que esta es una publicación de blog sobre Cómo construir un sitio Divi. Si golpeo tab para pasar al siguiente campo , creará la URL para mí. Porque esta es una entrada de blog, lo que va a hacer en la URL, es poner la fecha de publicación, que asumirá es la fecha de hoy entre el dominio y el título de la publicación en la URL. Eso no me gusta realmente y realmente no me ayudó con SEO ni nada. Entonces voy a cambiar eso en un segundo. Que hay una diferencia entre las publicaciones y las páginas, las páginas no hacen eso. Entonces después de poner un nombre y luego ir a la siguiente sección, se va a crear un enlace con eso y aquí abajo tenemos el editor por defecto de WordPress para crear blogposts y en esta situación, quiere utilizar el predeterminado de WordPress editor. Podrías usar el Divi Builder, que cubrimos antes. Pero sólo usaría el Divi Builder para construir páginas porque me gusta mantener mis posts de blog usando default, lo que aquí se llama el editor WYSIWYG, como en lo que ves es lo que obtienes. Una de las razones por las que es realmente importante crear tus blogposts usando WordPress es editor WYSIWYG incorporado en lugar del Page Builder es que si cambiaras a otro tema, toda tu publicación de blog estaría rota, porque el Page Builder lo que hace es, inserta código en la página que Divi interpreta. Entonces si cambiaras tu tema más adelante, todo ese contenido quedará atascado en Divi. Entonces no me malinterpretes, amo Divi y creo que es muy poderoso cuando quieres construir páginas usando el Page Builder. Pero en cuanto a las publicaciones que son el contenido regular de tu sitio web, no quieres tener que volver atrás y reconstruirlas. Entonces lo mejor es usar esta zona aquí. Está bien. Entonces voy a ir a un sitio web que sólo me da Lorem Ipsum para poner en algún contenido ficticio. Déjame ir a cualquiera de estos. Voy a poner en esto. Entonces ese es su párrafo básico que quiero agregar algunos encabezamientos. Voy a entrar y poner un subtítulo en, y luego se puede ir más profundo con los encabezamientos para hacer el Título 3, que es aún más pequeños sub-encabezamientos. Voy a llamarlo sub-subencabezamiento, y luego sólo colocaré en ese mismo texto exacto. Creo que este es un tema Divi, por lo que puedes cambiar el extracto. Cuando WordPress está mostrando una vista previa de tu entrada de blog, mostrará este extracto. De lo contrario sólo mostrará un extracto basado en lo que ya está en la página. Lo que puedes hacer es cambiar el diseño para que puedas ocultar la barra lateral usando Divi. Puedes guardar un borrador si aún no quieres publicarlo, y puedes asignar una categoría. Voy a hacer eso ahora mismo. Voy a darle una categoría a este post porque se basa en cómo construir un sitio Divi. Voy a ir un poco más amplio con el tema y voy a decir esto basado en el desarrollo de WordPress como la categoría. Las categorías son poderosas porque puedes segmentar tu contenido en función de una agrupación en particular. También puedes hacer esto con etiquetas, pero las etiquetas son secundarias a las categorías. Por lo general, solo necesitas categorizar tu contenido, pero también puedes etiquetarlo si quieres agregar lo que se llama una taxonomía extra. Lo final y lo que realmente importa es establecer una imagen destacada. No tengo una imagen específicamente para estos posts, así que tal vez solo vaya a descargar una en este momento. Entonces, sólo voy a encontrar una imagen, sólo una imagen aleatoria. No debería estar haciendo esto porque es de otra persona pero esto es sólo para fines de demostración. Por lo general quieres usar imágenes a las que tienes los derechos o no te vas a meter en problemas por copiar. Voy a guardarlo y lo voy a poner en los archivos para el curso de WordPress y luego lo voy a subir. Esa se convertirá en mi imagen destacada básicamente. Nuevamente, te enviaré un texto para SEO, cómo construir un sitio Divi. Realmente debería haber conseguido una foto de un sitio Divi específicamente para esta entrada de blog, pero de nuevo, esto es solo con fines de demostración. Algo que podemos hacer antes de dar clic en publicar, si quieres ver cómo se ve antes de que realmente lo publiques, puedes hacer click en vista previa y de repente tienes un título, tienes tu nombre de autor, tienes el fecha en la que se publicó, en qué categoría se encuentra, y cuántos comentarios, y se puede ver este es el bonito diseño. Eso es todo básicamente hecho por Divi y WordPress. Voy a dar clic en Publicar aquí y ahora la entrada del blog se convertirá en vivo. Puedes ver un post una vez que termine de cargar y puedes ver tu post hecho. Ahí tienes, muy bonito. Ahora, las dos cosas que dije que quería cambiar fue que quería deshacerme de esta cosa de la fecha. Realmente no creo que ayude con el SEO y probablemente no ayude a que la gente encuentre tu sitio web más fácil tampoco. Entonces si vas a permalinks en tu configuración de WordPress, solo voy a ir a cambiar la configuración común a nombre de la publicación para que puedas ver aquí en el ejemplo, no va a tener la fecha y luego la publicación. Simplemente se va a saltar directamente al nombre del puesto y poner eso en tu dominio. Por cierto, estos ajustes de permalink por los que puedes pasar y actualizar. A lo mejor sólo querías el año y después el post. Para eso, puedes usar estas etiquetas aquí si realmente quieres hacer eso. La mayoría de las veces, es simplemente más fácil y mejor tener sólo el nombre del puesto ahí. Vamos a guardar los cambios y ahora si vuelvo a esa publicación que creamos, voy a ir a publicaciones antiguas y luego simplemente saltarme adelante para hacer clic en ver. Simplemente tendrá el dominio raíz y luego cómo construir un sitio Divi, que es bueno para SEO también. Siempre hay que construir con SEO en mente. SEO para aquellos de los que no conoces está haciéndolo optimizado para los motores de búsqueda para que sea más fácil conseguir que tu sitio web se clasifique en Google o en cualquier otro motor de búsqueda. Ahora que hemos creado el post, crear un proyecto es básicamente lo mismo. No voy a pasar por todo el creando un tipo de post de proyecto aquí, pero lo que puedes ver es exactamente la misma interfaz. Aquí puedes ver podemos agregar categorías de Proyectos, podemos agregar etiquetas de Proyecto aquí también. Estos son separados para publicar categorías y etiquetas. Una de las cosas de que esto sea un tipo de publicación independiente es que las categorías y etiquetas disponibles serán únicas para ese tipo de publicación. En los posts, tendrán sus propias categorías y etiquetas, pero esencialmente es un duplicado de posts que simplemente lo pone en una categoría diferente en el sentido, por lo que está seccionado de los posts por completo. El siguiente es Pages, que de nuevo es exactamente lo mismo. Podemos mirar nuestras páginas aquí y luego algunas palabras después de ella para indicar alguna página especial. Esto se puede ver aquí es nuestra portada. Tiene guión, primera página de guión. Si estás ejecutando e-commerce, posible que tengas la página dash cart, podrías tener la página dash checkout, y ese dash solo significa que es una página especial y solo te indica cuál de esas páginas es tu front-page, página de tu carrito y todo eso. Este es un borrador que creé antes, y luego por supuesto, borrador aquí es cualquier página que esté en modo borrador, así que en realidad aún no las has publicado. Esencialmente, lo que vas a querer hacer de tu sitio web es tener tanto contenido como sea posible. Es difícil categorizar tu contenido cuando solo tienes una entrada de blog, y es difícil tener navegación en diferentes partes de tu sitio web cuando solo tienes una página. Entonces realmente deberías entrar ahí, crear nuevas entradas de blog, y esencialmente mi consejo a cualquiera que inicie un sitio web es escribir al menos cinco entradas de blog primero, o escribir cinco páginas y diseñar todo eso primero, y luego empezar a poner eso en WordPress, porque es difícil crear esos menús, crear esos diseños, y crear todo lo demás cuando realmente no tienes contenido en tu sitio web todavía. Recuerde, se supone que los sitios web basados en contenido deben estar llenos de contenido. Lo que podríamos hacer es pasar y crear todos estos nuevos puestos, pero esencialmente el proceso es el mismo para cada uno de ellos. Te animo a que pases y crees algún contenido, tal vez incluso algún contenido ficticio si solo quieres arrojar algún contenido ficticio ahí, eso está todo bien. Voy a saltar un poco adelante y pondré algunos contenidos propios y te veré en el siguiente video. En la siguiente, vamos a construir páginas, que está un poco más involucrada, porque vamos a estar usando el constructor de páginas y vamos a construir la página de inicio. Te veré en el próximo video 10. Uso del constructor de páginas Divi: Por lo que en el último video, hablamos de agregar contenido. Entre ese video y éste, he añadido en más publicaciones de blog en la sección de publicaciones como puedes ver aquí. Pero también en proyectos, entré y metí algunos proyectos. Para que quede claro, no, no he trabajado para Amazon, Facebook, o Google. Yo sólo pensé que serían ejemplos fáciles para demostrar lo que debes poner en tus proyectos. Ahora que tenemos algún contenido aquí, tenemos algunos posts, tenemos algunos proyectos, ahora podemos empezar a construir algunas páginas que traen parte de este contenido dinámicamente. Por supuesto, cuando vamos a nuestra página web, la primera página que necesita arreglarse es nuestra portada. Esta es solo una página de muestra que vino de WordPress, así que es hora de entrar y cambiarla por cómo nos gustaría. Como lo degrité antes, con Divi, una vez que haces clic en Editar, puedes usar el Divi Builder. Simplemente voy a eliminar todo esto y luego hacer clic en “Usar Divi Builder”. En realidad, si quieres borrar eso, lo que Divi haría es poner ese texto que tenías antes como módulo de texto aquí mismo. Para que no lo perderías. Yo sólo sabía que íbamos a deshacernos de él, así que me deshice de él de antemano. Pero podría haberlo hecho igual de fácilmente de la manera opuesta, que sólo voy a demo ahora. Justo como referencia en caso de que sí quieras cambiar una página que se hizo en el WordPress Wheezy, llegamos a hacer eso, pero queremos cambiar a Divi. Si hago clic en esto, pondrá el texto que tenemos como módulo de texto en primera columna de la primera fila de la primera sección, que por defecto es una fila de una columna. Ahora bien, he degradado antes del uso de Visual Builder, que para algunos de ustedes tal vez prefieran eso. Solo para mostrarte eso otra vez, básicamente pasas el cursor sobre las diferentes partes de tu página y puedes editar. Este es el apartado. Por lo que puedes hacer clic en el “Gear” y puedes cambiar la configuración de sección así. Puedes hacer clic en tu “Fila”, y puedes actualizar ajustes de fila como esta, y puedes editar tu configuración de texto para ese módulo, agregar en otra fila con cuántas de las columnas quieres, y luego puedes agregar en otra sección también. Contamos con una especialidad regular para ancho. A mí como preferencia personal, realmente no me gusta usar el Visual Builder porque es un poco complicado con estas cosas diferentes que se mueven hacia arriba. Es sólo una preferencia personal. Si quieres usar un Visual Builder, definitivamente por todos los medios usa el Visual Builder. Pero mi preferencia es el constructor por defecto. Solo voy a volver a editar, y aquí está el constructor predeterminado. Ahora, por qué me gusta el constructor por defecto es que es mucho más claro dónde están las secciones. Entonces puedo agregar una fila aquí, y puedo agregar una fila de dos columnas, y puedo poner módulos aquí, y puedo ver el nombre del módulo. Simplemente me da una buena vista de la estructura de la página, mientras que la otra te muestra exactamente cómo se ve en la página. Pero entonces tal vez sea un poco más difícil de modificar la estructura. Entonces para mí me gusta esto, tal vez es porque soy más de desarrollador. Totalmente a ti de qué manera quieres hacerlo. Ahora, lo que quiero hacer es crearnos una página de inicio para este sitio web. El sitio web que estoy construyendo, y probablemente ya lo hayas reunido, es un sitio web personal. Tengo un logo de mi cara. Tengo blog de servicios de cartera, y el sitio web que he llamado sólo mi nombre. Divi es bueno para esto y solo pensé que sería un tema fácil de empezar, no tienes que hacer un sitio sobre tu marca personal o perfil en absoluto. Solo para que sepas, ese es el sitio que busco construir. Nuevamente, solo como ejemplo, vamos a construir un sitio web de portafolio freelance. Pero los mismos principios se aplican a lo que se quiera construir. En cuanto al popular diseño web moderno, muchas veces verás, igual que en mi sitio web aquí, que es mi actual sitio web de cartera, verás lo que se llama imagen de héroe. Sólo se está tomando un poco para cargar. Pero esto es básicamente una imagen de ancho completo. Todo esto está construido en Divi también por cierto, así que vamos a estar construyendo algo similar. Esta es una imagen de ancho completo, y tiene un poco de lo que quiero que la gente vea, y lo que se llama llamada a la acción. Esto es sólo un botón básicamente, pero todo esto es un llamado a la acción porque estoy llevando a la gente a tomar una acción desde el momento en que ven la página web. Eso es sólo un poquito de diseño. Lo que voy a hacer es, porque quiero que sea de ancho completo, realidad tengo que hacer un tipo de sección diferente en Divi. Daré clic en “Sección de ancho completo” y arrastraré eso por encima de lo que ya tenemos. Aquí puedes ver no hay filas porque solo obtienes una fila con la sección de ancho completo. Pero lo que voy a hacer aquí, Insertar módulos. Estos módulos son un poco diferentes para nuestro una sección de ancho completo a una sección de ancho regular. Pero lo que voy a hacer aquí, es que voy a hacer un encabezado de ancho completo, que me permite poner en encabezamientos textos, un botón o dos botones de hecho, y también poner en esa imagen de fondo. Diré bienvenido a mi página web como el título. Hago sitios de WordPress. Entonces para este botón sí voy a ver mi portafolio. Puedes tener dos botones ahí dentro. No me voy a molestar con el segundo botón. Puedes ponerlo en la URL, y como aún no lo hemos construido, solo lo voy a poner en un hash como tenedor de lugar. Aquí puedes poner imágenes, pero lo que queremos es una imagen de fondo y en Divi, vas a la configuración de Fondo. Aquí mismo está si quieres un color sólido como tu fondo, aquí está si quieres un gradiente, aquí está si quieres un fondo de imagen, y aquí está si quieres un fondo de video. Eso es realmente genial. Podría haber visto en otros sitios web, tienen un fondo de video. Divi hace que eso sea realmente fácil de hacer usando la opción Video Background aquí. Voy a volver a la imagen, y voy a ir a Subir Archivos. Ya lo tengo aquí. Esta es la imagen de héroe que uso en casi todos mis sitios web, y le voy a dar un mejor nombre. Simplemente teclearé mi nombre. Christopher Dodd, imagen de héroe. Entonces aquí abajo, asegúrate de que sea de tamaño completo. Establecido como fondo. No te preocupes eso está cortando ahora mismo. Es posible que necesitemos ajustar el tamaño de fondo y la posición de la imagen. Entonces mi cabeza o la parte más importante está en la parte superior derecha. Voy a posicionarme hacia arriba a la derecha, y ojalá eso se vea bien. De lo contrario podemos meternos con esto. El tamaño de imagen de fondo que podemos establecer para cubrir, lo que significa que va a cubrir toda la sección. Eso es bueno porque lo necesitamos receptivo. Voy a presionar “Guardar y salir”. Ahora voy a previsualizar los cambios. Podríamos haber golpeado con la misma facilidad Actualización. No importa, porque realmente no estamos trabajando en un sitio web en vivo todavía, pero si estuvieras actualizando una página en un sitio web existente, probablemente querrías previsualizar primero. Entonces como puedes ver, tenemos esta imagen de ancho completo, bienvenido a mi sitio web, hago sitios de WordPress, ver mi botón de cartera. Directamente, puedo ver que vamos a necesitar hacer un cambio y es decir, esto simplemente no es lo suficientemente alto. Como puedes ver aquí, mi cara está un poco cortada, se ve espeluznante, en realidad teniendo sólo mis dientes. El topper parte de mis dientes justo arriba aquí y así lo que voy a querer hacer, es forzar esto a tener cierta altura. Ahora lo que hago y esto es algo que les mostré chicos en la última clase, es jugar con su sitio web en el navegador antes de hacer cualquier modificación permanente. Al usar la opción de comando I en Chrome, usando Mac, puedo abrir las herramientas de desarrollador. Ya ven aquí esto ya es sensible. Entonces ahora eso se ve un poco mejor. Pero de nuevo, en una pantalla más grande, va a cortar la cara. Lo que quiero hacer es inspeccionar aquí y eso va a sacar el rumbo pero si voy más allá de la cadena, puedo ver aquí y se puede reunir de los nombres de clase, esta es la sección, e-T es el prefijo que Divi usa, así que cuando ves e-t, p-b, e-t, p-b, e-t, p-b, también, ese es un buen consejo si quieres ir a revisar sitio web de otra persona y ver si está construido sobre Divi. Puedes revisar el código y si tiene et_pb_, entonces es muy probable que estén usando Divi también. Entonces eso es bastante guay, puedes espiar a los sitios de otras personas. Lo que quiero hacer aquí es solo verificar que pueda afectar esto en primer lugar. Voy a cambiar la altura. Perdón, debería retroceder un poco. Si selecciono esto, puedo aplicar un estilo directamente sobre él usando este panel. Está bien. Eso es lo que estoy haciendo aquí. Voy a poner en 800 pixeles. Está bien. Eso es genial y todo, hizo la sección más grande pero el elemento que tiene mi imagen en ella obviamente no está ahí. Sólo voy a cancelar eso, lo que puedo hacer marcando esta casilla de verificación y voy a ir una capa más profunda. Como se puede ver aquí en esta capa, se puede ver que hace referencia la imagen de fondo allí y puedo activar y desactivar eso. Ahora cuando entro aquí arriba y le doy una altura, ahí vas, ahora se hace más grande. Ahora 800 es un poco mucho. No lo necesito para ir todo el camino hacia abajo. Probablemente sólo necesito por ahí. Incluso a un ancho completo. En realidad, sólo voy a cerrar porque eso es lo más amplio que pueda. Incluso a toda la anchura, todavía se puede ver mi cara y un poco de mis brazos. Creo que solo lo haré 500 por ahora. Es importante tener en cuenta que hacerlo aquí no va a hacer ningún cambio permanente. Esto es solo para que juegues y afectes la salida en la pantalla, que puedas averiguar qué cambiar en tu tablero. Lo que voy a hacer, es volver atrás y encontrar este módulo. Estábamos en esta sección y luego una capa más profunda es esta también llamada sección pero en HTML pero como se puede ver aquí, la clase es pb module. Lo que tenemos que hacer es volver atrás y encontrar eso en nuestro constructor de páginas Divi. Voy a ir aquí, a la configuración del módulo de ancho completo y aquí puedes agregar en CSS personalizado. También podrías agregar esto en tu style.css e intentar referirlo pero en esta instancia, solo estamos afectando a un solo elemento, por lo que es seguro hacerlo desde aquí. Voy a poner en altura 500. Una de las características geniales que Divi ha puesto desde que han actualizado su tema es, una vez que hagas clic en algo, te dirá cuál es la clase que estarás afectando. Podemos ir a verificar este et_pb_full width_header_0. Puedo volver a nuestro sitio aquí y puedo comprobar, ¿es ese el? Como se ve aquí, et, pb_full width, header, zero, que coincide aquí arriba. Este estilo debe aplicarse a este elemento. Voy a ir a desplazarme hacia abajo y voy a dar clic en “Guardar y salir”. Entonces voy a previsualizar de nuevo. Esto refrescará la página. Ahí vas. Ahora esto tendrá siempre 500 píxeles de altura. Ese es un buen ejemplo de cómo profundizarías en el código para cambiar las opciones de estilo y esas cosas. Pero como verás en el siguiente video, vamos a profundizar aún más en el código para hacer algunas personalizaciones más serias. El siguiente apartado que construiré en este sitio web, será un poco una sección blurb, hablará de mis puntos clave de venta como freelancer. Yo sólo voy a borrar toda esa sección y luego voy a ir aquí y empezar una nueva sección, sólo para que pueda empezar de cero. Lo que voy a hacer, es que voy a tener tres blurbs y quiero que todos tengan un ancho igual. Voy a dar clic a elegir esto. Esto es lo que me gusta del default constructor Divi, puedes ver claramente que aquí hay tres columnas y puedes hacer click en cualquiera de ellas para añadirles un módulo. Voy a dar clic en el primero, añadir un blurb y un blurb es básicamente solo un elemento que tiene un título, un poco de contenido, un enlace y un icono. Entonces diré un ojo para el diseño, es uno de mis puntos de venta. No necesitamos vincularlo si no queremos. Entonces simplemente no voy a poner un enlace ahí y luego puedo usar biblioteca de iconos de Divi haciendo click, “Usar icono”. También puedes subir una imagen y usar una imagen pero voy a usar un icono y solo necesito encontrar algo que comunique diseño. Podría adelantar aquí un poco para ustedes porque voy a crear dos blurbs más y sólo copiar el proceso para éste pero sólo déjame encontrar un ícono que comunica diseño. No quiero pasar todo el día en esto, así que sólo voy a elegir esta cosa con aspecto basquetbol que creo que es regate. Está bien. Aquí mismo puedes cambiar la etiqueta admin. Voy a cambiar eso a diseñar y ya verás por qué en tan solo un segundo. Ahora puedo ver sin entrar en ella, qué va a decir. Entonces lo he etiquetado como diseño, así que sé que ese es el blurb de diseño. Voy a adelantar rápido aquí, poner dos blurbs más y verás el resultado en tan solo un segundo. Está bien. Entonces tengo mis tres blurbs ahí dentro y voy a previsualizar cambios ahora para ver cómo se ve. Muy bien, aquí vamos. Como puedes ver, se ve un poco raro porque los títulos se alinean a la izquierda y los iconos están en el medio. Además, sería bueno tener algún contenido debajo de ellos. Entonces voy a volver ahora y arreglarlo. Entonces acabo de ir adelante y rápido reenvié eso, pasé por eso. Voy a dar click en vista previa y ahora puedes ver el texto está centrado y hay un poco de blurb. Cómo hice eso solo para darles un resumen chicos, fui al contenido para agregar ese poco de contenido, y luego fui a la pestaña de diseño y luego me desplazé hacia abajo al texto y alineé eso como centro para hacer eso. Eso se ve bastante bien. Recuerda que todo esto es receptivo porque lo construimos sobre Divi. Si voy así abajo a esto, se apilar uno encima del otro. Si hubiera cuatro, por ejemplo, habría llegado a tal vez este tamaño de pantalla y hecho dos filas de dos, tan muy inteligente. A veces es posible que necesites cambiarlo, pero la mayoría de las veces Divi es bastante bueno haciéndolo sensible. En realidad, una cosa que quiero hacer es agregar en otra fila aquí y poner en el título para estos blurbs. Usando el editor estándar WYSIWYG de prensa web, haré un encabezamiento 2 y diré:” ¿Por qué contratarme?” Yo sólo voy a darle a esto una etiqueta admin de encabezado. Ahora lo que voy a hacer es añadir una nueva sección y voy a hacer una fila de una columna y otra vez, poner en lo mismo que tenía antes del texto. Ese va a ser nuestro rumbo, ir a alinear centro, convertirlo en un rubro 2 decir,” Echa un vistazo a mis clientes anteriores”. Voy a llamar a este rubro clientes. Ahí puedes poner lo que quieras, solo hace que sea más fácil averiguar qué sección es qué. Voy a añadir una fila y voy a poner en una sección de ancho completo. Ah, no una sección de ancho completo, sino una fila de una columna y aquí puedo traer algún contenido dinámico. Aquí hay un elemento. Se puede hacer una cartera filtrable o simplemente se puede hacer una cartera normal. En realidad no configuramos ninguna categoría de portafolio pero si tienes categorías de portafolio, podrías filtrar. Esto va a establecer el número máximo de publicaciones que mostrará y podrás mostrar qué cosas aparecer. Categorías que realmente no tenemos ninguna, así que voy a ocultar eso. Paginación, realmente no vamos a necesitar eso, pero puedes tener eso habilitado. Sólo pongamos eso y veamos cómo va. Voy a volver aquí arriba y voy a previsualizar cambios. Echa un vistazo a mis clientes anteriores. Ahora se van a ir estos bloques realmente grandes, que no sé por qué Divi hace eso por defecto porque a menudo se ven feos. Esta es la pestaña de contenido, por lo que podemos cambiar el contenido e incluso hacer el fondo. Avanzado es donde podemos poner en CSS personalizados, ID y clases y cambiar nuestra visibilidad en teléfono, tableta o escritorio pero la pestaña Diseño es lo que buscamos y lo que tenemos aquí es un campo llamado Layout. Podemos cambiar eso de ancho completo a rejilla, que en este caso, creo que va a quedar mucho mejor. Tienes 70 opciones de personalización más, es ridículo. No me voy a molestar con ello por ahora hasta que vea algo que quiero cambiar. Volver a la vista previa de los cambios. Vas a querer que estos logotipos sean probablemente de la misma altura y anchura si quieres que aparezcan bien, pero como puedes ver, esto es jalando contenido dinámico. A lo que me refiero con eso es en cuanto agrego aquí un nuevo ítem de cartera, que se llama Proyectos en Divi, que aparecerá aquí siempre y cuando no haya alcanzado el máximo. Ahora me acabo de dar cuenta de otro error que tuve aquí, que es que se me olvidó mover el rubro de arriba. Se puede mover un módulo como este muy fácil, y ese rubro ahora se mostrará arriba. Vamos a previsualizar eso. Ahora tienes esta sección, que es la imagen de héroe con el llamado a la acción, tienes “¿Por qué contratarme?” por lo que tienes los blurbs. Se puede echar un vistazo a clientes anteriores, que por cierto, si se da clic en uno de ellos, estoy haciendo una nueva pestaña. Se puede obtener toda una página sobre más información sobre ese proyecto y lo mismo va para todos estos. Tendrá el mismo diseño de la página si quieres entrar. Esto es todo contenido ficticio así que no hay nada nuevo que ver aquí, esto es solo por ejemplo. Por último, quiero poner en otro apartado. Va a ser bastante similar, así que lo que puedo hacer es duplicar o clonar sección como lo llaman. Voy a cambiar esto en vez de Clientes, voy a decir, “Lee mi blog”. Aquí es donde podemos poner en otro conjunto de contenidos dinámicos. Voy a quitar el portafolio haciendo clic aquí y me desharé de ese módulo y luego insertaré un nuevo módulo ahí y puedo ir al blog. Ahora puedo filtrar por categoría, puedo cambiar formato de fecha meta. Puedo elegir mostrar la salida o no mostrar la salida. No voy a mostrar autor porque todo está escrito por mí. No voy a mostrar categorías porque sólo hay una paginación. Puedes activar el Leer más, puedes desactivar la imagen Destacada si quieres. Pero lo único que sé que voy a querer cambiar es que no quiero este diseño de ancho completo, así que voy a cambiar eso a Grid otra vez y demasiadas opciones. Voy a hacer clic en “Guardar y salir” y luego Vista previa de cambios. Si nos desplazamos hacia abajo, tenemos una encantadora sección distribuida que muestra las entradas del blog. Como pueden ver aquí el extracto va a ser el mismo para cada uno de ellos porque puse en el mismo pasaje estándar Lorem Ipsum, pero cambié la imagen destacada para solo dejarlo un poco más claro sobre lo que estamos haciendo aquí y de nuevo, esto es plenamente receptivo. Ya ves cómo eso se está encogiendo ahora y ahora eso se está rompiendo a una nueva línea. Incluso esto se ha centrado las cosas en el pie de página. Otra cosa a destacar es que el menú se derrumbó en esto. Sí, todo responde con Divi y el constructor de páginas y aquí tenemos dos secciones de contenido dinámico. Obviamente hay algunos elementos más con los que puedes trabajar. Lo mejor que hay que hacer es probablemente jugar un poco, así que entro aquí y echa un vistazo a los diferentes módulos, ver qué hacen. Pero básicamente los principios son con el constructor de páginas Divi, tienes una sección que está en azul. Tienes una fila, y tienes columnas, que la cantidad de columnas se configura en cuanto creas una nueva fila. No se puede reorganizar filas, pero siempre se puede decir por ejemplo, que quería mover el blog a una de las columnas. Podrías hacer eso y luego simplemente eliminar esto, para que puedas mover módulo de espacio diferente a espacio diferente. También puedes reorganizar filas como te mostramos antes. Podemos reorganizar secciones como esta si quisiéramos esa sección anterior y podemos deshacernos de ellas. El principio principal son las secciones, filas y columnas, y los módulos. El segundo principio es la diferencia entre este contenido estático y contenido dinámico que tira en otros tipos de contenido de diferentes partes de su sitio web. Espero que sea una buena introducción al Page Builder y cómo construir páginas con Divi y WordPress. En el siguiente video, vamos a repasar personalizando tu código. En esta lección sí viste un poco de personalización cuando entré y cambié esto para tener una altura de 500. Podemos entrar e inspeccionar elemento y ver ese cambio ahí mismo, pero vamos a ver las otras formas en que puedes personalizar tu código, incluida la adición de un blog de código creando estilos. También, cómo averiguar qué parte de la página diseñar y la diferencia entre CSS en línea, cual hemos hablado un poco de ello, pero vamos a entrar en más detalle en la siguiente lección. Antes de hacer eso, sin embargo, voy a asegurarme de guardar esto. Tengo en ocasiones, acabo de cerrar esta página sin guardar mi progreso. Tendrás que hacer clic en “Actualizar” aquí y ahora esos cambios son permanentes y están en vivo y tienes tu sitio web. Te veré en el siguiente video. 11. Personalización con código: básico: En el último video creamos la portada de nuestra página web usando el Divi Page Builder. Como puedes ver, pudimos usar el constructor de páginas para crear una portada bastante buena con contenido dinámico, prácticamente usando código cero, aparte de poner un estilo en esto. Ese es el poder del constructor de páginas, podemos construir diseños como este y usar elementos de Divi sin escribir ningún código, y eso nos ahorra mucho tiempo. Pero ¿y si queremos agregar algún código personalizado en? Si entramos en la página de edición aquí, y solo agregamos en una nueva sección para agregar en un módulo, esta es la lista de módulos disponibles con Divi. Si querías crear un contador de círculos, eso está bien, lo conseguiste ahí mismo. Quieres poner en el formulario de contacto, una galería, hay algunas características realmente cool fuera de la caja aquí en Divi. Pero, ¿qué pasa si quieres construir algo que sea personalizado, eso no está realmente en esta lista? Una de las formas en que podemos hacer eso es usar un bloque de código. Esto es como un módulo desnudo en Devi, que podemos poner lo que queramos aquí para que podamos empezar a usar un poco de código para construir algo personalizado y luego seguir usando o aprovechando el sistema de Divi, cómo tiene las secciones, filas y columnas, por lo que todavía obtenemos esas columnas responsivas, pero podemos construir nuestros propios elementos usando HTML, CSS, e incluso podemos poner un poco de JavaScript. Creo que el mejor ejemplo de esto es mostrarte un proyecto de cliente reciente. Esto es algo que hice a principios de año para un cliente en Australia. Construí este sitio web basado en el diseño del PSD y lo construí todo dentro de Devi. Una de las cosas que estaba en el diseño que realmente no viene estándar en Divi, son estas, no sé cómo las llamarías, una galería de imágenes en el hover, abre un poco de texto. Esa fue probablemente una explicación terrible, pero se puede ver cómo funciona aquí mismo. Solo hay estas imágenes descoloridas y cuando pones el ratón encima se pone un poco más oscuro y aparece algún texto en pantalla. Lo que hice por eso, solo entraré y te mostraré ahora mismo. Todo lo que he hecho para llegar a este punto es, acabo de iniciar sesión con el administrador de WordPress, volví a la página y luego usé la barra superior para editar. Ahora puedo bajar aquí y se puede ver el diseño. Lo abriré lado a lado. Se puede ver la estructura tal como está en el Divi Page Builder, y luego se puede ver el resultado aquí. Esta es la sección que la llamé Highlight Image Box, y si entramos en estos Highlight Image Box, puedes ver algún HTML personalizado, y en realidad lo que da el comportamiento de desplazamiento es algo de CSS que me peiné. De hecho, entremos y creemos algo similar en nuestro proyecto. Estoy de vuelta en nuestro propio proyecto y solo con fines de demostración, no quiero pasar demasiado tiempo codificando elementos personalizados, solo quiero mostrarles el potencial aquí es, solo voy a crear un Div, que va a tener un borde que hace obvio ver que estamos poniendo algún código personalizado. Pero esencialmente las posibilidades son infinitas con esto, podrías codificar lo que quieras. Pondré un Div. Simplemente pondré un Div con la palabra “Caja” dentro de él, y luego le daré un borde. Voy a guardar y salir y sólo a ver como aparece eso. Vista previa de los cambios. Si bajamos, aquí podemos ver nuestra caja. El alto de la caja se hace en proporción al contenido dentro de la misma. Si agregamos más texto a esto, se hará más grande. Si quisiéramos arreglar la altura, tal vez queremos hacer eso, así que volveré aquí, pondré algunos estilos más. Ahora se puede ver que la caja es de 300. Sólo para que eso se vea un poco más limpio, voy a hacer otra caja. Probablemente lo hice demasiado rápido. Lo que he hecho aquí es que he hecho clic en ese botón para duplicar, cambiar esto a la Caja 2. Entonces puedo mover ese módulo hacia aquí para un diseño de dos columnas, y puedo previsualizar los cambios. Ahí vamos. Tenemos Caja 1, Caja 2. Ahora, obviamente esto no es demasiado impresionante, pero sólo estoy tratando de demostrar un punto aquí. Podrías crear cualquier elemento personalizado que quieras e entrar en cualquier detalle básicamente puedes insertar cualquier código que quieras. Este es sólo un ejemplo muy básico. Ahora en el caso de ese proyecto de cliente que te acabo de mostrar antes, no hice estilos en línea. Especialmente cuando estás repitiendo estilos una y otra vez, querrás poner eso en CSS y aplicar una clase. Se puede ver esta caja y esta caja son iguales, y tienen los mismos estilos. En cualquier momento que estés copiando y pegando algo una y otra vez, en cualquier desarrollo, cualquier codificación, probablemente haya una mejor manera de hacerlo. Puedes poner los estilos o cualquier código que estés repitiendo constantemente en cierto punto, y luego puedes referirlo una y otra vez. En el caso de estos estilos, realidad podemos poner este estilo en el archivo CSS, y luego referirlo usando una clase. De nuevo, si eso es demasiado avanzado para ti, asegúrate de volver atrás y ver si la primera de mis clases de Skillshare Entendiendo Desarrollo Web. Pero lo que vemos aquí es un estilo en línea. Los estilos en línea están bien si solo estás afectando a un elemento y no tiene sentido construir clases e identificadores y cosas si no vas a reutilizar este código. Pero si lo vas a usar una vez, definitivamente puedes poner un estilo en línea. Si quieres hacerlo sensible, es posible que tengas que moverlo a CSS. Pero definitivamente en este caso, estamos repitiendo los mismos estilos en otra caja. Sería mucho más limpio sacar estos estilos y poner en una clase. En WordPress, te voy a mostrar cómo haces eso. Voy a sacar eso, cambiar esto a una clase y voy a llamar al cuadro de clase con frontera. Perderé mi portapapeles, pero recuerdo lo que escribí. Voy a copiar eso, y luego voy a ir por aquí y reemplazar esto por clase. Ahora bien, tal vez no parezca que guardé muchos personajes, pero si fuera a crear muchos más estilos para eso, verías que es mucho más eficiente. ¿ Dónde puedo poner en el CSS? Bueno, en realidad hay algunos lugares. El primer lugar que puedes poner en tu CSS personalizado, es yendo a Divi, Theme Options y luego desplazándote hacia abajo, y en realidad te da una caja para poner en tu CSS personalizado. El otro lugar al que puedes ponerlo es en tu archivo style.css, que puedo acceder yendo a la apariencia, dando click en editor; va a decir, “Advertencia, estás editando código fuente aquí”. Voy a dar clic a entender. Si recuerdas, configuramos aquí nuestro tema infantil para que pudiéramos poner en personalizaciones de código personalizado. Podríamos poner aquí algunos estilos personalizados. Se puede poner en un tampoco, pero en esta instancia, tiene algo que ver con el tema. Podríamos querer reutilizar estas cajas una y otra vez. No se trata simplemente de una personalización de nivel fijo o de superficie. En realidad está construyendo algo. De nuevo, es una elección personal, pero para mí querría ponerla en mi style.css. Voy a crear una regla de clase aquí. qué otra vez, era caja con borde, voy a abrir y luego ponerla al estilo. Si hago clic en actualizar archivo, eso actualizará el archivo CSS, y debería poder previsualizar los cambios aquí, que por cierto, si tienes una vista previa abierta y solo lo refrescará. Entonces si me desplaza hacia abajo, puedes ver aquí que el estilo no se aplicó. Yo sólo voy a ir a inspeccionar elemento y asegurarme de que haya una clase sobre él. Sí, tiene una caja con frontera. Pero lo que creo que estamos experimentando aquí es un problema clásico con el desarrollo de WordPress y eso es el almacenamiento en caché. Si no estás familiarizado con el almacenamiento en caché, es básicamente una forma en que el sitio web guarde una copia de sí mismo para que se cargue más rápido en el futuro. En ocasiones tu archivo CSS se almacenará en caché y los cambios que hiciste, pesar de que estén en el archivo en realidad no aparecerán en tu sitio web. Hay una manera fácil de actualizar tu caché o páginas particulares. Solo tienes que ir a las herramientas de desarrollo. Si hago clic derecho en el botón de recarga ahora mismo solo estoy haciendo clic derecho. No va a funcionar. Pero si abro herramientas de desarrollador usando Command Option I, usando Chrome en Mac, y hago clic derecho aquí. Soy capaz de vaciar caché y recargar duro. Voy a dar click en eso y ojalá se encuentren nuestros cambios. Ahí vamos. Tenemos nuestras cajas, pero claro que nos olvidamos de poner el estilo que lo convierte en una altura fija. Voy a poner eso aquí. Lo bueno de este editor de CSS es que te da advertencias y esas cosas. He hecho clic en actualización, está refrescado. Puedo refrescar la página de nuevo. De pronto tenemos estas dos cajas. Ahí tienes una forma de personalización, construyendo elementos personalizados, módulos personalizados, y luego peinarlos ya sea en línea o poniéndola en tu styles.css, que puedas ir a las opciones del tema Divi. Pero, ¿qué pasa si usas un elemento? Te gusta, pero solo hay algunas cosas mal en ello. A lo mejor no querías esta frontera en estas entradas de blog. Puedes editar con la misma facilidad los módulos que son creados por Divi, así como los módulos creados por ti. Podemos averiguar cómo hacerlo inspeccionando estos módulos. Voy a hacer clic derecho en uno de ellos, haga clic en inspeccionar. Eso me va a llevar aquí a donde está ese elemento en particular. Ahora mismo está inspeccionando este rubro. Pero si subo hasta encontrar la columna real, así que tengo esta columna. Puedo ir un paso más profundo e ir al artículo. Puedo desplazarme hacia abajo hasta encontrar lo que le está dando esa frontera. Puedo ver aquí, hay un estilo aquí, dot et_pb_blog_grid y también et_pb_post que le está dando un borde de un px sólido con un color de este Gris. Si hago click en eso, verás que por todo lo que tiene ese estilo o esa clase, ahora está oculto y me lo vuelvo a poner y ahora nos lo quitamos. Ahora, lo que podríamos hacer es afectar esto de inmediato. Podríamos decir frontera ninguno y entonces de repente no tenemos fronteras en esas rejillas de blog. Pero claro, cambiarlo aquí en tu inspector es solo un patio de recreo no está guardando nada en vivo a la página web. Lo que me gusta hacer es simplemente cancelar estos otros estilos. No sé por qué esto no es permanente y copia toda esta sección. Entonces lo que voy a hacer en el style.css baje y simplemente deshacerme de todos estos campos comentados. Esto ojalá anule el estilo que Divi está poniendo ahí. En realidad estoy más inclinado a poner esto en el Divi Theme Options, CSS, sólo porque es solo una modificación en algo que el crédito de Divi, pero esto es solo una preferencia personal y supongo que es una buena demostración de dónde se puede ponerlo diferente a su style.css. Si lo pones en la parte CSS Personalizado de tus Opciones de tema Divi y haces clic en Guardar, entonces se guardará. Vuelvo aquí y refresco la página. Como pueden ver, no hay más fronteras, y si vamos y miramos por aquí, podemos ver que nuestro estilo aquí. Ahí está el de Divi que está justo dentro del tema de los padres. Pero como puedes ver, hemos hecho nuestro propio estilo donde hemos dicho frontera ninguno y eso sobrescribe aquí este estilo. Esto es un poco de CSS. Definitivamente puedes estudiar más sobre CSS y cómo anular cosas. Pero esencialmente lo que quería cubrir, aquí es cómo en realidad irías a editar partes de tu sitio web. Espero que tenga sentido ahora que podemos construir cosas en Page builder, podemos ocuparnos del levantamiento pesado. Pero si necesitamos hacer algunas personalizaciones, ya sea para construir un elemento personalizado y seguir utilizando el sistema de cuadrícula. Yo sólo puedo demostrar esto aquí. Sigues usando el sistema de rejilla sigue siendo receptivo. Está aprovechando el sistema de rejilla de Divi. También puedes afectar a los módulos ya existentes que Divi crea. Puedes anular los estilos que vienen con esos módulos para que luzcan como quieras. Ahí tienes, puedes ver que todo sigue respondiendo. Sólo te estás quitando esa frontera. Espero que todo tenga sentido. Si no definitivamente poner una pregunta en las discusiones. En el siguiente video, vamos a ir aún más profundo y hacer algunas personalizaciones avanzadas en Divi, tal vez arreglar algunas de estas cajas porque realmente no hacen nada en este momento. Pero en el siguiente video, realidad hay una capa que podemos profundizar y eso es para efecto las plantillas y estructura de PHP de nuestra página. Te veré en el siguiente video. 12. Personalización con código: avanzado: Estoy recogiendo este video justo donde lo dejamos. Todavía estoy en una vista previa, como se puede ver en la URL aquí, pero realmente no me importan estas cajas. En realidad no voy a guardar los cambios, solo voy a dar clic en “Ver página” y está preguntando, ¿quiero dejar los cambios pueden no ser guardados. Si quieres irte sin ahorrar, puedes hacer clic en “Dejar”, pero esa es una buena advertencia si alguna vez intentas salir del editor sin guardar tu progreso, eso es algo bueno tener. Ya verás aquí, porque no cambiamos ninguna de la estructura de la página, nuestro estilo aún aplica, pero ya no tenemos esa sección con las casillas. En este video, quiero mostrarles cómo hacemos algunas personalizaciones avanzadas. Lo que hemos hecho en el último video es básicamente con las cajas, construimos algo de HTML y con éstas lo peinamos con CSS. En realidad le dimos estilo a las cajas con CSS también, y qué podemos hacer así como poner en algún JavaScript personalizado, pero qué pasa si queremos cambiar la estructura de una página dinámica, digamos una publicación de blog o un proyecto o cambiar algo en especie de una manera estructural? Eso podría no tener mucho sentido, sólo yo lo digo, pero vamos a cavar y mostrarte un ejemplo ahora mismo. Si me desplaza hacia abajo y voy a una de nuestras entradas de blog, todas estas se van a mostrar en la misma plantilla, te mostraré lo que quiero decir con eso en tan solo un segundo. Abre estos en pestañas separadas y como puedes ver, es la misma plantilla. Tienes el encabezado, tienes por delante, y luego la persona que escribió el artículo, tienes la fecha, tienes la categoría, lo siento, acabo de hacer clic en la categoría, y luego tienes la cantidad de comentarios. Tienes la imagen destacada, y luego tienes el contenido. Es exactamente lo mismo para esto, todo es dinámico. Pero una cosa que quería cambiar recientemente con uno de mis sitios web fue que no quería que este encabezado y metadatos aparecieran encima de la imagen. Quería que se mostrara debajo de la imagen, esencialmente quería que esta imagen destacada se mostrara arriba y también tal vez quería personalizar esto también. Me gusta el hecho de que trae dinámicamente en nombre del autor, la fecha y la categoría, y la cantidad de comentarios. Pero tal vez quiero personalizar la redacción de esta tal vez poner categoría es o publicada en, eso es todo un cambio estructural en WordPress. Tan solo para batear la diferencia entre lo que acabamos de hacer en el último video y en este video, básicamente podemos cambiar cualquier cosa que ver con el estilo usando CSS y podríamos agregar en cosas al contenido con HTML. Pero en cuanto a este contenido dinámico que es jalado por una plantilla en PHP, realidad vamos a tener que cavar en la plantilla y modificarla para que ese cambio afecte a la plantilla estándar de blog. El modo en que podemos hacerlo es cavando directamente en el código de WordPress. Tengo aquí mi directorio de temas, solo iré hacia atrás para que puedas ver, este es nuestro proyecto y solo para que sepas a dónde ir. Aquí hay código que probablemente no quieras tocar en absoluto aparte del archivo config y asegurarte de que se esté conectando a la base de datos, pero ya tenemos eso, la carpeta en la que vas a estar editando con mayor frecuencia y prácticamente nada sino esta carpeta Temas y luego entrando en el tema de tu hijo, recuerda, por eso creamos este tema infantil. Fue para que pudiéramos poner todo sobre personalizaciones en la carpeta unica y referirlas. Como dije, quiero poner esta imagen destacada por encima de este título y de estos metadatos, y la forma de hacerlo es a través de la plantilla única. En WordPress, vamos a repasar jerarquía de plantillas en un video futuro pero solo por ahora, sepan que si crean una entrada de blog o una página, utiliza la plantilla single.php. Para hacer esa modificación, lo que necesito hacer es entrar en la carpeta padre y encontrar el single.php. Voy a copiar eso y luego voy a entrar en mi tema div y pegarlo. Ahora, sólo para que quede claro lo que está pasando aquí es porque estoy usando un tema infantil, WordPress va a buscar primero en esta foto, y va a buscar un single.php y básicamente todos los archivos de plantilla, y si no lo pueden encontrar aquí, lo va a cargar aquí. Es por eso que nuestros sitios web siguen funcionando si no tenemos todas las plantillas aquí dentro, porque se ve aquí primero para ver si es alguna personalizaciones que hay que hacer, y si no hay nada ahí, sólo va al tema de los padres. Pero esencialmente lo que estamos haciendo aquí es que estamos tomando la plantilla del tema principal y luego somos capaces de editarla en el niño para hacer personalizaciones. Voy a hacer clic derecho en eso y editar en Atom. Ahora, probablemente no entiendas todo aquí y eso está bien, pero te recomiendo que intentes familiarizarte, aprendas más sobre la jerarquía de plantillas, aprendes más sobre las funciones. Este es un proceso en curso y seguramente no entiendo absolutamente todo lo que pasa en los archivos de plantilla. Pero lo puedo averiguarlo con solo tener un aspecto como se puede ver este div aquí para el contenido principal, va todo el camino hasta aquí, y tienes algunas funciones div. Se puede decir que div porque consiguieron et underscore pb. Este es un especial para div y puedes emparejar estos con lo que ves en la página, para que puedas ver este div con contenido principal. Si vuelvo a nuestra página web en vivo e inspecciono y echo un vistazo al HTML, puedo ver el div id main-content. Si bajo y miro el área de contenido fino, solo voy a copiar y pegar eso porque en realidad puedes hacer clic aquí, presionar “Comando F” en el Mac y encontrar área de contenido buscando, entonces puedes ver este div aquí, área de contenido . Es así como yo haría para conseguir una comprensión de cómo esa plantilla se relaciona con esto. Pero sí tiene mucho contenido dinámico, y lo que vamos a necesitar hacer es averiguar dónde está el PHP agarrando la miniatura y conseguir que la ponga por encima del encabezado y no por debajo del encabezado. Ahora antes de hacer nuestros cambios, solo quería brindar alguna instrucción extra y una advertencia extra a aquellos de ustedes que ya están hospedando su sitio web en internet. Básicamente, hemos estado haciendo esto localmente, así que soy capaz de simplemente entrar a la carpeta con mi sitio en mi computadora y simplemente hacer clic y arrastrar archivos y hacer clic derecho y abrirlos en mi editor. Pero si tu sitio web ya está en internet, tendrás que usar FTP. Ahora bien, no necesariamente tienes que usar FTP, pero es muy recomendable, y la razón por la que es algo que te mostraré en este momento. Sólo porque ya he hecho esto antes y ha sido una verdadera molestia, así que asegúrate de usar FTP. Voy a ir a aquí, estoy en mi Editor de Apariencia, puedes ver nuestro style.css. Voy a entrar en functions.php y voy a poner algún código malo. Simplemente pondré algún código malo, actualizaré archivo, y en realidad WordPress se ha incrustado ahora donde realmente se dan cuenta como cuando pones código malo y no te permiten actualizar. Pero en épocas anteriores, si cometieras un error, te permitiría meterte eso y luego conseguirías algo que me gusta llamar la pantalla blanca de la muerte. Tan solo para mostrarte cómo sería eso, solo voy a tirar eso en mi archivo PHP de funciones por aquí, voy a poner algún código malo y luego voy a ir a pasear al sitio web y golpear “Refresh” y de repente el toda la página web está abajo. Esto es realmente importante chicos porque si cometes un error en tu sitio web en PHP, apagará todo tu sitio web. Es importante saber que cuando esto sucede, porque inevitablemente vas a cometer un error PHP en algún momento que esto va a suceder, no te asustes. Simplemente puedes volver a tus archivos PHP y averiguar dónde está el error y eliminarlo. Simplemente lo voy a quitar ahora, pulsa “Guardar” y vuelve a cargar la página. De repente toda mi página web funciona de nuevo. Esa es una de las cosas malas de WordPress supongo, si cometes un error de PHP, quitará todo tu sitio web. Por eso si estás construyendo un sitio web para alguien que ya tiene un sitio web o estás actualizando tu sitio web existente, definitivamente o bien desarrollarte localmente o en una ubicación diferente como un servidor de puesta en escena, que entraremos en puesta en escena servidores más adelante en este curso. Pero solo quería dejar eso realmente claro, si cometes un error en tu PHP, puede descarrilar todo el sitio web, por eso necesitas asegurarte de que estás creando estos cambios o haciendo estos cambios no en un live sitio web, que estarías muy molesto por que se vaya abajo. El otro punto que quiero hacer al respecto es volver a la importancia de usar FTP. Si yo fuera capaz de usar al editor como solías poder hacer en la prensa web, y digamos que lo hice y metí ese error. WordPress me permite entrar y editar estos archivos de plantilla desde dentro del tablero. Si recargo la página, puedo acceder a mi sitio web. Entonces podría ser como, "Entraré y cambiaré ese código, arreglaré mi error” Pero si entro en el administrador de WordPress, también está roto. He hecho esto, he cometido este error en ocasiones antes donde he editado plantillas de tema y ha causado un error de PHP y el sitio web de mi cliente ha caído, y por suerte, nunca ha estado en un sitio web en vivo. Ha estado en la construcción. Pero si no tengo acceso a FTP, eso es todo. Estoy completamente atascado. No puedo entrar y editar el código. Necesitas acceso a nivel de archivo al código. Esto es muy importante. Entonces vamos, he quitado el código y mis sitios web de vuelta. Si mordiste iffy en FTP, vuelve a mi primera clase de habilidad compartida, “Entendiendo Desarrollo Web” y mira eso. Básicamente, puedes usar un cliente FTP el cual te dará una interfaz similar a ésta. Mis favoritos son Cyberduck y Filezilla, pero si quieres aprender más sobre FTP, definitivamente, regresa y mira eso. Voy a volver a lo que estábamos hablando antes. Perdón por la vía lateral pero eso es muy importante que entiendas esa advertencia. Lo que voy a hacer es conectarme ahora a FTP, porque en realidad tengo las plantillas guardadas para mi propio sitio web y en realidad puedo referirme a ese código para recordar cómo lo hice porque eso es un movimiento unas cuantas cosas alrededor para conseguirlo a trabajar. Esta será en realidad una buena oportunidad para que veas cómo editarías un sitio de WordPress usando FTP. Voy a abrir Filezilla. Voy a ir a mis sitios y conectarme a FTP en mi propia página web. Pondré mi contraseña aquí y lo que voy a hacer es entrar a mi sitio web, y esto es esencialmente como lo harías tú también usando tu propio sitio web, puedes ver aquí, tengo mi tema infantil, y puedo indagar en eso, y puedes ver aquí, tengo una plantilla single.php. Puedo hacer clic en “Ver” y “Editar”, y lo que va a hacer es descargar una copia temporal que puedo editar y luego subir de nuevo a mi hosting. Tienes que tener cuidado con esto. Asegúrate de que se vayan subiendo cualquier cambio que crees. Entonces básicamente, haciendo referencia a lo que ya he hecho. Se puede ver aquí abajo que he movido esta información en miniatura arriba de aquí donde estaba aquí antes, he escondido esta función que crea el post meta y he puesto en mi propio post meta aquí. De nuevo, podría entrar en un video de una hora de duración sobre cómo hice esto pero solo quiero sacar el punto sobre cómo editarías la estructura de tu página. Lo que voy a hacer primero es mover la imagen arriba y sólo comprobar lo que he hecho aquí. Puedo referirme a eso y bajar hasta aquí. Puedo encontrar dónde está esta función, buscarla. Como se puede ver aquí, la información de miniaturas se está generando debajo de este post meta. De lo que voy a hacer, al igual que lo he hecho aquí, me voy a llevar las cosas de la imagen destacada. Básicamente, todo menos el título, así que podría tener que hacer esto en dos copias y pastas. Yo quiero ponerlo justo después del post meta wrapper porque aquí, se puede ver el título de entrada. Entonces definitivamente tiene que estar detrás de eso. Puedo copiarlo y pegarlo ahí pero en realidad no he abierto mis etiquetas PHP. Para aquellos de ustedes que no conocen PHP, nuevo, tal vez, quieren volver atrás y checkout entendiendo el desarrollo web. Pero he abierto alguna etiqueta PHP, así que puedo poner en PHP, copiar esas cosas, y sangrar a través. Voy a volver y conseguir el resto de la información aquí. Deja ahí el título, va a golpear “Save”. Entonces voy a plantear esto también, porque esto tiene que salir. Esto es en realidad cuando se muestra la imagen. Se puede ver que por miniatura de impresión, esto va a ser diferente, por cierto, para cualquier cosa que uses esto es código de divi ahora mismo. Voy a espaciar eso abajo y poner ese contenido ahí dentro. Básicamente, es preguntar si es un video? Pondrá el video en lugar de la miniatura, y si es una miniatura, imprima la miniatura, y si es una galería, imprima una galería. Esas son cosas extra que divi te permite hacer. Básicamente, la mayoría de las veces, tienes una miniatura o una imagen destacada para tu entrada de blog. Voy a ahorrar una vez más, siempre es una buena idea guardar continuamente y luego volveré a aquí y refrescaré. Ahí vas. Ahora puedes ver que la imagen aparece por encima del encabezado y los meta datos aquí. Pero recuerda, quería tal vez cambiar un poco esto, así que lo que voy a hacer es bajar, y desafortunadamente, hay una línea de código donde divi descubre qué poner aquí y lo pone todo ahí dentro. Pero podemos descomponer esto en nuestro propio código, si quisiéramos, y eso es lo que he hecho con mi propio sitio web. He desglosado esto en esta pequeña sección aquí. Voy a copiar y pegar eso a través y luego te lo explicaré. Pero antes que nada, voy a comentar que post meta cerrar la etiqueta PHP, abrir una etiqueta PHP y luego en medio, pondré mi HTML. Voy a hacer clic en “Guardar” en eso y ahora, cuando hago clic en “Refrescar” debería haber reemplazado este post meta el cual fue generado por la función meta de divi post y poner en mi propio código. Voy a refrescar la página, y ahora, ya pueden ver, tiene unas palabras más ahí dentro. Es en el orden que elegí, y eso es todo como se establece aquí. Sólo para pasarlo un poco, esto no todo automáticamente, pero al mismo tiempo, obtiene exactamente lo que quiere divi. Si descomento eso, pulsa “Guardar”, debería aparecer los dos ahora, para que puedas ver lado a lado esto es lo divi siempre apagará si pones esa función. Pero si lo desglosas como lo hicimos, puedes poner tu propio código personalizado y sigue usando contenido dinámico. Vamos a volver a poner eso a donde estaba. Sigue usando contenido dinámico, así que en lugar de decir: “Dame el post meta, lo que estás haciendo es, estás diciendo las palabras específicas que quieres y estás poniendo tus propias líneas y cosas, pero luego puedes poner en contenido dinámico como el enlace de autor. Después puedes poner algún código para encontrar la categoría. Esto es un poco de código extra porque tal vez, no tienes categoría. Si no tienes categoría y pediste poner en una categoría, te va a error. Entonces obtienes esta declaración condicional aquí para asegurarte de que hay una categoría antes de que la muestre, y si hay múltiples categorías las va a mostrar todas aquí. Para categorías, es un poco más complicado. Publicado en es muy simple, es el método de fecha en WordPress. Entonces si alguna vez estás en plantilla, puedes poner la fecha y saldrá la fecha. Entonces en el lapso final, he puesto el número de comentarios y usando esta función, número de comentarios, el primer argumento o parámetro en esto es, ¿qué aparece si no hay comentarios? No he puesto comentarios. ¿ Qué aparece si hay un comentario? Lo cual he puesto un comentario, y lo que aparece si hay más de uno y este pequeño signo de porcentaje es un pedazo de indicador dinámico que sea el número de comentarios, va a entrar en ese pequeño porcentaje signo. Un poco más complicado aquí, básicamente puedes poner lo que quieras aquí. Voy a deshacerme de eso, poner en un lapso aleatorio diciendo, “Post es impresionante”, lo guardaré, y ahora, de repente, has actualizado todas tus plantillas con el bit estático de código y puedes ir a cada post y tú veré que tiene esto, es el mismo. Ya verás que tienes este post es impresionante, por lo que puedes ver eso. Puedes tirar lo que quieras ahí dentro. Creo que tiene sentido tener la fecha, por quién se publica, y el número de comentarios. Pero puedes hacer lo que quieras. Eso es lo genial de WordPress es, nivel infinito de personalización, comienzas con un constructor de páginas para ponerte en marcha una página con código mínimo y luego si quieres entrar y cambiar algo, tú puede hacer a través de CSS como hicimos en esta página y HTML, o puedes entrar y afectar las plantillas. Ojalá que eso no fuera demasiado avanzado para ti, ten en cuenta que, es algo continuo con el aprendizaje de prensa web incluso tengo que cavar un poco y probar algunas cosas y resolver problemas para conseguir las cosas como yo quiero. Pero lo más importante que hay que entender aquí es el principal. Si ves un problema estructural en tu página que no puedes arreglar con CSS o JavaScript, quieres entrar en tus plantillas PHP y asegurarte de que esas personalizaciones realizadas dentro de un tema secundario y que no las estás haciendo en vivo sitio porque si hay algún error, apagará todo tu sitio. Pero como puedes ver si lo creaste correctamente, entonces todas tus publicaciones ahora tendrán la imagen por encima del encabezado y los metadatos. Ojalá eso tuviera sentido, si no, definitivamente, poner algunos comentarios en la discusión y hablaré con ustedes en el siguiente video. 13. La jerarquía de las plantillas de Wordpress: Como viste en el último video, editamos un archivo de plantilla en WordPress, que en este caso fue el single.php. Pero si entramos en nuestra carpeta de padres con divi en ella, podemos ver tantos archivos de plantilla diferentes, footer.php, functions.php, header.php. Hay un montón de archivos de plantilla. En este video, vamos a hablar de la jerarquía de plantillas de WordPress. En mi mente, la mejor manera de aprender sobre esto son dos maneras. Habilita un plug-in en tu instalación de WordPress para comenzar con llamado show current template. Si alguna vez estás en una página o sección de tu sitio web y te preguntas qué plantilla es, esto realmente ayuda. Yo sólo voy a ir a “Plugins”, “Añadir nuevo”. Voy a ir a buscar mostrar plantilla actual. Puedes hacer clic en “Instalar ahora”. Después, una vez instalado, haz clic en “Activar”, y de repente se activa. Si eso está funcionando, deberíamos poder volver a nuestro sitio y arriba veremos la plantilla. Esta plantilla es page.php. Si vamos a nuestras entradas de blog, deberíamos ver ahora single.php porque es la página única, tipo de publicación única. Si vamos a un solo artículo de cartera, deberíamos ver solo también. En realidad hay un archivo de plantilla separado llamado proyecto único para esto. Esta es realmente la razón por la que ese plug-in es realmente bueno porque yo hubiera pensado inicialmente todo tal vez esto hace referencia al sencillo, pero no. Obviamente hay una plantilla personalizada para esto y en realidad lo puedes ver aquí arriba. Te dará las rutas de plantilla relativas, por lo que esto está en nuestro tema de padres. Se pueden ver todos los archivos de plantilla que se incluyen en eso. La segunda herramienta o segundo recurso para entender la jerarquía de plantillas es, solo voy a ir al sitio web de WordPress buscando la jerarquía de plantillas de WordPress. He escrito mal la ortografía ahí, pero WordPress o Google sabe de lo que estoy hablando. Si vamos a este artículo en wordpress.org sobre jerarquía de plantillas, puedo desplazarme hacia abajo y ver la visión general visual. Solo para que esto coincida con lo que tenemos aquí en este momento, proyecto único, este es un tipo de post personalizado, por lo que probablemente no esté listado aquí. Pero si volvemos a una entrada de blog y podemos ver single.php, pero puedes emparejar esto con la jerarquía de plantillas. ¿ Qué pasará cuando alguien acceda a tu sitio web pasará por el Index php, bajará por singular php y golpeará single.php. Si va a una página, irá a page.php, que vimos antes cuando fuimos a la página principal. A page is page.php es la plantilla para eso. Esto es un poco confuso en sí mismo, pero al menos puedes componer donde todo vive al verlo en tu página web la plantilla de arriba aquí y también verla aquí. Lo que también es importante tener en cuenta aquí es que si bien WordPress comenzará en el índice php y buscará archive.php, o buscará singular, buscará sencillo. No necesariamente tiene que estar ahí. En el caso de nuestro tema divi, por ejemplo, si entramos en la carpeta del tema divi y buscamos archive.php, realidad no existe en divi. Pero si lo creáramos, WordPress buscaría archivo en la situación de una página de archivo. ¿ Qué es una página de archivo? Es básicamente, como se puede ver aquí, author.php, category.php. Es básicamente un índice de diferentes publicaciones categorizadas por categoría, fecha y cosas así así que si entramos en hacer click en nuestra categoría, verás en este momento no hay plantillas de archivo, así que solo es index.php. Pero index.php se encarga de todo el sitio web. A lo mejor no queremos editar index.php directamente. A lo mejor sólo queremos afectar esta página de archivo. Aquí tienes un ejemplo de la jerarquía de plantillas trabajando para nosotros. En realidad voy a crear una página de archivo aquí mismo. Voy a entrar en archivo, nuevo archivo en nuestro editor de códigos, que en este caso es Adam y lo que podemos hacer es copiar el código del índice. Voy a tener que ir a divi, encontrar la plantilla index.php entonces ahora voy a agarrar todo el código y copiar eso a través de aquí. Entonces voy a guardar eso como archive.php. Ahora quizá te estés preguntando, bueno, ¿por qué duplicamos algo que ya está ahí? Esencialmente, es posible que no queramos editar el archivo index.php porque eso funciona con todas estas plantillas. Es un archivo de padres. Simplemente queremos afectar el archivo. Estamos creando una plantilla que WordPress buscará los cambios que hay ahí y sobrescribirá lo que se muestre en index.php. Esta es la misma teoría de los temas infantiles y los temas de los padres. WordPress mirará primero un lugar y si no lo encuentra, irá para el padre. Esperemos que ese flujo lógico esté teniendo sentido para ti. De no ser así, de nuevo, a medida que creces a lo largo de tu viaje de codificación, deberías empezar a internalizar más estas cosas. Pero sí, si entramos en esto ahora y presionamos “Refresh”, podemos ver que la plantilla que se está utilizando como archive.php y ya no index.php. WordPress sabe dónde buscar y hará referencia a eso. Ahora bien, ¿cuál es la diferencia entre índice y archivo? Bueno, no debería haber ninguna diferencia porque copiamos y pegamos el código directamente. Pero ahora si queremos hacer personalizaciones, podemos hacerlo en el archive.php. A lo mejor queremos hacer referencia a que se trata de un archivo. Déjame cavar en el código front end y ver dónde querría colocar esto. Veo que este es el área de contenido. Este es el contenido principal. A lo mejor lo pondré aquí. Voy a poner un rumbo. Diré archivos. Le pegaré a “Save” en eso. Volveré a aquí y pegaré “Refrescar”. Se puede ver Archives está ahí, pero está fuera a un lado porque no lo puse en un contenedor. Ese es mi mal. Voy a quitar eso y ponerlo en el contenedor. Presiona “Guardar” en eso. Ahora puedes ver en cualquier página de archivo, tendrás archivos. Ahora bien, esto es sólo contenido estático. Probablemente querrías poner en algún contenido dinámico que diga: “Aquí están todos los posts de esta categoría”, y poner el nombre de la categoría y tal vez alguna información sobre la categoría también. Es posible que quieras hacer eso, pero esencialmente, solo te estoy mostrando aquí sobre la jerarquía de plantillas. Puedes descifrar la jerarquía de plantillas haciendo alguna investigación en wordpress.org, mirando ese diagrama visual que puedes usar show current template para mirar lo que sea que estés en tu sitio web. Nuevamente, no tenemos muchas páginas ni lugares para ir en nuestra página web, pero puedes ver para esto donde obtuve la página y cómo usarías esto es, digamos por ejemplo, que querías cambiar este diseño y querías el Imagen de Facebook o la imagen aquí para aparecer por encima del título. Bueno, tú subes aquí y ves, project.php soltero. Esa es la plantilla que necesito modificar. Nuevamente, volviendo a divi aquí, encontrarías eso y no lo editarías directamente en el tema de los padres porque recuerda, estamos haciendo bien y modificaciones en el tema infantil. Pero lo que haces es simplemente copiarlo, entrar en el tema de tu hijo, pegar y yo sólo lo voy a hacer muy rápido por ti aquí. Básicamente, si querías modificar algo así, repente el título aparece antes de eso y ahora eso no es muy práctico. Pero puedes ver aquí, puedo afectar esa plantilla y eso ahora se va a aplicar a cada proyecto. Si voy a Google, titulo Google, tal vez puedas texto estático más descriptivo habría “ Cliente anterior ” entonces si volvemos “Cliente anterior: Google” y entonces eso va a comprar para todos tus proyectos, “Cliente anterior: Amazon”. Con este video y el video anterior, ojalá, te he mostrado cómo puedes entrar y editar plantillas. Si entras en algo que muestre contenido dinámico como una entrada de blog y no te gusta cómo se muestra, tal vez quieras poner algo que aparece en cada entrada de blog, o tal vez quieras reorganizar el contenido en una entrada de blog así es como lo harías. Entrarías, verías qué plantillas se usan, entrarías en tu tema, crearías esa plantilla si no existe ya en tu tema hijo luego crea tus modificaciones allí. Es así como puedes modificar las plantillas de PHP en WordPress. Si necesitas más información sobre la jerarquía de plantillas, hay mucha información en línea. Definitivamente tener una lectura del manual temático wordpress.org. Te veré en el siguiente video. 14. Cómo construir tu sitio web: Ahora esencialmente hemos cubierto todas las partes de construir en WordPress. Empezamos con el tema, usamos un constructor de páginas para construir una página en tu sitio web, luego entramos en cómo personalizar el estilo con CSS, y construimos algunos elementos personalizados que desde entonces se han ocultado. Después cavamos en las plantillas también. Hemos pasado por todas las capas de WordPress, empezando por la parte superior, sin código, para adentrarnos en el código. Ahora mismo, teóricamente podrías tomar ese conocimiento y correr con él, construir el resto de tu sitio web, pero solo pensé que por el bien de la integridad, te voy a pasar por la construcción de este sitio web, y si quieres seguir adelante, puedes aprender más sobre WordPress. Lo primero que veo como un problema es que tenemos estos elementos del menú, y en realidad no se vinculan a ningún lado. Eso sería lo primero que haría, si vamos aquí a la URL y escribimos proyectos o simplemente proyectamos, podemos ver un índice o una página de archivo, haciendo referencia a lo que hablamos en el último video de todos nuestros proyectos. Esto sólo va a ser una página básica de archivo, reuniendo todos nuestros proyectos. Voy a deshacerme de esa pieza de texto que dice archivos, porque realmente no necesita estar ahí, y realmente no agrega nada, así que volviendo a la plantilla, deshizo de los archivos. Genial, esta es básicamente nuestra página de portafolio, podemos usar eso, pero al mismo tiempo tenemos que profundizar en el archivo de plantilla y bien, ir un poco más profundo en el código para cambiar el diseño de esto, y realmente no es necesario. Lo que voy a hacer es crear otra página usando Divi page builder, para que podamos exponer nuestros proyectos un poco más bonitos. Voy a ir a New, Page, y lo voy a llamar Proyectos. Voy a golpear tab para que salga con una URL, sí me gusta esa URL. Si no te gusta la URL, por ejemplo, puedes cambiarla a lo que quieras. A menudo estoy cambiando las URL para ser más amigable con el SEO, así que ese es solo otro punto ahí. Voy a cambiar del editor estándar de WordPress WYSIWYG al Divi Builder. Voy a poner un título aquí, sólo por ancho y poner un poco de texto. El texto va a decir Epígrafe 1, Proyectos Anteriores, voy a llamar a este Encabezado, por lo que me resulta más fácil de entender. Entonces puedo agregar en un módulo debajo de él que muestra mi portafolio. Tienen un módulo de cartera muy bien formateado aquí en Divi. Lo primero que voy a hacer es ir a Design, elegir Grid porque para ancho es demasiado grande. Solo tengo una categoría por el momento, así que solo la voy a ocultar por ahora, pero me voy a quedar con todo eso. Mantén el nombre Portafolio, y vamos a previsualizar lo que tenemos ahora. Tenemos nuestros proyectos anteriores aquí. Otra cosa que quiero hacer sólo para agregar algo más de contenido a esta página, es más texto para dibujar a la persona. Yo sólo voy a escribir algo aquí. Voy a centrar línea eso, y no me importa el nombre Texto. Voy a subir eso por encima de cartera, luego voy a previsualizar eso. Da click en los enlaces de abajo para consultar mi proyecto anterior, ahí vamos. Estoy contento con eso así que voy a dar clic en Publicar, y más en mis otros enlaces de menú, así que tengo Portafolio, tengo Servicios. Voy a añadir una nueva página llamada Servicios. Esto es esencialmente cómo se va a construir un sitio web, posible que tenga un diseño enviado a usted, o puede que simplemente lo esté diseñando sobre la marcha, pero esto es todo. Construyes páginas, haces personalizaciones avanzadas cuando es necesario. Pero la mayoría de las veces usando Divi Builder, puedes simplemente construir la mayor parte de lo que necesitas, solo usando esta interfaz aquí. De nuevo, sólo voy a poner un rumbo. En realidad no necesito poner un nuevo módulo para el texto, en realidad puedo simplemente poner un párrafo debajo de este módulo real aquí. Aparentemente nos deshicimos de esas, estúpidas cajas que buscaban antes, en realidad voy a construir algunos elementos personalizados solo para mostrarles cómo harían al respecto, en caso de que quieran hacer algo personalizado. Voy a conseguir una fila igual de tres columnas, y voy a poner mi propio código. Voy a poner un div, y lo voy a llamar con la clase service-box. Ahora lo mejor que hay que hacer aquí es que todo sea bueno en el módulo uno, y entonces simplemente puedes duplicar básicamente estos módulos hacia fuera, si vas a reutilizarlos. Yo sólo voy a construir algo ahora, y también voy a entrar en mi editor de temas, así que puedo poner algo de CSS. Ya verás cómo hemos desarrollado una caja de servicio. Voy a adelantar un poco aquí y luego volveré derecho y te haré saber lo que hemos hecho. Lo que tengo aquí, todavía no se ve súper bonito, pero se ve bien. Tengo esta caja que dice WordPress Web Development en ella, como uno de mis servicios, puedo duplicar esto arriba, básicamente lo que hice, acabo de conseguir ese div con la clase service-box, poner un encabezado h2 ahí, en realidad tenía un color de fondo usando esto antes, pero decidí deshacerme de eso, así que puedo especificar el color de fondo en mi propia clase aquí. Como puedes ver, tengo una clase service-box donde defino los estilos, le estoy dando un borde, le estoy dando una altura mínima, textos y forro en el centro, el color de fondo se han establecido en un blanco. Entonces estoy usando una regla CSS para efecto el encabezado para etiquetar dentro de esa caja, dándole un margen superior y dándole algo de relleno a izquierda y derecha. Entonces por fin, para obtener esa funcionalidad hover, puedo hacer eso en CSS poniendo, creo que esto podría llamarse pseudo clase o algo así, va al final el día con un colon y luego pasar el rato, así que entonces cada vez que lo paso por encima, ¿por qué es que tengo demasiadas páginas abiertas? Siempre que pase el cursor sobre él, ese color de fondo cambia. Obviamente querrías dedicar más tiempo a diseñar algo un poco más bonito, pero para nuestros propósitos solo voy a ir con eso. Voy a duplicarlo, cambiar uno de los servicios a Yii2 Framework Development. Arrástrelo por ahí, vuelva a duplicar, cambie el encabezado, Guardar y salir, y luego mueva eso hacia arriba. Analicemos lo que tenemos ahí. Como puedes ver, los estilos se están aplicando a todo lo que es una caja de servicio. En tanto tengamos la clase ahí, se aplicará, así que sólo tenemos las piezas que necesitamos para duplicar, y el resto del estilo y todo está hecho por aquí. Ahora tenemos esto, idealmente quisiéramos poner algo más de información ahí, tal vez enlace al portafolio, pero para nuestros propósitos, solo para hacer un breve video, voy a decir que estoy contento con eso y voy a pegarle a Publish. Ahora tengo una página de servicios, puedo dar clic en Ver Página, Blog aquí, debería enlazar al índice del blog. Vamos a ver si ya tenemos uno. No, no lo hacemos. Vamos a crear una página de blog para terminar esto. Voy a llamar a este Blog. Voy a utilizar el Divi Builder una vez más. Voy a poner un título, todas mis entradas de blog, va a darle una Etiqueta Admin de encabezamiento. Entonces podemos agregar fácilmente en un módulo aquí para el blog, prefiero rejilla, como dije antes que ancho completo, pero cualquier flotador es tu barco. Volviendo al contenido, sólo estoy respirando por aquí chicos. Sí, estoy contento con todo eso, Save and Exit. Voy a dar clic en Vista previa, todo mi blog publicado allí. Vea lo rápido que fue usando contenido dinámico, que usar el constructor de páginas. Si quisiéramos poner algún texto entre ahí también podemos hacer eso igual que lo hemos hecho antes, pero por el bien del tiempo sólo voy a darle a Publish. Ahora tenemos todas las páginas que necesitamos poner en estos menús. Ahora podemos volver a Apariencia, Menús, todos estos son enlaces personalizados, y lo que podríamos hacer es cambiar esto a proyectos. Pero también, nos da las páginas aquí para insertar también, y eso probablemente sea un poco más seguro de hacer, porque si cambiamos la URL, entonces se actualizará. Voy a quitar todos estos, y voy a poner en proyectos, servicios, blog. Puedes marcarlos a todos y tirarlos. Quiero proyectos primero, quiero servicios segundo, y no quiero que se llamen proyectos para poder cambiar la etiqueta de navegación, y llamarla cartera. Entonces tenemos página de blog aquí. Puedo agregar en mi categoría allí para WordPress aquí, así que eso es dinámico también, puedo agarrar eso, ponerlo ahí abajo. Entonces por supuesto que quería como enlace de sub menú, así que lo voy a mover y va a decir sub item. Si presiono Guardar Menú, verás que el menú se actualizará. Se puede ver porque entre la página del blog, se destaca Blog. Si hago clic en eso, eso se destacará si voy a Servicios, esta mi página de servicios, si voy a Portafolio, son todos mis proyectos y puedo indagar en ellos. Ahora tenemos un concedido un sitio web muy básico, pero hemos cubierto todos los principios principales para construirlo. Si quieres gastar más tiempo en esto, si has estado siguiendo y quieres realmente construir esto en algo que realmente quieres publicar, adelante. Pero en mi situación, eso es básicamente todo para la página Building y las personalizaciones avanzadas, lo que voy a hacer en el siguiente video es instalar algunos plugins, que creo que son realmente importantes, y también te mostraré plugins en acción y cómo en realidad actualizan tu sitio de WordPress. Entonces en el siguiente video después de eso, entraremos en un plugin específico que habilita el E-commerce en tu sitio web, así que si te interesan esas cosas, definitivamente quédate. Te veré en el siguiente video. 15. Instalación de complementos: En este momento tenemos la base de una página bastante buena. Tenemos páginas, tenemos un menú, tenemos proyectos aquí, tenemos entradas de blog, así que tenemos un sitio web básico configurado. Pero lo que quiero hacer es habilitar una funcionalidad extra que tal vez no salga de la caja con WordPress y tal vez Devi tampoco te ayude con ello. En ocasiones cuando necesitas funcionalidad extra o quieres agregar algo un poco extra a tu sitio, es posible que quieras buscar la instalación de algunos plug-ins. Ahora solo una advertencia con plugins antes de sumergirnos e instalamos algunos, puedes repasar tanto los plugins, definitivamente y hay un montón de plug-ins para personas que no quieren tocar código en absoluto, que todo lo que hacen es insertar como una línea o dos de código. Lo mejor es mantener limpio tu sitio web si hay una situación en la que todo lo que requiere es que solo vayas a tal vez sea solo tu editor y pongas una línea de código. Es mucho más limpio solo entrar y editar tu código de lo que es instalar un plug-in. Por otro lado, hay situaciones en las que el plug-in hace mucho y no es un simple cambio, en cuyo caso es una buena idea conseguir un plug-in. Pero mi advertencia para cualquiera que haga desarrollo es mantenerte sitio web lo más limpio posible, no instales plug-ins para absolutamente todo, debería haber un propósito claro detrás de un plug-in que instalas. Después de eso queriendo fuera del camino, vamos a entrar en el elemento de menú plug-ins aquí y haga clic en Agregar nuevo. Ahora un plug-in muy popular puede incluso estar en primera plana. Ahora no es tal vez en popular, un plug-in muy popular que puedes buscar por aquí. Yo sólo voy a comprobar si es en popular. Yap, es Yoast SEO y verás que este plug-in funciona para ti en tan solo un segundo. Pero básicamente te permite actualizar tus metadatos para SEO en tus entradas y páginas de blog. Cosas muy poderosas, no solo quieres tomar lo que sea que WordPress genere y usar eso a menudo veces. Por lo que vamos a utilizar Yoast, después de eso se instala pulsa Activar y ahora verás aquí que Yoast está instalado y activado. Para usar Yoast, solo puedes entrar en cualquier publicación o página. Voy a ir a aquí donde ya tenemos nuestro post y voy a dar click en Editar Post. Una vez que estoy dentro, puedo desplazarme hacia abajo y puedo echar un vistazo a una nueva sección y esta es mi vista previa en Google. Se puede ver así es como va a aparecer el título en Google, esa es la URL que va a aparecer, y este es el texto. Ahora, acabo de conseguir una imagen, tienes un título y tienes un pasaje ahí mismo que va directo a una introducción. Esto podría estar bien. Ahora mismo no veo nada necesariamente malo en ello. Que tal vez tengas algún código en la parte superior de tu página y Google interpreta eso, solo poner un código aleatorio aquí o siempre quieres revisar estas cosas, sobre todo si el SEO es importante para ti. A veces quieres que el título sea un poco diferente en tu página web en vez de en Google, tal vez puedas escribir un mejor titular para atraer a alguien que mira en Google de lo que puedes aquí dentro, y solo quieres para que esto pueda ser más relevante. No lo sé, solo es bueno comprobar cuál es tu vista previa en Google y editarla si es necesario. Para eso puedes usar Yoast SEO. Todo lo que haces aquí es editar fragmento en este momento, solo está sacando del artículo actual, pero puedo cambiar esto por cómo instalar. Esto es gracioso, editando la entrada del blog sobre cómo instalar plug-ins en WordPress mientras estamos haciendo un video sobre plug-ins en WordPress. En esta situación, realmente no necesito editarlo, pero puede que quieras hacerlo. También puedes editar una babosa. Me gustó la babosa, pero puedes ver aquí ya que la estoy actualizando allá, estoy actualizando ahí. Pero tal vez quieras una mejor descripción que la primera introducción de tu contenido. A lo mejor quieres decir, este es el mejor artículo de la historia sobre cómo instalar plug-ins. Obviamente esa es una descripción terrible, pero obtienes el punto, puedes entrar y editar cómo se ve en Google. También puedes entrar y editar cómo aparece en Facebook y Twitter. Aquí lo mismo aplica, tal vez es tirar de código o textos que realmente no quieres en la vista previa para que puedas actualizar eso aquí. También puedes insertar una palabra clave focus así que si estás tratando de clasificar para una palabra clave determinada, puedes ponerla ahí y dejar que Yoast evalúe donde estés haciendo un buen trabajo o no. Simplemente lo voy a actualizar ahí con mi nueva descripción y esa es esencialmente el Yoast. Otro plug-in que uso, que es realmente importante y esto realmente no va a aplicar en nuestra configuración local porque realmente no está en internet, pero hay uno, lo siento, tengo que ir a sumar nuevo aquí arriba. Hay un código, SSL realmente simple. Para aquellos de ustedes que no conocen SSL es como certificado de seguridad. Si voy por aquí, se puede ver que dice seguro y como s después del HTTP. Esto es otra cosa de SEO. Hay otras razones por las que querrías tener SSL, pero una de las principales razones es para SEO y con mi host en particular, solo necesito instalar este plugin y luego hacer clic en Activar y siempre y cuando haya un certificado de seguridad SSL adjunto a tu cuenta en el host, obtendrás SSL. Tengo aquí SSL realmente simple Puedo dar click Instalar Ahora. Como puedes ver, una vez que termine de instalarse, solo puedes hacer clic en Activar como lo hemos hecho todo el tiempo. Ahora todo lo que necesitas hacer es ir a Configuración, SSL y puedes habilitarlo si detecta que hay SSL, solo estamos en mi computadora local, así que no hay SSL y esencialmente este curso no es sobre cómo hacer SSL o Yoast, que está hablando de plugins en general aquí. Esa es esencialmente cómo puedes agregar plugins a tu sitio web para agregar una funcionalidad extra que te permita hacer cosas especiales en tu sitio web, y una de esas cosas en realidad es habilitar el comercio electrónico. En el siguiente video vamos a ir directamente a eso usando un plugin llamado WooCommerce y así vamos a decir, por ejemplo, queríamos vender algo aquí, tal vez incluso queremos vender nuestro servicio de prepago nos puede poner en algún e-commerce en nuestro sitio de WordPress mediante el uso de este plugin, así que te veré en el siguiente video. 16. Cómo añadir comercio electrónico con Woocommerce: En el último video hablamos de plug-ins e instalamos dos plug-ins que uso muy regularmente en todos mis sitios web. Pero si estás tratando de hacer E-commerce en un sitio de WordPress, hay un plug-in que es muy, muy popular y se llama WooCommerce. En caso de que quisieras hacer E-commerce, solo voy a correr por instalar WooCommerce ahora, y será una buena experiencia de aprendizaje para nosotros ver qué hace WooCommerce a nuestro sitio de WordPress, y cómo nos puede conseguir E- funcionalidad de comercio realmente rápidamente sin mucho trabajo, simplemente aprovechando este plugin. Estoy buscando WooCommerce y como lo hemos hecho antes, solo voy a instalar ahora y activar. Tan pronto como haga clic en “Activar con WooCommerce”, se le llevará a este siguiente asistente, que le ayudará a configurar su tienda y a comenzar rápidamente. Se puede poner en donde se basa su tienda y su moneda, sólo voy a hacer el $ de Estados Unidos. Se puede decir con comercio donde quiera vender productos físicos o digitales, se va a seleccionar productos digitales. Podemos quedarnos con eso. Voy a tener que poner aquí una dirección ficticia. Esperemos que acepte eso. Entonces me llevarán a la sección de pagos donde me dice lo que WooCommerce puede aceptar. Puede aceptar Stripe y PayPal, las más grandes. Me parece bien que la gente me pague como quiera, pero no tengo una cuenta de Stripe, así que solo voy a deshabilitar eso y simplemente aceptar PayPal. Si entiendes E-commerce y necesitas poner algunos impuestos en, puedes habilitarlo aquí. También puedes conectar un Jetpack, pero creo que necesitarás una cuenta wordpress.com para eso, solo voy a saltarme eso por ahora. Aquí tienes. Puedes pedir consejos, actualizaciones de productos e inspiración a tu buzón de correo, lo contrario, estás prácticamente listo para salir. Voy a regresar al tablero de instrumentos. Puedes hacer click aquí para empezar a crear un producto o importar productos desde otra tienda, pero quiero volver al panel y solo hablar de lo que WooCommerce ha hecho. Ahora en tu tablero, deberías ver algo nuevo en tu menú. Esa es la pestaña WooCommerce y la pestaña de productos. Ahora, lo que son los productos, es sólo otro tipo de post. Ya verás que tenemos publicaciones y páginas, esos son los tipos de publicaciones estándar en WordPress. Proyectos ha sido agregado por Divi, y ahora productos ha sido agregado por WooCommerce. Ahora podemos entrar aquí, y podemos crear productos. Crearé un primer producto. Se puede ver que la interfaz es bastante similar a crear una publicación o una página y eso se debe a que está usando la misma funcionalidad. Solo estamos haciendo otro tipo de post personalizado. Voy a decir, “Un mes de desarrollo web”, y voy a decir, “Esto es por un mes de tiempo completo de mis servicios”. Yo sólo estoy inventando cosas aquí chicos, no se tomen esto demasiado en serio. Pero si nos desplazamos hacia abajo hasta aquí podemos ver los datos del producto y la descripción corta del producto, aquí es donde es un poco diferente a nuestros otros tipos de post aquí. Podemos hacer un producto sencillo que sea virtual, y podemos hacer que por lo general valga 10 de los grandes, pero hoy está en un precio especial de sólo cinco grandes. Inventario. Aquí puedes gestionar tu stock e inventario si no es un producto virtual. Incluso si se trata de un producto virtual puedes limitar la cantidad que la gente compra, puedes vincular productos con ventas ascendentes y ventas cruzadas. Honestamente no tengo ninguna tienda WooCommerce que gestione, en realidad sí uso WooCommerce para vender en mi página web. Utilizo esta funcionalidad básica y funciona para mí. Pero esencialmente, si acabas de golpear publicar en eso y luego te diriges al producto, realmente puedes comprarlo de inmediato. Puedes hacer clic en “Añadir el carrito”, repente tienes un carrito ahora, y puedes hacer clic en “Ver”. Esto es lo brillante de WooCommerce. Mira todas estas cosas que se nos proporciona de inmediato con solo instalar un plugin y poner en un solo producto. Por eso creo que WooCommerce es realmente bueno y también es muy popular, otras personas les gusta también. Ya puedes proceder a la compra. Te pones tu información de facturación, y puedes poner tus cosas de PayPal. Ahora por supuesto que tienes que configurar el pago, he salido del tablero. Tendrás que ir a WooCommerce aquí donde podrás acceder a tus pedidos, tus ajustes, a tus cupones si quieres ofrecer cupones a las personas. Hace tiempo que no configuro mi PayPal, pero tal vez está en cuentas o echa un vistazo aquí, y puedes hacer click en PayPal aquí, puedes configurar tu E-mail de PayPal. Aquí es probablemente donde configurarías tu PayPal. Tienes toda tu configuración aquí en WooCommerce. Cuando alguien sí compra tu producto, se mostrará aquí en tus pedidos, para que veas quién compró qué y cuánto fue, y todas esas cosas buenas. Es realmente increíble que solo puedas agregar un plugin y sacar todo esto de la caja. Esencialmente, eso es realmente configurarse como un producto y configurar pagos para que te paguen, es esencialmente todo lo que necesitas hacer para tener una tienda. Obviamente si estás vendiendo productos digitales tienes que bajar hasta aquí. Voy a seleccionar “Descargable”, y luego puedes agregar en un archivo para que cuando alguien pague, puedan ir a una página que tenga el archivo que puedan descargar, así puedan ir a una página que tenga el archivo que puedan descargar, es como vendo productos en mi sitio web. Obviamente si es un producto físico tienes que cumplirlo. Pero esencialmente, al instalar este plugin, al poner productos, y al poner en la información de pago para que te puedan pagar, esencialmente tienes una tienda justo en tu sitio de WordPress. Se puede acceder a estos productos por, aquí está la URL aquí y se puede acceder a un producto individual. Pero lo que hace WooCommerce, se pone en un enlace aquí para un carrito, también puedes navegar directamente a tienda yendo a tu tienda de barras de dominio raíz, y luego se va a mostrar todo aquí. Puedes personalizar tu tienda por supuesto, esta es una versión antigua. Puedes volver a aquí, y puedes personalizar tu tienda y crear categorías aquí, puedes crear etiquetas al igual que puedes hacer con otros tipos de publicaciones en WordPress. Esencialmente, si querías agregar este elemento de menú a tu menú de WordPress, puedes entrar aquí, entrar en menús de apariencia, y agregar en tienda de inmediato. Se puede entrar ahí Tienda, Guardar Menú, refrescar la página. ¿No es esto hermoso? WordPress está funcionando para nosotros muy bien, y tenemos todo este contenido dinámico y funcionalidad de inmediato para nosotros. Además, puedes ver aquí arriba que hemos agregado algunas plantillas ahora con WooCommerce. Tenemos un producto de tablero de archivo, y luego si me meto aquí, tenemos un solo producto de tablero. Esto te dice que si tuvieras que editar los archivos de plantilla, podrías hacerlo totalmente solo encontrando estas plantillas. Hagámoslo ahora solo para poner esto en perspectiva. Podemos cavar en nuestra carpeta de plugins aquí, ir a WooCommerce, buscar plantillas y boom. Tenemos todas estas plantillas aquí las cuales podemos entrar y editar, igual que hicimos cuando estábamos en nuestro tema infantil y cambiamos el sencillo y cambiamos el archive.php, podemos entrar y cambiar las plantillas aquí. Nuevamente, usando WordPress, todo es de código abierto, podemos usar la interfaz de usuario aquí para hacer lo que queramos en el panel de WordPress pero luego tenemos personalización completa de edición cavando en el código, y eso es un poco sobre WooCommerce y cómo puedes agregar E-commerce a tu página web. Creo que eso casi cubre todos los conceptos básicos de desarrollar un sitio web de WordPress. Tenemos, de nuevo, páginas, proyectos, publicaciones, y ahora, productos. Creo que ahora es el momento de poner nuestra página web en Internet en lo que llamamos despliegue. Si estuvieras construyendo esto en un servidor de puesta en escena, podemos migrar esto a través y todos esos temas que vamos a cubrir en los próximos 1, 2 o 3 videos, mucho tiempo que nos lleve. Si tienes tu sitio web alojado localmente o en un servidor de puesta en escena, y quieres migrar a través, definitivamente quédate para aprender a hacerlo en el siguiente video. O incluso si estás contento con tu sitio web y simplemente lo has estado construyendo directamente en tu hosting, definitivamente te quedas por ahí de todos modos porque si estás deseando crear una nueva versión de tu sitio web, necesitarás para aprender a migrar. Espero que hayas aprendido algo de esta lección y te hablaré en el siguiente video. 17. Implementación de tu sitio: En este video, vamos a hablar de desplegar tu sitio web a internet. Si elegiste la ruta en la que realmente no construiste localmente en tu computadora o en un servidor de ensayo, y lo construiste directamente en el espacio en el que quieres publicarlo. Bueno, no se requiere ningún paso si ya construiste tu sitio web en el lugar en el que quieres que aparezca. Entonces eso es todo. Simplemente puedes compartirlo con tus amigos o compartirlo con quien sea. Empieza a conducir algo de tráfico hacia esa página web. Esta es la nueva instalación de WordPress que teníamos antes en un pequeño dominio demo. Si quieres desplazarte por un sitio web que desarrollaste localmente o en otra ubicación de Internet, y quieres trasladarlo a este destino. Por eso te va a pasar este video. En primer lugar, vamos a hablar de migrar sitio localmente. Aquí se pueden aplicar los mismos principios a la migración aparte del servidor de puesta en escena. Rápidamente, lo que les mostré antes con el sitio web celeste azul es un ejemplo de un servidor de puesta en escena. Básicamente lo que hice fue crear un subdominio en mi propio dominio christhedeveloper.com y allí construí el sitio web. Entonces una vez que estaba listo y una vez que el cliente estaba contento con ello, lo trasladé a su dominio. Eso esencialmente es lo que es un servidor de puesta en escena. Es un lugar que construyes en línea y luego puedes moverlo al destino final. Aplican principios similares si estás haciendo esto localmente a internet o tu migración de un lugar a otro. Simplemente pasaremos por lo que tenemos aquí, que es nuestra Instalar local. Recuerda aquí atrás, ya hemos instalado una versión de WordPress. Lo que voy a hacer es simplemente entrar al administrador de archivos y simplemente borrar eso. Voy a avanzar rápidamente aquí a medida que entro en mi cPanel y en realidad eliminaré esos archivos. Al entrar al gestor de archivos de mis cuentas cPanel para este dominio, solo voy a entrar al HTML público donde se almacena el sitio web y solo voy a eliminar todo esto. Antes de que hagas eso, la razón por la que estoy haciendo eso en esta web en particular es porque básicamente no hay nada en ella. Se trata de una nueva instalación de WordPress. Si tenías un sitio web real ahí, obviamente no vayas y borres tus archivos. Porque tengo una instalación fresca, solo voy a empezar de cero. Voy a hacer clic en eliminar y eliminar todos esos archivos. Eso no eliminará la base de datos de WordPress, es posible que desee entrar y eliminar la base de datos de WordPress también. Creo que podría entrar ahí y borrarlo. Normalmente puedes hacer esto en PHP mi admin cuando lo estás almacenando localmente. Para cPanel quieres entrar aquí y solo podemos deshacernos de esta base de datos por completo. Se puede eliminar la base de datos y ahora se ha ido. Si volvemos a la página web, debería aparecer sin nada. Básicamente, solo aparece con un directorio y ahí no hay sitio web. Lo que podemos hacer es recordar que tenemos nuestro sitio web aquí mismo. Estos son los archivos de nuestra página web. Entonces también tenemos nuestra base de datos almacenada en nuestro servidor localmente. Si vamos aquí y vemos nuestra base de datos WordPress, que llamamos skillshare_wordpress. El paso para la migración, y hablamos de esto un poco en entender Web Development, que fue la primera clase de Skillshare, es pasar por encima de los archivos, pasar por encima de la base de datos y luego asegurarnos de que esos dos están conectados. Lo que voy a hacer es mover los archivos en nuestro sitio de WordPress de Skillshare a nuestro hosting. Entonces eso será idéntico. Hay algunas formas en las que podemos hacer esto, pero creo que la forma más limpia probablemente sería comprimir esto, subirlo y luego descomprimirlo. Básicamente lo que hice fue hacer clic derecho en esa carpeta y hacer clic en Comprimir. Así es como lo haces en Mac, pero estoy seguro de que es diferente en Windows. Deberías estar familiarizado con los archivos zipping. Tengo este sitio WordPress. Voy a subir eso como un solo archivo a mi hosting y ver que va a estar subiendo. Esto va a llevar un poco de tiempo. Voy a esperar un poco y ponerme al día con ustedes cuando haya terminado de subir. Está bien. Por lo que regresé en unos minutos y eso ahora se sube. Podemos dar click aquí para volver a nuestra carpeta. Puedo hacer click en él y luego dar clic en extraer, voy a extraerlo. Ahora sólo esperamos a que se extraiga. Está terminada porque la puse zip en un Mac OS X. Voy a tener esto, pero esta es la foto que buscamos. Sólo tenemos que agarrar todo esto y moverlo a la carpeta HTML pública. Yo me desharé de eso. Haga clic mover, volver atrás y podemos deshacernos de, ese ahora vacío. Podemos deshacernos de él y podemos deshacernos de esto. También podemos deshacernos del archivo zip porque está todo en zip. Tan solo para mostrar cómo se ve eso ahora en nuestro navegador, podemos refrescarlo y se va a un error diciendo error estableciendo una conexión a base de datos, lo cual por supuesto no es una sorpresa, en realidad no tenemos una base de datos en nuestra página web. El siguiente paso es migrar sobre esa base de datos. Lo que voy a hacer es dar clic en Exportar aquí, elegir rápido, ir. Tengo algún código SQL para poner en mi base de datos, pero desafortunadamente, no tengo una base de datos aquí porque acabamos de borrarla. Además no tengo la capacidad de nombrarlo exactamente como éste porque está forzando un prefijo en el nombre de la base de datos. Tiene que llamarse skillsharecourse_ y luego algo. Vamos a tener que modificar un poco la base de datos en el hosting. Lo que voy a hacer es nombrar a este WordPress. Va a ser skillsharecourse_ WordPress en lugar de skillshare_wordpress sólo por este prefijo. Voy a crear la base de datos. Voy a volver. Como puedes ver aquí alguien, no alguien, WordPress ya creó un nombre de usuario para mí. Simplemente voy a eliminar a este usuario y crear uno nuevo. Entraré aquí y eliminaré a ese usuario. Entonces ahora solo tenemos una base de datos sin usuarios. Voy a agregar un usuario y lo voy a llamar solo skillsharecourse_admin. Voy a generar un nombre de usuario lo siento una contraseña por eso. Voy a entrar en mi única contraseña como siempre agarrar eso. Asegúrate de grabarlo definitivamente. Este va a ser mi nombre de usuario/contraseña MySQL. Contraseña está ahí, el nombre de usuario va a ser skillsharecourse_admin. Ya tengo eso todo grabado. Puedo copiar y pegar eso y otra vez, ahí vamos. Ahora ya está hecho. Has creado, creado con éxito un usuario. Ahora el paso final es dar privilegios de acceso a este usuario, acceder a la base de datos que acabamos de crear. Las únicas dos opciones disponibles son las que tenemos. Podemos simplemente presionar add. Vamos a habilitar todos los privilegios y presionar hacer cambios. Si recuerdas cuando empezamos a instalar nuestro sitio de WordPress para empezar cuando lo estábamos haciendo localmente, teníamos ese famoso instalador de cinco minutos para WordPress y WordPress básicamente dijo: “Pon tus datos y pondremos eso en el archivo de configuración de WP”. No tenemos esto disponible ahora. Lo que vamos a tener que hacer es poner estos detalles directamente en nuestro archivo de configuración WP. Ahora que tenemos esta información se configurará, lo que vamos a hacer es entrar en nuestro archivo de configuración WP para que solo podamos editarlo desde dentro de nuestro File Manager. También podrías editarlo vía FTP usando tu editor de código si quisieras. Lo primero que vamos a hacer es cambiar el nombre de la base de datos a SkillShareCourse_WordPress. Básicamente solo estamos copiando a través de los detalles aquí. Este es el nombre de la base de datos, SkillhareCourse_WordPress. Este es nuestro usuario. Para que podamos tomar ese nombre de usuario y podemos ponerlo ahí. El password, recuerda que guardamos en nuestra edición de texto. Entonces voy a copiar eso, poner eso, y creo que podemos dejarlos igual. Voy a guardar los cambios. El último es tener los datos en las tablas esta base de datos porque si vamos ahora a phpMyAdmin, habrá una base de datos aquí sin nada en ella. Lo que vamos a tener que hacer aquí es agarrar esto y asegurarnos que importe a nuestra nueva base de datos. En realidad solo voy a hacer clic aquí y hacer clic en “Seleccionar todo”. Entonces voy a presionar el Comando C para copiar, y ya no necesitamos esto abierto. Tenemos que volver a phpMyAdmin. Asegúrate de entender cuáles phpMyAdmin localmente, y cuáles phpMyAdmin en tu hosting. Puedes asegurarte de que puedes ver eso desde la URL. No quiero confundirte. Se trata de dos phpMyAdmins diferentes. Lo que podemos hacer aquí es ir a SQL, asumiendo que tenemos una consulta SQL, y esto se va a ejecutar en la base de datos SkillShareCourse_WordPress. Voy a pegarlo y voy a cambiar el detalle en la parte superior. Dice base de datos skillshare_wordpress. Esto es sólo un comentario, pero me gustaría cambiarlo de todos modos. Si presiono “Go”, y todas las cosas están bien, debería importar todos los datos de nuestra base de datos de WordPress local a nuestra base de datos WordPress que acabamos de configurar en nuestro hosting. Podría tomar un tiempo sólo porque hay muchas filas ahí para insertar. Pero ojalá termine de cargar y ahora podemos ver una garrapata grande. Voy a presionar “Estructura” y se puede ver que tenemos todas las mesas ahí. Si entramos, digamos Posts, podemos ver algunas publicaciones y podemos ver algunos códigos cortos devi. No hace falta que entiendas completamente esto, pero al menos puedes ver que nuestras tablas de base de datos y ahora ahí dentro. Si volvemos a aquí y todo está bien, deberíamos refrescar la página y el sitio web debería funcionar como se esperaba. Está apareciendo bastante bien, excepto que hay algo bastante obvio que no está funcionando. Es decir, en cualquier lugar donde tuviéramos estos iconos, están apareciendo si hubiéramos personajes o simplemente cajas. Honestamente, me sorprende que la mayor parte del sitio web haya pasado bien. Porque nos hemos perdido un paso importante que viene justo al final, y que es actualizar la URL de nuestro sitio. Básicamente, te lo mostraré ahora mismo. Si entramos en nuestra base de datos en nuestro hosting y entramos en Opciones, podemos ver aquí que la URL de nuestro sitio en nuestra casa sigue siendo localhost:8888. Pero esto ya no es relevante porque ahora estamos en este dominio. Lo que voy a hacer es que voy a copiar el dominio y voy a actualizar la base de datos. Voy a entrar aquí, presionar “Editar”, y cambiar eso a http//www.skillsharecourse.space. Yo copiaré eso. Entonces iré por aquí. Creo que solo puedo hacer doble clic en él. Ahí vamos. Presiona “Enter”, y eso lo cambiará. Creo que hay un campo más en esta base de datos, así que vas a cambiar avanzando. Podemos encontrar otro lugar donde tenemos nuestra URL local en. Simplemente reemplaza hasta sitio de WordPress con nuestra URL real. Podemos pasar por aún más filas, eso ya está actualizado también. Ahí se puede ver HTML público, así que eso ya es lo que necesita ser. Simplemente pasando por algunas filas más. He pasado por todas las filas y he actualizado o esas URL. Ahora cuando vuelva a refrescar la página, veamos qué pasa. Se está tardando un poco más en cargar, probablemente porque está cargando esos nuevos detalles. De repente tenemos los iconos apareciendo muy bien. En realidad estoy un poco sorprendido de que no rompiera los enlaces de imagen también. Pero sí, cambiar la URL de ese sitio es muy, muy importante. Recuerda, entra en opciones de WP después de migrar tu base de datos y cambiar la URL y la página de inicio de tu sitio. Vamos a comprobar si el resto de la página está funcionando bien. Sí, servicios. Al igual que construimos en nuestro propio hosting o en el nuestro propio localmente. Eso cubre más o menos el proceso de despliegue. Sólo para recapitular aquí, lo que hicimos fue tomar los archivos que tenemos localmente en nuestro directorio de proyectos. Los ponemos en nuestro hosting en una instalación en blanco. Después exportamos nuestra base de datos, creamos una nueva base de datos, importamos las tablas de esta antigua base de datos a nuestra base de datos en Internet, y luego actualizamos estos obsoletos citan URLs y homepages porque ellos estaban haciendo referencia al anfitrión local. Ese es básicamente el proceso por el que pasamos. Es ligeramente diferente si ya tienes un sitio web ahí, recuerda que estábamos empezando desde cero aquí. Este video va un poco largo, así que lo voy a dejar ahí por desplegar tu sitio web. Pero en el siguiente video, te voy a mostrar cómo migrar los cambios en los que has estado trabajando, ya sea localmente o en un servidor de ensayo a tu destino final. Si te interesa eso, mantente atentos para el siguiente video. De no ser así, puedes saltarte al video después de eso. Definitivamente quédate hasta el final. Hablaremos de proyectos de clase y hablaremos de cómo encontrar ayuda cuando estés luchando. Entonces no termines tu viaje con este curso ahí. Nuevamente, si quieres ver cómo migrar una vista a un lugar donde tienes un sitio existente, mantente atentos y te atraparé en el siguiente video. 18. Cómo migrar los cambios a un sitio activo: En el último video, tomamos nuestro sitio web alojado localmente, el de aquí mismo en nuestro host local:8888 y tomamos todos los archivos y la base de datos y lo pusimos en nuestro hosting en blanco. Pero claro, y si ya tenemos un sitio web aquí y queremos crear una nueva compilación para luego migrar eso a través. De eso se va a tratar este video. Actualmente, eso es exactamente lo que tenemos. Tenemos un sitio web existente en ahí. Imaginemos por un segundo que este es un sitio web que lleva un tiempo levantado. Ya hay tráfico en esta página web. Ya has estado enviando gente a ella y quieres asegurarte de que básicamente no eliminas este sitio web para subir tu nuevo. Lo que vas a hacer aquí es migrar el sitio a través. Ahora, hay servicios que gestionan esto para ti. Por ejemplo, si utilizas Managed WordPress, tendrían sistemas para este uno de los hosts que hace este Flywheel. Flywheel es un proveedor de hosting gestionado. Puedes configurar servidores de puesta en escena y estoy seguro de que esto es un poco más elegante que la solución que estamos haciendo. Pero con mi configuración, no tengo esa opción. Simplemente uso hosting básico y es una buena, para saber cómo hacerlo de todos modos. Básicamente, es un proceso similar al que teníamos antes. Sólo tenemos que ser un poco más cuidadosos. Lo que voy a hacer es que voy a entrar aquí. Voy a ir a File Manager, que ya tengo abierto y eso sólo va a refrescarse. En primer lugar, voy a respaldar mi sitio. Eso es lo más importante. Voy a entrar al HTML público. En realidad, voy a volver uno y voy a comprimir HTML público. No te preocupes, no afectará esta carpeta. Simplemente creará un archivo zip del mismo. Voy a crear un zip de mi HTML público, que es donde se sirve mi sitio web. Ten en cuenta, esto podría ser ligeramente diferente para ti en tu host usando este gestor de archivos, HTML público es donde se sirve mi sitio web. Ahora tengo mi versión antigua de mi sitio web y voy a descargar eso como un zip. Voy a entrar aquí y hacer doblar una copia de seguridad de sitio antiguo. En realidad, no lo haré en esa carpeta porque esa es la que voy a estar subiendo. Lo haré aquí afuera. Copia de seguridad de sitio antiguo. Puedes ponerlo básicamente donde quieras. Si querías hacer una copia de seguridad de la base de datos, te propongo que dejes la base de datos ahí, pero tal vez quieras respaldarla y luego eliminarla. Puedes exportar, ir a Personalizado y elegir Guardar salida en un archivo. Se puede echar un vistazo a esto. Puede agregar el campo crear base de datos si lo desea. Básicamente puedes dejarlo todo estándar. Eso no es problema. Lo que te va a dar es un archivo SQL, que es un volcado de lo que se llama volcado de tu, de tus de base de datos. Voy a volver a la copia de seguridad de código de sitio antiguo y voy a ahorrar. Aquí mismo, si voy un paso arriba, copia de seguridad de sitio antiguo, tengo un archivo zip de todos mis archivos de nuestro sitio web y tengo el volcado de base de datos aquí mismo. Lo que propongo que hagas es mantener tu antiguo sitio web, lo que significa que guardas los archivos y guardas la base de datos en el hosting si ya lo tienes, y por lo tanto lo tienes en dos lugares y simplemente lo mueves básicamente. En nuestro caso, esa base de datos es exactamente la misma. Pero si tuvieras un nombre de base de datos diferente, lo que haces es entrar en tu cPanel. Crearías una nueva base de datos que coincida con la base de datos que tienes localmente en tu servidor de preparación. Pondrías en nombre, pondrías en el nombre de usuario, y todos los detalles que tienes para tu existente. Si tienes que cambiar esto, tienes que cambiar esto. Básicamente, el proceso es prácticamente exactamente el mismo, excepto cuando llegas al escenario donde estás poniendo archivos en un HTML público. No quieres necesariamente borrarlos, sino ponerlos en otra carpeta y tampoco eliminar esta base de datos, sino que solo la tienes sentada ahí junto a otra. Tan sólo un descargo de responsabilidad antes de que nos movamos en este curso se trata de construir sitios de WordPress de la manera correcta. Técnicamente, lo que estamos a punto de hacer no es el camino correcto. No es la forma perfecta de hacer las cosas. Pero para poder hacer las cosas de una manera perfecta, requeriría mucha más configuración, mucha más configuración del servidor, mucho más de lo que podemos hacer con solo cPanel. Las agencias de WordPress para las que he trabajado en el pasado han tenido configurados servidores y hemos estado entrando en línea de comandos así, abriendo una herramienta de línea de comandos, entrando y conectándose a servidores vía SSH y haciéndolo de esa manera. Esa es técnicamente la forma correcta de hacerlo, es la forma más limpia de hacerlo. Pero con cPanel, la solución no es tan elegante y solo quería referirme a eso primero. Esta es probablemente la parte más baja y sucia del curso. Pero si necesitas hacerlo y solo estás usando cPanel, así es como lo haría yo. Eso es un poco de descargo de responsabilidad. Ahora, en realidad vamos a empezar a migrar, que va a ser lo mismo que desplegar como hicimos en el último video. Lo que va a implicar es que subamos nuestra nueva compilación en cuanto a los archivos y en cuanto a la base de datos. Entonces vamos a cambiar rápidamente con esperemos mínimo tiempo de inactividad posible y deberíamos ser todos dulces. Nuevamente, siguiendo el mismo proceso que teníamos antes, nuestra base de datos no ha cambiado, pero digamos que sí. Podemos tomar todo este código, Comando C para copiar. Lo que haremos es crear aquí una nueva base de datos. Porque esta es la segunda instalación, voy a llamar wordpress_2, o técnicamente SkillShareCourse_WordPress_2. Voy a dar click en Crear Base de Datos y creo que podré utilizar el mismo nombre de usuario. Lo que voy a hacer aquí es agregar ese usuario a nuestra nueva base de datos y luego dar clic en Agregar. Voy a otorgar todos los privilegios. Hacer cambios. Parece que se han hecho esos cambios. Volveré atrás y si me desplazo hasta las bases de datos actuales, tenemos las dos bases de datos ahí y el usuario privilegiado es el mismo para ambas. Voy a entrar aquí y voy a refrescarme para ver nuestra nueva base de datos, así puedo recargar la página aquí o allá. Tenemos SkillShare_WordPress_2 para una instalación fresca. Al igual que antes, podemos ejecutar la consulta SQL para importar todos los datos. Ahí voy a hacer Skillsharecourse_2. Eso es sólo un comentario. Realmente no importa. A mí sólo me gusta poner eso ahí. Voy a presionar go y va a importar todos esos datos a nuestro segundo sitio web. De nuevo, esto podría tardar un tiempo dependiendo tu velocidad de Internet y la velocidad de todas las herramientas. Simplemente se va a cargar un rato y entonces ojalá consigamos una garrapata verde. Ahí está esa garrapata verde. Si hacemos click en estructura, tenemos todas las tablas ahí y debería tener todos nuestros datos. Teóricamente, debería ser diferente a esta base de datos, pero es lo mismo en nuestro caso porque no hicimos ningún cambio. De acuerdo, entonces el siguiente paso que podemos hacer es subir los archivos, y lo que voy a hacer es lo mismo que antes, subir el sitio de WordPress share de habilidad, y lo voy a hacer fuera de HTML público porque no quiero afectan a esa foto todavía. Voy a dar click para subir un archivo. Voy a encontrar ese archivo zip, y voy a pausar el video y volver a unirme a ti una vez que este sea subido. Hemos golpeado al 100 por ciento y eso significa que ahora se cargan los archivos, y ahora viene la parte sucia. Básicamente, vamos a hacer un poco de baile para mover los archivos y la base de datos y esperemos que den como resultado un tiempo de inactividad lo más mínimo posible a nuestro sitio web. Yo sólo voy a refrescar la página y asegurarme de que aquí tenemos un sitio web en funcionamiento, y lo que voy a hacer aquí es sacar los viejos archivos del HTML público, y luego voy a descomprimir los nuevos archivos en HTML público, y lo hará trabajar de inmediato, ojalá para nosotros porque los detalles de la base de datos son los mismos, pero luego vamos a cambiar a la nueva base de datos, y eso completará la migración. Al parecer tenemos HTML público ya cerrado por aquí, si hiciste algún cambio desde que lo comprimiste, vas a querer volver a comprimirlo o simplemente copiar los archivos directamente sobre. Al parecer tenemos ese zip ahí y hemos descargado el zip a nuestra computadora también, realidad voy a eliminar todos estos archivos, y voy a volver atrás y luego hacerlo muy rápido porque tu sitio está actualmente vacío en el momento, por lo que serán tiempo de inactividad para cualquiera que lo vea. Rápidamente, descomprima esto, haciendo doble clic no se descomprime. Haga clic en “Extraer”, extraer en HTML público. Esperemos que esto no tome demasiado tiempo. De acuerdo, has extraído, pero claro, necesitas sacarlo. Vamos a trasladar eso al HTML público. Mueve los archivos, vuelve atrás, deshazte de esto, deshazte de eso haciendo clic en él, y luego, acabo de hacer clic en ver basura, entrando aquí y presionando borrar. Confirme, ahora actualicemos la página y veamos qué sucede. Tenemos un error ahora, error al establecer conexión a base de datos, que por supuesto es exactamente el mismo error que teníamos antes, la razón por la que tenemos este error es porque los detalles en el archivo de configuración WP están configurados para nuestra base de datos local, no nuestra nueva base de datos que está en la nube. Lo que podemos hacer es entrar en una nueva instalación. Baja a WP config, Edit, y podemos insertar esos nuevos detalles. Recuerden estos son los viejos detalles, los que están apareciendo aquí. Estos son los viejos detalles para los que tienes localmente. Voy a poner curso de Skill Share y luego subrayar dos para la nueva base de datos. Recuerda que usamos el mismo nombre de usuario y contraseña para ambas bases de datos para que solo podamos copiar a través de estas. Voy a guardar eso, archivo config ahora está actualizado. Voy a volver a aquí, refrescar la página, y ojalá todo sea dulce. Otra vez el mismo tema. Tenemos los iconos que están apareciendo correctamente. y asegurémonos de que nuestra URL sea correcta, y no va a ser obviamente, porque es la misma base de datos que teníamos originalmente, y puedes ver aquí todo lo demás es igual, el mismo proceso. Voy a ir aquí a poner eso, entrar , entrar aquí. Supongo que es bueno conseguir un refresco. Ahora si volvemos a la página, la refrescamos, y ahora tenemos un poco de sitio web roto, debe haber sido algo que acabamos de hacer, ahí vamos. Si vuelvo a entrar aquí, puedo ver que he hecho HTTP dos veces. Probablemente estés gritando en la cabeza viéndome cometer ese error, pero fácil de detectar, al menos después de haber cometido ese error. He cambiado esas filas, y luego refrescar esta página. Tenemos nuestra página web de vuelta y los iconos están de vuelta. Ojalá eso no fuera demasiada repetición ahí dentro. Las principales cosas a recordar cuando estás migrando a un lado en lugar de simplemente ponerlo en una cuenta de hosting en blanco, es que quieres mover tu antiguo sitio. En primer lugar, quieres respaldarlo y luego quieres mover tu antiguo sitio a otro lugar. mí me gusta mantener ahí mi base de datos a menos que realmente necesite eliminarla. más importante por supuesto, es siempre retroceder. Como dije, esta es una solución un poco sucia. Quieres asegurarte de que siempre estás haciendo copias de seguridad en caso de que algo salga mal, y como viste, hubo un tiempo de inactividad mínimo, pero hubo algún tiempo de inactividad ya que lo estábamos apuntando y arreglando cualquier error, pero esencialmente, así es como subirías desde un local, construirías en un destino existente con un lado en él ya. Lo único que no cubrimos, que es de nuevo, casi exactamente lo mismo, es pasar de un servidor de ensayo al nuevo servidor, y lo que recomiendo para eso es descargar la base de datos y los archivos de lo que sea que el servidor de puesta en escena es localmente, y luego subirlos a la nueva ubicación. Siempre lo guardas en el servidor de puesta en escena hasta que estés seguro de que está en el nuevo dominio y luego puedes eliminarlo del servidor de puesta en escena. De nuevo, si esto es complicado o si tienes alguna pregunta, definitivamente me pegó en la discusión. Solo quiero mencionar de nuevo, si estás trabajando para una agencia, probablemente tengan una solución más elegante que ésta, pero si estás haciendo trabajo con clientes y solo necesitas cambiar rápidamente un sitio web en el cliente , siempre y cuando realices una copia de seguridad y asegúrate de no eliminar ningún archivo, deberías ser bastante dulce. En la siguiente lección vamos a hablar cómo seguir aprendiendo con WordPress, porque en este corto curso no pudimos cubrir absolutamente todo, e incluso en un curso que duró 15 a 30 horas, probablemente no seríamos capaces de cubrir ni siquiera la mitad de lo que WordPress es capaz, y las personalizaciones que puedes hacer a WordPress. En realidad lo es, las posibilidades realmente son infinitas con WordPress porque es completamente de código abierto, y hay una comunidad de desarrolladores tan enorme, montón de plug-ins, un montón de herramientas que se conectan a WordPress. Vamos a hablar de cómo avanzar cuando estás atascado, y cómo aprender más sobre WordPress, usando este curso como base, luego saltar rana eso a aprender todo lo que necesitas saber sobre WordPress. Espero verlos en el siguiente video. 19. Cómo continuar tu aprendizaje: Entonces en este video, quiero compartir contigo cómo continuar tu aprendizaje en WordPress? Si recuerdas de mi clase anterior, “Entendiendo Desarrollo Web” tal vez me recuerdes hablando de desarrolladores web como Expert Googlers, básicamente expertos solucionadores de problemas. A menudo, hay un problema que quieres saber cómo resolver y es una buena habilidad como desarrollador, no tienes que saber realmente cómo resolver el problema de inmediato pero poder investigar una solución. Entonces en esta instancia, voy a hacer algunos ejemplos. Obviamente, Google es un gran recurso, pero quiero mostrarte porque muchas veces las soluciones que obtienes de Google dependen de la calidad de tu pregunta que pones en Google. Entonces como ejemplo, un tema común que tengo con Divi es cuando pongo el logo, sale un poco pequeño. Entonces voy a dar clic derecho en “Inspeccionar Elemento” y ver qué podemos hacer aquí, y veo aquí que hay una altura máxima fija. Por lo que no puede ser mayor al 54 por ciento de la altura de su div padre. Entonces lo que voy a hacer aquí es aumentar eso a 100, y ya verás ahora que el ancho máximo es un 100. El tamaño de imagen por defecto es 800 por 800. Por lo que está permitiendo ir al ancho completo de este encabezado. Idealmente, queremos algo de relleno aquí y no queremos que esté ocupando todo el ancho. Entonces lo que podemos intentar y hacer aquí es poner en una altura personalizada. Podemos empezar en un 100 y luego escalar hacia abajo hasta que podamos empezar a ver un cambio, y tal vez lo queremos sobre ese tamaño, 70 píxeles. Pero digamos por ejemplo, queríamos que la altura de esa imagen fuera un poco más grande, y para que eso sucediera, quizá podamos deshacernos de esta altura máxima aquí por completo. A lo mejor, queremos que sea como ese tamaño, pero obviamente, no queremos que se superponga y venga por encima del encabezado. Por lo que necesitamos aumentar el tamaño del encabezado Divi. Entonces si no sabes hacer esto, un gran lugar al que ir es directo a Google. Entonces, ¿lo que voy a hacer aquí es? Escriba una consulta, “Cómo aumentar el tamaño de encabezado en divi.” Ahora, es importante tener en cuenta cómo construí esa consulta porque este elemento de encabezado es personalizado por Divi y estoy usando el tema Divi, que está relacionado con los estilos, me aseguré de poner en Divi al final. Podría haber puesto en WordPress, pero el tema se sienta como otra capa encima de WordPress. Entonces fui con Divi y eso es algo que tienes que averiguar con el tiempo, ¿cuál es la palabra clave más relevante para poner ahí? Pero nuevamente, la calidad del término de búsqueda impactará en la calidad de la ayuda que obtendrás. Entonces puse un buen descriptor “Cómo aumentar el tamaño del encabezado”. A veces es mucho más difícil de describir, como lo que estás tratando de hacer y este instante bastante simple, pero a veces, podrías tener que probar diferentes variaciones de describir tu problema, y esa es en realidad la parte más frustrante a veces de ser desarrolladores, es describir algo que es un poco difícil de describir. Por suerte para nosotros, aumentar el tamaño del encabezado es bastante fácil, así que deconstruir el término de búsqueda, “Cómo aumentar el tamaño del encabezado”, así que estoy preguntando “¿Cómo aumentar el tamaño del encabezado? Entonces estoy poniendo la plataforma o cosa que busco para buscar aquí también, y verás cómo cambia eso cuando hagamos algunos otros términos de búsqueda. Entonces el primer artículo es el más relevante y podemos bajar y podemos ver, “Oh, aquí vamos”. Podemos agregar algo de CSS a Divi así. Entonces voy a copiar eso, y voy a iniciar sesión en mi sitio de Skillshare, y voy a ir a “Editor de Apariencias” y encontrar mi “hoja de estilo style.css”. Tenía que copiar y pegar las contraseñas, voy a copiar eso otra vez, desplácese hacia abajo, poner eso y “Actualizar archivo”. Ahora bien, podría que tengamos que cambiar un poco las alturas porque éstas son solo por defecto, por lo que en realidad no ha cambiado la altura a lo que queremos que sea. Pero si volvemos atrás e Inspeccionar Elemento, deberíamos poder cambiar ese estilo. Para explicarlo un poco, estamos usando una etiqueta de medios aquí que discutimos brevemente en la última clase de Skillshare. Una etiqueta de medios permite afectar estilos en solo ciertos anchos de pantalla. Entonces aquí, sólo estamos aplicando estos estilos, si el ancho de ventana de la página es mínimo, 981 pixel. Entonces en esta situación, es más grande que 981 píxeles como puedes ver aquí, si miras allá arriba, no puedo apuntarlo y hacer clic en “Arrastrar” al mismo tiempo, pero si miras en la esquina superior derecha de la ventana de ahí, ya puedes ver, me dirá cuál es el ancho de píxel. Entonces entrando, vamos a encontrar el encabezado. Entonces si miramos aquí, encabezados principales, qué está afectando. Entonces voy a dar click en esto. Voy a desplazarme hacia abajo y aplicé estilos para encontrar el estilo que ponemos. Como sucede a menudo, no está ahí. Entonces lo que voy a hacer es, voy a refrescar la caché para asegurarme de que estamos tirando de la versión más reciente del archivo style.css. Volviendo al encabezado principal, me voy a desplazar hacia abajo y puedo ver aquí nuestra consulta de medios. Por lo que su altura mínima, 150. No aplica en cuando entramos a la vista móvil lo cual sucede alrededor de 980, pero después de 980, se puede ver el encabezado ahora es de 150 píxeles. Entonces es solo cuestión de entrar aquí, tal vez estemos contentos con 150 píxeles. El segundo es cuando la cabeza se fija, cuando comienzas a desplazarte. Si ves, es en una talla y luego comienzas a desplazarte, es otro tamaño, así que podemos afectar tanto para esos pero lo que quería demostrar fue ahora que tenemos un encabezado más grande, podemos hacer esto un poco más grande y tal vez nosotros no lo quieren 100 por ciento, tal vez, lo queremos un poco más grande 75 por ciento. Hagámoslo 80, 90, y podemos poner algo de margen encima. Por cierto, necesitamos mover estos estilos a la hoja de estilos. Esto está jugando alrededor y entonces tal vez la parte superior del margen será de 15. Entonces, volveré a entrar aquí, y afectaré el logo. Pondré "#logo {margin top: 10px;}” y ¿cuál fue la otra cosa que cambiamos? El máximo de altura, 90 por ciento. Prensa Actualizar Archivo. También voy a reducir el tamaño del encabezado porque es solo un poco demasiado alto. Voy a entrar aquí y reducir eso a alrededor de ahí. Se puede ver con esta línea aquí donde está el encabezado. Creo que voy a ir con 100. Volveré aquí y haré 100 en vez de 150, y aquí haré 100 también. Actualiza el archivo, y luego actualizaremos aquí. Tenemos que borrar la caché y volver a cargar. Como puedes ver, tenemos un logotipo más grande por los estilos que hemos aplicado aquí, que están anulando estos estilos y tenemos un encabezado más grande. Probablemente podamos traer el encabezado un poco más también. A lo mejor a cerca de 85. Tan solo para detener eso ahora, haz clic en Actualizar archivo, actualiza. Es posible que tengas que golpear refresco, de nuevo. En realidad el encabezado es aproximadamente el mismo, así que en realidad no cambiamos mucho del encabezado, pero el punto que estoy haciendo sigue ahí. nos ocurrió una idea de lo que queríamos hacer, fuimos a Google, escribimos en un buen término, aquí mismo, luego pudimos cambiar la altura de un encabezado divi. Ahora, como dije con esa consulta, realmente hay dos partes en ella. Se está viniendo con una buena directiva de lo que necesitas saber y también poniendo en el contexto también. Fui inteligente en elegir el contexto de divi porque este es un elemento de estilo que por supuesto divi controlaría. Pero digamos por ejemplo, está relacionado con el comercio electrónico y si entro a mi tienda aquí, todo sigue en WordPress, pero el plug-in que está gestionando todo el e-commerce para mí es por supuesto, Woo Commerce. Si quisiera decir, tal vez quiero agregar algunas ventas arriba aquí, lo que haría es decir cómo agregar un upsell a un producto Woo Commerce. De nuevo, tengo como contexto a Woo Commerce y tengo la directiva. Si solo dijera cómo agregar un upsell a un producto, no es especificar si estoy en WordPress, qué plug-in estoy usando, podría estar usando cualquier plataforma de comercio electrónico. Siempre necesitas ponerlo en el contexto de la pregunta que estás haciendo. Yo sólo voy un paso atrás, el siguiente paso sería evaluar cuáles son los resultados que surgen. Este primero es de los propios Woo Commerce. Obviamente, si estás ejecutando un plug-in o cualquier tipo de software, el mejor lugar para buscar información es ahí documentación. Admitiré que la documentación para software suele escribirse de una manera realmente técnica que podría ser difícil de entender. Definitivamente dirígete a la documentación primero y si aún no entiendes, entonces puedes pasar a las entradas de blog que podrían explicarlo de una manera más fácil de entender o más amigable para principiantes. Como podemos ver aquí, aquí hay un artículo de cómo lo haríamos. El final que quiero mostrarles es algo realmente sencillo, pero va a mostrar la importancia del contexto. Como dije, con cambiar algo que ver con el estilo, estilo tiene que ver en gran medida con tu tema. En un tema premium como divi, si quisiera cambiar algo sobre el estilo de este tema, usaría el contexto como Divi, pero digamos que quería cambiar el tamaño de fuente y dije WordPress como contexto y no divi. Voy a cambiar el tamaño de fuente en WordPress. Ya puedes ver aquí, obtendrás un enlace muy común que verás en tu investigación de WordPress si estás haciendo empezar a escribir preguntas es WP beginner.com. Estos artículos de este sitio web son buenos para principiantes, pero a menudo tienen un enfoque muy simplificado. También te piden instalar plug-ins también. No sé si ganan dinero con eso, pero siempre están diciendo, si no sabes hacer las cosas, solo usa un plug-in. Te animan a descargar un plug-in para cada cosita que quieras hacer. A lo mejor querías cambiar el tamaño general de la fuente. Puede que te sientas tentado a instalar todo un plug-in para hacer esto. Como mencioné antes, tienes que tener cuidado con la instalación de demasiados plug-ins, sobre todo cuando puedes hacer las cosas más fáciles sin un plug-in. Evaluar siempre, ¿realmente necesitas un plug-in? Pero de nuevo, está relacionado con el contexto en el que hicimos la pregunta. No saben que estamos usando divi. Si escribimos cómo Cambiar tamaño de fuente y divi, podemos ver un artículo de Elegant Themes arriba aquí. Entonces si me desplaza hacia abajo, van a compartir contigo todas las diferentes opciones que tienes en el personalizador del tema para cambiar el ancho del contenido, el ancho de la barra lateral. También puedes cambiar la tipografía. Ya puedes ver puedo cambiar el tamaño del texto de cuerpo con estos diales. Vamos a entrar ahora mismo y sólo mostrarte eso en vivo. Puedo hacer clic en el nombre del sitio web y luego personalizador de temas. Se abrirá el personalizador de temas para mí. Puedo entrar en Ajustes generales, tipografía, y aquí vamos, puedo cambiar el tamaño del texto corporal de todo. Al igual que antes podemos cambiar la fuente del encabezado y la fuente del cuerpo. Probablemente ya sepas hacer esto porque ya lo cubrimos. Pero esencialmente, de nuevo, sólo estoy volviendo al punto de las preguntas de calidad en Google y en las cosas que estás usando para investigación y las soluciones de calidad saldrán. A veces va a ser un poco complicado y es posible que tengas que ir a algo como Stack Overflow. Déjame pensar en algo más complicado. A lo mejor usamos el ejemplo de cambiar la posición de la imagen destacada como lo hicimos antes. Escribiría en cómo mover imagen destacada en Wordpress. Entonces tienes cómo agregar imágenes destacadas, eso no es lo que buscamos. Podemos seguir desplazándonos hacia abajo y echar un vistazo a algunos de estos enlaces. Empezarás a ver estas discusiones del foro a veces. Como puedes ver aquí, hay un enlace Stack Exchange, Stack Exchange y Stack Overflow foros donde puedes hablar y obtener ayuda sobre tus problemas de la comunidad en WordPress. Pero también es un gran lugar para echar un vistazo a los problemas de otras personas y comprobar las soluciones también. Puedes ver aquí, puede que no sea exactamente lo que buscas, pero puedes a través de tu investigación, mirar estos diferentes problemas y soluciones de Stack Overflow, Stack Exchange y te puede ayudar a formar tus propios solución. Esto va en el extremo más complicado, si tienes una pregunta realmente simple, como mostré antes, cómo aumentar el tamaño de encabezado y pie de página como tamaño de encabezado en divi y cómo aumentar el tamaño de fuente. Podría obtener una respuesta realmente fácil. En ocasiones, cuando quieres cambiar algo un poco más complicado, es cuando es posible que tengas que cavar en estas diferentes preguntas de Desbordamiento de Stack. Estos son todos más escritos por los desarrolladores. Van a ser más soluciones de código y es un equilibrio, al final del día. De eso se trata todo este curso. Utilizamos un constructor de páginas y una solución que no sea de código para hacer muchas de las cosas para las que realmente no necesitamos indagar en el código. Entonces cuando necesitamos ser ese desarrollador, cuando necesitamos indagar en el código, podemos hacerlo también. A veces solo necesitas cambiar el tamaño del encabezado y solo requiere un poco de CSS o el tamaño de fuente. Simplemente puedes hacer eso en opciones, con click y drag. A veces va a requerir algunos cambios en el nivel de código PHP o cambios en CSS.. Esperemos que eso te ayude con tu investigación en curso para aprender más sobre WordPress. Recuerda, preguntas de calidad en, da como resultado preguntas de calidad fuera y no olvides el contexto. Si necesitas ayuda para averiguar cómo investigar problemas en Google o en la documentación de cualquiera del software que estás usando ya sea WordPress o un plug-in o tema en particular dentro de WordPress, definitivamente deja tu preguntas en la discusión a continuación. Te veré en el siguiente video. 20. Extra: sitios de membresía: Esta es una lección extra para cualquiera que esté interesado en construir un sitio de membresía, ya sea ahora o en el futuro. Si quieres saltarte adelante, vamos a terminar el curso en el siguiente video y entregarte el proyecto de clase. Pero si te interesan los sitios de membresía en absoluto, mantente atentos porque solo voy a mostrarte mi propio sitio de membresía, y lo fácil que es configurarlo en caso de que quieras configurar tu propio sitio de membresía o hacer eso para un cliente. El sitio de membresía que tengo está en un subdominio de uno de mis sitios web, christhefreelancer. Como puedes ver, si vas ahí, dice que debes iniciar sesión para ver este contenido. Eso lo voy a hacer ahora. Ahora, soy administrador de WordPress, así que cuando inicie sesión, voy a tener acceso completo para editar el sitio web. Entraré a WP admin, y ya verás aquí tengo todos los mismos privilegios de acceso. Pero para una persona que solo es usuario de este sitio de membresía, tendrán la misma barra de menús, pero no tendrán la opción de editar la página. No tendrán esta plantilla show current. No podrán crear nuevos posts. Será sólo una barra de administración de WordPress desnuda aquí arriba. Entonces, una vez que entren aquí, tendrán la capacidad de cambiar su configuración de usuario, pero no cambiar nada sobre el sitio web. Este es solo un pequeño sitio de membresía que configuré como videoguía de Chiang Mai, Tailandia, que es algo que tengo un público que está interesado en eso. Lo que he hecho es que acabo de incrustar videos de Vimeo. Aquí mismo, este botón de edición podría aparecer a personas que no son administradoras, pero, básicamente, tiene páginas diferentes. Si miramos aquí, ahí está la dirección de la página y todo está restringido. Qué puedo hacer para demostrar que es abrir una pestaña de incógnito la cual se asegurará de que esté cerrado sesión. Yo puedo poner en ese enlace, y como pueden ver, está totalmente restringido. Está diciendo que debes iniciar sesión. Si no eres miembro, haz click para inscribirte aquí. Ahí es donde se llega a la página de ventas. Esencialmente, puede convertir su sitio de WordPress en un sitio de membresía fácilmente mediante el uso de un plugin. Puede hacer esto probablemente sin un plugin. Pero honestamente, un plugin simplemente lo hace mucho más fácil, sobre todo cuando quieres aceptar pagos. Con este sitio de membresía, si alguien viene a la página de ventas, puede comprar el curso de inmediato, y no tengo que enviarles los detalles de la membresía ni nada. Literalmente solo van a PayPal, pagan el dinero, vuelve, y se les concede acceso y obtienen sus datos de inicio de sesión. Totalmente automatizado, y totalmente vale la pena si quieres un sitio de membresía. En mi situación particular, el plugin que uso se llama Restringir contenido Pro. Lo que hace es que agrega en un menú Restringir aquí. lo que puedo hacer es entrar y ver aquí mi lista de miembros. Puedo entrar y editar diferentes miembros. Puedo elegir su nivel de suscripción, que es algo que configuraste en otro lugar. Ahí hay una bitácora. Puedo ver el pago y lo que pagaron, la clave de suscripción para PayPal. En el segundo menú es donde puedo configurar los niveles de suscripción. Por lo que se puede dictar a qué páginas se puede acceder por qué niveles de suscriptor. Después, cuando inscribes usuarios, determinas en qué nivel de suscripción se encuentran. En el lado de la página de esto, lo que podemos ver es que podemos ir a una página. Entrémonos en consejos para aprender tailandés. Como ves aquí, es solo un editor estándar de WordPress. Esto es exactamente lo mismo que como harías una página para un sitio de no membresía. Lo que he hecho es que he construido las páginas completamente usando HTML, porque esto está construido sobre un tema personalizado. Esencialmente, si estuviera haciendo esto de nuevo, lo estaría construyendo con un constructor de páginas muy probablemente. Por lo que no tengo que codificar cada página desde cero. Eso es sólo una lección que he aprendido, es mucho más eficiente construir sitios web con el constructor de páginas. Pero me digregué aquí. Lo que quería mostrarles es bajar aquí a esta sección, que es agregada por Restringir contenido Pro, y dice Restringir este contenido. Puedo elegir quién puede acceder a este contenido. “ Todos” lo harán público. Entonces también puedo definir nivel de acceso, lo que me permitirá establecer niveles, hasta diez o más. Simplemente da un número y facilita que si el número es mayor que el nivel de acceso que tienes, entonces puedes acceder a él. También puedes basarlo en roles de usuario dentro de WordPress. Pero encontré que la forma más fácil es solo crear un nivel de suscripción y luego asignarlo a los miembros de un nivel de suscripción específico. Entonces, obviamente, cuando entro a mi configuración aquí para Restringir contenido Pro, creo que en Ajustes, puedo elegir a dónde va realmente el dinero. El divisa, puedo entrar a niveles de suscripción aquí y elegir cuánto cuesta una suscripción, y puedo ver cuántas personas se han suscrito a ese nivel de suscripción. Me da todas estas opciones. No tengo que codificar nada aparte de si quiero codificar las páginas. Esa es mi solución a los sitios de membresía. Simplemente se cubre eso en una base más teórica para ti. Es posible que desee utilizar un plugin de membresía diferente. Básicamente, solo puedes construir un sitio web como lo harías normalmente en WordPress. Pero entonces la diferencia entre un sitio de membresía y un sitio público regular es, obviamente, que las páginas están restringidas a los miembros. Ahí es cuando puedes enchufar un plugin de membresía y puedes restringir el contenido en función del estatus de membresía de las personas. Con WordPress, es por defecto que WordPress tiene la capacidad de tener usuarios y usuarios sean capaces de iniciar sesión. Pero al tener un plugin, te permite administrar fácilmente qué páginas son viables a qué niveles de suscripción, luego también aceptar pagos en el front-end. Solo quería cubrir un poco sobre los sitios de membresía por si acaso ibas a publicar un sitio de membresía. que es algo en lo que he tenido un poco de experiencia, pensé que compartiría mi experiencia con ustedes chicos. Gracias por ver esta pequeña lección de bonificación. En el siguiente video, vamos a terminar y darte tu proyecto de clase. Te veré en el siguiente video. 21. Recapitulación y proyecto de clase: Está bien, es hora de terminar este curso y empezar a trabajar con su proyecto de clase. A estas alturas deberías entender cómo funciona WordPress y tener una buena idea de cómo construir un sitio web de WordPress desde la perspectiva de un desarrollador. Idealmente, ahora deberías tener una comprensión de WordPress y lo que hace, Divi como tema y constructor de páginas para WordPress, cómo agregar contenido a tu sitio web, cómo construir páginas, la jerarquía de plantillas de WordPress, cómo personalizar tu código tanto a nivel de Page Builder como en el back-end, plugins, y cómo implementar y migrar tu sitio WordPress. Obviamente hay una tonelada de detalles más en los que podríamos meternos en este curso. Pero ten en cuenta que lo esencial son lo que debes entender para desarrollar sitios web de WordPress como freelancer o agencia. Como mencioné en mi clase anterior, deberías poder investigar soluciones cuando estés atascado, y ahora a través de tu entendimiento básico de desarrollar para WordPress, deberías poder entender por dónde empezar tu investigación cuando necesitas construir algo que no estaba exactamente cubierto en este curso. En nuestro proyecto de clase, es hora de juntar todos estos nuevos conocimientos para construir y publicar un sitio de WordPress a Internet. Tu proyecto de clase seguirá una secuencia muy similar a lo que ya hemos hecho en esta clase, es solo que ahora depende de ti. Como siempre, si sí necesitas alguna ayuda extra, solo déjame un comentario en el cuadro de discusión y también asegúrate de seguir mi página aquí en Skillshare para ponerte al día cuando libere una nueva clase. Muy bien chicos, eso concluye el curso, quiero agradecerles tanto por ver y espero ver sus proyectos terminados de clase. Suertes, y nos vemos en la sección de discusión.