🖐️ Selector de objetos, contenido dinámico, imagen con click o acción, wordpress 153, tutorial

🖐️ Veremos como hacer un selector de objetos mediante el cual se cambiará dinámicamente el contenido de nuestra pagina web wordpress. Este canal pertenece al curso de wordpress del canal SYSPA SOCIAL en español.

👉 WEB: www.syspasocial.com
❤️ Suscribirse: https://www.youtube.com/syspasocial?sub_confirmation=1 />🎁 INVITAME UN CAFE – www.syspasocial.com/invitame-un-cafe
⚜️ CONVIERTE EN MIEMBRO Y DISFRUTA LOS BENEFICIOS:
https://www.youtube.com/channel/UCXyiy_JwLlcMFr2fI2LYIpA/join

Recuerda el LIKE 👍 y la CAMPANITA 🔔

➡️ Facebook: https://www.facebook.com/Syspasocial-103660867785535
➡️ Twitter: https://twitter.com/syspasocial
➡️ Instagram: https://www.instagram.com/syspasocial
➡️ Telegram: Busca el canal SYSPA SOCIAL y pulsa en UNIRTE

👓VÍDEOS RELACIONADOS:

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
https://youtu.be/XSVOPcTtfik?list=PLNCtZfDFuwLt_6_FZurA_ht_cG4ICprbe />
🖐️ como hacer tu pagina web con elementor PRO 2022, wordpress 50, tutorial o curso español.
https://youtu.be/7g8cfKxKRA8?list=PLNCtZfDFuwLt_6_FZurA_ht_cG4ICprbe />
🖐️ Estilo y Configuración Global de tu sitio web, wordpress 142, tutorial español.
https://youtu.be/ibvHt6jx7Kk?list=PLNCtZfDFuwLt_6_FZurA_ht_cG4ICprbe />
🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.
Analizamos paso a paso, todos los detalles del hosting que nos brindará un 10% de descuento, ssl y dominio gratis.

Ya sabes, si queres aprender algo sobre wordpress, busca en youtube: SYSPA WORDPRESS [TEMA]

Puedes buscar este video con estos HASTAGS:
#wordpressdinamico #wordpressselector

DESCARGAS Y CODIGO:

https://syspasocial.com/selector-de-objetos-contenido-dinamico-imagen-con-click-o-accion-wordpress-153-tutorial/

TE GUSTARÍA CREAR TU VIDEO JUEGO GRATIS!, SUSCRIBITE A CHAMUYO TUTORIALES – https://www.youtube.com/chamuyo

——————-TRANSCRIPCIÓN——————

Hola fanáticos sociales soy si hay en este tutorial de wordpress vamos a aprender cómo crear un selector de objetos que nos va a permitir tener un contenido o una página web dinámica porque vamos a lograr que seleccionando clickeando en determinados componentes mont se modifique el contenido de la web y muestra algunos objetos que antes.

Estaban invisibles les recuerdo que le seguirá diciendo durante mi vídeo a que se suscriban al canal se suscriban la campanita me dejen un comentario y obviamente un like como siempre agradezco muchísimo a todos aquellos que me invitan un café por medio de página web que por suerte cada vez son más y obviamente les me envío un abrazo enorme.

A todos los miembros de mi canal que me dan su apoyo incondicional dicho todo esto iniciamos me encuentro dentro de un sitio wordpress de prueba como administrador lo primero que vamos a hacer acá es crear una nueva página así que hubiera páginas añadir una nueva porque estamos acá le vamos a dar un nombre para mi caso va a ser selector de.

Objetos con elementos vamos a pulsar en publicar una es que hacen esto pulsan en publicar nuevamente aguardamos unos segunditos a que quede la página creada y una vez que ya está lista obviamente como dice el nombre va a ser con elementos así que voy a pulsar en editar con elementos y tenemos que aguardar nuevamente solo unos segundos a que se.

Abra el editor una vez que estamos aquí adentro ante todo debe ser la aclaración que hago siempre no es la idea este tutorial explicar toda la utilización de elementos quien quiera conocer sobre esto dijo aquí en las tarjetas un tutorial de cómo hacer toda una página web completa con elementos inclusive para los que ya lo hayan visto o los que.

Ya conozcan elementos tienen la versión nueva y recomiendo muchísimo que lo vean y también aprovechó y le voy a dejar también aquí en las tarjetas un tutorial para que aprendan cómo hacer toda una página web completa con elementos pro y nuevamente aunque hayan visto a la versión anterior esa versión de tutorial que estoy dejando es la actualizada.

Habiendo este hecho de estas aclaraciones vamos a avanzar con nuestra página web lo primero que vamos a hacer es insertar una nueva sección de dos columnas en este caso dentro de esta sección de dos columnas vamos a ir a los widgets vamos a tomar sección interior y en la columna izquierda vamos a insertar esta sección interior que lo que tenemos.

Que hacer ahora nuevamente en widget vamos a arrastrar una imagen en este caso sería la columna izquierda de nuestra sección interior vamos a arrastrarla una imagen y lo que tenemos que hacer ahora es buscar el contenido que vamos a utilizar para estas imágenes de donde vamos a obtener este contenido vamos a ir a mi página web en www y para.

Social puntocom van a bajar van a ingresar en la sección de wordpress una vez que estén aquí adentro como siempre van a tener acá todo mis tutoriales completamente página 2 son más de 150 el momento de realizar este tutorial recomiendo muchísimo que los investiguen y que los vean van a poder aprender muchísimo también pueden.

Filtrar por temáticas como elementos obviamente este de tratar dentro esta categoría formularios hosting de seguridad registro de usuarios y tienen un buscador que es maravilloso que acá con un par de palabras de algún tema que usted están buscando pueden encontrar lo que necesitan por ejemplo en este caso simplemente voy a poner la palabra.

Selector me van a aparecer varios tutoriales pero fíjense que acaba de tener selector de contenido dinámico este es el que estamos buscando vamos a clickear y vamos a entrar los asociado a este vídeo que se van a encontrar acá primero con obviamente el vídeo que estamos viendo el que entra por la página puede hacer de acá al vídeo para.

Tener un breve resumen un listado de los pasos que vamos a realizar van a tener también tutoriales relacionados a qatar el tutorial de elementos que les dije anteriormente recomiendo muchísimo que lo vean lo pueden hacer de acá de cómo contratar un hosting para mi maravilloso costo-beneficio es muy muy bueno y tienen acá un enlace para descargar lo.

Primero imágenes vamos a hacer clic esto nos va a llevar a mega como ven es muy muy rápido ya nos va a dejar lista la descarga pulsan en descargar esto también es un objeto extremadamente liviano así que muy rápidamente lo van a tener voy a pulsar mostrar en carpeta y lo que va a suceder es que es un archivo zip.

Así que va a ser botón derecho voy a poner extraer aquí y aquí vamos a tener entonces las imágenes listas para utilizar les voy a dejar varias para que las puedan tener disponibles voy a cerrar cierra la ventana de mega dejó el de la página web porque la vamos a utilizar y voy a volver a mi página.

WordPress entonces voy a seleccionar el contenido o la imagen voy a pulsar subir en archivos voy a poner seleccionar archivos me voy a la parte de descargas y acá teníamos las páginas web yo dije varias pero para nuestro ejemplo con que elijan spider-man iron man hulk y vamos a usar por ejemplo toro con éstas ya están.

Suficientes les dejé dos más si lo quieren hacer pueden hacer este mismo selector con más contenido yo le va a hacer con cuatro opciones por ahora estoy aguardando entonces a que se suban estas imágenes y la primera que va a seleccionar en este caso en la de spider-man así que voy a insertar a ella me va a quedar.

Disponible esta imagen vamos a hacerle un pequeño ajuste si me vengo a estilos fíjese que acá yo puedo cambiar lo que es el ancho lo voy a poner en 150 y voy a clickear acá en píxeles así me queda 150 píxeles como conjunta el tamaño deseado en el alto nuevamente también vamos a poner 150 una que tenemos entonces 150 píxeles por 150 píxeles.

El otro que voy a cambiar es el ajuste del objeto y lo voy a poner en contener y con esto entiendo que ya estaría todo en este caso me voy a ir a la parte de avanzado y en avanzado lo que vamos a hacer es el relleno ponerle 10 como para dejarle un espacio con eso pulso en actualizar ya tendríamos todo listo nuestra primera imagen lo que.

Teníamos que hacer ahora para generar nuestro selector de objetos es lo siguiente voy a copiar en primera instancia esta imagen la voy a pegar obviamente lo que tengo que hacer es reemplazarla así que vamos a elegir la segunda medir con ironman voy a forzar en insertar una que tenemos nuestra sección interior con las dos imágenes.

Sobre la sección interior van a hacer clic derecho y duplicar estos para vuelva a generar otras dos imágenes nuevas sin hacer todo el trabajo clique o en esta que sería la tercera vamos a seleccionar la imagen para este caso había seleccionar a thor vamos con la última hago clic en esta otra imagen pulsamos en seleccionar y.

Elegir a jalkh voy a pulsar en insertar ya tenemos esta sección digamos de exhibe la columna izquierda con nuestras cuatro imágenes obviamente para que esto tenga algún sentido vamos a arrastrar arriba una cabecera vamos a seleccionar que quede centrada y vamos a poner poner seleccionar personajes esto obviamente porque.

Imaginemos lo que es para un uso final de usuarios tienen que entender que esto son objetos seleccionables o se selecciona un personaje pulso en actualizar ya tenemos la primera parte creada vamos con lo que sería la columna derecha que en este caso van a ser los objetos de datos estos son los objetos para seleccionar las apuestas.

Seleccionables y estos van a ser los objetos de datos lo primero que voy a hacer es seleccionar la columna y voy a ir al avanzado y en relleno voy a poner un 5 esto como para darle como ven aquí un pequeño espacio dentro de esa misma columna lo siguiente que vamos a hacer es ir insertando lo que necesitamos vamos a ir a widget vamos a ir a sección.

Interior vamos a arrastrar una sección interior para este caso en particular voy a borrar una de las dos columnas simplemente quiero financiación interior con una sola columna y vamos a poner los objetos por un lado un encabezado lo vamos a poner ahí centrado aquí vamos a poner por ejemplo hombre araña vamos a ir estilo y lo que les propongo.

Es que en tipografía vamos a bajarle un poquito el tamaño a esta con esto yo creo que es más que suficiente vuelvo a widget y lo que voy a hacer acá es poner debajo un editor de texto para este caso en particular no voy a editar el texto si simplemente voy a replicar este contenido para que quede un poco más cargado pero para no perder tiempo.

No voy a hacer todo un texto editado en referente al hombre araña creo que queda claro que acá ustedes podrían poner lo que quisieran si lo importante es que voy a pulsar en actualizar y lo que hicimos fue crear una sección interior que tiene hombre araña con su contenido como creamos la del resto de los personajes nuevamente eso en la sección.

Interior para poner duplicar y qué vamos a hacer vamos a ir cambiando los nombres por ejemplo vamos a poner ironman insisto como no voy a crear para cada uno de ellos el contenido voy a pulsar en duplicar el texto adentro vamos a dejar igual vamos a crear la trasera que va a ser todo y vamos a pulsar nuevamente botón derecho duplicar.

Tenemos la sección interior la cuarta sección interior donde en este caso lo vamos a poner es jalkh excelente que es lo que nos terminó quedando entonces nos terminó quedando un selector de objetos que está a la izquierda y tiene además todo lo que sería estos textos o estas entradas que obviamente no van a estar todas visibles se van a mostrar según el.

Objeto que vayamos clickeando si bien esto después se va a auto acomodar porque esto lo que vayan a aparecer solo el texto que corresponda a una estas imágenes si quieren pueden aplicar o clickear aquí en la sección completa y en lo que es alineación vertical poner medio para que todo esto quede configurado en el centro insisto de.

Todas maneras acuérdense que no van a estar todas estas visibles voy a pulsar actualizar en este momento y vamos a hacer el siguiente paso que empieza a ser muy muy importante para que todo esto funcione y esto es darle los nombres que corresponden a cada uno de nuestros objetos como sería de clicker primero en lo que es la imagen de.

Spider-man hacemos clic fíjense que bueno esto pues es que estén en contra tenemos estilo y avanzado se tiene que estar en la solapa de avanzado y acá van a tener el aire de css y la clase s ss que es lo que vamos a hacer vamos a ir en el aire y dss voy a poner el nombre en este caso spider-man y en clase lo que voy a poner es clase selector esto.

Ojo porque lo tienen que dejar exactamente igual de última a ver si puedo dejarle en las páginas web en los nombres pero tienen que poner en los mismos nombres para que después el código funcione tiene que ser exactamente este nombre o mejor dicho tiene que tener una nomenclatura que después se mantenga no necesita ser.

Exactamente estos nombres pero sí tiene que tener cuidado de como lo hacen clases el lector tiene que estar exactamente igual acá le van a dar el nombre al objeto que ustedes quieran pero sean prolijo con entender el concepto tengo un nombre de objeto y una clase que es selector vamos a seguir con el segundo si me voy a ironman lo voy a.

Clickear me voy a ir acá lo que voy a hacer es poner común como nombre ironman insisto no es que necesitan sido si utilizar ironman se utilizará otro objeto pero si van a ver después qué tiene que ser prolijos en la forma de operar clase selector estos y manténgalo exactamente igual que la selectos lo tienen que mantener.

Exactamente igual vamos a ir con todo en este caso en particular vamos avanzado vamos a pegar todo nuevamente clase selector yo lo estoy copiando y pegando obviamente para que hacer un poquito más rápido vamos a jalkh en este caso vamos a ir a avanzado a darle el nombre que corresponde qué es jalkh y nuevamente la clase es clac.

Selector repito nuevamente la clase en particular tiene que ser este nombre tal cual como lo ven acá y los cuatro objetos tuvieron la misma clase css en cambio el nombre fue cada uno particular a uno de ellos voy a pulsar en actualizar y con eso le dimos las características y los nombres adecuados a nuestros electores que.

Tenemos que hacer ahora hacer lo mismo pero para los componentes que son los datos los que yo voy a visualizar entonces qué es lo que voy a hacer voy a agarrar la primera sección interior que hayamos creado del hombre-araña me voy a ir de vuelta avanzado y que lo que tengo que poner acá voy a empezar con la clase la clase también tiene que ser igual y.

Tiene que ser exactamente esta y se va a llamar clase data esto se va a repetir en los cuatro objetos y debe ser la misma y pongan esa misma y acá acá viene las características en lo que es el lady de css piense que acá dice data acá lo tienen el marcado y fuese spider-man que es lo que tiene que tener cuidado que esta segunda parte que está acá atrás.

Tiene que ser el mismo nombre que le dio este objeto es el cierto llamado de spider-man esto tiene que ser data spider-man siempre llamaba data pp por hacer un ejemplo concreto y que se entienda acaba de llegar dicha data pp y esa es la única característica las clases pongan la con el mismo nombre y los objetos les pueden dar cualquier.

Nombre siempre y cuando después acá respeten esta nomenclatura data y un nombre determinado en este caso data spider-man vamos con ironman nuevamente vamos primero con la clase en este caso voy a hacer al revés perdón acá tiene que seleccionar mi disculpa sea que tiene seleccionar lo que sería la sección interior no el objeto sección.

Interior seleccionada me voy a avanzado y ahora si veo acá la clase clase y recuerden cómo se llamaba el objeto ironman entonces en este caso el dato sea llamar data ironman si tiene data la palabra del mismo nombre que este otro vamos ahora si rápidamente pagamos todo voy a seguir en este caso con el orden inverso donde perdón nuevamente a la.

Sección interior no al objeto autor sino sección interior a cada toro me voy avanzado vamos a la clase vamos a pegar acá el nombre que como se llama bator se va a llamar data dor ahora sí a la sección interior no al objeto seleccionable y nuevamente a rango primero por lo que sería la clase pegando class data eso se repite en los.

Cuatro objetos vamos a darle el nombre si en este caso se llamaba jalkh es data holk con esto terminamos tenemos cuatro objetos con una misma clase y sus nombres particulares otros cuatro objetos que son secciones interiores con la misma clase y el nombre es data y repite cada uno de estos objetos esa es la forma de.

Asociar los de alguna manera ya estamos casi terminando lo último que nos está faltando es debemos pegar un código que nos permite hacer este dinamismo de jugar con la página y que al clickear vaya cambiando esto como lo hacemos establecer con elementos fritz así que voy a añadir una nueva sección para cuestión de prolijidad vamos a elegir el.

Objeto html lo voy a arrastrar y acá tenemos que pegar un código de donde sacamos el código vamos a mi página web y acá lo tienen disponible markel lo completo ojo no se olviden de nada bien completo de script script van a poner copiar voy a venir hacia atrás y bienvenidos tico y voy a poner pegar fíjense la característica ustedes tienen.

Acá el concepto de clase selector que por se elige que este nombre si se debe mantener y class data que se debe mantener el resto no hace falta que lo mantengan directamente lo pueden hacer con el nombre que ustedes quieran la otra porción de contenido yo lo que hacer es pulsar entonces en actualizar vamos a ejecutar la página.

Voy a venir hasta acá y voy a abrirla en una ventana nueva esta es mi página y fíjense que cuando arranca tengo un encabezado tengo un menú completamente funcional existe dentro de mi página web normal tengo un pie de página con su menú y que lo primero que pueden observar tengo cuatro objetos que me se selecciona el.

Personaje pero acá no aparece ninguna de las opciones y ahora yo puedo elegir cualquier este objetivo para ser fíjese elijo ironman y lo que aparece es ironman con su descripción elijo el hombre-araña y aparece hombre araña con su descripción se dijo jalkh aparece jalkh y su descripción y si elijo autor a preceptor con su descripción con lo.

Cual quedó completamente operativo obviamente está cambiando todo el contenido incluyendo a la descripción lo que pasa que yo lo puso igual hagamos una cosa muy rápidamente para que vean que realmente está cambiando todo ustedes podrían haber cambiado en el texto que tenían acá adentro lo que serían el color para esto fíjense que.

Una vez que ejecutan la página ya acá les está tomando el script y por lo tanto no tengo visibles los objetos podríamos hacer vamos a probarlo hacer un truco si ponemos en el navigator botón derecho a navigator fíjense que a pesar de que estén oculto por el script yo acá dentro sí lo puedo ver si podría ver cada uno de los.

Editores de texto con lo cual si clique o llegó a este punto y los voy a estar viendo entonces vamos a simplemente seleccionar y lo que voy a hacer es cambiar los colores de cada uno de estos editores de texto acá tengo uno acá tengo otro voy a cambiarlos cada uno con colores distintos para que después cuando aparezcan en la página realmente.

Ustedes vean que cambio voy a cambiar acá el otro editor de texto voy a marcar todo te lo voy a poner de color violeta y voy a bajar a pulsar nuevamente en editor de texto voy a marcar este último y voy a seleccionar por ejemplo en este caso en naranja voy a pulsar actualizar esto simplemente para que vean que cambiaba.

Todo que realmente se está modificando una es que está editado voy a pulsar en refrescar vamos a cargar nuevamente en nuestra página e iniciamos de línea de iniciamos desde el comienzo si yo elijo spider-man fin que sea casi una versión braña con el color verde si elijo torme aparece todo con un color violeta si elijo ironman me aparece en azul y si.

Elijo el jalkh que aparece en color naranja con esto creo que nos quedó demostrado que no sólo está cambiando el encabezado sino también el contenido espero que les haya gustado si fue así por favor me pido suscribas al canal que eso me apoya muchísimo suscríbase también a la campanita para recibir nuevas notificaciones de.

Contenido y aprender mucho más de wordpress además como siempre agradezco muchísimo a todos aquellos que me invitan un café por medio de mi página web que por suerte cada vez son más también a los que ya están utilizando el botón sub ter gracia me encanta porque cuando lo utilizan y demandan algún comentario ya se ve el.

Icon hito de que utilizaron ese botón y finalmente un abrazo enorme a todos los miembros de mi canal que me dan siempre su apoyo incondicional los dejo acaso el final con el siguiente enlace a la cadena de wordpress y al tutorial anterior le mando un abrazo enorme a todos los países que me visita díganme de dónde me escriben que me encanta.

Un saludo chau ah

Deja un comentario