Los internautas de todo el mundo recurren cada vez más al móvilAcceso a dispositivosweb, se ha convertido en una tarea esencial asegurarse de que su sitio web WordPress se ejecuta sin problemas en todos los tamaños de pantalla. Aunque existen muchasplug-in (componente de software)puede ayudar con esto, pero estos plugins suelenAumento del tiempo de carga del sitio web y de la complejidad del código.
Este artículo le mostrará cómo crear un sitio web WordPress realmente adaptado a dispositivos móviles sin plugins, personalizando la codificación y el CSS.
¿Por qué es vital la compatibilidad móvil?
Antes de entrar en los pasos concretos, entendamos por qué la compatibilidad con dispositivos móviles es crucial para los sitios web modernos.
- experiencia del usuarioEl diseño adaptable garantiza que su sitio webExperiencia óptima en cualquier dispositivo.
- Clasificación en los motores de búsqueda: Los motores de búsqueda como Google dejan claro queLa facilidad de uso para móviles es un factor importante en las clasificaciones de búsqueda.
- tasa de conversiónUn sitio móvil fácil de usar tiene más probabilidades de atraer a los usuarios a una navegación más profunda, lo que aumenta la probabilidad de que se produzcan acciones de conversión clave, como compras y registros.
- tendencias futurasEl futuro entorno de red se caracterizará porcentrado en los dispositivos móvilesLos sitios que no se optimicen corren el riesgo de ser eliminados.
Conceptos básicos de un sitio web adaptado a dispositivos móviles
Antes de entrar en los pasos concretos de la implantación, debemos entender qué es un sitio web adaptado a dispositivos móviles. He aquí algunos de los elementos clave:
- Sistema de rejilla fluida::Sistema de rejilla fluidaPermitir que el diseño del sitio varíe en función del tamaño de la pantallaajuste automático. Responde al núcleo del diseño y garantiza que el contenido de la página se muestre correctamente en distintos dispositivos.
- Imagen flexibleLas imágenes desempeñan un papel importante en las páginas web, y una configuración flexible de las mismas garantiza que se muestren adecuadamente en diferentes pantallas. Esto puede conseguirseEstablecer diferentes resoluciones y tamañosAsí se evita que las imágenes queden demasiado abultadas o borrosas en los dispositivos móviles.
- Información para los medios de comunicaciónLas consultas de medios pueden basarse en las características del dispositivo (por ejemplo, el tamaño o la resolución de la pantalla) paraAplicar diferentes estilos CSS. Haga posible que su sitio webAdaptación a diversos equiposdesde el escritorio hasta el smartphone.
Pasos para crear un sitio web WordPress compatible con dispositivos móviles sin plugins
A continuación, detallaremos cómo conseguir un diseño adaptado a dispositivos móviles para su sitio de WordPress sin necesidad de un plugin.
Paso 1: Comprobar el diseño actual del sitio web
Antes de realizar cualquier cambio, necesita saber qué hay actualmente en el sitio. Utilice la funciónChrome DevToolstal vezHerramientas para desarrolladores de Mozilla FirefoxsiguientesondaEl diseño, el tamaño de las imágenes y la estructura reticular del sitio.Identificar áreas de mejoray documentar los elementos de diseño que puedan causar problemas.
Paso 2: Crear o modificar el tema de WordPress
Para que un sitio web sea apto para móviles, es necesario modificar un tema existente o empezar desde cero.Empezar a crear un nuevo tema. Si no está familiarizado con el desarrollo de temas de WordPress, se recomienda comenzar con un tema existente y realizar cambios.
Por ejemplo, podemos utilizar el tema predeterminado de WordPress Twenty Twenty-One para realizar cambios.
En el directorio de temas de WordPress (normalmente situado en el directorio wp-content/temas/ ), cree una nueva carpeta y asígnele el nombre de su tema personalizado, por ejemplo twentytwentyone-child.
En la nueva carpeta del tema personalizado, es necesario copiar y modificar algunos de los archivos del tema original. Puede ser necesario copiar style.cssyfunciones.phpasí como archivos de plantilla (por ejemplo header.phpypie.php (etc.). Estos archivos son la base para realizar modificaciones funcionales y de diseño personalizadas.
existe style.css En la parte superior del archivo, añada información básica sobre el tema hijo, como el nombre del tema, la plantilla, el autor, etc:
Código de cssCopy
/*
Nombre del tema: Twenty Twenty-One Child
Plantilla: twentytwentyone
Autor: Su Nombre
Descripción: Un tema hijo para el tema Twenty Twenty-One.
Version: 1.0
*/Versión: 1.0existe funciones.php asegúrese de cargar la hoja de estilos del tema principal para heredar los estilos del tema original:
phpCopiar código
get('Versión')
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles' );Paso 3: Configurar el sistema de malla fluida
El sistema de cuadrícula fluida es fundamental para la aplicación del diseño adaptable. Al configurar una cuadrícula fluida, el diseño del sitio puede ajustarse automáticamente al tamaño de la pantalla. A continuación se muestra el código CSS básico que puedes añadir a la hoja de estilos de tu tema:
CSS copiar código
body {
font-family: Arial, sans-serif; font-size: 16px; font-size: 16px
font-size: 16px; line-height: 1.5; }
line-height: 1.5
line-height: 1.5; margin: 0;
line-height: 1.5; margin: 0; padding: 0;
}
.container {
max-width: 1280px;
margin: 0 auto; padding: 0 20px; } .container { max-width: 1280px; }
padding: 0 20px;
}
.grid {
display: grid; grid-template-columns: repeat(12, 1fr); }
grid-template-columns: repeat(12, 1fr); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); }
grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
}
.grid-item {
grid-columna: span 4; }
}
Este código define un sistema de rejilla básico con 12 columnas y puede adaptarse a sus necesidades.grid-template-columnspara cada columna del ficherorelación de anchura(matemáticas) génerobrechase utiliza para establecer el valor del atributoespaciado.
Paso 4: Añadir imágenes flexibles
Las imágenes flexibles son esenciales para optimizar las pantallas móviles. Esto se consigue mediante el uso desrcsetresponder cantandotallaspuede elegir distintos tamaños de imagen en función de la densidad de pantalla del dispositivo. A continuación se muestra un código de ejemplo:
htmlCopiar código<code><img src="image.jpg"
alt="Descripción de la imagen"
srcset="image.jpg 1x, image@2x.jpg 2x"
sizes="(max-width: 768px) 50vw, 100vw"
loading="lazy"
style="width: 100%; height: auto; margin: 0 auto; display: block;">En este ejemplo, elsrcsetpermite al navegadorSelección del tamaño de imagen óptimo(matemáticas) génerotallasdefine la anchura de la imagen en función de la anchura del dispositivoTamaño de la pantalla.loading="lazy"Las propiedades puedenRetraso en la carga de imágeneshasta que el usuario se desplace a esa posición de la imagen, reduciendo así el tiempo de carga inicial.
Paso 5: Solicitar información sobre los medios de comunicación
Las consultas de medios pueden optimizar el diseño adaptable de un sitio web aplicando estilos diferentes en función de las características del dispositivo. A continuación se muestra un ejemplo de cómo aplicar consultas de medios en CSS:
cssCopiar código
@media only screen y (max-width: 1.0) 800px) {
.grid {
grid-template-columns: repeat(6, 1fr); }
}
}
@media only screen and (max-width: 600px) {
.grid {
grid-template-columns: repeat(2, 1fr); }
}
}
En este código, la consulta de medios ajusta el número de columnas de la cuadrícula en función de la anchura de la pantalla del dispositivo. Cuando el ancho de la pantalla es inferior a800 píxelesUna vez hecho esto, la cuadrícula pasará deReducción de 12 a 6 columnasy cuando la anchura de la pantalla sea inferior a600 píxelesCuando la red seReducido a 2 columnas. Esta adaptabilidad garantiza que su contenido se muestre de la mejor forma posible en todos los dispositivos.
Paso 6: Probar y optimizar el sitio web
Una vez completados todos los pasos anteriores, pruebe y optimice su sitio web utilizando diferentesDispositivos y navegadores para comprobar la capacidad de respuesta del sitio weby asegurarse de que todas las funciones funcionan correctamente. En función de los resultados de las pruebas, puede ser necesario ajustar el estilo CSS o la estructura HTML para garantizar una experiencia de usuario óptima.
Trucos y consejos adicionales
- Uso del preprocesador CSSConsidere la posibilidad de utilizarPreprocesadores CSS como Sass o Lesspara escribir código más eficiente y modular. Estas herramientas pueden ayudarte a gestionar archivos CSS complejos y hacer que el código sea más fácil de mantener.
- Diseño sencillo: En el diseño responsive, mantener un diseño limpio no sólo ayuda a mejorar la experiencia del usuario, sino que también acelera la carga.
- Actualizaciones y mantenimiento periódicosDiseño adaptable: el diseño adaptable no es inamovible y es necesario comprobar y actualizar el código con regularidad para garantizar que el sitio web tenga siempre el mejor aspecto posible.
- Vista previa en directo con herramientas de desarrollo: UtilizaciónChrome DevToolstal vezEdición para desarrolladores de FirefoxRealizar una vista previa en directo puede ayudarle a escribir código al instante mientrasVea el efecto de las modificaciones.
llegar a un veredicto
Crear un sitio web WordPress adaptado a dispositivos móviles no tiene por qué depender de plugins. Mediante el uso de técnicas básicas de front-end, como sistemas de cuadrícula fluidos, imágenes flexibles, consultas de medios y más, es posible optimizar eficazmente un sitio web para diferentes dispositivos y tamaños de pantalla.
Para quienes deseen aprender y dominar estas técnicas en profundidad, el WP constructor de sitios web autodidacta Podrá aprender a crear y optimizar un sitio web para dispositivos móviles desde cero, adquiriendo un conjunto completo de conocimientos, desde conceptos básicos hasta técnicas avanzadas.
