Gli Hashbang fanno parte dell'URL per impostazione predefinita. Se desideri rimuoverli per una struttura URL più pulita, devi impostare un cosiddetto wildcard route per le pagine del Locator. Una volta completata l'implementazione del widget locator e page come previsto, l'hashbang (#!) può essere rimosso.

Requisiti

Assicurati che tutte le risorse esterne siano disponibili con un percorso assoluto e non relativo. L'utilizzo di un percorso relativo potrebbe causare problemi di risorse quando aggiungi le regole di riscrittura. Questo include, ma non è limitato a: Css e Javascript

Wildcard route per le pagine

Per fare ciò, la pagina in cui il widget Locator e Pages è integrato deve avere la possibilità di un wildcard route.

• Ad esempio: miodominio.com/negozi* oppure miodominio.com/negozi/*
• La configurazione del wildcard route varia notevolmente tra le soluzioni di hosting – vedi gli esempi sottostanti

Cambia l'URL originale del widget

Una volta impostato il wildcard route, l'URL originale del widget deve essere modificato.

Questo può essere fatto nel generatore di locator, nella sezione Generale, o utilizzando l'attributo data-widgetoriginurl come mostrato di seguito.

• Aggiungi l'attributo «data-widgetoriginurl» al div del widget e specifica lì l'URL della pagina in cui il widget store locator sarà integrato:
• Ad esempio: data-widgetoriginurl="https://miodominio.com/negozi"

Conferma la rimozione riuscita dell'hashbang

Il widget Locator e Pages deve funzionare correttamente con i nuovi URL. Per confermare che, controlla almeno i seguenti punti:

• Fai clic su uno qualsiasi dei luoghi nei risultati dell'elenco e la pagina della posizione corrispondente dovrebbe essere visualizzata
• Copia e incolla l'URL della pagina della posizione nella barra degli indirizzi del browser e premi Invio. La pagina della posizione corrispondente dovrebbe caricarsi

Esempio: WordPress

Il sistema di gestione dei contenuti (CMS) più popolare è WordPress. Poiché tutto WordPress è scritto nel linguaggio di programmazione PHP, il file «functions.php» è un file del sito web che controlla tutte le funzioni del tema WordPress, incluse azioni, filtri e classi.

Per configurare l'implementazione del widget Locator senza l'hashbang (#!) e creare una struttura URL più pulita in WordPress, devi aggiungere un frammento di codice «funzione di reindirizzamento» al tuo file «functions.php».

Per i seguenti aggiustamenti è necessario ottenere l'accesso al file «functions.php», conoscere l'ID pagina e il percorso URL del widget Locator.

Dove trovare l'ID della pagina del widget Locator?

Il modo più veloce per trovare l'ID della pagina di WordPress è fare clic su «modifica» della pagina specifica che conterrà il widget Locator. Il numero del parametro URL «post» indica l'ID della pagina.

L'aiuto di WordPress suggerisce lo stesso.

Come modificare il «functions.php»?

WordPress offre un editor integrato che ti consente di modificare i file del tema direttamente dal tuo browser – si chiama theme editor.

Nella vista di amministrazione di WordPress si trova nel menu laterale sotto la voce di menu «Appearance» (Aspetto) > «Theme Editor» (Editor tema)

Sul lato destro si possono trovare i file del tema e anche il file «functions.php». La selezione del file mostra il contenuto del file.

Tuttavia WordPress consiglia di utilizzare un plugin come Code Snippet per modificare il «functions.php» del tema del sito web.

L'alternativa è ottenere l'accesso al file «functions.php» tramite SFTP

• https://wordpress.com/support/sftp/#getting-started-with-sftp
• https://wordpress.com/support/sftp/#setting-up-a-client
• https://wordpress.com/support/sftp/#can-i-edit-functions-php
  • https://wordpress.org/support/article/editing-files/#text-editors

Aggiunta di un frammento di codice «funzione di reindirizzamento» al «functions.php»

Dopo aver raccolto l'ID della pagina e la possibilità di modificare il «functions.php», una semplice funzione deve essere aggiunta alla fine del file:

Sostituisci <STORELOCATOR_PATH> con l'URL del tuo widget Locator e <PAGE_ID> con l'ID della pagina ricevuto.

function redirect_to_store_locator() {
   add_rewrite_rule( '^<STORELOCATOR_PATH>/(.+)$', 'index.php?page_id=<PAGE_ID>', 'top' );
}
add_action('init', 'redirect_to_store_locator');

Come esempio:

Il Locator è ospitato su https://pulledporkparadise.wordpress.com/locator/ e l'ID della pagina ricevuto è 37.

function redirect_to_store_locator() {
   add_rewrite_rule( '^locator/(.+)$', 'index.php?page_id=47', 'top' );
}
add_action('init', 'redirect_to_store_locator');

Nel caso di URL diversi per i widget Locator, aggiungi un altro «add_rewrite_rule»

Come esempio:

Un Locator è ospitato su https://pulledporkparadise.wordpress.com/service_locations/ con l'ID pagina 5387 e un altro su https://pulledporkparadise.wordpress.com/gas_stations/ con l'ID pagina 78554.

function redirect_to_store_locator() {
   add_rewrite_rule( '^service_locations/(.+)$', 'index.php?page_id=5387', 'top' );
   add_rewrite_rule( '^gas_stations/(.+)$', 'index.php?page_id=78554', 'top' );
}
add_action('init', 'redirect_to_store_locator');

Fai clic su «Update File».

Successivamente, è necessario svuotare e rigenerare il database delle regole di riscrittura dopo aver modificato le regole. Dalle schermate di amministrazione di WordPress, seleziona Settings (Impostazioni) -> Permalinks (Permalink) e fai semplicemente clic su «Save Changes» (Salva modifiche) senza apportare modifiche.

Ora la configurazione è completata.

Esempio: Apache

Esistono due opzioni per rimuovere gli hashbang per Apache. Puoi utilizzare un file .htaccess o una configurazione del virtual host.

Configurazione del file .htaccess

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Configurazione del virtual host

Questo esempio mostra la configurazione per un server Apache locale. /Users/marcodegano/Sites rappresenta il punto in cui è ospitata la pagina Locator.

<VirtualHost *:80>
    # turn off .htaccess in root
    <Directory /Users/marcodegano/Sites>
         AllowOverride None
    </Directory>

    <Directory /Users/marcodegano/Sites>
        <IfModule mod_rewrite.c>
            RewriteEngine On
            RewriteBase /
            RewriteRule ^locator_test.html$ - [L]
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteCond %{REQUEST_FILENAME} !-d
            RewriteRule ^.*$ /locator_test.html [L]
            RewriteRule . /locator_test.html [L]
        </IfModule>
    </Directory>
</VirtualHost>

Esempio: Magnolia CMS

Devi utilizzare un Virtual URI mapping, simile a:

class: info.magnolia.virtualuri.mapping.RegexpVirtualUriMapping
fromUri: /.*
toUri: /v

Esempio: Node JS (Next JS)

Configura il file next.config.js con le tue regole di riscrittura URL.

async rewrites() {
    return  [
        {
          source: '/store-locator/:slug*',
          destination: '/store-locator'
        }
      ]
  }