{"id":233393,"date":"2023-02-12T12:21:00","date_gmt":"2023-02-12T09:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233393"},"modified":"2023-02-16T17:02:18","modified_gmt":"2023-02-16T14:02:18","slug":"effettuare-la-ricerca-di-completamento-automatico-in-wordpress-con-il-codice","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/effettuare-la-ricerca-di-completamento-automatico-in-wordpress-con-il-codice\/","title":{"rendered":"Effettuare la ricerca di completamento automatico in WordPress con il codice"},"content":{"rendered":"\n

Questo tutorial \u00e8 per te che desideri implementare una ricerca di completamento automatico in WordPress, dove abbiamo il pieno controllo delle corrispondenze restituite.<\/p>\n

Applicheremo un completamento automatico alla ricerca standard di WordPress, ma il codice \u00e8 altamente flessibile in modo da poter personalizzare la query in base alle tue esigenze. Che si tratti di una query pi\u00f9 specifica da parte di un tipo di post personalizzato, meta di post, categorie o query su un tipo di contenuto completamente diverso come utenti o qualcosa di manuale dal database. Puoi anche applicare facilmente il completamento automatico su un input di ricerca personalizzato invece della ricerca standard di WordPress.<\/p>\n

Cosa faremo<\/h2>\n

Il completamento automatico \u00e8 una casella dell’interfaccia utente che appare sotto il campo di ricerca che mostra le corrispondenze durante la digitazione. Dopo aver fatto clic su una corrispondenza, il browser ti invier\u00e0 al permalink di quel post. Ci\u00f2 fornisce all’utente finale un modo pi\u00f9 veloce per navigare tra i tuoi contenuti poich\u00e9 non avr\u00e0 bisogno di fare una deviazione aggiuntiva alla tua pagina dei risultati di ricerca. Useremo AJAX per aggiornare continuamente le partite mentre l’utente digita.<\/p>\n

\"Effettuare<\/a><\/p>\n

Il completamento automatico viene generato con l’aiuto di jQuery UI Autocomplete<\/a>, uno script incluso in WordPress come predefinito.<\/p>\n

Impostazione del codice<\/h2>\n

Dovrai aggiungere il codice nel functions.php<\/code>file PHP del tema o in un plugin attivo. Questo tutorial si basa sull’aggiunta in un tema. Regola i percorsi per adattarli al tuo progetto.<\/p>\n

Il primo passo \u00e8 creare un file Javascript che conterr\u00e0 il nostro codice per attivare il completamento automatico. Per quanto riguarda questo tutorial creer\u00f2 un autocomplete.js<\/code>file vuoto nella cartella del mio tema assets\/js\/<\/code>. Dove posizionare il file dipende da te, ricordati solo di regolare i percorsi di seguito. Torneremo su questo file dopo aver accodato correttamente questo file in WordPress.<\/p>\n

Accodamento di script e stili<\/h3>\n

Dobbiamo accodare il nostro file Javascript di completamento automatico e dobbiamo anche assicurarci di accodare jQuery e jQuery UI Autocomplete. Inoltre, WordPress non include alcuno stile per le librerie dell’interfaccia utente jQuery, quindi \u00e8 necessario anche accodare un foglio di stile per l’interfaccia utente jQuery da Google CDN. Questo \u00e8 ovviamente facoltativo. Puoi aggiungere il CSS in un altro modo o forse preferisci personalizzarlo tu stesso.<\/p>\n

Metteremo in coda tutti gli script e gli stili in una funzione collegata a wp_enqueue_scripts<\/code>:<\/p>\n

add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n});<\/code><\/pre>\n
La [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>chiamata alla funzione sopra aggiunger\u00e0 il nostro file Javascript appena creato con le dipendenze corrette (l’array come terzo parametro). Ci\u00f2 garantisce che WordPress aggiunga gli script di completamento automatico dell’interfaccia utente jQuery e jQuery nella nostra istanza di WordPress.<\/p>\n
Successivamente dobbiamo fornire alcune variabili a cui possiamo accedere dal nostro script di completamento automatico. Abbiamo bisogno di conoscere l’URL AJAX e vogliamo anche aggiungere un nonce<\/a> per sicurezza. Possiamo farlo usando [wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')\n    ]);\n});<\/code><\/pre>\n
La wp_localize_script()<\/code>funzione creer\u00e0 una variabile Javascript globale AutocompleteSearch<\/code>con due propriet\u00e0; ajax_url<\/code>e ajax_nonce<\/code>. Con questo possiamo nel nostro file Javascript di completamento automatico recuperare ad esempio il valore dell’URL AJAX di WordPress con AutocompleteSearch.ajax_url<\/code>.<\/p>\n
Infine dobbiamo aggiungere un po’ di stile. Come accennato, WordPress non viene fornito con alcuno stile dell’interfaccia utente jQuery incluso, quindi dobbiamo aggiungerne alcuni noi stessi. Ho optato per l’aggiunta di un foglio di stile tramite Google CDN<\/a>. Ma dobbiamo conoscere il numero di versione dell’interfaccia utente di jQuery per recuperare il suo foglio di stile. Potremmo codificare un numero di versione, ma non sono un fan dell’hardcoding. Di seguito troverai un bel trucco per anticipare le informazioni sulla versione dell’interfaccia utente di jQuery memorizzate in WordPress.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    ...\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});<\/code><\/pre>\n
Usiamo [wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>per registrare e aggiungere un nuovo foglio di stile con il percorso CDN fornito come secondo argomento. Per recuperare un numero di versione dell’interfaccia utente jQuery valido, utilizziamo le informazioni fornite dalla funzione [wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n
E questo \u00e8 tutto ci\u00f2 di cui abbiamo bisogno per accodare gli script!<\/p>\n
Scrivere il Javascript di completamento automatico<\/h3>\n
Torniamo al nostro autocomplete.js<\/code>fascicolo. Sappiamo che quando questo script viene caricato, jQuery e jQuery UI Autocomplete sono gi\u00e0 caricati e abbiamo anche accesso a una variabile globale con le informazioni necessarie. Iniziamo impostando una funzione di pronto del documento jQuery per garantire che il nostro codice venga eseguito dopo che DOM \u00e8 pronto.<\/p>\n
jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n
Se ci riferiamo alla documentazione di jQuery UI Autocomplete,<\/a> apprendiamo che \u00e8 necessario creare un selettore jQuery mirato a un campo di input ed eseguire la funzione autocomplete()<\/code>su di esso.<\/p>\n
Questo \u00e8 un punto in cui puoi modificare il codice per adattarlo alle tue esigenze. Questo tutorial applicher\u00e0 il completamento automatico al campo di ricerca standard di WordPress (che di solito viene aggiunto nel tema includendo il modello di ricerca o come widget). I nomi delle classi dell’input di ricerca possono variare da tema a tema. Ma potresti voler scegliere come target un campo di input personalizzato o cercare all’interno di un modello speciale. Tutto quello che devi fare \u00e8 cambiare il selettore jQuery per indirizzare l’input desiderato.<\/p>\n
Nel mio tema l’input standard del campo di ricerca di WordPress ha una classe di .search-field<\/code>. Sto anche aggiungendo il nome della classe del modulo padre per restringerlo ulteriormente in modo da non rischiare che il completamento automatico venga applicato a qualcos’altro utilizzando la stessa classe.<\/p>\n
Secondo la documentazione del completamento automatico, possiamo eseguire una chiamata AJAX nella propriet\u00e0 source<\/code>(che deve restituire un array di elementi da visualizzare nel completamento automatico). Useremo la funzione Ajax di jQuery<\/a> per fare proprio questo:<\/p>\n
jQuery(function($) {\n    $('.search-form .search-field').autocomplete({\n        source: function(request, response) {\n            $.ajax({\n                dataType: 'json',\n                url: AutocompleteSearch.ajax_url,\n                data: {\n                    term: request.term,\n                    action: 'autocompleteSearch',\n                    security: AutocompleteSearch.ajax_nonce,\n                },\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },\n    });\n});<\/code><\/pre>\n
Alla riga #2<\/code>\u00e8 dove diciamo a jQuery UI Autocomplete su quale campo di input vogliamo applicare il completamento automatico. Modifica questo selettore in base alle tue esigenze.<\/p>\n
Nella forma pi\u00f9 semplice, il completamento automatico prevede una matrice di oggetti oggetto nella source<\/code>propriet\u00e0. Qui creiamo una funzione con due parametri; request<\/code>contiene informazioni sul nostro valore immesso (request.term<\/code>) e response<\/code>quale \u00e8 una funzione di callback che dobbiamo chiamare e fornire i dati. Questo \u00e8 ci\u00f2 che facciamo nella success<\/code>funzione di AJAX alla riga #13<\/code>.<\/p>\n
La stessa chiamata AJAX \u00e8 piuttosto standard. Definiamo il tipo di dati come JSON: questo \u00e8 importante, altrimenti il \u200b\u200bcompletamento automatico dell’interfaccia utente di jQuery non sar\u00e0 in grado di analizzare i risultati. Quando url<\/code>accediamo ajax_url<\/code>alla variabile globale, abbiamo localizzato il nostro script in precedenza; AutocompleteSearch<\/code>. E mentre data<\/code>passiamo un oggetto di informazione. La action<\/code>propriet\u00e0 \u00e8 obbligatoria e necessaria per il passaggio successivo, che identifica questa specifica richiesta AJAX in PHP. Trasmettiamo anche il termine immesso nell’input e il nonce per motivi di sicurezza.<\/p>\n
Questo \u00e8 tutto per la sources<\/code>propriet\u00e0. C’\u00e8 un’altra cosa che dobbiamo aggiungere nel nostro script di completamento automatico. Come predefinito nell’interfaccia utente di jQuery, il completamento automatico, la scelta di un elemento riempie automaticamente l’input con l’elemento scelto. Vogliamo reindirizzare l’utente all’URL del post quando sceglie un elemento dall’elenco. Quindi aggiungiamo una funzione alla select<\/code>propriet\u00e0:<\/p>\n
                ...\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },      \n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n    });\n});<\/code><\/pre>\n
Nell’array di elementi che ritorneremo dalla nostra chiamata AJAX (lo scriveremo in seguito) ogni elemento \u00e8 un oggetto con propriet\u00e0. Aggiungeremo una link<\/code>propriet\u00e0 personalizzata a ciascun elemento (ui.item<\/code>) che conterr\u00e0 i permalink a ciascun post. Passiamo questo URL a [window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>cui attiver\u00e0 un reindirizzamento del browser.<\/p>\n
E questo \u00e8 tutto per la parte Javascript! Non resta che scrivere la parte PHP che ascolta le richieste AJAX con l’azione autocompleteSearch<\/code>.<\/p>\n
Restituzione dei risultati in PHP alle richieste AJAX<\/h3>\n
Per scrivere funzioni che rispondano a specifiche richieste AJAX utilizziamo gli hook wp_ajax_{action}<\/code>(visitatori registrati) e wp_ajax_nopriv_{action}<\/code>(visitatori non registrati). Abbiamo definito l’azione come autocompleteSearch<\/code>nella nostra richiesta AJAX sopra. Fai riferimento al mio post che spiega come funziona AJAX in WordPress<\/a> se non hai familiarit\u00e0 con questo.<\/p>\n
Installiamolo in functions.php<\/code>(o ovunque in PHP aggiungi il tuo codice):<\/p>\n
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    \/\/ echo result\n    die();\n}<\/code><\/pre>\n
Con il codice precedente agganciamo la stessa funzione ai due hook AJAX. In tutte le funzioni che sono agganciate agli hook AJAX wp_ajax, dobbiamo assicurarci di farlo sempre die()<\/code>o exit<\/code>alla fine in modo da non echeggiare l’output indesiderato. Sto usando la [wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>funzione di WordPress.<\/p>\n
Possiamo recuperare i dati passati da Javascript usando $_REQUEST<\/code>(funziona sia per le richieste GET che POST). Nel nostro codice Javascript abbiamo passato il termine inserito nella chiave ‘ term<\/code>‘. Ci\u00f2 significa che possiamo recuperarne il valore in $_REQUEST['term']<\/code>. Possiamo quindi eseguire una query basata su questo. Ricorda che vogliamo solo restituire risultati che corrispondono a questo termine di ricerca.<\/p>\n
Questo \u00e8 un altro punto in cui puoi cambiare completamente e modificare il codice per adattarlo alle tue esigenze. Questo tutorial eseguir\u00e0 una query standard su post e pagine, ma puoi modificare la query o eseguire una query completamente diversa su dati diversi. Forse preferisci o devi eseguire invece una query SQL manuale (\u00e8 sicuramente pi\u00f9 efficiente in termini di memoria). La parte cruciale qui \u00e8 l’array che echeggiamo alla fine, che viene analizzato dal codice di completamento automatico del nostro Javascript.<\/p>\n
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    check_ajax_referer('autocompleteSearchNonce', 'security');\n    $search_term = $_REQUEST['term'];\n    if (!isset($_REQUEST['term'])) {\n        echo json_encode([]);\n    }\n    $suggestions = [];\n    $query = new WP_Query([\n        's' => $search_term,\n        'posts_per_page' => -1,\n    ]);\n    if ($query->have_posts()) {\n        while ($query->have_posts()) {\n            $query->the_post();\n            $suggestions[] = [\n                'id' => get_the_ID(),\n                'label' => get_the_title(),\n                'link' => get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n
Per prima cosa controlliamo se il nonce era valido per stabilire una certa sicurezza sulle nostre chiamate AJAX. Possiamo farlo chiamando la funzione [check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Ho anche aggiunto del codice per assicurarci di non eseguire una richiesta pesante se il termine di ricerca restituito era vuoto. Dovremmo quindi restituire un array con codifica json vuoto.<\/p>\n
Il codice di esempio sopra esegue [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>una ricerca sul termine immesso. Dobbiamo fare in posts_per_page<\/code>modo -1<\/code>di assicurarci di restituire tutte le partite. Consulta la documentazione per WP_Query<\/code>modificare ulteriormente la query.<\/p>\n
Quindi eseguiamo il ciclo dei risultati (line #17<\/code>) e popolano un array con corrispondenze (line #19-23<\/code>). Il completamento automatico dell’interfaccia utente di jQuery richiede come minimo la propriet\u00e0 label<\/code>per indicare ci\u00f2 che dovrebbe essere visualizzato nella casella di completamento automatico. Trasmettiamo anche i permalink nella chiave ‘ link<\/code>‘ che \u00e8 ci\u00f2 che usiamo nel nostro codice Javascript per reindirizzare l’utente.<\/p>\n
Infine in linea #27<\/code>facciamo eco all’array generato come JSON usando [json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n
Con questa parte PHP attiva, il nostro completamento automatico dovrebbe funzionare! Aggiorna il tuo sito e provalo!<\/p>\n
Miglioramenti opzionali<\/h2>\n
Un problema comune \u00e8 che il numero di corrispondenze \u00e8 eccessivo e la casella di completamento automatico diventa troppo grande. Ci sono due soluzioni a questo.<\/p>\n
Una soluzione \u00e8 aggiungere la propriet\u00e0 minLength<\/code>alla autocomplete()<\/code>funzione in Javascript. Questa propriet\u00e0 attiver\u00e0 la casella di completamento automatico solo dopo che \u00e8 stato inserito un certo numero di caratteri. Ad esempio, possiamo richiedere un minimo di 3 caratteri prima di attivare il completamento automatico:<\/p>\n
        ...\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n        minLength: 3,\n    });\n});<\/code><\/pre>\n
jQuery UI Autocomplete propone qui un’altra soluzione<\/a>. Mostra un esempio di aggiunta di un po’ di CSS per aggiungere un’altezza fissa e una barra di scorrimento interna nella casella di completamento automatico.<\/p>\n
Conclusione e codice completo<\/h2>\n
Abbiamo aggiunto con successo un completamento automatico alla funzionalit\u00e0 di ricerca di WordPress in cui abbiamo il pieno controllo delle corrispondenze da restituire. Offre ai visitatori un modo pi\u00f9 rapido per navigare tra i tuoi contenuti poich\u00e9 facendo clic su una corrispondenza si reindirizzer\u00e0 direttamente al post, piuttosto che fare prima una deviazione in una pagina dei risultati di ricerca. L’implementazione di un completamento automatico potrebbe non avere sempre senso in tutti i siti WordPress, ma pu\u00f2 essere ottimo per la ricerca di contenuti specifici o all’interno di modelli speciali!<\/p>\n
Ecco il codice finale nella sua interezza:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')\n    ]);\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});\n\u00a0\nadd_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    check_ajax_referer('autocompleteSearchNonce', 'security');\n\u00a0\n    $search_term = $_REQUEST['term'];\n    if (!isset($_REQUEST['term'])) {\n        echo json_encode([]);\n    }\n\u00a0\n    $suggestions = [];\n    $query = new WP_Query([\n        's' => $search_term,\n        'posts_per_page' => -1,\n    ]);\n    if ($query->have_posts()) {\n        while ($query->have_posts()) {\n            $query->the_post();\n            $suggestions[] = [\n                'id' => get_the_ID(),\n                'label' => get_the_title(),\n                'link' => get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n
jQuery(function($) {\n    $('.search-form .search-field').autocomplete({\n        source: function(request, response) {\n            $.ajax({\n                dataType: 'json',\n                url: AutocompleteSearch.ajax_url,\n                data: {\n                    term: request.term,\n                    action: 'autocompleteSearch',\n                    security: AutocompleteSearch.ajax_nonce,\n                },\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n    });\n});<\/code><\/pre>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Questo tutorial \u00e8 per te che desideri implementare una ricerca di completamento automatico in WordPress, dove abbiamo il pieno controllo delle corrispondenze restituite.<\/p>\n","protected":false},"author":1,"featured_media":224845,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,720,835,1110,804,804,835,720,844,844,865,865],"tags":[1168],"class_list":["post-233393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-guida-per-principianti","category-n-a","category-php-6","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233393"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233393\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}