Usando wp_is_mobile() no desenvolvimento do WordPress? Não se esqueça de ativar o recurso Vary para CDN

Julgamento de mídia CSS

Se for uma página que responde a um teste, por exemplo:

/* 移动端设备 (通常小于768px) */
@media only screen and (max-width: 767px) {
  /* 移动端样式 */
}

/* 平板设备 (768px到991px之间) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* 平板样式 */
}

/* PC端设备 (大于992px) */
@media only screen and (min-width: 992px) {
  /* PC端样式 */
}

Quando a CDN ativa o cache de site completo, a página exibe conteúdo diferente dependendo do dispositivo.

wp_is_mobile()desvantagens

Se um tema do WordPress for desenvolvido com umwp_is_mobile() para determinar o celular e o computador, isso acontece quando o CDN tem o cache ativado:

• Quando a página for visitada pela primeira vez em um celular: tanto o computador quanto o celular mostrarão a página do celular, owp_is_mobile() falhará, pois a página foi armazenada em cache.
• Quando a página for acessada pela primeira vez no lado do computador: tanto o lado do computador quanto o lado do celular mostrarão a página no lado do computador.wp_is_mobile() falhará, pois a página foi armazenada em cache.

prescrição

A solução para o problema acima requer o uso do recurso Vary

Quais são os recursos do Vary?

Vary é um novo cabeçalho de resposta HTTP adicionado após o HTTP/1.1. Quando um cliente inicia uma solicitação ao servidor de origem usando o mesmo URL, se houver versões diferentes do conteúdo do arquivo no servidor de origem, elas poderão ser armazenadas em cache por sistemas de cache intermediários (por exemplo, caches de navegador, CDNs de rede de distribuição de conteúdo) e talvez não consigam diferenciar os arquivos de resposta do cenário. Portanto, o servidor de origem pode adicionar um cabeçalho Vary à resposta HTTP para informar ao sistema de cache intermediário qual cabeçalho de solicitação usar para distinguir a versão em cache do conteúdo.

Por exemplo, quando as solicitações do cliente são todashttps://www.example.com/test.pdfPara distinguir entre as diferentes versões de arquivos no idioma do cliente, o cabeçalho de resposta HTTP adiciona o Vary: Accept-LanguageO EdgeOne criará o cache com base na solicitação do cliente para o Accept-Language O conteúdo cria diferentes versões do cache.

Quando o usuário A solicita um URL dehttps://www.example.com/test.pdfO cabeçalho da solicitação que é transportadoAccept-Language:zh-cnO EdgeOne responderá com o Documento A. Se isso acontecer, o EdgeOne responderá com o Documento B. Se isso acontecer, o EdgeOne responderá com o Documento C.

Quando o usuário B inicia uma solicitação para um URL dehttps://www.example.com/test.pdfO cabeçalho da solicitação que é transportadoAccept-Language:en-USO EdgeOne responderá com o Documento B. Se o EdgeOne não responder com o Documento B, o EdgeOne não responderá.

Veja a documentação oficial do Vary

método operacional

O método de operação é o seguinte:

Ativar na CDNVary 特性

Em seguida, no arquivo de funções do tema do WordPressfunctions.php Adicionar em:

/**
 * CDN必须开启 Vary 特性
 * 结合 wp_is_mobile()添加Vary: User-Agent响应头
 */
add_action('send_headers', function() {
    if (function_exists('wp_is_mobile')) {
        header('Vary: User-Agent');
        
        // 可选：添加额外的缓存控制头
        if (wp_is_mobile()) {
            header('X-Device-Type: Mobile');
        } else {
            header('X-Device-Type: Desktop');
        }
    }
});

Dessa forma, quando a CDN ativar o cache de site completo, as páginas correspondentes serão exibidas no celular e no computador.

---

Atividades de hospedagem recomendadas

Pronto para criar um site e ainda está procurando uma hospedagem WordPress barata? Dê uma olhada nos eventos de fornecedores recomendados!