¿Aplicar estilos a los EMBED de wordpress?

epsilo99 Seguir

1
Xi
Verificación en dos pasos activada
Suscripción a IA
Desde
1 Dic 2011
Mensajes
4.092
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í:

oembedwp_postsitiopropiopostexterno.jpg


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

38-Calcular PESO IDEAL – 【Calculadora ONLINE】.jpg


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?
 
Última edición:

LuisPariona

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Oct 2018
Mensajes
129
Podrías mostrarme un link demo con el embed? puede que con cada tema sea diferente.
 

LuisPariona

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Oct 2018
Mensajes
129
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.
 

epsilo99

1
Xi
Verificación en dos pasos activada
Suscripción a IA
Desde
1 Dic 2011
Mensajes
4.092
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!
 

LuisPariona

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Oct 2018
Mensajes
129
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
1571866618192.png

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;}
 

epsilo99

1
Xi
Verificación en dos pasos activada
Suscripción a IA
Desde
1 Dic 2011
Mensajes
4.092
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!
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba