Reportar Link Caído o Post

Como hacer las imagenes de mi WordPress responsive

Este tutorial es para aquellas personas que tiene una web totalmente adaptables a cualquier dispositivo móvil desde Smarphone, tablets y pc, llamado con el termino Responsive design, en algunas ocasiones existen plantillas que al momento de hacer un post o un page y agregamos una imagen y al visualizarlo desde un móvil la imagen no se adapta al tamaño en configuración osea no se adapta al Smartphone o Tablet si no que la imagen se muestra en tamaño real.

¿ Y como logro hacer eso, existe algún plugin ?

Si existe una infinidad de plugin y créanme existen pero es una tarea larga poder configurar y algunas ya traen sus medidas predefinidas y no logran adaptarse de una manera correcta al dispositivo móvil.

¿ Como se hace ?

Todo está basado mediante un code php, css, y de ultimo para que funcione encerrar las imágenes en los post o page con shortcode.

1) insertamos el siguiente código en la hoja de  functions.php  y pegamos la siguiente linea.

1
2
function responsive_images($atts, $content = null) {
     return '
‘ . $content .’

‘; } add_shortcode(‘responsive’, ‘responsive_images’);

2) insertamos el siguiente codigo en la hoja de estilos de la plantilla algunas se llaman main_style.css o style.css o custom.css lo puedes pegar de ultimo si quieres.

1
2
3
4
5
6
@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

3) y por ultimo abre una entrada o una pagina y subes una imagen y dentro de la imagen lo cierras con el siguiente Shortcode.

1
[responsive]Tu imagen Aqui[/responsive]

Comentarios

comments


Enmanuel Isales

Mi nombre es Junnior Enmanuel Isales Autodidacta Digital, Téc en computación, Freelance de corazón, Amante de la tecnología. Actualmente estudio una licenciatura en tecnología y administración de negocios y me apasiona todo lo relacionado con computadoras y nuevas tecnologías.

Artículos Relacionados: