As soluções que eu vi são da perspectiva de adicionar recursos javascript a um tema. No entanto, o OP perguntou, especificamente: "Como exatamente o adiciono para uma única página do WordPress?" Parece que pode ser assim que eu uso javascript no meu blog Wordpress, onde posts individuais podem ter "widgets" diferentes baseados em javascript. Por exemplo, uma postagem pode permitir que o usuário altere variáveis (controles deslizantes, caixas de seleção, campos de entrada de texto) e plota ou lista os resultados.
A partir da perspectiva do JavaScript:
- Escreva suas funções JavaScript em um arquivo “.js” separado
Nem pense em incluir JavaScript significativo no html da sua postagem - crie um ou mais arquivos JavaScript com seu código.
- Faça a interface do seu JavaScript com o html da sua postagem
Se o seu widget JavaScript interage com os controles e campos html, você precisará entender como consultar e definir esses elementos do JavaScript e também como permitir que os elementos da interface do usuário chamem suas funções JavaScript. Aqui estão alguns exemplos; primeiro, do JavaScript:
var val = document.getElementById(“AM_Freq_A_3”).value;
E do html:
<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
- Use o jQuery para chamar a função de inicialização do seu widget JavaScript
Adicione isso ao seu arquivo .js, usando o nome da sua função que configura e desenha o widget JavaScript quando a página estiver pronta para isso:
jQuery(document).ready(function( $ ) {
your_init_function();
});
- No código html da sua postagem, carregue os scripts necessários para a sua postagem
No editor de código do Wordpress, normalmente especifico os scripts no final do post. Por exemplo, eu tenho uma pasta de scripts no meu diretório principal. Dentro, tenho um diretório de utilitários com JavaScript comum que algumas das minhas postagens podem compartilhar - nesse caso, algumas das minhas próprias funções de utilitário matemático e a biblioteca de plotagem flotr2. Acho mais conveniente agrupar o JavaScript pós-específico em outro diretório, com subdiretórios com base na data, em vez de usar o gerenciador de mídia, por exemplo.
<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
- Enfileirar jQuery
O Wordpress registra o jQuery, mas ele não está disponível, a menos que você diga ao Wordpress que precisa, enfileirando-o. Caso contrário, o comando jQuery falhará. Muitas fontes dizem como adicionar esse comando ao seu functions.php, mas suponha que você conheça outros detalhes importantes.
Primeiro, é uma má ideia editar um tema - qualquer atualização futura do tema apagará suas alterações. Faça um tema infantil. Aqui está como:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
O arquivo functions.php da criança não substitui o arquivo do tema pai com o mesmo nome, é adicionado a ele. O tutorial de temas filho sugere como enfileirar o arquivo style.css pai e filho. Podemos simplesmente adicionar outra linha a essa função para também enfileirar o jQuery. Aqui está o meu arquivo functions.php inteiro para o tema filho:
<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
// styles
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
// posts with js widgets need jquery
wp_enqueue_script('jquery');
}