Flashcards
Wordpress e Javascript
Cards in this deck (18)
- 1Quais são as principais armadilhas de se usar JavaScript com WordPress?-Conflitos com outros arquivos JavaScript
-Segurança(Principalmente quando usamos AJAX, enviar dados e receber dados.)
-Performance(Quanto maior nosso arquivo JavaScript, mais as pessoas tem que baixar resultando em uma queda de performance.) - 2Quais são os parâmetros do comando wp_enqueue_scripts()?wp_enqueue_script(
'my_sample_script' -> Handle(Unique identifier),
get_template_directory_uri() . '/js/sample.js' , -> Souce - the location of the JavaScript fil.
array( 'jquery' ), -> Dependencieis of our file, lembrar que existe na documentação uma lista de bibliotecas javascript que já vem com o WordPress - Não adicionar em cima!,
SAMPLE_VERION, -> Um numero, que pode ser definido como constante, é o numero da versão, aquela versão que aparece no inspetor, pode ajudar a resolver alguns conflitos.
true, -> true para carregar o arquivo no footer, false para carregar o arquivo no header. - 3Quais cuidados temos que ter ao adicionar nosso wp_enqueue_scripts() em nosso arquivo WordPress?Devemos pensar que adicionar nosso arquivo javascript em:
add_aciton('wp_enqueue_scripts', 'my_script');
vai carregar os scripts em todas as paginas, o que pode deixar nosso site mais devagar, devemos buscar carregar os scripts somente quando são necessários. - 4Como adicionamos scripts em paginas especificas apenas?function my_sample_enqueue_script() {
if( is_home()){
wp_enqueue_scrupt('my-sample-script', plugin_url(..))
}
}
adicionamos um if/else no inicio para verificar se estamos na pagina correta. - 5Como trabalhamos com JavaScript em WordPress com a função wp_localize_script()?utilizamos a função wp_localize_script()
que conta com os parâmetros:
wp_localize_script(
'my-sample-script',
//-> Handle of Script
'sample',
// -> Object name in JavaScript
array(
// -> Data and localized messages to pass into the JavaScript file.
'message' => __( 'Alert message' , 'sample-plugin'),
'is_new' => true
)
);
Então ao enviar esse objeto em nosso arquivo JavaScript, vamos ter:
Sample Object | Value
sample.message | "Alert Message"
sample.is_new | true - 6O que vimos?-Adding our scripts with wp_enqueue_script and wp_register_script.
-Using the 'wp_enqueue_scripts' or 'admin_enqueue_scrits' action
-Add conditions to only load our scripts when needed
-Passing data and translatable strings using wp_localize_script
Using jQuery in WordPress - 7Qual ferramenta foi um importante marco a partir do WordPress 4.4?WP_REST_API,
Que possui melhores praticas de AJAX, baixo nível de duplicações e codigo mais padronizado. Facilidade em integrar com aplicativos externos.
*antes nos utilizavamos admin-ajax.php
*temos que ver esse método caso tenhamos que dar suporte a versões anteriores do wordpress. - 8O que é um 'Endpoint'?É uma maneira de enviar e receber dados para o javascript dos nossos servidores WordPress.
Endpoint URL para registrar votos, por exemplo:
/wp-json/cupcake-voting/v1/votes
/wp-json
Esse primeiro caminho é o caminho comum para 'endpoint'
/cupcake-voting
A segunda parte é uma string unica para nosso 'endpoint' - precisa ser unico - lembrar que plugins também usam esse método.
/v1
Versão para controlar caso adicionemos novas funções. - ESPECIALMENTE importante quando temos um endpoint publico - em apps ou plugins.
/cupcake-voting/v1 - formam o NAMESPACE.
/votes -> chamado de route.
é uma função especifica para receber ou enviar dados, - 9Quando criamos um 'Endpoint' precisamos especificar quais métodos ele vai suportar, quais são os possíveis métodos para um 'Endpoint'?HTTP Methods for Calling Our Endpoint
GET | PUT
POST | DELETE
GET - é para ler o valor de alguma coisa, que pode ser os votos que nossos cupcakes tiveram(exemplo curso)
POST - É para adicionar algo novo, como um novo voto.
PUT - é para fazer o update de alguma coisa.
DELETE - é para deletar alguma coisa. - 10Como fazemos para registar nosso 'endpoint'?register_rest_route(
'cupcake-voting/v1', (our NAMESPACE)
'/votes/', (our ROUBE)
array( (os argumentos)
'methods' => 'POST', (metodos permitido)
'callback' => (nossa callback function)
'cupcake_add_vote',
)
); - 11O que temos que fazer para que nossa register_rest_route() function possa funcionar?Temos que ir em Settings / Permalinks
e clickar em SAVE, assim o WordPress vai verificar novamente se existe alguma função trabalhando com o rest_api e vai passar a rodar nossa função.
OU PODEMOS
noadicionar uma função function rest_api_function_active() {
flush_rewrite_rules();
}
register_activation_hook( __FILE__, 'function_you_want_to_call') - 12Como funciona a estrutura basica para adicionar esse 'endpoint' no rest_api?
- 13Qual parâmetro passamos em nossa callback function ?seguindo o exemplo acima, nossa callback function é cupcake_add_vote()
function cupcake_add_vote( WP_REST_Request $request ){
}
WP_REST_Request $request contém detalhes da request junto com qualquer dado passado - VIA POST, GET, UPDATE METHOD. , nós podemos acessar esses dados em alguns caminhos:
por exemplo, se uma id é enviada, podemos utilizar assim:
$id = $request['id'];
ou
$id = $request->get_param('id');
se tivermos um problema, podemos retornar o WP_Error( ' vote_error ', __('Unable to add vote'));
Podemos acessar qualquer variável da get_param('variable_name');
PODEMOS RETORNAR ESSES DADOS PARA TRABALHAR COM ELES NO FRONT END. - 14Qual a importância da validação e sanitização dos dados antes de utilizar? (Validation and Sanitization)Validar e sanitizar nossos dados antes de usa-los é vital para proteger nosso site contra atividades maliciosas quando passamos dados no wordpress e javascript.
Validation - É garantir que o dado que obtemos é o que esperamos.
Sanitization - é se assegurar dos dados que nos obtemos, antes de utiliza-los - 15O que temos que fazer para adicionar uma função de validação e sanatização?temos que passar um
'args' => array(
'id' => array(
'required' => true,
'validate_callback' => function_name
'sanitize_callback => 'absint'
adicionamos isso em nossa register_rest_route() function - 16O que são WordPress Nonces ?Wordpress Nonces - 'number used once', pode ser usado como parte do Cookie Authentication Process.
Nonces ajuda a verificar se uma request vem de um usuario real, porém Wordpress Nonces não são realmente únicas e podem ser usadas mais de uma vez em determindas situação.
Não pode ser usado como único método de autenticação, então temos que combinar com outras funções como current_user_can and is_user_logged_in - 17Como criamos uma WordPress Nonces ?em nossa function.php, na função
wp-localize_script(
'js_handle',
'object_js_name',
array(
'nonce' => wp_create_nonce( 'wp_rest' );
)
);
então em nosso arquivo php para verificar se a nonce está correta, vamos adicionar em nossa função $.ajax
beforeSend: function(xhr) { xhr.setRequestHeader( 'X-WP-Nonce', cupcake_voting_data.nonce );}
assim verificamos se a nonce está correta para o usuário.
Para complemetar podemos pedir alguma autenticação em nossa register_rest_route(), adicionando 'permission_callback' e então podemos deixar somente usuarios logados ou admins fazerem algo. - 18Como fazemos para chamar um end-pont em nosso javascript?nos vamos adicionar o url do end-point em nossa $.ajax request:
podemos fazer isso via hardcode:
$.ajax(''https://example.com/wp-json/cup-cake-votting/votes);
ou definindo uma variavel para a url em wp_localize_script e passando essa variavel no objeto para o javascript.