{"id":233547,"date":"2023-02-16T16:59:00","date_gmt":"2023-02-16T13:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233547"},"modified":"2022-11-11T00:16:48","modified_gmt":"2022-11-10T21:16:48","slug":"guia-como-usar-corretamente-o-ajax-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/guia-como-usar-corretamente-o-ajax-no-wordpress\/","title":{"rendered":"Guia: Como usar corretamente o AJAX no WordPress"},"content":{"rendered":"\n

AJAX \u00e9 uma t\u00e9cnica que voc\u00ea pode usar em Javascript para buscar dados do servidor e atualizar o conte\u00fado de sua p\u00e1gina sem recarreg\u00e1-la em seu navegador. Neste post vamos mergulhar em como usar corretamente o AJAX no WordPress.<\/p>\n

A maioria de voc\u00eas provavelmente est\u00e1 familiarizada com a execu\u00e7\u00e3o de solicita\u00e7\u00f5es AJAX fora do WordPress e deseja ver como fazer isso no WordPress. Voc\u00ea pode estar se perguntando sobre as seguintes perguntas:<\/p>\n

    \n
  1. Qual URL voc\u00ea deve enviar suas solicita\u00e7\u00f5es AJAX em seu Javascript.<\/li>\n
  2. Como realmente capturar a solicita\u00e7\u00e3o AJAX em PHP, buscar seus dados e enviar algo de volta.<\/li>\n
  3. Certificando-se de que suas solicita\u00e7\u00f5es AJAX s\u00e3o seguras.<\/li>\n<\/ol>\n

    No WordPress voc\u00ea pode realizar requisi\u00e7\u00f5es AJAX no admin e\/ou frontend; o processo \u00e9 o mesmo com algumas diferen\u00e7as em responder \u00e0s perguntas acima. Vamos mergulhar direto!<\/p>\n

    O b\u00e1sico para executar a solicita\u00e7\u00e3o AJAX no WordPress<\/h2>\n

    A primeira coisa que voc\u00ea precisa \u00e9, obviamente, do javascript onde voc\u00ea deseja enviar a solicita\u00e7\u00e3o AJAX. Ele deve ser enfileirado usando um m\u00e9todo v\u00e1lido de adicionar scripts ao WordPress<\/a>, seja frontend ou backend. Muito provavelmente voc\u00ea j\u00e1 tem um script configurado onde voc\u00ea s\u00f3 precisa da parte de enviar ou solicitar algo do WordPress.<\/p>\n

    Postar AJAX no WordPress requer que voc\u00ea passe uma vari\u00e1vel de objeto Javascript como dados para a solicita\u00e7\u00e3o. No objeto voc\u00ea precisa fornecer no m\u00ednimo uma propriedade; ‘ action<\/code>‘. O valor da action<\/code>propriedade ‘ ‘ \u00e9 uma string que pode ser (quase) o que voc\u00ea quiser. Esta a\u00e7\u00e3o \u00e9 o que diz ao WordPress como rotear a solicita\u00e7\u00e3o AJAX. Mas tamb\u00e9m define parte do nome do gancho que voc\u00ea precisar\u00e1 conectar no PHP para lidar com a solicita\u00e7\u00e3o AJAX.<\/p>\n

    Quando se trata de responder \u00e0 pergunta 1 acima: para qual URL voc\u00ea deve enviar sua solicita\u00e7\u00e3o AJAX? Isso difere dependendo se seu script est\u00e1 enfileirado em admin ou frontend. Como o AJAX j\u00e1 est\u00e1 embutido nas telas de administra\u00e7\u00e3o do WordPress, voc\u00ea pode simplesmente usar a vari\u00e1vel global ajaxurl<\/code>. Mas para solicita\u00e7\u00f5es de frontend fica um pouco mais complicado porque voc\u00ea precisa fornecer a URL AJAX manualmente junto com seu Javascript. Mais sobre isso abaixo.<\/p>\n

    Para lidar com solicita\u00e7\u00f5es AJAX em PHP, voc\u00ea se conecta \u00e0 a\u00e7\u00e3o wp_ajax_<your action name><\/code>. Se voc\u00ea deseja executar solicita\u00e7\u00f5es AJAX no frontend para usu\u00e1rios n\u00e3o logados, voc\u00ea tamb\u00e9m pode conectar-se ao wp_ajax_nopriv_<your action name><\/code>. Mais sobre isso abaixo. Dentro da sua fun\u00e7\u00e3o hooked voc\u00ea pode acessar os dados passados \u200b\u200bdo Javascript referenciando o $_POST<\/code>array. Para emitir algo de volta, voc\u00ea simplesmente ecoa algo. Essa \u00e9 a resposta curta para a pergunta 2 acima.<\/p>\n

    Vamos mergulhar direto no c\u00f3digo. Come\u00e7aremos com como adicionar solicita\u00e7\u00f5es AJAX no painel de administra\u00e7\u00e3o.<\/p>\n

    Executando solicita\u00e7\u00f5es AJAX no administrador do WordPress<\/h2>\n

    Suponho que voc\u00ea j\u00e1 tenha um script enfileirado que reage a alguma a\u00e7\u00e3o do usu\u00e1rio, coleta dados e est\u00e1 pronto para executar uma solicita\u00e7\u00e3o AJAX, seja para atualizar algo, ou para solicitar algumas informa\u00e7\u00f5es de volta do WordPress. O c\u00f3digo abaixo \u00e9 um exemplo bem simplificado; o c\u00f3digo enfileira um arquivo Javascript no tema para admin e, dentro do c\u00f3digo Javascript, ele configura algumas vari\u00e1veis \u200b\u200baleat\u00f3rias, executa o AJAX no carregamento da p\u00e1gina e gera a resposta no console.<\/p>\n

    add_action('admin_enqueue_scripts', function() {\n    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '\/assets\/js\/awhitepixel-ajax.js', ['jquery'], '', true);\n});<\/code><\/pre>\n
    jQuery(document).ready(function($) {\n    var data = {\n        'action': 'awhitepixel_send_something',\n        'something': 'Hello world',\n        'another_thing': 14\n    }\n    $.post(ajaxurl, data, function(response) {\n        console.log(response);\n    });\n});<\/code><\/pre>\n
    Como voc\u00ea pode ver no c\u00f3digo Javascript acima, voc\u00ea configura um objeto Javascript (pense nele como um array) com todos os dados que deseja passar, incluindo a importante action<\/code>propriedade ‘ ‘.<\/p>\n
    Tamb\u00e9m como mencionado acima, como o AJAX j\u00e1 est\u00e1 embutido nas telas de administra\u00e7\u00e3o do WordPress, voc\u00ea simplesmente usa a vari\u00e1vel global ajaxurl<\/code>como URL do AJAX.<\/p>\n
    Agora vamos adicionar o c\u00f3digo para aceitar esta solicita\u00e7\u00e3o AJAX em PHP. Como eu forneci ‘ awhitepixel_send_something<\/code>‘ como valor de action<\/code>‘, preciso me conectar a wp_ajax_awhitepixel_send_something<\/code>.<\/p>\n
    add_action('wp_ajax_awhitepixel_send_something', function() {\n    $something = $_POST['something'];\n    $another_thing = (int) $_POST['another_thing'];\n\u00a0\n    echo 'You sent '. $something. ' with '. $another_thing;\n\u00a0\n    wp_die();\n});<\/code><\/pre>\n
    Dentro de sua fun\u00e7\u00e3o enganchada voc\u00ea tem acesso total ao WordPress; voc\u00ea pode usar quaisquer fun\u00e7\u00f5es do WordPress, consultas e acessar vari\u00e1veis \u200b\u200bglobais (por exemplo, $wpdb<\/code>para consultas de banco de dados). Todas as vari\u00e1veis \u200b\u200bque voc\u00ea passou em Javascript estar\u00e3o dispon\u00edveis dentro $_POST<\/code>do array com as chaves que voc\u00ea forneceu no objeto Javascript.<\/p>\n
    \u00c9 opcional passar algo de volta para o Javascript (por exemplo, quando voc\u00ea deseja apenas enviar uma solicita\u00e7\u00e3o para atualizar ou salvar algo e n\u00e3o precisa de confirma\u00e7\u00e3o). Se voc\u00ea quiser passar algo de volta, simplesmente echo<\/code>sua sa\u00edda. Para gerar vari\u00e1veis \u200b\u200bmais complexas do que simplesmente uma string, voc\u00ea deve retorn\u00e1-la como uma matriz codificada em json para que o Javascript possa l\u00ea-la e analis\u00e1-la corretamente. Algo assim;<\/p>\n
    $pass_back = ['something' => 'a value', 'another_thing' => 42];\necho json_encode($pass_back);<\/code><\/pre>\n
    Uma nota final importante na \u00faltima linha; wp_die()<\/code>. Todas as fun\u00e7\u00f5es de retorno de chamada AJAX devem "fechar o encadeamento" ou terminar corretamente fazendo die()<\/code>ou exit()<\/code>. No WordPress, usamos wp_die()<\/code>para integra\u00e7\u00e3o adequada, mas o resultado \u00e9 o mesmo. Se acontecer de voc\u00ea receber um "0" estranho em suas respostas AJAX, \u00e9 mais prov\u00e1vel que n\u00e3o fez wp_die()<\/code>ou die()<\/code>. Sempre, sempre certifique-se de que “voc\u00ea morre" no final de todas as fun\u00e7\u00f5es conectadas ao wp_ajax<\/code>.<\/p>\n
    Executando solicita\u00e7\u00f5es AJAX no frontend do WordPress<\/h2>\n
    O processo de execu\u00e7\u00e3o do AJAX no frontend \u00e9 o mesmo que no admin, mas um pouco mais complicado para responder \u00e0 pergunta 1: em qual URL o AJAX deve postar. No exemplo acima para realizar AJAX em admin j\u00e1 t\u00ednhamos uma vari\u00e1vel Javascript global, ajaxurl<\/code>, mas esta vari\u00e1vel n\u00e3o est\u00e1 dispon\u00edvel no frontend. Precisamos fornec\u00ea-lo n\u00f3s mesmos. Para obter o valor da URL AJAX do WordPress que voc\u00ea usa admin_url('admin-ajax.php')<\/code>(sim, “admin url” para frontend).<\/p>\n
    Ao enfileirar um script de frontend que realizar\u00e1 solicita\u00e7\u00f5es AJAX em seu tema ou plugin, voc\u00ea precisa passar a URL AJAX do WordPress como vari\u00e1vel para esse Javascript, usando wp_localize_script()<\/code>.<\/p>\n
    add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php')\n    ];\n    wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
    Agora, no seu Javascript voc\u00ea tem acesso a um objeto Javascript global Theme_Variables<\/code>(esse nome pode ser o que voc\u00ea quiser), com a URL AJAX do WordPress como valor para a ajax_url<\/code>propriedade ‘ ‘. Sua fun\u00e7\u00e3o AJAX seria algo assim:<\/p>\n
    jQuery(document).ready(function($) {\n    var data = {\n        'action': 'awhitepixel_frontend_stuff',\n        'something': 'Hello world',\n        'another_thing': 14\n    }\n    $.post(Theme_Variables.ajax_url, data, function(response) {\n        console.log(response);\n    });\n});<\/code><\/pre>\n
    Ao lidar com AJAX no frontend, h\u00e1 mais uma coisa a ter em mente em rela\u00e7\u00e3o ao gancho que voc\u00ea usa para aceitar solicita\u00e7\u00f5es AJAX. Voc\u00ea ainda se conecta ao wp_ajax_<your action name><\/code>, mas este gancho s\u00f3 funcionar\u00e1 para visitantes que est\u00e3o logados. Se voc\u00ea deseja executar solicita\u00e7\u00f5es AJAX para visitantes que n\u00e3o est\u00e3o logados, voc\u00ea precisa (tamb\u00e9m) conectar ao wp_ajax_nopriv_<your action name><\/code>. Normalmente, para solicita\u00e7\u00f5es AJAX de frontend necess\u00e1rias para que o tema funcione corretamente, voc\u00ea conectaria ambos, apontando-os para a mesma fun\u00e7\u00e3o.<\/p>\n
    add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n    $something = $_POST['something'];\n    $another_thing = (int) $_POST['another_thing'];\n\u00a0\n    echo 'You sent '. $something. ' with '. $another_thing;\n    wp_die();\n}<\/code><\/pre>\n
    Quanto ao conte\u00fado de sua fun\u00e7\u00e3o de gancho AJAX, \u00e9 o mesmo que para solicita\u00e7\u00f5es de administrador. Voc\u00ea tem acesso completo ao WordPress, obt\u00e9m as vari\u00e1veis \u200b\u200bpassadas de $_POST<\/code>, opcionalmente retorna algo executando echo<\/code>, e deve sempre lembrar de “morrer” wp_die()<\/code>no final.<\/p>\n
    Protegendo suas solicita\u00e7\u00f5es AJAX<\/h2>\n
    Como o AJAX facilita muito a passagem de dados entre o script e o back-end, voc\u00ea definitivamente deve tomar as medidas necess\u00e1rias para tornar seu c\u00f3digo seguro. Isso inclui limpar todos os dados antes de salv\u00e1-los, mas tamb\u00e9m utilizar a funcionalidade “nonce” do WordPress para verificar se as solicita\u00e7\u00f5es v\u00eam de locais corretos e aceitos. Leia a documenta\u00e7\u00e3o<\/a> do WordPress imediatamente se voc\u00ea n\u00e3o estiver familiarizado com ele.<\/p>\n
    A premissa b\u00e1sica \u00e9 esta; voc\u00ea usa um m\u00e9todo WordPress gerando um valor nonce (wp_create_nonce()<\/code>) ou gerando um campo de entrada oculto com o valor nonce (wp_nonce_field()<\/code>). Na sua requisi\u00e7\u00e3o AJAX voc\u00ea passa o valor nonce (que \u00e9 codificado pelo WordPress) na requisi\u00e7\u00e3o, e na parte de aceita\u00e7\u00e3o (wp_ajax_<\/code>gancho) voc\u00ea verifica o nonce com o que voc\u00ea definiu originalmente.<\/p>\n
    Vamos adicionar alguma seguran\u00e7a ao c\u00f3digo de exemplo que fizemos acima. Primeiro vamos gerar um nonce e pass\u00e1-lo em nosso wp_localize_script<\/code>URL AJAX. Como par\u00e2metro para wp_create_nonce()<\/code>definirmos uma string \u00fanica que somente n\u00f3s devemos conhecer, por assim dizer. No exemplo abaixo eu estou indo para ‘ awhitepixel-nonce<\/code>‘.<\/p>\n
    add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'nonce' => wp_create_nonce('awhitepixel-nonce')\n    ];\n    wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
    O que \u00e9 passado como ‘ nonce<\/code>‘ em nossas vari\u00e1veis \u200b\u200bJavascript para o frontend \u00e9 um n\u00famero aleat\u00f3rio gerado pelo WordPress. Ningu\u00e9m al\u00e9m de n\u00f3s, autores deste roteiro, sabemos que o nonce v\u00e1lido \u00e9 ‘ awhitepixel-nonce<\/code>‘. Em nosso Javascript, pegamos o valor nonce e o passamos de volta em nossa solicita\u00e7\u00e3o AJAX:<\/p>\n
    jQuery(document).ready(function($) {\n    var data = {\n        'action': 'awhitepixel_frontend_stuff',\n        'something': 'Hello world',\n        'another_thing': 14,\n        'nonce': Theme_Variables.nonce\n    }\n    $.post(Theme_Variables.ajax_url, data, function(response) {\n        console.log(response);\n    });\n});<\/code><\/pre>\n
    E, finalmente, em nossa wp_ajax<\/code>fun\u00e7\u00e3o hooked, devemos come\u00e7ar verificando se o nonce era v\u00e1lido com wp_verify_nonce()<\/code>. Fornecemos a string exclusiva que definimos acima e, se o WordPress n\u00e3o corresponder ao valor codificado exclusivo transmitido com essa string, encerramos imediatamente:<\/p>\n
    add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {\n        wp_die(-1);\n    }\n\u00a0\n    $something = $_POST['something'];\n    $another_thing = (int) $_POST['another_thing'];\n\u00a0\n    echo 'You sent '. $something. ' with '. $another_thing;\n    wp_die();\n}<\/code><\/pre>\n
    Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
    Neste guia, vamos mergulhar em como usar corretamente o AJAX no WordPress. Veremos como adicionar solicita\u00e7\u00f5es AJAX no admin e frontend e como lidar com a seguran\u00e7a.<\/p>\n","protected":false},"author":1,"featured_media":224900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,837,1110,806,806,837,846,846,867,867],"tags":[1170],"class_list":["post-233547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-guia-para-iniciantes","category-n-a","category-php-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233547"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}