WordPress Customizer Typography: Como carregar apenas as Fontes Google originais?

Tenho 10 grandes checkboxs de combinação desmontáveis ​​de centenas de fonts, incluindo fonts do sistema e fonts do Google. Todas as checkboxs combinadas carregam os mesmos valores.

Há mais duas checkboxs combinadas para cada uma das checkboxs acima, para carregar o idioma e os conjuntos de letras de caracteres. Estes só devem ser visíveis / ativos se a fonte selecionada for uma fonte do Google.

Estou recebendo todos os tipos de letra nas listas selecionadas através de um arquivo JSON via json_decode . Antes, eu estava usando checkboxs de combinação separadas para Fontes do Sistema e Fontes do Google, e a tarefa era pouco mais simples do que o que eu tenho agora.

O arquivo JSON é como abaixo (apenas um exemplo):

 { "fonts":[ "Arial", "Helvetica", "Georgia", "Aclonica", "Acme", "Actor", "Adamina", "Advent Pro", "Aguafina Script" ] } 

Então eu estou usando uma function (chame isso JSON_fonts) para obter todos esses valores do arquivo JSON como uma matriz.

 $wp_customize->add_control( 'font_1', array( 'label' => esc_html( 'Body Font', 'my_theme' ), 'section' => 'typography', 'type' => 'select', 'choices' => JSON_fonts() ) ); 

(Eu acho que devo usar arquivos JSON separados para fonts do sistema e fonts do Google).

O que eu quero fazer é atribuir chaves às fonts nas checkboxs de seleção para detectar seu tipo (é uma fonte do sistema ou Google).

Se o valor selecionado for uma fonte do Google, então:

  1. Cole-o em uma variável para usá-lo ainda mais para en-queue.
  2. Ative as checkboxs de seleção de idioma e fonte-peso para a respectiva fonte-face.

En-queue não é um problema, mas obter o tipo de fonte e os valores exclusivos são muito problemáticos para mim.

  • Complexidade 1: Obtendo o tipo de fonte
  • Complexidade 2: Se as fonts combinarem, mesclar o respectivo idioma e as listas de letras da fonte (a correspondência um-para-um será muito código).
  • Complexidade 3: pedindo wp-ajax para recarregar a fonte sem atualizar o personalizador.

Qualquer ajuda seria muito apreciada. Além disso, sinta-se livre para compartilhar suas idéias para reduzir o nível de complexidade.

Solutions Collecting From Web of "WordPress Customizer Typography: Como carregar apenas as Fontes Google originais?"

Esta questão é muito ampla para uma resposta completa em um formato de perguntas e respostas, mas aqui é mais ou menos o que eu faria:

  1. Coletar todas as fonts do sistema em uma matriz $sys_fonts
  2. Coletar todas as fonts do Google em uma matriz $ggl_fonts
  3. Coletar informações completas sobre fonts do Google em uma multidimensional array $ggl_fontinfo
  4. $sys_fonts e $ggl_fonts em uma matriz $total_fonts
  5. Use $total_fonts para o menu suspenso
  6. Usando jquery, descubra qual item é selecionado no menu suspenso
  7. Se o item estiver em sys_fonts use o procedimento normal para alterar o css sem recarregar a página.
  8. Se o item estiver em ggl_fonts use-o como uma chave para procurar variantes (negrito, itálico, etc.) e subconjuntos (idiomas) em ggl_fontinfo . Em seguida, adicione campos de forma dinâmica ao formulário. Uma vez que tudo está configurado, procure quais arquivos de fonte você precisa em ggl_fontinfo e carregue-os dinamicamente na página.

Cuidado com isso, dependendo de suas habilidades, isso pode demorar vários dias para ser implementado (e é por isso que você provavelmente não receberá uma resposta pronta para cortar e colar aqui gratuitamente)

O que você pode fazer é adicionar um prefixo a cada key escolha para cada fonte do Google, para que suas escolhas pareçam algo assim:

 $choices = array( '_google_open_sans' => 'Open Sans', '_google_titillium' => 'Titillium Web', 'arial' => 'Arial', ); 

Então, quando você passar pela sua lista de fonts selecionadas, você pode apenas verificar o prefixo _google_ na chave. Você pode usar o Carregador de Fontes da Web para atualizar o Customizer sem atualizar. Basta conectar-se a uma atualização seletiva .

Um pouco complicado demais?

Na verdade, tentei uma abordagem acima para um tema que fiz para um cliente. Usei a API de fonts do Google para puxar a lista de fonts, esconda-a e misture-as com uma lista pré-gerada de fonts de sistema, tudo para as opções de seleção de fonts.

No entanto, o sistema final foi um pouco complicado. Eu substituí cada menu suspenso por duas checkboxs de texto. O primeiro especificou a declaração de importação do Google Font para executar (como Titillium+Web:400,400i,600,600i ), enquanto a segunda especificou a fonte-família (como "Titillium Web", Arial, sans-serif ).

Isso foi realmente mais fácil para meu cliente. Em vez de escanear através de um menu suspenso loooong, ele apenas teve que copiar e colar o que ele precisava. Isso também eliminou a necessidade de armazenar em cache a lista de fonts.