Wordpress e Javascript

Descripción

Pluralsight content
Victor Bini
Fichas por Victor Bini, actualizado hace más de 1 año
Victor Bini
Creado por Victor Bini hace casi 8 años
11
1

Resumen del Recurso

Pregunta Respuesta
Quais 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.)
Quais 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.
Quais 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.
Como 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.
Como 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
O 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
Qual 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.
O 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,
Quando 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.
Como 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', ) );
O 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')
Como funciona a estrutura basica para adicionar esse 'endpoint' no rest_api?
Qual 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.
Qual 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
O 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
O 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
Como 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.
Como 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.
Mostrar resumen completo Ocultar resumen completo

Similar

Wordpress
Samuel Melendez
E-Commerce
felice franco
Sitio de inmobiliaria en wordpress
kevin Salazar Zarate
Low cost WordPress themes
Deepika Sharma
WordPress Quiz 1 LDH Marketing
ldhmarketinguk
79mplus - PHP/WordPress Developer - WordPress Test
Md Mahmudur Rahm
Proyecto
Edhgar Lnx
Test de Nombres de Alimentos en Inglés
maya velasquez
Tipos de Sociedades
Nicolas Omana
PENSAMIENTO CRÍTICO
carandpoveda
CORRELATOS DEL DELITO.TEMA 3
Rafael Perez