Come impostare una diversa homepage statica per la versione mobile? (wordpress)

Question

Mi piacerebbe avere una homepage statica diversa per la mia versione mobile del mio sito web. Non è davvero una versione mobile extra ma è reattiva.

Ho un dispositivo di scorrimento Immagine a schermo intero ora impostato come homepage statica. Questo si adatta alle schermate, a causa della build respositiva del sito Web, ma non sembra molto bello su un dispositivo mobile, come un iPhone. Quindi ho questo altro modello di homepage che vorrei utilizzare quando il sito viene visualizzato su un dispositivo mobile.

Questo può essere fatto con qualsiasi plugin o dovrebbe essere fatto tramite codifica? Non voglio usare un commutatore di temi o qualcosa del genere, voglio solo avere un diverso set di pagine statiche per dispositivi mobili.

Qualcuno sa come fare?

Answer 1

Si potrebbe utilizzare wp_is_mobile per verificare la presenza di mobili, e gancio in template_redirect per caricare un modello diverso se viene rilevato cellulare:

function so16165211_mobile_home_redirect(){ 
    if(wp_is_mobile() && is_front_page()){ 
     include(get_template_directory() . '/home-mobile.php'); 
     exit; 
    } 
} 
add_action('template_redirect', 'so16165211_mobile_home_redirect'); 

Answer 2

Si potrebbe provare a utilizzare detectmobilebrowsers script.

Come ricordo è solo un file php e ha una singola funzione che chiede come trattare diversi dispositivi mobili (iPhone, iPad, Androidi, telefoni Windows, dispositivi BlackBerry e Palm).

È possibile avere un'idea migliore di come funziona lo script andando a questa pagina function generator.

Answer 3

vorrei includere Mobile-Detect il tema nella propria cartella e aggiungere questo codice all'inizio del header.php:

if(is_front_page()){ 

    include_once('mobile-detect/Mobile_Detect.php'); 
    $detect = new Mobile_Detect(); 

    if ($detect->isMobile() || $detect->isTablet()) { 
     $redirect_url = 'http://example.com/mobile_home'; 
     header('Location: ' . $redirect_url); // Redirect the user 
    } 
} 

Si potrebbe personalizzare questa soluzione per lavorare proprio come si desidera. Ho usato questo per diversi progetti per soluzioni simili.

Answer 4

È semplice e non è necessario codificare tutto. Installa il plug-in "Reindirizzamento" dal repository wordpress. 1. Vai alla pagina delle impostazioni. 2. Immettere "URL origine" con l'home page predefinita del desktop 3. Sull'opzione "Corrispondenza", selezionare "URL e agente utente" & sull'opzione "Azione" selezionare "Reindirizza a URL". Fai clic su "Aggiungi reindirizzamento". 4. Apparirà la nuova opzione di configurazione. Dare qualsiasi titolo desiderato. L'URL di origine deve essere vuoto (significa che è la tua homepage di base). Nell'opzione "Agente utente", scegli se iPhone o Android. Nell'opzione "Corrispondenti", imposta il reindirizzamento desiderato per la home page mobile.

Fatto!

È sicuramente possibile differenziare la home page su desktop e dispositivo mobile in base al reindirizzamento impostato con quel plug-in. Tuttavia, non è possibile avere lo stesso nome di URL (ad esempio: www.abcde.com per desktop & www.abcde.com/mobilehomepage per dispositivi mobili).

Answer 5

Questo dovrebbe funzionare: (inserirla nel functions.php)

//* Redirect homepage on mobile 
 
add_action('wp_head', 'wps_params', 10); 
 
function wps_params() { 
 
    ?> 
 
    \t <script> 
 
\t if (window.location.pathname == '/' && jQuery(window).width() <= 480) { 
 
\t window.location = "/webshop/"; 
 
\t } 
 
\t </script> 
 

 
    <?php 
 
}

sostituire "/ webshop /" con il tuo link della home page mobile.

Answer 6

Questo è grande per me:

function so16165211_mobile_home_redirect(){ 
    if(wp_is_mobile() && is_front_page()){ 
     include(get_template_directory() . '/home-mobile.php'); 
     exit; 
    } 
} 

Answer 7

L'aggiunta dei seguenti al functions.php dovrebbe fare il trucco:

//* Redirect homepage on mobile 

add_action('wp_head', 'wps_params', 10); 

function wps_params() { 
?> 

<script> 
if (window.location.pathname == '/' && jQuery(window).width() <= 480) { 
    window.location = "/webshop/"; 
} 
</script> 

<?php 
}