HOME || Wordpress || Acceder desde el móvil a WordPress local
Creado el: 16 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Acceder desde el móvil a WordPress local (Versión AMP)

Acceder desde el móvil a WordPress local

Acceder desde el móvil a WordPress local

Acceder a WordPress local desde el móvil u otro dispositivo conectado a la red WiFi. Paso a paso cómo configurar la base de datos o plantilla de nuestro tema para una visualización correcta.

Indice de contenido

Acceder a WordPress local en el móvil

Acceder a WordPress en el móvil cuando lo tenemos instalado localmente en una PC con Windows puede ser una gran ventaja. Nos ayudará a chequear el diseño y contenido de nuestro sitio antes de publicarlo en un servidor remoto.

Voy a suponer que llegaste a este artículo y no tienes ningún servidor local y que todavía no instalaste tu WordPress. Si ya lo tienes te será más fácil entender el artículo y realizar los pasos que detallo a continuación.

No es recomendable que trabajes en WordPress local desde el acceso en tu dispositivo móvil, para crear entradas y diseñar tu sitio trabaja siempre de la PC y utiliza el acceso desde el móvil (celular o tableta)
solo con el fin de chequear el diseño.

Más allá de que la idea de instalar, programar y diseñar todo un sitio de manera local es buena y como dijimos nos viene de gran ayuda, sobre todo económica, ya que no deberemos comprar un dominio y pagar un servidor remoto mientras comenzamos a trabajar, quiero darte un consejo que, por experiencia propia, voy a terminar recomendándote:

No intentes involucrarte demasiado en el armado de todo tu sitio pensando que será cosa fácil subirlo a un servidor remoto. WordPress es uno de los mejores CMS en los que me ha tocado trabajar pero como todo nada es 100% bueno. En realidad no es que sea malo, al contrario pienso que es excelente pero para el usuario común que muchas veces utiliza este tipo de herramientas para construir un sitio a falta de conocimiento sobre programación web a nivel servidor te aseguro que no es nada fácil. No será cosa de exportar e importar, es algo más complejo. Rutas absolutas que deberás cambiar tanto a nivel base de datos como en todos tus archivos de plantilla, hojas de estilo y enlaces manuales que hayas creado. Haz oído hablar de las cadenas de texto serializadas? Si no es así es algo que tendrás que aprender si es que no quieres perder tus enlaces permanentes.

Algunos servidores remotos obligan a crear un prefijo sobre la base de datos y usuario de la misma. Cosa que no deberás hacer en localhost. Así que deberás retocar algunos archivos PHP de WordPress para que éste se pueda comunicar con la BD.

Si bien hay cientos de plugins en WordPress que nos ayudan a realizar estas tareas siempre intenta crear localmente un sitio a solo los efectos de prueba, para aprender, practicar, que sea tu conejillo de indias, instalar y desinstalar plugins, etc. Haz todo lo que no te atreverías a hacer en un servidor remoto con tu sitio publicado.

Vamos que nada es imposible! Así que si eres tan terco como yo comienza a programar tu sitio en localhost para luego complicarte la vida, y si no, toma mi consejo.

Instalar un servidor local en Windows

Antes que nada debes saber que para que esto funcione, independientemente del método que uses, hay que instalar un software en la PC donde vas a tener tu WordPress localmente corriendo como si fuese un servidor normal. Y precisamente eso es lo que hace XAMPP, nos permite tener de una manera muy fácil un servidor local Apache con base de datos MySQL, dos características esenciales para instalar WordPress. Si no lo tienes instalado visita el artículo donde te explico para a paso como instalar XAMPP

Instalar servidor local Apache en Windows usando XAMPP

Hay muchos programas que hacen esta tarea pero nos centraremos en XAMPP por su sencillez, por ser gratuito y por estar en constante revisión. Siempre instala la última versión de este programa, te asegurarás de tener todas las funcionalidades de Apache y MySQL, con la ventaja de contar con la seguridad que las últimas versiones que estos ofrecen.

Instalar WordPress en servidor local

Una vez instalado XAMPP con Apache y MySQL corriendo de maravilla en tu PC sólo te queda crear la base de datos que usará WordPress e instalarlo.

Puedes ver este otro artículo donde te explico todo el proceso de instalación de WordPress. Te aconsejo que sigas leyendo primero este artículo ya que si elijes el método Modificación de dominio en la base de datos tendrás que instalar WordPress modificando un valor en su instalación.

Instalar WordPress en Servidor Local Apache

Métodos para abrir WordPress local en el móvil

Voy a explicar 2 métodos para realizar esta tarea, aunque de seguro hay más me parece que pueden ser los más convenientes para la mayoría de los usuarios de WordPress.

Muchos programadores y diseñadores quieren dar un vistazo al sitio, para chequear su diseño y estructura, en los diferentes dispositivos móviles en los cuales los lectores van a acceder a nuestros artículos. De esta manera se podrán corregir errores antes de publicarlo en el servidor remoto.

  • Modificación de dominio en la base de datos
  • Modificación de la plantilla PHP del tema

Modificación de dominio en la base de datos de WordPress

Te aconsejo que solo realices este método si es que vas a instalar WordPress desde cero. Si ya lo tienes instalado y configurado y con muchas entradas puedes usar el método de Modificación de la plantilla del tema que usas en WordPress, el cual es menos “invasivo” y no tiene riesgos ya que no se toca la Base de Datos.

Cuando instalamos WordPress de manera local el dominio para poder visualizarlo en la PC es localhost. Para acceder a tu sitio deberás entrar a http://localhost/TU-SITIO/ con esto ser cargará la página principal de tu sitio.

El dominio localhost es accesible sólo desde la PC donde tenemos instalado nuestro servidor local (el que instalamos gracias a XAMPP). Si intentas acceder desde otro dispositivo, por ejemplo un celular o tableta conectado a la misma red WiFi que la PC, no podrás hacerlo correctamente.

Es ahí donde entra el método de Modificación de dominio en la base de datos. Vamos a modificar un parámetro en la instalación de WordPress para que se almacene un dominio basado en la IP de la PC donde está el servidor local. De esta manera tu sitio será accesible desde el navegador de cualquier móvil conectado a la misma red (Wifi o cable) mediante la dirección URL http://192.168.0.XXX /TU-SITIO/

Apuntar IP local en base de datos MySQL

Por defecto cuando creamos una base de datos local ésta se crea con el usuario root y sin contraseña y el dominio donde actúa es localhost. Este último es el valor que vamos a cambiar en la instalación de Wordpress por la de la IP de nuestra PC.

Deberías asignar una IP estática a tu computadora, así vas a poder acceder siempre a WordPress desde tu móvil bajo la misma asignación de IP. Si el router te la cambia por otra perderás el dominio configurado en la instalación de WordPress aunque cambiando nuevamente la IP en el router podrás recuperarlo nuevamente.

Dijimos que este método conviene usarlo solo cuando instalamos WordPress desde cero así que cuando vayas a instalarlo deberás especificar en Servidor la IP de la PC donde vamos a instalar WordPress localmente. Podemos ver en la foto cómo quedarían los valores.

IP como dominio de WordPress local
IP como dominio de WordPress local

Con esto WordPress tendrá en su base de datos el dominio basado en la IP de la máquina que actúa como servidor. Cuando carguemos cualquier página todos los enlaces apuntarán a la IP y no a localhost. En el ejemplo deberás reemplazar por la IP de tu PC.

Muchos podrán decir a este punto que el sitio era accesible desde el móvil desde la IP aunque instalemos en localhost y la respuesta es sí!, pero en parte, ya que WordPress utiliza enlaces absolutos en todo el sitio así que si cargamos la HOME y los enlaces a las hojas de estilo o scripts se apuntan hacia localhost el móvil no podrá acceder a ellos por lo que se cargará el sitio sin diseño y estructura, sin hojas de estilo y sin scripts importados, lo que no nos servirá de nada para tener una idea exacta de cómo se ve nuestro sitio en un dispositivo móvil cuando WordPress está instalado localmente. Además, al crear una entrada también se genera un enlace permanente apuntando de manera absoluta al dominio localhost por lo que el vínculo creado no funcionará en el móvil.

Modificación de la plantilla PHP del tema

El segundo método es más fácil y te lo recomiendo si es que ya tienes tu sitio WordPress instalado de forma local y con el dominio apuntado a localhost en la base de datos. Podrás acceder a la HOME sin problemas aunque los enlaces permanentes no funcionarán en móvil podrás acceder a tus artículos escribiendo manualmente la URL.

Para no cambiar valores en la base de datos y así evitar un posible desastre de esos que terminas diciendo para que me metí yo a hacer esto!! vamos a proceder a modificar algunas plantillas PHP de nuestro Tema (el que tenemos activado en Wordpress).

Si vienes leyendo el artículo sabrás que WordPress genera enlaces absolutos desde el valor que hayamos especificado en el campo Servidor al momento de instalarlo: Si tu servidor actúa sobre localhost tu enlace hacia la HOME será http://localhost/TU-SITIO/

Para visualizar cualquier página desde el móvil manteniendo el formato programa en las hojas de estilo deberemos agregar unos enlaces pero apuntando a la IP de la máquina servidor. Para esto abre el archivo wp-content/themes/TU-TEMA/header.php y después de la apertura de la etiqueta HEAD escribe todos los enlaces hacia tus hojas de estilo y scripts que encuentres especificando como dominio la IP de la máquina servidor.

Te muestro un ejemplo de cómo quedaría el archivo header.php

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>

<link rel='stylesheet' id='dashicons-css'  href='http://192.168.0.101/blog/wp-includes/css/dashicons.min.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://192.168.0.101/blog/wp-includes/css/admin-bar.min.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='http://192.168.0.101/blog/wp-includes/css/dist/block-library/style.min.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-theme-css'  href='http://192.168.0.101/blog/wp-includes/css/dist/block-library/theme.min.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='wpdm-font-awesome-css'  href='http://192.168.0.101/blog/wp-content/plugins/download-manager/assets/fontawesome/css/all.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='wpdm-bootstrap-css'  href='http://192.168.0.101/blog/wp-content/plugins/download-manager/assets/bootstrap/css/bootstrap.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='wpdm-front-css'  href='http://192.168.0.101/blog/wp-content/plugins/download-manager/assets/css/front.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css'  href='http://192.168.0.101/blog/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='twentysixteen-style-css'  href='http://192.168.0.101/blog/wp-content/themes/twentysixteen_child/style.css?ver=5.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='twentysixteen-block-style-css'  href='http://192.168.0.101/blog/wp-content/themes/twentysixteen/css/blocks.css?ver=20181230' type='text/css' media='all' />
<script type='text/javascript' src='http://192.168.0.101/blog/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://192.168.0.101/blog/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://192.168.0.101/blog/wp-content/plugins/download-manager/assets/bootstrap/js/bootstrap.min.js?ver=5.1.1'></script>
<script type='text/javascript' src='http://192.168.0.101/blog/wp-content/plugins/download-manager/assets/js/front.js?ver=5.1.1'></script>
<script type='text/javascript' src='http://192.168.0.101/blog/wp-content/plugins/download-manager/assets/js/chosen.jquery.min.js?ver=5.1.1'></script>

..... el archivo header.php sigue....

Ten en cuenta que de nada te servirá copiar y pegar este código ya que si utilizas un tema diferente al mío la URL cambiará por el de tu tema además de que el número de IP será diferente.

Para copiar todos los LINK que utiliza tu sitio hacia las hojas de estilo y scripts puedes abrir en la PC cualquier página de tu sitio y ver el código fuente de la misma. En el encabezado tendrás todo el código (etiquetas LINK y SCRIPT) que se necesita para visualizar correctamente el contenido.

Recuerda que esta operación de poder ver nuestro sitio en un móvil es solo para chequear el diseño y estructura y debería ser utilizado solo por el programador y/o diseñador de tu sitio. Cuando subas el contenido a un servidor remoto deberás eliminar todo este código de la plantilla PHP.

Teniendo un enlace a las hojas de estilo apuntando el vínculo hacia la IP de la máquina, cuando cargues una página desde el móvil desde la URL http://192.168.0.XXX/TU-SITIO/ se cargará el contenido formateado con el estilo que hayas diseñado. Es posible que no todas las funcionalidad de tu sitio estén activadas ya que si no copias el LINK hacia un Script éste no funcionará. Pero como te dije antes estos métodos nos sirven para dar un vistazo de nuestro sitio y no para programar directamente en ellos.

Resumen

Vimos Ver WordPress local en el móvil

Hemos visto de qué forma podemos visualizar nuestro sitio WordPress local desde un dispositivo móvil, tableta o celular. Teniendo en cuenta que los mismos deberán estar conectados a la misma red Wifi o Ethernet local que la máquina PC de escritorio donde tienes instalado el servidor Apache con tu WordPress.

Los métodos que vimos son poco invasivos, esto quiere decir que no modificamos valores que puedan arruinar nuestra base de datos y todo el contenido que se guarda en ella.

El primer método es el mejor ya que quedará definido el dominio directamente en la base de datos y todos los enlaces permanentes estarán formados por él. De esta manera podremos ver en el móvil una visualización perfecta de nuestro sitio, su contenido, estilo, y movernos mediante los enlaces de manera normal. La única contra de este método es que debemos usarlo solo si estamos instalando Wordpress desde cero.

Podríamos cambiar mediante una consulta SQL todos los valores de la base de datos modificando todos los localhost por IP pero ya estaríamos en un método más invasivo el cual prefiero no abordar en este artículo, pero que deberás hacer en algún momento de esta vida si es que quieres subir tu contenido a un servidor remoto.

En el segundo método modificando un archivo de plantilla del tema activo que eses en WordPress lograrás visualizar correctamente el contenido aunque los enlaces permanentes de todo tu sitio no funcionarán en el móvil y deberás escribirlos manualmente cada ves que quieras ver una página.

Te fue útil el artículo? Califícalo

Votos: - Promedio: