Cómo crear una versión móvil de un sitio web WordPress – Hosting – Namecheap.com
Cómo crear una versión móvil de un sitio web de WordPress
Admítalo: Tener una versión móvil hermosa y completamente funcional de su sitio web de WordPress es una necesidad, teniendo en cuenta que el volumen significativo de la navegación por Internet se origina en dispositivos móviles. Es fácil crear un sitio web móvil con WordPress en Namecheap, ya sea que se suscriba al Alojamiento compartido o al alojamiento de WordPress EasyWP.
Es posible que ya haya notado que, a veces, las versiones web y móviles del mismo sitio web tienen un contenido un poco diferente. Esto se hace para excluir características específicas de la versión móvil de WordPress, ya que pueden aparecer o funcionar incorrectamente, o simplemente ser abrumadoras en una pantalla más pequeña. Además, el algoritmo del motor de búsqueda de Google clasifica los sitios compatibles con dispositivos móviles en un lugar más alto.
En este artículo cubriremos varias formas de hacer que su sitio web de WordPress sea compatible con dispositivos móviles:
Crear sitios con diseño adaptable: El mismo contenido y URL se cargan en cada dispositivo, pero se usa CSS para alterar la representación de la página de acuerdo con la resolución de pantalla del móvil.
Sitios de servicio dinámicos: Se carga una URL, pero se utilizan diferentes contenidos y CSS, dependiendo del dispositivo utilizado.
Creación de direcciones URL separadas para Dispositivos móviles y de escritorio: Se cargan diferentes direcciones URL y, por lo tanto, sitios web, p. ej., nctest.info y m.nctest.info
Ten en cuenta que cada camino tiene sus pros y sus contras, por eso recomendamos hacer una investigación SEO antes de continuar.
Diseño web adaptable
El diseño web adaptable utiliza Consultas de medios CSS3. Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones tales como resolución de pantalla, ancho y alto, orientación.
Por lo general, el archivo que necesitará editar es style.css. Se encuentra en el directorio/wp-content/themes/ theme_name/.
Una consulta de medios CSS3 generalmente se ve como:
@pantalla de solo medios y (ancho máximo: 480px) {
}
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 480px.
Para ser más granular, puede agregar intervalos de ancho mínimo y ancho máximo para dirigirse a diferentes dispositivos:
@ pantalla de solo medios y (ancho mínimo: 768px) y (ancho máximo: 959px) {
}
Todos los ajustes de estilo adicionales deben agregarse entre {…} corchete.
Como ejemplo, tomaremos el tema por defecto Twenty Ten que no responde por defecto.
El primer código establece el tamaño de fotograma principal del tema en 550px:
#access .encabezado de menú, div.menú, # colofón, # marca, # principal, # envoltura, # título del sitio {
ancho: 550px;
}
Compare cómo se verá en este caso el sitio web en un dispositivo móvil:
Aunque, como puede ver, no todos los elementos se ajustan a la pantalla del dispositivo. Necesitas ajustar por separado básicamente todos los elementos que tienes en tu sitio web: imagen de encabezado, descripción de blog, ancho de barra de navegación, posición de la capa de contenido, etc.
Es posible ocultar algunos de ellos, como deslizadores o imágenes de encabezado, por ejemplo. De esta manera, el aspecto de la versión móvil de su sitio web será optimizado y fácil de usar.
Se debe usar el siguiente código (por ejemplo, para la imagen de encabezado):
# branding img {
display: none;
}
Si desea cambiar el tamaño del elemento (imagen de encabezado en el ejemplo), use
#branding img {
width:100%
}
NOTA: Edición del estilo.el archivo 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 se ajusten 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 receptivos: al instalar un nuevo tema, puede verificar su aspecto adjunto en dispositivos móviles adicionalmente.
Si no hay ninguno y no está seguro de si el tema que le gustó es sensible 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 (yourdomain.com/wp-admin), vaya al menú Apariencia, haga clic en Temas.
2. Haga clic en Agregar Nuevo:
3. Haz clic en Filtro de funciones y comprueba Diseño adaptable. Marque otras opciones si es necesario para encontrar un tema deseado.
4. Haga clic en Aplicar Filtros:
En unos momentos usted verá la lista de temas que corresponden a las funciones de búsqueda establecido.
Sitios web de servicio dinámico
Alternativamente, puede configurar diferentes CSS y contenido para que se extraigan 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 amigables con dispositivos móviles: el complemento móvil WPtouch.
Primero, debe instalarlo y activarlo en el panel de administración.
Una vez hecho esto, debe elegir un tema para su versión móvil del sitio web: vaya al menú WPtouch, haga clic en Temas & 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ú de complementos móviles de WPtouch:
Una vez finalizados todos los ajustes, guarde los cambios y compruebe cómo se muestra el sitio web en un dispositivo de escritorio y móvil:
Crear direcciones URL separadas para Dispositivos móviles y de escritorio
La última forma es la que más tiempo consume, ya que necesitará:
1. Crea un subdominio correspondiente para tu versión móvil, como m.nctest.info.
2. Desarrolle o copie el contenido del sitio en la ruta de directorio de subdominio creada.
3. Instale y configure un complemento de redirección 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 creado el subdominio y ajustado el sitio web, siga adelante e instale el complemento en el panel de administración principal del sitio web.
Como ejemplo, usaremos el complemento de redirección de sitios móviles.
1. Vaya al menú de Configuración y haga clic en Redireccionamiento del sitio móvil.
2. Inserta la URL móvil que te gustaría tener. Verifique 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 como una cuestión de cortesía solo para su conveniencia.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 ponga en contacto con el desarrollador del sitio web.
¡Eso es todo!