Academia de WordPress: Aprende WordPress paso a paso

1. Te damos la bienvenida a la clase.: WordPress potencia un enorme porcentaje de sitios web disponibles en la actualidad. Casi seguro que has visitado un sitio web que se ejecuta en WordPress. Algunos de los nombres y marcas más grandes de WordPress de confianza incluyendo Disney, PlayStation, MTV, Microsoft, Sony, y tantos más. La buena noticia es que es fácil para los principiantes empezar y no necesitas conocer ninguna codificación para construir sitios web increíbles. Durante este curso, te guiaré a través del proceso de construcción de múltiples sitios web de WordPress. Incluyendo una página de aterrizaje del festival de música, un blog, y también un sitio de comercio electrónico. Una vez que esté familiarizado con WordPress de estos proyectos, entonces damos un paso más a las cosas e introducimos algún código convirtiendo un sitio web normal en un tema de WordPress totalmente personalizado. Antes de redondear las cosas echando un vistazo a cómo podemos configurar una instalación multisitio de WordPress. ¿Quién soy yo? Mi nombre es Chris y soy desarrollador web del Reino Unido. Para mí WordPress me ha permitido crear un montón de sitios increíbles para clientes o negocios o uso personal desde una sola página de aterrizaje justo a través de un sitio de comercio electrónico complejo. Esto hace al proporcionar un núcleo flexible y luego posar como usuario y extenderlo con una enorme selección de plug-ins, amplió la funcionalidad. Vamos a saltar a aprender WordPress juntos construyendo algún proyecto divertido y educativo. Te veré en la primera lección. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección. Revisa el código que escribes y piensa en cómo podrías abordar estas soluciones tú mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase, e incluso puedes dar un paso atrás después de haber terminado la clase, y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. También recuerda compartir tu proyecto también aquí en Skillshare. No sólo voy a comprobarlo, sino que también inspirará a los compañeros de estudios también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña Proyecto y Recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 3. ¿Por qué WordPress?: WordPress originalmente comenzó su vida como una plataforma de blogueo y ahora se ha convertido en el sistema de gestión de contenido más popular disponible hoy en día, que también potencia algunos de los sitios web más populares del mundo. WordPress es completamente gratuito de usar, de descarga gratuita, y también está construido por cientos de voluntarios comunitarios junto con todas las grandes características que ofrece WordPress. Nos enteraremos de estos durante el curso. Una de las cosas que me encanta de WordPress es que tiene algo para todos. Si eres una persona no técnica o principiante, puedes comprar alguna web hosting simple, usar una instalación de un solo clic, seleccionar tu tema y tienes tu propio sitio web o blog en menos de media hora. Para diseñadores web o desarrolladores o personas en general que quieran saltar un poco más profundo, también hay muchas cosas grandiosas que puedes hacer técnicamente para hacer un sitio web realmente poderoso. Puedes llamar a tus propios temas y también a plugins para que WordPress se vea y funcione exactamente como quieres que sea. WordPress también está bajo constante desarrollo también, está siempre mejorando, ya sea que ese sea un arreglo de seguridad o una nueva característica para evitar que WordPress se vuelva anticuado. También los creadores de WordPress han hecho que estas actualizaciones sean realmente fáciles de aplicar también. No necesitas preocuparte por las complicadas actualizaciones e instalaciones. Estas actualizaciones generalmente se realizan desde el panel de WordPress y a menudo sólo implican el clic de un botón. Como también puedes ver en la página de inicio de WordPress que es wordpress.org, también hay muchos temas diferentes que puedes elegir. Si entramos en la sección temática podemos ver que hay más de 7 mil temas diferentes están presentes. Estos nos permitirán construir casi cualquier tipo de sitio web que queremos crear. Cuando realmente creamos un sitio web de WordPress, todo el contenido permanece exactamente igual, y luego podemos cambiar entre diferentes temas para darle a nuestro contenido o a nuestro sitio un aspecto y tacto completamente diferentes. En el primer set de WordPress se preinstalarán algunos de los temas, o podemos buscar a través de cualquiera de estos temas desde wordpress.org. Se trata de temas gratuitos para configurar nuestros proyectos. par de estos temas gratuitos también hay temas premium disponibles, que también puedes comprar en sitios web como ThemeForest, pero veremos esto con más detalle a medida que avanzamos por el curso. El núcleo de WordPress que vamos a descargar es realmente simple pero muy potente, y también lleno de muchas características. No obstante, si falta alguna funcionalidad que su aplicación o sitio web necesita, entonces es más que probable que esta funcionalidad esté disponible como plugin. plugins son más o menos lo que suenan. Son algo que puedes descargar para plugin y extender el núcleo de WordPress. Agregan funcionalidad y características que suelen ser fáciles de instalar como hacer clic en algunos botones, pero nuevamente echaremos un vistazo a los plugins con más detalle más adelante en el curso. Algunos de los otros beneficios de WordPress son que es realmente amigable para motores de búsqueda. Al usar WordPress, muchas mejores prácticas de SEO ya están cuidadas para nosotros detrás de bambalinas. Si quieres llevarlo aún más allá también hay algunos plugins geniales también, que bien echen un vistazo en el video de plugins. Por último, WordPress cuenta con una aplicación móvil realmente útil para iOS y Android que es de descarga gratuita. El app te permite escribir contenidos de WordPress y también actualizar tu sitio web en movimiento. Incluso puede subir fotos, administrar publicaciones de blog, administrar todos los comentarios, y también editar páginas a medida que avanzas. Estas son algunas grandes razones para elegir WordPress. Por supuesto, hay muchos más y estoy seguro que encontrarás tus propias razones para usar WordPress a medida que avanzas por este curso. 4. ¿WordPress.org o WordPress.com?: Empecemos con WordPress.org, que es la página principal del popular software de WordPress de código abierto. código abierto significa que cualquiera puede usar esto o contribuir a ello de forma gratuita. Este es el sitio para el software oficial de WordPress, que vamos a estar utilizando para crear nuestro proyecto a través de este curso. Nosotros lo descargamos, podemos personalizarlo y subirlo a un servidor en vivo cuando esté completo. Básicamente nos da la flexibilidad total ya que es completamente auto alojado, y también costos de hosting para WordPress un relativamente barato cuando comenzó por primera vez. En la navegación superior de esta página, puedes ver aquí que tenemos los plugins y temas disponibles que luego podemos usar. Haremos uso de ambos a lo largo de este curso. También hay una sección de soporte donde podemos tener acceso completo a la documentación de WordPress, que vamos a referirnos con bastante frecuencia, y por supuesto, todo lo que necesitamos desde instalar temas, hasta temas de seguridad. El software real está disponible al hacer clic en este botón get WordPress, y esta es una de las opciones de configuración a las que vamos a echar un vistazo muy pronto. Descargar este software como se mencionó nos dará la total flexibilidad y control sobre todo lo que vamos a hacer con nuestro sitio de WordPress, o hay una alternativa la cual está disponible en WordPress.com. Wordpress.com es más un servicio que nos permitirá tener un sitio de WordPress, publicado fotos. Utiliza el mismo software de WordPress que acabamos de ver, quita esta configuración y proporciona hosting para este software. Este sitio fue creado por uno de los fundadores de WordPress. Para la facilidad de configuración sí viene con un costo. No tenemos la flexibilidad que tenemos a la hora de autohospedar. Bajo también por restricciones sobre qué temas plugins podemos usar, dependiendo exactamente qué plan de pago que utilices. Con esto en mente, si hacemos clic en un Planes y Precios desde la navegación, hay varios niveles de precios diferentes junto con una opción gratuita, cual podemos ver en la parte superior, es 3ca próxima opción al empezar. Pero también coloca banners publicitarios en tu sitio, que probablemente no quieras. Después tenemos opciones desde un lado personal justo hasta una tienda de comercio electrónico. Podemos ver estas opciones con más detalle, si nos desplazamos hacia abajo hasta esta tabla. Por lo que mencioné, hay algunas restricciones, como se puede ver aquí al usar WordPress.com, y estas restricciones se levantan a medida que pasamos por opciones de precios más altas. WordPress.org es el que hay que buscar si queremos un control total sobre nuestro sitio, y estamos contentos de hacer un poco de trabajo de configuración. Vamos a estar eligiendo este camino a través de este curso, o este sitio que es WordPress.com es una buena opción si quieres que todo se cuide por ti. Pero recuerda que hay restricciones a menos que vayas por los planes más caros. 5. Dónde encontrar temas de WordPress: Este curso no requiere ninguna compra para un tema ni ningún software adicional. Aunque en algún momento del futuro, es posible que estés usando WordPress para construir lotes y montones de sitios, ya sea para un trabajo, o para clientes de pago, o para negocios. Para este caso de uso, es posible que también desee mirar algunas opciones de tema premium. Una de las opciones para esto es themeforest.net. Este es un mercado no sólo para temas de WordPress, sino también dinero de un código, fragmentos, fotos, y también videos. Nos vamos a estar centrando en los temas de WordPress a los que podemos ir desde esta pestaña. Desde aquí, podemos echar un vistazo a todas las diferentes categorías, también podemos buscar usando la barra de búsqueda arriba en la parte superior y generalmente hay temas disponibles para casi cualquier tipo de sitio de WordPress que quieras crear. Por ejemplo, si queremos crear un sitio web de bodas, podemos hacer una búsqueda, y la búsqueda de bodas devuelve más de mil temas diferentes para elegir. Como mencioné, en su mayoría es contenido pagado en este sitio, pero este precio también a menudo incluye soporte también. También es mucha gente y empresas que se ganan la vida a tiempo completo, creando temas y vendiéndolos en mercados así como esto. Si volvemos a los artículos populares, podemos ver algunos de los temas populares como el tema de Avada, este es actualmente uno de los temas más populares y tiene cientos de miles de ventas. Podemos echar un vistazo a la vista previa en vivo y ver exactamente cómo se verá este tema con varios diseños, podemos desplazarnos por cualquiera de estos temas y echar un vistazo a todas las características que viene con él y en general, muchas de estos temas tienen un montón de opciones diferentes para diseños o cambiar el color y también son muy flexibles también por lo que podemos usarlo para páginas de productos como sitios de comercio electrónico, podemos usarlo para blogs y también sitios personales. Junto a ver cómo se verá y sentirá nuestra página web con un tema en particular, también es muy importante consultar toda la información que se detalla a continuación. Queremos asegurarnos de que nuestro tema se actualice regularmente, queremos asegurarnos de que tenga buenas críticas y también sea composible con nuestra versión de WordPress. hora de elegir un tema, no se trata solo de cómo se ve, también se trata de las características y las cosas que podemos hacer con él también. Una de las buenas indicaciones de las características son las etiquetas que está abajo en la parte inferior. Estas etiquetas a menudo reflejarán exactamente qué características se incluye con un tema, como el número de opciones de diseño, si va a tener un diseño de dos columnas, si va a tener un diseño de tres columnas, si es compatible con WooCommerce para tiendas de comercio electrónico, si está lista la traducción y también qué personalizaciones están disponibles para este tema en particular. También podemos ver exactamente con qué navegadores es compatible este y también qué versiones de plug-ins de WordPress también son compatibles con este tema. Este en particular también está listo el widget, lo que significa que podemos habilitar widgets que son piezas autónomas de contenido que podemos colocar en nuestro sitio, así como todos los temas de pago que están disponibles en el sitio. Como miramos antes, el sitio web oficial wordpress.org también tiene una opción de temas en la parte superior. También hay temas pagados de esta sección comercial pero sólo vamos a estar centrándonos en los tres temas que aquí hemos enumerado. Podemos descargar cualquiera de estos temas desde el panel de WordPress y lo vamos a hacer cuando configuremos nuestro primer proyecto. Al igual que los temas que acabamos de ver, vamos a poder dar click en cualquiera de estos temas, podemos echar un vistazo a una vista previa y esto nos dará una idea de cómo se verá nuestro tema con algún contenido de blog. Nuevamente, también vale la pena echar un vistazo a toda la información adicional como la última vez que se actualizó, las revisiones y valoraciones, y también las etiquetas también. Podemos ver que esta esta esta lista de accesibilidad, tiene varias personalizaciones como el fondo, los colores, el logo, el encabezado, y también el menú. Es compatible con comercio electrónico, su traducción lista, y también tiene diversos diseños como una columna de una y también un diseño de dos columnas. Estas son cosas realmente importantes a considerar para tu sitio pero no te preocupes aún por seleccionar temas con todas estas opciones de etiqueta porque vamos a descubrir exactamente cuáles son la mayoría de estas a medida que avanzamos por el curso. Tener todos estos temas disponibles para WordPress nos permite desemparejar el contenido que tenemos en nuestros sitios con el look and feel. Aunque tengamos un blog al que llamamos cientos y miles de entradas de blog, al final de la línea también podemos cambiar por completo el aspecto y la sensación simplemente cambiando el tema. Este tema no afectará el contenido original y aún tenemos toda esta información aún disponible y la mayoría de estos temas son generalmente personalizables desde el panel de WordPress además de descargar temas como este. También podemos crear nuestros propios temas personalizados, podemos usar estos temas para uso personal, para un cliente que paga, o también podríamos subirlos de nuevo a la tienda temática. Al igual que con todo, si haces una búsqueda en línea, habrá cientos o incluso miles de opciones entre las que podrás elegir pero por ahora sin embargo, vamos a volver a nuestros temas y echar un vistazo a cómo podemos agregar estos a nuestros sitios. En primer lugar, necesitamos echar un vistazo a cómo instalar WordPress. 6. El servidor web de WordPress: Si construiste un sitio web en el pasado usando HTML y CSS, estarás acostumbrado a escribir esto en un archivo HTML, abriendo este archivo en el navegador, y todo simplemente funciona. Bueno, esto es un poco diferente cuando se usa WordPress porque WordPress necesita un servidor web para correr. ¿Por qué es esto? Bueno, esto se debe a que WordPress se escribe en un lenguaje de programación llamado PHP. PHP solo se ejecutará en el servidor, no funciona dentro del navegador. Para WordPress, no necesitas entender ningún curso de PHP. Una buena comprensión de PHP se está ejecutando en el servidor, es clave para entender cómo funciona WordPress. Si consideras un sitio como Facebook o Twitter, o generalmente cualquier sitio de blog, aplicación de chat, o incluso red social, todos tienen el mismo aspecto para cada usuario, pero los detalles en la página son diferentes. Tal como el nombre de usuario que cambiará a tus amigos o conexiones personales, tus entradas de blog, y así sucesivamente. Podemos pensar en cosas como Facebook y Twitter como una plantilla y cualquier detalle se inyecta cuando sea necesario, y todo esto basado en el usuario que ha iniciado sesión. Este es un ejemplo de lo que hace PHP, puede generar una página web que cambie los detalles particulares para cada usuario o cada página. Este es un ejemplo de lo que se llama página web dinámica. Está en un servidor web, donde se generan estas páginas. En el servidor, tendrá la plantilla o la configuración básica. Después colocará en todos los detalles que saca a la base de datos, como un usuario, o las entradas de blog que acabamos de mencionar antes. No necesitas entender completamente todo esto por el momento, pero solo ten en cuenta que esta es la razón por la que necesitamos un servidor web para ejecutar WordPress, lugar de simplemente abrirlo dentro del navegador como podemos hacer con una página HTML normal. Desafortunadamente, podemos configurar un servidor web en nuestra propia computadora para ejecutar esto. Además, WordPress necesita también una base de datos, que se utiliza para almacenar todas las páginas, las publicaciones del blog, las imágenes, y toda la información que necesita. Es este servidor web el cual también hablaremos la base de datos y agarraremos toda esta información para nosotros. Esto ahora nos deja con algunas opciones. Si ya has comprado algún alojamiento web en el pasado, que puede ejecutar WordPress, puedes, por supuesto, usar eso para este curso. ¿ Vamos a correr por algunas de las llamadas opciones locales, que es la capacidad de configurar un servidor web localmente en nuestro propio equipo? Habrá un par de opciones diferentes, así que asegúrate de solo usar una, y te recomendaría el siguiente video si vas a asegurar. Con esto como fondo, ahora vamos a correr a través de cómo configurar un WordPress en este próximo video. 7. Opción1: Instalación en local (recomendada): Ahora entendemos que WordPress necesita un servidor web para ejecutarse realmente. En este video y también en el siguiente, vamos a ver algunas opciones para empezar a crear un servidor web en nuestra propia computadora. Este video se va a enfocar en un servicio llamado Local by Flywheel el cual nos permitirá crear un servidor web en nuestra propia computadora, y luego podremos crear nuestros sitios web de WordPress. Solo necesitas seguir este video o el siguiente video, y el siguiente video se enfocará en una solución alternativa llamada MAMP. Te recomendaría que sigas junto con este video en vez de y el siguiente. Para empezar, vamos a dirigirnos a localwp.com. Desde aquí vamos a dar clic en el botón de descarga, donde podemos descargar tanto para Mac, Windows como para Linux. También hay una versión de pago para equipos y agencias, pero solo necesitamos la edición comunitaria gratuita. Flywheel nos va a permitir evaluar rápidamente los proyectos de WordPress en nuestra propia computadora, que va a ser realmente sencillo y cuidar toda la configuración, el servidor, y también la base de datos para nosotros. Local tiene un montón de características geniales. Podemos ver nuestro sitio y sección de administración con click de un botón. Podemos generar un enlace en vivo para ver nuestro proyecto en cualquier lugar y también compartirlo con otros también, junto con características mucho más avanzadas como la capacidad de configurar WordPress multi-site y mucho más. Elige tu plataforma en particular, descarga y luego pasa por los pasos de instalación. Una vez que Local está completamente instalado y configurado, estás llevado a una pantalla que se ve así. Aquí es donde podemos agregar y también administrar nuestros sitios de Wordpress. Ya tengo algunos sitios configurados justo aquí si esta es tu primera vez, no verás ninguno en la barra lateral. Para agregar en nuevo proyecto necesitamos dar click en este botón verde en la esquina izquierda y luego darle un nombre a nuestro sitio. Voy a dar este título de Festival, y por ahora no necesitamos ninguna de estas opciones avanzadas. Continuar, me voy a quedar con el entorno predeterminado preferido. Entonces necesitamos agregar un nombre de usuario, una contraseña, y un correo electrónico. El nombre de usuario, vamos por el festival_admin, y estos van a ser los detalles necesitamos para iniciar sesión en el back-end de nuestro sitio de WordPress. Echaremos un vistazo a esto en tan solo un momento. El password, asegúrate de cambiar tu email si es necesario. Haga clic en Agregar Sitios. Si vas a usar un Mac es posible que también necesites agregar la contraseña de administrador. Bueno, una vez hecho esto nuestro sitio se inicia automáticamente. Podemos ver esto porque tenemos la opción de detener nuestro sitio en la esquina. Si el tuyo es verde y dice inicio sitio, tendrás que hacer click en esto para arrancar el servidor. Podemos ver todos los números de versión para nuestros servidores, para PHP y también la base de datos que estamos usando también. No necesitamos cambiar ninguna de esta información, pero está todo ahí si necesitamos esto en el futuro. Una de las grandes cosas de usar Local es este enlace en vivo hacia abajo en la parte inferior. Podemos dar click en Habilitar, y esto nos dará una URL en vivo la cual podremos compartir con otros también. Esto significa que podríamos compartir nuestro trabajo con colegas, con amigos o familiares, y también es útil para obtener comentarios en nuestro sitio para dirigir a otras personas. Pasaremos la mayor parte del tiempo durante este proyecto en estas dos secciones arriba en la parte superior. Contamos con una sección de administración que nos vinculará al back-end de nuestro sitio. Para iniciar sesión necesitamos agregar en detalles los cuales agregamos a Local justo antes. Mi nombre de usuario fue el administrador del festival y la contraseña. Haga clic en Iniciar sesión y esto luego nos redirigirá al panel de WordPress. El panel de WordPress es como el centro de control de nuestros sitios donde podemos agregar nuevas características, podemos actualizarlo, podemos cambiar temas, y echaremos un vistazo a esto en tan solo un segundo. El otro botón es abrir nuestro sitio, y este es nuestro sitio web actual de WordPress. Si el tuyo se ve un poco diferente a esto no te preocupes, el tema predeterminado sí cambia de vez en cuando. Esto ahora nos dará nuestro back-end o front-end usando estos dos términos. Si queremos cambiar entre estos manualmente, si estamos en el sitio así como esto, podemos pasar el cursor sobre el título del sitio y luego pasar al panel de control. Cuando dentro del tablero podemos hacer lo contrario y luego volver a visitar nuestro sitio. panel de control echaremos un vistazo más de cerca a todas estas opciones en el siguiente video. Porque es desde aquí donde podemos actualizar nuestros sitios si tenemos algún tema y plug-ins o incluso la llamada de WordPress. En caso de que se disponga de alguna actualización, se nos notificará desde esta vista. Podemos gestionar y actualizar nuestros puestos. Podemos subir diferentes activos y medios como imágenes, videos y audio. Podemos trabajar con nuestras páginas. Podemos editarlos, podemos añadir nuevos, podemos gestionar cualquier comentario en nuestras entradas de blog. Se cuenta con una sección de apariencia donde podemos personalizar el aspecto y la sensación de nuestro sitio. Podemos subir diferentes temas. Podemos cambiar menús, imágenes de fondo, y mucho más. Hablamos brevemente de plug-ins desde el principio y es desde esta sección donde podemos administrar nuestros plug-ins o agregar otros nuevos también. Por ejemplo, si quisiéramos agregar correo electrónico a nuestro sitio, esta es la sección de plugins donde podríamos agregar esto. Podemos gestionar a nuestros usuarios, como ver quién está inscrito. Podemos cambiar las preferencias. Podemos actualizar perfiles y permisos y mucho más. Contamos con una sección de herramientas donde podemos hacer cosas como importar y exportar datos. También contamos con una sección de configuración donde podrás afinar todas las opciones para nuestro sitio. Para todos estos proyectos de este curso, pasaremos mucho más tiempo en este back-end. A partir del siguiente video echaremos un vistazo más profundo a todas estas opciones. 8. Opción 2: Instalación con MAMP: Este es un video de opción para configurar WordPress usando un servicio llamado MAMP. Si instalaste con éxito WordPress en el último video usando local, puedes saltarte este video. No obstante, si usas mes antes o solo quieres probar algo diferente puedes seguir junto con este video y configuración usando MAMP. Empecemos dirigiéndonos a mamp.info. Esto también va a crear un servidor de desarrollo local gratuito y también cuidar la base de datos para estos dos, podemos descargar una versión gratuita haciendo clic en el enlace aquí y luego descargar para su sistema operativo. Voy a ir por la versión mac y darle unos minutos para descargar. Una vez que esto se haya descargado, tendrá que pasar por los pasos de instalación para que su computadora toque Continuar a través de cada uno de estos. También puede necesitar agregar una contraseña para instalar esto. El MAMP también viene con una versión de pago llamada MAMP PRO. Esto también se descarga al mismo tiempo, pero no es necesario usar esto. Basta con apegarnos a la versión gratuita del MAMP ya que no necesitamos ninguna de las profecías. Una vez que MAMP haya terminado de instalar a tu máquina serás llevado a una pantalla estrella la cual debería verse así. También se te puede pedir que actualices la base de datos MySQL. Yo seguiré adelante y haré eso también. Dentro de aquí lo clave a notar son las dos luces verdes arriba en la parte superior. Esto significa que nuestro servidor web y también una base de datos está abierta y en funcionamiento. Ya podemos descargar el núcleo de WordPress y añadirlo a nuestra carpeta MAMP. Para mí, MAMP se almacena dentro de mis aplicaciones, entonces tenemos esta carpeta MAMP dentro de aquí. El directorio clave con el que estaremos trabajando es estos htdocs. Esta va a ser la ubicación donde sumamos todos nuestros proyectos de WordPress a lo largo de este curso. Para ello necesitamos ir a WordPress.org y desde la página de inicio tendrá un botón get WordPress justo aquí abajo. Esto luego nos lleva a esta sección de descargas donde puedes descargar el núcleo de WordPress. Este es un archivo zip que no debería tardar demasiado en descargarse. Una vez hecho esto, podemos dar click en este paquete y abrirlo. Esta es ahora nuestra carpeta de proyectos de WordPress. Podemos seguir adelante y renombrar esto, voy a llamar a este wpfestival Entonces podemos arrastrar este proyecto a nuestros htdocs. Agarramos esto, coloca esto dentro de los htdocs, abre esto y podemos revisar esto es eso. Lo siguiente que tenemos que hacer es crear una base de datos para nuestro proyecto. Dentro de la pantalla de inicio del MAMP abrimos la página webstar. Desde aquí podemos acudir a PHPMYADMIN. Si hacemos click en herramientas, click en PHPMYADMIN donde podemos agregar una nueva base de datos. Se puede ver a la izquierda ya tengo muchas bases de datos ya configuradas pero voy a dar click en Nuevo y luego crear una nueva base de datos. Este puede ser cualquier nombre de nuestra elección. Yo soy lo que se llama esto, el wp-festival. Haga clic en Crear, entonces no necesitamos crear ninguna tabla ni ningún dato. Ya que WordPress va a manejar estas fotos. Con esto ahora se configura, podemos volver a pasar al MAMP, agregar a la pantalla de inicio. Ahora las versiones anteriores del MAMP solían tener las preferencias aquí, pero ahora está disponible en las opciones principales. Si estás usando un Mac, puedes dirigirte al icono del MAMP en la esquina superior y luego hacer clic en el enlace de preferencias. Esto terminará esa vinculación a la sección donde podrás consultar qué puerto usamos. Si hacemos click en puertos podemos ver el puerto predeterminado del servidor web es 8888. Ahora vamos a usar esto para acceder a nuestro proyecto en el navegador. Todo lo que necesitamos hacer es hacer click en localhost. Después 8888 golpeó Enter. Después lo llevamos al índice de nuestros htdocs. Esto contendrá todo el proyecto que estamos dentro de un MAMP. Queremos el wpfestival. Al hacer clic en esto se empezará a subir los scripts de instalación de WordPress. El primer paso es elegir el idioma. Yo quiero ir por inglés y luego continuar. Esta página es solo hacernos saber necesitamos configurar nuestra base de datos primero solo para tener acceso a toda esta información. Haga click en Vamos al nombre de la base de datos, que fue wp-festival. El nombre de usuario de la base de datos, que es raíces y también techo para la contraseña, trabajando en el localhost, y luego dar clic en enviar. Una vez conectados a nuestra base de datos, podemos entonces ejecutar los scripts de instalación. Tenemos que añadir en primer lugar el subtítulo. Voy a ir por wp-festival. Esto se puede cambiar más adelante en el panel de WordPress. No te preocupes demasiado por esto. Después necesitamos agregar un nombre de usuario y contraseña para iniciar sesión en un back end de WordPress. Quiero ir por festival admin, una contraseña y luego también un e-mail. Voy a desmarcar esto por ahora ya que la sociedad no está viva. A continuación, haga clic en instalar WordPress. Podemos entonces iniciar sesión usando nuestros datos, que acabamos de proporcionar. Mi nombre de usuario era festival admin, luego pega la contraseña. Esto luego nos lleva al panel de WordPress donde podemos controlar nuestro sitio. Echaremos un vistazo a esto con más detalle muy pronto. También podemos hacer clic en este icono de casa justo encima de la parte superior. Esto luego cambia a nuestro sitio de WordPress. Si has ido al escenario, felicitaciones, WordPress ahora está abierto corriendo usando MAMP. 9. El tablero de WordPress: Teníamos una vista previa rápida del panel de WordPress, justo antes al configurar nuestros proyectos. Este es el centro de control de nuestra página web donde podemos agregar contenido nuevo, podemos actualizar, y también eliminar nuestro contenido también. También podemos usarlo para instalar nuevas características como plugins o temas. Pero actualmente no voy a entrar demasiado en el panel de WordPress porque vamos a estar saltando en todas estas opciones con más profundidad a lo largo de este curso. Para empezar, tenemos esta página de inicio la cual nos da una actualización de estado donde podemos ver que nuestro sitio está en buen estado de salud. Esta es también una sección donde podemos personalizar y también podemos ver actividad reciente como comentarios recientes. También nos avisarán de cualquier actualización que sea necesaria para WordPress y también de cualquier plugins o temas también. La primera opción sobre a la izquierda es nuestra entrada de blog. Cuando establecemos por primera vez un WordPress, vemos que tenemos una publicación de blog de muestra hola mundo. Podemos pasar el rato sobre esto y podemos editar esto, podemos quitarlo. También podemos ver cuántos comentarios se están proporcionando para esta entrada de blog. Podemos agregar nuevas y también podemos crear diferentes categorías y etiquetas también, por lo que podemos organizar nuestra publicación de blog en diferentes secciones. Sobre esto tenemos la mediateca que es una colección de todos los activos que necesitamos para nuestra página web. La mediateca puede contener activos como imágenes, clips de audio, video, y todos estos están organizados en una biblioteca fácil de usar. También tenemos acceso a todos estos activos cuando creamos una nueva entrada de blog y nuevas páginas, por lo que estos son fáciles de seleccionar. Después de esto, tenemos la sección de páginas que se presenta de manera similar a la entrada del blog. Desde aquí podemos acceder a todas las páginas de nuestro sitio, podemos editarlas, podemos eliminarlas, y además añadir nuevas con este botón también. El apartado de comentarios está relacionado con nuestra entrada de blog. Desde aquí podemos tener control total sobre la forma en que un usuario interactúa con nuestro blog. Por ejemplo, podemos moderarlos. Si alguien tiene comentarios ofensivos, podemos revisarlos primero. Entonces también podemos eliminarlos o permitir que se muestren en la página web. la sección de apariencia es donde vamos a estar controlando el aspecto y la sensación de nuestro sitio. Podemos subir diferentes temas, podemos personalizar nuestro tema actual, podemos organizar widgets que son secciones de contenido para mostrar en diferentes partes de nuestro tema. Podemos crear y editar diferentes menús para diferentes partes de nuestros sitios, y también jugar con diferentes diseños y esquemas de color también. la sección de plugins es donde vamos a administrar todas las extensiones para nuestros sitios. Aquí es donde agregamos la diferente funcionalidad que no está incluida con el núcleo de WordPress. Por ejemplo, vamos a estar usando plugins, que van a agregar funcionalidad de comercio electrónico, vamos a agregar funcionalidad de correo electrónico, y como plugin para casi cualquier tipo de característica que desee agregar a su sitio. Después de esto tenemos la sección de usuarios donde podemos gestionar a todos nuestros usuarios para nuestro sitio. Actualmente, sólo nos tenemos a nosotros mismos porque sólo acabamos de configurar este sitio. cada uno de estos usuarios se le asigna un rol diferente. Tenemos acceso completo a este dashboard y podemos actualizar todo el contenido que queremos utilizar. Tenemos el rol de administrador. Pero también hay otros roles que son para usuarios regulares, lo que no pueden simplemente iniciar sesión en el panel y cambiar nuestro sitio. Pero más sobre esto después. El apartado de herramientas nos va a permitir hacer cosas como importar contenido y también exportar nuestros datos también. Por último, también tenemos un montón de configuraciones u opciones diferentes para nuestro sitio, y también vamos a familiarizarnos mucho más con todas estas opciones a medida que avanzamos por el curso. Por lo que esto es sólo una breve visión general de lo que se incluye con el panel de WordPress y exactamente lo que podemos controlar también. A continuación, vamos a echar un vistazo a los archivos y carpetas que se incluyen cuando configuramos WordPress. 10. Archivos y carpetas de WordPress: En la primera configuración un proyecto de WordPress. Descargamos el núcleo de WordPress. El núcleo de WordPress contiene todos nuestros archivos y carpetas, que es lo que una persona necesita para funcionar correctamente. Ahora bien, no necesitamos conocer los roles exactos de cada uno de estos archivos y carpetas, ya que hay mucho código dentro de estos. Pero entender lo básico realmente nos ayudará. Para encontrar todos los archivos y carpetas, esto dependerá de si estás usando local o MAMP para configurar tu proyecto. Si utilizabas el local, debes ir a la pantalla Inicio y dar click en esta flecha. Esto abrirá entonces una ventana con la ubicación de nuestros proyectos. Si entramos aquí y luego dentro de nuestra aplicación entonces público, este es todos los archivos y carpetas centrales que se necesita para que WordPress funcione. Si utilizamos un MAMP, igual que hemos visto antes necesitamos ir a los htdocs y luego a nuestra carpeta de proyectos, y luego nos presentan los mismos archivos y carpetas, que es lo que se llama el núcleo de WordPress. El núcleo de WordPress no está destinado a ser editado, por lo que generalmente los dejamos como están. Uno de los archivos principales que tenemos es el wp-config, que es un archivo PHP. Este archivo es donde le decimos a WordPress todos los ajustes de base de datos que tendremos para nuestros proyectos. Este archivo se puede crear manualmente, pero en nuestro caso, este archivo se estableció para nosotros cuando creamos nuestro sitio usando local. O si optó por utilizar MAMP para este proyecto, este archivo se creó al ejecutar el script de instalación antes. Justo debajo de esto tenemos el wp-content. Este es probablemente el lugar donde pasaremos la mayor parte de nuestro tiempo. Esta es una carpeta importante ya que contiene todo lo que vamos a utilizar para nuestro sitio, y cualquier imagen o video que se almacenarán en la carpeta uploads. También es posible que a menudo veas una actualización plegada también, que es una carpeta temporal utilizada por WordPress al actualizar nuestro sitio. También es posible que veas una carpeta de idiomas también, si haces uso de otros idiomas para tu tema. Si abrimos la carpeta de temas, por defecto, WordPress nos proporciona algunos temas por defecto para que empecemos. Por encima de la izquierda aquí, podemos ver el tema predeterminado, que actualmente es 2020, y podemos cambiar esto dentro del tablero. También podemos descargar nuevos temas y arrastrarlos a esta carpeta para luego activarlos de esa manera también. También tenemos los plugins justo arriba, y esta va a ser la ubicación donde almacenamos nuestros plugins, ya sea a través del dashboard o descargándolos y agregándolos a esta carpeta. Si queremos hacer algunas modificaciones a nuestros temas, podemos arrastrar nuestra carpeta temática. Por ejemplo, 2020. Podemos arrastrar esto a un editor de texto y lo haremos en uno de nuestros proyectos más adelante en el curso, incluida la creación de nuestras propias plantillas de página. Este es un resumen rápido de algunos de los archivos principales, y saltaremos a esta carpeta como lo necesitemos durante el curso. Ahora, entendemos un poco más sobre WordPress, pasemos a crear nuestro primer proyecto. 11. Proyecto del Festival de música: qué vamos a construir: Vamos a empezar con un proyecto sencillo para acostumbrarnos a cómo funciona WordPress incluyendo configurar páginas, incluyendo temas y agregar contenido general. Echemos un vistazo a lo que vamos a construir durante esta sección. Esta va a ser mi versión del proyecto, que va a ser una página de aterrizaje para un festival de música. Puedes seguir y crear esta versión exacta o puedes hacerla tuya también usando un tema o diseño diferente. Si acabas de empezar y eres completamente nuevo en WordPress, quizás quieras seguir junto con los mismos pasos en diseño que he creado entonces posiblemente personalizar al final cuando te sientas más cómodo haciéndolo. Este es el proyecto que vamos a construir en este apartado. Incluye una barra de navegación en la parte superior. Sólo vamos a crear una página de aterrizaje por lo que sólo tenemos un enlace de menú. También vamos a crear nuestro título de sitio en la parte superior. Tendremos algunos enlaces de redes sociales en el lado izquierdo, que podrás utilizar para enlazar a tus perfiles. Tendremos una imagen de fondo de tamaño completo en la sección de encabezado. Después desplazándonos hacia abajo, vamos a hacer uso del nuevo editor de WordPress para crear todo el layout y contenido para nuestra página de inicio. Vamos a crear diferentes filas y bloques de contenido usando este editor. Aprender a agregar diferentes tipos de contenido como imágenes, galerías, y listas. También descubriremos cómo diseñar las cosas en diferentes columnas para que podamos estructurar nuestro contenido exactamente como nos gustaría. También descubriremos cómo usar cosas como la mediateca, cómo incluir widgets para bloques de contenido, y también cómo establecer un tema de arco. Vamos a dar inicio a las cosas agregando este tema en el siguiente video. 12. Proyecto del Festival de música: cómo instalar temas: Para empezar, vamos a instalar un nuevo tema para nuestro proyecto. Voy a elegir un tema gratuito de wordpress.org, pero esto depende completamente de ti. Te recomendaría si eres principiante, que te pegues con el mismo tema que estoy usando, ya que si eliges un tema diferente, puede venir con algunas opciones diferentes o puede tener un look o sensación diferente, o también puede tener algunas opciones extra también. Si eres principiante, te recomendaría que te quedaras con este mismo tema, o si quieres jugar con las cosas después, puedes echar un vistazo a tu alrededor y elegir un tema diferente también. Vamos a saltar a instalar nuestro tema de WordPress. Por el momento, sólo tenemos los temas básicos por defecto que incluimos cuando configuramos originalmente un WordPress. Podemos ver estos si vamos al botón de visita del sitio o aún tengo el mío ya disponible dentro del navegador. Este es el tema por defecto el cual se incluye y podemos ver esto si vamos al tablero, y luego a la sección de apariencia y tema. A partir de aquí actualmente tenemos instalados tres temas diferentes, y estamos usando el tema 2020 en este momento. También podemos pasar el cursor sobre cualquiera de estos diferentes temas, y también activarlos también. Así es como se ve actualmente el tema 2020, y por defecto, primero configuraremos WordPress, todos los blogposts se muestran en la página de inicio. Por el momento, solo tendríamos este sencillo blogpost Hello World y también este comentario de muestra justo debajo. También tenemos una Página de Muestra también, y también podemos reorganizar el contenido de cualquiera de estas páginas desde el panel de WordPress. Por ejemplo, podemos mover todos los blogposts que actualmente se encuentran en nuestra página de inicio para estar en una página de blog dedicada. Para empezar con este proyecto, vamos a instalar nuestro nuevo tema. Desde wordpress.org, podemos entrar en la sección temática y podemos incluir cualquiera de estos temas disponibles para que nuestro sitio se vea tan diferente o personal como queramos. Las opciones que tienes para instalar un tema es que podemos o bien seleccionar cualquiera de estas y dar click en el botón Descargar. Este archivo que descargamos, lo dejamos caer en la sección temática de todos los archivos o carpetas que miramos previamente. Alternativamente, y probablemente una forma más sencilla es volver al tablero, y podemos hacer clic en “Añadir nuevo”. Este proyecto voy a estar usando un tema que se llama Asura. Podemos hacer una búsqueda y el tema de Asura va a ser éste que vemos justo aquí. Para instalar, simplemente hacemos clic en el botón Instalar y luego una vez que se haya descargado esto, solo necesitamos activarlo como nuestro tema actual. Una vez activada, entonces tenemos la opción de personalizar nuestro tema. El personalizador nos da las opciones que están a la izquierda y podemos ver una vista previa en vivo de cualquiera de los cambios sobre la derecha. Por ejemplo, si entra en la identidad del sitio, podemos cambiar el título de nuestro sitio y también el lema. Podemos incluir un logotipo y un ícono del sitio y tenemos muchas opciones diferentes para cambiar el aspecto y la sensación de nuestro tema. hecho de que estemos usando un tema preconstruido, no significa que solo nos quedemos con el look exacto que se proporciona. Haremos uso de muchas de estas opciones a medida que avanzamos por el curso, y ahora también podemos ver nuestro tema activo si recargamos el front end. Actualmente sí luce un poco diferente cómo se veía en las imágenes, pero esto es sólo porque no tenemos el mismo contenido configurado que la demo. El trabajo de un tema es solo proporcionar un esquema de piel o color para nuestro contenido. 13. Proyecto del festival de música: creación de nuestra primera página: Como descubrimos en el último video, WordPress por defecto mostrará nuestras entradas de blog en nuestra página principal. Podemos cambiar esto para mostrar estas publicaciones en cualquier otra página, pero primero necesitamos crear una nueva página para mostrarlas en. Pasado al tablero. Desde aquí, tenemos la opción de páginas sobre a la izquierda. Si hacemos clic en esto, podemos agregar y administrar todas las páginas que se encuentran en nuestro sitio. Voy a dejar un lugar la política de privacidad la cual ya está configurada, pero podemos quitar la página de muestra. Quitemos esto, y luego podemos agregar una nueva página, que va a ser nuestra página principal. Lo primero que tenemos que hacer al crear una nueva página es agregar el título de la página. Entonces podemos sumar todo nuestro contenido a continuación. Vamos a cubrir agregar el contenido de nuestra página en el editor de contenidos con más detalle en el siguiente video. También tenemos algunas opciones para ya sea publicar esta página de inmediato, o podemos programar una lista para un tiempo posterior. Contamos con una sección de enlace permanente donde podemos establecer el enlace a esta página. Por ejemplo, esta sería nuestra URL, y luego reenviar barra inclinada a casa. Si tuviste una sección de blog esto será el blog de barra hacia adelante y así sucesivamente. Tenemos una imagen destacada la cual es la imagen principal, cual podemos utilizar cuando al menos en esta página. Podemos enlazar esto haciendo clic en este botón, y éste se subirá a nuestra mediateca. Contar con la sección de discusión donde podamos permitir comentarios para esta página, y también los atributos que desee agregar, como el orden en el que aparecerá esta página. También se incluye con este tema, hay algunas opciones donde podemos diseñar la barra lateral. Podemos tener la barra lateral ya sea a la izquierda o a la derecha o sin barra lateral en absoluto. Estas opciones de diseño de barra lateral han sido codificadas por el creador de este tema. El tuyo puede ser un poco diferente si eliges un tema diferente. Ahora con nuestro título de sitio en su lugar lo que tenemos que hacer es hacer click en “Publicar” y luego en “Confirmar” y esta página de inicio ya está en vivo. Volver a nuestro front end de nuestro sitio y refrescar. Yo quiero que tengamos acceso a nuestra página de inicio, dar click en esta. Este es el enlace permanente que hemos visto antes que es barra hacia delante casa, y luego nuestro título de página. no tenemos ningún contenido de página, pero hay un par de cosas que tener en cuenta. En primer lugar, este título de la página principal se está mostrando, y es bastante audaz, por lo que es posible que quieras mantener esto en su lugar dependiendo de tu proyecto. Pero voy a quitar esto del tablero. Vuelve a tu página. Después abajo en la parte inferior donde está nuestra sección de diseño, podemos ir a la sección de deshabilitar elementos. Desde aquí podemos consultar el título del contenido, cerrar la sección hacia abajo. Ahora tenemos acceso a un botón de actualización. A continuación, actualiza la página para confirmar que esto ha sido eliminado. El segundo es que realmente queremos que esta página principal sea la página principal de nuestro sitio, en lugar de la entrada del blog que vemos actualmente. Para cambiar esto podemos pasar al panel de control, y si hacemos clic en el icono de WordPress, luego lo llevaremos de vuelta a la sección principal del dashboard. En la sección de ajustes, podemos entrar en la lectura. Desde aquí podemos cambiar lo que mostrará la página principal. Actualmente, esto está configurado para mostrar las últimas entradas del blog, pero vamos a cambiar esto para que sea una página estática, donde podemos seleccionar nuestra nueva página principal. Haga clic en “Guardar”. Ahora si recargamos el proyecto, ahora vemos nuestra página de inicio vacía. Si tuviéramos una página de blog dedicada, también podríamos establecer esto pero vamos a ver esto en un video futuro. Justo antes de pasar a agregar más contenido, también podemos configurar el título del sitio, y también el lema de este proyecto. cuanto a esta espalda en el personalizador, que está disponible bajo la sección de apariencia. Ya hemos mirado cómo podemos cambiar el título del sitio y también el lema usando esta sección de identidad del sitio. El lema no importa por el momento porque ya lo tenemos escondido, pero si quisiéramos también podríamos añadir un logotipo al encabezado. Pero voy a dejar esto y añadir esto directamente a nuestra página. También podemos establecer un ícono del sitio el cual aparecerá en la pestaña del navegador. Queremos hacer ambas en el siguiente video. Volver al menú principal. Usaremos muchas más de estas opciones a lo largo del curso. Pero a continuación, también podemos hacer uso de los enlaces de redes sociales, que se han proporcionado con este tema. Desde esta sección, podemos agregar los enlaces a todos nuestros perfiles de redes sociales. Por ejemplo, voy a añadir mi URL de Twitter. Si ahora publicamos esto, como son las pruebas, podemos cerrar el personalizador y actualizar el navegador. Haga clic en el icono de Twitter, y esto sólo nos llevará directamente a nuestro enlace de redes sociales. Con esta primera página ahora configurada, pasemos a la mediateca donde podemos agregar algunas imágenes a nuestro proyecto. 14. Proyecto del Festival de música: la biblioteca de medios: o temprano tendrás la necesidad de subir diferentes tipos de medios, como imágenes, tu proyecto. WordPress nos proporciona una solución realmente simple y fácil de usar, que es la Media Library. El Mediateca es una ubicación central donde podemos colocar todos nuestros activos, como imágenes, videoclips, y audio, o incluso archivos también. Después nos da acceso a esta mediateca cuando creamos cosas como nuevas entradas de blog o nuevas páginas. Echemos un vistazo a cómo podemos usar esto ahora. Desde el panel de control, tenemos esta opción de mediateca desde la barra lateral. Si hacemos click en esto, podemos ver cualquiera de los activos existentes que tenemos dentro de nuestro proyecto. Esta mediateca no son sólo las imágenes, sino también otros tipos de medios como videos, documentos, y audio. Puedes usar estas mismas imágenes que yo para este proyecto las cuales están disponibles como descarga, o también puedes seleccionar las tuyas si lo prefieres. Desde esta vista, podemos hacer clic en el botón Añadir Nuevo donde podemos arrastrar y soltar cualquier archivo [inaudible], o bien podemos seleccionar archivos de nuestra máquina. Por encima de la izquierda, tengo una carpeta la cual tiene todas las imágenes para este proyecto. Podemos arrastrar sobre cada uno de estos individualmente o en su lugar, simplemente podemos arrastrar sobre la carpeta completa. Una vez que estos hayan sido importados, podemos hacer click en cualquiera de estos de forma individual. También se recomienda si estás empujando este sitio a la producción para rellenar también los detalles adicionales, especialmente el texto alt. También podemos editar el título, el título, la descripción, junto a la URL del archivo, al que podemos enlazar en cualquier entrada o página de blog web. Dado que se trata de un proyecto de demostración, voy a dejar vacía toda la información adicional de la imagen, pero sí asegúrate de rellenar esta información adicional si estás usando un sitio en vivo, que te ayudará con los motores de búsqueda y accesibilidad. Ahora, estas imágenes están incluidas en nuestra mediateca, ahora podemos acceder a ellas en nuestras páginas o entradas de blog o nuestras páginas si entramos en nuestra sección de inicio, haga clic en “Editar”. Podemos agregar directamente imágenes a nuestra página agregando un bloque de imagen, y echaremos un vistazo a cómo hacerlo en el siguiente video. Ahora bien, aunque sólo vamos a entrar en la sección de documentos y luego establece nuestra imagen destacada. Voy a seleccionar este y luego configurarlo como nuestra imagen destacada. Una imagen destacada es una imagen que representa nuestra entrada de blog o nuestra página. La página es imagen destacada se puede mostrar en una serie de ubicaciones. En nuestro caso, el autor de los temas, estableces esto para que esté dentro del encabezado. Ahora si actualizamos esto y actualizamos nuestro sitio, ahora vemos que esto se ha colocado en el encabezado. Podemos ver aquí tenemos algo de espacio en blanco en el lado derecho. Esto se debe a que para este proyecto de curso, mantenemos los tamaños de archivo de imagen hacia abajo. No he incluido ninguna imagen enorme. Tendremos algunas formas diferentes de arreglar esto. Podemos subir una imagen más grande o si quisiéramos, también podríamos ajustar el CSS. Podemos agregar nuestro propio CSS personalizado yendo al Dashboard, abajo al personalizador, luego tenemos una sección CSS Adicional. Podemos apuntar nuestra imagen HTML, que es “img” Entonces dentro de las llaves, podemos establecer el ancho de la imagen para que sea del 100 por ciento. Refresca nuestro sitio, y ahora nuestra imagen se ha estirado a todo el ancho del navegador. Esta es la imagen destacada de nuestra página, pero si tuviéramos que agregar una imagen destacada a una entrada de blog, éstas a menudo se mostraban junto a cada entrada de blog en el listado de la página del blog. También como nota al margen, estas imágenes destacadas solían llamarse miniaturas de post. Estos estaban en versiones tempranas de WordPress, por lo que aún puede ver algunas referencias a esto en la documentación o también algunas guías. Volver al personalizador, también voy a establecer el icono del sitio. De vuelta al menú principal y desde la Identidad del Sitio, podemos seleccionar el icono del sitio. Queremos ir por la misma imagen, seleccionar esto, entonces también podemos recortar esto para ser de un tamaño más pequeño. Voy a ir por la imagen, las manos, recortar esto, publicar nuestros cambios. Ya podemos ver el icono del sitio dentro la pestaña del navegador se ha actualizado con nuestra nueva imagen recortada. 15. Proyecto del Festival de música: el editor Gutenberg: En WordPress versión 5, lanzaron un editor completamente nuevo renovado para editar nuestras publicaciones y páginas de blog. A esto se le llamaba Gutenberg. Esto nos permite alejarnos de un enfoque de editor de ordenación y reemplazar nuestro contenido usando bloques. Ahora vamos a echar un vistazo a la página web de Gutenberg y hacer un breve resumen de cómo funcionan estos bloques. Actualmente estoy en wordpress.org, que tiene esta sección de Gutenberg. Esto nos va a dar una visión general de algunos de los bloques que están disponibles para crear nuestras entradas de blog y nuestras páginas. Ahora no necesitamos dirigirnos a esta página, pero esto te va a dar una idea de exactamente lo que está disponible. Tenemos algunos bloques de texto básicos, tenemos imágenes, tenemos botones, y también unos para ayudar con el diseño como columnas. Podemos editarlos, podemos reorganizarlos, y en algunos casos también podemos anidarlos dentro del otro también. Si volvemos al Dashboard, podemos hacer uso de estos dentro de nuestras páginas. Actualmente nuestra página de inicio está vacía, así que vamos a pasar a esto, y entraremos a la sección de edición, donde podremos hacer uso de algunos de estos bloques. Para agregar un bloque simplemente podemos empezar a escribir aquí dentro. Esto nos dará un simple bloque de texto o podemos hacer click en el icono más en la parte superior izquierda. Podemos desplazarse por todos los diferentes tipos de bloques y secciones que están disponibles. Tenemos prácticamente cualquier tipo de contenido que se va a requerir para construir la página. Contamos con mesas, tenemos imágenes, tenemos galerías, tenemos secciones de video, tenemos esta sección de diseño donde podemos alumbrar nuestra página en diferentes secciones y columnas. Podemos romper nuestras páginas. Nosotros editamos separadores, tenemos todos estos widgets preconstruidos los cuales nos permitirán agregar calendarios y enlaces a nuestra última entrada de blog. Tenemos enlaces de redes sociales, y también diferentes plugins pueden agregar diferentes bloques aquí también, como WooCommerce, lo que nos permitirá agregar alguna funcionalidad de e-commerce a nuestras páginas. Para empezar, voy a añadir un encabezamiento a nuestra página, que va a ser un encabezamiento de nivel 2. Hacemos click en esto, asegurarnos de que el H2 esté seleccionado. Entonces simplemente podemos añadir el texto que queremos como encabezado de nuestra página. Ya que esto es un festival, voy a decir un fin de semana completo de música en vivo y entretenimiento. Todo lo que necesitamos hacer es hacer click fuera de esto y ahora nuestro rumbo está en su lugar. Ya que se trata de un festival y se basa durante el fin de semana, el siguiente bloque que voy a crear va a ser un layout de dos columnas. La columna de la izquierda va a ser para el sábado, y la columna de la derecha va a ser para los eventos que está sucediendo el domingo. Vuelve a nuestro icono más, y dentro aquí, si nos desplazamos hacia abajo hasta la sección de diseño, podemos hacer click en “Columnas” Vamos a ir por un layout de dos columnas 50/50. En primer lugar, la columna de la izquierda va a ser para el sábado. Voy a anidar una nueva cuadra dentro de la cual va a ser un rumbo. Esta vez haremos de este nuestro rumbo nivel 3 por lo que es un poco más pequeño, y esto es para nuestro sábado. También podemos formatear esta sección. Voy a alinear el texto al centro. También voy a ir a la configuración de color y ajustar esto también. Voy a ir por el color verde para este apartado. Después con esto seleccionado, podemos dar click en el icono más o justo debajo. Esto agregará un nuevo bloque directamente por debajo de nuestro rubro de nivel 3. Esta va a ser una lista que va a enumerar todos los eventos o toda la información sobre este sábado. Vamos a decir ocho bandas en vivo. Entonces si le damos a “Enter” podemos seguir adelante con nuestra lista. Diremos 20 cantantes, dos DJ's, ocho puestos de comida y bebida, cuatro escenarios y tres arenas. Entonces por fin, acampar gratis durante la noche con entradas. Una vez que hayamos terminado, sólo podemos salir de esto, y vamos a quitar el último punto de bala. Entonces esta es la sección del sábado todo completa. Ahora de vuelta a la derecha, podemos crear la sección dominical, comenzando de nuevo con un rumbo de nivel 3, que va a tener el texto del domingo sobre esto, y luego vamos a alinear esto en el centro. Después iguala el color de la izquierda. Entonces si hacemos clic en el icono más, entonces podemos agregar nuestra lista justo debajo. Este domingo va a tener 10 bandas en vivo, 18 cantantes, tres DJs, ocho puestos de comida y bebidas, mismos cuatro escenarios, y tres arenas. Por último la fiesta de clausura. En cualquier momento podemos dar click en “Actualizar” y podemos revisar cómo se ve esto. Vamos y visitamos nuestra portada. Bajen. Vemos nuestro rumbo y también las dos listas de izquierda y derecha. Quizás también quieras centrar este rumbo de nivel 2, así que subamos a esto. Si pasamos el cursor, podemos alinear este texto en el centro. Actualiza esto. A continuación vamos a introducir un bloque de medios y texto. Si hacemos clic en el icono más, realidad podemos hacer una búsqueda de esto o decir Medios y Texto. Entonces en el lado izquierdo podemos añadir una imagen o un video. Si pasamos a la mediateca, podemos seleccionar cualquiera de estas imágenes precargadas. Quiero seleccionar la imagen de la guitarra, y luego decir boletos de madrugador ya disponibles. Entre cada uno de estos bloques, también voy a añadir un separador. Si hacemos click en el icono más, podemos utilizar la búsqueda de un separador. Después podemos hacer clic en el icono de arriba para reorganizar esto y colocarlo encima de nuestros medios y texto. Haremos lo mismo justo debajo, también agregaremos un separador. Esta vez mantendremos esto debajo de nuestra sección. A pesar de que se trata de una sección de medios y de texto no sólo estamos restringidos a añadir texto a esta sección. Si tocamos “Enter” entonces podemos hacer clic en el icono más, y también podemos añadir un botón dentro de aquí. Este botón nos va a permitir enlazar con los boletos que actualmente estamos ofreciendo, por lo que diremos ya. Para darle a esto un poco de estilo, también voy a usar el mismo color verde que usamos antes. Actualicemos esto y veamos cómo se ve esto en el front-end. A lo siguiente a lo que vamos a pasar es a una galería de imágenes del evento del año pasado. En la siguiente sección vamos a sumar un encabezamiento de nivel 2, que va a tener el texto del evento del año pasado. También podemos colocar esto en el centro. Entonces justo debajo de este da click en el icono más y podemos añadir una galería de imágenes. Nuevamente, podemos subir imágenes frescas o podemos utilizar la Mediateca para reutilizar las imágenes existentes. Seleccionemos cualquiera de estos cuatro, y podemos seleccionar múltiples imágenes al mismo tiempo. Haga clic en “Crear una nueva galería” e inserte. Hacer click en cualquiera de estas imágenes nos permitirá hacer click en los botones izquierdo y derecho para que podamos reorganizar el orden de estas imágenes. Después de esto, agregaremos nuestro separador, mantenerlo consistente. El último apartado va a ser para la información de los boletos. Vamos a darle a esto un encabezamiento de información de boletos. También alinearemos esto en el centro. El bloque final que vamos a utilizar en la parte inferior va a ser para un diseño de tres columnas. Seleccionaré las columnas. Dentro de aquí podemos ir por tres columnas iguales. Esto se va a presentar más o menos como una mesa para todos nuestros precios de entradas. Vamos a tener una sección de preventa, una sección de madrugadores, y luego las tarifas estándar de boletos. También podríamos agregar esta tabla con un bloque de tabla el cual está disponible. Pero voy a crear las mías usando tres columnas, aunque no tenemos los bordes alrededor de cada sección. De la misma manera que hicimos con la sección de dos columnas justo arriba, dentro de cada una de nuestras columnas, podemos agregar nuevos bloques. Estas sólo van a ser secciones de texto. Haga clic en el “Párrafo” para cada una de estas piezas de texto. El primero es la preventa. Dado que este es un encabezado, vamos a hacer esto audaz. Asegúrate de que todo esté seleccionado, y luego haz clic en “Negrita” También pondremos esto en el centro. Puede ser un poco complicado hacer clic en el icono más en el punto correcto. Si acabamos de salir de esto, el siguiente icono más crearemos esta sección debajo de todo este diseño de tres columnas. En cambio con nuestro texto seleccionado, si tocamos “Enter” entonces tenemos la opción de agregar una nueva línea de texto. Diremos que todo se ha ido. Introduce esto. Dado que esta es una sección agotada, cambiaremos el color del texto para que sea rojo. Da click dentro de nuestra sección de texto y luego pulsa “Enter” La siguiente va a ser por el precio. Ya que se trata de una sección agotada destacaremos nuestro texto. Después añadiremos un tachado para mostrar que esto se está agotando. Coloca esto en el centro. Nuestra primera columna ya está hecha. la sección media esto va a ser para la sección madrugadora. Coloca esto en el centro y también hazlo audaz. Hit “Enter” Esto va a estar a la venta ahora. Esta es la sección activa, por lo que en lugar de tener esto como rojo, vamos a resaltar esto como el color verde. Una vez más golpea “Enter” y podemos sumar un precio a esto por 35. Después de la sección madrugadora, la final va a ser para la tarifa estándar. Selecciona todo, voy a hacer esto audaz, coloca en el centro. El segundo renglón va a ser después del 20 de agosto. Colocar en el centro. Entonces finalmente el precio para la sección estándar de 49. Coloca esto en el centro, y ahora nuestra sección está hecha. Actualiza esto. Ahí está nuestra galería de imágenes y nuestra información de entradas abajo en la parte inferior. 16. Proyecto del Festival de música: Widgets: El tema que he elegido, junto con muchos otros, soporta widgets add-in. Un widget es una pequeña característica o una pequeña pieza de contenido que podemos colocar en nuestro tema. Ahora, no podemos simplemente seguir adelante y colocar estos widgets en cualquier área que nos gustaría. Estas áreas de widget donde podemos dejarlas caer en ha sido preestablecidas por la oferta de temas. Echemos un vistazo a cómo podemos trabajar con widgets con nuestro tema actual. Si volvemos a nuestra página de inicio y a la sección de edición, justo abajo en la parte inferior debajo de todos nuestros bloques con el bajo la sección de maquetación, tenemos estos widgets de pie de página. El autor de este tema nos ha permitido valorar cuántas áreas queremos personalizar dentro del pie de página. El valor predeterminado es libre, lo que significa que el pie de página se divide en tres secciones donde podemos agregar nuestros bloques de contenido. Además, recuerda desde justo arriba de esto, tenemos esta sección de barra lateral, donde podemos colocar nuestro contenido junto a una barra lateral. Bueno, tanto la sección de barras laterales como también la sección de pie de página y ambos widget exacto. Para acceder a nuestros widgets, volvemos al panel principal y luego a la sección de apariencia donde tenemos un menú de widgets dedicado. Esta página se ha dividido en dos secciones, donde a la izquierda tenemos los widgets disponibles que podemos agregar a nuestro proyecto como calendarios, menús, casillas de búsqueda, y también cosas relacionadas con nuestro blog, así que solo comenta y publicaciones recientes. Entonces a la derecha, tenemos todas las áreas temáticas disponibles donde también podemos agregar estos widgets, todas estas secciones se pueden personalizar, y ahora voy a agregar algunos widgets al pie de página. Footer Widget 1 es la primera posición dentro de nuestro pie de página. Esto se va a colocar en el lado izquierdo. Este primer widget va a ser un simple bloque de texto para que puedas arrastrar sobre los widgets de texto, el título de Go VIP, y luego algún texto en el bloque de abajo de upgrade a VIP, y disfrutar aún más de tu fin de semana. El editor de texto es bastante sencillo, voy a añadir una lista con boletas justo debajo. En la primera línea van a ser exclusivos bares VIP solo, el siguiente va a ser para instalaciones de aseo exclusivas, y el final va a ser el área de acampada cercana a los principales escenarios. Ahora, vamos a pasar al área de pie de página 2. Esta será la sección media de nuestra libre. Dentro de aquí, vamos a crear un enlace a nuestras últimas entradas de blog. Para ello, tenemos un widget de post reciente el cual podemos arrastrar por encima. Si quisiéramos, también podríamos añadir un múltiplo widgets a cualquiera de estas secciones. No estamos restringidos a uno solo. El título de mantenerse al día con nuestro blog, y luego podemos establecer cuántas de las entradas recientes queremos mostrar. Nuestro sitio, actualmente, tiene el único post de blog que fue creado cuando instalamos WordPress. Bueno, más aunque podemos restringir esto a ser cinco y también podemos mostrar la fecha de publicación una también como ésta y guardar nuestro widget. El tercero va a ser un clip de audio de los eventos del año pasado. Para ello, tengo un clip de audio que acaba de guardar en mi escritorio. Ahora no he incluido este archivo de audio con el costo, ya que esta era una pieza de audio con licencia. Pero puedes usar un clip de audio propio o buscar en línea y luego incluir esto si quieres. Esto va a entrar en Footer Widget 3. Arrastra sobre la sección de audio, agrega un título de, escucha una muestra de los eventos del año pasado. ' Después podemos acceder a la mediateca donde podemos arrastrar sobre nuestro clip de audio en este y luego guardar nuestro widget. Vayamos ahora y echa un vistazo a nuestra zona de pie de página en el front end. Bajen al fondo y aquí están nuestras secciones libres que acabamos de recrear. Contamos con nuestros widgets de texto, tenemos la sección de blog, y podemos hacer click en cualquiera de estos enlaces. Solo tenemos esta una muestra hello world blog post. Pero recuerda que esto mostrará un máximo de cinco. Entonces en la tercera sección de nuestro pie de página, tenemos este clip de audio, que es un reproductor de audio que funciona plenamente. Podemos jugar, podemos pausar, podemos saltar por diferentes partes de nuestra pista, y también podemos controlar el volumen de audio también. Este es ahora nuestro primer proyecto ya concluido. Tenemos un bonito proyecto en muy poco tiempo. Esta página web también responde por defecto. Si reducimos esto a un tamaño más pequeño, ajustará el diseño y también la escala para adaptarse a este dispositivo. El siguiente proyecto vamos a profundizar un poco en WordPress, donde vamos a construir nuestro propio blog personal y también aprenderemos cosas nuevas como ahora menús, usuarios, comentarios, y mucho más. 17. Qué vamos a construir: Para esta sección, vamos a estar construyendo un proyecto totalmente nuevo. Como puedes ver, este es un blog de desarrollo web, y esto nos enseñará algunas técnicas diferentes. Utilizamos algunas opciones diferentes de las secciones anteriores. Vamos a estar usando un tema completamente diferente. Estaremos haciendo uso de muchos widgets diferentes, estaremos agregando un carrusel deslizante, igual que vemos aquí, y esto enlazará a diferentes páginas. Estas páginas también están disponibles en diferentes secciones a continuación. Contamos con algunas áreas de widget. Vamos a estar construyendo esta página usando alguna plantilla la cual se debe proporcionar con este tema. Tenemos algunas áreas destacadas las cuales se enfocarán en ciertas secciones de nuestro sitio, y todas éstas enlazarán a diferentes páginas. Tenemos algunos pancartas, tenemos algunos testimonios, tenemos algunos casos de estudio, tenemos un área de enfoque en una sección en particular. Entonces tenemos un pie de página abajo en la parte inferior. Este pie de página también enlazará a todas las páginas, tenemos un calendario que enlazará a publicaciones anteriores del blog, integraremos iconos de redes sociales, y también enlazará a comentarios recientes también. También se colocarán los iconos de las redes sociales en diferentes lugares. Podemos verlos rondando sobre la parte superior derecha de nuestro sitio, y estos son totalmente funcionales. Veremos cómo mover nuestras publicaciones de blog a diferentes páginas, veremos cómo cambiar el diseño y el estilo en, y haremos un uso pesado del personalizador para cambiar el aspecto y la sensación de nuestro sitio. Para cualquiera de estas entradas de blog, también podremos hacer click a través la versión completa donde también veremos una barra lateral sobre la derecha, y también podemos dejar comentarios para cada usuario. Además de esto, vamos a tener diferentes páginas como el About Us, en el que podemos dar click y ser llevados a través de esta página. También tendremos una página Contáctanos también. Este es un formulario Contáctanos totalmente funcional, y también echaremos un vistazo a cómo personalizar esto y también agregar y eliminar diferentes campos. Este proyecto está fuertemente basado en agregar y actualizar entradas de blog, cómo incluir medios para hacer que nuestra publicación se vea realmente bien. También nos centraremos en cómo podemos trabajar con diferentes usuarios, diferentes niveles de permisos, y también en qué tipo de acceso tiene cada usuario a nuestro sitio. Trabajaremos con los menús de navegación, las plantillas de página del personalizador, agregando un control deslizante, trabajando con plugins, y mucho más. Al final de este proyecto, tendrás una muy buena idea de cómo personalizar tu sitio incluso cuando uses un tema preexistente. Para redondear las cosas, también echaremos un vistazo a cómo podemos mejorar la optimización de nuestro motor de búsqueda de sitios, y también cómo realizar copias de seguridad regulares, asegurarnos de no perder todos nuestros valiosos datos. Espero que estén entusiasmados con este proyecto, y comenzaremos en el siguiente video configurando este proyecto. 18. Blog de WordPress: configuración del proyecto: Vamos a seguir con nuestro próximo proyecto que va a ser un blog de WordPress. Ahora, un blog era tradicionalmente por lo que WordPress era bien conocido en los primeros días, aunque ha crecido y se ha expandido para poder construir cualquier tipo de sitio web que quieras crear. Para empezar, voy a empezar por local para crear los sitios. A continuación solo nos gustaría en el conjunto de videos para el último proyecto, también puede elegir [inaudible] si lo prefiere. Una vez abierto Local, si ya tienes un sitio web existente abierto, es posible que tengas que hacer click en el botón “Stop Site” en la esquina superior, aunque no tengo ningún proyecto actualmente en ejecución, aunque podemos dar click en el verde más icono para comenzar con un nuevo proyecto. Como siempre, vamos a darle a esto un nombre de sitio, y llamemos a mi nuevo webdev-blog. No necesitamos ninguna de estas opciones avanzadas, por lo que podemos continuar con la configuración preferida 2. A continuación los detalles de inicio de sesión para el administrador. En primer lugar, el nombre de usuario. Queremos ir por blog admin, una contraseña, y espero que la tuya sea más fuerte que la mía, y también una dirección de correo electrónico también. Podemos sumar los sitios y solo darnos unos momentos para configurarlo. Al igual que con el último proyecto, si estás usando local, es posible que también necesites agregar la contraseña administrativa si estás usando un Mac. Está bien, bien. El mío ya está todo configurado. Voy a iniciar sesión en el panel con los detalles que acabas de proporcionar. Fue blog-admin y también una contraseña también. Todos nos inscribimos y podemos abrir el front-end de nuestros sitios. Voy a ver cómo se ve WordPress con el tema predeterminado. De vuelta al tablero, el único cambio que vamos a hacer en este video es introducir nuestro nuevo tema. Para ello, bajamos a la aparición en la sección temática, y podemos añadir un nuevo tema con este botón. Ahora, al igual que con cualquier proyecto dentro de este curso, puedes elegir cualquier tema que te guste para tu proyecto. No obstante, si eres principiante, recomendaría que te quedaras con los mismos temas que estoy usando. Viste cosas como las mismas opciones que están disponibles para que no te confundas demasiado. El que voy a usar va a ser espacioso. Escribiré esto y podemos buscarlo. Este es el tema justo aquí. Puedes previsualizar si quieres ver cómo se vería esto, pero voy a dar clic en el botón “Instalar” y luego activarlo una vez listo. Con esto ahora como nuestro tema activo, podemos volver al front end. Si recargamos la página, ahora verás una configuración diferente para todos los proyectos. Tiene exactamente el mismo contenido. Tenemos el blogpost de ejemplo Hola mundo, tenemos algunos comentarios de muestra, y también una página de muestra sobre el top 2, pero esto solo está siendo cubierto con un tema completamente diferente. Es este tema con el que vamos a trabajar en el resto de este proyecto. A partir del siguiente video, vamos a sacar algunos datos de muestra para poder ver exactamente cómo se vería este tema con mucho más contenido. 19. Blog de WordPress: Importación de datos de muestra: Bienvenido de nuevo. Ahora tenemos instalado nuestro nuevo tema para nuestro proyecto. Ahora vamos a ver cómo se ve con algún contenido. Por el momento, sólo tenemos algunos datos de muestra, el blogpost, el comentario, y también la página de muestra también. Una forma de agregar contenido es escribir muchos blogs diferentes, agregar muchas páginas diferentes, y generalmente crear mucho contenido. medida que avancemos por este proyecto, estaremos sumando mucho contenido propio. Pero por ahora vamos a poner en algunos datos de muestra, para echar un vistazo a este tema con más contenido. El modo de hacerlo es dirigirse al sitio web de WordPress y descargar los datos de Theme Unit Test. Se trata de los mismos datos de prueba que es utilizado por el equipo de WordPress para revisar cualquier tema recién subido. Todo el punto de esto es asegurarte de que tengas todos los ángulos cubiertos. Por ejemplo, si creamos un nuevo tema propio y queremos subirlo a WordPress.org, si no lo hemos probado completamente nosotros mismos con un montón de datos, podemos encontrar que el diseño se ve un poco extraño cuando tenemos cierto tipo de imagen, cierto número de blogposts. Al poblar esto con todos estos datos, podemos estar seguros de que nuestro tema se ve bien para todas las situaciones. Pero en nuestro caso, sólo vamos a estar descargando esto para darnos una cabeza de partida con nuestro nuevo proyecto. El modo de instalar esto es bajar a la sección de Configuración y podemos descargar una copia de este enlace. Voy a hacer clic con el botón derecho en esto y luego Guardar Enlace como y luego guardar esto en el escritorio. Para importar esto, volvemos al panel de WordPress y luego bajamos a la sección de herramientas, y dentro de aquí tenemos a este importador. Ya hay varios importadores o configuración para justo si queremos importar datos de un blogger o una fuente RSS. Pero el que necesitamos es este importador de WordPress hacia abajo en la parte inferior sacando nuestros datos de un archivo de exportación. Haga clic en Instalar ahora, configurar esto. Después ejecuta nuestro importador, selecciona nuestro archivo y el mío se guarda en el escritorio, y este es el archivo XML justo aquí. Abre esto, da click en Subir. Justo antes de descargar toda esta información, también podemos asignar diversos autores a estos nuevos blogposts y a estas páginas que se están creando. Podríamos haber creado un nuevo nombre de usuario, o podemos seleccionar cualquiera que ya tengas configurado, y en nuestro caso, solo tenemos este blog admin. Podemos asignar esto si queremos. No obstante, sólo voy a dejar esto vacío, o voy a revisar la sección de archivos adjuntos de importación. Esto descargará cosas que como las imágenes, que vamos a necesitar para nuestro proyecto. click en Enviar y dale a esto unos momentos para descargar. Genial. Una vez que haya terminado, podemos ir al front end de nuestro sitio, golpear Refresh. Todos estos datos de muestra ya han sido importados. Podemos ver todas nuestras páginas en la parte superior, también tenemos algunos menús desplegables. Tenemos todos nuestros blogposts. Si nos desplazamos hacia abajo, podemos ver algunos de los medios que se han descargado, tenemos varias imágenes. Estas tienen diversas fechas, tienen diversas ofertas, también algunas de estas tendrán comentarios y también varias etiquetas y categorías. Ves los comentarios sobre a la derecha, podemos dar click en estos. Esto ahora nos deja con un poco de datos de blogpost con los que trabajar en nuestro proyecto. Si tuviste algún problema al descargar estos datos, no te preocupes, esto es solo algunos datos de muestra para trabajar. A continuación vamos a pasar al siguiente video donde vamos a ver cómo podemos agregar nuestros propios blogposts y también actualizar los existentes también. 20. Blog de WordPress: cómo añadir y actualizar publicaciones: En el video anterior, agregamos mucho contenido de muestra, y en particular, ahora vemos muchas entradas de blog en nuestra página de inicio. En este video, vamos a añadir nuestra propia entrada de blog y también echar un vistazo a cómo podemos editar los existentes también. Como siempre, la forma de hacerlo es dirigiéndose al tablero. Entonces vamos a esta sección de Publicaciones justo aquí. El diseño de hoy es similar a las páginas, una que miramos en el último video. Podemos repasar esto y hacemos click en todas nuestras publicaciones. Podemos añadir directamente uno nuevo y también podemos saltar a cualquier categoría y etiquetas también. Vamos a los All Posts y podemos ver todos los que se han creado con nuestros datos de muestra. También tenemos este Hola mundo! uno que configuramos cuando configuramos por primera vez nuestra instalación Wordpress. Podemos ver al autor de cualquiera de estos, este Theme Buster uno y el Theme Reviewer es datos de muestra. Con cualquier entrada de blog que nos agreguemos, tendremos a nuestro actual autor conectado. Podemos ver a qué categorías se ha asignado esto y también cualquier etiqueta a la que se haya agregado. Después de esto, podemos ver los comentarios que se están creando. Este en particular tiene un solo comentario el cual ha sido asignado a esta entrada de blog. Si quisieras, podríamos dar click en esto. te llevará directamente a estos comentarios, donde podemos aprobar esto, podemos contestar, podemos editarlo, y también podemos eliminar cualquier comentario inapropiado también. Haga clic en el botón Atrás para ser llevado de nuevo a Todas las Publicaciones. El último apartado es la fecha en que se publicó este. Cuando creamos una nueva entrada de blog, podemos publicar esto de inmediato o podemos programarlos para un tiempo futuro. Si pasas el cursor sobre cualquiera de estas entradas de blog, también podemos editarlas. También podemos quitarlos. Por ahora, hagamos clic en el botón “Añadir nuevo” en la parte superior y creemos nuestra propia entrada de blog. Al agregar una nueva entrada de blog, esto también va a aprovechar el editor Gutenberg basado en bloques, igual que miramos cuando creamos nuestras páginas en el proyecto anterior. En la parte superior, agregamos un título de entrada de blog. Yo solo quiero ir por Mi Primer Post. Entonces debajo de esto, podemos agregar varios bloques de contenidos como imágenes, texto, y cualquier otra cosa, que hemos visto en los videos anteriores. Sólo voy a agregar un texto de muestra y la forma en que voy a hacer esto es haciendo una búsqueda de lorem ipsum. Esto nos llevará a lipsum.com, que es solo un sitio sencillo para generar algunos datos de muestra. Lo que tenemos que hacer es desplazarnos hacia abajo y podemos generar cierto número de párrafos de palabras, cinco párrafos está bien, dar click en “Generar”. Entonces esto nos dará nuestros cinco párrafos, que ahora podemos copiar y pegar en nuestro proyecto, pegar esto en. Tenemos ahora cinco párrafos de datos. Podemos pasar el cursor sobre cualquiera de estas secciones y también ver un menú emergente. Podemos hacer cosas como reorganizar el orden. Podemos hacer el texto negrita, cursiva. Podemos crear enlaces seleccionando cualquier parte de este texto y luego una URL a la que quieras enlazar. También podemos establecer cosas como la alineación. También tenemos varias opciones con este desplegable sobre a la derecha. También con este texto seleccionado, tenemos cinco opciones sobre en la barra lateral. Podemos cambiar el tamaño de fuente predeterminado. Podemos cambiar la configuración de color. Si quieres que la primera letra sea más grande, también podemos seleccionar esto, y si hacemos clic en el botón Publicar en la parte superior, esto ahora te dará algunos ajustes generales para nuestra entrada de blog. En primer lugar, tenemos la visibilidad y podemos seleccionar esto para que sea público para que cualquiera pueda leer nuestro post. Podemos poner esto solo a disposición de los admins y editores del sitio. Todo esto se basa en los roles particulares que le damos a los usuarios. Tendremos un video dedicado sobre esto muy pronto. Si tenemos alguna información sensible, también podemos proteger con contraseña nuestra entrada de blog también. Tenemos entonces la fecha, podemos publicar esto de inmediato, o podemos agendarlo para cualquier fecha futura. Entonces muchas de estas opciones similares que hemos visto en los videos anteriores, donde creamos en diferentes páginas. Tenemos el permalink, que es un enlace directo a este post. Podemos asignar las diversas categorías o etiquetas. Podemos seleccionar cualquier categoría existente o añadir una nueva también. Lo mismo para las etiquetas. Tenemos una imagen destacada la cual también puedes agregar. Esta es una imagen que aparecerá junto a nuestra entrada de blog, cualquier lista de páginas de blog en. El extracto, este es un adelanto o una versión acortada de nuestra entrada de blog. Esto es lo que vemos si vamos al front end de nuestro sitio. Se trata de todas las versiones acortadas que se ven aquí. Ya que no queremos mostrar la entrada completa del blog en este listado porque esta página será realmente, muy larga. Si no agregamos ningún extracto aquí, WordPress tomará automáticamente las primeras secciones de nuestra entrada de blog. Después de esto, también podemos establecer si se permiten discusiones o comentarios para esta publicación. Este tema en particular también nos permite seleccionar un diseño diferente. Podemos añadir patillas a la izquierda y a la derecha. Podemos quitar la barra lateral y tener un contenido de tamaño completo. Simplemente voy a dejar esto como el predeterminado. Hasta arriba, publiquemos esto para que podamos verlo en nuestro sitio. Confirmar. Encima al front end y refresca el navegador. Ya ves Mi Primer Post ya está apareciendo. Dado que esta es la publicación de blog más reciente, posible que esperes que ésta aparezca justo en la parte superior, y este suele ser el caso, pero sin embargo, al importar todos los datos de muestra, se ha establecido una de estas publicaciones para ser pegajoso. Si hacemos click en esto, entonces tomamos en la versión completa de nuestro post y vamos a “Editar Post”. Después, en la configuración de la derecha, podemos ver que esto se ha pegado a la parte superior de la página. Podemos desmarcar esto, actualizar nuestro post, y volver a nuestro sitio. Esto ahora lleva a nuestra primera publicación de blog justo en la parte superior. En aquí podemos ver a nuestro editor personalizado y podemos ver los diferentes colores. Podemos ver la primera letra más grande y también podemos hacer prácticamente cualquier cosa que queramos con todos nuestros bloques de contenido. Además, si nuestro post se está volviendo realmente largo, también podemos insertar un salto de página. Haga clic en el icono de Plus. Busca el salto de página. Esto ahora dividirá nuestro contenido en dos páginas. Podemos agregar tantos de estos saltos de página como quisiéramos. Sólo voy a quedarme con ése por ahora. Actualizar este post. Ahora si actualizamos nuestro sitio, vemos que ahora se ha eliminado la mitad inferior de nuestro contenido. También podemos cambiar entre nuestras páginas en la parte inferior. Es así como podemos agregar nueva entrada de blog y también editar publicaciones existentes. Si lo deseas, puedes seguir adelante y añadir tantas publicaciones diferentes como quieras o incluso actualizar cualquiera de las existentes también. Una forma de dar vida realmente a nuestra publicación de blog es agregando diferentes medios como imágenes. A esto es a lo que ahora vamos a pasar en los próximos videos. 21. Blog de WordPress: dónde encontrar grandes fotos para tus publicaciones de blog: Bienvenido de nuevo. Lo último que quieres hacer es pasar mucho tiempo escribiendo grandes entradas de blog. Si no puedes encontrar ninguna gran imagen o medio para ir con él. Este video se trata de mostrarte un par de recursos que pueden ayudarte a encontrar algunas imágenes de alta calidad. También, ilustraciones, gráficos vectoriales, y videos. Todos estos se pueden incluir en tus sitios web o en tus entradas de blog. El primer recurso es un sitio web llamado Pixabay, y ese es nuestro pixabay.com. Tiene miles de fotos en stock gratis, vectores, y también videos. Podemos tener una búsqueda usando el cuadro de búsqueda en la parte superior de ahí, o si se desplaza un poco más hacia abajo, hay pestañas, espera, ilustraciones, gráficos vectoriales, y también videos. Una de las grandes cosas de Pixabay es como puedes ver, todos los videos e imágenes se liberan libres de derechos de autor bajo el Creative Commons. Eso básicamente significa que eres libre de descargar, libre de cambiar, libre de distribuir las imágenes, y no necesitas pagar regalías a la oficina y tampoco se requiere atribución. Eso básicamente significa que a veces la fotografía de stock es libre de descargar y de usar pero a veces necesitas proporcionar un enlace de vuelta a la página web desde la que la descargaste o un enlace a la oferta a cambio de que la imagen sea proporcionado de forma gratuita. Pero eso no es requerido en Pixabay. Si quieres saber un poco más sobre los derechos de uso, solo tienes que hacer clic en el botón “Aprender más”, y hay una lista de preguntas frecuentes. Una vez que estás en la página web y encuentras una imagen que te gusta, solo tienes que hacer clic en la imagen y podrás descargar la imagen en varios tamaños. Sí necesitas estar conectado para descargar las versiones más grandes, pero las imágenes siguen siendo gratuitas para descargar. También hay una confirmación de que la imagen es gratuita para uso comercial. Tampoco se requiere atribución a Pixabay ni al autor. Entonces el siguiente sitio web que voy a ver es un sitio web llamado Unsplash.com. Unsplash.com también es un recurso gratuito para las fotos de stock. Si haces clic en el enlace “haz lo que quieras”, puedes obtener algo más de información sobre la licencia. Al igual que en Pixabay, todas las fotos publicadas en Unsplash están licenciadas bajo el Creative Commons Zero. Podemos copiar, modificar, distribuir, y utilizar las fotos de forma gratuita, y eso también incluye uso comercial. Tampoco necesitamos permiso del fotógrafo ni de Unsplash. Tampoco necesitamos proporcionar atribución si no queremos. Basta con volver a la página de inicio. Es realmente sencillo buscar fotos, y también podemos navegar por lo nuevo y también por diversas colecciones. También hay una opción de suscribirse y obtener 10 nuevas fotos cada 10 días. El siguiente recurso es una empresa llamada Shutterstock. Esto está disponible en Shutterstock.com. Estos son probablemente los más grandes de todos. Ahí hay una imagen, un videoclip de casi cualquier cosa que puedas imaginar. No obstante, el sitio web no es libre de usar. Hay varios planes de precios diferentes los cuales puedes escoger, pero puedes encontrar casi cualquier cosa que estés buscando. Busquemos tigres. Me lleva a la búsqueda que tiene montones de fotos de tigres, ambas tomadas por fotógrafos, y también imágenes tomadas por ilustradores. Si te desplazas hacia abajo hasta la parte inferior, puedes ver que la búsqueda por sí sola tiene 1,147 páginas diferentes. Además, tan solo en esta semana se han sumado 924,000 nuevas imágenes en stock esta semana. Eso te da una idea del tamaño de Shutterstock. El siguiente recurso que también es gratuito de usar es el sitio web de Wikimedia Commons. Se trata de una base de datos de 31 millones de archivos multimedia libremente reutilizables a los que cualquiera puede contribuir. Estos están dispuestos en imágenes, sonidos, y también videos. Estos son todos licenciados bajo el Creative Commons. Nuevamente, todos estos son gratuitos de descargar. Pero solo haz chequear cada imagen individual. Basta con revisar los acuerdos de licencia y también si se requiere alguna atribución. Por último, si solo quieres hacer una búsqueda en Google. Busquemos de nuevo a los tigres, y luego vayamos a las imágenes. Una herramienta útil que podemos utilizar son las Herramientas de Búsqueda. Hacemos click en “Herramientas de búsqueda” y luego en “Derechos de uso”. Después podemos filtrar las imágenes por el tipo de licencia. Yo sólo voy a buscar tigres etiquetados para su reutilización con modificación. Después éstos se filtran hasta los que podemos modificar. Pero de nuevo, haga clic en la imagen individual y vaya a la página web. Tan solo verifica que la imagen sea libre de descargar y si se requiere o no alguna atribución. Por supuesto, puedes encontrar muchos más sitios web de fotografía bursátil gratis y de pago con una rápida búsqueda en Google, pero estos son algunos sitios geniales para empezar. 22. Blog de WordPress: incluyendo medios: Hasta ahora hemos creado nuestra propia entrada de blog con algún texto simple y realmente podemos dar vida a nuestra entrada de blog agregando las diversas piezas de medios como imágenes, videoclips, y también audio también. Ahora, para hacer esto, primero vamos a empezar agregando una imagen destacada. Ya hemos mirado la adición de imágenes destacadas en el primer proyecto, donde las agregamos a nuestras páginas. Con este proyecto al añadirlos a nuestra entrada de blog, en este tema, la imagen destacada se mostrará junto a nuestra entrada de blog excepto justo dentro de esta publicación de blog. Si nos desplazamos hacia abajo a nuestras entradas de blog de muestra, podemos ver la imagen destacada justo aquí. Añadamos estos si entramos en nuestra entrada de blog o también podemos acceder directamente desde nuestro panel de control también, también podemos entrar en el enlace edit post. Por encima de la derecha, tenemos la sección de imágenes destacadas del menú donde podemos establecer esto para nuestra entrada de blog. Puedes seleccionar tu propia imagen para subir o acceder directamente a la mediateca. Todas estas imágenes se han proporcionado cuando descargamos los datos de muestra. Por lo que tenemos algunas imágenes con las que trabajar para este proyecto. Selecciona cualquiera de estos y convenientemente también tenemos cosas como el texto alt ya rellenado para nosotros. Podemos simplemente establecer esto como nuestra imagen, Actualizar, luego volver a nuestro proyecto, visitar sitio. Ahora tenemos una imagen para nuestra entrada de blog. Ahora bien, esta es una gran manera de agregar una imagen cuando mostramos una lista de todas nuestras publicaciones de blog como esta. Pero ¿qué pasa si hacemos click en esto para ver la entrada completa del blog? También queremos añadir a veces imágenes entre todo este contenido de post de blog también. Ahora, para hacer esto, en realidad voy a volver a la Vista de Panel, y vamos a refrescar esto para que tengamos la versión actualizada. También se pueden agregar imágenes como bloque. Podemos pasar el rato sobre la zona donde queremos añadir un nuevo bloque. Haga clic en “Agregar”. Este bloque de imagen se encuentra actualmente en la parte superior o también podemos buscar. Haga clic en esto. Entonces también podemos subir una nueva imagen o seleccionar una de la Mediateca. Al igual que antes, lo hemos llevado a todas nuestras imágenes que actualmente tenemos. Podemos seleccionar cualquiera de estos, actualizar nuestro post, y también al front end de nuestro sitio, podemos refrescar. Ahora vemos que se ha insertado nuestra imagen. Al igual que con la mayoría de estos bloques de contenido, también podemos hacer clic en estos o pasar el ratón sobre y podemos ver ocho opciones menú. Tenemos muchas opciones diferentes como recortar la imagen, podemos enlazar a diferentes URL. También podemos reorganizar nuestro contenido para estar por encima o por debajo de diferentes bloques y también por encima de la derecha, tenemos algunas opciones también. Podemos jugar con el estilo de nuestra imagen redondeando las esquinas, podemos cambiar los textos alt, podemos cambiar el tamaño, y así como yo agregando una sola imagen como esta. También podemos subir múltiples imágenes en forma de galería. Una galería también es un bloque de contenido y solo necesitamos seleccionar una ubicación donde queramos esto, hacer una búsqueda de la galería. Entonces a partir de aquí, tenemos las opciones familiares de subir nuevas imágenes o también acceder a la Mediateca. Una vez que nos apegamos a la mediateca, podemos seleccionar múltiples imágenes para mostrar dentro de esta galería y elegir cualquiera de éstas. Queremos seleccionar estos cinco. Haga clic en “Crear”. Justo antes de insertarlas en nuestra galería, también podemos arrastrar y soltar estas imágenes para reorganizarlas. Una vez que estemos contentos, inserte estos. Estas imágenes de galería también se pueden vincular a las URL, y también podemos cambiar el número de columnas que quieras. Esto es realmente flexible de usar. Actualiza esto y pasa a la página web y actualiza nuestra entrada de blog. En primer lugar, vemos que nuestra imagen tiene las esquinas redondeadas. Si vamos a la página 2, ahora tenemos una bonita galería de imágenes. de imágenes, también podemos insertar diferentes tipos de medios, como videoclips. Esto se inserta prácticamente de la misma manera si volvemos a nuestra pantalla de edición. Entonces si encontramos alguna ubicación donde queremos agregar cualquier bloque, da click en “Agregar”. Busca el video. Si ya tienes un video clip guardado en tu computadora, puedes, por supuesto, usar esto también. Voy a ir a pixabay.com. Si haces click en el menú desplegable, podemos buscar videos. Golpea “Enter”. Nos dará una lista de todos los videos que podamos seleccionar de este sitio. Este se ve bien. Haga clic en este “Descargas”. Yo sólo voy a ir por la versión más pequeña por ahora. Entonces una vez que esto esté terminado, recuerda que éste no está insertado actualmente en la Mediateca, por lo que necesitamos ir a Subir, a las Descargas. Selecciona este clip, y subirlo automáticamente lo colocará en la Mediateca 2. Por encima de la derecha, tenemos varias opciones de video, como podemos bucear este video, podemos silenciarlo cuando se carga inicialmente, también podemos agregar el control como reproducir y pausar, y también reproducir también. Imagen de póster, esta es una imagen fija que se mostrará cuando el video no se esté reproduciendo. Esta es una característica muy útil para tener también. Nuevamente, también puedes reorganizar estos bloques y cambiar algunas de las opciones. Una vez que estés contento, haz click en “Actualizar”. Podemos comprobar si esto está funcionando actualizando nuestra entrada de blog. Tenemos los controles al fondo con el tiempo. Haga clic en “Play” y esto todo funciona bien. A continuación, es posible que también quieras agregar clip de audio a tu entrada de blog y este coloca esto abajo en la parte inferior. Haga clic en el botón “Insertar bloque”. Como cabría esperar, a esto se le llama bloque de audio. Para agarrar un clip de audio, voy a ir a bensound.com. Esto dará algunas muestras de audio gratuitas que podrás descargar. O también puedes usar las tuyas propias si lo prefieres. Da click en el botón Descargar para cualquiera de estos y podemos descargar una versión gratuita para utilizarla con atribución. Atribución significa que necesitamos acreditar a benson.com con este clip de audio. Para ello, solo necesitamos copiar este ejemplo en la parte inferior. Descarga esto. Al igual que hicimos con el videoclip, vuelta al post, selecciona esto de nuestras descargas. Este clip de audio ahora está insertado. Tenemos el botón Reproducir y también podemos cambiar la configuración de audio de la derecha también. Estos incumplimientos están bien para mí. Simplemente voy a dar click debajo de este clip de audio y luego insertar la atribución. Actualiza esta entrada de blog, actualiza el navegador y podemos probar si esto está funcionando. Tal vez no puedas escuchar esto desde tu extremo, pero todo esto está funcionando bien. Si echamos un vistazo a todos los diferentes tipos de bloques también varía sobre tipos de bloques en medios los cuales también puedes insertar en estas entradas de blog. Lo último que les voy a mostrar es cómo insertar algunos medios directamente desde una URL. Para esto, coloquemos en agregar bloque de imagen, y luego podemos usar la tercera opción que es insertar desde URL. Pero esto, por supuesto, necesitamos una URL de medios para enlazar. Un buen lugar para agarrar de estos es el sitio web de Wikimedia Commons, que está disponible en Commons.wikimedia.org. Puedes buscar a través de la enorme biblioteca de imágenes gratuitas para seleccionar. Todo lo que voy a seleccionar esta imagen del día. Haga clic en esto y luego nos llevan a la versión de tamaño completo donde podemos hacer clic derecho. Podríamos guardar esta imagen y añadirla a la mediateca. Pero en cambio, voy a copiar la dirección de la imagen y luego pegar esto como nuestra URL. Golpea “Enter”. Hay una vista previa de nuestra imagen. Actualizar, recargar. Esta es solo una forma diferente de agregar imágenes en lugar de usar la Biblioteca Medial. Nuestras imágenes también ahora se muestran en la parte inferior. Esta es sólo una forma alternativa de agregar imágenes en lugar de acceder a la mediateca. 23. Blog de WordPress: usuarios, permisos y gestión de comentarios: Ahora es el momento de pensar en quién realmente va a estar usando nuestro blog y también en cuánto acceso realmente tiene cada usuario. Cuando dentro de la vista del panel así como esta, es posible que ya hayas notado que tenemos esta opción de “Usuarios” sobre la izquierda. Si paso el cursor sobre esto, tenemos la opción de entrar a todos los usuarios, podemos agregar directamente uno nuevo, o podemos entrar en nuestro perfil actual. Nuestro perfil actual tiene algunas opciones, como cambiar el esquema de color, también podemos actualizar nuestra información personal, nuestra información de contacto, nuestra foto de perfil, y también restablecer la contraseña también. Pero este video no se trata de esos, esto de agregar nuevos usuarios, y también de revisar los diferentes permisos que tienen también. Pasemos a la sección Todos los usuarios. Arriba en la parte superior vemos nuestro blog admin, que es el único y único usuario que tenemos configurado. También podemos añadir un nuevo nombre si quisiéramos desde la pantalla de edición. Podemos ver nuestro correo electrónico. También tenemos esta función de administrador. Un administrador es un usuario que tiene todos los permisos requeridos para hacer o cambiar cualquier cosa que quieran en este sitio. Es por ello que tenemos todas estas opciones a la izquierda. Podemos eliminar, publicar, podemos agregar nuevas páginas, podemos aprobar comentarios, y también cambiar el aspecto y la sensación de este sitio. Cuando sólo tenemos un solo sitio, igual que lo hacemos aquí, este es el papel de primer nivel. Hemos creado dos entradas de blog cuando de hecho solo hemos creado una. Pero cuando configuramos WordPress por primera vez, también se asignó el ejemplo “Hello world” a nuestro usuario. Este, agregamos los datos de la muestra. También se incluyeron con estos datos dos usuarios adicionales. La diferencia entre estos dos y nosotros mismos es este papel de suscriptor. Echaremos un vistazo a esto con más detalle en tan solo un momento. Dado que actualmente estamos logueados como administrador, también tenemos la facultad de poder seleccionar cualquiera de estos usuarios adicionales. También podemos entrar en la pantalla de edición y cambiar cualquiera de los detalles. También, muy importante, también podemos cambiar el papel actual. Si quisiéramos tener un administrador adicional podríamos, y también generalmente actualizar o rebajar cualquier rol de usuario. Acceder a todos los usuarios si quisiéramos, también podríamos incluso eliminar usuarios. Hacemos esto de manera similar a cuando tratamos las páginas y las publicaciones del blog. Todo lo que tenemos que hacer es pasar el cursor sobre cualquiera de estos usuarios y seleccionar el botón “Eliminar” o también podemos aplicarlos a granel también seleccionando varios, y luego lo ves desplegable desde arriba. Como acabamos de ver con el desplegable en la pantalla de edición, junto al administrador y suscriptor, sí tenemos varios otros roles también. Para saber más sobre estos ajustes, podemos ir a nuestro motor de búsqueda y hacer una búsqueda de roles de WordPress. Mi búsqueda principal es del sitio WordPress.org y nos lleva directamente a los roles y capacidades. Haga clic en esto, desplácese hacia abajo, y luego veremos un resumen de cada uno de estos roles. Sí mencioné antes, cuando tenemos un solo sitio web como lo hacemos, que el administrador es el rol de nivel superior. Como podemos ver, se trata de alguien que tiene acceso a todas las características administrativas dentro de este único sitio. No obstante, como lo sabremos más adelante en este curso, también podemos crear una red WordPress o una instalación multisitio de WordPress. Este tipo de configuración de WordPress también genera un nuevo tipo de rol llamado el super admin. Un super admin es alguien que es responsable de todas las características de administración en la red de sitios. No necesitamos preocuparnos por este super admin todavía, todo en lo que necesitamos enfocarnos son los cinco roles justo debajo. Justo debajo del administrador, también tenemos al editor. Este editor también tiene alguna responsabilidad. También pueden publicar y también administrar sus propias publicaciones de blog, y también publican para otros usuarios también. Después de esto, tenemos al autor. Se trata de alguien que puede publicar y administrar sólo su propio post y no cualquier post de ningún otro usuario. Después de esto, tenemos un colaborador que es alguien que puede escribir sus propios mensajes, pero no pueden publicarlos directamente sin una confirmación del administrador. Entonces, por último, el rol más bajo es el suscriptor. Esto es solo alguien que puede registrarse en nuestros sitios y también administrar su propio perfil también. No pueden crear ningún contenido, no pueden administrar el contenido de otras personas. Todo lo que pueden hacer efectivamente es registrarse y cambiar los detalles de su usuario. También podemos ver aquí que nuestra cuenta de administrador se ha creado automáticamente cuando configuramos WordPress por primera vez. Ahora, con esto en mente, podemos agregar manualmente un nuevo usuario a nuestro sitio. Dirígete al tablero y tenemos este botón “Añadir nuevo” en la parte superior, que también podemos acceder desde la barra lateral. Doy clic en esto y voy a agregar un usuario de prueba de muestra y un correo electrónico. Sólo prueba por ahora, una terrible contraseña. De prueba 2, confirmará que esto está bien porque solo estamos creando un usuario de muestra. Entonces en la parte inferior también podemos cambiar el rol también, que queremos dejar como suscriptor, que era el nivel inferior de roles. Confirma esto. Se ha creado un nuevo usuario. También podemos editar cualquiera de estos detalles si queremos. Pero ahora voy a cerrar sesión en el perfil de administrador al pasar el cursor por encima de esta sección en la esquina. Haga clic en “Cerrar sesión” y luego podremos iniciar sesión como nuestro usuario de prueba, que fue test @test, una contraseña súper fuerte. Inicie sesión, y ahora nos llevan al perfil de nuestro usuario de prueba. Ya hemos visto antes por los roles y capacidades que un suscriptor sólo puede administrar su propio perfil. No tienen acceso a ninguna de las otras funciones de administración, y es por ello que no vemos ninguna de las funciones de administración en la barra lateral. No podemos crear nuevas publicaciones o páginas o generalmente tener alguna entrada en el sitio. También cualquier contenido que se cree necesita también ser aprobado por el administrador. Podemos ver esto si vamos a nuestro sitio y luego refrescamos. Vemos que nuestro usuario ha sido actualizado a nuestra prueba. Dirígete a la página de inicio y selecciona cualquiera de estas entradas de blog. Recuerda que se habilitaron los comentarios para esta publicación. Voy a dejar un comentario abajo en la parte inferior de “Hola”, luego haga clic en “Publicar”. Tenemos un mensaje de “Tu comentario está a la espera de moderación”. Dado que no tenemos aprobación para publicar ningún contenido en este sitio, lo que ahora tenemos que hacer es volver a cerrar sesión por nuestro propio nombre. Cerrar sesión y luego volver a iniciar sesión como nuestro administrador, ese fue el administrador del blog. Una vez más, tenemos acceso a todas nuestras funciones de administración. Después de otra parte de la izquierda podemos ver tenemos cuatro comentarios en espera de aprobación, dirígete a este apartado. Podemos ver incluyendo nuestros datos de muestra tenemos 34 comentarios en total, 30 han sido aprobados, y tenemos cuatro los cuales están pendientes. Haga clic en esto también, filtre esto hacia abajo, y tenemos los comentarios de nuestro usuario de prueba en la parte superior junto a los tres comentarios de los datos de muestra. Podemos o pasar el cursor sobre estos manualmente y aprobar. Podemos editar el contenido. Podemos o eliminar esto si no queremos que esto se publique en nuestro sitio, o si queríamos aprobar todos estos comentarios a la vez, vamos a dar clic en esta casilla de verificación. En las “Acciones Bulk” podemos aprobar, aplicar esto, y los cuatro comentarios ya han sido aprobados. Pasar a nuestras publicaciones de blog y refrescar. El hola comentarios ya ha sido aprobado y es visible justo debajo de nuestra entrada en el blog. Por defecto, cuando registramos a nuestros usuarios, vimos que esto tiene el rol de suscriptor. También podemos cambiar esto dentro de nuestra configuración si quisiéramos, la opción “Ajustes” y luego por “General”. Una de las opciones dentro de aquí es el “Rol predeterminado de nuevos usuarios”; actualmente, este está configurado para suscriptor. ¿ Y si tuviéramos un cierto caso de uso para un mayor nivel de rol? También podríamos establecer que esto sea un defecto diferente también. También como administrador también tenemos muchas más opciones para controlar la configuración de la discusión o los comentarios. Todavía dentro de la configuración tenemos este enlace de discusiones, y esto realmente nos permite afinar todos estos ajustes relacionados con nuestros comentarios. Podemos tener cosas, como confirmaciones por correo electrónico cuando se publica un nuevo comentario. Podemos comprobar si el autor debe llenar su nombre y correo electrónico. Podemos comprobar si necesitan estar registrados e iniciados sesión para comentar. Podemos cerrar comentarios después de una cierta cantidad de días, y también varias otras opciones también, como la lista negra de ciertas palabras que pueden incluirse en un comentario. Ahí vamos. Es así como podemos gestionar a diferentes usuarios en nuestro sitio web de WordPress, cómo podemos cambiar los permisos de un usuario, y cómo podemos controlar de forma segura los comentarios que se publican en nuestro blog. 24. Blog de WordPress: cómo añadir páginas: Ahora, nos hemos estado centrando principalmente en nuestro blog y también en nuestras publicaciones de blog, pero en este video, vamos a ver cómo podemos agregar algunas páginas personalizadas, como una página Acerca de Nosotros y también una página Contáctenos también. Páginas que se añadieron con el contenido de muestra antes se han agregado automáticamente a nuestro menú en la parte superior. No necesitamos ninguna de estas páginas para nuestro proyecto, así que vamos a eliminar estas y luego crear las nuestras propias, a la vista de Dashboard y dentro de las páginas seleccionar “Todos”. A partir de aquí, podemos pasar el ratón por encima y eliminar cualquiera de estos manualmente o podemos hacer clic en la casilla de verificación superior y luego eliminarlos con las acciones masivas, pasar a la basura, y aplicarlo a todas estas. También tenemos una segunda Página. Voy a quitar estos también, Añadir Nuevo. Esta primera página será la About Us, por lo que agregando el título de la página. Entonces podemos seguir adelante y agregar algo de contenido justo debajo. Puedes crear cualquier información de Acerca de Nosotros que quieras, pero voy a ir a Lorem Ipsum y luego agarrar algún contenido de muestra, colocar dentro de aquí. Busca “Lorem Ipsum”, dirígete a lipsum.com. Podemos generar tantos párrafos como quisiéramos. Voy a quedarme con cinco. Copia todo esto de vuelta a una nueva página y luego podemos pegarlo en el bloque justo debajo. También, al igual que antes, podemos pasar el cursor sobre cualquiera de las secciones y podemos editarlas, podemos cambiar los colores, podemos cambiar todos los ajustes de la fuente. No obstante, sólo voy a dejar esto como texto plano por ahora. Pero esta es una opción de agregar contenido por página, además de agregar todos estos bloques de contenido, si vamos a la sección de página sobre la derecha, entre todas las demás opciones tenemos los Atributos de Página donde puede seleccionar una plantilla. Una plantilla es algo que es proporcionada por el Creador de Temas y nos permite crear diferentes diseños y en diferentes tipos de contenido a nuestras páginas de WordPress. Estas plantillas son archivos especiales los cuales se insertan en nuestro tema, y podemos usar ya sea en una sola página así, por lo que solo aplica a una o una sola página, o podemos tener una plantilla más genérica la cual quieres aplicar a páginas múltiples. Por ejemplo, podríamos tener una plantilla que es para una página 404, entonces podríamos tener una plantilla multiuso diferente, que se aplica a todas las páginas para darnos una apariencia y sensación consistentes. Miraremos las plantillas con más detalle cuando lleguemos a crear nuestro propio tema desde cero, cual haremos más adelante en el curso. Pero por ahora vamos a quedarnos con este contenido de página que has agregado dentro de los bloques, publiquemos nuestra página, confirmemos. Ahora si actualizamos, todas estas páginas de muestra han sido eliminadas y la página Acerca de nosotros se ha agregado automáticamente a este menú. Haga clic en esto. Ahí están todos los textos que hemos añadido a nuestra página. Por supuesto, somos libres de usar tantos bloques como queramos. Podemos agregar medios y todos los diferentes tipos de bloques que hemos visto en videos anteriores, así como este contenido y también las plantillas, hacemos click en esto. También tenemos diferentes opciones de diseño abajo en la parte inferior. Actualmente estamos usando este diseño predeterminado, que se puede ver es el texto de la izquierda y la barra lateral de la derecha. También podemos cambiar esto, por ejemplo, si una de estas barras lateral se reemplaza a la izquierda, podemos actualizar esto, refrescar. También podemos quitar la barra lateral y que el contenido sea el ancho completo de la página. Esto es realmente útil para cambiar el aspecto y la sensación de nuestras páginas. Quiero dejar esto como predeterminado, que es la barra lateral de la derecha. Recuerda, todas estas opciones están disponibles por el tema específico que hemos elegido. Tal vez estés pensando: “Bueno, ¿cómo sabemos exactamente qué opciones están disponibles antes de descargar un tema?” Bueno, esto está disponible al descargar un tema de wordpress.org y también algunos de los proveedores de temas en general también. Si entramos en la sección temática, echemos un vistazo a nuestro amplio tema. Esta es una de aquí, por lo que podemos dar click en “More Info” y luego vemos esto tiene 13 áreas de widget diferentes; tiene cuatro diseños de página diferentes, diferentes plantillas de página, es responsive, y por todas partes con diferente diseño y opciones de color también. Ahora bien, aunque hemos mirado estas opciones temáticas en el pasado y también las etiquetas que estaban disponibles, ojalá ahora hayas visto inacción dentro de un sitio. Deberías estar ahora mucho más cómodo con Slack y un tema en particular, basado en estas opciones. Voy a nuestro tobogán. Ahora, voy a añadir el resto de las páginas que necesitamos, que va a ser la página Contáctenos y también la página Blog. Asegúrate de que esto esté actualizado, y luego podemos hacer clic en el “Icono de WordPress”, nos llevan de vuelta a todas las páginas, “Añadir nuevo”. Este será para el Contáctenos. Justo debajo de esto, voy a agregar un bloque de contenido que es una lista. Busquemos esto y solo unas pocas líneas de datos de direcciones de ejemplo, Línea de dirección 1. Copia esto, pulsa “Enter” y podemos sumar tantas líneas como queramos dentro aquí. Realmente no importa para esta demostración. Al igual que con todos tus bloques, podemos seleccionar cualquiera de estas líneas. Podemos cambiar esto para que sea una lista ordenada con los números, pero voy a mantener esto como la lista con viñetas, que está desordenada. Al igual que con la mayoría de los bloques de texto, podemos dar formato al texto, podemos cambiar el color, y también cambiar los enlaces si quisiéramos. Ahora, podríamos seguir adelante y publicar esta página si quisiéramos, y esta página se añadirá automáticamente a nuestro menú junto al enlace Acerca de Nosotros. No obstante, aunque voy a hacer esto un poco diferente, lo que me gustaría que la página Contáctenos es que esto solo aparezca cuando pasemos el cursor sobre el enlace Acerca de Nosotros. Entonces cuando coloquemos el mouse sobre esto, is obtendrá un menú desplegable donde podremos seleccionar nuestra página de contacto. Haz esto, en lugar de publicar esto directamente, vamos a ir a la configuración de página y luego a la “Página de padres”. Solo tenemos esta página Acerca de Nosotros, por lo que podemos seleccionar esta. Si contamos con múltiples páginas, también podríamos reorganizar el pedido. Pero por ahora pulsa “Publicar”, “Confirmar”, refresca nuestro blog. Después pase el cursor sobre el enlace Acerca de Nosotros revelará nuestra nueva página de contacto. También podemos seleccionar esto y nos llevarán a nuestra página Contáctanos, cual está anidada dentro del enlace Acerca de Nosotros. Ahora se trata sólo de algunos datos que se van a mostrar, pero más adelante vamos a volver a esta página y añadir un formulario de contacto. Tan solo para redondear este video de vuelta al Dashboard en las páginas donde vamos a añadir nuestra tercera y última página para el blog. La página del blog va a ser el hogar de nuestras entradas de blog en lugar de la página de inicio predeterminada, cual tenemos actualmente, si hacemos click en nuestro “Icono del Sitio”. Por el momento, todas estas entradas de blog están listadas en esta página de inicio, pero más adelante tendremos una página de blog dedicada donde éstas se colocarían dentro. Todo lo que tenemos que hacer es publicar esto, refrescar y ahora esta página vacía ahora se está colocando también dentro de la barra de Nav. Estas son todas las páginas que necesitamos por ahora. A continuación, vamos a echar un vistazo a los Menús de Navegación y cómo agregar un menú personalizado a nuestro sitio. 25. Blog de WordPress: cómo añadir nuestro menú de navegación: Como hemos descubierto en el video anterior, cada vez que agregamos una nueva página, se agrega automáticamente a nuestro menú y además, este menú ya está creado para nosotros. No hemos hecho nada para crearlo nosotros mismos. Este menú en particular se ha agregado cuando creamos los datos de muestra en los primeros videos. Pero claro, no queremos depender de los menús de muestra. Queremos saber cómo crear la nuestra propia. Al igual que con todo lo demás en WordPress, tenemos que ir al tablero, y luego a las opciones principales. Para crear o gestionar nuestros nuevos menús, tenemos que ir a la apariencia. Esto cuenta con un enlace de menú dedicado. En la parte superior, tenemos un menú desplegable con todos los menús disponibles los cuales se están proporcionando con los datos de muestra. Actualmente tenemos todas las páginas seleccionadas y por el momento vemos tenemos algunos errores dentro de este menú y todos estos han sido cambiados a este color rosa, por lo que sabemos que hay un error. Cada uno de estos bloques rosados va a ser un enlace de menú. Tenemos una página de blog, tenemos la portada, tenemos el sobre las pruebas y estas todas son sub páginas las cuales están anidadas justo debajo de esta página también. El motivo por el que vemos estos errores es porque hemos eliminado todas las páginas no utilizadas de nuestro sitio. Esta es sólo la forma de WordPress de advertirnos que ya no tenemos acceso a ninguna de estas páginas. Podríamos seguir adelante y eliminar cualquiera de estos enlaces o también podríamos eliminar el menú completo también. Igual para cualquiera de estos menús existentes, podemos seleccionarlos. Podemos ir a “Seleccionar”. Entonces también podemos eliminar cualquiera de estos menús no utilizados. Pero por el momento, solo voy a seguir adelante y crear nuestro nuevo menú con este enlace justo aquí. Este menú va a reemplazar el nuestro en la parte superior. Voy a darle a esto un título de navegación superior. Crea nuestro menú y luego podemos seleccionar algunas opciones de la configuración justo debajo. La primera opción es agregar automáticamente nuevas páginas de nivel superior a este menú. Esto significa al igual que en el video anterior, que cada vez que creemos una nueva página, ésta se añadirá automáticamente a nuestro menú. Este tema ya viene con tres ubicaciones diferentes donde podemos colocar nuestro menú. Este va a ser el menú principal. Vamos a dar click en esto. Podríamos guardar esto y comprobarlo, pero aún no tenemos páginas que mostrar en nuestro tema. Lo que tenemos que hacer es ir a agregar elementos de menú y luego podemos seleccionar qué contenido queremos colocar en este menú. Debajo de la pestaña Páginas, voy a seleccionar todo, añadir esto a nuestro menú, y ahora tenemos nuestros tres enlaces de menú. También podemos elegir varias entradas de blog que desea agregar. También podemos crear enlaces personalizados para ir a sitios web externos. Para esto, solo agregamos una URL a la que quieres enlazar, y luego algunos textos que quieres mostrar para nuestro enlace de menú. Por último, también tenemos categorías donde podemos seleccionar diferentes categorías a las que queremos brindar un enlace directo. Pero por ahora, las tres páginas están bien así que vamos a guardar este menú. Es todo de tamaño y refresca. Ahí están nuestros tres enlaces en su lugar. Podríamos dejar esto estructurado exactamente cómo es. O si quieres tener un sub-menú igual que hemos visto antes donde se coloca el contacto debajo del enlace Acerca de Nosotros, necesitamos volver a nuestras páginas y luego el enlace infantil, necesitamos hacer click en, mover esto hacia la derecha. Pop esto en su lugar y esto ahora se clasifica como un subelemento. Si queremos que esto vuelva a ser movido al nivel superior de nuestro menú, podríamos arrastrar esto de nuevo, o entrar en nuestro ítem y dar clic en el enlace Out from under About Us. Guarda esto, recarga. Quiero pasar el rato con menú desplegable en su lugar. También sigamos adelante y agreguemos un menú más, que se va a colocar abajo dentro del área de pie de página. Esto se colocará junto a nuestro texto sobre el lado derecho, en la opción de nuestro menú. Podríamos crear un nuevo menú y colocarlo en el área de pie de página o en su lugar, si vamos a administrar ubicaciones, podemos reasignar diferentes menús a diferentes ubicaciones. El menú de pie de página, vamos por el menú social preexistente. Guarda nuestros cambios. Ahora si nos refrescamos, vemos que nuestros enlaces de redes sociales se colocan abajo en la parte inferior. Si queremos reorganizar el orden de cada uno de estos enlaces, solo tienes que seleccionar el menú que quieres editar. Por ejemplo, el menú social. Selecciona esto y luego podremos reordenar cada uno de nuestros enlaces. Además, si queremos enmendar esto de una manera más visual, también podemos entrar en el personalizador de temas, selecciono nuevo enlace personalizado, y el personalizador nos dará una vista previa visual de todos los cambios que hicimos a nuestro sitio. Cuenta con una sección de menús donde podemos acceder a todas las ubicaciones y a todos los menús existentes. Por ejemplo, el menú social, podemos dar click en esto. También podemos modificar nuestros enlaces y todos estos cambian en tiempo real. Si cambiamos una de las etiquetas y luego bajamos a la parte inferior, podemos ver que esto ha sido previsualizado dentro del navegador. Es así como podemos agregar menús, cómo podemos eliminar menús, también cómo podemos editarlos, y reorganizarlos y en la próxima sección vamos a familiarizarnos mucho más con este personalizador. Tengo para ti muchas de las opciones de personalización disponibles para que este tema sea más personal. 26. Blog de WordPress: el personalizador en más detalles: En los videos anteriores, ya hemos echado un breve vistazo al personalizador, que está disponible en la pestaña Apariencia dentro del tablero. El personalizador es una forma de hacer cambios a nuestro tema y ver una vista previa en vivo de estos cambios antes de guardarlos y hacer que estos se apliquen a nuestro proyecto. Ahora vamos a volver a visitar el personalizador y hacer algunos cambios en el aspecto y la sensación de nuestro sitio. Sobre mi escritorio, tengo una carpeta Imágenes para este proyecto y esto está incluido con este curso. Puedes descargar esto tú mismo y usar las mismas imágenes que yo. O en su lugar, si lo prefieres, puedes elegir las tuyas propias y utilizarlas en su lugar para la mediateca. Tenemos estos disponibles. Vamos a la biblioteca medial ahora, y luego podemos arrastrar sobre la carpeta completa del proyecto, y soltar esto dentro de aquí. Tienes varios logotipos e imágenes, tienes algunos iconos, y también una textura que usaremos pronto. Con esto ahora en su lugar, ahora podemos volver a la apariencia y luego a la opción de personalizar. Algunas de estas opciones tendrán videos dedicados próximamente. No vamos a pasar por todas las opciones ahora mismo en este video, pero vamos a empezar por la parte superior dentro de la sección de encabezados y empezar por agregar un logotipo. Podemos hacer esto dentro de la opción Encabezado, y luego en la Identidad del Sitio. Desde aquí vamos a añadir un logotipo el cual va a aparecer junto al título de nuestro sitio. Se puede elegir cualquier logotipo, por supuesto. Voy a usar este el cual se incluye con el curso así. También podemos recortar esto si lo preferimos. Voy a hacer de esto el tamaño completo. Se puede recortar. Por el momento, no vemos ningún cambio apareciendo dentro de nuestra vista previa. Esto se debe a que si nos desplazamos hacia abajo, también tenemos una tercera opción, si queremos mostrar el logotipo, o los textos, y en realidad podemos seleccionar ambos, por lo que estos aparecen uno al lado del otro. Al lado de título, esto se está configurando automáticamente cuando creamos un sitio de WordPress desde el principio, y puedes cambiar esto si quieres. Voy a dejar esto tal como está, pero voy a cambiar la línea de etiqueta justo debajo. Esto va a ser todas las cosas desarrollo web. Podemos ver como estamos escribiendo, esto se actualiza automáticamente dentro de la vista previa, y lo último que voy a actualizar en la sección va a ser el ícono del sitio. Esta es la pequeña imagen que aparece dentro de la pestaña del navegador. Podemos seleccionar un ícono, voy a ir por éste, debajo de éste. Vemos que esto se está aplicando automáticamente a nuestro top. Si lo desea, también puede cambiar el color del texto del encabezado, pero estoy contento con el color, que se suministra como predeterminado. Un par de cosas más a destacar también aquí es que también tenemos algunas opciones para ver cómo se ve el sitio en diferentes tamaños de pantalla. Abajo en la parte inferior, actualmente estamos en la vista de escritorio, también podemos previsualizar el aspecto y la sensación de esto en una tableta. Podemos hacer click en el botón central para hacer esto, y también en la vista móvil de pantalla más pequeña también. Esto nos da una buena oportunidad de previsualizar cómo se verían las cosas si tal vez subimos una imagen que es demasiado grande, texto impresionante que no encaja del todo, pero generalmente muchos de estos temas que subiste a la Theme Store, son generalmente plenamente receptivos. No podemos publicar nuestros cambios una vez que estemos contentos, y estos también se reflejarán dentro de nuestro sitio. De vuelta al personalizador, sí tenemos muchas opciones diferentes dentro de aquí. vemos algunos atajos a la derecha. Podemos hacer click en el ícono del lápiz junto a cualquiera de estas áreas editables, y luego llevamos directamente a la sección del personalizador, donde podemos realizar nuestros cambios. Volver al menú principal en la parte superior, tenemos esta opción global donde podemos aplicar algunos ajustes para diferentes colores, nuestra tipografía, y también nuestros diseños y fondo también. Si quisieras, podrías cambiar todos los colores. Tenemos un color primario establecido por la oferta de temas, y podemos cambiar esto por lo que se aplica a todas las áreas verdes de nuestros sitios. También puedes cambiar esto para que sea un modo oscuro también. Si prefieres esto para tu blog, la opción de tipografía nos dará la oportunidad de cambiar las fuentes estándar que vamos a utilizar para nuestro proyecto, y podemos cambiar esto para que sea cualquiera de estas fuentes estándar suministradas, o uno de los seleccionados de Google también. Lo que ha cambiado tanto el cuerpo como las etiquetas de encabezamiento para ser Roboto, publica esto. El color de fondo, podemos seleccionar cualquier color de fondo diferente que se aplique a fuera de nuestra área de contenido principal. Actualmente se trata de unas barras de color gris claro que puedes ver. Podemos mover el color alrededor a cualquiera de estos colores y cambiar la sensación de nuestro sitio. Si quisiéramos, también podríamos subir una imagen de fondo o una textura para reemplazar este color estándar. Disposición, esto nos dará la oportunidad de establecer el ancho del contenido, que es este color oscuro, gris. Podemos o tener una caja al igual que vemos aquí con cierto ancho, o podríamos tener que sea el diseño más amplio y luego vamos a ir a contenido boxy al centro. Al lado cuando modificamos nuestras páginas a desde este personalizador, también podemos cambiar el posicionamiento de la barra lateral desde aquí si queremos tener una jugada y ver cómo se siente esto con diferentes opciones de diseño. Este es el diseño predeterminado a comenzar, que se aplicará a todas las páginas, y luego tenemos un layout que es más específico a las páginas y también a la publicación de blog también. A lo mejor en este listado de publicaciones de blog, no queremos ninguna barra lateral en absoluto, por lo que podemos seleccionar esta vista, y luego cuando hacemos clic en cualquiera de estas entradas de blog, para que se lleve a la vista de entrada completa. Podemos entonces reintroducir una barra lateral a cualquier lado que queramos. De nuevo, esto también puede ser diferente para todas las páginas, así que si entramos en la página “Sobre nosotros”, todavía veremos una barra lateral por aquí, y también podemos quitar esto. Voy a publicar estos cambios, y luego dar clic en el logotipo del sitio para ser llevado de vuelta a nuestra página de inicio. Si pudiera hacer esto un poco más estrecho. Sí, eso se ve mejor, publica esto. Volver arriba. Tendremos videos dedicados para muchas de estas opciones, pero solo una última cosa que me gustaría mostrarles es el botón adicional de descarga de CSS. Si sí sabes usar CSS, este es un lugar donde puedes agregarlo. Pero no te preocupes si no conoces nada de este código, sólo va a ser un ejemplo de lo que podemos hacer. Por ejemplo, si queremos apuntar a alguno del texto, que es un elemento del EP, podríamos aplicar nuestro CSS personalizado al igual que este, dado como control total sobre todo el estilo y diseño para nuestro tema. No te preocupes si no conoces nada de esto, esto es solo algo extra que tal vez puedas usar en el futuro. Este es el personalizador y también una cosa a recordar al usar el tablero, algunas de las opciones dentro de aquí también nos vincularán de nuevo al personalizador también. Por ejemplo, si vas a la apariencia y luego al enlace del encabezado, esto nos llevará a la sección del encabezado del personalizador. Voy a dejar el sitio como es por ahora y puedes hacer algunos cambios adicionales si lo prefieres, usando el personalizador sin necesidad de aplicar ninguna codificación. Dejaremos ahí este video porque estaremos cubriendo el resto de opciones a medida que avanzamos por esta sección. 27. Blog de WordPress: cómo añadir imágenes de encabezado: Ahora vamos a hacer un poco más de personalización con nuestro encabezado de proyecto. Además, agrega esta imagen de encabezado la cual puedes ver dentro de la vista previa del tema espacioso. El encabezado de imagen es esta gran imagen de fondo con este libro y este teléfono, que aparece en la parte superior de nuestro sitio web. Es ideal para branding y le da a nuestra página web un aspecto y tacto únicos. Esto también se puede hacer en el tablero dentro del personalizador. Volver a la apariencia y a la sección del personalizador donde vamos a saltar al encabezado. Para cambiar estas imágenes necesitamos entrar en la sección de medios de cabecera donde podemos subir un nuevo video o una nueva imagen de encabezado. Podríamos reproducir un video en segundo plano si quisiéramos, o enlazar a una URL de YouTube. En cambio, voy a ir por la imagen del encabezado. Haga clic en “Añadir nueva imagen” donde podemos subir una nueva o saltar a la mediateca. El imagen que voy a usar es éste justo aquí. Selecciona esto y también podemos recortar el tamaño si quisiéramos o dar click en “Recortar”. Este será subido en la parte superior de nuestro proyecto. También podemos agregar múltiples imágenes también. Se cuenta con un segundo proporcionado con este curso. Esta es imagen de computadora justo aquí. Nuevamente, seleccione y recorte. Desde el personalizador, podemos ver que este es el encabezado actual y también tenemos algunos subidos previamente también. Si quisiéramos, podríamos quedarnos con una sola imagen, o en su lugar, podemos hacer clic en “Encabezados cargados aleatorizados”. Después se muestra uno aleatorio cada vez que se ha cargado la página. Por defecto, esto aparece por encima de nuestra sección de cabecera. Podemos mover esto justo abajo haciendo clic en “Posición abajo” dentro de esta sección en la parte inferior. Si ahora publicamos estos cambios y pasamos a nuestro sitio, refresca. Si seguimos actualizando el navegador vemos que se selecciona una imagen aleatoria cada vez que se carga la página. También volveremos a esta imagen de cabecera más adelante en el proyecto donde vamos a reemplazar esto por un carrusel. Ahora bien, esto está bien. Volvamos al personalizador. Si retrocedemos un nivel en la sección de encabezado, también podemos hacer clic en el menú principal también. A partir de aquí, vamos a habilitar el icono de búsqueda en el encabezado. Esto nos dará un cuadro de búsqueda el cual podremos buscar cualquier entrada de blog, o página de nuestros sitios. Por ejemplo, hemos incluido algunos Lorem Ipsum. Si buscamos esto, veremos esto luego regresará nuestra entrada de blog con el texto de Lorem. También podemos cambiar esto para que sea el nuevo menú responsive también. Para esto, bajamos el tamaño del navegador. Así es como se ve el menú desplegable regular. Si quisiéramos, también podríamos cambiar el nuevo menú responsive, que está apareciendo sobre la parte superior derecha, así como esto. La elección del menú depende completamente de ti, pero quiero dejar esto como sin control y luego publicar nuestros cambios. Ahora tenemos estas imágenes realmente amplias, voy a volver a la configuración global y a la disposición. A donde voy es cambiar esto de nuevo al diseño de caja. Esto simplemente evitará que la imagen se vuelva mucho más ancha que el resto del contenido. Publica nuestros cambios, actualiza el navegador. Nuestros cambios ya han sido actualizados. En el siguiente video, echaremos un vistazo a cómo agregar una imagen de fondo. 28. Blog de WordPress: cómo añadir una imagen de fondo: Antes al mirar el personalizador, agregamos un color diferente a nuestro fondo. Este es el color que rodea a todos estos contenidos más oscuros en el medio. Hicimos esto más en el personalizador, el tablero, en la apariencia y personalizar. En las opciones globales, teníamos una opción de fondo justo aquí, y aquí es donde establecemos este color de fondo. Otra cosa que mencionamos fue que también podríamos cambiar la imagen de fondo. Podemos seleccionar cualquier imagen que quisiéramos colocar en el fondo o incluso una textura de fondo. Suministrado con las imágenes para esto por supuesto es un color de textura gris, que voy a aplicar a este fondo. Podemos ver de inmediato que esta textura se ha aplicado en todo nuestro proyecto. Tenemos varios presets donde podemos repetir la imagen, podemos llenar la pantalla, pero actualmente podemos ver nuestra imagen ya está llenando la pantalla porque esto se repite. A pesar de que la textura suministrada es apenas un cuadrado pequeño, si desmarcamos la Repetir imagen de fondo, podemos ver que sólo tenemos este pequeño cuadrado arriba en la esquina. Esto se coloca en la esquina debido a la posición de la imagen. Nunca tuve una imagen diferente que quisieras colocar en cualquier rincón en particular o incluso en el centro. Podríamos cambiar la ubicación con estos botones. También se puede actualizar el tamaño de la imagen. Otra característica que tenemos abajo en la parte inferior es la capacidad de desplazar la imagen de fondo con la página. Lo que esto significa es que si se comprueba esto, y si nos desplazamos hacia abajo, podemos ver que la imagen de fondo se empuja hacia arriba con el resto del contenido. Si esto, sin embargo, se desmarca así, la posición de fondo se mantiene en una ubicación fija. No me desplazaré con el resto del contenido. Yo lo prefiero al revés. Voy a dar click en el Scroll with Page y también repetir esto para que cubra la imagen de fondo completa. Muchas de estas opciones no son realmente útiles cuando se usa una textura pequeña al igual que esta. hecho de repetir esto suele estar bien para nuestros propósitos. No obstante, si estás usando una imagen diferente, muchas de estas opciones serán mucho más útiles. Haga clic en “Publicar” para guardar nuestros cambios, actualizar el navegador, y los cambios ya han entrado en vigor. 29. Blog de WordPress: complementos e integración con las redes sociales: Bienvenido de nuevo a este video sobre plugins. plugins son una parte realmente importante de WordPress y nos permiten extender el núcleo de WordPress. Ahora con eso, nos referimos a que tenemos unas descargas de WordPress cuando inicialmente configuramos cualquiera de nuestros proyectos de WordPress. Entonces podemos ampliarlo para proporcionar muchas más características diferentes y un conjunto diferente de funciones. Por lo que podríamos incluir cosas como formularios de contacto. Podríamos agregar herramientas para SEO. En este video en particular, echaremos un vistazo agregando un plugin para agregar algunos iconos de redes sociales de la página de inicio de wordpress.org. Podemos entrar en la sección del plugin, igual que lo hicimos al principio con los temas. Podemos ver actualmente tenemos más de 50,000 plug-ins disponibles para ampliar nuestro sitio de WordPress. Tenemos cosas como calendarios de reserva, tenemos galerías, tenemos formularios de contacto. Podemos agregar protección antispam, la capacidad de copia de seguridad de nuestro sitio y si no nos gustó el nuevo editor Gutenberg, que se aplica en la versión cinco y superior, también podemos volver al editor clásico si lo preferimos. Para agregar estos plugins y para ver también qué plugins están disponibles para nuestro sitio, podemos volver al panel, asegurarnos de que cualquier cambio se guarde en el personalizador. Contamos con una sección de plugin dedicada. Haga clic en esto. Actualmente, tenemos la palabra política apremiante, que utilizamos antes. Esto se activó cuando instalamos los datos de la muestra. Los inicios de sesión son realmente sencillos de agregar solo pinchamos en el botón agregar nuevo. El aislamiento es muy similar a un tema. Podemos ver todos los destacados y también los populares plug-ins y podemos instalarlos directamente desde la pantalla. O como hemos visto, hay tantos plug-ins diferentes disponibles que puede que también necesitemos buscar el deseo de querer. En nuestro caso voy a hacer una búsqueda de sociales, llenar todos los iconos de redes sociales. El que voy a usar es éste, que es por en última instancia social. También es realmente importante tener en cuenta que al instalar cualquier plug-ins, vale la pena comprobar cuándo se actualizaron por última vez para asegurarse de que estos se mantengan regularmente y también asegurarse de que estos también sean compatibles con su versión actual de WordPress. Por lo general, las revisiones son una buena indicación de si está instalando un plugin útil o no. Todo lo que necesitamos hacer es dar click en Instalar, que descargará este plug-in y luego una vez hecho esto, podemos activarlo para usarlo en nuestro sitio. Activar este plugin. Una vez que permitimos este plug-in podemos ver después desde la barra lateral, ahora tenemos un nuevo icono dentro del Dashboard. Podemos dar click en esto. Tomamos en nuestras opciones, necesitaremos correr a través de la configuración de nuestro plugin. Vamos a cerrar esto y luego correr a través de algunos de los ajustes requeridos. Tenemos tres configuraciones diferentes que necesitamos configurar arriba en la parte superior. El primero es qué ícono querer mostrar en nuestro sitio. Esto depende completamente de ti. Voy a ir por Twitter y también YouTube. Mantén esto bastante simple. Tan solo confirmaremos la activación. También el feed RSS, podemos quitar esto. Si tienes alguna cuenta con alguno de estos otros proveedores, siéntete libre de revisar estos botones también. Guarda nuestra primera opción. Siguiente opción dos es ¿qué queremos que hagan estos iconos? Por ejemplo, con Twitter, cuando el usuario hace clic en el icono de Twitter, quieres que visiten nuestro perfil, quieres que nos sigan o quieres tuitear sobre la página en particular. En mi caso, voy a poner esto a ser, sígueme en Twitter. Después agrega en mi manejador de Twitter. Abajo a YouTube también podemos insertar la URL de YouTube, que vas a enlazar a tu página de YouTube. También puedes permitir que las personas se suscriban directamente a tu canal también, guardar opción a. Entonces el tercero es donde se mostrarán estos botones? Podríamos permitir que flotaran sobre las páginas de la página web. Establecemos la posición de estos iconos para que estén en las esquinas superiores o en el centro de nuestro sitio. También podríamos agregar algún margen en la parte superior derecha, inferior o izquierda. Se trata de algún espaciado que empujará sobre los iconos desde cualquier lado en particular. Esto quizá sea útil si estos botones están encubriendo cierta pieza de contenido y solo queremos afinar los diseños para que no encubran ninguna información importante. También podemos revisar tantas de estas opciones como quisiéramos. Si lo desea, también podemos colocar estos botones en un widget. Esto permitirá que el widget de redes sociales se arrastre a cualquiera de nuestros temas, áreas de widget. Voy a desmarcar esto ya que no lo necesitamos. La siguiente opción es colocar a través de un código corto. Todavía no hemos cubierto un shortcode, pero este es un pequeño fragmento de código que puedes colocar en cualquiera de nuestras publicaciones o páginas de blog. Esto también lo veremos más adelante, pero por ahora, podemos insertar esto copiando el código dentro de estos corchetes. Al copiar esta sección, podemos colocar nuestros widgets en cualquiera de todas las páginas o publicaciones. Veamos esto en acción ahorrando. Podemos ir a una de nuestras páginas, seleccionar cualquiera de estas y entrar en edición. Entonces todo lo que necesitamos hacer es pegar esto en una actualización de bloque de texto. Entonces podemos echar un vistazo a nuestra página sobre nosotros dentro del navegador. Bajar y debajo de todos nuestros textos ya podemos ver estos iconos de redes sociales se han insertado con este código corto. Esto es realmente útil si queremos incluir esto en una página en particular, en una entrada de blog en particular. Voy a dejar estos iconos en esta página sobre nosotros ya que puede ser útil para el usuario compartir esta página con otros. Volver al tablero, haga clic en el icono de WordPress. De vuelta a nuestros iconos ya podemos terminar la configuración. El lugar, voy a colocar el mío en la parte superior derecha. Podemos dejar el código corto en. Si quisieras también podrías colocar esto en el encabezado del tema y también mostrar esto después de todos nuestros posts. También hay algunos ajustes opcionales justo debajo también. Por ejemplo, si quieres jugar con el diseño y animación de estos, puedes cambiar el aspecto y la sensación de todos nuestros iconos. Podemos agregar un contador junto a cada uno de estos iconos y general adaptar cómo actuarán estos en nuestro sitio web. Voy a dejar todas estas opciones y guardar nuestro plugin en la página web. Ahora podemos ver si visitamos alguna de nuestras páginas, tenemos estos iconos aparecen encima en la parte superior derecha. Podemos hacer click en el icono de Twitter, que es un botón de seguir, donde al instante nos llevan a nuestro perfil y podemos seguir directamente a este usuario. También tenemos un enlace de YouTube el cual probablemente no funcionará ya que no hemos agregado una URL, pero puedes seguir adelante y agregar tu propia URL aquí, o cualquier otro ícono de redes sociales si quisieras. Bueno, con nuestros iconos de redes sociales ahora todos en su lugar y configurados. A continuación, vamos a pasar a modificar esta página de inicio y también introducir algunos widgets. 30. Blog de WordPress: configuración de la página de inicio y widgets: En este video, vamos a enfocarnos en esta página de inicio y reconstruirla usando widgets. Nosotros sí echamos un vistazo a usar widgets desde el principio en este curso, en el otro proyecto. Widgets, si recuerdas, es como una pieza de contenido independiente que podemos arrastrar a una ubicación particular dentro de nuestro tema. Con el tema espacioso, también tenemos acceso a algunos widgets personalizados que se habían suministrado con este tema. También se suministra junto a estos widgets una plantilla de página principal la cual nos va a permitir reorganizar esta página de inicio, parecernos más como lo hizo cuando revisamos por primera vez este tema en WordPress.org. Ahora para hacer esto, vamos a mover toda esta sección de blog, todas nuestras publicaciones de blog, a la página de blog personalizada. Entonces esto nos va a dejar algo de espacio para crear una nueva página de inicio donde podamos añadir esta nueva plantilla. Empecemos de nuevo dentro del tablero. Vamos a bajar a páginas y añadir nuestra nueva página de inicio. Por lo que el título de Inicio. Después, a la derecha, dentro de la sección de atributos de página, podemos seleccionar una plantilla que queremos utilizar. Por el momento, solo estamos usando esta plantilla predeterminada. Pero podemos ver, tenemos algunas otras plantillas que se están proporcionando con este tema. El que vamos a utilizar para esta página de inicio es esta plantilla de negocio, publica esto. Si refrescamos, vemos nuestra página de inicio arriba en la parte superior aquí. Pero como mencionamos justo antes, vamos a hacer de esta nuestra verdadera página de inicio cuando visitemos la raíz de nuestro proyecto. El modo de cambiar alrededor de nuestras páginas es volver al tablero, abajo en la configuración. Tenemos que dirigirnos a la opción Lectura. En lugar de nuestra página de inicio, está trayendo nuestras últimas publicaciones, vamos a cambiar esto para que sea una página estática que es la página de inicio recién construida. Después mueve toda la publicación a nuestra página de blog personalizada. Guarda nuestros cambios. Comprobemos esto todo ha surtido efecto dentro del navegador. Bien. Ahí está nuestra página de inicio. no tenemos ningún contenido, pero volveremos a esto, el blog. Ya veremos que nuestras publicaciones de blog se han trasladado ahora a este enlace de blog. Para construir esta página de inicio, vamos a añadir algunos widgets. Al igual que antes, vamos a la Apariencia en la sección Widget, y luego podemos arrastrar sobre cualquiera de estos widgets disponibles a las áreas de widget de temas. Este tema en particular también tiene algunos widgets personalizados, tendrá todos los widgets personalizados empezando por ATG. Sabemos cuáles son suministrados por este tema real. Tenemos los iconos de las redes sociales que fueron suministrados por el plug-in, y luego la mayoría de los anteriores son solo widgets generales de WordPress los cuales siempre están disponibles hasta que construyas esta página de inicio. Estas fueron las plantillas de negocio. Vamos a hacer uso de estas cuatro secciones de negocios. Empezando por la parte superior del negocio. El tramo medio está dividido entre la izquierda y la derecha, después tenemos una sección inferior. Desde arriba, abre esto, y podemos ver qué tipo de widgets son adecuados para esta zona. El que voy a utilizar es este TG Services. Como puede ver, esto se utiliza para mostrar algunas páginas como un servicio. Deja esto en la sección superior, y luego vamos a vincular esto a nuevas páginas gratis. Actualmente no tenemos ninguna página que muestre los servicios del sitio web, así que lo que vamos a hacer es ir a nuestras páginas, agregar tres páginas nuevas. El primero va a ser para diseño y desarrollo web. Entonces solo agregaremos un texto sencillo justo debajo. Voy a decir que creamos impresionantes diseños responsive usando WordPress. Puedes colocar en cualquier texto que te gustaría dentro de aquí, y también puedes ver en la parte inferior, tenemos una sección de redes sociales la cual se había agregado usando el plug-in. Esta es una característica premium por lo que sólo vamos a ignorar esto. Si quieres quitar esto, puedes hacer clic en estos ajustes en la parte superior, bajar a las preferencias, y luego podemos cerrar el panel de redes sociales. Ahora, de vuelta a nuestra página, sólo vamos a agregar una imagen destacada para esta sección, luego colocando el icono de WordPress. Esa es nuestra imagen destacada, después publicar. Esto es todo lo que necesitamos hacer. Ahora bien, si volvemos a nuestras páginas, agrega una nueva página, y esta segunda va a ser para branding. Entonces algunos textos en la cuadra justo debajo, voy a decir que nos ocupemos de todas sus necesidades de branding. El apartado de página tiene la imagen destacada. Este es el ícono del lápiz. Establezca esto y luego publique. La tercera y última página va a ser para el servicio de desarrollo móvil. Agrega una tercera página con el título de Desarrollo Móvil. Entonces algún texto que voy a decir, creamos impresionantes aplicaciones móviles personalizadas para todos los dispositivos. Volver a la pestaña de página de la imagen destacada, ésta va a ser para el Icon Android. Publicó este. Ahora, si volvemos a nuestros Widgets bajo Apariencia, podemos agregar estas tres nuevas páginas a nuestros Servicios TG. Tenemos el diseño web, tenemos el branding, el desarrollo móvil, y luego podemos guardar este widget. Antes de ir más lejos, sólo actualicemos la página de inicio. Haga clic en Logo. Ahora veremos nuestras tres páginas en esta área de widgets. Justo debajo de esto, vamos a la siguiente sección Llamada a la acción la cual va a pedir al usuario que se ponga en contacto. Para ello, tenemos un widget de llamada a la acción que está justo por aquí. Arrastre esto abajo y dentro de la misma sección. El texto principal del Llamamiento a la Acción va a ser : “¿Necesitas hablar con alguien sobre tus ideas?” Entonces los textos adicionales de, “Póngase en contacto hoy mismo”. Esto también va a tener un botón en el que el usuario puede hacer clic y dirá: “Póngase en contacto”. Entonces también queremos que este botón redirija a cierto enlace. Ahora, justo antes de que hagamos esto, vamos a salvar esto. Querremos que esto enlace a la página Contáctenos. Para obtener el enlace a la página Contáctanos, necesitamos pasar a la pestaña Páginas, en Contacto. Entonces podemos agarrar el permalink de la barra lateral. Esta es toda esta sección justo aquí. Si hacemos clic en esto, entonces podemos agarrar la URL de nuevo a los widgets en la barra lateral, luego pegar en nuestro permalink. Guarda esto y vamos a probar esto. Refrescar. Tenemos nuestra Llamada a la Acción. Haga clic en el botón, y esto ahora nos vincula a nuestra página Contáctenos. Recuerda, esto tendrá un formulario de contacto más adelante, pero por ahora, todo esto está funcionando bien. A continuación, tenemos la sección media la cual se divide en las secciones izquierda y derecha. A la izquierda, voy a sumar algunos testimonios recientes, y la derecha va a contar con una sola página. Empecemos con la izquierda que es TG Testimonial. Arrastre esto hacia. El título de Testimonios Recientes. Entonces la descripción en la parte inferior. Colocar en cualquier descripción testimonial dentro de aquí. Podemos entonces colocar en un nombre justo debajo, y el titular que es CEO. Guarda este widget. También podemos cerrar estos tramos y luego iremos al tramo medio derecho. Esta va a ser la única página destacada. Deja esto en. Esta va a contar con cualquiera de las páginas de nuestro sitio. Para este ejemplo, voy a poner el foco en la sección de desarrollo móvil. El título que aparecerá junto a esto son Read More About Our Mobile Development Services. Entonces también tenemos la opción de quitar la imagen destacada si queremos, pero voy a dejar esto como está. Por último, tenemos la sección inferior del negocio que va a ser para un widget destacado, y esto nos permitirá agregar algunos casos prácticos. Arrastra esto hacia arriba. Título de Estudios de Caso. Entonces podemos añadir una descripción, voy a decir, Aquí, nos sumergimos profundamente en algunos de nuestros proyectos más recientes para mostrarte lo que sucede detrás de las escenas. Entonces debajo de esto, podemos enlazar a diversas páginas. Ahora, podríamos seguir adelante y crear tres nuevas páginas con algunos estudios de caso. Podríamos agregar algunos textos a algunas imágenes y crear estas páginas si quisieras. No obstante, sin embargo, sólo para ahorrar un poco de tiempo, sólo voy a enlazar a tres páginas existentes que es el Diseño Web, el Branding, y también el Desarrollo Móvil. Puedes crear estos si quieres, pero voy a guardar este widget y echarle un vistazo a esto en el navegador. Refrescar. Tendremos nuestra sección superior la cual ya has visto, tenemos la sección media, y ésta se divide con la sección izquierda para testimonios, y luego la página de Desarrollo Móvil destacada a la derecha. Entonces finalmente al fondo, podemos enlazar con algunos estudios de caso. Este es todo completo, y puedes tener una jugada con esto si quieres y hacerlo más personal. Justo antes de terminar esto, voy a eliminar los enlaces adicionales que se están agregando a nuestro menú automáticamente. Iré a la sección de menú sobre la apariencia, necesitamos seleccionar navegación superior, podemos quitar el enlace de inicio, y también las tres páginas adicionales. Guardar menú. Nuestra página de inicio ya está configurada. En el siguiente video, echaremos un vistazo a cómo podemos crear nuestro pie de página. 31. Blog de WordPress: creación del pie de página: Ahora desplázate hacia abajo hasta el fondo de nuestro proyecto y trabajemos en esta zona de pie de página. Para el área de pie de página, también vamos a hacer uso de widgets para crear hasta cuatro secciones diferentes. Para ello, pasamos al tablero, a la apariencia, y a la sección del widget. El autor de los temas ha proporcionado cuatro ubicaciones de pie de página diferentes. barra Psi 1 está terminada en la parte inferior izquierda, luego dos, tres y cuatro. Al igual que cuando hemos usado widgets en el pasado, podemos arrastrar y soltar cualquiera de estos widgets en nuestras cuatro áreas de widgets diferentes. Ni siquiera necesitas usar los mismos que yo voy a usar. Barra lateral 1, que está sobre en la parte inferior izquierda, queremos arrastrar en el widget de páginas. Tire de esto. Como podemos ver aquí, esta es una lista de las páginas de tu sitio, pero esto es básicamente como un menú donde el usuario puede hacer clic en todas las páginas y luego ser llevado a la página completa. Podemos añadir un título opcional si queremos. También podemos resolver estas páginas por el título, el orden de las páginas que está disponible cuando vamos a la pantalla de edición de páginas, o incluso el ID de página. Este ID de página también se puede utilizar justo debajo de dos si queremos excluir ciertas páginas que no queremos que aparezcan dentro de esta sección. El modo de agarrar el ID de una página es si entramos en el enlace de nuestras páginas, dar click en este. Si hacemos click en alguna de nuestras páginas o incluso entramos a la pantalla de edición, podemos ver las páginas ID aparecen dentro de la URL. Este en particular es 1872. Probemos uno diferente para contactarnos. Esta es 1874, pero la tuya puede ser una identificación completamente diferente a la mía, y eso está completamente bien. El mismo también si alguna vez necesitamos acceder a alguno de los posts ID, podemos dar click en esto. Este es el ID número uno. Probemos una más. Esto es 1788. Esto es realmente útil si alguna vez necesitas conocer el post o el ID de página. Voy a los widgets. Esto está todo guardado y esto es todo lo que necesitamos para nuestra barra lateral 1 en la barra lateral 2. Voy a arrastrar y soltar sobre un widget de calendario. Este es un calendario de publicaciones de nuestro sitio. Si tienes una entrada de blog disponible en una fecha determinada, esto luego se convierte en un enlace dentro del calendario donde el usuario puede hacer clic y ser llevado a cualquiera de las publicaciones para ese día en particular. Ya veremos cómo se ve esto en tan solo un momento. Podemos agregar un título opcional, pero solo voy a dejar esto como predeterminados ya que esto es bastante autoexplicativo. Buffering del sitio, este es uno va a ser ocupado por algunos botones de redes sociales. Este es el último plugin de redes sociales. Arrastra esto hacia arriba. Esta se generó cuatro filas de nuestra página de redes sociales. Podemos ir a esta página si queremos ajustar alguna de las preferencias con este enlace. También podemos cambiar el título, pero esto está bien. Sidebar 4 que se termina en la parte inferior derecha de nuestra página. Voy a arrastrar por encima algunos comentarios recientes. Ahora, los comentarios recientes son solo los comentarios que se habían colocado en nuestras entradas de blog. Por defecto, se trata de los cinco puestos más recientes que podemos ajustar, pero cinco está bien por ahora. Todos estos se guardan automáticamente, por lo que si pasamos al navegador, refresca la página. El primer bloque es nuestras páginas y podemos dar click en cualquiera de estas para que lo lleven a la página completa. Tenemos una sección de calendario y podemos dar click en cualquiera de estos días y ver cualquier entrada de blog disponible para ese día en particular. También podemos desplazarnos hacia atrás y adelante por las fechas y ver la vista de calendario para cada mes. El apartado de redes sociales, en su mayoría el Twitter y también los enlaces de YouTube que creamos antes. Entonces, por último, los cinco comentarios más recientes, en los que también puedes hacer click si quisiéramos. Ahora tenemos una sección de pie de página. También podríamos eliminar los enlaces de pie de página hacia abajo en la parte inferior, pero esto está bien para nuestro uso. Tan solo una última cosa en el personalizador no son muchas opciones para este tema en particular para personalizar el pie de página. Las únicas opciones que tenemos si vamos al enlace de pie de página es modificar el número de áreas de widgets. Actualmente estamos configurados en el valor predeterminado, que es cuatro, pero también podríamos reducir esto a ustedes tres, dos, o uno si preferimos si tenemos menos contenido para colocar dentro del pie de página. 32. Blog de WordPress: añadir un deslizador: Anteriormente en el curso, agregamos dos imágenes de encabezado diferentes que se muestran justo debajo de esta sección de logotipos. Estas dos imágenes se mostrarán aleatoriamente, por lo que podremos obtener una imagen diferente cada vez que recarguemos esta página. En este video, te vamos a mostrar cómo podemos usar estas mismas imágenes, o incluso puedes elegir diferentes imágenes si lo prefieres. Pero los vamos a incorporar a un slider. Al igual que con muchas cosas, WordPress tiene montones y montones de plugins deslizantes diferentes, que podemos integrar en nuestro sitio o este tema real viene con su propia herramienta de deslizador, que es realmente simple de usar. En primer lugar, tenemos que entrar en el personalizador. Esta es una de las opciones dentro de la apariencia y el personalizador. Entonces veremos que tenemos esta opción de deslizador justo aquí. Entra aquí. La primera opción es que realmente necesitamos activar el deslizador. Por lo que haremos clic en esto y después tenemos la opción si quieres que este deslizador aparezca en nuestra página de Post. Realmente no necesitamos que aparezca el deslizador cuando veamos la entrada del blog. Entonces voy a desmarcar esto. Bueno, esto depende totalmente de ti. Entonces debajo de esto, agregamos nuestro contenido, que son las imágenes. Para mostrar en nuestro slider, podemos seleccionar una imagen de la mediateca o subir una imagen totalmente diferente. Voy a quedarme con estas mismas dos imágenes que usamos ya dentro del encabezado. Se puede ver de inmediato que esta imagen ha aparecido aún por debajo del encabezado uno, pero en esta ocasión también tenemos un botón Read More. También podemos superponer algunos textos justo encima esta herramienta agregando un título y también una descripción. Por lo que el título para este va a ser Desarrollo Móvil. Podemos ver estas actualizaciones más en la vista previa. En la línea de abajo también podemos agregar una herramienta de descripción. Voy a decir del diseño a App Store. Si lo desea, también puede cambiar el texto del botón Read More. En primer lugar, voy a dejar esto tal como está, pero esto también va a enlazar a cierta página. Dado que esta imagen en particular en esta sección es para el desarrollo móvil, tendría sentido enlazar a nuestra página móvil. Para ello, si vamos a nuestro sitio y luego si hacemos click en el “Desarrollo Móvil”, todo lo que necesitamos hacer es agarrar el enlace de la página, que es la sección justo después de esta primera barra hacia adelante. Comanda o controla C para copiar esto y luego pega esto dentro de nuestro enlace. contenido del Slider 2 se despertó en nuestra segunda imagen para rotar entre. Nuevamente, voy a usar el mismo que el encabezado. Un título de Diseño y Desarrollo Web. Una descripción, este será el desarrollo de WordPress por parte de los expertos. También necesitamos enlazar a esta página, que es la página de Desarrollo Web. Para volver a nuestra página principal, podemos hacer click en el “Diseño y Desarrollo Web”, enlazar y luego agarrar el enlace a esta página, pegarlo en. Oops, equivocada. Pega esto en el número 2 y como puedes ver, puedes ir aún más allá agregando más imágenes justo debajo de dos. Entonces por supuesto, no queremos el deslizador y también la imagen del encabezado al mismo tiempo. Entonces lo que podríamos hacer es volver a la sección Imagen de Cabecera, o podemos hacer clic en este ícono de lápiz para ir directamente a nuestra sección. Oculta esta imagen y luego solo tenemos el deslizador tomado efecto. Publicar. Encima al front end y refresca. Ese es nuestro slider. Esto cambia entre nuestras dos imágenes disponibles. Probemos si estos enlaces funcionarán. Esta es la página Diseño y Desarrollo Web. Este está bien. Volver a la página de inicio. Nuestro enlace de Desarrollo Móvil también está funcionando. Entonces todo esto está funcionando ahora y así es lo rápido y fácil que es agregar un deslizador. En el siguiente video, vamos a llegar a trabajar en nuestra página Contáctenos y reemplazar este texto plano por un formulario de contacto. 33. Blog de WordPress: creación del formulario de contacto: Hey, bienvenido de nuevo. Al principio cuando creamos nuestras páginas arriba en la parte superior, voy a flotar la página Acerca de nosotros. Esto revelará luego una página Contáctanos. Sí dijimos desde el principio que acabamos de poner algunas líneas de direcciones de muestra justo aquí y luego vamos a volver a esta página y agregar un formulario de contacto de trabajo. Bueno, esto es lo que vamos a hacer en este video. Esto se pondrá a disposición agregando un plugin llamado Formulario de Contacto 7. Esto nos permitirá sumar tantos campos diferentes como quisiéramos dentro aquí. Esto capturará la entrada del usuario como el nombre de usuario, la dirección de correo electrónico, un mensaje, potencialmente cualquier dirección o número de teléfono, y todo esto puede ser enviado con este formulario. Ya lo adivinaste, volvamos al Dashboard, y desde aquí entraremos en la sección de plugins. Como te puedes imaginar, hay montones y montones de plugins diferentes que pueden hacer formularios de contacto, pero voy a usar uno popular llamado Formulario de Contacto 7. Podemos agregar esto como un nuevo plugin arriba en la parte superior, entonces si quieres tal vez disponible en algunas de las pestañas como una popular que ves aquí. De lo contrario, tendrás que buscarlo con el cuadro de búsqueda arriba en la parte superior. Este es el formulario de contacto particular que voy a estar usando, así que vamos a instalar esto. Como podemos ver, se ha actualizado regularmente y también es compatible con esta versión actual de WordPress. Activar, y esto ahora nos dará una opción dedicada dentro de la barra lateral. Haga clic en esto y esto luego revelará todos los formularios de contacto que actualmente tenemos disponibles para nuestro sitio. Simplemente tenemos este que se está creando automáticamente para nosotros, y podemos seguir adelante y agregar tantos formularios de contacto diferentes como nos gustaría. Podemos tener una diferente para diferentes secciones de nuestro sitio, y cada una puede recopilar información diferente. En lugar de editar este, voy a sumar nuevo arriba en la parte superior y luego darle a este formulario de contacto un nombre descriptivo. Voy a decir Formulario Contáctenos, luego debajo de esto, tendremos el diseño de nuestro formulario. Ahora bien, si no conoces ninguna codificación y esto parece un poco loco, no te preocupes por el momento. Si echamos un vistazo más de cerca a cada uno de estos campos, no debería ser demasiado difícil de entender. Cada uno de estos es un insumo de forma diferente. Por ejemplo, si queremos recopilar el nombre del usuario, el correo electrónico del usuario, y tenemos una sección para el asunto del correo electrónico, y entonces tenemos el mensaje que se va a enviar al administrador. Este, por ejemplo, como el resto de ellos está rodeado en la etiqueta y luego el texto que va a aparecer junto a cada una de estas entradas. Este también es opcional a diferencia de los tres anteriores, lo que significa que este formulario puede estar vacío cuando se envía este. Entonces dentro de los corchetes, tenemos el tipo de entrada de formulario que actualmente se está utilizando. No te preocupes por todo esto ya que podemos generar cada uno de estos automáticamente usando estas opciones arriba en la parte superior. Por ejemplo, si queríamos crear una nueva entrada de texto, recolectar una dirección de correo electrónico, si queremos reunir un número de teléfono, una fecha, un área de texto, casillas de verificación, o botones de radio, todos estos se pueden generar haciendo clic en estos botones solo aquí. Por último, para un formulario, también necesitamos la capacidad de realmente enviar esto. Cuando se hayan ingresado todos los datos justo arriba, entonces necesitamos un botón para hacer clic realmente en, y enviar esto de vuelta al administrador del sitio. Esto es lo que hace aquí este botón Enviar. Voy a dejar casi todos los impagos justo aquí. Añadamos en un campo extra. Este campo va a ser una casilla de verificación donde podemos preguntarle al usuario cómo se enteró de nuestro sitio. Por lo que voy a dar clic en la casilla de verificación y luego todas las opciones que agreguemos aquí dentro luego resultarán en una entrada de formulario generada como ya tenemos. En primer lugar, queremos saber si este es un campo obligatorio, por lo que el usuario debe ingresar un valor dentro de aquí antes de poder enviar el formulario. El nombre, podemos dejar esto como predeterminado. Este es sólo un nombre único generado. Para este campo en particular, podemos agregar múltiples opciones donde agregamos una opción por línea. Cada nombre que estamos agregando aquí dentro generará una nueva casilla de verificación. El primero que voy a añadir es para motor de búsqueda. Recuerda estas opciones sí describe cómo el usuario se enteró de nuestro sitio. También podemos decir una recomendación. En la siguiente línea, diremos usar previamente, y luego la cuarta y última es para otra. Quiero dejar todas estas configuraciones por defecto justo debajo. También voy a agregar un ID opcional o atributo de clase a esta entrada. Esto es solo para que podamos apuntar a esto agregamos algunos CSS. Si quisieras aplicar algún estilo adicional, no necesitamos hacer esto, todo lo que tenemos que hacer es dar click en “Insertar” y después hemos generado nuestra nueva sección de casillas de verificación. Guarda esto y luego una vez hecho esto, entonces vemos un shortcode arriba en la parte superior entre estos corchetes. Esto de nuevo es un shortcode al igual que usamos en un video anterior, donde buscamos agregar los iconos de las redes sociales a cualquiera de nuestras páginas o publicaciones de blog. Lo mismo aplica a nuestro formulario de contacto. Simplemente necesitamos copiar esto y luego podemos ir todas a nuestras páginas e insertar esto en nuestro formulario de contacto. Pick en esta sección, y voy a quitar este bloque en particular, justo debajo, pegarlo en como bloque de texto. Podemos entonces elegir cuál de nuestros formularios de contacto queremos mostrar. Este es el contacto, por lo que esto está completamente bien. Actualiza nuestra página o al navegador y actualiza en la página Contáctenos, ahora veré que nuestro formulario ha aparecido. Tenemos una entrada de nombre, tenemos un correo electrónico, tenemos el asunto, y luego nuestras casillas de verificación personalizadas que agregamos en. Para que el usuario pueda decir cómo se enteró de nosotros o tener el mensaje opcional en la parte inferior, y luego puede enviar esto de vuelta al administrador. Por supuesto, es un poco inútil tener un formulario Contáctenos si el mensaje es opcional. Por lo que vamos a cambiar rápidamente esto de nuevo en el Dashboard. De vuelta a la sección Contacto, editaremos nuestro nuevo formulario. Todo lo que tenemos que hacer es eliminar este texto opcional justo aquí y luego guardar esto. Esto ya se ha eliminado, además de crear realmente en el formulario de contacto, también hay algunas opciones que podemos cambiar también. Tenemos varios términos hasta en la parte superior como el correo. Estas son algunas de las opciones para cambiar el diseño de nuestros correos electrónicos. Si alguno que se coloca dentro de estos corchetes es efectivamente algunos datos que pueden cambiar. Entonces es un poco como una variable. Estas son todas las secciones que WordPress inyectará dinámicamente. Entonces cuando recibimos un correo electrónico del usuario final, vemos cosas como el título del sitio, por lo que sabemos exactamente cuál de estos sitios se envía este correo electrónico. Después recibiremos los sujetos y esto será sacado del campo de asunto junto con todas las demás secciones, también obtendremos el correo electrónico del usuario, cual será sacado del campo de correo electrónico y luego podremos construir el cuerpo del mensaje hacia abajo en la parte inferior o cambiar esto alrededor si quisiéramos. No voy a hacer ningún cambio a esto ya que está bien presentado. Tenemos el campo De con el nombre y correo electrónico. Tenemos el sujeto en el campo correcto y luego el mensaje dentro de la sección de cuerpo. Una vez que estemos contentos con esto, también podemos ir a la pestaña Mensajes y desde aquí podemos modificar todos los mensajes predeterminados que se envían al usuario. Por ejemplo, cuando el usuario haya publicado correctamente el mensaje en nuestro sitio, entonces verá este mensaje justo aquí. Vemos fallas de envío de mensajes, vemos errores de validación. Esto es cuando no se ha ingresado un campo en particular o se ha utilizado el tipo de datos incorrecto. Por ejemplo, si tenemos un campo numérica y alguien intenta introducir algún texto, esto provocaría un error de validación. También vemos cosas como la longitud máxima y mínima de la entrada, que está permitida, y muchas más opciones para cambiar todo el texto predeterminado. Por último, tenemos la configuración adicional donde podemos ir al sitio web del formulario de contacto y tirar de cualquier opción adicional si queremos. Quiero dejar esto como es y guardar nuestro formulario de contacto, pero este es un plugin realmente útil para recopilar información en nuestro sitio. Recuerda, puedes crear múltiples Formularios Contáctanos y colocarlos también en diferentes secciones. 34. Blog de WordPress: cómo mejorar el SEO: No tiene sentido poner en mucho esfuerzo para que nuestro sitio se vea realmente bien y tenga un montón de contenido increíble si ningún usuario puede encontrarlo desde los motores de búsqueda. Mencionamos anteriormente en el curso que WordPress por defecto es bastante amigable para motores de búsqueda. No obstante, como todo, siempre hay margen de mejora. En este video, estaremos cubriendo un gran plugin llamado Yoast SEO, que lleva nuestro núcleo de WordPress SEO a otro nivel. Si quieres disparar de lo que es SEO, caerá la optimización del motor de búsqueda. Es básicamente el proceso de optimizar nuestro contenido en nuestra página web para aparecer más alto en el orden de los resultados de los motores de búsqueda. Optimizamos palabras clave, descripciones, y también optimizamos cosas como nuestras publicaciones de blog. El más relevante en los motores de búsqueda es plugin realmente ayuda al resaltar todas las cosas que estamos haciendo bien y todas las cosas que necesitamos mejorar, como todas nuestras palabras clave, nuestras descripciones, el longitud de nuestro contenido, y las imágenes alt text. También puede ayudar con algo llamado metadatos, que es la información sobre nuestros sitios que se hace visible para los motores de búsqueda. También puedes generar sitemaps y enviarlos a Google, junto con tantas otras cosas. Vayamos a la sección de plugins donde podemos buscar este plugin en particular. Ir a añadir nuevo. Hay muy buenas posibilidades que esto esté apareciendo dentro de la sección popular. De lo contrario, tendrás que hacer una búsqueda de Yoast SEO en el cuadro de búsqueda arriba en la parte superior. Esto es lo que necesitamos. Su composible con nuestra versión de WordPress. Instalemos esto, activemos esto. Esto también nos dejará con una opción SEO en el menú también. Se puede ver una visión general de nuestra configuración junto con cualquier problema en las notificaciones. Pero generalmente muchas de las cosas que van a estar tratando con Yoast van a estar realmente dentro de nuestro contenido. Por ejemplo, si vas a alguna página en particular, quiero ir por la de diseño web. Si ahora volvemos a la pantalla de edición, tuya ahora proporcionará una nueva sección dentro de esta pantalla de edición. Desde arriba, lo primero que tenemos que hacer es proporcionar una frase clave de enfoque para esta página. Una frase clave de enfoque es la palabra clave principal en la que quieres enfocarte para esta página. Esta es una página de diseño web. Voy a establecer la frase clave para que sea diseño web. Habilita todo esto, hemos visto una vista previa de cómo aparecerá fuera dentro de una búsqueda de Google. También podemos echar un vistazo a esto para el móvil y también el resultado de escritorio también. Si quisiéramos también, también podríamos jugar con el título de SEO y también insertar diferentes variables para cambiar el orden y el aspecto de cómo aparecerán todos estos datos. También podemos cambiar esta babosa si quisiéramos. [ inaudible] esto es diseño y desarrollo web. Podemos ver esto en el permalink también. Una meta descripción si quisiéramos anular toda la descripción para esta vista previa. También podríamos cambiarlo dentro de aquí también. Como puedes ver, esto se actualizará automáticamente en nuestra vista previa. Es así como se verá en una búsqueda de Google. Voy a dejar esto vacío, pero es una buena idea hacer esto en todas las páginas web en vivo. También podemos insertar variables también como el título del sitio, el título de la página, y también las categorías también. Debajo de esto te contamos con un análisis SEO, cual va a ser una parte realmente importante para ir para ti. Esto nos dirá qué partes de nuestras páginas son buenas para SEO y qué partes necesitan alguna mejora. En la parte inferior vemos que tenemos estos luz verde. Esta es la buena sección. Tenemos una buena tierra fuera de frase clave. Esta clave también es única y no se utiliza en ninguna otra página o entrada de blog. Tenemos la frase clave y el título. Si vamos a la cima, vemos que esto es diseño y desarrollo web. Tendremos nuestra frase clave justo aquí. Si tuviéramos que cambiar esto, así como esto, entonces actualicemos y actualicemos. De vuelta al análisis, entonces vemos que esto falta y también ahora es una mejora recomendada. El resto de mejoras recomendadas son el texto alt de imagen. Vamos a enmendar esto por dentro de la barra lateral. Debajo de la imagen destacada, hacemos click en esto. Podemos entonces añadir la frase clave al texto alt. Esto fue diseño web, actualizar nuestra página, refrescar. Este problema ya ha sido eliminado. También revertiremos el título de esta página. Volver abajo a las mejoras. Tenemos entonces una sección roja que son las mejoras más serias que necesitamos hacer. Mucho de esto se debe a que no tenemos ningún contenido en esta página. Simplemente tenemos un título y una descripción muy corta justo debajo. También se recomienda agregar un poco más de contenido como la longitud del texto. Actualmente sólo tenemos siete palabras, aunque el mínimo recomendado es en realidad 300. También podríamos hacer uso de parte de este texto descriptivo y también colocarlo en la meta descripción también. Si no hacemos esto, como veremos a continuación, el motor de búsqueda automáticamente agarrará una sección de esta página para nosotros. Esta sección que agarra puede no ser la pieza exacta de contenido que queremos mostrar. Todo este texto debe contener también nuestra frase clave en el párrafo inicial. También se recomienda tener algunos enlaces internos y externos también. Deberíamos agregar algunos enlaces a otras páginas en nuestro propio sitio y también idealmente enlazar a algunos otros sitios web también. Después de esto, una vez que hayamos pasado por todas estas mejoras, entonces tendremos una frase clave relacionada. Se trata de una frase clave secundaria que queremos añadir. Pero esto sólo está disponible para la versión de pago de este plugin. Voy a salir de esta sección. A continuación, tenemos el contenido de piedra angular. Para cualquiera de nuestras páginas o publicaciones de blog, podemos encender o apagar esto. Una pieza de contenido de piedra angular es la pieza de contenido más importante en nuestro sitio. Por ejemplo, si tu sitio de WordPress es famoso por los brownies de chocolate, la página de brownies de chocolate debe marcarse como el contenido de piedra angular. Pero esto es algo que debes decidir en base a tu contenido. Por último, tenemos una pestaña avanzada hacia abajo en la parte inferior donde podemos establecer, si queremos, esta página en particular aparezca en estos resultados de buscadores. Vamos a dejar esto como sí. Bueno, también podríamos apagarlo. Querrá que los motores de búsqueda sigan los enlaces de esta página. Podemos seleccionar sí o no. Tenemos una sección avanzada meta robot donde podemos afinar cómo queremos que nuestros meta robots se comporten. No vamos a cubrir ninguna de estas configuraciones avanzadas, pero puedes tener una búsqueda en Google y conocer más sobre los meta robots. Por último, tenemos la URL canónica. Una URL canónica es una forma de tratar el contenido duplicado en nuestro sitio. Por ejemplo, si tuviéramos una tienda de comercio electrónico, teníamos dos productos idénticos listados en nuestro sitio. Tenemos que decirle a estos motores de búsqueda cuál deberían usar. Si no hacemos esto y tenemos un montón de piezas de contenido duplicado, los motores de búsqueda creerán que estamos tratando de jugar el sistema simplemente duplicando cosas en lugar de crear contenido nuevo. Si tuviéramos una tienda de comercio electrónico, por ejemplo, y tuviéramos una camiseta azul. Tal vez tendríamos un nombre de producto así. Para la URL, podemos tener esto dentro de la sección de playeras. Tendríamos nuestro nombre de e-commerce y luego la URL que se ve así. Pero qué pasa si pasamos a poner esta camisa azul también en una categoría azul. También podríamos tener la misma camisa dentro de una categoría celular. Ahora tenemos tres de los mismos productos en tres secciones diferentes en nuestro sitio. Por supuesto, no estamos tratando de engañar a los motores de búsqueda proporcionando contenido duplicado de esta manera. Tenemos que marcar una de estas piezas de contenido como la principal que quieres mostrar. Para ello, necesitamos dejar esto vacío para la pieza principal de contenido. Después, para las otras dos secciones, que fue la categoría azul y también la categoría venta. Entonces tendremos que apuntar de nuevo a nuestra URL, que era las camisas/azul-camisa. Tan solo para aclarar, la pieza principal de contenido está vacía y luego señalaremos todas las piezas duplicadas de nuevo a la URL principal. Esta es todas las opciones. Actualizaremos nuestros sitios. También podemos repetir este proceso para todas nuestras otras páginas así como todas estas páginas. También podemos hacer lo mismo para todas nuestras publicaciones de blog. Si tuviéramos dentro aquí, por encima de la derecha, también sabemos tener esta puntuación SEO. Tenemos una puntuación de legibilidad y también el número de enlaces de esta página también. Si entramos en alguno de estos, obtenemos exactamente la misma sección de SEO que podemos recorrer sobre cada pieza de contenido en nuestro sitio. Es así como podemos utilizar el plugin Yoast SEO para mejorar nuestro posicionamiento en los resultados de los motores de búsqueda. Es algo de lo que realmente debes estar al tanto, aunque solo lo utilices para apuntar a las victorias rápidas, como optimizar tus páginas y publicaciones. Hay, por supuesto, otros plugins SEO, que también hacen un buen trabajo. Pero este es uno realmente popular que yo personalmente uso. También es muy efectivo. 35. Blog de WordPress: copia de seguridad de tu sitio: Si todo el cuidado en el mundo, las cosas pueden y hacen salir mal cuando se trata de la tecnología. Si lo peor era pasar y perdimos todos los datos de nuestro sitio web, queremos asegurarnos de que no se pierda todo nuestro arduo trabajo. Podríamos pasar horas, días, semanas, años creando un montón de contenido diferente, muchas entradas de blog, y no queremos que todo esto se pierda. Tiene sentido cubrir esta posibilidad mediante la creación de copias de seguridad de nuestros sitios web. Tenemos un montón de plugins geniales disponibles para hacer esto fácilmente. Realmente no hay excusa para no hacerlo. Si bien este caso de uso, también vamos a hacer uso de otro plugin. Cerrar sesión en la sección del plugin y bajar a la Agregar Nuevo, buscar la que vamos a estar usando, que es BackWPup. Este es el que voy a estar usando, así que haz click en “Instalar” y activa esto una vez descargado. Aquí también tenemos esta sección BackWPup. Si hacemos clic en este ícono, entonces podremos ir a los escalones dentro de esta sección. El primer paso es comprobar la instalación, que luego nos llevará a una página de configuración. Se puede ver toda la información sobre nuestro sitio y también los resultados de diversas pruebas. Todo parece estar bien dentro de esta sección. También si tenemos algún problema con este plugin, necesitamos contactar con el soporte de BackWpup. También podemos hacer clic en este botón justo aquí para obtener toda esta información de depuración, que también podemos enviar sin duda. Todo está bien aquí. No vemos ningún problema. Entonces podemos ver todos los diferentes términos que tenemos en la parte superior. La mayoría de estos se pueden dejar por defecto. Pero también podemos cambiar las cosas para cambiar el número máximo de archivos de registro, que está dentro de la pestaña logs. Esto significa que solo guardaremos un máximo de 30 archivos de copia de seguridad. También podemos optar por comprimir estos, si quieres. A partir de aquí, también podemos seleccionar dónde queremos que se coloquen estas copias de seguridad. Entonces tenemos la ubicación predeterminada que está dentro de nuestros proyectos en la carpeta WP Content. Entonces a partir de aquí, podemos seleccionar exactamente qué carpeta queremos almacenar esto dentro. Aquí podemos ver estamos guardando estos dentro de una carpeta de cargas. Yo quiero dejar esto como estándar, pero puedes cambiarlo si quieres. A continuación, de nuevo al panel, tendremos que ir al paso 2, que es crear realmente un trabajo de copia de seguridad. En primer lugar, le damos nombre a su trabajo, queremos llamar a esto el Respaldo Semanal. Entonces podemos seleccionar exactamente qué piezas de información queremos respaldar. Queremos hacer copia de seguridad de la base de datos en todos nuestros archivos, y también una lista de cualquier plugins que se instalaron también. Por defecto, no tenemos las exportaciones XML ni las tablas de base de datos comprobadas. Esto está bien. Después podemos seleccionar cómo queremos nombrar nuestro nuevo archivo. El botón predeterminado para nuestros archivos guardados va a ser el año, el mes, el día, la hora en formato 24 horas. El i minúscula, que es la representación de la minuta. Entonces el s minúscula, que son los segundos. Podrías jugar con este nombre de archivo si quisieras, pero ya está guardado en un formato sensato. Voy a dejar esto como está. El archivo zip está bien. Voy a respaldar esto a la carpeta de cargas que hemos visto antes. Pero si quisieras, podrías hacer una copia de seguridad de esto en diferentes ubicaciones como Dropbox. te podría enviar un correo electrónico con la copia de seguridad, y también diversos servicios Cloud que ves aquí, ¿ves esto? A continuación tenemos la pestaña Horario. Desde aquí vamos a programar exactamente cuando queremos que se lleve a cabo esta copia de seguridad. No pudimos programarlo en absoluto y solo dejar esto como manual. Tenemos que activarlo manualmente o vamos a usar un WordPress Chrome. Esto nos permitirá programar un día o hora en particular cuando queremos que se lleven a cabo estas copias de seguridad, es casi semanal. También podemos fijar el día en que queremos que esto suceda. También la hora y el minuto también, mañana del domingo está bien por mí, así que guarden nuestros cambios. Entonces a continuación tenemos la copia de seguridad de DB. Aquí podemos seleccionar exactamente qué tablas de base de datos queremos respaldar. Actualmente, todas nuestras tablas de base de datos están seleccionadas. Pero puedes desmarcar cualquiera de estos si no quieres incluirlos con la copia de seguridad, si no estás seguro, solo deja estos como están. Tenemos la pestaña Archivos a continuación. Desde aquí, podemos optar por excluir cualquier archivo que no queremos incluir en la copia de seguridad. Por ejemplo, si tienes varios plugins que no quieres una copia de seguridad, podemos revisarlos para excluir alguno de estos. Si tenemos algunos temas que no estamos usando como el de 2019. También podríamos revisar cualquiera de estos para excluirlos de las copias de seguridad junto con cualquier contenido antiguo de años anteriores, también podemos excluir cualquiera de estos datos también. A continuación, tenemos los plugins, donde todo lo que podemos hacer dentro de aquí es cambiar el nombre del archivo y también agregar compresión de archivos si quisiéramos. A Folder, ya hemos tratado, esta es la ubicación donde se guardarán todas las copias de seguridad. También podemos cambiar el número de archivos a guardar en esta carpeta también. Si has realizado algún cambio, pulsa “Guardar”, vuelve al tablero. A continuación, vamos a ejecutar realmente el trabajo creado. Haga clic en el paso 3. Esto luego nos llevará a la pestaña Empleos, donde podremos ver nuestra copia de seguridad semanal. Sobre esto, podemos editar esto, y también podemos ejecutar esta copia de seguridad de inmediato. Haga clic en esto y después danos unos momentos para correr a través de nuestra primera copia de seguridad para nuestro sitio. Una vez que esto golpea al 100 por ciento y esto está terminado, podemos ver cuándo fue la última corrida. También podemos ver la fecha para la siguiente corrida también. Si quieres comprobar si esto ha funcionado, podemos dirigirnos al local. Abrámoslo. Trae al administrador principal y desde este botón, justo aquí, podemos entrar en nuestros archivos y carpetas guardados. Dentro de nuestro proyecto, necesitamos entrar a la app, pública. Como hemos visto desde la ubicación del archivo, esto está dentro del Contenido WP, y creamos esta carpeta de subida justo aquí, y aquí, entonces podemos ver una lista de todo nuestro contenido el cual se ha guardado. Si entramos aquí, este es todo el contenido como nuestras imágenes de fondo, nuestros encabezados, nuestro logotipo. Este es todo el contenido del archivo ahora guardado. par de esto, vemos los registros y luego si entramos a la carpeta de copias de seguridad, vemos que tenemos una sola copia de seguridad. También podemos ver esto si volvemos al panel y hacemos clic en la opción de copias de seguridad, hay confirmación de nuestra primera copia de seguridad que acabamos de crear. También podríamos eliminar o descargar esto si queremos. Como te puedes imaginar, hacer copias de seguridad de tu sitio de WordPress es realmente importante. Esta es una forma fácil de hacerlo con este plugin. Este es ahora el final de este proyecto y también de esta sección, así que ahora los veré en la próxima sección donde queremos aprender todo sobre el comercio electrónico de WordPress. 36. Comercio por Internet en WordPress: configuración del proyecto: Aquí vamos con nuestro próximo proyecto, y éste va a ser una tienda de comercio electrónico. Para empezar con esto, voy a crear nuestro nuevo sitio usando local. Haga clic en el icono “Plus” en la parte inferior, y le voy a dar el nombre del sitio de shirtstore. Recuerda también, si estás usando [inaudible] configura el proyecto con las mismas instrucciones exactas que antes. Pero quiero proceder con el uso local. Haga clic en “Continuar” con la configuración preferida, luego el nombre de usuario y contraseña, que vamos a utilizar para acceder a nuestro administrador mío. El mío va a ser el shirtstore_admin. El password. Puedes usar los mismos correos electrónicos y contraseñas que utilizas en proyecto anterior. Esto está completamente bien y aún te permitirá iniciar sesión en este nuevo proyecto en el sitio. También si utilizas un MAC como antes, es posible que también necesites agregar una contraseña para completar la instalación. Bien, estamos todos terminados, y podemos ver que nuestro sitio está en funcionamiento, y al igual que en proyectos anteriores podemos hacer click en el “Admin” para ser llevado al back-end de nuestro sitio. Vemos shirtstore admin y también la contraseña. De nuevo, y todo esto está bien. También podemos hacer click en “Open Site” y echar un vistazo al front-end de nuestro proyecto por defecto. Esto es lo que vamos a hacer en este video. Tenemos nuestro sitio en nuestra configuración. En el siguiente video, vamos a presentar WooCommerce para comenzar a transformar nuestro sitio WordPress en una tienda de comercio electrónico. 37. Comercio por Internet en WordPress: cómo empezar con WooCommerce: Ahora tengo esta tienda de WordPress vacía la cual tiene el tema predeterminado actual. Para transformar esto en una tienda de comercio electrónico, vamos a necesitar algunas herramientas adicionales. Después de esto vamos a aprovechar WooCommerce. Esto nos va a permitir transformar nuestros lados de dos maneras. En primer lugar, haremos uso del tema de escaparate, que es un tema para transformar el aspecto y la sensación de nuestro sitio para ser más como una tienda de comercio electrónico. En segundo lugar, por el mismo autor también tendremos acceso al plugin WooCommerce, que nos dará la funcionalidad para transformar nuestro sitio WordPress en una tienda de comercio electrónico. Proporciona todas las características esenciales que necesitamos, como la capacidad de agregar productos, para crear tarifas de envío, agregar impuestos, cuidar nuestro inventario, para administrar nuestro stock, para integrarse con proveedores de pago y todo lo demás que vamos a necesitar. En primer lugar, el tema, si vas al mercado, luego abajo al enlace del tema y dentro de aquí vamos a hacer uso de los temas de escaparate. También hay temas infantiles disponibles y echaremos un vistazo a cuáles son estos en el próximo video. A pesar de que necesitamos el marco de escaparate y podemos agregar esto al igual que el resto de nuestros temas dentro del tablero. Pero por ahora, podemos echar un vistazo rápido a lo que está incluido con este tema. Tiene prácticamente todo lo que se esperaría. Es totalmente sensible, lo que significa que nuestra tienda se verá genial en todos los tamaños de pantalla. Se integra perfectamente con el plug-in WooCommerce. Es amigable para motores de búsqueda, y generalmente proporciona una gran apariencia y sensación que podemos utilizar como buen punto de partida para nuestro proyecto. Al igual que con todos los temas, también es totalmente personalizable. No necesitamos preocuparnos por estar atascados con el tema predeterminado exacto, así como WooCommerce es propio [inaudible]. También se integra con el personalizador para que podamos actualizar fácilmente toda la marca en, los colores, el look and feel, y generalmente hacer que se vea exactamente como quiero. WooCommerce ha existido durante mucho tiempo y está bien desarrollado, y también alimenta decenas de miles de tiendas de comercio electrónico disponibles en línea hoy en día. Pasemos a nuestro panel de control y primero podemos empezar instalando nuestro tema en apariencia en la sección temática en nuevo y buscar escaparate. Este es un [inaudible] necesario justo aquí, instale y activemos esto y echemos un vistazo a esto en el front-end. Lados O2O y recarga. Podemos ver al instante que tenemos un cambio en nuestro tema. Actualmente todo lo que tenemos es nuestra página de inicio predeterminada la cual muestra nuestras entradas de blog individuales y también esta muestra de páginas aquí. Actualmente no se parece mucho a una tienda de comercio electrónico, pero recuerda, el propósito del tema es solo cambiar el aspecto de nuestro contenido actual. Por el momento, no tenemos muchas páginas, no tenemos muchas entradas de blog, no tenemos ningún producto ni nada parecido a esa configuración. Esto es algo que el plugin WooCommerce nos va a proporcionar. La segunda parte, si vuelves al tablero, es instalar el plugin, pulsa “Añadir nuevo”. Hagamos una búsqueda de WooCommerce. Esto es lo que necesitamos aquí por automático y se actualizó recientemente y también compatible con nuestra versión de WordPress. Esto nos va a dar nuestras páginas por defecto. Nos va a dar toda la funcionalidad que necesitaremos para empezar. Si hay alguna funcionalidad extra la cual no está incluida, si estamos buscando algo especialista, también hay muchos otros plugins de terceros que podemos integrar a nuestro sitio. Bien, activemos esto. El primero que vemos es que nos llevan a través de algunos pasos de instalación. También podríamos saltarnos esto porque todas estas opciones están disponibles desde el tablero. Voy a pasar por algunos sencillos pasos de configuración. Además sólo tienes que añadir algunos datos ficticios. No necesitamos agregar nuestra dirección exacta por el momento pero lo que es beneficioso es agregar también el país. Esto se debe a que esto permitirá a WooCommerce configurar ciertas cosas en función de nuestra ubicación, como la moneda y también algunas tarifas de envío también. Después de esto continuar o industria, estos siguen funcionando. Vamos a estar creando tienda Asia, así que voy a dar click en “Moda”. Después tendremos una selección de diferentes tipos de productos que vamos a estar listando. Entonces podemos seleccionar qué tipo de productos vamos a estar listando. Los productos físicos son producto real que vamos a enviar al cliente en su ubicación. Podemos tener descargas que son productos virtuales, y luego también tendremos varias opciones como suscripciones, membresías, reservas, paquetes y también productos personalizados también. No obstante, todos estos son cobrables, pero solo necesitamos los productos físicos por ahora. Continuando. Voy a decir que aún no tenemos ningún producto y además no estamos vendiendo en otro lugar y desmarquemos todos estos. También podemos volver a habilitar estos más adelante si queremos. Al igual que el tema, nos vamos a quedar con el escaparate por defecto. También tenemos algunos accesos a diferentes temas pagados y también gratuitos también. Ahora, dejaremos fuera jetpack pero también podemos volver a habilitar esto más adelante. Una vez que terminamos, luego nos llevan de vuelta al tablero. Al igual que con la mayoría de los plugins, esto también nos da mucha configuración dentro del tablero. Podemos gestionar nuestros pedidos, nuestros clientes, nuestros cupones y diversos otros escenarios que vamos a pasar durante este proyecto. También contamos con un producto dedicado opción dos. Ahora esto está habilitado. Volvamos a nuestro front-end y refresquemos. Al instante podemos ver tenemos algunas páginas más agregadas a nuestro menú. Contamos con un carrito de compras. Aún no hemos agregado ningún producto a estos carrito, por lo que este esta vacío. También contamos con una página dedicada a un checkout. Hay una página de cuenta de cliente donde podemos ver cosas como nuestros pedidos anteriores. Podemos descargar cualquier producto virtual que compramos. Podemos gestionar nuestras direcciones, detalles de nuestra cuenta y editar cualquiera de estas opciones según sea necesario. Por último, también tenemos la opción de tienda. Actualmente no tenemos ningún producto dentro de aquí. Lo que vamos a hacer para darnos un inicio rápido es agregar algunos datos de muestra. Esto es solo a cosas como diversos productos para que empecemos con nuestra tienda. Por supuesto, vamos a echar un vistazo a cómo agregar estos manualmente, pero por ahora, vamos a pasar al tablero de instrumentos a la sección de herramientas. Entonces podemos importar nuestros datos. Esto usará el importador de WordPress. Ya que es la primera vez que vamos a estar ejecutando el importador de WordPress. Necesitamos instalar esto y luego dar click en “Ejecutar”. Aquí todo lo que necesitamos hacer es elegir nuestro archivo que contiene nuestros datos de muestra y luego dirigirnos a la ubicación de su proyecto local. El mío está en mi área de usuarios y luego en sitios locales, en la shirtstore, en la app y luego en público. Entonces desde aquí tenemos que entrar en la sección de contenido y plugin. El plugins en este momento contiene nuestro importador de Wordpress, que comúnmente usamos en y también nuestro plugin WooCommerce. Esto cuenta con una carpeta de datos de muestra la cual contiene este archivo XML el cual necesitamos importar nuestros datos. Si estás usando mamá para esto, necesitarás entrar a la carpeta mamá y luego a los docs HD, y luego a tus proyectos de tienda de compartir. Con esto ahora seleccionado, subamos esto. Debido a que WooCommerce está creando cosas como productos para nosotros, también necesitamos agregar un autor o un creador. Podemos crear uno nuevo o podemos usar nuestra camisería, cual hemos configurado previamente. Haga clic en los archivos adjuntos del archivo de importación y luego envíe. Bueno, ahora lo hacemos, podemos dar click en el enlace de este producto y podemos ver qué datos se han incluido. Tengo muchos productos diferentes con nuestras imágenes, tenemos nuestras unidades de mantenimiento de stock, que es el código de producto. Tenemos la bandera en stock, tenemos un precio, las categorías. También podemos agregar etiquetas. También con la tienda, podemos contar con todos los productos para que aparezcan en la portada de su sitio web, en la actualización front-end. Ahora porque estamos en el enlace de la tienda, podemos ver todos estos productos y ahora exhibe. Automáticamente tenemos los botones, agregas cualquiera de estos productos a nuestro carrito. Después podemos ver nuestros carritos y ver todos los productos que has añadido. Podemos modificar los detalles, la cantidad. Podemos aplicar diferentes cupones. También tenemos una página de pago. Podemos ir a través del usuario, podemos agregar todos los detalles de facturación. Podemos ver una visión general de la orden. Actualmente no tenemos ningún método de pago disponible porque aún no hemos configurado ninguno. Arreglaremos esto en un video posterior. Cada uno de estos productos, si volvemos a la tienda, también cuenta con una página de detalles del producto. Podemos hacer click en estos para ser tomados a través la vista completa de detalle donde podemos acercar la imagen. Tenemos descripciones extendidas, información adicional. Podemos ver cualquier comentario anterior. También cuando configuramos estos productos, también podemos vincular estos dos productos relacionados. Esto nos permitirá proporcionar ventas ascendentes y ventas cruzadas también. Genial, este es ahora nuestro tema y también nuestra funcionalidad WooCommerce todo incluido con el plugin. También así como una nota lateral rápida también, automática que crea el plugin WooCommerce, también es el creador original de WordPress también. Estamos en buenas manos mediante el uso de este plugin. A continuación vamos a echar un vistazo a cómo podemos usar temas infantiles y por qué esto es realmente importante para los sitios de WordPress. 38. Comercio por Internet en WordPress: ¿por qué usar temas para niños?: Justo antes de que nos pongamos a trabajar con hacer cambios para nueva tienda de comercio electrónico, primero vamos a echar un vistazo a lo que es un niño y también un Tema de Padres. Hasta ahora, hemos estado usando lo que se llama un Tema de Padres. Este es un tema completo que hemos estado utilizando en nuestros proyectos anteriores, y también este tema de escaparate también. Era como un tema principal o de alto nivel. Por otro lado, un tema infantil es un sub-tema que se basa en un padre. Cualquier tema actual de los padres como nuestras carreras de personal, se puede utilizar como base o como punto de partida. Entonces podemos crear un Child Theme el cual va a heredar todo el estilo y funcionalidad de sus padres. Estamos seleccionando efectivamente un tema, ramificando este tema, y luego creando todos los cambios a esta nueva versión. Pero, ¿por qué querríamos hacer esto en lugar de hacer todos los cambios a este tema principal de los padres? Bueno, son varias diferentes razones por las que queremos hacer esto, y probablemente la razón más importante es preservar el tema original. Si realiza cambios en todo el tema desde el tablero utilizando herramientas como el personalizador, diseño cambiante, esquemas de color o menús cambiables, todo esto está completamente bien. Todas estas herramientas de tablero como el personalizador, es una forma segura y aprobada de editar y actualizar el aspecto y la sensación de nuestro tema. No obstante, si queremos ir aún más profundo e ir a nuestra carpeta de temas, podríamos agregar nuevos archivos, podríamos agregar nueva plantilla, podríamos actualizar los existentes, y generalmente hacer cambios más extensos. Nosotros sí queremos hacer esto en un Tema Infantil. Si hicieras alguno de estos cambios en el tema de los padres , seguiría funcionando completamente bien. No obstante aunque surge el problema, cuando necesitamos actualizar este tema. Si los temas ofrecen crear una nueva actualización y nueva versión de seguridad, donde generalmente realiza cualquier cambio en el tema principal. Una vez que descarguemos esta nueva versión, perderán todos nuestros cambios. No obstante, aunque si estamos usando este tema como plantilla o como punto de partida, entonces podemos hacer nuestros cambios a nuestro tema infantil, y luego podemos actualizar de forma segura a los padres. Esto también tiene muchos de un beneficio también. Por ejemplo, es una buena manera de tener una cabeza de partida en la creación de nuestro tema. No podemos hacer uso de todo el trabajo probado y probado desde un tema probado. Entonces podemos ramificarlo y crear nuestra propia versión basada en esto. También nos permite organizar mejor nuestro código ya que sabemos exactamente dónde se almacenarán todos nuestros propios cambios personalizados. Además, si quisiéramos, también podríamos crear un tema infantil diferente basado en este tema infantil también. Generalmente, si estamos haciendo algún cambio extenso a nuestro tema, incluyendo cualquier cambio dentro de los archivos y carpetas. Sí queremos hacer un tema infantil para que esto sea mucho más seguro. Es por ello que necesitamos un tema infantil. A continuación, echaremos un vistazo a cómo configurar un tema infantil para nuestro proyecto actual. 39. Comercio por Internet en WordPress: configuración del tema para niños: Ahora sabemos qué es un tema infantil, y cuáles son los beneficios de configurarlo. Para este proyecto, voy a crear uno para la tienda de comercio electrónico de tienda. Antes de que hagamos algún cambio en este tema principal, configurar uno es bastante sencillo. Lo primero que tenemos que hacer es ir a nuestra carpeta del proyecto, así que voy a abrir Local, y luego encontrar la ubicación de nuestra carpeta. Podemos hacer clic en este botón de “Acceso directo” justo aquí, y luego en la aplicación, en el público, el contenido, y luego en nuestro directorio de temas. Aquí, podemos ver nuestro escaparate el cual descargamos junto a los temas predeterminados que descargamos al configurar WordPress. Si estás usando MAMP, entra en los htdocs, y sigue los mismos pasos para llegar al directorio de temas. Vamos a crear un nuevo tema, y vamos a hacer esto dentro de un editor de texto. No necesitas conocer ninguna codificación para empezar con esto. Todo lo que necesitamos hacer es seguir unos sencillos pasos. En primer lugar, crearemos una nueva carpeta que es la nueva carpeta temática para nuestro proyecto. Podemos llamar a esto cualquier nombre que queramos. Dar este descriptivo. Voy a llamarlo el tienda-front-child, para que podamos reconocer esto fácilmente dentro del tablero. Puedes utilizar cualquier editor de texto que quieras editar esto. Voy a usar un editor de codificación llamado Visual Studio Code. Puedes descargarlo desde el link en la pantalla justo aquí. Es gratuito de usar en Windows, Mac y Linux. Voy a usarlo para crear nuestros archivos requeridos para este tema infantil. Si no tienes un editor de texto, pausa este video, y sigue adelante y descarga desde este enlace, luego volver cuando esté configurado. Ya tengo esto instalado, así que voy a abrir esto dentro de una nueva ventana. Todo lo que necesitamos hacer para empezar es arrastrar sobre nuestra carpeta del proyecto. Podemos ver desde el panel que esto abre esto en la barra lateral, y luego necesitamos crear dos nuevos archivos. El primer archivo que necesitamos crear, si pasamos el cursor sobre la barra lateral, podemos hacer clic en este icono de “Nuevo Archivo”, o bien podemos ir a Archivo y seleccionar un “Nuevo Archivo” desde aquí. Este se llamará style.css. CSS es una forma de agregar cualquier estilo y diseño a tu sitio web. No estaremos agregando ningún CSS personalizado a este proyecto, pero lo que tenemos que hacer dentro de este archivo style.css es agregar alguna información requerida de WordPress. Esta información contiene algunos ajustes que necesitamos para nuestro tema. Para ello, pasemos al navegador, y entrémonos en este enlace arriba en la parte superior. Tenemos que entrar en developer.wordpress.org/themes/advanced-topics, y luego en la sección temática infantil. Desde aquí, vemos la información que hemos visto en el video anterior. Entonces si nos desplazamos un poco más hacia abajo, veremos cómo crear un tema infantil. El primer paso es crear carpeta de tema infantil, que ya hemos hecho para que podamos saltarnos esto, y bajar al Paso 2. Paso 2, ya hemos creado nuestro style.css, y luego veremos una muestra de esta declaración la cual necesitamos agregar a este archivo. Después de esto, vamos a “Comando o Control C”. Justo antes de pegar esto en nuestro editor de texto, vemos que se requiere la siguiente información, como el nombre del tema, que vamos a agregar en la parte superior. Entonces también una plantilla. Esta sección de plantillas es realmente importante. Esto apuntará a nuestro tema de padres del cual queremos heredar toda la información. Volver a Visual Studio Code, pega esto en la parte superior. Paso 1, cambiaremos el nombre del tema. Este es cualquier nombre de nuestra elección. También podemos agregar un URI de tema, que es la ubicación del sitio web del tema, si tuviéramos uno. No tenemos uno, así que voy a dejar esto vacío. La descripción del tema infantil escaparate. El autor, coloque a su nombre. Puedes agregar tu sitio web si lo deseas, seguido de esta importante plantilla justo aquí. Esto va a heredar toda la funcionalidad del tema de escaparate, así que asegúrate de que esto sea correcto. También podemos agregar un número de versión para nuestro tema si queremos, y una licencia. Entonces en la parte inferior, vemos algunas etiquetas de muestra. Estas etiquetas incluyen cualquier característica que esté disponible con este tema, como si tienes algún modo claro y oscuro, si es un diseño de dos columnas, si incluye alguna barra lateral, si es un diseño responsive, si es listo para la accesibilidad-listo. Ya que ésta es sólo una demo, voy a eliminar todas estas etiquetas de muestra. Si quieres agregar tus propias etiquetas a este tema, podemos dirigirnos a esta URL justo aquí. Podríamos ver todas las etiquetas temáticas disponibles. Podemos simplemente seguir adelante y crear cualquier etiqueta que queramos. Tenemos que utilizar una selección de las etiquetas de esta página. Por ejemplo, el tema tema, podemos seleccionar un máximo de tres de estos, como si se trata de una tienda de comercio electrónico, si se trata de una tienda de alimentos y bebidas, si se trata de una cartera. Después desplazándose hacia abajo, tenemos muchas otras secciones. Si tenemos cierto diseño, que es una cuadrícula; si tenemos un número de columnas, si tienes barras laterales a la izquierda y a la derecha. Podemos colocar cualquiera de estas etiquetas para que el usuario sepa exactamente qué opciones de diseño se incluye con nuestro tema. El de las características. Muchas de estas características, ya sabrás por el personalizador, como colores personalizados, fondos y encabezados personalizados, menús personalizados, si admite imágenes destacadas. Podemos agregar tantos de estos a nuestro tema como nos gustaría. Si este tema es solo para su propio uso personal, las etiquetas realmente no importan tanto, pero cuando sí importan, es si planeas publicar esto en el directorio de temas sobre los sitios web de wordpress.org, en el sección temática. Si entramos en el detalle de alguno de estos temas, esta es la ubicación donde se mostrarán todas las etiquetas. Aquí es donde el usuario puede decir exactamente qué características se incluye con su tema. Volver a Visual Studio Code, y lo último que necesitamos cuidar es este dominio de texto. El dominio del texto es una característica importante. Es un identificador único para nuestro tema, y también se utiliza para traducir nuestro tema también. Esto también debe coincidir con el nombre de la carpeta para nuestro proyecto, por lo que necesitamos cambiar esto para que sea storefront-child, y luego darle a este archivo un guardado. El siguiente archivo que necesitamos agregar dentro de nuestra barra lateral, haga clic en el “Nuevo Archivo”. Este es el functions.php. No vamos a agregar nada dentro de este archivo por el momento. Este es un archivo que contiene toda la funcionalidad personalizada que queremos codificar en el tema nosotros mismos. La extensión PHP sólo significa que este archivo será escrito en el lenguaje de programación PHP. Echaremos un vistazo a qué es esto más adelante. El último aspecto que necesitamos añadir a este tema infantil es una imagen de tema personalizado. Proporcionado con este curso se encuentran algunas imágenes que podemos utilizar para este proyecto. Uno de ellos es el screenshot.png. También incluye un ícono del sitio que podemos utilizar en el navegador, y también un par de imágenes diferentes que utilizaremos en el slider de comercio electrónico a medida que pasemos por esta sección. Para incluir esto en nuestro proyecto, lo que tenemos que hacer es arrastrar sobre estas capturas de pantalla a la barra lateral. Esto colocará esto al lado de nuestras funciones y nuestro style.css. Este es ahora el mínimo desnudo que necesitamos para nuestro tema infantil, que lo último que hay que hacer es activar realmente esto en el tablero, así que hasta la sección Apariencia y Tema. Aquí está nuestro tema infantil de escaparate, justo aquí. Vemos este nombre de tienda niño, ya que esto es lo que ponemos dentro de nuestra hoja de estilo, justo aquí. También, vemos nuestra imagen, que fue el screenshot.png. Activemos esto. Ahora, pasa al frontend de nuestro sitio y refresca. Vamos a ver más o menos exactamente el mismo sitio porque no hemos agregado ninguna personalización al tema. Como puedes ver, se ve exactamente igual que con el tema de escaparate ya que sí hereda todo el estilo y funcionalidad. Tan solo para confirmar que estamos usando el tema infantil en lugar del padre, podemos ir al style.css. No necesitamos conocer ningún CSS para que esto funcione. Solo voy a agregar unas simples líneas de código, solo para comprobar esto está todo activado. En primer lugar, seleccionaremos la sección de cuerpo, que es el contenido principal de nuestra página. Entonces, en medio de las llaves, así como así, podemos establecer el color de fondo para que sea igual al rojo. Ahora bien, si guardamos este archivo y actualizamos el navegador, este cambio ya se ha aplicado. Tan solo para confirmar que esto sólo se aplica a nuestro tema infantil, podemos volver al tablero, y activar al padre ellos. Refrescar. Esto ahora sólo se aplica a este tema infantil. Ya que ahora sabemos que esto está funcionando, podemos quitar esta sección de cuerpo, luego reactivar el tema infantil. Ahora podemos hacer cambios con seguridad a este tema infantil. Sepa que no va a afectar al padre de familia. Esto ya está todo configurado, y ahora podemos seguir adelante con el resto de nuestro proyecto, pero solo un lado rápido antes de seguir adelante. De vuelta en la sección temática infantil, también hay un Paso 3, y esto es para encola una hoja de estilos. Dentro de nuestro tema infantil, hemos creado el style.css. Dado que este es un archivo requerido, nuestro padre de escaparate también tiene uno de esto, por lo que el Paso 3 es una forma de cargar esta hoja de estilo del padre. Esto es algo que generalmente necesitamos hacer al crear un tema infantil. Tenemos algunas funciones justo aquí las cuales podemos pegarla en nuestro functions.php. No obstante, al usar el tema de escaparate, esto es algo que automáticamente nos cuida. No es necesario que te metas en este enlace. Yo solo quiero mostrarles que esto ya se ha cargado para nosotros, lo que podemos dejar esto fuera de nuestro tema. Podemos ver aquí no necesitamos agregar esta función de encola ya que este tema de escaparate ya lo ha hecho por nosotros. Esto ahora deja todo listo nuestro tema infantil, por lo que ahora podemos seguir adelante con el resto del proyecto. 40. Comercio por Internet en WordPress: categorías de productos, etiquetas y atributos: Tenemos un tema infantil ahora se configura dentro de nuestro proyecto. WooCommerce, como miramos antes, nos da muchas opciones diferentes las cuales tenemos dentro de la barra lateral. Ten aquí todas estas opciones y hemos configurado algunos de los conceptos básicos cuando instalamos por primera vez el plugin. Vamos a pasar por algunas de estas opciones en los próximos videos, pero para este, queremos enfocarnos en los productos y toda la información adicional que necesitarás agregar a nuestros productos. Si hacemos click en esto, podemos ver una lista de todos los datos de muestra que trajimos, en un video anterior, necesita conocer todos los productos de muestra que vemos dentro de nuestra tienda. Entonces en el siguiente video, vamos a llegar a trabajar en agregar nuestros propios productos y cómo podemos editarlos. Para este video, justo antes de hacer esto, vamos a echar un vistazo a cómo podemos agregar toda la información extra que necesitamos para agregarla a nuestros productos. Esto incluye agregar nuevas categorías, nuevas etiquetas, y también atributos. Esto va a significar que toda esta información está lista para seleccionar cuando agreguemos nuestro propio producto personalizado. En primer lugar en la sección de categorías, podemos ver más a la derecha, tenemos una lista de todas las categorías que se habían traído con nuestros datos de muestra. Esta es solo una forma de categorizar nuestros productos, para que podamos ponerlos en ciertos grupos. También los podemos utilizar para filtrar nuestros productos en el front-end. Es realmente útil tener todas estas configuradas en las acciones a granel. Si seleccionamos esta casilla de verificación superior aquí, utilizando las acciones masivas, podemos seleccionar esta casilla de verificación y eliminar todos los contenidos de los datos de muestra. Entonces sigue adelante y crea el nuestro propio sobre a la izquierda. En primer lugar, le damos nombre a esta categoría y voy a ir por camisetas. Esta es la categoría principal para nuestra tienda. The Slug, que es una versión amigable con URL de nuestro nombre. Este nombre suele ser minúscula y sólo contiene letras, números y guiones. Vamos por las camisetas y esto va a aparecer al final de nuestra URL. Por lo que si hacemos click en la categoría de camisetas, esta sería nuestra URL con playeras de barra hacia delante al final. El de la categoría Padres. Cuando creamos categorías para nuestros productos, podemos ponerlas en una categoría parent o en una categoría child. A categoría Parent es el nivel superior, y luego podemos tener varias subcategorías anidadas dentro. Dejemos esto como un nivel superior. También podemos agregar una descripción opcional si queremos, y luego también establecer el tipo de visualización. Por ejemplo, si hiciéramos click en la categoría de playeras, queremos establecer lo que podemos ver dentro del navegador y vemos una lista de todos los productos que caen dentro de esta categoría. Vemos una lista de todas estas subcategorías si se trata de una categoría Parent. Entonces, por ejemplo, si tuviéramos dos subcategorías llamadas playeras infantiles y camiseta para adultos, ¿veríamos las subcategorías de esta página, en las que luego podemos dar click y ser llevados a través de los productos correspondientes? O en su lugar, podríamos incluso mostrar los productos y también las categorías en la misma página. Voy a dejar esto como predeterminado para luego agregar una imagen en miniatura y luego entrar a la Media Library. Podríamos elegir cualquiera de estas imágenes que tendremos justo aquí. Voy a entrar a las imágenes de la Tienda de Camisas las cuales se proporcionan con este curso, y arrastrarlas a la mediateca. Al igual que las camisetas y el texto antiguo, entonces usa esta imagen para nuestra categoría, agreguemos esto. Si quisieras, puedes seguir adelante y agregar múltiples categorías, pero como esta es una tienda de camisetas, solo voy a mantener esto como una sola categoría principal. A continuación, hasta la opción Etiquetas. Una etiqueta es solo una forma de agregar alguna información adicional a nuestro producto. Por lo que podríamos etiquetarlo con cierta información como si se trata de una gama veraniega, una gama invernal , si es para hombre , mujer, si es unisex, si es de marca, y mucha información adicional que podemos necesitar. El primero, vamos para el verano, también el Slug. A la descripción opcional, agreguemos esto. No tenemos ninguna otra etiqueta por encima de la derecha, así que estas son todas nuestras propias. Siguiente, invierno. Haga clic en esto, luego iremos por marca. Vámonos por unisex. Entonces, por último, agregamos varón y hembra. Esto es suficiente por ahora y todas estas opciones estarán disponibles cuando creemos nuestros propios productos personalizados. Abajo a los atributos. Atributos es solo alguna información adicional para describir nuestro producto. Encima a la derecha, podemos ver que tenemos el color y la talla ya configurada. Esto significa que podemos crear múltiples versiones del mismo producto pero la única variante podría ser este atributo. Podemos tener una camiseta, y en lugar de crear una camiseta en pequeña, mediana y grande, podríamos simplemente crear la misma camiseta individual y crear tres versiones diferentes basadas en estos atributos. Veamos un ejemplo de cómo podemos agregar esto. Ya tenemos el color y el tamaño los cuales son útiles para nuestra tienda. Añadamos algo más que es el tipo de manga. La diferencia entre nuestra propia costumbre uno y estos dos que se han agregado, es estos términos por encima de la derecha. El color tiene estas diversas opciones. Tenemos varias tallas, pero no tenemos ningún término para nuestro tipo de manga. Para ello, hacemos clic en configurar términos y agregamos nuestras propias opciones personalizadas. Para el tipo de manga, primero vamos por manga larga, luego Slug, y agregamos esto a nuestros atributos y también la manga corta. Agrega esto. Ahora, si volvemos a nuestros atributos, nuestros términos adicionales, y ahora junto a nuestros atributos, vamos por uno más. Este vamos por el estilo y luego a nuestros términos. Este primero, diremos llano. Bueno, esto es para todas las camisas llanas, impresas, y por último, rayas. De vuelta a nuestros atributos, el estilo está ahora ahí con nuestros términos al lado. Esto es todo lo que voy a añadir para este video. Puedes agregar más si lo prefieres. Podrás obtener las categorías, las etiquetas, y los atributos, y todos estos van a estar disponibles en el siguiente video cuando creemos nuestros propios productos personalizados. 41. Comercio por Internet en WordPress: cómo añadir productos: Con todo esto en su lugar, ahora tenemos toda la información que necesitamos para seguir adelante y crear nuestros propios productos para la tienda. Pasar al tablero y dentro de la opción Productos de la izquierda. Como ya sabemos, tenemos todas estas opciones las cuales fueron creadas con los datos de muestra de WooCommerce. Para editar o eliminar esto, todo lo que tenemos que hacer es pasar el cursor sobre cualquiera de estos productos al igual que hacemos con una página o una entrada de blog. Esto luego revela las opciones justo debajo. Estos productos también cuentan con una unidad de almacenamiento que es un código de producto. Tenemos una bandera en stock justo aquí, y esto se crea porque WooCommerce también permite la gestión de existencias. Podemos configurar una cantidad para cada uno de nuestros artículos y WooCommerce nos alertará cuando lleguemos a un nivel de existencias bajo. Precio, y luego también vemos las categorías y las etiquetas que agregamos en los videos anteriores. Podemos hacer click en esta estrella y esto es para un producto de función. Un producto destacado aparecerá en una ubicación especial en nuestro sitio el cual tiene un área dedicada en la portada, y echaremos un vistazo a esto en tan solo un poco. También la fecha publicada. Nos interesa sumar nuestros propios productos. Esto se presenta de manera similar a una entrada de blog o a una página, solo haremos clic en “Agregar nuevo” y luego podremos añadir nuestro primer producto nuevo. Voy a hacer pegarse con el tema de las playeras y llamar a esto una Camiseta Ninja, y alguna información: manga corta y en color gris, dentro de los corchetes diremos que esta es la versión pequeña. Podemos agregar una descripción, y esto aparecerá junto al producto en la vista completa del producto. Puedes crear cualquier descripción que quieras. Voy a decir, "Saca al ninja en ti con esta impresionante camiseta ninja en gris. Esta camisa de manga corta es ideal para el verano, fabricada en un material fresco y ligero”. Desplazándose hacia abajo, tenemos toda nuestra sección de datos de producto justo aquí. En primer lugar tenemos el tipo de producto el cual es un producto sencillo. Esta es solo una versión única de un producto, por lo que una camiseta pequeña, podríamos tener una camiseta mediana, y estos son todos productos independientes independientes. En el siguiente video, echaremos un vistazo a cómo podemos crear automáticamente diferentes versiones de la misma camisa utilizando un producto variable. Este es un producto físico, por lo que no es descargable ni virtual, así que vamos a desmarcar estos también. Un precio, vamos por $19.95, y WooCommerce también nos da la opción de agregar un precio de venta si queremos, y programar esto para una fecha futura. Siguiente inventario, como mencionamos antes, esto nos permitirá actualizar nuestros niveles de existencias y también ser alertados cuando lleguemos a un nivel de existencias bajo. Si quieres esto, puedes mantenerlo comprobado y podemos establecer la cantidad de stock actual. Podemos permitir pedidos pendientes lo cual es una forma para que el cliente pida un producto si actualmente no tenemos ninguno en stock, entonces cuando metamos nuestro stock en, entonces podemos enviarlo al cliente. Entonces también el umbral de stock bajo que es el número cuando WooCommerce nos notificará si alcanza este valor, así que agreguemos 10 productos diferentes dentro de aquí. No vamos a permitir pedidos pendientes y vamos a mantener esto como dos. Si lo deseas, también puedes restringir esto para vender solo una cantidad a la vez. Algo más que se requiere es un SKU y este es un código de producto o una unidad de mantenimiento de existencias. Este es un valor único para estos productos, puedes darle a esto un número aleatorio o un código aleatorio. Vamos a tener una camiseta de decir, gris, y el tamaño de la pequeña, que coincide con nuestra descripción arriba en la parte superior. También podríamos añadir una manga corta por dentro aquí también. A continuación tenemos la opción de envío donde podemos sumar el peso y las dimensiones y además añadir una clase de envío si queremos. No tenemos ninguna de estas clases de envío configurada por el momento, pero estas están disponibles dentro de las opciones de WooCommerce. Si contamos con múltiples productos también podemos vincular esto a otros productos de nuestro sitio. Podemos vincular esto a productos para ventas superiores y también ventas cruzadas también. Upsells es una forma de ofrecer al cliente un producto de mayor valor que a su vez trae más ingresos. Una venta cruzada es cuando tomamos el producto actual y ofrecemos al cliente algo más que también le puede gustar comprar, y estos artículos se muestran todos al usuario al pasar por el proceso de pago. Los atributos sean cuales sean estos, estos son lo que w agregó en un video anterior. Podemos agregar el color, la talla, el tipo de manga, y también el estilo. En primer lugar, vamos a añadir el color. Este es el desplegable que mencionamos anteriormente, voy a seleccionar el color gris. Si queremos, también podemos hacer clic en el botón “Seleccionar todo”. A continuación, tenemos el tamaño, esta fue una versión pequeña. El tipo manga, esta era una manga corta. Entonces la última opción fue el estilo, llano, luego guardar todos los atributos. En la sección avanzada, podemos agregar una nota al usuario la cual se envía después de haber comprado este artículo. Esto puede ser alguna información adicional o algunas instrucciones de descarga, pero generalmente algo muy específico a este artículo. Podemos vender nuestro producto en cierto orden y también podemos activar o desactivar las opiniones también. En la parte inferior tendremos una versión corta de la descripción, y ésta aparecerá justo debajo del título del producto. Entonces vamos a copiar la versión corta de nuestra descripción completa, pegar esto en, y esto es todo nuestro detalle de producto ahora en su lugar. Por encima de la derecha, tenemos muchas opciones similares de las entradas de blog en las páginas. Podemos establecer dónde queremos que se publique este ítem, ya sea que éste sea de inmediato o en una fecha fijada en el futuro. las categorías, esto es por supuesto una camiseta. También podríamos agregar algunas etiquetas adicionales y también seleccionar de las más usadas también. En la imagen del producto, podrías subir una imagen personalizada para esto o seleccionar una de las existentes desde aquí. Este producto era gris, así que voy a seleccionar la camiseta gris, el texto alt para esta imagen de producto. También podemos añadir una galería de diferentes imágenes si queremos. Creo que esta es toda la información que necesitamos. Vamos a dar clic en publicar y echar un vistazo a esto en nuestro sitio. Refresca, asegúrate de estar en el enlace de la tienda justo aquí. Desplázate hacia abajo y ahí está nuestro producto personalizado. Podemos hacer click en esto para ser llevado a través la información adicional del título, el precio. Esta de aquí es nuestra breve descripción que agregamos en la parte inferior. Habilitamos el control de existencias, por lo que vemos el número de artículos en stock. Podemos agregar esto a nuestro carrito y ahí está toda la información adicional como nuestro código de producto, nuestras categorías, y la descripción completa en la parte inferior. Todo esto se ve bien. Ahora entra al tablero y al producto ya que esto es una camisa así que voy a quitar todos los productos de muestra que no son una camiseta así los sombreros, las gorras, las gafas de sol. Podemos quitar las sudaderas y simplemente quitar cualquiera de estos productos que no quieras, tu gorro, tu cinturón. Podemos eliminar todos estos con las acciones a granel. Justo antes de terminar este video, vamos a añadir un producto más. Vamos a crear una versión mediana de este mismo producto. Podríamos volver a empezar desde el botón “Añadir nuevo”, o podemos utilizar todas estas opciones como punto de partida duplicando este producto. Voy a quitar la copia, y para esto, todo lo que tenemos que hacer es ajustar esta para que sea la versión media. La descripción esta bien, el precio esta bien. Cambiemos esto para que sea ocho. También se necesita cambiar la unidad de almacenamiento para que sea el medio. Quitar el ya que este era un duplicado, y luego en el link productos también podemos vender esto cruzado. También mostraremos la versión pequeña al cliente también. Todo lo demás debería estar bien así que publiquemos esto en tu antigua tienda. También está nuestra versión mediana, y nos quedan solo con las Camisetas dentro de nuestra tienda. Bueno, así es como podemos agregar un solo producto a nuestra tienda. A continuación vamos a echar un vistazo a los productos variables. 42. Comercio por Internet en WordPress: productos variables: Anteriormente, agregamos dos nuevos productos, que era la misma camiseta tanto en la talla pequeña como en la mediana. Para hacer esto, necesitábamos crear dos productos separados, y esto podría ser mucho trabajo. Tendrás muchas variantes diferentes del mismo artículo. Para ayudar con esto, WooCommerce proporciona una opción de producto valiosa. Esto significa que podemos agregar un producto base. Usando este ejemplo, esta sería una camiseta ninja, manga corta en gris, y luego usaríamos los atributos, que es el tamaño, para crear dos versiones separadas de los mismos productos. De hecho, también crearía una versión grande también. Esto ahorraría mucho trabajo, pero ver esto en acción en nuestro tablero. En primer lugar, agreguemos un nuevo producto. Voy a ir por el mismo artículo pero esta vez en un color diferente. El ninja T-Shirt, manga corta , y esta vez, esta va a estar en verde. Vamos a copiar también sobre la descripción, de la descripción completa de aquí. Pegar esto está en. Anteriormente, acabamos de utilizar este sencillo producto, pero esta vez vamos a bajar al producto variable. Para las unidades de mantenimiento de existencias retiraremos el tamaño y los cambios para ser verdes. No voy a habilitar la gestión de existencias para éste. Podemos dejar el envío, los productos vinculados. Pero esta vez por los atributos, bajaremos al tamaño. En esto, seleccione todos nuestros valores que sean pequeños, medianos y grandes. Pero esta vez queremos usar estas cuatro variaciones. Esto significa que crearás versiones gratuitas del mismo producto en pequeño, mediano y grande. Danos un ahorro. A continuación, hasta la opción de variaciones. Desde aquí, podemos afinar los detalles para cada una de nuestras variaciones. Por lo que nuestra pequeña, mediana y grande. O si quisiéramos, podríamos crear una variación a partir de todos nuestros atributos. Para nuestros más pequeños, adelante y agrega una variación. El variación será del tamaño. Entonces si hacemos click en esto, obtenemos una opción desplegable. Podemos personalizar todas las opciones para el único producto. Necesitamos un precio para esto,19.95. Esto va a ser, de hecho, lo mismo para todas nuestras tres versiones. Pero podrías hacer esto diferente si quisieras. Podemos afinar cosas como el stock, dimensiones del peso, y también el envío en clase también. Guarda esto. Después ve a agregar variación. Esta vez, esto es para el medio. Haga clic en esto, el menú desplegable. Esto también necesitará un precio. Guarda nuestros cambios. Entonces por fin para los grandes, esto se acaba de hacer. También podemos copiar la breve descripción, pegar esto en la parte inferior. Ponga una imagen. Este era verde así que selecciona la versión verde. Dado que no hemos seleccionado una imagen individual para nuestra varianza libre, esta va a ser la imagen por defecto. Selecciona la categoría playera, y luego podemos publicar este producto en nuestra tienda o en nuestro sitio. Esta es la versión verde que acabas de crear. En lugar de añadir esto directamente al carrito, como podemos ver con los demás productos, ahora tenemos la oportunidad de seleccionar nuestras opciones. Podemos elegir una talla, tenemos pequeña, mediana, y grande. Entonces después de seleccionar esto, podemos entonces seguir adelante y añadir esto a nuestro carrito. Si sí avanzamos y cambiamos los detalles de cada una de estas versiones, como un precio diferente, toda esta información se actualizará cuando seleccionemos una versión diferente. Desplazándose hacia abajo, también tenemos la descripción genérica para todas estas variantes y también productos algo relacionados también. Ahí vamos. Es así como podemos agregar productos variables a nuestra tienda. Realmente nos puede ahorrar mucho tiempo, tendremos muchas versiones diferentes de un producto similar. 43. Comercio por Internet en WordPress: Diseño de la página de inicio y deslizador: Bienvenido de nuevo. Si vamos a nuestra Página Principal haciendo click en el título de nuestro sitio sobre la parte superior, todo este enlace de inicio dentro del menú. Nos llevan a la Página Principal, que por defecto, con cualquier tema de WordPress, es solo una página de blog. El inicio del tema por defecto no es diferente a esto, así que lo que vamos a hacer en esta Página de inicio es transformarlo, parecerse más a la tienda de comercio electrónico. Vamos a sumar un montón de secciones nuevas. Vamos a mostrar nuestros productos mejor valorados, nuestros artículos destacados, nuestros artículos que están a la venta, diferentes categorías, y mucho más. Para ello, primero necesitamos un hogar en el que realmente colocarlos. Volver al tablero, y dentro de las páginas, Agregar Nuevo. Este va a ser para nuestra Página Principal. Si quisiéramos, podríamos construir esto con todos los blogs que hemos visto en videos anteriores. Podríamos crear todas estas secciones y si subimos a la esquina superior, a la sección de bloques, bajamos. En realidad tenemos una sección WooCommerce con todos los diferentes bloques, que pueden colocar en esta página. Tenemos control total sobre la personalización de esto. Podemos agregar categorías, productos destacados, podemos colocar en reseñas, podemos filtrarlos hacia abajo por categorías, etiquetas y atributos, y también a un filtro de precios también. Esto es realmente flexible y podemos ir de esta manera si queremos, u otra alternativa es usar una plantilla preconstruida que viene con este tema. la pestaña de página en la barra lateral, a la baja los atributos. Actualmente estamos usando esta plantilla predeterminada. Pero WooCommerce también proporciona una plantilla de Homepage, que podemos utilizar como inicio rápido. Que es todo lo que necesitamos hacer, y publicar esta página e ir a nuestro sitio, refrescar. No vemos nada diferente todavía, la única diferencia es que ahora tenemos dos enlaces de Homepage. Lo arreglaremos muy pronto. Como sabemos de proyectos anteriores, para eliminar las entradas de blog de la Página Principal, tenemos que ir al panel de control, y cambiar esto desde la configuración. A partir de aquí, dirígete a la opción de lectura, y luego podemos cambiar esta Página Principal para mostrar una página estática, que va a ser el hogar. En los posts, también podemos cambiar esto a una sección de bloque si queremos crear una nueva página también. Pero sólo voy a dejar esto vacío por ahora. Guarda esto. Ahora si volvemos a nuestra tienda y actualizamos, ahora se ha transformado la Página de inicio, tenemos el título, tenemos la sección de categorías, tenemos el nuevo producto que recientemente creamos, recomendados, favoritos, y también los Best Sellers en la parte inferior también. Es así como se ve fuera de la caja con WooCommerce. Pero a veces queremos hacer cambios a esto, y hacerlo más personal. Por ejemplo, ya que sólo tenemos esta categoría Camisetas, realmente no queremos que esta sección de categorías esté mostrando, y también sería bueno si pudiéramos quitar también estos textos caseros. Para ello, podemos agregar en un plugin de WooThemes, que se llama Control de Página de inicio. Esto significará que podemos editar la sección, podemos reorganizar las cosas, y también podemos eliminar cualquier sección también. Ir al panel de control, esto se instala como un plugin. Añadamos uno nuevo, y hagamos la búsqueda de control de la Página de inicio. Este es el plugin que necesitamos por WooThemes, instala esto, activa hasta acceder plugin. Tenemos que entrar en los plugins y luego en el personalizador. Personalizador ahora tiene la opción de control de Página de inicio donde podemos marcar y desmarcar cualquiera de estas secciones que quieran agregar o quitar. Pero antes que nada, el contenido de la Página de inicio, si desmarcamos esto, que sólo va a quitar el título de casa. Este es el que acaba de aquí. No necesitamos esto, las categorías. También quita esto hasta que tengamos algunas categorías más para mostrar. El resto de estos están bastante bien como lo están. También podemos arrastrar estos, y reorganizarlos en un orden diferente. Podemos personalizar esto para mostrar las secciones en cualquier orden que desee. También puedes comprobar cómo se ve en una pantalla más pequeña. Si hace clic en la vista móvil, esto reduce hacia abajo todos los productos para ser el ancho completo de la pantalla. Publicemos esto, y pasemos a Homepage en refrescar. Todo esto se está actualizando ahora. Otra característica popular que vemos en las tiendas de comercio electrónico es un deslizador de imagen, y esto a menudo se coloca justo debajo de la sección de encabezado. Al igual que el proyecto anterior que creamos, este tema en particular no incluye su propio slider incorporado, pero esto está bien. WordPress tiene cientos de diapositivas que podemos usar como plugins. Volver al panel de control en la sección de complementos y Agregar Nuevo. Puedes elegir cualquier plugin que quieras, pero voy a hacer una búsqueda de MetaSlider. Este es uno que necesitamos justo ahí, instalar. Activa este plugin y ahora tenemos una opción dentro de la barra de diapositivas. Abajo en la parte inferior. Haga clic en esto. Tenemos una sección Inicio rápido y podemos soltar nuestras imágenes directamente en aquí. Pero voy a crear una presentación de diapositivas en blanco con este botón justo aquí. Esto necesitará entonces agregar múltiples diapositivas las cuales van a mostrar nuestras imágenes. Proporcionado con la descarga de imágenes es de dos diapositivas diferentes, que ahora voy a agregar. Pero antes que nada, los tres por dos en playeras llanas. Podemos agregar esto a nuestra presentación de diapositivas. Podríamos introducir un título si quieres agregar algún texto para superponerse, pero ya que esto ya tiene las etiquetas de tres para dos en playeras planas. Voy a dejar esta imagen sin el título. También podemos colocar en una URL dedicada. Si tienes una página que enlaza esto también. También hay opciones de motor de búsqueda donde podemos agregar cosas como el texto antiguo. Podemos recortar la imagen, podemos reorganizar esto en diferentes ubicaciones. También son más opciones si agregamos el pack Pro. Bueno, esto es una actualización pagada. Por encima de la derecha, podemos cambiar la altura y el ancho de la presentación de diapositivas. Podemos agregar efectos de transición. Podemos mostrar las flechas, que es la flecha de izquierda y derecha, el cambio entre estas imágenes. Esa es nuestra segunda diapositiva, que va a ser la impresión gratuita en tu primer pedido. Nuevamente, tenemos todas las mismas opciones, pero solo voy a dejar esto como predeterminado y luego guardarlo. Colocas esto en WooTheme tendrá múltiples opciones. Una de las formas más sencillas de hacer esto, es agregar esto como widget a la sección de apariencia, widgets. Por encima de la izquierda, ahora vemos un widget MetaSlider, que ahora podemos reemplazar en todas las ubicaciones. Pasa a esto, justo debajo del encabezado, podemos agregar esto en, todo a nuestros sitios y refrescar. Al ser nuestro deslizador con nuestras flechas, y también tenemos estos botones hacia abajo en la parte inferior, para cambiar entre estas imágenes, el deslizador, ya que es lugar debajo del encabezado será visible en todas las páginas adicionales también. Pero si queremos filtrar esto para solo apelar en ciertas páginas, como nuestro hogar, donde podemos hacer esto, es quitando widgets. Entonces si volvemos a nuestra presentación de diapositivas, abajo en la parte inferior, tenemos una sección Cómo usar. Tenemos la versión de codificación, que es copiar esta sección completa de PHP, y podemos copiar y pegar esto en nuestras plantillas de página. Este necesita entrar en nuestro tema, y luego encontrar la plantilla exacta que controla la Página de inicio. O otra forma en la que podemos hacer esto sin ningún tipo de codificación es copiar esta sección naranja en el medio. Entonces podemos pegar esto en cualquier página que queramos. Yo quiero ir a la Página Principal. Entonces como hemos mirado en el pasado, pegamos esto en bloques de un voltios. WordPress reconoce que se trata de un código corto, saber que hay que hacer es actualizar esta página a nuestro sitio y refrescar en la Página de inicio, y no vemos que el control deslizante aparezca en la parte superior. De hecho, si nos desplazamos hacia abajo, no lo vemos en ninguna parte de esta página. Esto puede parecer bastante confuso, pero esto se debe a que si pasamos al panel, y luego al personalizador, antes cuando configuramos nuestra Página de inicio con su plugin de control de Página de inicio, desactivamos la Página de inicio contenido. Es el contenido de la Página de inicio era eliminar el título de la página, y esto era todo el contenido o todos los bloques que se encuentra dentro de nuestra página. Desafortunadamente, esto también está quitando nuestro bloque de presentación de diapositivas también. Si comprobamos esto, podemos ver nuestro control deslizante, pero también podemos ver nuestro título en la parte superior también. Entonces, ¿cómo vamos a tener un slider pero no este título? Bueno, antes que nada, publiquemos. Después vuelve a bajar a esta sección adicional de CSS. Esto tiene algunas opciones diferentes de cómo podemos eliminar nuestro título de página. Si quisiéramos, podríamos saltar al tema, y hacer algo de personalización con el código. Pero en cambio vamos a estar haciendo esto con algo de CSS. CSS es solo algún código que puedes agregar a la sección, que va a cambiar el aspecto y la sensación de nuestro sitio. Pero nosotros hacemos esto. Primero necesitamos recortar el título de la página, así que ve al tablero, a las páginas y haz clic en la sección “Editar” de nuestra página principal. Tenemos que tomar nota de este número de post en la parte superior, y este es el ID de la página de inicio. Lo que necesitamos hacer es un punto, página dash ID dash, y luego tu número de página y el mío es 76, y luego entrada de punto, título de guión, así que este es nuestro número de página. Entonces esta es la clase que apunta al título de nuestra página. Lo que vamos a hacer aquí es establecer el tipo de visualización para que sea ninguno, punto y coma al final. Esto eliminará todo el título solo en esta Página de inicio, publicará esto, y de vuelta a nuestro sitio. Vuelve al front end, y ahora tenemos un slider en su lugar para nuestra Página Principal. También se ha eliminado el título de la página. Ahora nuestro sitio se parece más a una tienda de comercio electrónico. , vamos a echar un vistazo algunas opciones de personalización adicionales configurando algunos colores diferentes que estoy branding. 44. Comercio por Internet en WordPress: personalizar el aspecto de nuestra tienda: Nuestro sitio ahora se asemeja y funciona como una tienda de comercio electrónico. Parece que cuando muchos negocios, también queremos hacer esto más personalizado a nuestros propios colores, nuestros propios diseños, y también generalmente hacerlo más marcarlo a nuestra propia empresa o a nuestra propia imagen personal. Al igual que con muchas de las personalizaciones, podemos entrar en la apariencia y luego en la sección personalizada. Aquí, sólo vamos a añadir algo de marca personalizada y también algunos colores. Tendremos un montón de opciones diferentes para hacer esto en diferentes páginas. O también podemos agregar un mismo esquema de color a todos nuestros enlaces, todos nuestros textos y a todos nuestros fondos para cada una de las páginas. En primer lugar, antes de hacer esto en la identidad del sitio, en la que has estado antes, vamos a primero que nada, estos cambios se capitalicen, por lo que esta será Shirt Store, y luego el tagline que estará justo debajo del subtítulo. Este dice camisetas personalizadas y de marca. Entonces también, podemos agregar un icono del sitio, que va a aparecer dentro de la parte superior del navegador. A partir de aquí, es como esta playeras, el texto viejo, así, recorto esto para ser la forma cuadrada para caber dentro de la parte superior. Si estamos contentos con esto, sigamos adelante y publicamos esto. Podemos ver nuestro icono arriba en la parte superior, luego volver atrás, y podemos empezar a trabajar a través del resto de las opciones. El siguiente es el encabezado. Podemos establecer una imagen de encabezado, pero no necesitamos hacer esto. Sólo voy a cambiar el color de fondo y también el texto y los enlaces también. En primer lugar, el color de fondo, puedes mover este selector de color y elegir cualquier color que te gustaría. Pero voy a ir por el color que es a4c1c4, y es justo este color verde claro que vemos aquí. El color del texto, voy a seleccionar 43454b. Entonces el enlace color hacia abajo en la parte inferior, éste será f2f2f2, que es de color blanco. Publicar esto. Después de volver de cabecera a las opciones principales. El pie de página abajo en la parte inferior, solo mantengamos esto consistente con el encabezado y aplicamos los mismos colores. El fondo, para que coincida con el encabezado, fue el valor de a4c1c4. Al igual que este color de fondo justo aquí el color del texto, éste era 43454b, y luego el color del enlace, que era f2f2f2. Publicar esto. A continuación, también podemos adaptar el color de estos botones también. Este es el botón Agregar al carrito y también el botón Seleccionar opciones para los productos variables. Esto tendrá una opción de botones dedicados justo aquí. Además, si quisiéramos cambiar la imagen de fondo o el color, podríamos hacer esto con la opción de fondo. También podemos cambiar el color de la tipografía, que se aplicará a todo nuestro sitio, en lugar de solo las secciones de encabezado y pie de página. Para los botones, voy a usar el mismo color que hemos usado en el fondo para el pie de página y también el encabezado. Este color fue a4c1c4. También, el color del texto más claro, que era f2f2f2. Publica si estás contento con estos cambios, luego vuelve al menú principal. Ya hemos pasado por muchas de las otras opciones como el layout. Podemos cambiar la posición de la barra lateral y podemos ir al control de la página de inicio, que ya hemos mirado. Esto es para reorganizar estas secciones y también quitar cualquiera de ellas también. Los menús y widgets que ya hemos cubierto. El ajuste de la página de inicio, estos son también los mismos ajustes que tenemos desde la barra lateral. Si vamos a la configuración que estoy leyendo, esto es sólo una oportunidad para cambiar la página que usamos para la portada de nuestro sitio y también qué página se utiliza para nuestras entradas de blog. Pero ya los hemos establecido previamente, pero también tenemos algunas opciones de Woo Commerce de clientes abajo en la parte inferior. Podemos establecer un aviso de estancamiento, que podemos habilitar para que se muestre en pantalla si aún no hemos publicado nuestro sitio todavía. También lo podemos utilizar para mensajes promocionales y también si tenemos algún evento determinado próximo. Habilicemos esto. Podemos ver hacia abajo en la parte inferior, esto ha sido pegado al fondo de nuestro sitio. Esto también es útil para cosas que son ventas, pero también para que el usuario sepa si hay algún mantenimiento planificado en el futuro. De vuelta de aquí, su catálogo de productos, muchas de estas opciones son exactamente las mismas que tenemos dentro de la página de productos o de la configuración de Woo Commerce. Podemos configurar nuestras páginas para mostrar ya sea productos o simplemente categorías o una combinación de ambos si tienes categorías de gráficos. Podemos personalizar la clasificación de estos productos, cuántas filas queremos en la página y cuántos productos para cada una de estas filas. Pero voy a mantener esto como predeterminado. En la página del producto, tenemos la opción de hacer pegajoso el botón Agregar al carrito, que actualmente es. Esto significa que se pegará a la parte superior de la página. Ves esto. Si entramos en uno de nuestros productos, no lo vemos por el momento porque actualmente tenemos el botón Agregar al Carrito en nuestra vista. Pero si nos desplazamos esto fuera de la vista, este es el popup justo en la parte superior aquí. Esto nos da la oportunidad de quitar esto si no queremos que esto aparezca. El paginación. Estos son los botones de derecha e izquierda, se mantiene entre estos productos. Podemos desmarcar estos. Estos ahora se quitan, por lo que sólo tendremos que enfocarnos en un solo producto. A continuación, las imágenes del producto, podemos establecer cómo queremos las imágenes, recortar o subir las nuevas. También una opción para personalizar los campos dentro del formulario de pago también. Si lo quisieras, también podrías crear algunas páginas adicionales para la política de privacidad y también los términos y condiciones. Pero quiero mantener todas estas opciones como predeterminadas ya que la mayoría de ellas son bastante estándar para una tienda de comercio electrónico. Publicar cualquier cambio que haya realizado. Cierra esto, y si volvemos a nuestro front-end y refrescamos. Todos los cambios ya han entrado en vigor. Bajen. Tenemos los botones y también el área de pie de página también. Desde arriba, también se ha actualizado nuestro título lateral y nuestro tagline. A modo de nota al margen, si el ancho de la diapositiva es un problema y preferirías tenerla más ancha, no podemos cambiar esto en nuestra página de inicio. Los ajustes para esto no están disponibles dentro de las opciones de presentación de diapositivas porque el ancho de éste había sido restringido por nuestro bloque Gutenberg. Recuerda cuando agregamos esto con nuestro widget, esta era una sección mucho más amplia. Si pasamos a nuestra página de inicio y luego en lugar de pegarlo, mostraré un código directamente así como éste. Lo que podemos hacer es agregar un nuevo bloque y el bloque que necesitamos para esto, hacemos click en el icono más, va a ser este grupo. Este grupo tiene algunas opciones de ancho donde podemos seleccionar el ancho ancho ancho ancho o el ancho completo de la pantalla. Vamos por la opción amplia y luego haga clic en este icono más. A continuación, puede agregar un código corto. Primero solo copiemos esto, el código corto, y peguemos esto en, actualicemos. Si elimino esta presentación original, top, auto site y refresco. Esto ahora nos da una presentación de diapositivas mucho más amplia. A continuación, vamos a ver cómo podemos crear algunas páginas más, pero esta vez usando una herramienta llamada Page Builder para crear algún diseño realmente flexible. 45. Comercio por Internet en WordPress: diseños flexibles con el constructor de páginas: Ya sabemos cómo podemos crear páginas desde el tablero con este enlace Agregar Nuevo justo aquí. También hemos analizado cómo utilizar el editor de texto Gutenberg para agregar muchos bloques de contenido diferentes a nuestras páginas. En este video, te voy a mostrar una forma diferente de crear algunas páginas. Esto es mediante el uso de un plugin llamado Page Builder. Volvamos al panel de control y podemos echar un vistazo a cómo podemos agregar esto a nuestro sitio. En primer lugar, este es un plugin por lo que Agregar Nuevo. Entonces, necesito buscar un Page Builder, que se filtra hacia abajo. Este es el que necesitamos, que es Page Builder by SiteOrigin, instalarlo, y esto nos va a permitir crear algunos diseños flexibles, podemos decir cuántas filas y qué ancho va a ser cada una de estas secciones. Entonces podemos colocar en una pieza diferente de contenido como widgets, activar esto, y así como los widgets estándar que vienen con WordPress. Page Builder también nos da algunos widgets extra también que también podemos descargar. Esto, volver a Agregar nuevo, hacer un paquete de widgets de origen del sitio. Esto es lo que necesitamos aquí. Instalar este. Dado que estos son del mismo autor, esperas que estos widgets sean totalmente compatibles con este Page Builder. Activa esto. Ahí vamos. Si entramos en la apariencia y también en el área de widgets, dentro de aquí, ahora tenemos acceso a algunos nuevos Widgets de SiteOrigin. Incluye cosas como botones, carruseles de imagen, Google Maps, widgets de imagen, y también un editor de texto. A modo de ejemplo, vamos a crear una nueva página con páginas y añadir nuevas. Este es para una página Contáctanos. Dado que este plugin ahora está instalado junto al editor visual y el editor de texto, también tenemos acceso a una nueva pestaña llamada Page Builder. Para empezar, podemos hacer click en los “Widgets”, podemos agregar nuevas filas, o usar algunos de los diseños preconstruidos si queremos. Vamos a jalar estos a la izquierda. A continuación, voy a empezar esto con una nueva fila. Verás una vista previa de todos los cambios. También tenemos este botón Live Editor dirigiéndose a aquí. En primer lugar, sumemos nuestra nueva fila, voy a añadir esto con este botón justo aquí y esto nos dará la oportunidad de reorganizar el ancho de cada una de nuestras secciones. Podemos hacer un lado pequeño o más grande haciendo clic en este botón en el centro y también aumentar o disminuir el número de columnas también. Dejemos esto como dos, que se va a espaciar uniformemente. Si quieres afinar cosas como el CSS, también podemos darle a cada una de estas filas cierta información del cliente, como un ID personalizado o una clase personalizada, o también podríamos añadir directamente declaraciones CSS aquí si quisiéramos. También podemos afinar el relleno en el margen también. Si no estás seguro de qué margen y relleno es, el margen es el espacio que podemos agregar fuera de esta fila. Un relleno es el espacio que aparece dentro de la fila. Podemos personalizar todos estos valores en cada uno de los lados. Si quisiéramos, también podríamos personalizar un valor diferente para el diseño móvil y también personalizar el color de fondo y la imagen también. Estoy contento con estos valores por defecto así que voy a insertar esto. Entonces del lado izquierdo, podemos agregar algunos widgets nuevos con este botón justo aquí. Podemos agregar cualquiera de los widgets existentes de WordPress o estos con los iconos azules, los que se deben agregar con el Paquete de Widgets de SiteOrigin. En primer lugar a la izquierda, podemos agregar un bloque de texto el cual es alguna información sobre nuestra dirección. Edita esto. El título es para nuestra dirección así que diremos, 'nos pueden encontrar en', luego un colon. Entonces solo algunas líneas de dirección de muestra dentro de aquí. Duplicar esto. Línea número 2, línea número 3. También puedes cambiar esto para que sea una lista si lo deseas resaltando y dando click en este botón justo aquí. Inserta esto. Vemos una vista previa justo aquí, y debajo de un segundo widgets de texto. Este va a contener el correo electrónico y también la URL a nuestra página web. Edita esto un título de contactos útiles, dirección de correo electrónico, y también una URL también. Después, a la derecha podemos agregar un widget diferente, resaltar esta área en los widgets. Por encima de la derecha, puede ser útil agregar algo como un mapa de Google con la ubicación de nuestra tienda. Podemos seguir adelante y agregar esto si queremos, pero algo que ahora necesitas con Google Maps es el acceso a una clave API. Google maps es gratuito de usar, pero sí es necesario agregar una tarjeta de crédito archivada. No voy a pasar por esto para este proyecto. Puede ser solo algo que tal vez quieras agregar en el futuro si vas a vivir con tu tienda. Puedes usar este enlace en la parte superior para ser llevado al panel de Google, puedes crear un código API si quieres usar esto en un proyecto. Solo voy a dejar esto apagado, pero puede ser útil agregar un mapa a la página de contacto si tienes un sitio que se va a vivir. Ten una jugada con estos, puedes mirar a través de todos los widgets disponibles. Puedes seguir adelante y crear muchas más páginas nuevas. También ve si esta es tu opción preferida para crear páginas o si prefieres el editor Gutenberg original. Por último, vamos a guardar esto, haga clic en este permalink, y esa es nuestra nueva página Contáctenos. A continuación también vamos a añadir esta página Contáctanos a nuestro menú. También mira cómo podemos reorganizar los menús también. 46. Comercio por Internet en WordPress: reordenar los menús: Por el momento, nuestra sección de cabecera, solo tiene este único menú, tiene todos los enlaces que se han proporcionado por defecto al agregar el plug-in WooCommerce. Un par de cosas que debes saber con este menú es, en el video anterior, cuando creamos nuestra página Contáctenos, esto no se ha agregado automáticamente. Todavía tenemos la página de muestra que necesitamos quitar. También podemos dividir este menú en menús más pequeños si queremos. Voy a dividir esto en dos menús separados. Uno va a ser el menú de usuario, que contendrá enlaces, como las Cuentas, la canasta de los usuarios, y también el Checkout, y luego otro menú que va a ser más de una navegación del sitio, y esto contendrá enlaces a diferentes páginas de nuestro sitio, como el Hogar, el Contáctenos, y también la Tienda. En primer lugar, revisemos la página de ejemplo desde el enlace Páginas y solo eliminemos esta sola página. Después en Apariencia y Menús. El primero, el primer nombre del menú va a ser el menú Navegación. Esta será la ubicación del menú principal. Esto estará en lugar de este menú actual justo aquí, por este menú, y luego podremos agregar las páginas que queremos mostrar. Esto, puedo Ver Todo y voy a ir por la Página Principal. El Contáctenos, que era una nueva página que acabamos de crear, y también la página de la Tienda. Agrega esto. Puedes reorganizar estos si lo prefieres, pero estoy contento con este pedido. Guarda esto. Si hacemos click en la “Vista previa en vivo” en la parte superior, seremos llevados a la vista Personalizador, que tiene las mismas opciones, donde podemos ver todos estos cambios en tiempo real. Hay los tres nuevos enlaces de menú en la ubicación principal. Ahora voy a crear un nuevo menú el cual va a estar en la parte superior de nuestro encabezado, y esto contendrá los enlaces relacionados con el usuario. Crear Nuevo. Esta será la ubicación del Menú de Usuario. Esto será secundario, por lo que esto aparecerá en la parte superior del encabezado, y ahora podemos llegar a trabajar con la adición de nuestros enlaces. Agregar Artículos. Esto también va a enlazar a algunas páginas. Voy a seleccionar Mi Cuenta, el Checkout, y también el Carrito de Compras. A medida que hacemos clic en ellos, éstos se suman a la parte superior de nuestra sección de cabecera. Podemos publicar esto, y hacer estos cambios en vivo. Dentro de las ubicaciones del menú, también tenemos este menú de mano también. Este es un menú dedicado el cual podemos mostrar en los dispositivos de pantalla más pequeños. Haga clic en la vista Móvil justo aquí. Entonces podemos agregar un Menú de Mano dedicado. Vuelve atrás. Crea un nuevo menú. A ver, Menú Móvil. Esto está en la ubicación Handheld. A continuación, y luego podemos sumar nuestros artículos. Por favor seleccione todas las páginas que están disponibles. Publicar nuestro menú. Ahora más en la vista previa, si haces click en esto, podemos ver todos los enlaces que acabamos de seleccionar. Querías, también podías reorganizar estos. Tendría sentido tener el hogar en la parte superior. Guarda estos cambios. Esto ahora se está reflejando dentro de nuestro menú. La pantalla de la tableta, esto también muestra el mismo menú también. Entonces, cuando vamos a los dispositivos de pantalla más grande, ahora se están mostrando nuestros dos menús separados. Solo actualicemos nuestra tienda y comprobemos que todos estos cambios se han actualizado. Ahí vamos. Ahí están nuestros dos menús separados, aunque en la mayoría de los temas no necesitamos atenernos al menú predeterminado ni a la ubicación predeterminada. A menudo podemos colocar en múltiples menús en diferentes ubicaciones. A continuación, pasaremos a editar el área de pie de página. 47. Comercio por Internet en WordPress: el área de pie de página: El contenido final, que debemos agregar a nuestro sitio está abajo en la parte inferior dentro de esta zona de pie de página. Podemos sumar hasta cuatro secciones separadas en nuestro pie de página, colocando cuatro piezas de contenido separadas. El primer tramo sobre a la izquierda y el cuarto tramo estará sobre a la derecha. Podemos colocar dentro de él un montón de contenido como widgets. Podemos colocar menús, bestsellers, productos mejor valorados, y todo lo demás a lo que tenemos acceso en la sección de widgets. Para ello, pasar al Dashboard y dentro de la Apariencia, luego y Widgets. El primer menú ubicación de la Columna 1 de Pie de página va a ser de dos menús separados. Ya tenemos estos menús creados a partir del video anterior. Podemos reutilizar esto dentro de un widget también. Para ello, arrastre sobre el Menú de navegación y, a continuación, seleccione el Menú de navegación que desea colocar en esta ubicación. Primero, Menú Usuario, Guarda esto. También podemos añadir nuestro Menú de Navegación también. Hacemos esto exactamente de la misma manera. Arrastra esto hacia arriba, selecciona nuestro segundo menú y luego refresca la página. Ahí está nuestra primera sección. El segundo apartado, esto va a ser para la información de la dirección. Va a ser mucho como nuestra página Contáctanos. Columna 2. Este es un widget de texto. Arrastre esto a la Columna 2. Al igual que hicimos con la página Contáctenos, el texto, Puedes encontrar en, y luego agregar algunas líneas de dirección de muestra dentro de aquí. Copia. Agrega lo mismo un par de veces más. Si quisieras, también podrías cambiar esto en una lista, pero solo voy a mantener esto como texto regular. Guarda esto. Entonces justo debajo, configura un segundo bloque de texto. Al igual que la página Contáctenos, ésta contendrá nuestros contactos útiles, el título, y luego nuestro texto, que será el correo electrónico y también la URL. Podemos agarrar esto desde nuestra página de Contacto. Estos son nuestros dos enlaces abajo en la parte inferior. Pegue esto en y guarde este widget. Podemos comprobar si esto está funcionando bien, vuelta a la página de Inicio. Desplácese hacia abajo hasta el pie de página, que está bien. Ahora podemos pasar a la Columna 3. Nuestro Footer Área número 3, voy a arrastrar sobre los Productos por Rating, que es una lista de todos los productos mejor valorados, y el valor predeterminado de cinco está bien. Nosotros cargamos. Esta es solo una versión acortada de cada uno de los productos en orden de los más valorados. Generalmente, estas áreas de widget son a menudo suficientes para nuestras necesidades porque si tenemos un caso de uso mucho más complejo para cada una de estas secciones, también puedes hacer uso del constructor de páginas, igual que usamos para la página Contáctenos. El constructor de páginas también tiene un widget, y está contenido dentro de este widget de Layout Builder. Al Footer Area 4, podemos arrastrar esto. Esta área de widgets se puede disponer exactamente igual que una de nuestras páginas. Podemos dividir nuestro contenido en varias filas y columnas para darnos un diseño realmente flexible. Quiero cerrar esto y eliminar este widget, pero esta es una forma realmente flexible de controlar el diseño de nuestras secciones. Colocando una columna extra si quieres, pero voy a dejar esto aquí. Esto es ahora todo el contenido en nuestra tienda. En el siguiente video, vamos a finalizar este proyecto mirando todos los ajustes adicionales que viene con el comercio electrónico, como agregar cupones, crear informes, agregar diferentes métodos de pago, y también el flujo de pedidos integrado dentro de nuestro panel de control. 48. Comercio por Internet en WordPress: ajustes en WooCommerce y gestion de tu tienda: No sólo el plug-in y el tema WooCommerce, fue la oportunidad de construir una tienda de comercio electrónico totalmente personalizable. También nos proporciona muchas de las herramientas esenciales, las cuales necesitamos para dirigir un negocio de comercio electrónico, y la mayoría de estas opciones están disponibles en el dashboard debajo de la opción WooCommerce. En primer lugar, antes de irnos a vivir con cualquier tienda, primero necesitamos revisar todos estos ajustes, y también necesitamos configurar nuestro proveedor de pagos. Por supuesto, es esencial tener todos los detalles de nuestra dirección establecidos, y la mayoría esto ya se ha arreglado para nosotros desde cuando pasamos por el asistente de instalación. Para la dirección, también necesitamos filtrar las ubicaciones de envío si solo realizamos envíos a ciertos países o áreas. Podemos habilitar cupones, y echaremos un vistazo a cómo crear estos en tan solo un momento, y además, asegurarnos de que las opciones de divisas también sean correctas. de la moneda, también podemos agregar el separador y el número de decimales para que podamos afinar cómo se verá nuestro precio en nuestra tienda. El producto, la mayoría de estas opciones son autoexplicativas. Podemos cambiar las unidades de medida, podemos habilitar o deshabilitar las opiniones y calificaciones, y además, si tenemos nuestro producto en una página diferente, también podemos cambiar esto aquí. Las opciones de envío o algo que es muy específico para tu país, y también el país al que quieres estar enviando. Podemos configurar diversas zonas de envío, donde vamos a atrapar cierta zona y aplicar diversos métodos de envío o precios a esta zona específica. Por ejemplo, si fuera una zona de difícil acceso con cierto código postal o postal, podríamos agregar una lista de estas regiones dentro de aquí, y configurar un método de envío dedicado para esta zona en particular. Después abajo en la parte inferior, agregamos nuestro método de envío, y podemos elegir entre una tarifa plana, que es un precio fijo. Podemos agregar envío gratis a esta zona en particular o restringirlo para que sea solo recogida local. Por supuesto, los pagos son algo que es realmente importante en una tienda de comercio electrónico. Desafortunadamente, WooCommerce nos permite vincular demasiados proveedores de pago usando diferentes plug-ins, o podemos elegir entre estas opciones predeterminadas. Podemos tomar pagos a través de transferencia bancaria directa, podemos tomar cheques, contra-entrega, o también, configurar PayPal también, lo cual es sencillo de hacer. Todo lo que necesitamos hacer es entrar en la sección de configuración, y luego configurar nuestra dirección de correo electrónico de PayPal, comenzar a tomar nuestros pagos. Guarda estos cambios. Tenemos un área de cuentas donde podemos hacer cosas como configurar un checkout invitado para que el usuario no tenga que registrarse antes de hacer un pedido. Podemos configurar la forma en que se crean las cuentas, y también cambiar la redacción de nuestra política de privacidad también. Correos electrónicos, aquí es donde configuramos las notificaciones, que utilizas, supongo, en cada etapa de la caja. Entonces si han realizado un nuevo pedido, si el pedido ha fallado, si ha sido reembolsado, podemos configurar el mensaje, que luego se envía al usuario. Por defecto, WooCommerce ya tiene algunos mensajes sencillos en su lugar, pero así es como podemos cambiar estos mensajes si lo deseas. El tabulador de integración es una forma de agregar servicios de geolocalización a nuestra tienda, y puedes configurarlos con este enlace justo aquí. Por último, también hay una sección avanzada. Ya hemos mirado algunas de estas opciones en el pasado, como cambiar alrededor de nuestras páginas. Podemos utilizar estos si queremos crear nuestras propias páginas personalizadas y asignarlas a ciertas funciones. Además de todos estos ajustes, WooCommerce también nos proporciona la capacidad de administrar plenamente una tienda de comercio electrónico. Como cabría esperar, tenemos la oportunidad de mirar a través de órdenes. Esta es la página donde entrarán todos los pedidos cuando hayamos hecho una venta en nuestro sitio. Si lo deseabas, también puedes agregar manualmente un pedido. Para esto, solo agregamos los detalles de nuestro cliente en la parte superior. Entonces podemos colocar en diferentes artículos de nuestra tienda. Entonces producto, podemos hacer una búsqueda, seleccionar cualquiera de estos, y luego añadirlos a nuestro pedido. Podemos crear este pedido y también enviarlo a la dirección de correo electrónico del cliente. Podemos gestionar a nuestros clientes desde este enlace justo aquí y podemos ver a todos los clientes, que han sido registrados en nuestro sitio. Tenemos muchos datos sobre cada uno de los clientes como sus valores de pedido, sus regiones, y también los detalles de la dirección. Cupones. Podemos crear y administrar cupones para darle a nuestros usuarios un descuento sobre ciertos productos. Esto también es realmente flexible. Podemos afinar exactamente a qué productos se aplicará este cupón. Podemos establecer obedecer descuentos de precio fijo, un descuento porcentual, un descuento de un producto en particular o del total de la cesta de la compra. Este cupón también se puede utilizar para permitir envío gratis y también podemos colocar una fecha de caducidad también. En las restricciones, podemos colocar en un gasto mínimo o máximo, para que este cupón aplique, o también sólo aplicarlo a ciertos productos o categorías también. Abajo en la parte inferior, esto también puede restringirse a ciertos correos electrónicos de clientes, si no quisiéramos que esto se aplicara a todos los usuarios de nuestra tienda. Por último, los límites de uso. Este es bastante sencillo. Podemos configurar cuántas veces queremos que se use este cupón, y también limitar el número de veces que un usuario en particular puede usar este cupón también. También por fin, cuando tu tienda esté en funcionamiento, también queremos tener acceso a toda la información que podamos. Contamos con una sección de reporte donde podemos encontrar mucha información como nuestras ventas totales. Podemos exhibir esto por la última semana, el último mes, el último año, o una fecha personalizada también. Estos datos se pueden descargar en formato de hoja de cálculo. Podemos consultar nuestras ventas por producto, las ventas por categoría. Podemos comprobar cómo se utilizan los cupones. En la pestaña “Clientes” nos mostrará cuántos pedidos para un cliente registrado frente a un invitado. Además, contamos con una ficha de stock donde podemos gestionar nuestros bajos niveles de stock si hemos habilitado esto dentro del producto. Como puedes ver, WooCommerce es más que solo construir una tienda de comercio electrónico. Se puede utilizar para gestionar nuestra configuración completa de comercio electrónico. También si le falta alguna funcionalidad específica, que necesita, a menudo hay un plugin disponible también. Este es el fin de nuestro proyecto de comercio electrónico, y los veré ahora en la siguiente sección. 49. Fundamentos de PHP: Introducción: Para esta próxima sección, vamos a echar un breve vistazo a algunos conceptos básicos de PHP y cómo podemos escribir algún código que se tiene para ayudarnos en las próximas secciones donde vamos a empezar a crear nuestros propios temas personalizados de WordPress. Ahora bien, no necesitamos ser un experto en PHP, todo lo que necesitamos hacer es tener algún entendimiento básico. Esto realmente nos ayudará a entender lo que está pasando entre bastidores y cómo podemos aplicar código PHP a nuestros sitios de WordPress. Recuerda, en el curso temprano, mencionamos que WordPress se escribe en el lenguaje de programación PHP. Como ya hemos visto, si solo queremos usar temas preconstruidos y plugins preconstruidos, no necesitamos conocer ningún código PHP. Pero ahora vamos a aprender algunos de los conceptos básicos que nos van a ayudar con nuestro desarrollo temático. PHP es un lenguaje que se ejecuta en un servidor web. Entonces Justo como temprano cuando configuramos nuestro WordPress que también requiere un servidor web debido a esto. También teníamos dos videos de opciones diferentes. Teníamos la opción uno, que utiliza local, y local configura un servidor web y una base de datos que nos permiten construir nuestros sitios de WordPress. Ahora, lo local es realmente genial para hospedar sitios de WordPress, pero no es tan genial solo dejarnos jugar con algún PHP regular. Para esta próxima sección, tenemos un par de opciones diferentes. Al principio del curso, como alternativa al local, también miramos cómo podríamos configurar un sitio de WordPress usando MAMP. Si has venido con esta opción, puedes entrar a los htdocs donde también habrás instalado tus sitios de WordPress. Puedes seguir adelante y crear los archivos PHP aquí dentro, igual que hicimos con los próximos videos. O alternativamente, si no estuviste usando MAMP, si has continuado con este curso usando local, puedes usar una alternativa que es un patio de juegos en línea. Esta es una de ellas, que es T-E-H y luego playground.com. Esta es una forma rápida y fácil de escribir nuestro código PHP y ver el resultado en el lado derecho. En los próximos videos, escribiremos nuestro código PHP, que empezará igual que lo hemos hecho aquí. En lugar de escribirlo dentro del editor de texto, como hacemos en los videos, en su lugar puedes escribir el código aquí. Estaremos haciendo algo así. Estaremos configurando variables para poder almacenar nuestro nombre, como Chris, y haremos eco de este nombre. No te preocupes si esto no te resulta familiar, vamos a estar cubriendo exactamente lo que esto hace en los próximos videos. Una vez que hayamos escrito nuestro código PHP, igual que hacemos en los videos, haz clic en “Guardar y ejecutar”. Después veremos las salidas sobre el lado derecho en lugar de lo que hacemos en los videos, que es ejecutar esto dentro del navegador. Tan solo para recapitular, para esta próxima sección, necesitamos ejecutar un servidor web para ejecutar nuestro código PHP. Si has estado siguiendo, hasta ahora teníamos usando local. Las dos opciones que hay que seguir es instalar MAMP o bien podría usar un patio de juegos PHP en línea igual que vemos aquí. Alternativamente, al principio del curso, si elegiste la opción MAMP, también puedes seguir usando esto si lo prefieres. Vamos a saltar al siguiente video donde echaremos un vistazo a nuestro primer código PHP. 50. Fundamentos de PHP: Hola mundo: Ok chicos, entonces este video es todo acerca de empezar con PHP. Vamos a echar un vistazo a la sintaxis básica de PHP, la forma en que se escribe, y hacer un ejemplo hola mundo. Para empezar, vamos a pasar a los ht-docs dentro de tu host local, para luego crear una nueva carpeta. Voy a llamar a esta carpeta los fundamentos de PHP. A continuación, arrastra esta carpeta a tu editor de texto. Voy a usar corchetes de Adobe, y luego arrastraré eso ahí. Para empezar, voy a crear una página PHP con la que empezar a trabajar. Crea una nueva página, con Comando o Ctrl N, dentro de los corchetes. En primer lugar, quiero guardar esta página como hello-world, y asegurarme de que tenga la extensión PHP al final. Guarda eso dentro de los conceptos básicos de PHP. Entonces necesitamos crear un esqueleto HTML básico para empezar. Estoy usando el plugin Emmet. Si no estás usando eso necesitarás escribir esto manualmente, pero si sí descargas Emmet, todo lo que necesitas hacer es escribir en HTML colon 5, y luego golpear la pestaña. Entonces eso llena todo el esqueleto HTML:5 para ti. Llamemos a esto el mundo hola. Ahora vamos a trabajar dentro de la sección de cuerpo. Para trabajar con PHP, necesitamos proporcionar una etiqueta de apertura y cierre. El tag de apertura en PHP se ve así, son los corchetes angulosos, interrogación, y luego php. Esto indica que el código PHP está a punto de comenzar. Entonces al final del php, necesitamos agregar una etiqueta de cierre, que es el signo de interrogación en los corchetes de ángulo recto. Todo el código PHP va entre aquí. El primero que queremos hacer, es solo imprimir algún texto al navegador. Yo voy a hacer eso con un eco. Escriba eco, y después porque esto va a ser texto necesitamos ponerlo entre citas, entonces, “Hola Mundo”. Entonces al final, cerramos una declaración con punto y coma. Guarda eso. Es así como imprimimos algo al navegador, usando PHP. Vaya a su navegador, y luego escriba el host local. Después ve al archivo que has puesto dentro de los ht-docs. Es php-basic, y luego hola mundo. Ahí vamos. Se muestra en el navegador nuestro texto que acaba de hacerse eco de Hello World. Podemos mezclar y emparejar PHP entre el HTML. En lugar de tener el título como escrito ahí dentro, deberíamos tener lo que se llama hardcoded. En lugar de escribir ahí, podemos abrir el PHP, y luego hacer el eco, Hola Mundo. Asegúrese de que el PHP esté cerrado, con el signo de interrogación en los corchetes angulosos. Guarda eso. Entonces si nosotros, “Refresh”, ahora deberíamos ver que el título en la cima de Hello World, ahora se está produciendo con PHP. Tan solo asegúrate de que escribiremos PHP, y luego, “Refrescar”. Ahora todos vemos que esto se está generando con el PHP. Podemos mezclar y emparejar el PHP entre el HTML ya que sólo tenemos las etiquetas PHP de apertura, y las etiquetas PHP de cierre correctamente establecidas. Comentarios en PHP es similar a muchos otros lenguajes. Podemos comentar algún código que ya no necesitamos, o podemos usar un comentario para escribir algunas notas para nuestro yo, o de los programadores que queremos que el programa ignore. Por ejemplo, si ya no quisiéramos mostrar esto, y queríamos que el programa lo ignorara, podríamos usar dos barras inclinadas hacia adelante. Se puede ver el editor de texto hace que la línea se vuelva gris. Podemos decir que se está comentando correctamente. Si “Guardamos” eso, y luego “Refrescar”, eso debería desaparecer, porque ya no se está procesando. Solo eliminemos esto. Los comentarios también son útiles para crear notas. Podemos hacernos una nota, diciendo mostrar Hola Mundo al navegador. Esto es lo que se llama un comentario de una sola línea. Si solo queremos comentar una sola línea de código, solo usamos las dos barras inclinadas hacia adelante. Si queremos comentar más de una línea, podemos usar eso con un comentario multilínea. Es una barra delantera, y una estrella. Entonces podemos comentar más de una línea. Pegaremos en Hello World dos o tres veces, y terminaremos eso con una estrella y una barra inclinada hacia adelante. Es así como comentamos una línea, y así es como comentamos más de una línea. En toda esta sección de PHP, sólo se mostrará el único eco de Hello World en el navegador. Antes con el título, miramos agregar PHP entre el HTML. También podemos agregar etiquetas HTML entre PHP. Estos se mostrarán de la misma manera que si fueran HTML. Por ejemplo, en el eco Hola Mundo, si quisiéramos que este fuera un encabezado HTML nivel uno, podríamos poner las etiquetas HTML de h1 antes del texto, y luego podríamos poner una etiqueta de cierre h1 después de esto. Entonces en lugar de mostrarse como texto normal, este será ahora un encabezado de nivel uno. Si “Guardar” eso, y luego “Refrescar”, ahora obtenemos Hello World como encabezado en el tamaño de fuente más grande. Podrías poner en cualquier blanco que quieras. Podemos hacer lo mismo, mientras que esto tiene un h2 y “Guardar”, y vamos al navegador, y ahí está nuestro encabezado de nivel dos también. Esa es la sintaxis básica de PHP. Es así como podemos hacer eco o imprimir textos al navegador, y también cómo podemos comentar código así como combinar PHP con HTML. 51. Fundamentos de PHP: Cadenas, variables y constantes: Bienvenido de nuevo. En el último video, echamos un vistazo a algunos conceptos básicos de PHP, como hacer eco de textos al navegador, comentarios, y también cómo hacer PHP y HTML. En este video, vamos a pasar a echar un vistazo cadenas, variables y constantes. Simplemente voy a eliminar el código entre las etiquetas PHP de la última sección. En primer lugar, vamos a echar un vistazo a las cuerdas. Una cadena es una secuencia de caracteres, como una sola letra, una palabra o una frase. Una cuerda es lo que usamos en el último video, donde estábamos haciendo un eco. Imprimimos una cadena entre citas. Esta es una cuerda. No olvides el punto y coma al final. El string debe estar rodeado con una comilla simple o doble. Ambos funcionan perfectamente bien. Entonces eco y luego esta vez un sencillo comillas. Esto también es una cuerda. Echemos un vistazo a eso en el navegador mientras refresquemos. Esta es una cuerda y esto también es una cuerda. La mayoría de las veces no importa si usamos comillas simples o dobles. El único momento en que realmente importa es si quieres rodear una de estas palabras con las comillas. Por ejemplo, si querías que la palabra string tuviera las citas impresas en la pantalla, necesitamos asegurarnos de que las citas que usamos alrededor la palabra sean opuestas a lo que está rodeando la oración. Entonces si guardamos eso y luego actualizamos, la palabra string tiene las comillas dobles. Pero si fuera a hacer esto y todos tenían el mismo estilo de citas, guarde eso. El editor de texto ha recogido un número, por lo que está haciendo un color diferente. Si tuviéramos que refrescarnos, vemos que la página de host local no está funcionando porque tenemos un error. Pero si cambiamos esto para que sean comillas simples y luego las circundantes vuelven al doble y luego se refrescan. Es así como podemos agregar comillas simples y dobles dentro de una cadena. Hay muchas otras formas en las que podemos trabajar con cadenas mediante el uso de funciones de cadena. Por ejemplo, si quisiéramos revertir una cadena, solo usaré este ejemplo allí. Si quisiéramos revertir una cadena, podríamos usar la función de reversa de cadena, que es strrev (). Entonces necesitamos rodear la cuerda dentro de los corchetes y luego guardar eso. Entonces echemos un vistazo al navegador y veamos qué pasa. Eso invierte todos los caracteres dentro de la cadena. Por lo que ahora está de vuelta a la diferencia. También podemos hacer otras cosas como hacer todas las palabras mayúsculas o minúsculas. Para hacerlos todos mayúsculas, podemos usar la función string to upper. Entonces strtoupper (), y luego guarde eso y luego refresque, y ahora todos los caracteres dentro de la cadena son mayúsculas. Podemos hacer de la misma manera cadena para bajar. Tan strtolower (), guardar y refrescar. Ahora no hay capiteles en absoluto en la cuerda. Por supuesto que hay muchas más funciones de cadena diferentes que puedes encontrar con un Google rápido. Buscar funciones de cadena PHP. Estamos instantáneamente llevados a una lista, y es o un PHP.Net o W3Schools, que tiene muchos ejemplos. Como puedes ver, hay toda una lista. Hay muchas cosas diferentes que podemos hacer con cadenas como dividir una cadena en una matriz. Podemos aleatoriamente barajar todos los caracteres de una cadena. Podemos comprobar la longitud de la cadena, que devuelve el número de caracteres. Ten una jugada con estos. Puede que no tengas necesidad de estas dos funciones que acabo de mostrarte, y estoy seguro de que si trabajas con PHP regularmente, te encontrarás con muchas de estas diferentes funciones. A continuación vamos a pasar a las variables. Al igual que muchos otros lenguajes de programación, PHP utiliza variables como contenedores para almacenar información, y la información dentro de estas variables puede cambiar. Sólo voy a eliminar esta cadena. El modo en que declaramos una variable es usando primero un signo $ y luego asignando un nombre de variable. Por ejemplo, el número uno. Voy a establecer el valor para que sea igual a una cadena, un número, un booleano, o varias otras cosas. Voy a fijar el número uno para que sea igual a diez. Cuando estamos tratando con números, no necesitamos poner las cotizaciones a ninguno de los dos lados de la misma. Lo que estamos haciendo es crear una variable con el nombre del número uno, y hemos asignado el valor de diez a este número. Entonces podemos hacer lo mismo. Podemos crear una segunda variable. Esta vez lo voy a llamar número dos, y esta vez voy a establecer el valor para que sea 20, y ahora podemos usar el eco que miramos antes. En lugar de hacer eco de una cadena, podemos hacer eco del nombre de la variable, número uno. Ahora se acaba de imprimir en el navegador el valor de diez. Refresca y ahí está nuestro número diez. También podemos sumar variables juntas. Podemos hacer eco del valor del número uno, más el valor del número dos. Ahora deberíamos conseguir 30 en el navegador. También podemos combinar cadenas con variables. Si tengo una variable, por lo que el número de publicaciones, vamos a establecer que sea siete. Entonces tenemos un nombre de variable. El variable llamado nombre asignado a una cadena. Voy a llamar a eso Chris. Si el usuario llamado Chris ha creado siete posts, entonces podemos imprimir esto en el navegador. Eco, y después porque es cadena, tenemos que poner esto entre citas. Si quisiéramos imprimir Chris tiene siete posts, podríamos empezar con el nombre de la variable. Coloca nuestro nombre, así será Chris, y luego tiene, y luego queremos el valor de los posts, así que pon eso ahí dentro. Actualmente dice, Chris tiene siete, y luego posts, y luego como mencionamos antes podemos poner una etiqueta HTML dentro de ahí. Sólo voy a añadir una etiqueta de ruptura ahí. Guardemos eso, y ojalá debamos conseguir el valor de Chris tiene siete posts lo que hacemos, así que eso está funcionando bien. Mencioné que los valores de una variable se pueden cambiar. Si volvemos a nuestro ejemplo de número, así el número uno igual a diez y luego echo número uno. Ahora deberíamos obtener el valor de diez, imprimirlo en el navegador. Pero más adelante en el programa, si querías cambiar el valor del número uno, podemos reasignar el valor. Número uno, podemos cambiar eso para ser 20, y luego cuando hacemos eco número uno, deberíamos obtener el valor de 20, imprimirlo en el navegador, lo que hacemos. Esto se debe a que el programa se lee línea por línea. Cuando llega a la línea 11, el número uno se establece el valor de diez y luego se mueve hacia abajo a la siguiente línea, y luego se da cuenta de que el número uno ahora está establecido en 20. Cuando hacemos eco del número uno, tenemos el valor de 20. Lo último que quiero ver en este video son las constantes. En las constantes, al igual que las variables, puede almacenar alguna información o almacenar un valor. No obstante, a diferencia de las variables, el valor puede cambiar una vez que se ha establecido. Es así como estableces una constante en PHP. En primer lugar, utilizamos la función define o la palabra clave define para declarar una constante, y luego abrimos los corchetes rizados. Entonces necesitamos pasar en dos parámetros. El primer parámetro entre las cotizaciones y en mayúsculas es el nombre de la constante. Por ejemplo, si querías almacenar el valor de tu propio nombre, podemos llamarlo nombre, y luego separados por una coma. Agregamos el valor de la constante. Este será mi nombre, y luego un punto y coma al final. Hemos definido una constante con el nombre de NOMBRE, y después hemos agregado el valor de Chris a esta constante. Podemos imprimir esto en el navegador de la misma manera que antes. Todo lo que necesitamos hacer es hacer eco del nombre, y luego deberíamos obtener el valor de Chris dentro del navegador. Ahí vamos. Es así como usamos cadenas, variables, y constantes en PHP. 52. Fundamentos de PHP: Tipos de datos y operadores: Bienvenido de nuevo. En lo que va del último par de videos, hemos echado un vistazo a cómo las variables pueden almacenar datos en PHP. Hemos mirado números o enteros, y hemos echado un vistazo a cómo podemos almacenarlos en variables. Un entero, podemos tener varios tipos diferentes. Se pueden ver algunos ejemplos como un número positivo, un número negativo o un número hexadecimal. También hemos echado un vistazo a las cuerdas, que ya sabes es una serie de personajes. Puedo cumplir las cadenas de diferentes maneras como comillas simples o dobles. Pero también hay muchos tipos diferentes de datos que podemos usar en PHP. Por ejemplo hay un booleano. Un booleano es un simple verdadero o falso. Entonces, por ejemplo, podemos ver si algo devuelve verdadero, y si lo hace, podemos realizar cierta acción. También hay un tipos de datos como matrices, que veremos en la sección. Pero a continuación vamos a echar un vistazo a algunos operadores de PHP. Entonces para empezar, vamos a echar un vistazo a algunos operadores aritméticos. Usemos nuestro ejemplo de número que miramos antes. Por lo que el número uno igual a 100. Una segunda variable de número dos igual a 200. Entonces podemos hacer un eco. Por lo que echo número uno más número dos. Deberíamos obtener un valor de 300 en el navegador. Por lo que este símbolo plus es un operador aritmético. Agrega el valor del número uno al número dos. También podemos quitarnos estos valores con el símbolo de llevar. Ahora vamos a conseguir menos o negativo 100. También podemos multiplicarnos, y para hacerlo en PHP, necesitamos usar el símbolo de estrella. Obtenemos un valor de 20 mil. También podemos dividirnos con la varilla delantera. También podemos enterarnos del resto. Podemos hacer eso con el símbolo por ciento. El símbolo por ciento nos da el resto después de la división. Para ello, necesitamos cambiar los valores por algo más adecuado. El número uno es igual a 10. El número dos es igual a tres. Entonces refresca y deberíamos obtener el valor de uno. El motivo por el cual es porque tres entra en 10 tres veces y luego deja un valor de uno como resto. Entonces echemos un vistazo a algunos ejemplos más en el sitio web de Escuelas W3. Acude a Escuelas W3 y luego a operadores de PHP. Desplazémonos hacia abajo. Miramos a algunos de los operadores aritméticos, que se pueden ver aquí. También hay operadores de asignación. El operador de asignación más básico es el símbolo igual. Hemos mirado estos en videos anteriores. Asignamos el valor de 10 al nombre variable del número uno. También hay otros operadores de asignación, como suma, resta, multiplicación, división, y el módulo, que es el resto. También hay operadores de comparación y lógicos. Podemos comprobar si dos valores son iguales o menores que o mayores que. Pero echaremos un vistazo a estos con más detalle en la sección de declaraciones if/else. También podemos aumentar y disminuir el valor. Podemos aumentar, por ejemplo, un valor por uno o podemos disminuir un valor por uno. Veremos más a los operadores de incremento y decremento en el video de los bucles. Pero por ahora, echemos un vistazo a algunos ejemplos básicos de cómo podemos usarlos. Por lo que hemos tenido una variable llamada número, y simplemente ajustamos esto al valor de uno. Si hacemos eco de esto al navegador sólo obtenemos el valor de uno impreso. Pero podemos incrementar este valor en uno cada vez, estableciendo el nombre de la variable del número y luego usando más plus. Guarda eso. Ahora el valor de uno debe incrementarse en uno. Entonces deberíamos imprimirnos en el navegador, el valor de dos. Refrescar. Disculpa un punto y coma al final de eso, y luego refresca. Entonces debería ser el de eso y guardar. Actualiza el navegador y luego obtenemos el valor de dos. Podemos seguir repitiendo esto. Si quisiéramos incrementar en uno una vez más y tomar el valor para ser el número tres, podemos agregar eso y otra vez, y entonces deberíamos conseguir el valor llevado a tres. Si quisiéramos decrementar, sí, podríamos usar el símbolo negativo y si lo usamos dos veces, deberíamos obtener el valor de uno negativo. Refrescar. Ahí vamos. El valor de uno se decrementa para ser cero y luego decrementa de nuevo para ser negativo. Entonces esa es una mirada rápida a los tipos de datos y operadores en PHP. Te veré en el siguiente video, echaremos un vistazo a las matrices PHP. 53. Fundamentos de PHP: Arreglos: Bienvenidos de vuelta chicos. En este video vamos a echar un vistazo a las matrices php. Por lo que en videos anteriores, miramos variables, que son geniales para almacenar datos los cuales se pueden cambiar. No obstante, solo pueden contener un valor, pero si queríamos almacenar más de un valor, necesitamos usar una matriz. Podemos almacenar tantos valores dentro de esa matriz como nos guste. Es así como creamos una matriz usando php. Entonces hay dos métodos diferentes que te voy a mostrar. El primero, podemos establecer el nombre de la matriz, igual que un nombre de variable. Voy a crear una matriz de formas, y luego establecer esto para que sea una matriz. Entonces necesitamos seguir la palabra clave array, con los corchetes rizados, y luego un punto y coma. Todo lo que hemos hecho ahí es crear una matriz vacía con el nombre de las formas. Para agregar algunos valores dentro de esta matriz vacía, usemos el nombre de la matriz, y luego seguidos de un conjunto de corchetes, y luego necesitamos poner el número de índice. Empezamos con cero, que es la primera posición de una matriz. Voy a poner esta para que sea la primera forma, así que un cuadrado. Esto ahora agrega el valor de cuadrado dentro de la matriz, y vamos a agregar uno o dos más, por lo que las formas y luego posicionar uno. Esto puede ser un círculo, y luego formas, posición dos, por lo que un triángulo. De acuerdo así que hemos establecido una matriz vacía para que tenga el nombre de las formas, y luego hemos agregado tres valores a la matriz de cuadrado, círculo y triángulo. Entonces para comprobar si esto está funcionando, podemos hacer un eco, por lo que es eco el nombre de las formas de la matriz, y luego los elementos de la matriz que queremos imprimir así que empecemos con el número dos. Por lo que debes imprimir en el navegador el valor del triángulo, así que guarde eso, y luego refresque, y ahí vamos. Esa es la posición número dos de la matriz, que tiene el valor de triángulo. Cambiemos esto por el número uno, así que deberíamos conseguir el círculo. Este es un camino bastante largo de escribir una matriz. Hay una forma más simple de escribir una matriz, esto es mediante el uso del método literal. Entonces, en lugar de lo que estamos haciendo arriba, podemos establecer el nombre de las formas de la matriz, y luego podemos establecer eso en una matriz, y luego podemos poner los valores directamente dentro de la matriz. En primer lugar podemos poner en el cuadrado, y luego separar por comas, el círculo, y luego el triángulo. Solo eliminemos este por ahora, y entonces podremos hacer el eco tal como lo hemos hecho antes. Entonces hagamos eco del nombre, que es formas y luego entre corchetes otra vez, tenemos que poner en el número de índice, así que empecemos con cero, que es el cuadrado. Guarda eso y luego refresca, y obtendremos el valor de cuadrado. Por lo que cualquiera de estos dos métodos funcionó perfectamente bien. Por lo que hace unos videos, echamos un vistazo a las funciones de cadena, donde invertimos el orden de la cadena y luego cambiamos el texto para que sea mayúscula. Las matrices también tienen funciones similares, y como lista de funciones disponibles son php.net, pero solo voy a pasar por uno o dos ejemplos, solo para mostrarte lo que podemos hacer con las funciones de array. Entonces la primera es la función de recuento, que cuenta el número de elementos dentro de la matriz. Utilizamos la función de recuento, y luego pondremos el nombre de la matriz dentro de los corchetes, para que podamos eliminar ese cero. Debe hacer eco al navegador, el número de elementos dentro de la matriz de formas así que actualice. Hay tres elementos dentro de la matriz. Esto también varía con respecto a funciones como, el array pop, que elimina y devuelve el último elemento desde el final de una matriz. Para ello, voy a crear una variable más. Yo lo voy a llamar la última forma. Entonces la última forma que quiero agarrar es un triángulo. Para agarrar el valor de esto, voy a establecer este valor para que sea igual a array_ pop. Después para soltar el valor del triángulo, o el último elemento, sólo tenemos que poner en el nombre de la matriz, que es formas. Entonces ahora lo que hemos hecho es que hemos establecido el último elemento en la matriz, dentro de este nombre de variable. Ahora sólo podemos hacer eco de este nombre de variable al navegador, y deberíamos obtener el valor de triángulo. Entonces haga eco del nombre variable de lastshape, luego refrescar, y ahí vamos. Entonces ese es el valor del triángulo. También podemos encontrar el valor mínimo y máximo de una matriz. Vamos a crear una matriz con números esta vez, por lo que los números es igual a una matriz. No necesitamos poner ningún número dentro de las cotizaciones. Vamos a poner unos números ahí dentro, y luego podemos hacer eco. Si quisiéramos averiguar el número más grande, podríamos usar la función max, y luego dentro de los corchetes, el nombre de la matriz, que es números. Ahora deberíamos imprimirnos a la pantalla, el número máximo, que es 67, que hacemos. También podemos reemplazar max por min, y deberíamos obtener un valor de uno. Está bien, genial. Entonces así es como puedes crear una matriz usando php, y también algunas funciones básicas de array php. Entonces gracias y nos vemos en el siguiente video, donde echaremos un vistazo a las funciones php. 54. Fundamentos de PHP: Funciones: En este video, vamos a echar un vistazo a cómo podemos usar funciones en PHP. Una función es básicamente un bloque de código. Asignamos un nombre a este bloque de código y lo llamamos programa Juno, cuando queremos ejecutarlo. Es realmente útil cuando tenemos el mismo código más de una vez en nuestro programa y en lugar de escribir todo el código una y otra vez. Podemos colocar un código dentro de una función y llamar a la función cuando se requiera. PHP también tiene un montón de funciones incorporadas que desecho. Hemos mirado uno o dos de estos en los últimos videos. Empezamos creando una función, mediante el uso de la palabra clave function, y luego después de eso, le damos un nombre a la función, seguido del paréntesis o los corchetes, el nombre puede ser MyFunction y luego use los corchetes después, y luego el contenido de la función está dentro de un conjunto de llaves. Cada vez que se llame a esta función se ejecutará el código dentro de estas llaves. Por ejemplo, una forma básica de función dada es sólo un eco. Mi primera función, por sí sola, esta función no hace nada hasta que la llamemos, y la forma en que la llamamos es a ti simplemente escribiendo el nombre de la función, MyFunction, y luego el paréntesis seguido de un punto y coma. Ahora cuando ejecutemos MyFunction, deberíamos obtener el texto de mi primera función imprimirlo al navegador, y dentro de la función, incluso podemos tener diferentes variables dentro de ahí. Al igual que miramos hace algunos videos, podemos usar un nombre de usuario. usuario igual a Chris y la segunda variable de puestos igual a 5, y luego podemos hacer eco a la pantalla. Chris tiene cinco posts, eco dentro de las citas, el nombre de usuario tiene cinco posts, ahora cuando llamamos a esta función, deberíamos llevar el mensaje a la pantalla dentro del eco. Guarda eso y luego refresca el navegador, y podemos llevar funciones aún más allá, pasando en parámetros. Vamos a crear una nueva función, y si quieres crear una función para multiplicar números. Esta vez, en lugar de simplemente dejar vacíos los corchetes, podemos pasar en dos parámetros o incluso más. Voy a usar esto para multiplicar dos variables. Variable Number A y luego separada por comas, variable Number B. Cada vez que se llame a esta función, desea que multiplique el valor de A con el valor de B. Echemos la variable A, multiplicar por la variable B, y luego pasar los números llamará a la función por su nombre. Multiplicar números y los dos números que queremos multiplicar serán brújula dentro de estos corchetes. Doce y dos por ejemplo, ahora cuando llamamos a esta función, ahora tenemos el valor de 12 multiplicado por 2. Deberíamos obtener el valor de 24 en la pantalla. Genial. Lo que acabamos de hacer es que efectivamente hemos creado una variable de A y B y luego necesita tomar los valores de 12 y 2 para luego multiplicarlos juntos y mostrar los resultados al navegador. Es así como trabajamos con funciones en PHP, y también es como podemos pasar parámetros funciones y nos vemos en el siguiente video, echaremos un vistazo a las sentencias condicionales y más operadores. 55. Fundamentos de PHP: Declaraciones condicionales y más operadores: Bienvenido de nuevo. En este video, vamos a echar un vistazo a las declaraciones condicionales y a algunos operadores más útiles. Las sentencias condicionales se utilizan cuando se quiere comprobar si cierta condición es verdadera. Si es así, entonces podemos decirle al programa qué hacer a continuación. Por ejemplo, podemos comprobar si un usuario está conectado. Si lo son, entonces podemos mostrar la información del usuario en la pantalla como el nombre de usuario. Primero empecemos mirando las declaraciones condicionales más básicas, la declaración if. Voy a empezar por crear un par de variables con las que trabajar. Usa un signo de dólar, y la primera variable va a ser LoggeDIN. Voy a poner esto a un valor booleano. Si recuerdas eso podría ser cierto o falso. Inicialmente pongamos eso en verdad. Entonces la segunda variable, este va a ser el nombre de usuario. Esta es una cuerda. Voy a agregar el nombre de usuario ahí. Entonces vamos a usar una declaración if para comprobar si una condición es verdadera. Empezaré por usar la palabra clave if, y luego después de eso, un conjunto de corchetes. Dentro de eso, esta es la condición con la que tenemos que contrastar. Queremos comprobar si el usuario es LoggeDIN. Vamos a probar si LoggeDin es verdadero, justo dentro del nombre de la variable de LoggeDin, dentro de ahí. Después agregamos el par de llaves. Si esta condición es verdadera, entonces ejecutamos el código que está entre las dos llaves llaves. A modo de ejemplo, si nuestro usuario es LoggeDin, sólo vamos a hacer eco al navegador un mensaje a ti diciendo, bienvenido de nuevo. Después una coma, y luego podemos simplemente agregar con el punto o el punto, el usuario, el cual se almacena en la variable llamada usuario. Entonces no se olvide el punto y coma al final de las declaraciones. Simplemente guarde eso. Entonces vamos a pasar al navegador y luego refrescar esto. Genial. Tenemos el mensaje diciendo: “Bienvenido de nuevo, Chris”, porque nuestra condición está establecida en verdad. Si cambiamos esto para que sea falso, no deberíamos conseguir nada en la pantalla, por lo que nuestro mensaje no se muestra. Tales afirmaciones básicas if. Ahora vamos a pasar a echar un vistazo usando operadores de comparación. Voy a dirigirme a la página web de W3Schools. Estoy en la sección de operadores de comparación. También podemos usar estas comparaciones con las declaraciones if. Por lo que se puede comprobar si dos valores son iguales. El doble igual es para comprobar si dos valores igual volumen. También es un triple igual, que comprueba si los dos valores son igual valor y también del mismo tipo. Por tipo nos referimos a si ambos son una cadena o ambos son un número. También podemos combinar con un signo de exclamación para hacer exactamente lo contrario. Esto no será igual. Podemos utilizar el símbolo menor que o mayor que para comprobar si la condición es menor o menor que. También podemos usar menos que o igual a, o mayor que e igual a. Pongamos estos dentro de nuestras declaraciones if como ejemplo. Sólo voy a usar una nueva variable. Este es un número. Pondré esto como un valor inicial de 10. Entonces ahora, que de nuevo, si la variable de número es mayor a cinco, entonces podríamos hacer una declaración de eco diciendo es verdad. Tal comprobado. Nuestro número es mayor a cinco, por lo que debemos conseguir que la declaración es verdadera impresa en el navegador. Solo comprobemos eso y actualicemos, y por supuesto que sí. Si cambiamos esto para que sea menor que, esto por supuesto es falso. En realidad es desaparecer. Al igual que en la página web de W3Schools, podemos comprobar utilizando cualquiera de estos operadores. Podemos usar menos o igual a. Establecemos que esto sea 10. Esto es por supuesto igual a 10. Esta afirmación debe ser cierta, que es. Nos fijamos antes en el doble y el triple equivale al símbolo. Empecemos con el doble es igual, y en lugar de número, pongamos esto dentro de las cotizaciones. Vamos a convertirnos en una cuerda, lodo o guardemos eso y refresquemos y veamos qué pasa. Tenemos la afirmación como cierta. A pesar de que los valores por encima de 10, esto se clasifica como una cadena porque en las cotizaciones. Solo pongamos un tercer símbolo igual ahí y guardemos y luego veamos qué pasa. Usaremos la declaración taxana es verdad. Esto se debe a que usar un triple igual comprueba tanto el valor. El valor es igual y también el tipo. El tipo no es igual porque se trata de una cadena y este es un número. Usar si las declaraciones son realmente buenas si sólo queremos probar contra un resultado. Pero si queremos probar contra más de un resultado, necesitamos usar un if else declaraciones o incluso si. Empecemos primero por usar las declaraciones if else, y eso sólo cambia de nuevo para ser un número. Si el número es menor a 10, los intercambios para ser número es menor a 10. Como saben, en esta ocasión se comprobará si el número es menor a 10 y luego se imprimirá esto en la pantalla. Pero también podemos proporcionar una segunda prueba de resultados en contra en caso de que esto no sea cierto. Podemos usar la palabra clave else. Entonces dentro de los tirantes rizados, podemos proporcionar un segundo eco. Por lo que el número no es menor a 10, y el punto y coma. Inicialmente comprobaremos si esta afirmación es cierta. De no ser así, esto se imprimirá en la pantalla. Guardemos eso y luego actualicemos. El número a no es menor a 10. Por supuesto que no es porque sea el número 10. Podemos simplemente poner un operador de nova ahí dentro. Pruebe si el número es menor o igual a 10. Entonces guarde eso, y ahora deberíamos cambiar para decir que un número es menor a 10 o de hecho igual a. Pero ¿y si quisiéramos probar contra condiciones libres o más? Bueno, aquí es donde más si entra. Simplemente pondré estos en líneas separadas solo para que sea un poco más legible. Entre el if y el else, podemos cambiar esto para ser elseif y luego usar los corchetes para una condición contra la que probar. En primer lugar, estamos comprobando si el número es menor a 10. Podemos entonces usar el elseif para probar si el número es igual a 10. Nuevamente, la variable de número igual a 10. Cambiamos esto para ser número es 10. Entonces, por último, si estas opciones son ambas falsas obtendrá la copia de seguridad. Cuando dijo la otra declaración en el día de hoy como un retroceso. Esta vez podemos eco número no es menor o igual a 10. Vamos a probar esto. En primer lugar, estableceremos que el número sea menor a 10. Deberíamos conseguir el número es menor a 10 y refrescar. Por lo que el número es menor a 10. Si el número se cambió para ser igual a 10, porque deberíamos obtener esta declaración de número es 10. Entonces, por último, si el valor es mayor que 10, por lo que cambiar a 14, deberíamos conseguir un número no es menor o igual a 10. Así que refresca. Ahí vamos. Es así como podemos usar las declaraciones if else y else if para probar contra múltiples resultados. Lo último que queremos echar un vistazo en este video son los operadores lógicos. Volvamos al ejemplo de W3Schools. Echemos un vistazo a los operadores lógicos, que está un poco más abajo. Así como las pruebas que utilizamos antes, la prueba si las condiciones son menores que, mayores que, o iguales a, por ejemplo. También podemos utilizar el operador y para comprobar si se cumple más de una condición y o. También podemos comprobar si un valor o nadie es cierto. También el signo de exclamación para probar si una condición no es cierta. Vamos a empezar por crear dos variables, así que el número 1 y luego también el número 2. Este valor puede ser 10. Entonces podríamos quitar todo lo demás aparte de las declaraciones if. Si quisiéramos probar contra ambas condiciones en lugar de solo una, así que si el número 1 era igual a cinco, también quiero comprobar si el número 2 es igual a 10, por lo que podemos usar el doble ampersands o la palabra y. Entonces voy a usar estos. Por lo que el número 1 es igual a cinco y también el número 2 es igual a 10. Por lo que la declaración de eco es cierta. Simplemente cámbialo de nuevo para que sea el dólar. Ahí vamos. Por supuesto que ambas afirmaciones son ciertas, por lo que deberíamos meter esta huella en la pantalla. Pero si todas estas declaraciones si devuelven falsas, no deberíamos conseguir nada en absoluto. Cambiemos eso para que sean dos. Por supuesto, el número 1 no es cierto cuando los dos de estos para ser cierto para que esto se imprima. Ahora si lo guardamos y actualizamos, deberíamos sacar el mensaje. Pero podríamos cambiar esto por ser o, que son las dos tuberías. Al igual que hemos visto antes, podemos usar las dos tuberías o el u operador. Ahora sólo necesitamos una de estas afirmaciones para evaluar a verdad. El número 2 es verdadero y el número 1 es falso. Ahora deberían volver a imprimir el mensaje en la pantalla. Esos son tus datos de prueba, y luego refrescar, lo que hacemos. Tales que siguen este video. Esa es una mirada básica a las declaraciones condicionales y algunos operadores PHP. Gracias, y te volveré a ver. 56. Fundamentos de PHP: Declaraciones de cambio: En el último video miramos declaraciones de if-else y cómo podemos usarlas para decirle al programa qué hacer, en base a si se cumple cierta condición. Ahora vamos a pasar a mirar unas declaraciones de cambio, que es una gran alternativa a las declaraciones de if-else si necesitamos comprobar contra muchas condiciones. Voy a empezar creando una variable llamada comida favorita, voy a poner esto para que sea una cadena de pizza. Entonces vamos a usar una declaración de cambio para comprobar muchos tipos diferentes de alimentos y luego comprobar si hay coincidencia con la variable de comida favorita. Para comenzar un enunciado switch, usamos la palabra clave switch. Entonces dentro de un conjunto de cubos, luego pasamos en la variable, quiero comprobar en contra. Coloca eso dentro de ahí. Entonces al igual que la declaración if que usamos antes, entonces usamos un conjunto de llaves. Entonces dentro de estos tirantes rizados, podemos poner todas las expresiones con las que vamos a querer comprobar y luego también proporcionar un resultado si se cumple esta expresión. Con declaraciones switch, comprobamos contra diferentes casos, por lo que usamos la palabra clave case. El primer caso podríamos comprobar si la comida favorita es un curry. Vamos a probar si esto es igual al curry. Entonces necesitamos usar un colon, y luego una vez que hayamos hecho el colon, entonces podemos proporcionar un desenlace si esto es una coincidencia. Sólo voy a usar un eco y luego sólo voy a decir, “me encanta el curry”, con un punto y coma al final. Después de cada una de estas expresiones, necesitamos usar la palabra clave break con el punto y coma. Esto se rompe de la sentencia switch si esto es cierto, y si no, simplemente bajamos al siguiente caso. Volvemos a utilizar la palabra clave case y en esta ocasión voy a comprobar si el caso es chino. Nuevamente, el colon y el eco de “Me encanta el chino”. Entonces al igual que antes, usamos la palabra clave break, y luego una más. Caso y esta vez “Pizza”. Eco, “Me encanta la pizza”. Si esto es cierto, podemos salir de las declaraciones de cambio. Es así como disenamos una declaración de cambio. Hay una pieza más que necesitamos añadir aquí antes de probarla. Necesitamos escribir un caso predeterminado, si alguna de estas expresiones anteriores no coincide. Esto es más una copia de seguridad, así que por defecto y luego el colon, y luego quiero hacer eco, no lo sé. Guardemos esto y probémoslo. Probablemente puedas averiguar qué va a pasar aquí. Tenemos nuestra comida favorita, digamos que es pizza, así que deberíamos hacer emparejar el caso de la pizza y luego hacer eco “Me encanta la pizza”. ¿ Cómo nos fue? Vamos a cambiar esto para que sea chino y eso debería cambiar a “Me encanta el chino”. Entonces curry, eso funciona bien, me encanta el curry. Ahora probaremos el valor predeterminado, así podremos cambiar esto para que sea “Pasta”. No tenemos caso para la pasta, así que deberíamos conseguir el defecto de “no sé”, que hacemos, así que eso es bueno. Es así como podemos usar una sentencia switch en PHP para probar contra múltiples resultados. 57. Fundamentos de PHP: Bucles: En la programación, podemos usar bucles para hacer mucho más fáciles las tareas repetitivas. Por ejemplo, podemos recorrer todos los nombres de tus amigos dentro de una base de datos, y luego mostrarlos en la pantalla. Esto ahorra tipo y en la misma línea de código una y otra vez para cada amigo. En este video, estaremos echando un vistazo a los cuatro tipos de bucles que podemos usar en PHP. Vamos a empezar con lo que se llama un bucle while. Si bien los bucles básicamente ejecutan un bloque de código siempre y cuando una condición sea verdadera, así que echemos un vistazo a cómo se ve el loop while en PHP. Voy a crear un conjunto de variables para ser uno. Un bucle while se establece un poco similar a un si afirmaciones que miramos hace unos videos. Pero la palabra clave while, la condición dentro de los corchetes para probar y luego el resultado para realizar entre las llaves. Quiero empezar comprobando si nuestra variable de número es menor a 10. Si bien nuestro número es menor a 10, vamos a crear un eco de número, y tú solo te escribirás primero, y luego te explicaré qué está haciendo. Es menos de 10, y también necesitaremos una trenza segunda ahí, y verás por qué en tan solo un momento. Entonces el número variable, vamos a incrementarse con el plus plus. Es posible que estés mirando esto, una preguntándose qué está pasando. Básicamente estamos creando un bucle, y empezaremos a probar si el número es menor a 10, que es así, por lo que en ese caso vamos a imprimir número, por lo que será el número 1 es menor a 10. Entonces una vez que se imprima esto, voy a incrementar el número usando el plus, por lo que esto cambiará el valor del número al número 2. Entonces esta condición sigue siendo cierta porque el número 2 sigue siendo menor a 10. Entonces la segunda vez alrededor en el bucle deberíamos imprimirnos, el número 2 es menor a 10. Entonces de nuevo se incrementa, y luego el número se convierte en el valor de 3, que de nuevo sigue siendo menor a 10, por lo que vamos a obtener el texto impreso en la pantalla. El número 3 es menor a 10, y así sucesivamente. Esto se sigue repitiendo hasta que la condición ya no sea cierta, o en nuestro caso, hasta que lleguemos al número 9. Volvamos a cambiarlo a 1, guardemos, y luego actualicemos. Ahí también tenemos el número 1 en todo el camino a 9 para ser menos de 10, y por eso necesitábamos insertar una etiqueta de ruptura solo para que cada uno de estos esté en una línea separada y sea más legible. Al siguiente vamos a echar un vistazo a una varianza del bucle while, y esto se llama bucle do-while. El bucle while que acabamos de ver solo funcionará mientras una condición es verdadera. No obstante, el bucle do-while siempre se ejecutará una vez primero antes de comprobar si una condición es verdadera, s o el código entre las llaves siempre se ejecutará un mínimo de una vez. Echemos un vistazo a cómo podemos hacer un bucle do-while en PHP. Empezamos con la palabra clave do, y entonces simplemente podemos dejar los corchetes ahí porque esto va a correr una vez lo que hagamos. Vamos a imprimir en la pantalla el valor del número variable y luego una etiqueta de ruptura, por lo que está en su propia línea. Esta sección siempre se ejecutará y voy a escribir un rato, y esta es la condición contra la que vamos a probar, por lo que mientras el número de nuevo es menor a 10. Cualquier cosa que hagamos siempre obtendrá número impreso en la pantalla, y luego el bucle continuará mientras una condición es verdadera. Debido a que esta condición es cierta, deberíamos conseguir un bucle todo el camino hasta 9, hecho esto necesita poner los incrementos ahí dentro, por lo que el número más y guardar, para luego refrescar. Tenemos los valores en todo el camino a 9. Veamos qué pasa si cambiamos esto para que sea el más grande que el símbolo. Por supuesto, 1 no es mayor que 10, por lo que esto es falso. Usando un loop while, no obtendríamos nada impreso en absoluto. El apartado do siempre se ejecutará una vez, y luego no deberíamos conseguir nada después de eso. Vamos a probar esto, y sólo vamos a conseguir el número 1 porque el bucle no se repite. Hay dos tipos más de bucles que podemos ver en PHP, el for loop y el for each loop. A continuación vamos a echar un vistazo al bucle for. Para bucles son útiles para cuando sabemos cuántas veces queremos repetir el bucle. Un bucle while se ejecutará hasta que una condición ya no sea verdadera mientras que un bucle for necesitamos establecer cuántas veces se ejecutará el bucle. Echemos un vistazo al bucle for. Utilizamos la palabra clave for y luego los corchetes, y por supuesto las llaves, al igual que los otros bucles, pero esta vez necesitamos pasar tres parámetros a los corchetes. El primer volumen que necesitamos ingresar es el inicializador, y esto efectivamente va a ser como variable antigua que usamos en el bucle while. Voy a establecer la variable una vez más de número y luego vamos a inicializar esto para que sea 0. Entonces cada uno de estos parámetros necesita ser separado con un punto y coma. El segundo parámetro es nuestra condición para probar contra, así que voy a usar la variable numérica. Queremos probar si esto es menor o igual al valor de 5. Una vez más, el punto y coma, y el tercero que voy a usar para incrementarse. Cada vez que pasemos por el bucle, vamos a incrementar la variable de número por uno en cada bucle, lo que el número más más. Al igual que los otros bucles entre las llaves, vamos a hacer eco del número, así que número, y luego el número variable, y luego la etiqueta de break, y no olvides el punto y coma al final, así es como se ve for loop. Una vez más, comenzamos diciendo un valor inicial de 0, y cada vez que hacemos un bucle alrededor comprobamos si el valor es menor o igual a 5, si lo es, vamos a hacer eco del número, y también se incrementa por uno en cada bucle. Vamos a guardar y luego refrescar. Genial. Tenemos todos los valores, tenemos el valor inicial de cero, y luego recorremos hasta llegar al valor de cinco. El último tipo de bucle que veremos en este video es el para cada bucle, está diseñado para funcionar en matrices. En el video de matrices, miramos cómo crear una matriz y cómo imprimir un valor al navegador seleccionándolo por su número de índice al igual que este, así que teníamos un nombre de matriz formas, y lo establecíamos igual a una matriz con los valores de cuadrado, círculo, y también triángulo. Entonces si queríamos mostrar alguno de estos valores dentro del navegador, necesitamos que haga eco de la matriz de formas, y luego dentro de los corchetes, necesitamos que seleccione la forma por su número de índice, por lo que 0, 1, y 2. por lo que el triángulo será el número 2, por lo que obtenemos el valor del triángulo. Crear un nuevo eco para cada elemento de matriz, puede ser una tarea larga y aburrida, y en la programación, siempre debemos tratar de evitar la repetición. Echemos un vistazo a cómo podemos crear un para cada bucle. No necesitamos este eco porque vamos a hacer esto dentro del bucle. Comience un para cada bucle con el para cada palabra clave, y al igual que los otros bucles tienen un conjunto de corchetes y luego las llaves. Lo primero que tenemos que hacer es pasar en el nombre de la matriz, así que ese es el nombre de las formas. Entonces cada vez que recorremos la matriz de formas, necesitamos almacenar los valores dentro de una nueva variable, así que hazlo declarando como y luego un nuevo nombre de variable, así que voy a llamar a este valor, y luego vamos a crear nuestro eco. Debido a que todos los nuevos valores se almacenan en nuestra variable de valor, necesitamos hacer eco de la variable de valor, y luego pondremos una etiqueta de ruptura dentro de ahí y un punto y coma, así es como se presenta un para cada bucle. Cada vez que recorremos la matriz de formas, instalaremos estos valores dentro de una nueva variable, que hemos llamado valor, y también con cada paso del bucle, también pasa al siguiente elemento de la matriz. Esto significa que el bucle seguirá viviendo a través todos los valores de la matriz hasta que encuentre el último. Digamos esto y luego actualicemos el navegador. Ahí vamos. Hemos recorrido por el primer elemento, el segundo elemento y el tercero, y esa es una forma mucho más conveniente de imprimir todos los valores de una matriz en lugar de seleccionar cada número de índice individual. Espero que este video te deje con una mejor comprensión de cómo funcionan los bucles en PHP. 58. Fundamentos de PHP: El Codex: Hola a todos. Entonces espero que esta sección te haya dado una mejor comprensión de los conceptos básicos de PHP, y ese conocimiento vendrá realmente útil, en la siguiente sección donde vamos a estar construyendo nuestro propio tema personalizado de WordPress, y convertir un sitio web existente a WordPress. Entonces a medida que pases por la siguiente sección, nos estaremos refiriendo al Códice de WordPress , con bastante regularidad, que puedes encontrar el codex.wordpress.org. Por lo que el Códice es el manual en línea para WordPress. Se trata de un repositorio de información y documentación de WordPress. Cubre casi todo lo que necesitas saber sobre WordPress, incluyendo desarrollos temáticos, desarrollos de plugins, y cómo contribuir a WordPress, y involucrarte contigo mismo. Lo estaremos usando mucho en la siguiente sección para navegar a través de referencias de funciones. Entonces, por ejemplo, si queremos saber cómo trabajar con una función en particular, así como las etiquetas, podemos escribir en la búsqueda, y luego buscar la referencia de la función, que son las etiquetas, y luego podemos averiguar exactamente cómo usar esta función en particular. Podemos encontrar una descripción sobre la función. También tendremos un ejemplo de uso. Por lo que a menudo podemos simplemente copiar y pegar la función en nuestro propio tema. Por lo que esta en particular incluye las etiquetas que están asociadas a una publicación de blog, las muestra en la pantalla, y a menudo se puede encontrar pequeña información como los parámetros, que la función toma en. Entonces por ejemplo, éste toma antes, después y un separador. Entonces antes y después simplemente establece qué texto mostrar, antes y después de la etiqueta individual. El separador es un valor como una coma o un guión que quieres poner entre cada una de las etiquetas, y si no encuentras del todo la función que estás buscando, desplazándote hacia abajo, muchas veces tiene una lista de etiquetas relacionadas, que puedes echar un vistazo, y encontrar exactamente lo que queremos. Por lo que vale la pena marcar el Códice como un gran recurso para aprender cosas nuevas sobre WordPress, y también para revisar el uso de ejemplo para cosas como funciones, y veremos más del Códice a medida que vamos para la siguiente sección. Entonces gracias, y ahora pasaremos a la siguiente sección, donde convertiremos un sitio web existente a WordPress. 59. Desarrollo del tema: Configuración de bases de datos e instalación de WordPress: Bienvenidos de vuelta chicos. Seguro que todos están ansiosos por empezar estamos creando su propio tema de WordPress. Como de costumbre, como el par de proyectos anteriores, vamos a empezar configurando la base de datos y también descargando la carpeta WordPress de wordpress.org Empecemos asegurándonos de que el MAMP esté todo en funcionamiento. Entonces si vamos a la página de inicio, entonces podremos comenzar a configurar nuestra base de datos dentro de “phpMyAdmin”. Bajo “Bases de datos”, queremos crear una nueva base de datos; esto se va a llamar “pro-audífonos”, que es el nombre de nuestro sitio web estático que vamos a convertir, luego hit create y eso es todo lo que necesitamos hacer ahí dentro. Entonces a continuación vamos a pasar a wordpress.org. Como de costumbre, simplemente descarga WordPress, luego selecciona la última versión. Seguro unos segundos para descargar. En las descargas, y luego descomprimir el paquete. Voy a llamar a esto “pro-audífonos” y luego guardar eso. Después abre los “htdocs;” voy a abrir una nueva ventana, luego entraré en las “Aplicaciones”, y luego “MAMP”, los “htdocs” , y luego drogarme sobre nuestro nuevo sitio web dentro de ahí. Simplemente cerraré estos. Entonces ya debes saber qué hacer a continuación; tenemos que ir al anfitrión local, luego a nuestra nueva carpeta pro-audífonos, luego empezaremos por ir por el país; así que selecciona tu país de elección y luego podremos vaya al script de instalación. Entonces vamos, el nombre de la base de datos era “pro-audífonos”, el nombre de usuario de nuevo era “root”, la contraseña root: el “localhost” y el prefijo de tabla que voy a dejar como predeterminado. A continuación, ejecute la instalación. El título del sitio es por supuesto, “Auriculares Pro”, el nombre de usuario: “proheadphones-admin” o su nombre de usuario de elección. Por supuesto, sólo con fines de demostración, sólo voy a llamar a esto “proaudífonos”. Confirma que usas una contraseña débil; eso está bien, solo para esta demostración, y configura un correo electrónico, y luego instala, y luego inicia sesión. Voy a revisar “recordarme”, y luego hacer clic en “iniciar sesión”. Estamos bien para irnos. Entonces esa es una base de datos y también WordPress instalado. Bien. Asegúrate de llegar al escenario donde todo está funcionando antes de que sigamos adelante. Te veré en el siguiente video. 60. Desarrollo del tema: Tema de inicio, guion bajo: Está bien. Por lo que antes de empezar este video, deberíamos ser todos viento WordPress. Deberíamos tener todo instalado en nuestro host local y también la base de datos y todo listo para ir. Ya debiste haber descargado la plantilla estática, el sitio web pro-audífonos, que se está suministrando con este curso. En este video, vamos a descargar un tema de inicio de WordPress llamado subrayados. Por lo que sólo voy a pasar a Google y luego buscaré subrayados tema de inicio. Entonces esta es la URL que necesitamos, que es underscores.me. Por lo que los subrayados no es como los temas que encontraremos en bosque temático o los temas que encontramos en la página de inicio de WordPress. Estos son todos temas completos los cuales básicamente listos para ir y listos para empezar a agregar tus propios colores y tus propios toques. No obstante, el tema de inicio es exactamente lo que suena. Es una base sobre la que empezar a construir. Incluye todos los archivos y carpetas requeridos para WordPress e incluye muchas mejores prácticas de WordPress. Por lo que podemos pensar en ello como un tema tapado rápido. Muchos de los principales temas por ahí en sitios como bosque temático se construye encima del tema de inicio de subrayado. Por lo que es una base realmente sólida sobre la que construir. Por lo que si echas un vistazo a la página principal, puedes ver todas las cosas que está incluido, como las hojas de estilo, diferentes diseños, cosas como encabezados personalizados, 404 plantillas. Por lo que simplemente básicamente nos ahorra mucho trabajo destacaría. Entonces, para empezar, lo único que simplemente tenemos que hacer es generar nuestro tema. Por lo que voy a llamar a esto los pro-auriculas-wp y luego dar clic en “Generar” y luego deberías iniciar una descarga. Entonces vamos a abrir eso y luego descomprimir el paquete y esta va a ser nuestra nueva carpeta temática para que empecemos a trabajar. Entonces abramos una Ventana Nueva del Buscador. Entonces voy a dirigirme a nuestra carpeta MAMP y luego vamos a averiguar la carpeta WordPress dentro de los docs ht. Por lo que pro-audífonos y luego necesitamos agregar esto a la sección temática. Por lo que WordPress contenido, temas y luego simplemente arrastra esto a la carpeta del tema. Abramos y miremos por dentro. Por lo que dentro hay todo lo que necesitamos para empezar a trabajar para nuestro nuevo tema. Hay varias plantillas de página y cosas como la página 404, las funciones y todas las páginas básicas que necesitamos, como el index.php, el page.php, la carpeta de diseños, carpeta para agregar idiomas, JavaScript y también bien organizados tenemos las plantillas de piezas. Entonces estamos bien para ir. Entonces voy a ir al Panel de WordPress y luego bajar a Apariencia y luego Temas y luego está nuestro tema pro-auriculares. Entonces activemos esto y por supuesto puedes cambiar la imagen si quieres. Entonces solo activen eso y luego visitemos el sitio. Es muy básico al minuto, pero está destinado a ser un tema de inicio para que construyamos. Por lo que comenzaremos en el siguiente video agregando las secciones de encabezado y pie de página. 61. Desarrollo del tema: Comprensión de las plantillas de WordPress / PHP: Bienvenidos a todos. En este video, solo queremos tomarnos unos momentos antes de comenzar nuestro tema de WordPress. Tan solo para mirar las diferencias entre los sitios web HTML tradicionales y cómo WordPress trata los temas. Este es un aspecto bastante estándar en la página index.html a menudo tendría un encabezado y una sección de pie de página en la parte superior e inferior de la página. Es bastante común tener una barra lateral si se trata de algo como una página web de noticias o un blog, y por supuesto una sección de contenido principal en el medio. Por lo general, todos los contenidos o todo el HTML para estos sitios web están todos almacenados dentro del mismo archivo, pero a menudo encontramos con sitios web HTML en ciertas áreas, particularmente el área de encabezado y pie de página. Tenemos el mismo código en cada página. El encabezado y el pie de página suele ser el mismo, y la página de índice, la página Acerca de Nosotros, y la página de contacto. Terminamos con bastante código duplicado de la página web. WordPress trata con las cosas un poco diferente sin embargo. En el lado izquierdo tenemos nuestro index.html tradicional, y en el lado derecho, podemos ver cómo WordPress o PHP en general se pueden utilizar para dividir las diversas secciones del sitio web. Cada una de estas secciones se puede colocar en su propio archivo con la extensión PHP. Como puedes ver en la parte superior de la página, el encabezado, codificamos el código fuera la sección de encabezado, y lo colocamos en su propio archivo llamado header.php, y esto también se puede hacer en WordPress con el sidebar.php y también la footer.php. El área de contenido a menudo se hace un poco diferente sin embargo. Puede haber más de un archivo de plantilla que controle la vista para cada página, o incluso el bucle de WordPress, pero los veremos con más detalle a medida que pasemos por esta sección. Una vez que tengamos todos estos archivos PHP o cada una de estas áreas guardadas en sus propias plantillas, podemos entonces poblar la página de WordPress mediante el uso de diversas funciones de WordPress. Por ejemplo, el archivo header.php que acabamos de guardar puede entonces incluirse dentro de la plantilla de WordPress mediante el uso de la función get_header, y es también las funciones get_footer y get_sidebar entre muchas otras. Una vez más el contenido se trata de una manera ligeramente diferente, y se vuelve a aprender más sobre esto a medida que se pasa por el resto de la sección. Esto es lo que parece en realidad en código. En el lado izquierdo, tenemos un editor de código y un diseño bastante común para la página de WordPress. En la parte superior, se puede ver la función get_header, que tira en todo el contenido de nuestro encabezado desde su propio archivo separado. El contenido, y en el caso de este archivo en particular, está siendo sacado de una reproducción de sonido pop llamada page, y su varía en las formas de incluir contenido en los sitios web de WordPress. Veremos una o dos de estas técnicas a medida que avanzamos. Más abajo de la página, tenemos la función get_sidebar. Entonces en la parte inferior, tenemos la función get_photo. Hacerlo de esta manera tiene muchos beneficios. Por ejemplo, si quisiéramos cambiar un área del encabezado, como agregar un enlace de menú en lugar de ir a la página Acerca de Nosotros, la página de índice, la página de contáctanos, y cambiar el enlace en cada página. En el caso de WordPress sólo necesitaría entrar en el archivo header.php, cambiarlo una vez, y esto cambiará el encabezado en cada página del sitio web. Espero que este resumen te dé una idea un poco mejor de cómo WordPress trata con páginas y plantillas de página. Ahora pasemos al siguiente video, crearemos el encabezado y los archivos footer.php, y luego traeremos el contenido de nuestro sitio web estático y los agregaremos a los nuevos archivos. 62. Desarrollo del tema: Secciones de cabecera y pie de página: Bienvenido de nuevo. Por lo que ahora sabemos cómo las ofertas de WordPress pesaban plantillas de página. Sabemos cómo WordPress dividió las cosas en varias secciones, como el encabezado y el pie de página. En este video nos vamos a poner a trabajar creando el encabezado y la sección de pie de página, luego convertir las partes que necesitamos de todo sitio estático en WordPress, luego incluir rodillas en nuestro tema. En el escritorio tengo una copia del sitio web estático, que se está suministrando con este curso. Ahora voy a abrir mi editor de texto. Voy a abrir los corchetes, y lo primero que quiero hacer una es droga en carpeta temática de WordPress desde dentro de los htdocs. Arrastre la carpeta de audífonos pro hacia eso. Entonces también voy a arrastrar sobre el sitio web estático y luego solo sale en la carpeta cuando lo necesitemos. Voy a volver al tema de WordPress, y luego vamos a empezar en la sección header.PHP. Si miramos hacia abajo todos los archivos y carpetas, deberíamos ver el wp-content. De hecho, vamos a hacer esto un poco más fácil para nosotros mismos. Acude a audífonos pro, contenido, temas, y en realidad nos limitaremos a drogar la carpeta temática. Debería hacerlo un poco más fácil. Entra en el archivo header.PHP. Como puedes ver, este es el encabezado de nuestro tema. En esta sección incluye todo el área en la sección de cabecera, todo el camino hasta la etiqueta de contenido de apertura. Mucho de esto te resultará familiar si utilizas para construir en sitios web HTML normales. Tenemos las etiquetas HTML habituales, la sección de cabeza, varias metaetiquetas, la etiqueta de viewport. Después un poco más abajo tenemos la sección de cabeza más cercana, y luego la sección de cuerpo. Voy a bajar un poco más allá y encontrar la sección de cabecera. Busque la sección de cabecera de apertura, y luego busque el cierre en una sección que es el área del cabezal. Simplemente voy a eliminar en realidad esta sección de encabezado, y luego podemos reemplazarla por nuestra propia sección de encabezado. Pasa a la plantilla estática en la versión HTML, y luego entraremos en el index.html. Después para reemplazar la sección de eliminación, baja a nuestra sección de encabezado. Voy a copiar toda acción de cabeza todo el camino hacia abajo. En realidad seguiremos yendo a la sección de funciones, porque las imágenes de los auriculares siempre están en la parte superior del sitio web. También voy a incluir esto en el encabezado. Sólo voy a copiar esa sección, y luego volver a nuestra carpeta temática. En la sección de encabezado que acabamos de eliminar, solo pega esto nuevo en eso. Guardemos eso. Ahora si pasamos al navegador web y luego actualizamos. Podemos ver que tenemos un cambio. El nuevo apartado de encabezado, no se ve mucho otra minable en realidad tenemos algo de la apariencia de contenido. Ahí está el enlace para nuestro logo, tenemos los elementos del menú. Tenemos una barra de búsqueda, y también imagen de audífonos. Si abres la versión HTML, así index.html, puedes ver que estas son las áreas que hemos copiado, la navegación, la búsqueda, y también la imagen grande. Está instalado al minuto, pero lo principal es que todo está vinculado y todo está funcionando. Ahora vamos a trabajar con la sustitución de la sección de fotos. Guarda el header.PHP, y luego si entramos en la barra lateral y buscamos el footer.PHP y nos desplazamos hacia abajo. Necesitamos básicamente hacer lo mismo que no tenemos el encabezado. Elimina la sección de alimentos existente, y luego pasa a nuestra plantilla en el escritorio hasta la página de índice, y desplázate hacia abajo hasta la variable en, y luego busca la sección de pie de página. Copia esto todo el camino de vuelta a la etiqueta de pie de página de apertura, y luego vuelve a nuestro tema. Yo me aseguro de que esto esté pegado en la misma zona que acabamos de eliminar. Guardar, y luego ahora cuando actualizamos nuestro sitio web, nuevo es un cambio el área que acabamos de agregar, los contratistas, la sección sobre nosotros, la dirección en también el texto de la parte inferior está todo apareciendo. Se puede ver que es la misma información que se incluye en la parte inferior de nuestra versión HTML. Es así como podemos agregar el encabezado y la sección de pie de página. Tan solo una cosa más antes de seguir adelante, solo quiero mostrarles la página index.PHP. Se puede ver en la parte superior de la página hay una función llamada get header. Esto está tirando de la sección de encabezado, y luego desplácese más hacia abajo. Tenemos una función get photo. Esto está tirando del contenido del pie de página. lugar de tener todas estas áreas colocadas en un solo archivo, las tenemos todas segregadas en las propias secciones, y luego simplemente las estamos tirando con las diversas funciones. También se pone barra lateral, que funcionará con más adelante también. Simplemente voy a dejar este video ahí, y volveremos en el siguiente video y empezaremos a trabajar con el CSS para que el sitio web se parezca más a nuestra versión HTML. También añadiré en las imágenes como las imágenes los auriculares para ponerlas a disposición para el nuevo tema de WordPress. 63. Desarrollo del tema: Añadir los CSS e imágenes: Bienvenidos de nuevo, chicos. Ahora tenemos el encabezado y el área de pie de página ahora en nuestro tema de WordPress. No se parecen mucho a la página web terminada. Esto se debe a que necesitamos traer el CSS y también la carpeta de imágenes de nuestra plantilla de sitio web. Empecemos abriendo las carpetas. Voy a abrir dos para encontrar las ventanas. Entonces este primero de la izquierda es la plantilla estática del sitio web y abriré una ventana más. Voy a abrir el tema de WordPress desde los htdocs. Bajemos y busquemos MAMP, htdocs, pro-audífonos, y luego dentro del contenido, los temas. De acuerdo, entonces lo primero que quiero hacer es traer la carpeta CSS a nuestra carpeta temática. Simplemente copia y luego pega esto en nuestro tema, y luego mientras estamos ahí, también podemos hacer lo mismo para la carpeta de imágenes. Copiar y pegar o arrastrar esos sobre. Se puede llegar a trabajar, incluir estos en nuestro tema. Entonces, en primer lugar, voy a ir a Google, y luego voy a hacer una búsqueda de WordPress, incluyendo CSS, JavaScript. Lo que necesitamos es el sitio web del desarrollador de WordPress, que está incluido en CSS y JavaScript. Echemos un vistazo a esta página. Esta página del sitio de WordPress te dará toda la información que necesitas para incluir CSS y JavaScript en tu tema. Si nos desplazamos un poco más hacia abajo. Estamos buscando la combinación de funciones enqueue. Esto nos va a dar una demostración de cómo podemos agregar hojas de estilo y también cómo podemos agregar archivos JavaScript en una sola función. Normalmente es necesario copiar esta sección o escribir, igual que hicimos en el último proyecto, después añadirlo a nuestro archivo de funciones. Pero debido a que estamos usando el tema de inicio de subrayado, esto ya se ha incluido en el archivo functions.php. Eso ya hay fotos. Te puede estar preguntando por qué necesitamos encola scripts y también encola hojas de estilo, lugar de simplemente añadirlos en la cabecera o en la sección de fotos, como lo hacemos con los sitios web HTML normales. Bueno, la razón por la que hacemos eso, es porque WordPress trata con muchos temas y plug-ins diferentes. Se asegura de que todos los scripts y estilos requeridos se carguen como y cuando se requiera. Entonces no hay conflictos entre diferentes plugins, y básicamente solo carga en un pesaje que todo funciona en conjunto, lugar de diferentes guiones luchando entre sí. Pasemos a nuestro archivo function.php, que está justo ahí, y la función que necesitamos se encuentra hacia abajo. Esto es lo que necesitamos. Tomamos la búsqueda de la función pro_headphones_wp_scripts. Esta es la función para encola los scripts y también los estilos. Echemos un vistazo a lo que está pasando. En primer lugar, tenemos una función wp_enqueue_style. Esto es jalando en nuestra hoja de estilo, que se encuentra justo ahí. Este es el style.css. Esto se consigue llamando a la función get_stylesheet_uri. Se hace en enqueue_script. El script está en enqueue, está en la carpeta js, que es solo subrayado proporciona un par de archivos JavaScript para empezar. Uno para la navegación, y luego un segundo archivo llamado skip-link-focus-fix. Este es el archivo que ayuda con la accesibilidad para los usuarios de teclado. continuación vamos a trabajar con nuestra hoja de estilo. Como mencioné antes, tenemos el archivo style.css siendo incluido por defecto. Agarramos todo nuestro CSS personalizado, que hemos incluido en nuestra carpeta CSS, y luego vamos a nuestro custom.css. Estos son todos los estilos personalizados, que se han proporcionado para el sitio web de audífonos. Sólo voy a Seleccionar todo, y luego Copiar, y luego bajar al style.css, y luego voy a agregar estos justo en la parte inferior. Simplemente desplácese hacia abajo y luego agrego estos en la parte inferior. De hecho, sólo vamos a añadir un comentario. Simplemente copiamos esta sección de comentarios y pegamos esto antes de otros estilos personalizados. Estilos personalizados, y luego guarde eso. Como acabamos de ver, ya hay bastantes estilos, que se habían incluido por defecto con el tema de subrayados. Muchos de estos estilos son útiles para empezar. Pero claro, si hay algún estilo que se haya agregado, que entren en conflicto con tu tema, siéntete libre solo para eliminar cualquiera de estos. Bueno, sólo voy a guardar eso, y luego ir y refrescar nuestro tema. Ahora, se puede ver que ha habido algunos cambios. Ahora tenemos el área oscura del pie y también un poco de estilo a las otras áreas de la página web. Se puede ver que nuestros estilos personalizados han sido tomados en efecto. Ahora, los estilos personalizados se han copiado en el style.css. En realidad podemos simplemente eliminar este estilo personalizado de nuestra carpeta CSS porque eso ya no es necesario. Notamos que dentro de la carpeta CSS que acabamos de copiar en nuestro tema. Hay más de un archivo CSS. Ahora necesitamos ponernos a trabajar vinculando todo el resto de las hojas de estilo. Las hojas de estilo para el marco de fundación, que hemos incluido con el sitio web estático. También, hojas de estilo para los iconos de la fundación, que también hemos utilizado. Añadamos estos enlaces ahora en el functions.php. Agregamos estos en duplicando la función wp_enqueue_style. Voy a duplicar esto y separarlo, para que quede más claro. Voy a trabajar con la superior porque la inferior, al igual que cuando estamos trabajando con HTML, necesita ser nuestras hojas de estilo personalizadas por lo que necesitan estar en el orden correcto. El top va a ser para nuestra fundación CSS. Vamos a darle a esto un nombre único “fundación CSS”, y luego necesitamos agregar la ruta del archivo. Entonces el get_stylesheet_ uri se refiere al directorio principal de plantillas, que tiene el style.css pero en nuestro caso tenemos una carpeta CSS separada por lo que solo necesitamos concatenar o add-on hasta el final, el resto del link. Entonces el “punto” para agregar esto, luego abre las citas, “/css/foundation.css” y debería tomar las que están dentro de la carpeta CSS y luego enlazar al archivo foundation.css. A continuación vamos a duplicar esto dos veces más, y sólo vamos a separar estos. A continuación, necesitamos agregar el “app.css”. Por lo que sólo cambiamos el nombre a app.css. Nuevamente está en la carpeta CSS, pero solo necesitamos cambiar esto a “app”. Entonces el tercero es para los iconos de la fundación. Entonces los que queremos agregar es el “foundation-icons.css”. Entonces cambiamos el nombre para que sea “iconos”, y la carpeta CSS. Esta vez hay una subcarpeta llamada “foundation-icons/foundation-icons.css” y guarde eso. En realidad, solo una cosa que tenemos que hacer primero es [inaudible] el “stylesheet_uri”, que usamos como hoja de estilo principal, que necesita cambios para “obtener directorio de plantillas”, por lo que “template_directory_uri”. Entonces solo copia eso y reemplaza a los tres. Pega esos en. Este “get_template_directory_uri” nos lleva a las principales raíces del tema, y luego simplemente agregamos en la extensión. Esto nos lleva al archivo correcto. Vamos a guardar y luego a “Refrescar”. Ahora eso se ve un poco mejor. Se puede ver que parte del estilo personalizado se ha agregado en. Esos son los enlaces para los iconos en la parte inferior. También si entramos en las herramientas de desarrollador, haga clic derecho y “Inspeccionar” si está utilizando Chrome. Abramos la sección de “cabeza” en la parte superior. También podemos ver que nuestras hojas de estilo que acabamos de agregar deben estar listadas aquí en alguna parte. Ahí está nuestro foundation.css, eso se ve, bueno. Tenemos el app.css, acabamos de agregar, los iconos de fundación-también y luego finalmente nuestro archivo style.css. Todos están vinculados. También podemos hacer lo mismo que solo hacemos por las hojas de estilo agregando archivos JavaScript adicionales, mediante el uso de la función wp_enqueue_script. Todo lo que necesitamos hacer es simplemente hacer lo mismo que antes copiando la función pero cambiando el nombre del archivo para vincularlo a nuestros archivos JavaScript personalizados. Guardemos eso. Lo último que quiero hacer en este video es incluir la imagen de los audífonos por lo que la imagen de los audífonos que agregamos en el archivo header.php. Esta es la imagen aquí. Tenemos que añadir nuestra imagen en el peso de WordPress. Dentro de las cotizaciones para la fuente de imagen, necesitamos agregar una función PHP para que abran las etiquetas PHP, las etiquetas de apertura y cierre. Entonces dentro hay que añadir “bloginfo”. Después abre los corchetes y luego las cotizaciones. Para agregar la ruta del archivo, necesitamos hacer esto de manera similar a las hojas de estilo. Usemos el “template_directory”. Simplemente haré que esto sea un poco más amplio. Añada un punto y coma después de los corchetes. Entonces necesitamos unirnos en el resto de la ruta del archivo. Después del directorio de plantillas, tenemos la carpeta de imágenes así que solo agreguemos esto al final, y luego agreguemos una barra inclinada delante de la carpeta de la imagen. Espero que eso tenga sentido.Estamos usando una función PHP llamada bloginfo, que es plugin al directorio de plantillas y luego estamos agregando al final la carpeta de la imagen y el resto de la ruta del archivo para llevarnos a la imagen de los auriculares, que acabas de hacer. Guardemos eso, luego pasemos al sitio web y actualicemos. Ahí hay un problemita, veamos qué es eso. El directorio de plantillas de funciones, realidad esto necesita estar en la misma línea, necesita ser continuo. Guardemos eso. Sólo intentemos eso. Ahí vas. Ahora nuestra sección de cabeza se parece más a nuestra versión terminada. También el área de pie de página en la parte inferior también se ve como el sitio web terminado. Eso es todo nuestro CSS ahora entrando en vigor. Todavía queda mucho trabajo por hacer pero si vuelves en el siguiente video, seguiremos con la página de inicio creando el front-page.php. 64. Desarrollo del tema: Conversión de la página principal: En lo que va de nuestra versión para WordPress del sitio web, tenemos el área de pie de página y también el área de cabecera, bastante completada. En este video, vamos a seguir trabajando con la portada creando una nueva plantilla de página llamada page.php del frente. Si pasamos a nuestra plantilla de subrayados, puedes ver que hay varias plantillas de página diferentes, como el page.php. Si echas un vistazo a un tema y ves que esta es la plantilla que muestra todas las páginas de forma predeterminada. Esta será la plantilla de página que se utiliza a menos que se cree una plantilla de página más específica. Echemos un poco más de un vistazo a las plantillas de página de WordPress. Dirígete a Google y sólo voy a hacer una búsqueda rápida de la jerarquía de plantillas de códex. Lo que necesitamos es el Manual de Desarrollador Temático. Una vez que estamos en la sección de jerarquía de plantillas, podemos ver que esto explica todas las diferentes plantillas de página. Nos muestra qué plantilla controla qué página individual. En primer lugar, tenemos la visión general visual, que puedes hacer click y ver cómo están dispuestas las plantillas. Si te desplazas más abajo, podemos comenzar con la pantalla de la página principal. Hemos mirado hasta ahora y ha causado que las entradas del blog de WordPress por defecto que se muestran en la página principal. Estos son controlados por la plantilla home.php. Si esto no existe, WordPress entonces busca el index.php. Pasaremos a usar la página de índice, el blog más adelante en esta sección. En este video, nos vamos a centrar en la plantilla front-page.php. Este es el archivo de plantilla utilizado para renderizar los sitios web desde la página. A continuación se puede ver la prioridad de las plantillas de página. El principal es de page.php. Si esto no existe, WordPress busca la plantilla de la página de inicio y luego si eso no existe, utiliza el page.php predeterminado, que miramos antes en una plantilla. Entonces, por último, si no se puede encontrar otra página, utiliza la plantilla index.php. Por supuesto, siéntase libre de desplazarse más hacia abajo y echar un vistazo a más información sobre las páginas individuales, publicaciones individuales, y también cómo podemos crear diferentes plantillas de página para diferentes categorías y etiquetas. Pero voy a ponerme a trabajar con el frente page.php, dirígete al tema de WordPress. Voy a crear un nuevo archivo dentro de éste se va a llamar fronts-page.php. Para empezar, voy a copiar todos los contenidos del page.php, seleccionar todo y copiar y pegar esto en nuestra portada. No necesitamos los comentarios en la parte superior porque esta es la plantilla de página predeterminada para mostrar la portada. También va a estar incluyendo nuestro propio html del sitio web estático borra todo el html de la medula. También puedes eliminar la barra lateral y guardarla. Esto se debe a que nuestra versión finlandesa no tiene una barra lateral en la primera página. Ahora tenemos que ir al Panel de WordPress y necesitamos realmente crear una nueva página, ir a “Nuevo” y luego a “Página”. Esta va a ser una página donde podamos vincular nuestra plantilla de portada a. Llamemos a esto casa. Todo lo que necesitamos hacer es golpear publicar, y luego pasar a la configuración, hasta la pestaña de lectura. Tenemos que cambiar nuestra portada para mostrar una página estática. El que necesitamos exhibir es el hogar, y luego guardar eso, así que vamos a visitar el sitio. Ahora esta es la primera página y todo lo que tenemos es la sección pesada en la sección de fotos. Esto se debe a que en nuestra plantilla de portada, sólo tenemos la función de encabezado y pie de página. Ahora podemos dejar caer el contenido de la página principal de nuestro sitio web estático. Ve a los audífonos Pro y luego al index.html. Ya hemos incluido toda la sección de encabezados. Ya hemos incluido la sección de funciones. Tengo un poco más abajo cuando copia el contenido principal. Todo desde la sección con el ID de rango, hasta el área de pie de página, copia eso. Después vuelve a nuestra versión de WordPress, y luego pega esto justo debajo del encabezado, y luego guarde eso, echemos un vistazo. Ahora está nuestra sección de contenido en el medio, lo único que realmente falta son las imágenes. Ahora vamos a corregir las rutas del archivo de imagen, igual que hacemos en el header.php. Voy a copiar toda la función php, agarrar todo entre la fuente de imagen entre las citas, copiar todo eso, y luego volver a la portada y luego necesitamos encontrar las imágenes gratuitas. El primero está en la carpeta de imágenes, y se llama 1.jpg. Simplemente eliminemos eso y luego peguemos en la función WordPress y luego carpeta de imágenes necesita ser cambiado a usted. Número 1, 1.jpg así que cambia eso. Después haz lo mismo para la segunda imagen. Eliminar la fuente de imagen basada en la función WordPress. Entonces solo cambia el nombre para que sea el número 2.jpg. A continuación, desplácese hacia abajo hasta la imagen número 3. Asesoramiento a cualquier cambio al número de imagen 3.jpg, y guarde eso. Démosle una actualización a eso. Eso se ve bastante bien, echemos un vistazo arriba y abajo. Debería tener exactamente el mismo aspecto que nuestra versión finlandesa. Sí, todo se ve bien en ellos. Esperaremos que eso te haya ido bien y terminemos para terminar la página desde, y a continuación vamos a pasar a convertir en el menú para integrarte con WordPress. 65. Desarrollo del tema: Cómo convertir nuestro menú: Bienvenido de nuevo. En este video, vamos a llegar a trabajar en enganchar nuestro menú a WordPress. Actualmente, tenemos un par de enlaces en la parte superior, los cuales solo se listan elementos básicos de HTML, y si hacemos clic en ellos, en realidad se vincularían a cualquier lugar, porque los enlaces están buscando la página blog.html, o el about.html página, de nuestro sitio estático. Por lo que para solucionar esto, necesitamos reemplazar nuestros elementos de la lista HTML por menús de WordPress. Entonces si pasamos al Códice WordPress, y si buscamos menús de navegación, y este es enlace que necesitamos, podamos ver que lo primero que tenemos que hacer, es registrar el menú dentro de los temas functions.php archivo. Si estuviéramos haciendo esto desde cero, necesitamos copiar esta función, y luego pegarla manualmente. Pero porque estamos usando el tema de inicio de subrayado, si entramos en el function.php, y vamos a hacer una búsqueda de register_nav, y esto es lo que necesitamos, register_nav menús. Por lo que el tema de inicio que estamos usando ya tiene registrado un menú primario y podemos usar esto como nuestro menú principal en la sección de encabezados. Por lo que de vuelta al Códice. Si nos desplazamos un poco más hacia abajo, hay una sección llamada menús de visualización sobre el tema. Necesitamos usar una función PHP llamada wp_nav_menu. Por lo que necesitamos pegar esto dentro de nuestro tema, exactamente donde queremos que aparezca el menú. Entonces copiaré esta sección, y luego nuestro menú está en el header.php, y encontramos los ítems de lista para el blog, en la página sobre nosotros, solo eliminemos estos dos ítems de lista, y voy a pegar en el que acabamos de copiar y esta función necesita estar rodeada en etiquetas LI. Entonces pondré un conjunto de etiquetas de elemento de lista dentro de ahí, y luego pegaré en la función que acabamos de copiar, y luego todo lo que tenemos que hacer es eliminar el menú de cabecera, y los cambios para ser primarios, que es lo mismo que nuestras funciones archivo, justo aquí. Simplemente me aseguraré de que eso esté guardado, y luego visitemos los sitios, y actualicemos. Por lo que ahora nuestro menú está siendo reemplazado por una versión de WordPress. Tenemos la página de inicio, y también la página de muestra predeterminada. Voy a ir al tablero, y luego a los menús. Para empezar, quiero hacer de este el menú principal. Así que asegúrate de que eso esté seleccionado, y voy a también, automáticamente, añadir nuevas páginas al menú, una vez que las creemos. Entonces guardaré eso. También podemos eliminar la página de muestra, y de hecho, nuestra página web terminada no tiene el enlace de la página de inicio. Entonces dejemos que solo eliminemos estos dos enlaces, y luego guardemos eso. En realidad se elimina todo el enlace del menú para que no necesitamos, pero al menos sabemos que el menú está funcionando. Entonces cuando volvamos en el siguiente video crearé la página del blog. La nueva página de blog que agreguemos se agregará automáticamente a la navegación superior. Entonces ese es nuestro menú de WordPress ahora agregado al tema. Entonces te veré en el siguiente video. 66. Desarrollo del tema: Configurar la página del índice del blog: Bienvenidos de vuelta chicos. En este video, vamos a estar configurando nuestra página de índice para mostrar nuestras últimas entradas de blog. Vamos a convertir nuestro blog en dos etapas. Este video se centrará en traer los contenedores de páginas, las clases CSS, y el diseño general de la página de nuestro sitio estático, que es el blog.html. Si bajamos a la sección del blog, y luego localizamos la entrada del blog, básicamente vamos a estar copiando todo lo que rodea a estas entradas del blog, como los contenedores y las filas. En el siguiente video nos estaremos concentrando en las entradas individuales del blog. Estoy colocando estos dentro de un archivo llamado Content.php. Empecemos en el panel de WordPress. Estamos creando una nueva página. Esta va a ser nuestra página de blog. Llamemos a esto un Blog y luego publiquemos. Entonces necesitamos configurar esta página para mostrar nuestras entradas de blog. Así que ve a Ajustes, y luego a Lectura. Después la Página de Publicaciones, selecciona el blog. Entonces guarde eso. Ahora cuando visitamos el sitio, la página del blog se ha agregado automáticamente al menú, lo cual es bueno. Porque esto ahora es un menú de WordPress, si hacemos clic en el enlace, deberíamos ser llevados a la página que muestra las entradas del blog, que hacemos y ahí está nuestra entrada de blog Hola mundo. Como ya sabemos, la plantilla de página, que controla el blog es el index.php. Pasa a la carpeta del tema y localiza el index.php. Desplazándose hacia abajo, podemos ver que hay un bucle while PHP. Si recuerdas del video while loops, un loop while siempre se ejecutará mientras una condición es verdadera. En el caso de WordPress, mientras que está disponible el blog. Después podemos mostrar las entradas de blog en la página web, que se incluye en el archivo de contenido. Todo lo que pondremos entre este while loop correremos para cada entrada de blog. Trabajaremos con el loop y las publicaciones individuales del blog en el siguiente video. Por ahora, solo queremos configurar la página en los mismos contenedores y los mismos divs que el sitio estático. Básicamente, vamos a copiar sobre todo lo que rodea a las entradas del blog. Ve a nuestro sitio estático en el escritorio y luego entra en el blog.html. En primer lugar, abramos esto en el navegador y echemos un vistazo. Justo debajo de la sección de encabezado, tenemos una sección de llamada que es bienvenida a nuestro blog. Vamos a copiar esto en el sitio principal. Entra en el blog.html. Copia esta sección de llamada y todo el camino hasta el div con la clase de medio ocho. Básicamente, todo el camino a la entrada del blog. Copia eso de nuevo a nuestro tema. Porque esto está justo debajo de la sección de encabezado. El llamado está justo debajo de la imagen del encabezado en la página web terminada. Tenemos que pegar esto, justo debajo de la sección de encabezado. Pegar y guardar. Yo solo limpiaré un poco esto. Después de volver al sitio estático en el blog. Después desplázate hacia abajo. El área que acabamos de copiar es la fila y el div con la clase de medio ocho. Haga clic en la fila de la clase div y luego desplácese hacia abajo para localizar el div de cierre, que está justo aquí. Es la última etiqueta div de cierre justo después de la barra lateral. Voy a copiar esto y subir todo el camino, incluyendo la barra lateral. Copiar eso. Asegúrate de tener el área completa, incluyendo toda la barra lateral y el div de cierre, justo por encima de la sección media libre. Entonces copia y luego vuelve al tema, desplázate hacia abajo hasta la parte inferior, y luego pega esto justo después de la sección primaria, y luego guarda eso. Hemos copiado el contenido de antes y después de las entradas del blog para mantener nuestros contenedores de páginas y las clases CSS exactamente iguales a nuestro sitio estático. La única diferencia es que reemplazamos las entradas del blog HTML con este bucle de WordPress, que está justo aquí. Esto significa que WordPress puede generar las entradas de blog, que podemos crear dentro del tablero. Guarda esa página y luego vuelve al sitio, y luego haz clic en el blog. El post del blog comenzará a trabajar con en el siguiente video. Tenemos nuestra barra lateral por el lado derecho, que es una que acabamos de copiar. También tenemos una segunda barra lateral, que está por abajo. Está siendo sacado de nuestra página de índice. De abajo, obtendríamos barra lateral. Ordenaremos las barras laterales en unos cuantos videos, pero por ahora pasemos a configurar las entradas de blog individuales en el archivo content.php. 67. Desarrollo del tema: Configurar las publicaciones de blog: Bienvenido de nuevo. Ahora nos vamos a concentrar en nuestras entradas individuales de blog y cómo conseguir que funcionen dentro de un WordPress. En primer lugar, vamos a crear un par de nuevas entradas de blog con las que estar trabajando. Agrega una nueva publicación de blog, por lo que nuevo post wall. Agarramos un poco de Lorem Ipsum. Quiero generar cinco fotografías y copio todo esto. Entonces agrega esto a nuestro post. También agarraré una imagen destacada. Agarro de nuestro proyecto, dentro de la carpeta de imágenes. Estaré bien y en realidad golpeó uno o dos más dentro de eso para uso posterior. Establece la imagen destacada y luego publica. Si pasamos a Visitar sitios, echa un vistazo al blog. Te darás cuenta de que la publicación del blog que acabamos crear ahora ha sido incluida en la parte superior de nuestro blog. No obstante, no se parece a nuestro blog dentro de la página de meta, que es justo así. Cambiemos esto ahora. Si volvemos al index.php y dentro de la sección de bucle, se puede ver que el bucle está tirando de una plantilla llamada contenido. Esta es la plantilla que contiene toda la información sobre la entrada del blog. Entra en tu directorio, y luego busca una carpeta llamada partes de plantilla. Entonces dentro de ahí, abre el content.php. Podemos ver esta es la parte de plantilla para mostrar mensajes. Esta es una con la que necesitamos trabajar para que se parezca más a nuestra página web de acabado. Voy a limpiar un poco esto. En primer lugar, voy a quitar el encabezado. Eliminar la abertura en la etiqueta de cierre. Voy a desplazarme hacia abajo y eliminar la sección de contenido de entrada completa y también la sección de pie de página de entrada. Deberíamos eliminar eso, para que podamos eliminar todas esas secciones y yo sólo añadiría nuestro propio contenido según lo necesitemos. De hecho, sólo podemos quitar esta entrada meta tipo dos. Suprímate eso. Guardemos eso y luego si actualizamos, deberíamos encontrar que se está eliminando todo el contenido excepto el título. Arreglemos esto ahora yendo a nuestro sitio web estático desde el escritorio, vayamos al blog y luego bajemos a nuestras publicaciones de blog. Si localizas el div con la clase de post de blog y luego copia esta sección completa. Vuelvo a nuestro tema de WordPress y pego justo después de la declaración if. Guarda eso y luego refresca la página del blog. Lo primero que notarás es que la entrada del blog tiene dos títulos de post de blog diferentes. Una que WordPress ha generado, y otra de nuestra sección de blog que acabamos de copiar. Arreglemos esto ahora. El generado por WordPress está abierto en la parte superior. Hay un si más declaraciones, que está mostrando el título de la entrada del blog. En primer lugar, estamos comprobando si la página es única y esto significa si se ha hecho clic en la entrada del blog y vinculado a través de la entrada completa y si lo tiene, se va a mostrar el título de la página con un encabezado de nivel 1. Todas las páginas tendrán el título mostrado como nivel 2. Para que coincida con nuestro sitio web, no cambiará el rumbo de nivel 1 para ser nivel 2 y también cerrará. Para todas las páginas, voy a cambiar este para que sea el encabezado de nivel 3 que coincida con nuestra entrada de blog, que puedes ver es aquí abajo. Ahora, WordPress está generando nuestro título de blog. Simplemente podemos borrar la nuestra. Elimina eso de eso y luego visita el blog y refresca. Ahora, acabamos de obtener el título de New Post 1. Como puedes ver, no tenemos la imagen mostrada que establecemos como la imagen destacada. Todavía tenemos la imagen de marcador de posición, así que vamos a content.php. Encima en el contenido, dejemos la imagen de retención de posición y luego sustituyamos esto por una función de WordPress. Abre el php y luego la función que necesitamos, se llama la miniatura de la publicación. Por lo que theme_ post _ miniatura y golpea Guardar. Entonces ahora si actualizamos el blog, se nos mostrará la imagen destacada. Ahora vamos a trabajar en funciones agregadas de WordPress, mostrar al autor, el número de comentarios, y también la fecha en que se creó la publicación. Entre las etiquetas p, solo eliminemos todos los textos. Voy a reemplazar esto por una función de WordPress. Abre el php. Tenemos que incluir el extracto. Esta es la versión mostrada del contenido completo, que apenas se va a mostrar debajo de la imagen. Ahora, está la versión acortada del texto de Lorem Ipsum. A continuación sustituyamos al autor, así que eliminemos el nombre de los autores, abrimos las etiquetas php, y ésta es simplemente la_author (); y luego actualicemos los datos. Ahora después del autor, tenemos los proheadphones-admin, que es el creador de esta entrada de blog, y luego siguiente el número de comentarios. Entonces de nuevo, abre las etiquetas php, abriendo y cerrando etiquetas. Este es llamado por la función llamada número de comentarios. Comments_number (); Así que guarde eso, refresque. Ahí vamos. No hay comentarios en esta publicación, pero el ejemplo Hello World one, que se incluye con WordPress, tiene un comentario. Entonces, por último, hagamos que la fecha sea dinámica. Entonces podemos dejar lo publicado en texto, pero solo agreguemos una función php directamente después de eso. De hecho, pongamos una nueva línea para que quede más claro. Yo quiero eco conseguir las fechas. Pero esta vez dentro de los corchetes, vamos a agregar algunos parámetros para asegurarnos de que los datos se muestren en el formato correcto y luego dentro de los corchetes voy a agregar una F mayúscula, una j pequeña, y luego una coma y una mayúscula Y y ves Y cuando actualizamos la página. Ahora, copiaremos las fechas. El F mayúscula fue para el mes, el pequeño j es una forma php de incluir el día, y luego una coma y luego una Y mayúscula fue el año en formato de cuatro dígitos. Si te interesan diferentes formatos de fecha php, un rápido Google sacará todas las diferentes letras que puedes usar. Existen diferentes formatos de fecha. Ahora espero que todo esté funcionando. Iba a añadir dos entradas de blog más solo para comprobar que todos están funcionando. New Post 2, vamos a copiar sobre el texto de muestra, una imagen destacada, y luego publicar, y luego una más y luego visitemos el blog. Esperemos que cuando nos desplazemos hacia abajo, esté nuestro nuevo post 3, nuestro nuevo post 2, y el original que creamos. Eso acaba de terminar ahora para la sección exenta de blog, puedes hacer tanto más como, agregar funciones de WordPress para mostrar las categorías o las etiquetas asociadas a cada post. Todo lo que se necesita es una rápida búsqueda en Google o echa un vistazo a los códecs de WordPress para saber cómo hacerlo. Ahora, pasemos al siguiente video. Echaremos un vistazo a esta barra lateral. 68. Desarrollo del tema: Barra lateral: Bienvenidos de vuelta chicos. En este video nos vamos a concentrar en la barra lateral. Actualmente, si pasamos a nuestra sección de blog, se muestra en la página hay dos barras laterales. En primer lugar es una barra lateral en el lado derecho, que se está llamando desde nuestra página de índice. Es la sección que lo sacamos de nuestro sitio estático. El segundo, se está llamando desde la función get side debar. Esto se está mostrando justo en la parte inferior de la página, que incluye las publicaciones recientes, comentarios, archivos, categorías. Si pasamos a un archivo llamado sidebar.php, podemos ver que la barra lateral se está generando a partir de una barra lateral llamada sidebar-1. Podemos encontrar el contenido de la barra lateral dirigiéndose a la sección de widgets de dashboard. Entra en el tablero y selecciona “Widgets” Esta es la sección de la barra lateral, que está en la parte inferior de nuestra página de blog. Nuestra barra lateral de la página web terminada solo incluye las categorías, y la oficina. Vamos a trabajar borrando todos los widgets excepto las categorías. Abre y luego pulsa “Eliminar” las publicaciones recientes pueden ir, comentarios, y los metadatos también pueden ir. Nos quedan los archivos y las categorías. Iré a la página de índice, se pueden ver las categorías es la primera y luego los archivos. Vamos a reorganizar estos para que sean los mismos. Ahora hemos arreglado la barra lateral. Si pasamos a la página de índice y luego usamos la función get side debar. Voy a hacer clic en esto y luego colocarlo dentro de nuestro contenedor de barra lateral. Colócala justo debajo del div con la clase de pegajoso. Abre las etiquetas php, pega en get side debar, y luego cierra. Entonces guarda eso, y luego refresca nuestro blog. Desplácese hacia abajo. Tenemos las categorías y los archivos. El primer apartado es de los widgets que acabamos de agregar, y luego la segunda sección es HTML plano, que es justo de esta sección de aquí. Voy a eliminar esta sección en tan solo un momento. Pero primero, quiero asegurarme de que el estilo para los widgets coincida con nuestro sitio web terminado. Para ello, voy a pasar a nuestro archivo functions.php, y luego voy a hacer una búsqueda de registro de subrayado barra lateral. En mi caso está en la línea 88. Esta es la barra lateral que queremos, que es lateral-1, y esta es la que estamos trabajando actualmente. También hay áreas donde podemos agregar HTML, como divs, secciones, ID y clases. Podemos colocar esto antes o después de los widgets o incluso el título. Nuestros títulos de widget como archivos, categorías superiores a los encabezados de nivel 4. Cambiemos el nivel 2 para ser cuatro. Esto es antes y después del título. Guarda eso y luego refresca, y eso se parece más ahora. En nuestro caso, todo lo que necesitábamos para cambiar era el rumbo de nivel 4 para el título. Si tienes una barra lateral más compleja, es posible que tengas que entrar en el widget antes y después, y agregar diferentes divs o clases diferentes para que sea mucho el sitio web original. Ahora hay mucho [inaudible] que podemos volver a la página de índice y eliminar el contenido HTML estático. Eliminar la primera sección, y también la sección de archivo. Atemos un poco esto, ahí vamos. Eso debería eliminar los segundos conjuntos y refrescar. Genial, ahora WordPress está tirando de las categorías y también de los archivos. Ahora tenemos la capacidad de hacer click en los elementos individuales y ser llevados a una página. Por ejemplo, este filtra todas las publicaciones de blog a un mes determinado. Lo mismo si tuvieras más de una categoría, obtendrás una lista de diferentes categorías. Podríamos seleccionar una de esas categorías, WordPress aplicará filtros. Esa es nuestra barra lateral ahora terminada. Pasaré ahora al siguiente video. 69. Desarrollo del tema: Página de una sola publicación: Hola a todos. En este video vamos a echar un vistazo a la página de publicación única. Cuando nosotros mi vista en nuestro blog, podemos hacer clic en el título de las entradas individuales y nos llevan a una página que muestra sólo esta entrada de blog y nada más y esta vista está controlada por un archivo llamado el punto único PHP. Todavía no hemos hecho ningún trabajo dentro del archivo PHP de un solo punto. Si hacemos el sitio web un poco más pequeño y estiramos el contenido, se puede ver que el encabezado está centrado y también el pie de página. Pero el contenido PHP de un solo punto real no está alineado dentro de un contenedor. Arreglemos esto. Pasemos al solo punto PHP y añadamos los contenedores. Podemos agarrar estos de nuestro punto índice PHP. Recorta el div con la clase de fila, y también los ochos medios, que son los contenedores. Copia eso y luego pega estos en justo debajo de get header y luego si te desplazas hacia abajo hasta la parte inferior de la página, justo encima de la etiqueta PHP de extremo abierto, podemos cerrar estos dos divs así. Guardemos eso y luego actualicemos y ahora cuando hagamos la página de ancho completo, podemos ver que las entradas del blog están todas centradas en el medio de la página. Ahora nuestro contenido se ve mucho mejor. Ahora agreguemos la barra lateral para estar en el lado derecho. Volvamos a la página de índice y vamos a copiar la sección de la barra lateral desde abajo. Copia el div con la clase o medio tres. Después vuelve al único punto PHP, porque queremos que la barra lateral esté todavía dentro de la fila. Coloca esto entre los dos divs o las dos etiquetas div de cierre que acabamos de agregar, asegurándonos de que esté justo por encima del div de cierre para la fila. Guarda eso y luego refresca y deberíamos conseguir la barra lateral, que es genial. Si miras la entrada del blog, puedes ver que aún tenemos la versión acortada o el extracto, lugar de las cinco fotografías de Lorem Ipsum, que pusiste en la cuadra. Quiero que esta página muestre el contenido completo en lugar de solo la versión acortada. Al igual que en la página de índice, el único punto PHP extrae el contenido de la publicación del blog de un archivo llamado content dot PHP. Vayamos a ver nuestro expediente ahora. Ya le hemos dicho a esta plantilla que muestre sólo una versión acortada con la función de extracto. ¿ Cómo podemos cambiar esto para que sea el contenido completo al mostrar el post completo? Bueno, podemos hacer esto mediante el uso de sentencias condicionales, como miramos en la sección de PHP. Usando una declaración if else, podemos mostrar la versión abreviada o la versión completa dependiendo de qué página veamos. Veamos cómo podemos hacer esto en WordPress. Voy a ir a Google y luego hacer una búsqueda rápida de etiquetas condicionales de WordPress. Busca el códice bajo etiquetas condicionales. Está bien. Las etiquetas condicionales se pueden usar en tus archivos de plantilla para cambiar qué contenido se muestra, y cómo se muestra ese contenido en una página en particular. Eso es exactamente lo que queremos. Echemos un vistazo más abajo. Podemos mostrar contenido dependiendo de si la página es de inicio, si la página es la portada o por ejemplo, si es admin, si estamos en una sola página, que es exactamente lo que queremos. Si la plantilla es una sola página, queremos mostrar el contenido completo. Si la plantilla está en casa, queremos simplemente mostrar el extracto, y el hogar es donde se está mostrando la página del blog. Volvamos al punto de contenido PHP. De acuerdo, así que empecemos por crear nuestras declaraciones if-else y hacer un poco de espacio. Queremos mostrar el extracto si la página es de inicio, lo que significa que la página es el blog. Hagamos eso abriendo las etiquetas PHP y luego comencemos una sentencia if. Entonces si, entonces deja recortar esta función hogareña y pegarla entre corchetes. Si la página es la página de inicio, y abre la tornapunta, luego muestra el extracto y luego tenemos que cerrar calibrados apagado. Abre el PHP. Cierra el corsé y cierra PHP. Ahora, sólo deberíamos conseguir el extracto si es el blog. Si vamos al sitio y nos refrescamos, entonces perdemos el extracto, por lo que sólo se deben mostrar cuando vamos al blog, que está justo ahí. Ahora vamos a crear una sección l, para mostrar el contenido completo si se utiliza la plantilla única. Ponemos en el PHP, creamos la sentencia else en el corsé rizado de apertura y de hecho, podemos simplemente copiar esta línea y pegarla en. Pero en lugar del extracto, podemos usar el contenido y luego cerrar la declaración else con la tornapunta de cierre, ahí vamos. Echemos un vistazo al sitio y veamos esto en acción. Esperemos que todo esto funcione. Refrescar. En la sección de blog, así conseguiremos la versión acortada y luego pinchemos en el título de la entrada y ahí vamos, así que ahí está el contenido completo dentro del único archivo, que son los cinco párrafos, de Lorem Ipsum. Empieza a trabajar igual que queríamos. De acuerdo, así es como podemos trabajar con la plantilla de una sola página, y también cómo podemos trabajar con declaraciones condicionales y etiquetas condicionales en WordPress. 70. Desarrollo del tema: Conversión de la página Acerca de: Bienvenidos chicos. En este video, vamos a crear la página sobre nosotros. Esta página tiene muchas similitudes con la página de inicio, como la sección de navegación en la parte superior, la imagen principal, la sección que tiene los diferentes rangos de auriculares disponibles, y el área de pie de página en la parte inferior. Pero con sólo un poco de contenido añadido en el medio, como el título sobre nosotros y también los párrafos de texto en el medio. Pongámonos a trabajar yendo a nuestro tema. Vamos a crear una nueva plantilla de página. Esto se va a llamar page-about.php. Si recuerdas de videos anteriores, miramos la plantilla llamada page.php, que es la plantilla de respaldo genérica para mostrar todas las páginas. Pero vamos a crear una plantilla más específica creando un nuevo archivo llamado page-about.php. Por las similitudes con la página de inicio, voy a empezar copiando todos los contenidos de la portada. Selecciona todo y copia, y luego pega esto en nuestra página sobre. Tenemos que mantener el área de pie de página, y luego me voy a desplazar hasta la parte superior de la página y añadir un comentario. Justo debajo de la etiqueta php abierta, abre un php comments, y luego agrega un nombre de plantilla. Nombre de la plantilla: Se trata de nosotros, y la estrella y luego cerrando barra. Este nombre será el nombre de la plantilla, cual podrá seleccionar cuando cree la página sobre nosotros en el tablero. Adelante y hagamos eso ahora. Pasa al tablero, y luego ve a una nueva página. Voy a llamar a esta página Acerca de, y luego la plantilla. Voy a seleccionar la plantilla sobre nosotros que acabamos de crear, y luego golpear “Publicar”. Entonces vamos a visitar el sitio y nuestro enlace se ha agregado automáticamente al menú. Haga clic en la página “sobre nosotros”. Actualmente sólo tenemos el mismo diseño que la página de inicio. A continuación necesitamos copiar sobre el encabezado sobre nosotros, y también los párrafos de texto del signo estático. Vaya a las plantillas estáticas, y luego vaya a about.html, desplácese hacia abajo. Tenemos que copiar la sección de columna, que es este dev, y esto contiene el encabezado sobre nosotros, copiar eso, y luego desplazarse hacia abajo, copiar la fila que contiene todo el texto y también los dos devs de cierre justo después de él. Copia eso y vuelve a nuestro tema en la página about.php, y luego esta sección va justo debajo del encabezado. Pega debajo de la función get header, y luego guarda. Echemos un vistazo a esto golpeando “Refresh”. Eso es todo. Sobre la sección de cabecera, tenemos el encabezado sobre nosotros, tenemos todos los párrafos de texto, la sección con los diversos modelos, y luego el área de pie de página en la parte inferior. Esa es la página sobre nosotros todo terminada, y si vuelves en el siguiente video, añadiremos algunos toques finales a nuestros sitios, además de hacer que el cuadro de búsqueda funcione dentro de WordPress. 71. Desarrollo del tema: Caja de búsqueda y toques finales: En este video, vamos a agregar algunos toques finales a nuestra página web, además de hacer que el cuadro de búsqueda en la sección de encabezado funcione correctamente. Por lo que actualmente si escribimos algo dentro del cuadro de búsqueda, nada funciona. Esto se debe a que es simplemente HTML simple. Entonces en este video, vamos a reemplazar esta búsqueda por una función de WordPress. Entonces vayamos a Google y busquemos WordPress, la consulta de búsqueda, y vayamos al Códice. Desplazemos hacia abajo y echemos un vistazo a los ejemplos. lo que este ejemplo muestra la consulta de búsqueda en un cuadro de búsqueda. Entonces voy a copiar el ejemplo, y luego ir al encabezado, y luego una vez en el header.php, necesitamos desplazarnos hacia abajo y encontrar la sección con el cuadro de búsqueda en. Busca el div con la clase de barra superior derecha, y luego dentro de la lista desordenada, pegando la función de la búsqueda de WordPress, vamos a deshacernos del buffer lateral ahora para darle más espacio. Entonces vayamos al sitio y luego actualicemos. Entonces ahora tenemos dos casillas de búsqueda. Una es la generada por WordPress, y tenemos nuestro propio cuadro de búsqueda. Ahora, tenemos que asegurarnos de que la versión generada por WordPress esté peinada de la misma manera que la nuestra. Entonces, vamos a repasar y hacer eso ahora. Entonces lo primero que se nota en las entradas de apertura para la búsqueda es que el tipo de entrada es texto, mientras que el nuestro es la búsqueda. Entonces que los cambios también coinciden. También tenemos un valor de marcador de posición, y este es el texto que aparece dentro de la caja. Entonces eso también está en el interior ahí. El WordPress So mips one es una entrada, mientras que el nuestro es un botón. Entonces cambiemos las entradas para ser botón ya que agreguemos esta etiqueta de cierre y botón. Copiemos el texto de búsqueda y peguemos eso ahí dentro. También tenemos el tipo de botón en lugar de enviar, así que agreguemos esto dentro también. También tenemos la clase en el botón, así que vamos a copiar eso y luego pegarlo también y guardar. Veamos cómo se ve hasta ahora. Está mirando mucho más como la versión terminada. Por lo que ahora movamos el botón de enviar para que esté en el lado derecho. Por lo que nuestra versión tiene las entradas y el botón dentro de las etiquetas de ítem de la lista, así que vamos a añadir estos también. Entonces la etiqueta de apertura y una etiqueta de cierre, y hacer exactamente lo mismo para el botón, copia eso y pega eso ahí. Eso lo necesitábamos ahora, así que eliminemos nuestros elementos de lista de nuestro sitio estático, y luego necesitamos agregar la lista desordenada con la clase de menú, que originalmente rodeaba los dos elementos de la lista. Entonces pon eso, y pegarlo encima del primer elemento de la lista. De hecho, podemos simplemente reemplazar el div ahí, y el div de cierre que ahora es la lista desordenada de cierre. Entonces limpiemos todo esto. Asegúrate de tener el formulario, la apertura y la etiqueta de cierre, y luego anidarla dentro ahí en la lista desordenada con la clase de menú y la etiqueta de cierre, el primer elemento de la lista, y luego el segundo elemento de la lista, y luego guarde eso. Ahora, cuando nos refresquemos, deberíamos conseguir que el cuadro de búsqueda esté en línea, y ahora se ve exactamente como lo hizo en la versión estática. Ahora hagamos una búsqueda y veamos si funciona. Busca hola, y ahora vamos a bajar. Dice nuestros resultados de búsqueda para hola, y como nuestra publicación de blog HelloWorld. Solo busquemos más, post, y luego iremos, dice nuestro nuevo post 3, nuevo post 2, número 1, y por supuesto el ejemplo de HelloWorld tiene word post ahí. Ahora cuando está en los contenedores, como lo hicimos en la única página de blog, porque cuando estiramos la página antes del ancho, los resultados no están centrados en el medio de la página. Entonces cuando esté en los contenedores a la página search.php, así que pasemos al index.php, y luego copiaremos la fila en el medio un div. Entonces copie estas dos filas, y luego vaya al search.php, que es la plantilla de página para mostrar los resultados de búsqueda. Entonces exactamente como lo hemos hecho en la sola página, pegarlo solo sopla el encabezado, y luego cierra los dos divs justo después de la sección primaria, la primera y luego la segunda. Guarda eso y luego refresca. Ahora el contenido se está moviendo dentro del contenedor. Nuevamente, al igual que hemos hecho con el single.php, vamos a añadir la barra lateral al lado derecho, vuelta a la página de índice, y luego bajar a la parte inferior, y luego copiar la barra lateral, que es un completo div con la clase de medio 3, luego en la página de búsqueda y pega estos entre los dos divs que acabamos de agregar. Debido a que esto tiene la función get side debar, podemos eliminar la barra lateral get desde la parte inferior de la página, y luego echemos un vistazo a los resultados de búsqueda, y eso está todo hecho. Entonces ahora hay una barra lateral en el lado derecho. Voy a blog post o buscaré resultados todos en los contenedores correctos. A continuación, voy a pasar a enlazar en el logo a la página de inicio. Entonces si hacemos click en los minutos, nos llevan a una página 404, que es una página no encontrada. Por lo que ahora necesitamos agregar una función de WordPress para vincular el logotipo a nuestra página de inicio. Esto simplemente se hace en el header.php. Entonces si busca el elemento de lista con clase de texto de menú. Los audífonos Pro son un nombre en la esquina superior izquierda, por lo que en lugar de vincularse al index.html, que es una página que ya no tenemos. Quitemos esto y luego abrimos las etiquetas php, etiqueta de cierre php. Se pone en su propia línea para que sea más legible, php, y luego vamos a eco, y la función que necesitamos es escape URL, que es esc_url, y luego los corchetes, y luego dentro del corchetes está la función que necesidad, es home_url. Esto enlazará a la URL de inicio del sitio web y un punto y coma. Vamos a revisar eso, así que refresca. Ahora si hacemos clic en el logotipo o título del sitio web, eso no parece funcionar, y así vamos a ver qué pasa. Empecemos con el cibernético para conseguir más espacio. Eso es solo un error tipográfico ahí, así que el signo de interrogación dentro de ahí, vamos a guardar eso, y luego refrescarnos. Entonces si hacemos click en el logo o en el título de la esquina, ahora nos llevan de vuelta a la página principal. Voy a agregar una función PHP más. En lugar de tener el título de auriculares pro, queremos que WordPress construya política y dinámicamente. Entonces pongamos esto en una línea separada. Abre una función PHP, y la función que queremos es echo get_bloginfo, y la información del blog que queremos es el nombre de los blogs, y no olvides el punto y coma, para luego guardar eso y refrescar la página. Entonces, en lugar de un título codificado, esto agarra el nombre del sitio que hemos ingresado, que podemos ver dentro del personalizador, luego hasta la identidad del sitio. Entonces este es el título que fueron jalados. Por lo que sólo vamos a eliminar eso y ahorrar. Esto cambiará el título, así que vamos a cambiarlo de nuevo, y luego guardemos eso. Lo último que queremos ver cambiar son los colores de los enlaces, por lo que al minuto los colores de los enlaces se han cambiado todos a morado, lo cual no encaja con el resto del tema. Entonces vayamos a las herramientas de desarrollo y busquemos el selector. Entonces ve a Inspect. Entonces seleccionemos el ítem que queremos cambiar. Vamos a arrastrar esto hacia arriba. Por lo que podemos ver en las herramientas dev que los enlaces, que es una visitada, tienen el color del morado. Vamos a entrar en nuestras hojas de estilo personalizado y asegurémonos de que esto se cambie. Entonces style.css, y tenemos que bajar directo a la misma bomba. Entonces en nuestro estilo personalizado, ya tenemos las etiquetas a y también los estados a hover. Entonces vamos a añadir un visitado justo por encima del estado de flotación. Simplemente copiaremos el color de los enlaces novedosos y luego refrescaremos. Por lo que me deshago del color morado. Echemos un vistazo al blog también. Bien. Entonces si se han eliminado todos los eslabones morados. Genial. Entonces ese es el final de la sección, y así podemos convertir un sitio web normal para que sea un tema de WordPress. Por lo que espero que hayan disfrutado de esta sección. Ahora, sigamos con el resto del curso. 72. Multisitio de WordPress: Introducción: Bienvenidos a todos a esta nueva sección. Esta sección se trata de presentarte a la red WordPress o función Multisite. Esto es realmente útil si quieres crear más de un sitio, o permitir que otras personas creen un sitio como parte de tu red. Todos estos sitios están controlados por la misma instalación de WordPress. Por lo que podrías administrar todos los sitios desde el mismo panel de control. Una o dos cosas solo para hacerte consciente antes de que sigamos. El primero es usar una función Multisite, sí necesitas alguna forma de publicación web en vivo, porque la función Multisite de WordPress no juega bien con el anfitrión local. Hay una solución-alrededor disponible, y quiero colocar un enlace en la pantalla a una guía, si sí quieres intentar y darle una oportunidad a eso. No obstante, si posiblemente lo puedes hacer, te recomendaría usar un servidor web en vivo. Lo siguiente es, por supuesto, al usar un servidor web en vivo, también necesitarás tu propio nombre de dominio. Podemos recoger un nombre de dominio y también algún host en bastante bajo precio, si solo quieres usarlo para la sección. No obstante, no te preocupes si habilitas para completar esta sección porque no tienes el hosting. Siempre puedes volver a esta sección en el futuro si quieres configurar un Multisite en un servidor en vivo. Para el resto de esta sección, voy a estar usando un proveedor de hosting llamado Bluehost. Esto está disponible en bluehost.com. Puedes utilizar cualquier proveedor de alojamiento web que prefieras. No estoy afiliado a Bluehost de ninguna manera. Simplemente encuentro que son realmente buenos para WordPress e incluso se recomiendan en WordPress.org. Entonces eso es todo. Si sí tienes algún alojamiento web, sigamos adelante y continuemos con el resto de la sección. Nuevamente, no te preocupes si no puedes completar esta sección porque no tienes que hospedar, esta sección siempre estará disponible para el futuro. Pasemos ahora al siguiente video, echaremos un vistazo a lo que es un Multisitio, algunos buenos casos de uso y ejemplos, y también algunos casos de cuándo evitar usar el Multisitio. Sigamos adelante y echemos un vistazo a eso ahora. 73. Multisitio de WordPress: ¿Qué es un multisitio?: Una característica realmente grande de WordPress, que ha estado disponible a partir de la versión 3.0, es la capacidad de crear una red de sitios web aprovechando la función multisitio. A lo largo de esta sección, vamos a crear una red de sitios web, que básicamente es más de un sitio web, que todos comparten la misma instalación de WordPress. La red real no se ve muy diferente a lo que hemos estado haciendo hasta ahora. Pero una vez que habilitamos los multisitios, sí tenemos varias opciones diferentes disponibles para nosotros, como agregar nuevos sitios web que queremos controlar dentro de la red, permitiendo el acceso a estos sitios web mediante la asignación de administradores, y también decidir qué plugins y qué temas nos gustaría poner a disposición para cada sitio web. Actualmente estoy en el Códice, dentro de la sección Crear una Red. Como puedes ver, una red multisitio puede ser muy similar a tu versión de WordPress.com. Wordpress.com es una página web a la que echaremos un vistazo en tan solo un momento, que permite a las personas crear sus propios sitios web o su propio blog. Efectivamente, todos los sitios web que puedes crear en WordPress.com son todas partes de una red. Si quieres leer más sobre la creación de una red, solo tienes que buscar Crear una Red dentro del Códice y serás llevado a esta página. No obstante, todos los pasos que se incluyen en estos sitios web, vamos a seguir a medida que avancemos por esta sección, por lo que obtenemos una sensación práctica de cómo hacerlo exactamente. A continuación, sólo voy a dirigirme al Blog de Temas Elegantes. Dentro de ese blog, hay un artículo que se llama 15 Amazing WordPress Multisite Examples in the Wild. Simplemente haz una búsqueda rápida en Google, estoy seguro de que podrás encontrarla. Este sitio web pasa por algunas de las mejores instalaciones multisitio, que no podías encontrar en la web. Justo como se esperaba, el primero que me viene a la mente es Wordpress.com. Se trata de una plataforma multisitio que ha existido desde hace bastante tiempo. En realidad tiene miles de sitios web los cuales están habilitados como partes de la red. Wordpress.com permite a cualquiera unirse a esta red y crear su propia página web o su propio blog. Es realmente simple y fácil de usar. Si acabas de dirigirte a WordPress.com, es realmente sencillo empezar con estos diversos planes diferentes. Para habilitar un sitio web de WordPress, es realmente sencillo como seleccionar tu dominio, tu tema, el precio y plan con el que te gustaría ir, y puedes empezar desde ahí. Volver al sitio web de Elegant Themes, echaré un vistazo a uno o dos más. Uno de un sitio web grande que utiliza el multisitio de WordPress es el sitio web de la BBC America. Este sitio web en particular tiene cada espectáculo en su propia página web. Cada uno de estos sitios web utiliza un tema infantil y todo se puede administrar por separado, si es necesario, o podemos asignar varios administradores a un grupo de sitios. Desplazándose hacia abajo, también tenemos las páginas de blog de The New York Times. Dice que tiene más de 60 blogs, así que eso significa más de 60 sitios web separados, todos siendo parte de la misma red WordPress. Como puedes ver, hay algunas empresas bastante grandes que utilizan la función multisitio de WordPress. Pero al igual que con cualquier característica o cualquier pieza de software, siempre hay algunos pros y contras y multi-sitio no hay diferencia. Siempre va a haber ocasiones en las que es bueno usar y cuando no es del todo adecuado para ti. Echemos un vistazo a algunos usos multisitio y también algunos de los inconvenientes. Puedes crear tu propia red de blogs o sitios web ya sea para uso personal o empresarial. Si tienes tu propio blog personal y es posible que tengas varios nichos diferentes y quieres mantener separados estos diferentes intereses, puedes hacerlo usando una red. También es posible que tengas un negocio y quizá quieras que algunos de estos departamentos o secciones de negocios tengan su propia página web o su propio administrador, y un multisitio es ideal para eso. De acuerdo, entonces el sitio web de tu empresa requiere diferentes secciones gestionadas por diferentes equipos. Este es un ejemplo que es similar al ejemplo de la BBC America que acabamos de ver, donde diferentes secciones como un espectáculo diferente, pueden ser manejadas por diferentes equipos o pueden requerir un estilo diferente, o un tema diferente, o un diferente conjunto de plugins. Otro buen caso multisitio podría ser un negocio con múltiples sucursales o ubicaciones diferentes, que desea administrar de forma independiente, o puede que también desee permitir que alguien cree su propio sitio web, ya sea que se trate de un sitio web gratis o una suscripción de pago. Este caso es similar a WordPress.com que acabamos de ver antes, donde podemos invitar a los usuarios finales a unirse a nuestra red y crear su propio sitio web. Por supuesto, hay muchos más en los que estoy seguro que se puede pensar, pero el último que he incluido en este ejemplo es para hospedar sitios web de clientes. Después de construir un sitio web para un cliente, es posible que desee incluir su sitio web como parte de su propia red. Después de que lo construiste, puedes seguir cuidando el sitio web o administrándolo, así como todos los demás sitios web que forman parte de tu empresa u agencia. Todos los demás simplemente quitan parte del control a algunos de los usuarios finales. También brinda muchos beneficios, como puedes actualizar todos tus sitios web al mismo tiempo, que incluye el núcleo de WordPress o cualquier tema o plugins que hayas instalado, tales buenas razones para usar un multisitio de WordPress. Ahora, echemos un vistazo a algunos contras o algunas razones para no usar un multisitio. El primero es bastante obvio. Si solo necesitas un sitio web y no tienes ningún plan para más ni para ninguna expansión, obviamente una instalación estándar de WordPress está más que bien para eso. Si tienes un sitio web y quieres poder gestionar tus propios temas o gestionar tus propios plugins, entonces un sitio web independiente es definitivamente el camino a seguir. O si tu sitio web tiene una buena razón para requerir su propia base de datos, ya sea por seguridad o por cualquier otra razón, entonces un multisitio no es necesariamente una buena opción. Si tu sitio web es hackeado o si tu sitio web está caído por alguna razón en particular, esto significa que todos los sitios individuales de la red caídos porque todos comparten la misma instalación de WordPress. Es posible que algunos plugins no funcionen bien en una red multisitio, eso es algo que hay que vigilar. Antes de pasar por las razones para agregar todos los sitios web de sus clientes al multisitio, también puede encontrar que un cliente en particular puede tener su propio hosting o puede querer tener más control sobre el sitio web. El último motivo por el que he enumerado es que puede que no tenga acceso o los permisos necesarios para editar los archivos que se encuentran en su servidor web, y esto causará un problema al activar el multisitio. Echaremos un vistazo a exactamente qué archivos son estos en los próximos videos. Ahora, pasemos a entrar en nuestra cuenta de hosting y activar el multisitio de WordPress. 74. Multisitio de WordPress: Activar una red de WordPress: Bienvenidos de vuelta chicos. En este video, vamos a echar un vistazo a cómo podemos activar nuestro multisitio de WordPress. Como mencioné al inicio de la sección, voy a estar usando una cuenta de hosting en vivo de Bluehost. Por supuesto, puedes usar cualquier anfitrión que prefieras. Pero quiero estar pasando por estos videos con una cuenta de Bluehost. Si estás usando un proveedor de hosting diferente, es posible que tengas que dar uno o dos pasos diferentes solo para seguir adelante. Pero muchos proveedores de hosting diferentes tienen una instalación de WordPress de un solo clic. Esperemos que no debas tener demasiados problemas siguiendo. Actualmente estoy ingresado a la cuenta. Dentro del panel de administración de Bluehost, hay una conveniente aplicación de herramientas de WordPress, que hacemos clic en la parte superior. Entonces una vez que estés dentro de las herramientas de WordPress, tenemos que hacer clic en la “Nueva instalación”, y se te debe dar la opción de seleccionar un nombre de dominio. Tengo disponible nombre de administrador de dominio llamado reactacademycause.com. Quiero estar instalando WordPress en este dominio. El camino que puedes dejar en blanco a menos que quieras agregar una sub carpeta para instalar WordPress dentro. Pero sólo lo voy a dejar en el dominio principal. El título del sitio, y todo el resto de las opciones son bastante autoexplicativas. El título del sitio, debo llamar a la mía Multisitio. Para los efectos de la demostración, quiero agregar un nombre de usuario y contraseña sencillos de multisitio y multisitio para la contraseña también. Por supuesto, los sitios web en vivo necesitarán una contraseña más fuerte. Después agrega en tu e-mail, y luego tenemos que hacer clic en “Instalar WordPress”. Esto solo toma unos momentos para instalarlo, y esto es solo una instalación estándar de WordPress, como si estuviéramos cuidando el resto del curso. No es diferente a los tres primeros proyectos que creamos, pero lo estaremos convirtiendo en un multisitio muy pronto. Pero por ahora, haga clic en “Refrescar”. Eso debería ser, ese es nuestro WordPress instalado en nuestro propio dominio. Para probar, solo voy a pasar a la URL, y luego tenemos que ir a iniciar sesión. Selecciono multisitio, multisitio también, luego inicio sesión. Eso significa que todos estamos listos para irnos. Tenemos el tablero o el back end de WordPress, que todos deberían estar familiarizados ahora. Yo sólo voy a dar click, no necesito ninguna ayuda sólo por ahora, sólo para deshacerme de esa página. Iré a buscar en el panel de WordPress. Si da click en el icono de inicio en la parte superior izquierda, entonces tomaremos en nuestra página de inicio. Es solo una página de inicio en blanco por ahora. Ahora tengo una instalación exitosa de WordPress. Ahora para convertir esto en un multisitio, necesitamos encontrar algunos de los archivos a editar. Si volvemos a nuestro proveedor de hosting, y si pasamos a la pestaña de hosting, y entonces voy a entrar en el cPanel, que está justo debajo. Tu proveedor de hosting nuevamente, podría ser ligeramente diferente, por lo que solo encontramos una manera de entrar en el cPanel. Entonces voy a desplazarme hacia abajo hasta la sección final, que acaba de estar aquí. Después hago clic en el “Administrador de archivos”, luego todos los archivos para todos WordPress están en public_html. Deberíamos ver algunos archivos y carpetas que son familiares desde nuestras secciones localhost. Lo primero que tenemos que hacer es encontrar el archivo wp-config. Si nos desplazamos hacia abajo y encontramos wp.config.php. Voy a resaltar este archivo y luego subiré a la parte superior donde hay un editor de código. Haga clic en eso y luego seleccione editar. Ahora abriremos el contenido del archivo config. El primer paso que tenemos que hacer es desplazarnos hacia abajo, y luego necesitamos encontrar la línea que diga, eso es todo, dejar de editar. Justo por encima de esta línea, necesitamos escribir una línea de código. Empezar por definir dentro de un conjunto de corchetes y las cotizaciones. Voy a escribir WP_ALLOW_MULTISITE, y luego una coma, y luego vamos a establecer esto en true con punto y coma al final, y luego hacer clic en el botón “Guardar” en la parte superior para guardar el archivo, y luego simplemente cerrar. Entonces ahora último, vamos a dirigirnos a nuestra página web, y luego dar click en “Refrescar”. Entonces un touchstone, dirígete a las herramientas, deberías ver aparecer una nueva opción, que es la configuración de red. Haga clic en eso, y esto nos lleva a la red configurada. Lo primero que tenemos que hacer es desactivar los plugins. Basta con dar click en el enlace, que está ahí. Sólo tengo un plug-in para desactivar, así que basta con dar click en eso. Entonces una vez hecho eso, podemos regresar a nuestra app de redes dentro de las herramientas. Ahora tenemos una pantalla diferente. Ahora estamos en el proceso de instalación de la red. Tenemos algunas opciones donde necesitamos decidir sobre la estructura de URL de nuestro sitio web. Para esta demostración, voy a estar usando subdirectorios. Me aseguraré de que eso esté seleccionado ahí. Un subdirectorio es nuestra propia URL seguida de una barra inclinada hacia adelante, y luego el nombre de nuestro sitio web. Podrás tener subdominios, que es igual que la demostración anterior, donde tendremos el nombre del sitio seguido de nuestra URL. Si no quiso usar la opción de subdominios, es posible que deba activar subdominios comodín. Para ello, es posible que deba consultar con su proveedor de hosting o la documentación para obtener instrucciones de cómo hacerlo. Pero por ahora, voy a dar clic en subdirectorios. No obstante, ten en cuenta que esta opción sólo está disponible en nuevas instalaciones de WordPress. Si tu instalación es un mes más antigua, te verías obligado a usar la opción de subdominios. Sólo ten eso en cuenta. Desplazarse hacia abajo va a mantener el título de la red como sitios multisitio, y luego hacer clic en “Instalar”. Ahora WordPress nos da algunas líneas de código que hay que agregar, primero que nada al archivo wp-config que miramos antes, y luego al archivo htaccess. Comience dentro del archivo config, haga clic en las líneas de código que necesita en, y luego copie estas. Después vuelve a nuestro Administrador de Archivos y luego edita el archivo wp-config.php. Haga clic en “Editar”, y luego desplácese hacia abajo igual que antes también, eso es todo. Después pega esto en y luego haga clic en “Guardar”. Busca el primer botón, y al siguiente necesitamos agregar algún código al archivo htaccess. Copia el código y luego vuelve al Administrador de Archivos. Entonces con dentro del public_html, un problema que puedes encontrar es por defecto el archivo htaccess no es visible. Es posible que deba consultar con su proveedor de hosting para obtener detalles de cómo encontrar el archivo htaccess. Si está utilizando Bluehost, que también oculta el archivo, puede agregar una cadena al final de la URL, que es el símbolo ampersand. Después mostrar oculto es igual a uno, y luego volver. Entonces deberías encontrar dentro del archivo público, ahí está nuestro htaccess, dar click en eso, y luego editar. Entonces el código que acabamos de copiar, necesitamos pegar entre el módulo IF y luego terminar en etiquetas de módulo IF. Elimine todos los predeterminados y luego pegue en lo que acabamos de copiar, haga clic en “Guardar”. Entonces ahora si todo va bien, deberíamos poder ir a nuestro dominio, presionar “Refresh”, y luego iniciar sesión. Entonces una vez que estés de vuelta dentro del tablero, tendremos una nueva opción en la parte superior, que son mis sitios. Enhorabuena si tienes mis sitios apareciendo en la parte superior de la navegación. Esto significa que la configuración de la red fue un éxito y ahora tienes acceso al administrador de la red. Ahora tienes acceso al administrador de la red. Dejaremos ahí este video. Pasaremos ahora al siguiente video, echaremos un vistazo a cómo podemos agregar sitios a nuestra red. 75. Multisitio de WordPress: Añadir sitios a una red: A estas alturas deberíamos tener habilitada la red Multisite, con tu proveedor de hosting. Si no tienes la opción Mis sitios disponible en la barra de navegación superior, asegúrate de volver atrás y completar los pasos antes de continuar con este video. Así que sabemos que éste se colocará sobre el icono de Mi Sitio en la parte superior, tenemos el Administrador de Red, y también tenemos nuestro sitio web WordPress Multisite, y este es el único sitio web que tenemos disponible en la red. Este es el sitio principal de la red. Pongamos a trabajar en agregar un nuevo sitio a nuestra red. Dentro del panel, haga clic en “Mis sitios”, Administrador de redes, y luego abajo a Sitios, y luego una vez que se cargue, haga clic en “Agregar nuevo” en la parte superior. Tenemos la opción de agregar un subdirectorio, cual habilitamos en el último video. Para efectos de esta demostración, voy a crear una tienda telefónica, y también una tienda de portátiles, dos sitios de red más. Entonces para la tienda telefónica, agreguemos la extensión URL de la tienda telefónica. El título del sitio también es Phone Shop, el idioma de su elección, y luego agregar en un correo electrónico. Por lo que puede que acabes de notar ahí al escribir el correo electrónico, el WordPress ha reconocido que se trata de un usuario existente, o de un administrador existente, y por lo tanto, la tienda telefónica que hemos agregado al panel de administración para este usuario. Al igual que dice golpe, si se ingresa una dirección de correo electrónico que no se reconoce, WordPress creará automáticamente un nuevo usuario para esta dirección de correo electrónico de administrador. Haga clic en “Agregar sitio”. Ahora si volvemos a Mis sitios en la parte superior. De nuevo, tenemos el Multisitio, que es la página web que teníamos de antes. También justo debajo, ya que me creé como usuario ingresando mi correo electrónico para la tienda telefónica, también aparece en mi lista de sitios sobre los que tenemos control. Sigamos adelante y creemos uno más. Por lo que de nuevo en el Administrador de Red, agregue Sitios, vaya a Agregar Nuevo. Entonces la tercera página web se va a llamar la tienda de laptop. En el título del sitio, pon esta vez dentro del correo de administrador, voy a agregar un correo electrónico diferente. Por ahora, sólo voy a hacer una. Entonces test@test.com, y luego haga clic en “Agregar sitio”. Ahí está nuestra tercera página web creada. Si volvemos a subir a la parte superior de Mis sitios, a diferencia de antes, no tenemos la tienda de laptops apareciendo en nuestro admin porque agregamos un correo electrónico de administración diferente para éste. En el siguiente video, echaremos un vistazo a los usuarios y también iniciaremos sesión en la pantalla de administración de la tienda de portátiles. Pero por ahora solo pasemos a nuestra URL, y solo comprobemos que los dos sitios adicionales están funcionando correctamente. Tenemos el curso de reaccionar academia. En primer lugar, echemos un vistazo a la tienda telefónica. Entonces, por último, vayamos a nuestra tienda de laptop, y luego le pegamos a “Enter”, y ahí vamos. Por lo que ahí está nuestra tienda de portátiles y nuestros sitios de red gratuitos están todos habilitados. Entonces así podemos agregar diferentes sitios a nuestra red, y los veré ahora en el siguiente video. Echaremos un vistazo a diferentes permisos de usuario y también al super admin. Entonces nos vemos ahí. 76. Multisitio de WordPress: Usuarios y el súper administrador: Bienvenido de nuevo a este video llamado Usuarios y el Super Admin. Para empezar, queremos dirigirnos al tablero. Si pasamos a Mis Sitios, y dentro del Administrador de Red, haga clic en el panel de control. Entonces si bajamos a la opción Usuarios, por lo que notamos eso, así como nuestro nombre de usuario. También tenemos el administrador de la tienda de laptop, que debería haber sido creado automáticamente por WordPress cuando terminemos hoy. Una dirección de correo electrónico diferente para nuestra tienda de portátiles. Una cosa que puedes notar es que tu propio Usuario puede tener la palabra Super Admin justo después de ella, y esto es diferente a la administratoral a la que estamos acostumbrados cuando creamos un solo sitio web de WordPress. Vamos a ir a Google. Si vamos al códice, y luego roles, y luego capacidades, deberías ser llevado a este enlace del códice de WordPress. Por lo que nos desplazamos hacia abajo, podemos ver un resumen de los diversos roles dentro de WordPress. Por lo pronto, en este curso, al construir el proyecto, hemos tenido como papel principal al administrador. El administrador es alguien que tiene acceso a todas las funciones de administración dentro de un solo sitio web. No obstante, ahora tienen un nuevo rol que es el super admin. El super admin es alguien con acceso a todas las características de administración de la red del sitio y también a todas las demás características. Por lo que efectivamente, el super admin se ocupa de toda la red de sitios. Esto también significa que el rol de administrador no tiene exactamente los mismos privilegios, lo que tiene dentro de un solo sitio web. Esto está relacionado con cosas como temas y plug-ins. Veremos estos con más detalles en el siguiente video. Pero por ahora, volvamos al tablero. Si nos fijamos en el segundo usuario que es para la tienda de portátiles, si hacemos clic en el usuario, tenemos todos los ajustes habituales para editar un usuario. Lo primero que notas es, si te desplazas hacia abajo, se ha establecido el nombre de usuario, y no se puede cambiar. Sí tenemos la opción de otorgar al usuario permisos super admin, si queremos, pero lo primero que queremos hacer es desplazarnos hacia abajo y luego crear una nueva contraseña. Para que esto sea sencillo, solo voy a llamar a esta laptop multisitio, para luego confirmar el uso de la contraseña débil, y luego actualizarlo. Entonces voy a pasar a nuestro login. Así que cierre sesión, por lo que el super admin ya está cerrado. Ahora quiero iniciar sesión como tienda de laptop, luego como multisite-laptop. Por lo que ahora estamos registrados en el área de administración para la tienda de portátiles independiente. Si vamos a Mi Sitio en la parte superior, ahora estamos en el control de un solo sitio por parte de este usuario, que es la tienda de laptops, ninguno de los controles que teníamos como super admin, como la capacidad de agregar sitios extra. No obstante, hacemos clic en los usuarios, vemos que nuestro usuario tiene la función de administrador, por lo que podemos realizar la mayoría de las tareas habituales de administración del sitio que vimos antes, como agregar páginas, cambiar configuraciones, y también gestionar comentarios. No obstante, faltan algunas cosas como la capacidad de agregar nuevos temas y plug-ins, y esto es algo que vamos a echar un vistazo con más detalle en el siguiente video. 77. Multisitio de WordPress: Complementos y temas: Vamos a iniciar este video viendo agregar temas a nuestra red. Esto necesita ser instalado por el super administrador y puede ser puesto a disposición de todos los sitios de la red, o en un sitio por sitio. También buscaremos plugins en este video, pero empezaremos por mirar los temas. Algo que te puede resultar útil para este video y también para el próximo par de videos, es que he ingresado como dos usuarios. En el lado derecho, he abierto un navegador diferente. En mi caso estoy usando Firefox, y he usado esto para iniciar sesión como Laptop Shop o uno de nuestros Administradores de Red. Es posible que te resulte mucho más fácil tener una segunda navegación abierta e iniciada sesión como uno de los sitios de la red. Usando el navegador Chrome normal, estoy conectado como el super administrador. Para que podamos cambiar entre los dos, no necesitamos iniciar sesión o cerrar la sesión todo el tiempo. En primer lugar, echemos un vistazo a cómo habilitar un tema para que esté disponible para toda la red. Como superadministrador, si voy al Panel y luego Mis sitios, Administrador de redes, y luego abajo a Temas, tenemos la lista de temas disponibles y también las opciones Agregar Nuevo. Voy a entrar ahí y puedes buscar cualquier cosa que me guste, así que solo voy a buscar el tema Storefront que hemos utilizado en este curso. Este es uno de los proyectos de comercio electrónico. Simplemente colocaré el cursor sobre eso y luego haga clic en “Instalar”. Una vez hecho eso, sabrás que el botón Instalar cambia a Habilitar red. Este botón pone un tema a disposición de todos los sitios de la red, así que vamos a hacer clic en eso. Nos devuelven a la lista de temas disponibles. Ahí está nuestro tema Storefront que acabamos de habilitar, y también tenemos la opción de deshabilitar la red si alguna vez queremos hacer eso en el futuro. También lo mismo con todos los sitios que se instalan por defecto, también tenemos la opción de habilitar y deshabilitar esos. Si solo queremos añadir un tema para que se habilite para ciertos sitios, también podemos hacer eso. Si volvemos a Agregar Nuevo, y de nuevo solo elegimos tema extra, vamos por el tema espacioso del primer proyecto, y luego una vez que se encuentre, pulsa “Instalar”, pero esta vez no hacemos clic en Activar red, porque sólo queremos que esto esté disponible para ciertos sitios. Ahora está instalado. Si volvemos al Administrador de Red, y luego a nuestra lista de sitios, si bajamos a nuestra Tienda de Laptop y luego pasamos a Editar, y luego seleccionamos la pestaña Temas, haré una lista de los temas disponibles que podemos habilitar para el sitio. Está en la parte superior, decimos es temas habilitados para la red. No se muestran en la pantalla. Eso es por razones obvias porque el tema ya está disponible para todos los sitios de la red, por lo que no necesitamos habilitarlo desde esta pantalla. Para la Tienda de Laptops, habilitemos el amplio tema. Ahora eso está hecho. Si vamos a nuestro segundo navegador, vamos a Apariencia y luego Temas, tenemos el tema predeterminado de 2017, tenemos el tema Storefront, que está siendo habilitado en red para todos los sitios, y también hemos habilitar el amplio tema. Sólo intentemos deshabilitar el amplio tema como el super admin, y luego intentemos refrescar y tenerlo listo. Ahora sólo tenemos disponible el tema predeterminado y el tema habilitado para la red. Esta es una forma de controlar exactamente qué tema queremos tener disponible para cualquier sitio dado. Ahora echemos un vistazo a agregar plugins a nuestra red, y al igual que cuando se usan temas, los plugins también necesitan ser instalados por el super admin. En primer lugar, comencemos activando un plugin para toda la red, así que vuelve a nuestro administrador principal. Tienes que ir a Mis sitios y luego Administrador de redes. También hay una opción Plugins, así que solo entramos ahí y de manera similar a antes, pincha en “Añadir nuevo”. Ahora para esta demostración voy a ir por el plugin Jetpack. Buscaré Jetpack, y esto es lo que queremos por Automattic, y luego Instalar Ahora. Tan solo da un momento para instalar. Entonces una vez hecho eso, obtenemos el mismo botón Activar red. Voy a dar click en eso. Después nos llevan de vuelta a nuestra lista de plugins. En cada uno de los plugins instalados, también tenemos la opción de Activar red o Desactivar red. Ahora este plugin en particular está activado en red. Está disponible para todos los sitios de la red, pero no puede ser eliminado por los administradores del sitio individuales. Volvamos a ti, nuestra Tienda de Laptops y luego actualicemos. Ahora en el dashboard, tenemos la opción de plugin Jetpack, como lo haremos en todos los sitios de la red. Esto es ideal si queremos que el plugin esté disponible para todos los sitios de la red. Pero si solo queremos un plugin habilitado en algunos otros sitios, necesitamos hacer las cosas un poco diferente. Volver al super admin, vamos a instalar un nuevo plugin yendo a Agregar Nuevo. Voy a agregar un plugin llamado Avanzado Custom Fields, y luego buscaré eso. Simplemente lo instalaré, pero esta vez, una vez que esté todo hecho no haremos clic en el botón Activar red. Podemos activar este plugin en un sitio individual por sitio, yendo a Mis sitios. Entonces si bajamos a uno de los sitios bajo nuestro control, así que vayamos a la Tienda Telefónica y luego pinchemos en el “Panel”. Podemos bajar a los Plugins, y luego está el plugin Advanced Custom Fields cual tienes la opción de activar. Una vez que eso está activado, sólo se habilita en el único sitio web para el que lo hemos activado. En nuestro caso, es la Tienda Telefónica. Algunos de ustedes pueden notar si vamos a Mis Sitios, sólo tenemos el Multisitio y la Tienda Telefónica disponibles bajo nuestro control. No hay opción ahí para ir al tablero de instrumentos de la Tienda de Laptop. Esto se debe a que necesitamos sumarnos como administrador para la Tienda de Laptop. Ahora podemos hacer esto fácilmente yendo al Administrador de Red, y bajando a Sitios. Si vas a la Tienda de Laptops y haces clic en “Editar”, podemos ir a la pestaña Usuarios en la parte superior, y entonces todo lo que tenemos que hacer es ir a Agregar Usuario Existente, y el nombre de usuario. En mi caso es el multisitio, así que solo daré clic ahí y me daré un rol, así que voy a pasar a Administrador, Agregar Usuario. Ahora si vamos a Mis Sitios, en la parte superior, ahora tenemos el control total de nuestros tres sitios de nuestra red. Esto también nos permitirá entrar en el panel de control y habilitar plugins para cada uno de los sitios individuales. Esto sólo puede estar haciendo como el super admin. Como puedes ver si pasamos a la Tienda de Laptop, igual que el administrador estándar, no tenemos la opción en el panel de control para seleccionar los plugins, como lo hacemos sobre el lado izquierdo. Ahora también somos administrador en la Tienda de Laptop. Tenemos la opción de ir ahora a Mis Sitios. Ya ves que la Tienda Laptop ya está habilitada, lo que nos permitirá entrar en el panel y podemos hacer cosas como agregar los plugins. Vamos a los Plugins, y agreguemos los Campos Personalizados Avanzados y activemos eso. Después vuelve a la Tienda de Laptops, y luego refresca. Debido a que acabamos de iniciar sesión como administrador, no tenemos la opción de plugins en el panel. No obstante, sí tenemos el Jetpack y ahora también el plugin Custom Fields, porque esto ha sido habilitado por el super admin. Eso es más o menos. Esa es una visión de cómo podemos agregar temas y plugins para nuestra red. Ahora pasemos al siguiente video donde te mostraré cómo permitir que los usuarios registrados agreguen sitios web a nuestra red. 78. Multisitio de WordPress: Permitiendo a los usuarios añadir sitios web a la red. Parte 1: En este video, vamos a echar un vistazo a permitir que los usuarios registren en otro sitio a nuestra red. Si vamos a uno de nuestros sitios web en nuestra red, y de nuevo, igual que en el último video tengo dos navegadores web abiertos. Tengo Google Chrome en el lado izquierdo, y estamos logueados como el super administrador multisitio. En el lado derecho, he abierto Firefox. Tengo sesión en la tienda de portátiles como administrador estándar. Si pasamos a la tienda de portátiles real y visitamos el sitio, una cosa notarás si nos desplazamos hacia abajo en la barra lateral, hacia abajo en el asunto, tenemos la opción de iniciar sesión y cerrar sesión e ir a cosas como la pantalla de administración, pero no tenemos la opción de registrarnos como nuevo usuario. Esta es una configuración de redes de WordPress por defecto y es algo que podemos cambiar fácilmente. Entonces de vuelta en la pantalla de super admin, si voy a mis sitios y al administrador de la red, y luego abajo a la configuración, debería haber una opción para la configuración de registro. Si solo te desplazas hacia abajo, esto nos da cuatro opciones diferentes. El primero es el registro está deshabilitado. Esto significa que no se pueden crear nuevas cuentas de usuario cuando un usuario visita nuestro sitio web. La segunda opción es permitir el registro de cuentas. Si cambiamos esto y luego bajamos a ahorrar. Entonces si pasamos a Firefox, y, si logramos cerrar sesión y luego solo pasas al sitio web y desplázate hacia abajo hasta la barra lateral. Ahora, tenemos la opción de registrarse así como de iniciar sesión. La tercera opción es permitir a los usuarios que han iniciado sesión crear un nuevo sitio en la red. Esta opción restringe la creación de nuevos sitios web, pero sólo por usuarios que hayan iniciado sesión y que tengan una cuenta. Esto significa que como super admin tenemos la opción de solo dar cuentas a personas autorizadas para configurar nuevos sitios en la red. Entonces, por último, tenemos la opción de permitir que cualquiera se registre como usuario y también para crear un sitio web en nuestra red. Esta última opción es una que vamos a estar usando para permitir que cualquiera se incorpore a nuestra red. Asegúrate de que se haga clic en la última opción y luego baja para guardar los cambios, y luego volver a Firefox. Ahora bien, si vas adelante y te registras como nuevo usuario. Si agrega un nombre de usuario y también una dirección de correo electrónico, sobre la que tiene control, pues deberá hacer clic en un enlace de activación para habilitar al nuevo usuario. También tendrás la opción de crear un nuevo sitio de red. Pero por ahora si solo haces clic en la opción solo para crear un nuevo usuario, seguiremos adelante y crearemos el sitio una vez que regreses. Adelante y crea un nuevo usuario y regresa en unos momentos. Ojalá hayas registrado un nuevo usuario y activado el correo electrónico. Si avanza e inicia sesión como sus nuevas cuentas de usuario. Después pasas a tu perfil haciendo clic en el nombre de usuario en la esquina superior. Me llevan al tablero y verás que el tablero no tiene muchas opciones. No hay opción de añadir tus propios sitios. Si queremos agregar nuestro propio sitio, necesitamos agregar wp-signup.php justo en la parte superior después la URL y esto nos lleva a una pantalla donde podemos agregar un nuevo sitio a la red agregando una extensión a la URL y también agregando un título de sitio y por supuesto no muchos usuarios sabrán que necesitamos agregar esto al final de la URL. Por lo que para que sea un poco más fácil de usar, voy a añadir un enlace a la navegación superior para registrar un nuevo sitio. También hay muchas formas en las que podemos hacer esto, como crear widgets y agregar enlaces a varias partes de la página, pero solo voy a seguir adelante y agregar un enlace de menú. Como administrador, necesitamos hacer esto en el sitio principal de nuestra red. Entonces iré a mis sitios y luego a multisitio, que son los principales sitios de red, y luego al panel y luego si vamos a la aparición, luego abajo a los menús, voy a añadir un nuevo menú llamado navegación. Crea el menú. Tenemos que añadir este menú a la ubicación principal para tu tema. En el caso del tema que estoy usando, se llama menú superior. Entonces selecciona eso. Entonces si pasamos al menú de la izquierda, a los enlaces personalizados, vamos a añadir un nuevo botón de menú llamado sitios de audio. Entonces la URL está disponible justo en la parte superior ahí. Copia eso y luego pegarlo y luego agrega esto al menú. Ahí está nuestro botón que ha aparecido bajo la estructura de menús. Guardemos eso y actualicemos Firefox y [inaudible] nuestras opciones a otros sitios. Si solo pasamos al sitio web principal como nuestro usuario conectado, aún puedes ver que esta opción está ahí. Por lo que ahora podemos dar click en esto y luego ir a la página de inscripción. Esta va a ser la página de registro predeterminada que pueden ver los usuarios registrados. Si vamos a Chrome y visitamos nuestro sitio como el super admin y si bajamos para agregar tus sitios, ves que se ve similar, pero sí tenemos una o dos pequeñas diferencias, como es que te está alertando de que actualmente estamos permitiendo todas las inscripciones para que cualquiera pueda crear un sitio y también nos da una lista de sitios de los que ya somos miembro y luego las mismas opciones a otros sitios y también el título del sitio. Por lo que ahora nuestro sitio web está todo configurado para permitir que los usuarios registrados agreguen sitios a la red. Dejaremos ahí este video y continuaremos en el siguiente video, donde iremos adelante y registraremos un nuevo sitio a nuestra red. 79. Multisitio de WordPress: Permitiendo a los usuarios añadir sitios web a la red. Parte 2: Bienvenido de nuevo a la segunda parte de cómo permitir que los usuarios registrados agreguen sitios web a nuestra red. En la primera parte cambiamos la configuración como super administrador para permitir que nuevos usuarios se registren y también para crear un nuevo sitio web como parte de nuestra red. En el lado derecho, estoy conectado a Firefox como nuestro nuevo usuario registrado. Si aún no lo has hecho, haz click en, Añade el botón de tu sitio y serás llevado a esta pantalla. Lo primero que tenemos que hacer es agregar el nombre de nuestro sitio. Esta va a ser la extensión URL después de la URL principal para nuestra red. Quiero llamar a la mía WordPress Multisite Guide. Vamos a darle una URL de guía multisitio. El título del sitio llamado WordPress Multisite Guide. Entonces tenemos la opción de permitir que los motores de búsqueda indexen. Entonces sólo me voy a quedar como Sí. A continuación, haga clic en “Crear sitio”. Es tan simple como eso. Por lo que podemos ver la URL completa que nos lleva a nuestro sitio. Ahora si pasamos a nuestro Perfil y luego pasamos al Dashboard, ahora tenemos un panel de control de aspecto más familiar con las opciones de administración del sitio. Estas son todas las cosas a las que estamos acostumbrados, como la capacidad de agregar publicaciones, páginas, y todo dejar unas opciones generales de administración. Si vas a la cima en Visit Site, este es nuestro nuevo sitio web que acabamos de crear con nuestro título de sitio. No hay mucho para al minuto porque no hemos agregado ninguna personalización. Pero ahora deberíamos construir ver si volvemos al super admin, si pasamos al Dashboard y luego bajamos a Sites, deberíamos conseguir ahora la guía multisite listada como nuestro cuarto sitio web. Por supuesto como super admin también tenemos las opciones para editar el sitio web. También podemos quitarlo si queremos. Todavía tenemos control total sobre cualquier sitio de terceros. Por lo que al permitir nuevos usos para registrar sitios en nuestra red, posible que también deseemos personalizar cosas como correos electrónicos de registro y ajustes. Si pasamos al Administrador de Red, y luego bajamos a Configuración, así como la configuración de registro que miramos antes, tenemos algunas nuevas opciones relacionadas con el multisitio. Podemos personalizar la Nueva Configuración del Sitio. Esto incluye cosas como el Email de Bienvenida, que se envía a los usuarios registrados una vez que crean un nuevo sitio. Igual con el correo electrónico del usuario y varias otras cosas como nuevas publicaciones o nuevas páginas. Podemos agregar nombres dentro de aquí, separados por un espacio. Esto bloqueará a cualquier usuario registrado de crear el sitio web con estos nombres. Por lo que podemos reservarlos para nosotros mismos y por supuesto, cosas como admin obviamente está bloqueado porque necesitamos eso para iniciar sesión. Es así como podemos permitir que un usuario registrado cree un nuevo sitio web como parte de nuestra red. Por lo que sí espero que este video y sección te haya sido útil. Si aún no tienes un multisitio útil que quizá necesites en el futuro, y es útil saber cómo hacerlo. Entonces gracias y adiós por ahora. 80. Conferencias extra: Subir a un servidor en vivo: Bienvenidos a todos. Este video se trata de mostrarte cómo puedes poner tu sitio web de WordPress en funcionamiento en un servidor en vivo. Vamos a usar un plugin para hacer de este un proceso realmente simple y es posible exportar tu sitio web de un host local a un servidor en vivo en tan solo unos minutos. Entonces lo primero que debes hacer, si quieres poner tu sitio web en vivo en Internet, es comprar algún alojamiento web, y también necesitarás un nombre de dominio. Entonces para este tutorial, voy a estar usando el cPanel y también las instalaciones de WordPress One-Click, que están disponibles con los proveedores de hosting más populares. Por lo que necesitas iniciar sesión en la cuenta de hosting. Voy a ir a manejarlo, y lo llevaremos al cPanel. Entonces, dependiendo de cuál sea tu proveedor de hosting, es posible que encuentres que se ve un poco diferente a esto, pero todo lo que necesitas hacer es buscar la instalación de WordPress One-Click. Por lo que bajo las aplicaciones web, quiero hacer clic en WordPress y esto va a poner WordPress en mi nombre de dominio elegido. Por lo que voy a dar clic en instalar esta aplicación. Voy a salvar la mía a la wordpressacademycourse.com. También puedes cambiar varias versiones, y también hay muchas opciones diferentes, pero voy a dejarlas como predeterminadas. Voy a agregar un administrador y también una contraseña @ e-mail. Está bien. Entonces el título del sitio web y el tagline, solo voy a dejar estos como están por ahora, porque vamos a importar todos los datos de nuestro localhost. Entonces no necesitamos cambiar eso y luego voy a dar clic en instalar y solo dejar que eso haga es cosa. Entonces recuerda que algunas instalaciones de un solo clic son un poco diferentes a ésta, pero estoy seguro de que podemos arreglarlo. Así que solo dale a eso unos momentos para instalarlo, e iré a buscar la aplicación WordPress instalada. Entonces ahora, voy a pasar a una nueva pestaña, y escribir mi nombre de dominio. Entonces wordpressacademycourse.com, y ahí vamos. Entonces ahí está nuestra instalación de WordPress, y ese es el tema predeterminado. Entonces solo voy a entrar en la sección de administración, así que agrega una slash hacia adelante y luego admin al final, y luego inicia sesión con tus datos. Ahí vamos. Está bien. Entonces porque estamos importando toda la información que necesitamos para este sitio, solo voy a dar click en no gracias. Tomado directamente en el tablero de instrumentos. Está bien. Busca la configuración de WordPress ahora en el servidor en vivo , y acaba de obtener una instalación predeterminada. Por lo que me voy a poner a trabajar con la exportación de los detalles de nuestra versión localhost. Entonces voy a entrar en la versión local, y seleccionar audífonos pro, y puedes hacerlo con cualquiera de los sitios web que construimos, y luego entrar a admin, y luego tenemos que bajar a plugins, y luego añadir nuevo. Entonces si solo buscas la migración WP Todo-en-Uno, y esto es lo que necesitamos por ServMask. Por lo que ya tengo instalado este plugin. Por lo que todo lo que necesitas hacer es hacer clic en instalar y luego activarlo de la manera habitual, y luego debes obtener una opción de menú en el tablero. Entonces si vas a la nueva opción en el tablero, y luego haces clic en las exportaciones y esto exportará nuestro sitio como un paquete, que luego podrás importar a nuestro sitio web en vivo de WordPress. Está bien. Entonces lo primero que sabes es que hay una instalación de encontrar y reemplazar. Para que podamos encontrar cualquier palabra que queramos en el paquete, y reemplazarla por otra cosa. Entonces si tenemos alguna información sensible, o quiere cambiar el nombre de usuario del administrador por ejemplo de root, podemos hacerlo aquí. También hay algunas opciones avanzadas, donde podemos dejar fuera varias cosas como spam, temas, y plugins que no quieres exportar, pero solo voy a dejarlo como predeterminado. Haga clic en exportar a, y quiero exportar el mío a un archivo. Por lo que solo voy a dar clic en archivo y dejar que eso haga es cosa, y luego una vez hecho eso, podemos hacer clic en el botón de descarga localhost. Ahora obtenemos archivo, guardado en nuestras descargas. Entonces sólo cerraré eso y luego vamos a ir a mi sitio web en vivo y luego hacer lo mismo. Entonces es plugins, agrega nuevos. Entonces todo en uno WP Migration, y luego instalar y activar, y luego esta vez tenemos que ir a las opciones, y luego ir a importar y luego encontrar el archivo que acabamos de descargar, y luego arrastrar esto al arrastre y caída y generalmente esto tarda un minuto en importar. Está bien. En breve recibimos un mensaje diciendo que esto anulará nuestras bases de datos, plugins, y temas, pero lo sabemos, así que haz click en continuar. Está bien. Entonces si todo va bien, deberíamos recibir el mensaje diciendo que sus datos se han importado con éxito. Por lo que ahora acabamos de tener dos pasos más que hacer. Una es que necesitamos guardar nuestros enlaces permalinks, así que haz clic en la configuración de los enlaces permalinks, y debería abrir una nueva ventana, y te darás cuenta si intentas iniciar sesión con los detalles que usamos cuando configuramos el WordPress en vivo instalación, que no podremos iniciar sesión usando esos mismos detalles. Esto se debe a que la importación que acabamos de hacer, también ha importado a nuestro usuario. Por lo que necesitamos usar los mismos detalles de usuario que usamos para el localhost. Entonces el mío era proheadphones-admin, agrega la contraseña, y luego inicia sesión. Por lo que ahora deberíamos estar conectado con los datos de usuario existentes desde el localhost y ahora necesitamos confirmar nuestra configuración de permalink. Entonces una vez que estemos contentos con uno de los formatos, solo tenemos que hacer clic en guardar cambios, y luego una vez que lo hayas hecho, podemos dirigirnos a visitar sitio y todo debería verse como lo hizo en el localhost, así que vamos a basta con echar un vistazo a la página de inicio, y todo se ve bien ahí. Por lo que la página del blog dice nuestras publicaciones de blog. Seleccione estos, y como la versión completa. The About Us page. Todo se ve bien. Solo agreguemos una nueva publicación y comprobemos que todo funciona bien. Por lo que nuevo post 4, realmente no importa por el contenido por ahora. También tenemos las imágenes en la mediateca. Entonces eso es bueno. Pongamos uno de esos y publicemos. Volvamos al blog, y como nuestra nueva entrada 4. Por lo que todo parece estar funcionando bien. Tan solo prueba la búsqueda. Sí, eso es genial. Entonces así es lo rápido y fácil que puede ser exportar tu sitio web desde un localhost a un servidor web en vivo, al usar un plugin como All-in-One WP Migration. Por supuesto que hay otras formas de hacerlo, como exportar nueva base de datos desde tu localhost, y también usar software FTP, pero esta es una forma realmente rápida y fácil de exportar tu sitio, y espero que te resulte útil para cuando estés listo para pasar de un localhost a un servidor web en vivo. 81. Conferencias extra: Complementos del tema niño del este (East child): Por lo que más temprano en el curso cuando creamos la playera Tienda. Creamos un tema infantil del tema de escaparate. Entonces cuando creamos un tema infantil, lo creamos manualmente, mediante la creación de la nueva carpeta del tema. Agregamos cosas como el archivo de funciones y también la hoja de estilos personalizada. Por lo que en este video, solo queremos mostrarte una alternativa rápida y fácil a crear temas infantiles mediante el uso de un plug-in. Si pasamos al tablero, y luego bajamos a plugins, y luego agregamos nuevos. Yo sólo voy a hacer una búsqueda de temas infantiles. Hay varios plugins diferentes que podemos seleccionar. Pero para este curso, solo voy a usar el creador de tema infantil fácil y haga clic en instalar ahora, y luego activar. Entonces al igual que teníamos muchos otros plugins, obtuvimos una opción en el tablero. Entonces lo que tenemos que hacer es ir a fácil, creador de tema infantil. Selecciona y crea un tema infantil, solo tienes que hacer clic en la pestaña Crear tema infantil. Todo lo que necesitamos hacer es, primer lugar, seleccionar un tema de padres. El tema principal que queremos puede ser cualquiera de los temas instalados, como el tema de escaparate. Podemos darle un título, como escaparate niño dos. Simplemente voy a dejar los detalles del tema tal como están y haga clic en crear. Entonces eso es todo, tema infantil creado con éxito. Si vamos a la aparición, y luego temas, te dejaré revisar que se está instalando. Ahí está nuestra tienda front child dos que acabamos de crear, hit activate. Después visitemos el sitio y veamos cómo se ve. Ahí está nuestro tema infantil del escaparate. Ahora puede ir sobre la personalización de la manera habitual, sin afectar a ninguna de las funcionalidades del tema padre cuando actualicemos. Si entramos en el personalizador, solo podemos verificar dos veces que estamos trabajando con el tema infantil adecuado. Si nos fijamos en la sección de temas activos, podemos seguir adelante y cambiar cualquiera de los detalles como lo hemos hecho anteriormente. Entonces esa es una alternativa rápida y fácil para crear temas infantiles. Gracias por ver, y nos vemos en el siguiente video. 82. Conferencias extra: Eliminar los datos de muestra y resetear nuestra base de datos: Una de las cosas que te piden bastante es una vez que concluimos nuestros datos de muestra o de nuestros datos de prueba temática en un proyecto, ¿cómo podemos entonces seguir adelante y eliminar esto? El tema de los datos de texto con toda la información que descargó dentro de un archivo XML. Esto nos da algún contenido de muestra para trabajar, como algunas entradas de blog de muestra y también algunas imágenes con diversas cosas como diferentes ofertas también. Si entramos en una entrada de blog, podemos ver estos diferentes comentarios en ella. Ahí diversos archivos, así como diferentes categorías y etiquetas también. La mayoría de esta información se agrega con el archivo XML, así como una o dos entradas de blog y páginas que se añadieron a0. De hecho, incluso hubo algunos enlaces de menú los cuales también se incluyeron con los datos de la muestra. Bueno, la forma de eliminar los datos de la muestra, hecho hay dos maneras diferentes. El primer camino es recorrer manualmente todos los posts, todos los menús, todas las páginas, y también todas las demás cosas como los medios, las imágenes que todas se han agregado y eliminarlas manualmente una por una. Por supuesto que esto lleva tiempo y es muy repetitivo. También hay un plug-in que podemos utilizar para eliminar todos estos datos. Palabra de advertencia aunque antes de empezar. Esto eliminará todo el contenido que has agregado a los sitios, no solo los datos de prueba de tema que se añadieron con archivo XML. También todas nuestras páginas y publicaciones también se perderán. Esto es básicamente un reinicio el ciclo del tema de vuelta a cómo empezamos. Voy a instalar un plugin. plugins [inaudibles] y luego agregar nuevos. Bajo plugin voy a buscar es, WordPress Reset. El que vamos a usar está justo aquí y es uno llamado WordPress Reset por Matt Martz. Adelante e instalemos ahora. Este Reset de WordPress restablecerá nuestra base de datos de WordPress a su predeterminada. Todas las personalizaciones y contenidos como acabamos de mencionar, se irán. Una vez que esté instalado selecciona “Activar” como de costumbre. Una vez hecho eso, ahora deberíamos ver debajo de la opción de herramientas, ahora tenemos un icono de menú de restablecimiento agregado. Seleccione esto y luego para completar el restablecimiento necesitamos escribir reset dentro del cuadro de entrada hacia abajo y luego haga clic en, “Restablecer”. De nuevo, ten cuidado con esto se eliminarán todos los contenidos de la base de datos y se restaurarán de nuevo a sus predeterminados. Sólo sigue y pulsa reset si esto es lo que quieres hacer. Voy a dar click en, “Está bien”. Este un momento sólo para borrar todas las entradas de base de datos y ahora voy a, Visitar sitio. Lo hemos llevado al tema predeterminado. Si volvemos al tablero y luego Temas, todavía podemos ver que nuestro amplio tema sigue disponible. Podemos Activar esto. Todos nuestros temas aún se conservan. Visita el sitio y así es como nuestro sitio luce como una nueva instalación. Si volvemos al tablero, como acabamos de ver ahí en los sitios, todos los posts y páginas que se añadieron eliminamos. Simplemente tenemos el mundo hola predeterminado como lo hicimos al instalar por primera vez. Es así como podemos eliminar todos los datos de muestra y todo el contenido de nuestra base de datos de WordPress para darnos un nuevo comienzo con el que trabajar. 83. Conferencias extra: Cómo crear un segundo proyecto utilizando el alojamiento de Siteground: Si utilizas el alojamiento web SiteGround, vez que hayas terminado uno de los proyectos de este curso, y necesitas pasar al siguiente; una forma fácil de hacerlo, es crear una nueva URL. Por el momento, si vas a “Mis cuentas” probablemente solo veas un enlace a tu página web. Podemos sumar una segunda. Si vas a “Agregar instalación manualmente”, y podemos iniciar un nuevo proyecto. Todo lo que necesitamos hacer es hacer click en el “WordPress Script” y luego dar click en “Instalar”. En lugar de esto, instalar de inmediato , nos da una opción para cambiar la URL de instalación. Prevalora nuestra URL actual. Podemos agregar un directorio al final. Dentro de aquí podemos agregar el nombre de nuestros nuevos proyectos. Si queremos proaudífonos, podemos añadir esto aquí. Podemos desplazarnos hacia abajo y podemos crear un nuevo administrador, agregar un nombre de usuario, y también una contraseña. Todo lo que tenemos que hacer es desplazarnos hacia abajo hasta la parte inferior y dar click en “Instalar”. Esto tardará entonces sólo unos momentos en instalar los nuevos sitios en la URL elegida. Una vez que esto esté completo, ahora obtenemos una nueva URL en la que puedes hacer clic y también el enlace admin. Si hacemos clic en “Mis cuentas” una vez más, también vemos el nuevo enlace y el enlace al panel de administración en aquí también. Podemos dar click en esto. Voy a abrir esto en una nueva pestaña. Ahora nos da un lienzo en blanco para comenzar nuestro próximo proyecto. 84. Gracias: Por lo que has llegado al final de este curso. Grandes felicitaciones de mi parte y deberías estar realmente orgullosa por llegar al final. Espero que hayas aprendido tanto, ahora puedes quitarte y usar en futuros proyectos propios. Por lo que hemos cubierto tanto terreno desde donde empezamos por primera vez. Empezamos con el blog de desarrollo web, donde llamamos a los conceptos básicos de WordPress, como encontrar e instalar temas. También miramos cosas como agregar publicaciones y cómo obtener publicaciones existentes. Cubrimos diversos recursos, para encontrar y cómo incluir medios en nuestro blog. También trabajamos con agregar páginas a nuestro blog, como la página Acerca de Nosotros, la página Contacto y tratar con usuarios y comentarios. Aprendiste a agregar menús de navegación y luego pasamos a la siguiente sección y personalizamos aún más el sitio web agregando logotipos, fondo e imágenes de cabeza. Trabajamos con el personalizador y también trabajamos con widgets de página para auto la portada y también mover el blog a su propia página personalizada. Aprendimos a agregar deslizadores y también a agregar formularios de contacto. Después hacia el final de la sección, miramos diversos extras, como cómo mejorar la optimización de los motores de búsqueda y cómo hacer copias de seguridad de nuestra página web, en caso de que ocurriera lo peor. Después pasamos a crear un segundo proyecto, que implica configurar una base de datos WordPress e instalar WordPress. También empezamos con Woo Commerce, tanto por la funcionalidad de e-commerce como también por el tema de escaparates. También echamos un vistazo a usar temas infantiles en diversas funcionalidades relacionadas con el comercio electrónico, como categorías de productos, etiquetas y atributos. Incluso miramos la creación de diseños flexibles usando Page Builder, incluirá los conocimientos básicos de PHP, que necesitarás para convertir un sitio web HTML y CSS a un tema de WordPress que funcione totalmente y de gran aspecto. Esta sección se profundizó aún más en detrás de las escenas de WordPress y cómo se distribuyen las páginas de WordPress y cómo utiliza plantillas para organizar y mostrar páginas web. Así que adiós por ahora y ojalá, te veré de nuevo pronto en un futuro rumbo. 85. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización, y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más. Buena suerte, y ojalá, te veré de nuevo en una futura clase.