Cómo crear una versión móvil de un sitio web de WordPress
Admítelo: tener una versión móvil hermosa y completamente funcional de tu sitio web de WordPress es imprescindible, considerando que el importante volumen de navegación por Internet se origina desde dispositivos móviles. Es fácil crear un sitio web móvil con WordPress en , ya sea que se suscriba o EasyWP.
Es posible que ya hayas notado que, a veces, las versiones web y móvil del mismo sitio web tienen contenido un poco diferente. Esto se hace para excluir funciones específicas de la versión móvil de WordPress, ya que pueden aparecer o funcionar incorrectamente, o simplemente resultar abrumadoras en una pantalla más pequeña. Además, clasifica mejor los sitios optimizados para dispositivos móviles.
En este artículo cubriremos varias formas de hacer que su sitio web de WordPress sea compatible con dispositivos móviles:
Se carga el mismo contenido y URL en cada dispositivo, pero se utiliza CSS para alterar la representación de la página según la resolución de la pantalla del móvil.
Se carga una URL, pero se utilizan diferentes contenidos y CSS, según el dispositivo utilizado.
Se cargan diferentes URL y, por lo tanto, sitios web, por ejemplo, nctest.info y m.nctest.info
Ten en cuenta que cada forma tiene sus pros y sus contras, por eso recomendamos hacer una investigación SEO antes de continuar.
El diseño web responsivo utiliza CSS3 Media Queries. Media Queries es un módulo CSS3 que permite que la representación de contenido se adapte a condiciones como la resolución de la pantalla, el ancho y alto, y la orientación.
Normalmente, el archivo que necesitarás editar es style.css. Está ubicado en el directorio /wp-content/themes/theme_name/.
Una consulta de medios CSS3 suele verse así:
Pantalla solo @media y (ancho máximo: 480 px) {
}
Es un código condicional que le dice al navegador que ajuste todos los parámetros de estilo si el tamaño de la pantalla es menor o igual a 480 px.
Para ser más granular, puede agregar intervalos de ancho mínimo y máximo para apuntar a diferentes dispositivos:
Pantalla solo @media y (ancho mínimo: 768 px) y (ancho máximo: 959 px) {
}
Todos los ajustes de estilo adicionales deben agregarse entre los {…} soportes.
Como ejemplo, tomaremos el tema predeterminado Twenty Ten, que no responde de forma predeterminada.
El primer código establece el tamaño del marco principal del tema en 550 px:
#acceso .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
ancho: 550 px;
}
Compare cómo se verá en este caso el sitio web en un dispositivo móvil:
Aunque como puedes ver, no todos los elementos se ajustan a la pantalla del dispositivo. Debes ajustar por separado básicamente todos los elementos que tienes en tu sitio web: imagen del encabezado, descripción del blog, ancho de la barra de navegación, posición de la capa de contenido, etc.
Es posible ocultar algunos de ellos, como controles deslizantes o imágenes de encabezado, por ejemplo. De esta manera, la apariencia de la versión móvil de su sitio web será optimizada y fácil de usar.
Se debe utilizar el siguiente código (por ejemplo, para la imagen del encabezado):
#img de marca {
pantalla: ninguna;
}
Si desea cambiar el tamaño del elemento (imagen del encabezado en el ejemplo), use
#img de marca {
ancho: 100%
}
NOTA: La edición del archivo style.css también requiere conocimientos de desarrollo web. No olvide hacer una copia de seguridad de su archivo antes de cambiarlo.
Una vez que todas las partes de su sitio web estén ajustadas en consecuencia, debería tener un buen aspecto en los dispositivos móviles:
La mayoría de los temas de WordPress se crean para ser responsivos: al instalar un nuevo tema, también puede comprobar su apariencia adjunta en dispositivos móviles.
Si no hay ninguno y no está seguro de si el tema que le gustó es responsivo o no, puede definirlo en los filtros de funciones mientras busca el tema.
1. Inicie sesión en su panel de administración de WordPress (sudominio.com/wp-admin), navegue hasta el menú Apariencia y haga clic en Temas.
2. Haga clic en Agregar nuevo:
3. Haga clic en Filtro de funciones y marque Diseño adaptable. Consulte otras opciones si es necesario para encontrar el tema deseado.
4. Haga clic en Aplicar filtros:
En unos momentos verá la lista de temas que corresponden a las funciones de búsqueda que configuró.
Alternativamente, puede configurar diferentes CSS y contenido para extraer según el tipo de dispositivo. Esto se puede lograr mediante los complementos de WordPress. La mayoría de ellos tienen una serie de configuraciones básicas disponibles de forma gratuita.
Como ejemplo, usaremos uno de los complementos más populares para diseñar blogs optimizados para dispositivos móviles: .
Primero, debe hacerlo en el panel de administración.
Una vez hecho esto, debe elegir un tema para su versión móvil del sitio web: navegue hasta el menú WPtouch, haga clic en Temas y extensiones (1). Elija el tema requerido y haga clic en Configuración (2):
Una vez finalizada la configuración, podrá realizar los cambios y correcciones necesarios. Las opciones del complemento permiten realizar muchas acciones y la mayoría de ellas se explican por sí mismas.
Así es como se ve el menú del complemento WPtouch Mobile:
Una vez finalizados todos los ajustes, guarde los cambios y compruebe cómo se muestra el sitio web en una computadora de escritorio y en un dispositivo móvil:
La última forma es la que lleva más tiempo, ya que necesitará:
1. Cree un subdominio correspondiente para su versión móvil, como m.nctest.info.
2. Desarrolle o copie el contenido del sitio en la ruta del directorio del subdominio creado.
3. Instale y configure un complemento de redireccionamiento móvil.
NOTA: Si opta por esta opción, tenga en cuenta que las dos versiones de su sitio web no se sincronizarán automáticamente, ya que técnicamente son instalaciones diferentes. Cualquier edición que realice deberá replicarse para la otra versión.
Una vez que se crea el subdominio y se ajusta el sitio web, continúe y acceda al panel de administración principal del sitio web.
Como ejemplo usaremos el complemento.
1. Navegue hasta el menú Configuración y haga clic en Redirección de sitio móvil.
2. Inserte la URL móvil que le gustaría tener. Marque cualquier opción adicional si es necesario.
3. Haga clic en Actualizar configuración:
NOTA: No proporcionamos servicios de depuración de código ni de desarrollo de sitios web. Este artículo se proporciona únicamente como cortesía para su comodidad. Si tiene algún problema con la versión móvil de su sitio web, le sugerimos que consulte los foros de soporte o se comunique con el desarrollador del sitio web.
¡Eso es todo!
Ya sea que esté iniciando un nuevo sitio o buscando transferirse a un nuevo host, EasyWP de es rápido y confiable. Asegúrese de consultar todas las características y beneficios.
Facebook Comments
Disqus