Estaba rediseñando un sitio en wordpress y tuve el problema de que las imagenes destacadas se veían muy pequeñas para mi gusto.
Encontrar la solución fue un dolor de cabeza pero finalmente la encontré.
Para ello usé el siguiente atributo:
.featured_image Finalmente quedaría algo así:
.featured_image {
width: 640px;
height: 100%;
margin-top:5px;
background:#fff;
border:5px;
padding:0;
}
Aclaro que el atributo widht es el ancho, y height el largo de la imagen, por defecto recomiendo dejarlo en 100% porque si la imagen original es demasiado larga o alta se deformaría si la limitamos.
Luego hace falta incluir el siguiente código en functions.php , yo lo coloqué al final de la hoja y funciona, lo que hace es preformatear con una nueva dimensión a las nuevas imágenes subidas al post como destacadas. Lo unico que hay que modificar el widht y el height de la imagen para que coincida con el que elegimos para la hoja de estilo, en este caso son 350w (pixeles) por 350h .
add_action( 'do_meta_boxes', 'tam_thumbnail_personalizado' );
function tam_thumbnail_personalizado( $post_type ) {
global $wp_meta_boxes;
if ( ! current_theme_supports( 'post-thumbnails', $post_type ) || ! post_type_supports( $post_type, 'thumbnail' ) )
return;
foreach ( $wp_meta_boxes[ $post_type ] as $context => $priorities )
foreach ( $priorities as $priority => $meta_boxes )
foreach ( $meta_boxes as $id => $box )
if ( 'postimagediv' == $id )
$wp_meta_boxes[ $post_type ][ $context ][ $priority ][ $id ]['title'] .= ' 350w x 350h';
remove_action( 'do_meta_boxes', 'tam_thumbnail_personalizado' );
}
Otro cambio que hice desde el escritorio de mi wordpress y que algo aportó fue entrar en ajustes/media y hacer coincidir el ancho y largo del standar medio con el que elegí en los dos anteriores pasos.
domingo, 17 de julio de 2016
Modificar tamaño de imagen destacada en wordpress |
Omitir partes de tu wordpress en versión móvil con css |
Estaba rediseñando un sitio de un cliente, en wordpress, me surgió el problema de que no me agradaba como quedaba un menú así que lo reemplacé por otro móvil.
Pero cómo quitar el anterior menú? no quise complicarme demasiado así que busqué una forma de que el menú no se viera en las versiones móviles.
Para eso recurrí al estilo, encontré 2 códigos que permite que ciertas partes de nuestro sitio no se visualicen a partir de cierta dimensión de pantalla. El primer código es el siguiente:
@media screen and (max-width: 980px) {
En mi caso tenía el siguiente elemento, lo que hice fue pegar el código anterior en la primera linea:
#secondarymenu, #mainmenu {
background:#000;
display:none;
padding:0;
margin-top:0px;
}De modo que quedó así:
@media screen and (max-width: 980px) {
#secondarymenu, #mainmenu {
background:#000;
display:none;
padding:0;
margin-top:0px;
}Pero hay otro elemento clave: el display:none; Con el nos aseguramos que ese fragmento desaparezca por completo de las versiones de pantalla inferiores a 980px
Suscribirse a:
Entradas
(
Atom
)