é um pouco complicado determinar como adicionar CSS ou Javascript externo ao WordPress se você é apenas um usuário iniciante do WP. Portanto, antes de começarmos a dar algumas instruções sobre como adicionar CSS / Javascript externo ao seu site, gostaria de explicar as duas áreas principais em que você pode precisar usar CSS externo:
1) personalizações de sites
usar CSS e Javascript externos é uma ótima opção para personalizar seu site porque você pode facilmente manter o código, Editar e manter os arquivos e/ou códigos. No entanto, temos que dividir essas personalizações em dois tipos principais – Mini personalizações e personalizações maiores. Voltarei a esses tipos mais tarde e explicarei quais maneiras de adicionar códigos CSS / JS serão melhores para diferentes situações.
2) integrações de Serviços de terceiros
como todos sabemos, alguns dos serviços fornecem arquivos CSS e JS que precisam ser adicionados ao seu site, como Serviços de formulário, Caixas de bate-papo, adicionando código de Pixel do Facebook e até mesmo o Google Analytics. Como exemplo, apoiamos o Google Analytics e, na verdade, o processo de integração em nossas opções de tema é muito fácil e simples, mas se você deseja rastrear algumas análises diferentes e de uma maneira diferente, precisa usar os códigos externos gerados pelo Google.
3 maneiras de adicionar CSS / JavaScript externo
usando as opções de tema
se você precisar adicionar outros códigos ou adicionar um CSS rápido e pequeno e Javascript para personalizar seu site, as opções de tema são a solução mais apropriada. É um recurso integrado e é facilmente acessível a partir do seu painel do WordPress.
vá para Júpiter > opções de tema > avançado > CSS personalizado ou seção js personalizada.
Observe que na adição externa de CSS ou JavaScript em Opções de Tema, você pode adicionar um código que começa com <script></script> em JS Personalizada seção. Você deve remover o script< ></script> em seu código porque o código que você escreve na seção js personalizada já está publicando com uma tag <script></script>.
prós:
- a Melhor maneira de personalizar pequenas coisas com CSS e Javascript em Júpiter
- o Melhor caminho para pequenas e de médio alcance CSS e Javacscript códigos de Júpiter
- Nenhuma configuração / instalação necessária – já incorporada!
CONTRAS:
- mais Difícil de manter e atualizar
- Você não pode adicionar ficheiros directamente.css ou .arquivos JS externamente), a menos que você conheça a codificação AJAX.
- você não pode selecionar se o código será enviado em wp_header ou wp_footer.
usando um Plugin
Plugins são nossos ajudantes leais ao usar o WordPress. Você também pode adicionar seus códigos com um plugin como inserir cabeçalhos e rodapés. É uma ótima maneira de adicionar seus códigos ao seu site e funciona da mesma maneira que nosso recurso integrado. O bom deste plugin é que você pode selecionar se deseja adicionar seu código ao rodapé ou à área do cabeçalho, o que às vezes é crucial para algumas integrações.
ao contrário da nossa solução integrada, você pode adicionar <script></script> tags no plug-in inserir cabeçalhos e rodapés.
PRÓS:
- Você pode selecionar o local de código
- Ótima alternativa para a nossa solução built-in
- maneira Rápida e fácil de adicionar Facebook Pixel ou personalizados do Google Analytics códigos.
- Ótima maneira para integração de terceiros
CONTRAS:
- Precisa de plugin de instalação / configuração
- Difícil de manter e atualizar
- Você não pode adicionar ficheiros directamente como nossa solução built-in.
usar tema filho e estilo Enqueqe
usar o tema filho é o que recomendamos se você quiser fazer algumas personalizações de médio a grande porte, porque é a maneira mais segura de personalizar seu site. Com o tema filho, você poderá manter seus códigos e atualizar seus arquivos de tema principais facilmente.
você pode instalar o nosso tema filho oficial ou você pode criar o seu próprio. Você pode então começar a adicionar seus códigos CSS e personalizar seu site imediatamente no editor Appearance >. No entanto, se você quiser adicionar arquivos CSS externos e arquivos Javascripts, você tem que chamá-lo e escrever alguns códigos em funções.pai.
veja como vai:
- prepare seu arquivo CSS ou Javascript ou, se for uma fonte remota, prepare o link.
- crie um arquivo chamado functions.php
- adicione o seguinte código em funções.php
<?php
função add_theme_codes() {
wp_enqueue_style (“estilo”, get_stylesheet_directory_uri().’/myexternalcode.css’, ‘todos’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
com este código, você está criando uma nova ação para sua folha de estilo e chamando-a do Diretório de tema filho. Digamos que você tenha um “costume”.css ” arquivo que precisa ser adicionado ao seu site.
adicione esse arquivo em wp-content / themes / jupiter-child através de FTP e, em seguida, crie uma função.arquivo php. Em seguida, adicione o código acima e altere o ‘ / myexternalcode.css ‘para’ personalizado.css ‘ ou qualquer que seja o nome do seu arquivo. Por fim, você precisa adicionar suas funções.php para o seu tema filho também.
aqui está outro exemplo, se você não tiver um arquivo, mas uma fonte remota precisar ser adicionada:
<?php
função add_theme_codes() {
wp_enqueue_style( ‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’, ‘todos os’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
no exemplo acima, não usamos get_stylesheet_directory_uri () porque o arquivo de origem é remoto. Além disso, você pode chamar arquivos diferentes do seu servidor usando links Como OS acima.
prós:
- o Melhor para todos os tipos de personalizações
- Melhor para terceiros e Integrações Complexas
- Fácil de manter e editar
- Você pode adicionar ficheiros locais ou remotos diretamente
- Um dos métodos mais seguros para actualizações
CONTRAS:
- Precisa de um pouco de configuração de
- Requer um pouco de conhecimento de codificação (ou pelo menos você deve estar disposto a aprender)
- Não é a maneira mais rápida para pequenas personalizações
Qual é a melhor opção para diferentes situações?
se você quiser fazer alterações ou personalizações rápidas, as opções de tema serão a melhor opção para você. No entanto, se você quiser mais flexibilidade e controle sobre seu código e localização de código, e você ainda tem personalizações de pequeno a médio alcance, inserir cabeçalhos e rodapés vai funcionar bem para você.
mas, se você quiser fazer grandes personalizações, integrações de terceiros ou se quiser ter um ambiente de desenvolvimento sustentável, o tema filho é sua melhor aposta. Se precisar de mais ajuda para adicionar CSS ou Javascript externo ao seu site, você sempre pode contar com a ajuda do Artbees Care.
