Cómo crear una versión móvil de un sitio web de WordPress

Admítalo: tener una versión móvil hermosa y en pleno funcionamiento de su sitio web de WordPress es una obligación, ya que el volumen significativo de la navegación por Internet se origina en los dispositivos móviles.

Es posible que ya haya notado que, a veces, las versiones web y móvil 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, ya que pueden aparecer o funcionar incorrectamente, o simplemente ser abrumador en una pantalla más pequeña. Además, el algoritmo del motor de búsqueda de Google clasifica a los sitios compatibles con dispositivos móviles más altos.

En este artículo, cubriremos varias formas de hacer que su sitio web de WordPress sea compatible con dispositivos móviles:

Crear sitios con un diseño receptivo . El mismo contenido y la URL se cargan en cada dispositivo, pero CSS se usa para modificar la representación de la página según la resolución de la pantalla móvil.

Sitios de servicio dinámico . Se carga una URL, pero se utilizan diferentes contenidos y CSS, según el dispositivo utilizado.

Creación de direcciones URL separadas para dispositivos de escritorio y móviles . Se cargan diferentes URL y, por lo tanto, sitios web, por ejemplo, nctest.info y m.nctest.info

Tenga en cuenta que cada forma tiene sus pros y sus contras, es por eso que recomendamos hacer una investigación de SEO antes de continuar .

Diseño web responsivo El diseño web

responsive usa CSS3 Media Queries . Media Queries es un módulo CSS3 que permite que la representación del contenido se adapte a condiciones como la resolución de la pantalla, el ancho y la altura, la orientación.

Normalmente, el archivo que deberá editar es style.css . Se encuentra en el directorio / wp-content / themes / theme_name / .

Por lo general, una consulta de medios de CSS3 tiene el aspecto siguiente:

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 480px.

Para ir más granular, puede agregar intervalos de ancho mínimo y ancho máximo para apuntar a diferentes dispositivos:

pantalla de solo
medios y (ancho mínimo: 768 píxeles) y (ancho máximo: 959 píxeles) { }

Todos los ajustes de estilo adicionales debe agregarse entre los corchetes {…} .

Como ejemplo, tomaremos el tema predeterminado de Twenty Ten que no responde de forma predeterminada.
El primer código establece el tamaño del marco principal del tema en 550px:

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, # site-title {
width: 550px;
}

Compare cómo se verá el sitio web en este caso en un dispositivo móvil:

aunque como puede ver, no todos los elementos se ajustan a la pantalla del dispositivo. Básicamente, debe ajustar por separado todos los elementos que tiene en su 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, 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 del 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: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 se ajusten en consecuencia, debe tener un aspecto agradable en los dispositivos móviles: la

mayoría de los temas de WordPress se crean para responder: al instalar un nuevo tema, puede verificar su aspecto adjunto en los dispositivos móviles, además.

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 características mientras busca el tema.