Mejorar estilo de vistas previas de enlaces en WordPress

  • Autor Autor epsilo99
  • Fecha de inicio Fecha de inicio

epsilo99

1
Xi
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
como sabrán, desde hace un tiempo al pegar una url de otro artículo en tu blog, se muestra una vista previa del artículo incluyendo una imagen y un resumen del contenido...

así:



pero esto siemre se muestra igual y no hay ninguna forma de modificar el ancho, ni colores, ni eliminar el icono de abajo ni nada directamente.

Lo que he probado y funciona es agregar los enlaces de esta forma:

<div style="float:left;padding:5px;">[embed width="270" height="300"]https://misitio.com/un-articulo/[/embed]</div>

y al menos logro controlar el ancho y la separación entre vistas previas

y he logrado un aspecto muy lindo, pero tengo que hacerlo manualmente para cada artículo y si llego a cambiar el ancho del tema por ejemplo tendría que volver a cambiar todo de nuevo, un verdadero trabajo



pero tengo que hacerlo artículo por artículo, cada vez que utilizo el código embed

alguien sabe como crear una función en function.php o agregar los estilos de forma que no tenga que hacerlo enlace por enlace y se aplique a todas las vistas previas del sitio???


Agradecería enormemente cualquier ayuda!


Actualización:

He dado con este código:

Insertar CODE, HTML o PHP:
add_filter( 'embed_defaults', 'change_embed_size' );

function change_embed_size() {
    // Adjust values
    return array('width' => 100, 'height' => 100);
}

que cambia el ancho automaticamente, ahora me faltaría agregar automaticamente el float y el padding.... alguna idea?[/embed]
 
Última edición:
Podrías mostrarme un link demo con el embed? puede que con cada tema sea diferente.
 
Listo, prueba poniendo esto en el CSS adicional de Apariencia > Personalizar

CSS:
.wp-embedded-content {
    width: calc(33.33% - 10px)!important;
    float: left!important;
    margin: 5px!important;
}
.wp-embed-site-title {
    display: none!important;
}
.wp-embed {
    padding: 10px!important;
}
@media screen and (max-width: 567px) {
.wp-embedded-content {
    width: 100%!important;
    margin: 0px!important;
}
}

Lo hice responsive para que se visualice bien en dispositivos móviles. Me dices si todo está correcto. 🙂 👍 También oculté el logotipo de Wordpress.
 

Genio!!!! Genio!

Funciona perfectamente, se ve responsitive, ajusta los anchos y espacios entre artículos sin problema!

No logra ocultar la parte del logotipo, pero lo principal que era el ancho está bien de bien!

Muchísimas gracias!
 
Ya me temía que no iba a funcionar lo del Logotipo, pero con esto ahora sí que debería funcionar. Sólo que tendrás que hacer los cambios directamente en uno de los archivos de Wordpress que están en tu cPanel.

Entras al cPanel > Administrador de Archivos > carpeta wp-includes > Buscas el archivo embed.php > Click derecho Editar y Buscas estas líneas de CSS

Pegas lo siguiente al final, justo después de #aaa} y listo, con eso ya debería estar.
CSS:
.wp-embed{padding:10px}.wp-embed-footer{display:none;}.wp-embed-featured-image.square{width:100%;margin:0;}
 
Funcionó!

Lo único que tuve que modificar es un max-width:160px; que hay arriba en el código y no deja que el width:100% funcione para las imágenes, modificada esta parte ya todo está correcto 🙂

Muchas gracias de nuevo por la ayuda!