Manejo de Widget en Wordpress 2022

[Música] as bienvenido a este vídeo estaremos viendo cómo manejar los widgets en wordpress en su versión 6 si venimos ahora a la parte de escritorio si vengo al área de apariencia vemos que no está acá widgets es que a partir de ahora con el nuevo tema se maneja de diferente forma si vengo a tema este es con el que viene instalado en la actualidad twenty cuentito pero si yo activarse cualquier otro tema vemos que ya aparece el área de widget y los widgets aquí se manejan también como siempre en áreas pero acá tenemos que depender siempre del tema por ejemplo el tema que está activado ahora me dice que solamente tiene nada más que dos áreas en pie de página 1 y pie de página 2 nada más que ahí sí yo activo el otro acá entonces cuando vengo ahora la de de widget me dice que sólo disponemos en un solo pie de página pero cuando yo activo el tema que viene por defecto y ya no está el área de widgets entonces como vamos a manejar el mismo pues voy a ir a editar acá o personalizar o editor cualquiera de los dos me lleva al mismo lugar entonces ahora tendría lo siguiente tengo que elegir en qué área voy a querer en diferentes áreas hay plantillas para las diferentes áreas de nuestro sitio web entonces en primera instancia es para inicio lógicamente que aunque su nombre indica inicio pues hace referencia al lugar donde se van a ir acumulando los blogs los las entradas entonces nuestra área de blog por lo tanto esto lógicamente afecta sabemos que cuando manejamos wordpress si yo he establecido en lectura que en el home se va a activar las últimas entradas ahí van a estar las últimas entradas acá cuando habilitó esto entonces lo que yo vaya a cambiar ahí va a afectar tanto a en la parte del inicio como ahí mismo se acumula las entradas entonces siempre va a afectar a las últimas entradas pero si yo establezco acá que hay una portada en este caso se llama inicio he creado con inicio puede tener cualquier nombre o sea he creado una página llamada inicia a inicio y una página llamada blog aquí se acumulan las entradas y esta es la página del home por lo tanto cuando nosotros modificamos inicio estamos modificando el área del blog como yo establecido que el inicio va a estar una página aquí estática entonces en otro lugar establecido que se va a ir acumulando acá noticias del blog por lo tanto cuando modificó inicio solamente estoy modificando el área de blog y si voy a cambiar y voy a decir que se acumulan en inicio todas las entradas entonces ahora estaríamos modificando inicio para eso sería esta página por lo tanto esto está estaría listo para esa área para el área de blog luego tengo otra plantilla o sea otra configuración para el área del eso al 404 cuando no encuentra una url o para donde se encuentran los archivos las categorías y etiquetas acumulados otra plantilla diferente tendríamos otro para la página estática otro cuando buscamos utilizamos el buscador existe otra página por ejemplo si pongo entrada esta es otra plantilla entonces todas estas son así para la entrada individual por ejemplo se ingresó a una de las noticias por ejemplo de deporte este es el área de los archivos ingresó a uno de estos este es el área de la plantilla única con esto lo que queremos dar a entender es que ahora los widgets vamos a poner en el lugar que nosotros queramos entonces donde queremos ya no estamos limitados ahora en espacio e incluso puedo poner widgets en la área superior de la cabecera en el área del footer tanto el área de la cabecera como el área del pie de página estarían aquí en partes de plantilla cabecera y pie de página entonces yo puedo poner también widgets en ambos lados todas estas plantillas que acabamos de indicar están jalando lo están arrastrando desde aquí su cabecera y pie de página la misma cabeza de pie de página la misma cabeza del pie de página y así sucesivamente para todas estas plantillas por lo tanto si yo quiero en el área donde van a ir las entradas hago clic en inicio y puedo poner acá un blog entonces puedo poner un área exclusivamente para el mismo por lo tanto si vengo acá tendría área de contenido tengo una plantilla de entradas de navegación y todo lo demás dentro de esto y veamos muy bien yo podría acá estamos tenemos tres áreas cabecera cuerpo y pie de página antes insertar antes y yo puedo poner acá por ejemplo he creado un nuevo bloque acá está mi nuevo bloque y yo le digo que esto quiero acá columnas entonces puedo poner así hay elementos de columnas o en todo caso puedo venir aquí y decir en el área de diseño quiero columnas y acá vemos que ya puedo crear mi área por ejemplo para el de contenido a la izquierda va a estar un 70 por ciento y un 30 por ciento para el widget hago clic entonces aquí y ahora ya tengo dos columnas en la primera voy a poner tan sólo un señuelo significa algo que supuestamente estaría ahí temporalmente igual en la parte derecha agregó un párrafo y agrego una letra solamente para saber que están las columnas ya creadas columna 1 columna 2 la columna hemos dicho 1 es del 70% de ancho y esto del 30% entonces yo como he puesto un señuelo acá estoy indicando que hay un algo dentro de la columna esta lista de contenido simplemente le arrastró a esa columna y ahora elimino acá lo que sería el párrafo el señuelo lo mismo puedo hacer en esta columna ahora en la columna derecha en la del 30% ya puedo poner lo que yo quiera no olvidemos que estas columnas puedo decir acá que sea incluso un grupo puedo crear para esta columna para que me dé un espacio mucho más ancho sí guardo vengo actualizo acá vamos a guardar lo vamos a venir a la parte donde estaría el blog ahora si acá estaría nuestro contenido y a la derecha no tenemos nada entonces en la derecha puedo comenzar a agregar elementos en la columna número 2 esta es mi área de widgets acá he puesto un párrafo pero puedo convertirlo en otra cosa como un encabezado o sea un título por ejemplo puedo poner ahí calendario guardo vengo actualizo y aquí tendría un área de calendario yo quiero que toda la columna se distinga de este otro para que sepa que es un área de widget un sí de bar entonces a toda la columna número dos seleccionó y acá lo cambio de fondo en el área acá de bloque y lo cambio de fondo y le digo que quiero gris ahora lo guardo vengo actualizo y acá estaría el gris pero todos los elementos están muy seguidos a su espacio a su contorno lo que voy a hacer es simplemente acá en relleno poner por ejemplo 120 píxeles y lo guardo voy a actualizar acá tendría mucho más espacio a la izquierda y a la derecha entonces incluso puedo poner un 25 píxeles guardo vengo actualizo y está un poquito mejor espaciado nuestro elemento muy bien ahora puedo poner lo que quiera por ejemplo he puesto un encabezado llamado calendario entonces aquí estaría el calendario y seleccionando adecuadamente el nombre acá que dice encabezado y le digo insertar después ahora puede insertar ahí por ejemplo un calendario de entradas entonces sí estaría guardo vengo actualizo acá estaría mi calendario de entradas me indica que esta fecha es donde tiene entradas muy bien y puedo poner todo lo que necesito por ejemplo calendario lo puedo para que se vea mucho mejor hay alinear al centro e incluso ponerlo otro color acá un fondo por ejemplo negro y el texto blanco y si en caso tendríamos un link acá puede activar el enlace está desactivado vemos que no está con esa línea como estas y el enlace selecciono y le digo blanco vemos que cuando pongo un fondo mucho espacio me genera puedo por ejemplo decir que sea tamaño 4 lo guardo vengo actualizo gastaría quiero un poquito menos acá el 3 guardo vengo actualizo ahora encaja perfectamente y es el encabezado de calendario entonces puedo poner lo mismo abajo y de hecho aprovechó este que ya existe vengo acá selecciono adecuadamente y le digo duplicar y con esto recordó uno más abajo luego digo insertar después de encabezado que voy a insertar pues cualquier cosa de los bloques puedo poner un párrafo un encabezado como hemos visto una cita a puedo poner a imágenes una galería de imágenes audio vídeo fondo realmente cualquiera así que el potencial ya no está limitado a lo que antes teníamos en y jets ahora realmente es una gran cantidad de elementos e incluso tenemos un apartado acá está el apartado de diseño mucho más abajo apartado de widgets son cosas dinámicas por ejemplo los archivos entonces calendario hemos puesto por ejemplo categorías elijo y ahora en el encabezado acá lo pongo categorías guardo vengo actualizo acá estaría categorías y éstas son las que manejamos y hago la misma acción selecciono encabezado vengo acá duplicó con esto esto lo hago uno más abajo ahora inserto después y ahora nuevamente puede insertar todo lo que me permite los bloques no solamente del área de widget solo que el área de widget son más dinámicas por ejemplo las últimas en los últimos comentarios últimas entradas puedo hacer clic ahí tendríamos las últimas entradas muy bien y voy a cambiar acá y voy a decir novedades ahí y veamos que si selecciono últimas entradas puedo configurar las acá como se van a ver por ejemplo el contenido puedo mostrar lo o no voy a decir mostrar el nombre del autor la fecha puedo decir la imagen destacada y solo el título nada más que el título muy bien y acá puedo decir qué categoría quiero que se muestre acá por ejemplo economía entonces solo de economía nada más las noticias se va a ver y el número de elementos vemos 1 2 3 4 y 5 son los 5 nada más y vengo y guardo vengo actualizo acá tendría novedades y las noticias y puedo seguir poniendo más todavía entonces selecciono después en encabezado aquí digo duplicar con esto arrastró y luego lo digo acá y en este caso insertar después y vengo y voy a decidir qué insertar no tenemos muchas cosas hemos dicho por ejemplo lista de páginas también un buscador un por ejemplo de iconos de redes sociales entonces hago clic y acá está y cuando hago clic acá vamos a ver mucho más arriba acá estamos trabajando entonces cuando hago clic puede insertar facebook hago lo mismo instagram nuevamente lo mismo twitter está otra vez selecciono pongo youtube y por último dictó cada uno de estos ahora no tengo su enlace pero voy a poner una almohadilla para decir como si tuviese un enlace muy bien tiene que dirigido a la página en cuestión los links guardo vengo actualizo a gastar y en lugar de novedades voy a poner social media o redes sociales pero actualizó a gastaría redes sociales esto quiero el centro entonces selecciono todo esto y le digo acá quiero al centro guardo actualizo y está el centro entonces de esa manera puedo poner pero qué pasa que ahora estaría en el lugar de los blogs y vengo a inicio no está en el inicio porque aquí no hemos dicho en lectura acá no hemos dicho que inició este en en la parte del home si yo lo digo que si este las últimas entradas en el home cuando vengo pues ahora si se encuentra en el inicio el aquí esto muy bien entonces pero solamente en el área de inicio que también simultáneamente es el área de las entradas si solamente está en el juego nada más acá por ejemplo cómo voy a hacer esto para poner al resto por ejemplo en nosotros si vengo no se encuentra cada una página estática no se encuentra si vengo esto también es una página estática una página estática acá también está si por ejemplo vengo al área de inicio acá voy a entrar a uno independiente tampoco está a una entrada individual e incluso si entrase a una categoría acá vamos a ver en blog voy a poner en el menú acá o acá tenemos ya una categoría si entro vemos que no está el widget en el en el en la entrada suelta individual si venga una categoría tampoco está a cargo y jett si vengo a buscar voy a decir entrada tampoco está acá y de hecho aquí en entrada no está no encontramos nada este es parte del widget acá no encontramos nada entonces tampoco en determinadas áreas por ejemplo en cuando cuando hacemos un error 404 tampoco estaría muy bien es desde el footer no nos olvidemos tiene doble como doble footer pero no está acá donde nosotros queremos internamente voy a cambiar el fútbol para que sea un poco más sencillo muy bien acá está la cabecera acá está el reuters el pie de página entonces acá no tenemos lo que sería nuestro widget hemos dicho tampoco tendríamos en un en una entrada individual no tenemos el widget tampoco no tenemos en las categorías entonces cómo puedo poner yo puedo poner en el aire que quiera y en el en las páginas sueltas tampoco no está entonces cómo voy a decidir si vengo acá en plantillas acá ya puedo decidir el inicio acabo de crear los ingresos todo este grupo es para widget de hecho toda esta columna que hemos creado acá en el segundo caso la segunda columna y acá puedo esta columna decir que quiero acá o todos estos elementos agruparlos o reutilizarlos lo que voy a hacer es agrupar de la siguiente manera selecciono aquí apretó un solo clic con el botón izquierdo del ratón voy a apretar shift sin soltar voy al último y clic con el botón izquierdo del ratón ahora si lo suelto es seleccionado todo esto podemos también apretar la tecla control y clic con el botón izquierdo del ratón no olvidemos que no estamos soltando la tecla control y voy seleccionando así aunque en esta versión no me está dejando seleccionar dos o tres voy a hacer como hemos hecho con shift sin soltar shift a primero agua camps le apretó skip sin soltar luego a gordo clic aquí al final y se ha seleccionado todos ellos en el primer de los elementos o acá también da lo mismo estos tres puntos acá y lo puedo decir agrupar o lo mismo acá acá ya está listo también para poder agrupar pero lo que voy a hacer acá es agrupar ya estaría en un solo grupo todas estas columnas y vengo observo el inicio no ha afectado absolutamente nada hemos dicho que podemos utilizar en cada una de las áreas diferentes widgets pero por cuestión de tiempo lo vamos a poner el mismo entonces voy a venir y ha guardado esto en este caso lo agrupado ahora lo que voy a hacer es acá la parte donde estamos este grupo entero y lo que voy a decir es añadir a bloques reutilizables y le voy a decir widget 1 y lo puedo guardar muy bien entonces ahora ya estaría lo puedo guardar también cuando vengo a plantillas el siguiente sería lección 404 entonces cuando genera un error acá uno encuentra la url lo puedo poner o no entonces si vengo a 404 puedo decirle que sea un widget diferente o el mismo que acabamos de generar vamos a ejemplificar solamente en esto widget diferente y no solamente a la derecha puede ser a ambos lados oa la izquierda entonces hacemos la misma acción que esto por lo tanto si puedo decir aquí nuestros tres puntos insertar después o antes da lo mismo entonces voy a decir ahora añadir o destacar cualquiera de los dos lados es igual y digo añadir acá una columna y cual voy a elegir esto lo hemos dicho también esto a ambos lados puede haber widgets o solamente a la izquierda o solamente a la derecha se ejemplificó con la izquierda hago clic y ahora tengo aquí un 30% ya que un 70% nuevamente hago la misma acción que ese instante pongo un señuelo solamente para saber que hay un elemento ahí acá también pongo un señuelo un párrafo y pongo simplemente acá en este párrafo un elemento nada más a camisa indicando que hay un paso ahora todo este grupo lo arrastró dentro de esta columna dentro de acá y ya estaría así que este párrafo señuelo lo eliminó no lo necesito acá ya puedo comenzar a insertar todos mis elementos la columna he dicho para distinguirlo un poco puedo poner cualquier color de fondo e incluso un rojo cualquier color no hay problema entonces puedo ponerlo por ejemplo un celeste lo puedo poner bien claro o un verde muy claro solamente para distinguir muy bien esto no lo toco estoy acá trabajando en lo que sería la columna número uno la que sería el widget entonces acá lo voy a convertir en encabezado y digo por ejemplo lo voy a decir en este encabezado que sean un buscador muy bien y iniciar después vengo y digo buscador acá tengo un bus todo si vengo y guardo vengo actualizo acá estaría mi área leemos hemos dicho que no tiene que estar muy pegado a muchos si le gusta pero se ve un poco extraño entonces selecciono toda la columna vengo acá toda la columna a que sería la 1 y vengo acá el relleno voy a poner 25 píxeles guardo actualizo a gastar y ha espaciado muy bien entonces no olvidemos que no estamos obligados aquí a que los las columnas acá que estamos manejando sean todas siempre igual entonces yo manejo una columna la anchura por ejemplo en píxeles puedo cambiarlo acá si digo la columna uno quiero mucho más angosto acá entonces en la anchura vemos que está al 33% sólo quiero el 25% automáticamente el otro se va a extender y lo va a descontar ahora si vengo actualizo vemos que esto solo estaría el 25% muy bien entonces lo voy a dejar así puedo seguir poniendo todo lo que ya sabemos aquí por ejemplo puedo poner selecciono después del buscador e incluso este mismo y pongo insertar después lo cambió el nombre en este caso voy a eliminar voy a duplicar voy a recoger un espacio en vez de buscador que diga demos una demostración e insertar después ahora sí y lo pongo acá vídeo por ejemplo uno de youtube o uno de que yo ya tenga en el biblioteca de medios busco tengo uno solo y digo seleccionar guardo vengo actualizo y acá tendría entonces así sucesivamente puedo poner otro widget diferente sin necesidad de someternos al primero que habíamos creado si retornó al inicio acá tenemos nuestra propia área de widgets entonces no está siendo afectado por el otro muy bien ahora vamos a hacer lo siguiente voy a venir otra vez a plantillas ya hemos visto en inicio y en esos 404 por ejemplo en archivo en archivo hemos dicho cuando venimos acá por ejemplo el primer la primera entrada acá hasta la categoría estilo y vemos que no tiene su billete entonces acá vengo a archivo y ahora pongo widget nuevamente haciendo la misma acción que hemos hecho por ejemplo vengo acá y digo insertará antes selecciono columnas y digo qué tamaño de columna quiero por ejemplo en esta oportunidad otra vez va a estar a la derecha acá para el área de widget el 70 30 no sea 70% izquierda 30% derecha hago clic y ya te pongo un señuelo solamente para saber que tiene contenido lo mismo acá un párrafo como señuelo acá están mis columnas y párrafo diseño muy bien este grupo entero lo arrastra la primera columna que sería 70 por ciento acá y eliminó el párrafo de señuelo acá eliminar y ahora en el segundo de los casos veamos aquí voy a insertar antes sólo puedo eliminar esto no hay problema hago clic en esta pequeña opción o acá hemos dicho que da igual entonces es reutilizable tengo una área que se llama widget hago clic y ya está acá sí guardo vengo actualizo acá estaría ahora en el grupo donde se acumula por ejemplo el área de widget todo el contenido de widgets si yo modificó algo en este momento también va a afectar al otro que sería en inicio estamos manejando ahora archivo pero si vengo a inicio es el mismo widget si cambio en inicio o lo cambio en archivo entonces se va a ver afectado en todos ellos en todos los lugares donde he puesto el pse utilizable esto que acabamos de insertar a quien se utilizable en uno como puedo hacer para que yo cambie ahora aquí este widget y no afecte al sexto entonces lo que yo puedo hacer es venir acá y decir acá vamos a ver si está aquí convertir a bloque normal hago clic y ya está visualmente no ha sufrido ningún cambio pero ahora las modificaciones que yo haga aquí no va a afectar en todos los lugares donde yo haya puesto este elemento reutilizable muy bien entonces lo que voy a hacer ahora es por ejemplo solo he puesto el contenido entonces en la columna número 2 lo puedo poner otro fondo diferente aquí por ejemplo voy a guardar voy a venir voy a actualizar vemos que el color de fondo es diferente acá en la parte derecha muy bien entonces de esa manera podemos poner widgets en todos los lugares acá por ejemplo hemos dicho esto no estos dos no lo estamos utilizando acá por ejemplo en página esta es la página que estaban utilizando estas dos no página única acá por ejemplo ahora se ingresa una de estas páginas como servicios vemos que no tiene widget en wordpress generalmente en las páginas estáticas nunca utilizamos widgets pero yo puedo ponerlo en el área de buscar también sea acá busco por ejemplo noticia vemos que no tengo widget si puedo ponerlo acá y procedemos como acabamos de indicar en entrada individual ésta es la que está siendo utilizada entonces su ingreso a una noticia como ésta por ejemplo en la parte derecha no tiene miedo en la parte izquierda en la parte superior también ingresó y procedo como acabamos de indicar poniendo columnas en la parte que yo decida poner mi contenido o utilizar un elemento reutilizable