Hola. Estoy con una búsqueda medio específica y capaz el conocimiento colectivo de todes Uds me pueda ayudar.
El cliente quiere un portfolio de marcas. Hasta ahí todo bien, cada marca es una entrada y las entradas se muestran en una simpática grilla. Al hacer hover en cada entrada se lee el extracto.
Lo que ando necesitando, es algún plugin que junto con ese extracto me permita mostrar íconos o links a redes sociales (específicamente instagram).
Actualmente tengo los links en la entrada, lo que quiere el cliente es poder acceder a esos links sin entrar al post.
¡Desde ya muchas gracias por cualquier idea o recomendación!
Hola!
Fijate si podes generar en el extracto que mencionas el agregado de html. Con esa posibilidad de agregar html escribite un texto cualquiera y ponele una URL. Luego chequea que puedas acceder a esa URL sin necesidad de acceder al post.
Si se puede esto que te menciono, haces unos botones con HTML a las redes y listo! Solución fácil. Quizás un poco engorrosa… pero si querés resolverlo acá está!
Abrazo
1 me gusta
Desde ya muchas gracias por la sugerencia. Tengo entendido que los extractos por defecto son solo texto (no levantan HTML) ¿puede ser que haya casos que sí? Los temas que he usado jamás levantaron HTML en el extracto.
Fijate, probalo. Jamás intenté realizar algo similar en Wordpress. Entiendo que si no sos capaz de hacerlo desde el extracto vas a tener que generar una solución con ACF. Asignas estos campos personalizados a las entradas y luego trabajas con el maquetador el mostrar estas entradas.
Para resolverlo un poco más sencillo te recomendaría que maquetaras con Elementor, fijate que ellos tienen compatibilidad con ACF, lee acá:
En la estructura de las entradas, generas un nuevo template y traes los valores que hayas cargado en el campo personalizado nuevo.
De nuevo, la primera solución que te compartí es mucho más sencilla que esta que te digo, esta sería PRO, para ponerle un nombre
1 me gusta
Podes hacer una función en JS que, al hacer hover en cada portfolio, modifique el extracto para sumar los links de redes sociales.
Tal vez es mas simple de hacer que usar ACF y modificar cada portfolio.
1 me gusta
@Fer_Factory JS decís? Me suena más un tema de PHP esto. Porque la cuestión acá es como asocias los enlaces a cada marca/entrada.
Si fuera que tiene un solo grupo de enlaces para todas las entradas en JS la veo fácil, pero acá va a tener que parametrizar cada marca/entrada con sus respectivos enlaces, y luego hacer que el enlace correspondiente vaya a la marca/entrada correspondiente. Excepto que el plugin que uses asocie a cada entrada con un id personalizable, si a futuro le sumas o quitas algo puede que sea imposible de mantener.
Así mismo, @Antares, conta si pudiste probar algo de todo lo que dijimos, y si vemos que no hacemos la del JS que está bueno como ejercicio 
Desde ya muchas gracias a todes quienes aportaron su granito. <3
Estuve probando pero la verdad me estoy rindiendo. Probé también con Advanced Excerpts pero siendo que estoy usando Visual Portfolio para mostrar las entradas, no hubo caso.
¡De nuevo gracias!
@Ojosdenebulosa Si, me parece que la solucion mas rapida es via JS. De hecho lo probe:
@Antares este es el codigo que use. Obviamente tenes que acomodarlo a tu sitio, pero estimo que los tags son los mismos.
//todos los elementosd h2 dentro de cada contenedor
let wrap = document.querySelectorAll('.vp-portfolio__items-wrap h2');
wrap.forEach(element => {
//creo el enlace
let link = document.createElement("a");
link.href = 'https://instagram.com/loquesea';
//creo el icono
let iconoInstagram = document.createElement("img");
iconoInstagram.src = 'https://cdn-icons-png.flaticon.com/512/1409/1409946.png';
iconoInstagram.width = 25;
iconoInstagram.height = 25;
//agrego un salto de linea
element.innerHTML += '<br>';
//sumo el icono al link
link.appendChild(iconoInstagram);
//sumo el link al elemento
element.appendChild(link);
});
Ahora, si el enlace tiene que tener parametros de cada entrada habria que modificar el codigo, pero tambien se puede hacer de la misma forma.
2 Me gusta
Joya el código!!! Me encantó. Sumo un detallesin por si es necesario, como comentaba antes, tener un perfil de redes distinto para cada marca. Este sería el código:
//todos los elementosd h2 dentro de cada contenedor
let marcasPost = document.getElementsByClassName("vp-portfolio__item-meta-title");
// debug
//console.log(marcasPost[2].textContent)
// Funcion para encontrar el nombre de la Marca en la tabla de información
function findBy(arr, val) {
var ret = arr.filter(function(el) {
return el.indexOf(val) > -1;
}).map(function(el) {
var res = el.slice();
res.splice(el.indexOf(val), 1);
return res;
});
return Array.prototype.concat.apply([], ret);
}
// Tabla donde colocar el nombre de la marca, su enlace de facebook y su enlace de instagram
var marcasPost_social = [
["Sexy Business Woman", "https://www.facebook.com/facebook1", "https://www.instagram.com/instagram1"],
["Confident Businessman", "https://www.facebook.com/facebook2", "https://www.instagram.com/instagram2"]
];
// debug
// console.log(findBy(marcasPost_social,"Sexy"));
marcasPost.forEach(element => {
//creo el enlace de instagram
let link = document.createElement("a");
link.href = findBy(marcasPost_social,element.textContent.substring(1,99))[1];
//creo el icono
let iconoInstagram = document.createElement("img");
iconoInstagram.src = 'https://cdn-icons-png.flaticon.com/512/1409/1409946.png';
iconoInstagram.width = 25;
iconoInstagram.height = 25;
// debug
//console.log(findBy(marcasPost_social,element.textContent.substring(1,99)));
//agrego un salto de linea
element.innerHTML += '<br>';
//sumo el icono al link
link.appendChild(iconoInstagram);
//sumo el link al elemento
element.appendChild(link);
});
Fijate, lo que sumé acá es una tabla que almacenaría los datos de @Antares, dónde asocia el título de la entrada con los social links, siempre suponiendo que la única información que podemos tomar de cada entrada es el título de la misma, porque si hubiera una forma un poco más “amena” quizás sería mejor asociarlo con un id o similar.
Con esta tabla y una función de búsqueda, ingresamos al foreach, generamos el botón de instagram, pero esta vez el href que usamos es el valor que encuentre. Habría que seguir laburando para generar casos en los que no se encuentre nada, sería un condicional simple con un return.
2 Me gusta
Wow, chapeau a todas las contribuciones!
¡Ya quisiera saber yo programar para siquiera saber a dónde poner tanto código!
Genial saber que se puede hacer y la buena voludad de los compas acá, el tema es que tiene que ser algo que el cliente (bastante caprichoso) pueda manejar.
Desde ya gracias de nuevo por la buena onda.<3
2 Me gusta
Yo creo que deberías de dejar de pensar en las entradas. Sentate a considerar realmente qué es lo que necesitas hacer. Te voy a dar un pequeño flujo de pensamiento al respecto:
- Necesito mostrar marcas en un apartado del sitio, como si fuera un carousel con: logo, nombre, redes sociales.
- Si necesito únicamente que se vea en el carousel porque es a nivel estético, no requiero mayores elementos
- Para resolverlo puedo generar un carousel con ese contenido que necesito
- Si quisiera trasladarlo a otros apartados, puedo generar: un static content, o bien puedo guardarme la plantilla del carousel para luego aplicarlo en otras partes del sitio. También podría dejarlo como widget y colocarlo en alguna zona del footer, o anterior al mismo, para que se vea siempre.
En fin, te lo quiero transmitir así porque puede ser que alguna de las cosas que digo no sean las correctas para tu proyecto. Pero si lo que te compartimos realmente no te sirve, quizás podrías intentar con otro acercamiento a la solución. Muchas veces nos encasillamos en cosas o formas por alguna razón, pero siempre tenemos que lograr ver otras opciones, inclusive las más simples! Espero lo resuelvas 
Si es algo que el clienta deba manejar, entonces yo creo que te re contra mil conviene ACF.
Ah y te recomiendo no usar Visual Portfolio… porque en mi caso me ralentizaba todo el sitio, pero quien sabe quizas era algo muy puntual con mi web. De todas formas, desde ahi que lo evito!
Saludos.
