Pas a Pas: Crear Botiga Online amb Local i pujar-la a un servidor

Ens centrarem a explicar com crear una botiga online sense necessitat de pagar un allotjament web (hosting) inicial, utilitzant eines com LOCAL, WordPress, WooCommerce i el tema premium Bridge. Es detalla el procés pas a pas, des de la configuració del servidor local fins a la personalització i les proves de la botiga.

Punts clau inicial

• 🔧 LOCAL (Servidor local)
• 🌐 WordPress (CMS gratuït)
• 🎨 Bridge (Tema premium)

Instruccions específiques per instal·lar LOCAL, configurar una base de dades i muntar WordPress en local.

 Punts per a Configurar WordPress con Local

• Descarrega e Instal·la Local
• Ves al lloc oficial de Local. LOCAL (Servidor local)
• Descarrega la versió adequada per al teu sistema operatiu (Windows, macOS, Linux).
• Executa l’instal·lador i segueix les instruccions per completar la instal·lació.

Crea un Nou Lloc:

• Obre Local després de la instal·lació.
• Fes clic al botó “Create a new site” (Crear un nou lloc).
• S’obrirà un assistent per configurar el teu nou lloc.

Configura els Detalls del Lloc:

• Nom del Lloc: Escriu un nom per al teu lloc (per exemple, la_meva_botiga).
• Domini Local: Local generarà un domini local automàticament (per exemple, la_meva_botiga.local).
• Ruta: Local triarà una carpeta on s’emmagatzemarà el teu lloc. Pots deixar l’opció predeterminada o triar-ne una altra.

Configura l’Entorn:

• Entorn: Pots triar entre un entorn recomanat (que inclou PHP, MySQL i servidor web) o personalitzar-lo.
• Versió de PHP: Selecciona la versió de PHP que desitges utilitzar (es recomana fer servir una versió recent).
• Base de Dades: Local crearà automàticament una base de dades per a tu.

          Configura les Credencials de WordPress:

• Nom d’Usuari: Estableix un nom d’usuari per accedir al panell d’administració de WordPress.
• Contrasenya: Tria una contrasenya segura.
• Correu Electrònic: Proporciona un correu electrònic per a l’administració de WordPress.

Crea el Lloc:

• Fes clic a “Add Site” (Afegir lloc) per crear el teu lloc. Local començarà a instal·lar WordPress i configurarà l’entorn.

Accedeix al teu Lloc:

• Un cop la instal·lació estigui completa, veuràs el teu nou lloc a la llista de llocs a Local.
• Fes clic a “Admin” per accedir al panell d’administració de WordPress.
• Pots accedir al teu lloc al navegador utilitzant el domini local que es va generar (per exemple, http://la_meva_botiga.local).

Configura i Personalitza el teu Lloc:

• Des del panell d’administració de WordPress, pots començar a personalitzar el teu lloc, instal·lar temes i connectors (plugins), i afegir contingut.

Instal·lació i activació del tema premium BRIDGE, comptant amb els plugins necessaris com WooCommerce i WPBakery.

Seguim els pasos un a un des de la descàrrega del plugin fins al punt d’instal·lar-lo i configurar-lo

• Ens registrem a Codecanyon
• Busquem la plantilla BRIDGE i la comprem
• Des del panell fem la descàrrega. Pugem la plantilla per FTP i trobarem adjunt als fitxers descarregats un fitxer PDF on hi ha el codi nostre de validació de seguretat de la plantilla. Copiem el codi
• Accedim a WordPress i a plantilles Activem Bridge.
• Dins del Taulell de WordPress ens apareix BRIDGE DASHBOARD i enganxarem el codi.
• Dins del mateix Dashboard ens apareix IMPORTAR. Si fem clic podrem veure totes les plantilles creades i amb 2 o 3 simples clics podrem importar al nostre servidor Local una plantilla ja creada per tal de senzillament editar-la.
• El mateix importar ens permet instal·lar ja els plugins necessaris i fins i tot els elements multimedia que més endevant al fer la nostra web substituirem pels nostres fitxers personals.
• Fem clic a l’últim panell de Bridge ( QODE OPTIONS) i pestanya a pestanya anirem configurant els menus, widgets, colors, estils de lletra, formats de text….

Creació de pàgines, productes, menús i tots els elements funcionals.

Ja tenim la plantilla activada i ajustada als nostres gustos i colors, ara ens falta crear el contingut.

Accedeix al Personalitzador de WordPress:

• Ves al teu panell d’administració de WordPress.
• Navega a Aparença > Personalitza.

Configura la Identitat del Lloc:

• Al personalitzador, selecciona Identitat del Lloc.
• Aquí pots afegir el teu logotip, el títol del lloc i la descripció.

Configura els Menús:

• Ves a Menús al personalitzador.
• Crea i organitza els teus menús de navegació (per exemple, menú principal, peu de pàgina).

Personalitza la Pàgina d’Inici:

• Selecciona Pàgina d’Inici al menú del personalitzador.
• Pots triar mostrar les teves darreres publicacions o una pàgina estàtica.

Ajusta la Configuració de WooCommerce:

• Accedeix a WooCommerce al panell d’administració.
• Configura les opcions de productes, pagaments, enviaments i més.

Utilitza el Constructor WPBakery:

• Si desitges un disseny més personalitzat, utilitza WPBakery Page Builder.
• Crea i edita pàgines arrossegant i deixant anar elements.

Afegeix Productes i Categories:

• Ves a Productes > Afegeix Nou per afegir productes.
• Organitza els teus productes en categories per facilitar la navegació.

Configura Ginys (Widgets):

• Ves a Aparença > Ginys per afegir ginys a àrees específiques (com ara la barra lateral o el peu de pàgina).

Prova i Publica:

• • Previsualitza els canvis al personalitzador.
  • Un cop estiguis satisfet, fes clic a Publica per desar els canvis.

Instal·lació de Local al Servidor online

Per tal de ser visible a tothom, la web ha d’estar online a un servidor.  Personalment treballo amb Lucushost amb els que estic molt agust amb el tracte i serveis.

1. Exportar la Base de Dades des de Local:

• Obre Local i selecciona el teu lloc.
• Fes clic a Database (Base de dades).
• Fes clic a Adminer o phpMyAdmin per accedir a la base de dades.
• Selecciona la base de dades del teu lloc i busca l’opció per Exportar.
• Tria el format SQL i guarda l’arxiu al teu ordinador.

2. Exportar Arxius del Lloc:

• A Local, ves a la carpeta on es troba el teu lloc (pots trobar la ruta a la secció de Site Setup).
• Copia tots els arxius del teu lloc (incloent el directori wp-content, wp-admin, wp-includes, i altres arxius del nucli de WordPress) a una carpeta del teu ordinador.

3. Pujar Arxius al Servidor de LucusHost:

• Accedeix al teu compte de LucusHost i obre el Panell de Control.
• Busca l’opció per Administrar arxius o FTP.
• Si fas servir FTP, connecta utilitzant un client FTP com FileZilla:
  • Servidor: el teu domini o adreça IP del servidor.
  • Nom d’usuari i contrasenya: els que et va proporcionar LucusHost.
• Puja tots els arxius que vas exportar des de Local a la carpeta arrel del teu domini (generalment public_html).

4. Crear una Nova Base de Dades a LucusHost:

• Al panell de control de LucusHost, busca la secció de Bases de dades.
• Crea una nova base de dades, un usuari i assigna permisos a l’usuari per a aquesta base de dades.
• Anota el nom de la base de dades, el nom d’usuari i la contrasenya.

5. Importar la Base de Dades:

• Accedeix a phpMyAdmin des del panell de LucusHost.
• Selecciona la base de dades que vas crear.
• Fes clic a Importar i selecciona l’arxiu SQL que vas exportar des de Local.
• Fes clic a Continuar per carregar la base de dades.

6. Actualitzar l’Arxiu wp-config.php:

• • Al servidor, busca l’arxiu wp-config.php a la carpeta arrel del teu lloc.
  • Obre l’arxiu i actualitza les següents línies amb la informació de la teva nova base de dades:
• dades a modificar:define(‘DB_NAME’, ‘nombre_de_tu_base_de_datos’);define(‘DB_USER’, ‘tu_usuario’);define(‘DB_PASSWORD’, ‘tu_contraseña’);define(‘DB_HOST’, ‘localhost’); // Generalment és localhost

7. Actualitzar les URL a la Base de Dades:

• Si el teu lloc en local feia servir un domini diferent (com ara localhost), necessitaràs actualitzar les URL a la base de dades.

• Pots utilitzar un connector com Better Search Replace o fer-ho manualment a phpMyAdmin:

• Executa les consultes SQL següents per actualitzar les URL:

UPDATE wp_options SET option_value = replace(option_value, ‘http://localhost/nombre_del_sitio’, ‘http://tudominio.com’) WHERE option_name = ‘home’ OR option_name = ‘siteurl’;

UPDATE wp_posts SET guid = replace(guid, ‘http://localhost/nombre_del_sitio’, ‘http://tudominio.com’);

UPDATE wp_posts SET post_content = replace(post_content, ‘http://localhost/nombre_del_sitio’, ‘http://tudominio.com’);

• Assegura’t de reemplaçar http://localhost/nom_del_lloc i http://eldominitemeu.com amb les teves URLs correctes.

8. Verifica el Lloc:

• Accedeix al teu domini al navegador i verifica que tot funcioni correctament.
• Revisa enllaços, imatges i funcionalitats per assegurar-te que la migració s’ha realitzat amb èxit.