Detectare lățime ecran în funcții WordPress

Question

Detectare lățime ecran în funcții WordPress

5 iun. 2017, 11:38:47

Vizualizări: 14.5K

Voturi: 1

Caut o metodă să adaug A înaintea meniului dacă suntem pe desktop și să adaug B dacă suntem pe dispozitiv mobil.

Acestea sunt funcțiile mele pentru A și B:

add_action( 'wp_head', 'A_function' );
function A_function() {
    //adaugă A
}
add_filter( 'wp_nav_menu_items', 'B_function', 10, 2 );
function B_function() {
    //adaugă B
}

Știu că trebuie să folosesc aceste hook-uri în fișierul functions.php, dar nu știu cum să o fac. Știu că putem folosi wp_is_mobile().

Cum pot realiza acest lucru?

Yoona

45

mobil

Comentarii

nu este posibil să facem acest lucru în mod fiabil pe partea de server, deoarece nu știm prea multe despre ecranul dispozitivului. Acest lucru face, de asemenea, imposibilă utilizarea cache-ului și eșuează atunci când aveți dispozitive care își schimbă dimensiunea, de ex. ferestre de browser, telefoane pliabile, moduri de ecran divizat etc. Utilizați în schimb interogări CSS media pentru a muta elementele pe partea de client

Tom J Nowell

16 ian. 2023 15:01:19

Toate răspunsurile la întrebare

Comentarii

ideea foarte proastă, nu este fiabilă, strică caching-ul, nu este responsive și probabil are și alte dezavantaje

Mark Kaplun

5 iun. 2017 12:32:37

@MarkKaplun Ei bine, nu pot gândi altă metodă pe partea de server pentru a face asta, și nu cred că vom putea realiza acest lucru prin AJAX deoarece filtrele sunt deja aplicate după încărcarea paginii? Trebuie să alegem între rău și mai rău (Prost nu se aplică aici)

Johansson

5 iun. 2017 12:36:36

Codul PHP al WordPress rulează pe partea de server — nu poate și nu este conștient de ecranul dispozitivului client.

wp_is_mobile() se bazează pe detectarea agentului utilizator, adică încearcă să potrivească datele furnizate de browser-ul clientului. Această tehnică este considerată notoriu de nesigură și cu o utilitate foarte limitată.

Deoarece nu furnizați context despre scopul pe care îl servesc link-urile dvs., este dificil să recomandăm o abordare potrivită. Tehnicile pe partea de client, cum ar fi interogările media CSS, sunt frecvent utilizate pentru detectarea fiabilă a contextului în browser-ul clientului.

Rarst

100K

5 iun. 2017 12:13:46

wp_is_mobile() nu ar trebui folosit niciodată. În prezent, existența sa este legată în principal de unele bug-uri ale browserului care trebuie gestionate pe partea de administrare.

Pentru orice care necesită conștientizarea dimensiunii fizice a dispozitivului sau a dimensiunii ferestrei browserului, acest lucru ar trebui realizat cu reguli media în CSS și JavaScript.

Mark Kaplun

23.7K

5 iun. 2017 12:38:13

Comentarii

Cred că problema este că OP încearcă să adauge conținut HTML în funcție de user agent, ceea ce ar face CSS-ul inutil. M-aș putea gândi doar la soluția de a scrie tot codul într-un fișier JavaScript și de a gestiona problema acolo.

Johansson

5 iun. 2017 12:42:49

modul corect de a face acest lucru este pur și simplu să-l adaugi întotdeauna și să dezactivezi afișarea acestuia atunci când nu este necesar. Chiar nu există altă cale... cel puțin nu dacă vrei să fii responsive

Mark Kaplun

5 iun. 2017 13:11:01

Johansson 15.4K · Accepted Answer · 2017-06-05T12:11:26Z

Conform codex-ului, wp_is_mobile(); este o funcție booleană care returnează true dacă utilizatorul vizitează site-ul pe un dispozitiv mobil, deci ceea ce aveți nevoie este:

if ( wp_is_mobile() ) {
    // Rulează acest cod doar pentru vizitatorii pe dispozitive mobile
    add_filter( 'wp_nav_menu_items', 'B_function', 10, 2 ); function B_function(/* adaugă B */ );
} else {
    // Dacă nu suntem pe mobil, atunci rulează acest filtru
    add_action( 'wp_head', 'A_function' ); function A_function(/* adaugă A */);
}

Johansson

15.4K

5 iun. 2017 12:11:26