Como adicionar JavaScript apenas a uma página específica do WordPress

Implementando JavaScript em uma página WordPress direcionada

WordPress é uma plataforma fácil de usar que simplifica o gerenciamento e a personalização de sites. No entanto, algumas alterações podem ser difíceis de implementar, incluindo a execução de JavaScript em uma página específica. É possível que um script que você adicionou à seção “Cabeçalho” do seu site agora esteja presente em todas as páginas. Esta é uma dificuldade típica de iniciante.

Compreender como aplicar um arquivo JavaScript condicionalmente é crucial ao usá-lo para direcionar uma página específica. O JavaScript pode ter consequências inesperadas e degradar a velocidade do seu site se for usado o tempo todo. Esta é a razão pela qual é crucial limitar o script à página necessária.

Orientaremos você no processo de alteração da configuração do WordPress neste artigo para que o JavaScript seja iniciado apenas nas páginas necessárias. A resposta também é compreensível para não desenvolvedores; este guia é destinado a quem está apenas começando.

Você deve se sentir confortável ao lidar com scripts específicos de páginas no WordPress quando terminar esta lição. Iremos guiá-lo através do código e procedimento precisos necessários para garantir que seu JavaScript seja executado apenas onde deveria, melhorando o desempenho do seu site.

Compreendendo a função do JavaScript em páginas específicas do WordPress

A maneira de colocar o script diretamente na seção "Head" pode fazer com que ele carregue em todas as páginas quando você precisar executar um JavaScript arquivo em uma página específica do WordPress. Em termos de experiência do usuário e desempenho, isso não é o ideal. As opções anteriores oferecem uma maneira mais eficaz de lidar com scripts, limitando o script apenas à página especificada. Por exemplo, podemos utilizar o WordPress is_page() método para determinar se o usuário está vendo uma determinada página com base em seu ID ou slug. Esta é a principal técnica usada para garantir que o arquivo JavaScript carregue somente quando necessário.

O primeiro método faz uso de tags condicionais no funções.php arquivo junto com wp_enqueue_script(). Essa técnica utiliza um recurso básico do WordPress que adiciona scripts de uma forma que garante o gerenciamento adequado de dependências e carrega o script na área apropriada da página. Através do wp_enqueue_scripts action hooking, a função JavaScript só será adicionada quando o WordPress processar uma página que satisfaça os is_page() exigência. Além de ser eficaz, isso impede a execução inútil de scripts em sites insignificantes.

Usar códigos de acesso faz parte da segunda estratégia. Os códigos de acesso do WordPress simplificam a adição de material dinâmico a uma página ou postagem. add_shortcode() pode ser usado para criar um shortcode personalizado, que permitirá inserir condicionalmente o script na área de conteúdo conforme necessário. Isso fornece mais opções se você quiser usar o script em seções específicas, em vez da página inteira de um site ou postagem. Além disso, é uma opção mais acessível para pessoas que não se sentem confortáveis ​​em fazer alterações diretas em arquivos PHP.

Outro método é perfeito para carregar scripts dinamicamente em páginas que possuem parâmetros específicos na URL, pois utiliza jQuery para procurar padrões específicos em URLs. janela.localização.href e $.getScript() são usados ​​nesta abordagem para identificar se uma string específica está incluída na URL e carregar o arquivo JavaScript adequadamente. Essa abordagem funciona bem para situações como sites de comércio eletrônico ou páginas de destino com códigos de rastreamento exclusivos, onde a estrutura do URL requer o uso de um script. Essas técnicas são todas modulares, reutilizáveis ​​e garantem que os scripts sejam carregados somente quando necessário, o que melhora a experiência e o desempenho do usuário.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

Otimizando o carregamento de JavaScript nas páginas do WordPress

O local onde o script é carregado é uma consideração crucial ao usar JavaScript em páginas específicas do WordPress. Por padrão, o WordPress permite que scripts sejam carregados na página rodapé ou cabeçalho. Por motivos de desempenho, geralmente é recomendado carregar o script no rodapé, principalmente ao usar recursos externos. Isso ocorre para que os usuários possam desfrutar de carregamentos de página mais rápidos, adiando a execução do JavaScript até que a página termine de carregar.

Você pode alterar o wp_enqueue_script() método para carregar um script no rodapé passando verdadeiro como parâmetro final. Ao fazer isso, você pode garantir que o script seja carregado antes da última tag corporal e do restante do conteúdo da página. Como os scripts menos cruciais são atrasados ​​e os recursos mais cruciais recebem prioridade, essa técnica ajuda a reduzir o tempo de carregamento aparente. Embora esta otimização possa não parecer muito para os novatos, ela tem um grande impacto na velocidade e funcionalidade de um site WordPress.

O impedimento de cache e o controle de versão são dois outros elementos cruciais. WordPress fornece um método fácil de usar o wp_enqueue_script() função para adicionar um número de versão aos scripts. Você pode garantir que os usuários não obtenham JavaScript desatualizado de seu cache adicionando um argumento de versão. Isso garante que a versão mais recente do script seja carregada constantemente, o que é extremamente útil durante o desenvolvimento ou atualização de um script. Este procedimento diminui a possibilidade de conflitos de script e melhora a funcionalidade do site.