Share
Con la rapida crescita di utenti di smart phone, è diventato sempre più importante nello sviluppo web per garantire che i visitatori che accedono al tuo sito web tramite dispositivi palmari siano adattati in modo appropriato. Ci sono diversi modi in cui questi visitatori possono essere presi di mira, e in questo tutorial esploreremo la creazione di una funzione per rilevare nativamente gli utenti di iPhone in WordPress.
Assicurati di incollare la funzione prima della chiusura etichetta. Per impostazione predefinita, i temi TwentyEveven e TwentyTen utilizzano il body_class (); funzione nel file header.php per aggiungere dinamicamente le classi allo standard etichetta.
Ad esempio, se stai visualizzando una singola pagina in WordPress, è un esempio di una classe del corpo per una singola pagina / post, che ti permetterebbe di cambiare lo stile di alcuni elementi del tuo progetto in modo dinamico usando i CSS. Se il tuo tema non usa il body_class (); tag (anche se dovrebbe davvero farlo già!), andare avanti e includerlo, in questo modo:
>
WordPress ha un numero di variabili globali che possono essere utilizzate per il rilevamento del browser, incluso il $ is_iphone variabile. Useremo questa variabile insieme al sistema di classe corporea in WordPress. Per fare ciò, dobbiamo prima scrivere una funzione:
Questa è la nostra funzione. In primo luogo, diamo alla nostra funzione un nome di? Detect_iphone? in modo che possiamo decifrare dalle nostre altre funzioni. Si noterà quindi aggiunto? Globale? a noi $ is_iphone variabile, questo perché la variabile è definita al di fuori della nostra funzione. Diciamo poi a WordPress che se questa condizione è soddisfatta (se l'utente sta navigando il sito da un iPhone), per aggiungere? Iphone? alla nostra classe corporea. Vai avanti e incolla questo snippet di codice sopra la chiusura tag in header.php
Questa funzione ora ci consente di indirizzare in modo mirato gli utenti di iPhone utilizzando i CSS, utilizzando il nostro nuovo iphone? classe. Ad esempio, potremmo includere quanto segue nel nostro foglio di stile per mostrare il nostro h1 tag in modo diverso agli utenti di iPhone:
h1 font-size: 30px; altezza della linea: 110%; decorazione del testo: sottolineatura; .iphone h1 font-size: 35px; decorazione del testo: nessuna; colore: # FF0000;
C'è un numero crescente di metodi per rendere i siti WordPress amichevoli per il nostro pubblico mobile, e spero che questo suggerimento rapido ti abbia aiutato a capire un altro approccio per affrontare i siti ottimizzati per i dispositivi mobili.
Vi incoraggio a discutere i vostri metodi preferiti per rendere i vostri siti WordPress ottimizzati per i dispositivi mobili nei commenti seguenti!
Accentsconagua