Siga para ver cómo instalar y probar WooCommerce en su máquina local. Además, vea cómo otros pueden navegar por el sitio desde la Web o su red.
Antes de un lanzamiento público oficial de su tienda Woo, a veces es útil hacer una configuración inicial en su computadora personal. Puede hacer esto convirtiendo su computadora en un servidor web y ejecutando WordPress y Woo desde allí. En este artículo, discutiré este proceso y cómo probar WooCommerce localmente. Sin embargo, más que eso, explicaré cómo puede probar esta instalación local en diferentes dispositivos en su red y desde la Web global.
Tabla de contenido
Instalación de un servidor web PHP en su computadora local
El núcleo de WordPress está construido usando el lenguaje de programación PHPpor lo que necesita un servidor PHP para ejecutarse. Claro, también está cargado con un montón de HTML , CSS y JavaScript. Pero, sin un servidor PHP para ejecutar, WordPress simplemente no funcionará.
La mayoría de las veces podemos usar WordPress y WooCommerce sin tener que saber que PHP está al acecho detrás de escena. Y esa es una de las cosas maravillosas de WordPress. Agrega capas de abstracción a los bits, bytes y píxeles que componen nuestros sitios web. Pero, cuando queremos el lujo de jugar con él localmente, al menos saber que se necesita PHP puede llevarlo en la dirección correcta.
Hay una variedad de herramientas gratuitas y de pago disponibles para instalar un servidor PHP
Hay una amplia variedad de formas de hacer que un servidor PHP se ejecute en su máquina local, independientemente del sistema operativo. Algunas soluciones incluso están diseñadas específicamente para usuarios de WordPress. ServidorPrensatiene uno de esos ejemplos. Locales otro más.
He trabajado con varias de las herramientas para instalar un servidor PHP. Los pasos que siguen pueden funcionar sin modificaciones para su uso con cualquiera de ellos. Recientemente he estado usando XAMPPpara pruebas locales, por lo que discutiré el proceso asumiendo que XAMPP también está en uso de su parte. Pero como dije, es de naturaleza lo suficientemente general como para que funcione igual incluso cuando se usa Local, ServerPress u otros.
Captura de pantalla del servidor web local XAMPP ejecutándose.Por cierto, creo que XAMPP se pronuncia ZAMP, pero podría ser Ex-AMP, no estoy seguro.
Hay enlaces a los pasos para instalar XAMPP en la misma página que la descarga
Para instalar XAMPP, visite el enlace de arriba. Habrá una descarga disponible para todos los sistemas Windows, Mac y Linux. También hay enlaces a preguntas frecuentes para cada sistema operativo. En las preguntas frecuentes, verá los pasos para la instalación. Supongo que no tiene mucho sentido que las repita aquí.
Captura de pantalla con enlaces a la documentación de XAMPP.También verás la mención de Bitnami . Esto se puede utilizar para facilitarle la instalación de WordPress. Personalmente lo hago de forma manual, así que explicaré ese proceso a continuación.
Una nota rápida: hay 5 módulos diferentes disponibles al instalar XAMPP. Apache y My SQL son todo lo que se necesita para que WordPress y Woo funcionen. Por lo tanto, la instalación de FileZilla, Mercury y Tomcat es opcional.
Poner en funcionamiento WordPress y WooCommerce
Estos pasos son ciertamente específicos de XAMPP (sin Bitnami). Las otras herramientas mencionadas instalarán WordPress por usted (eso sí, probablemente una versión antigua de WordPress y con todo el historial de temas predeterminados de WordPress instalados, pero bueno).
De forma predeterminada, al menos en Windows, XAMPP se instala en C:xampp. La carpeta htdocsallí será la raíz del sitio web al que localhostapunta. Ese es el directorio donde se puede instalar WordPress.
Captura de pantalla del Administrador de archivos de Windows con archivos de WordPress en la carpeta htdocs de XAMPP.Una discusión rápida sobre cómo mantener limpias varias instalaciones de WordPress cuando se usa XAMPP
Probablemente sea demasiado para este breve artículo, pero si planea tener varias instalaciones de WordPress, hay una manera más limpia de hacerlo. Aquí hay un ejemplo rápido.
Digamos que tiene 3 sitios… wootest1, woo-customer-reviews-testy flower-shop.
Puede crear carpetas únicas dentro htdocsy también usar dominios locales para cada una. Entonces, en lugar de instalar WordPress htdocs, puede tener carpetas que coincidan con los nombres de los sitios mencionados anteriormente. Para esto, no usaría localhostnada, y tal vez se refiera a los sitios como http://wootest.dev, http://woo-customer-reviews-test.devy http://flower-shop.dev.
Sin embargo, dicho esto, los detalles de eso probablemente sean demasiado para este simple artículo. Entonces, sigamos con la instalación de WordPress y WooCommerce, ¿de acuerdo?
Pasos para instalar WordPress y WooCommerce localmente
De acuerdo, con XAMPP instalado, siga estos pasos a continuación:
- Descarga WordPress desde el sitio oficial de WordPress.org.
- Descomprímalo en la htdocscarpeta que XAMPP creó para usted. La extracción creará una carpeta llamada «wordpress» con el número de versión agregado. En eso habrá una carpeta llamada “wordpress”. Son los archivos en esa carpeta final de «wordpress» los que desea copiar a htdocs.
- Inicie XAMPP, inicie Apache y MySQL.
- Haga clic en el botón Admin para MySQL. Esto probablemente debería llevarte a localhost/phpmyadmin/. Eso espero.
- Haga clic en Nuevo a la izquierda, agregue un nombre en el cuadro de texto Nombre de la base de datos y luego haga clic en Crear . Tome nota del nombre de la base de datos , lo necesitará en breve.
- Ahora puede cerrar la pestaña en la que se inició phpMyAdmin. Sin embargo, mantenga XAMPP ejecutándose.
- A continuación, abra C:xampphtdocswp-config-sample.phpen un editor de texto sin formato.
- Edite el valor DB_NAME con el nombre de su base de datos, algo así como define( ‘DB_NAME’, ‘flower-shop’ ).
- Por ahora, DB_USER es probablemente rooty DB_PASSWORD está vacío como define( ‘DB_PASSWORD’, » ).
- Usar localhostpara DB_HOST .
- Guarde el archivo y luego cámbiele el nombre wp-config.phpeliminando la -sampleparte.
Captura de pantalla con los pasos para crear una base de datos de WordPress en phpMyAdmin.Deberias hacer eso. Se crea la base de datos y WordPress lo sabrá durante la instalación debido a las ediciones realizadas en el archivo WP Config. Enfriar. Ahora, en su navegador diríjase a http://localhost/ y siga los pasos para configurar WordPress. Esto es esencialmente la instalación de WordPress. Los pasos anteriores solo colocaron los archivos en su lugar.
A partir de ahí, por supuesto, instala WooCommerce desde la pantalla Complementos . Además, instale cualquier otro complemento con el que desee probar. Sin embargo, probar gradualmente sería mi consejo.
Haciendo que WordPress use URL relativas
WordPress debería funcionar bien para usted tal como está. Es probable que pueda buscarlo desde la misma máquina en la que tiene instalado el software del servidor. Y probablemente todo se vea como se esperaba en la parte delantera.
Sin embargo, si desea probar su instalación de WooCommerce en otros dispositivos en la misma red, o compartir el enlace con otros para visitar desde la Web, WordPress se pondrá un poco raro.
URL relativas frente a absolutas para pruebas locales
Puede configurar archivos de host en máquinas en su red local o navegar al sitio utilizando el nombre de la máquina en la que se encuentra el servidor . Eso puede funcionar para usted. Podría ser solo una cuestión de jugar con algunas configuraciones de permisos en el firewall. no puedo estar seguro Casi nunca es exactamente la misma situación.
Creo que una forma más sencilla es crear un túnel al sitio y darle un nombre de dominio público temporal. Este proceso se explica en la siguiente sección. Sin embargo, el problema con esto es que WordPress usa muchas URL absolutas. Es decir… si la dirección de su sitio local es http://flower-shop.dev/, cuando cambiamos el nombre de dominio a uno público, las cosas comienzan a fallar.
La solución es cambiar todas las URL a relativas, de modo que los enlaces http://flower-shop.dev/wp-content/themes/storefront/style.csssimplemente hagan /wp-content/themes/storefront/style.cssque el nombre de dominio sea menos relevante en este escenario.
Agregar algo de código para cambiar WordPress para usar URL relativas
Estamos un poco desordenados aquí porque este código para obligar a WordPress a usar URL relativas solo es relevante después de seguir los pasos de la siguiente sección. Sin embargo, lo estoy haciendo de esta manera para salvarlo de la desalentadora sensación de ver que su sitio colapsa en HTML sin ningún estilo.
Este paso implica agregar algo de código. Creé una publicación en el pasado sobre la creación de un complemento al escribir código personalizado . Entonces, si quieres, puedes echarle un vistazo rápido. Otra forma rápida de agregar algo de código es usando este genial complemento Code Snippets.
Aquí hay un enlace al código que uso para solucionar el problema de la URL absoluta:
WP-Ngrok-Local.
¿Qué es NGrok Local para WordPress?
NGrok Local es un repositorio antiguo en Github pero funciona. Mira para ver si NGrok está en uso y, de ser así, cambia WordPress para usar URL relativas. NGrok es la herramienta que le pediré que instale en la sección a continuación. Es lo que hará que su sitio de prueba local de WooCommerce obtenga el dominio público temporal que hace un túnel a su computadora.
El código PHP en el enlace anterior se puede agregar como un fragmento de código en WordPress, o como un complemento, depende de usted. Está destinado a usarse localmente para realizar pruebas cuando se usa NGrok.
Creación de una URL pública temporal para probar WooCommerce
Con todos los pasos anteriores completos, incluso si agrega el código NGrok anterior, WordPress debería comportarse como se espera en su máquina local. Ahora, le daremos una URL de acceso público para que sea más fácil verlo en otros dispositivos en su red, así como en la Web. Esto es útil para compartir públicamente, probar en dispositivos móviles, etc.
En este punto, debe instalar NGroken tu ordenador. Debe crear una cuenta o iniciar sesión con su cuenta de Google o Github si lo desea.
La descarga será un archivo zip que contiene el ejecutable ngrok. Puede ejecutarlo desde cualquier lugar donde se encuentre en su computadora. También es útil agregarlo a la RUTA para que pueda iniciarse desde cualquier carpeta en la línea de comandos. Personalmente creé una carpeta en C:groky copié el ejecutable allí.
Ahora, desde el símbolo del sistema, puede ir a esa carpeta para ejecutarlo. A continuación se muestra una captura de pantalla usando CMDen Windows. En este ejemplo, no está incluido en la RUTA, así que navegué hasta la C:grokcarpeta y escribí ngrok http 80para ejecutarlo. Estoy asumiendo el valor predeterminado del Puerto 80 aquí.
Captura de pantalla del símbolo del sistema de Windows a punto de iniciar NGrok.Obtener la URL temporal de NGrok para uso público
NGrok estará al tanto localhosty ahí es donde se conectará la URL pública que crea . Hay un comando diferente para usarlo con dominios locales .dev, pero no lo cubrimos por completo, así que dejaré ese tema en paz.
Captura de pantalla de NGrok finalmente ejecutándose dentro del símbolo del sistema de Windows.Esto le dará una URL asimilada . Puedes ver que en mi ejemplo es http://c038f20a395d.ngrok.io. Su enlace Grok ahora debería apuntar a su instalación de WordPress desde cualquier dispositivo en Internet o su red local. Cierre el símbolo del sistema y la tunelización se detiene.
¿Está recibiendo un error de «demasiadas conexiones»?
Este ejemplo demuestra el uso de Grok con la versión gratuita. Existen algunas limitaciones como el número de conexiones por minuto. Comprenda que cualquier página web que tenga enlaces a imágenes, archivos CSS, JavaScript y similares contiene múltiples conexiones . Cada enlace es una conexión.
WordPress muy a menudo tiene muchas conexiones. Este número crece según los complementos y el tema en uso. Por lo tanto, es muy posible que caduque el número asignado de conexiones por minuto. Es demasiado para entrar aquí, pero es posible insertar CSS, etc. para limitar las conexiones. Además, puede elegir un plan pago para Grok.
