Creación de un widget de búsqueda usando REST WordPress API

Los desarrolladores de WordPress sabrán que el resto ha existido durante algún tiempo, pero a fines del año pasado se ha integrado en el núcleo, lo que significa que ahora se puede usar en widgets y complementos. En este artículo construiremos un widget de búsqueda simple con una diferencia. Usando la API REST de WordPress, este widget buscará un sitio web externo de WordPress y mostrará los resultados en el widget. Esta publicación continúa desde mi último acerca de lo que necesita saber sobre el resto WordPress API

Crea una base de conocimiento, ¡la manera fácil! Construya una base de conocimiento que se pueda buscar y ayudar a sus clientes a ayudarse a sí mismos.
Obtenga el complemento
La construcción del complemento de widgets como en el artículo anterior, algunos conocimientos básicos están involucrados en la creación de complementos y widgets. Si no está seguro, se le sugieren algunas lecturas al final de este artículo. Echemos un vistazo al complemento existente que creamos en el último artículo. Su código debería verse así:
/**
* Nombre del complemento: KB – REST API Widget
* Autor: Kirsty Burgoine
*/
Clase REST_PI_WIDGET extiende wp_widget {
/**
* Establece el nombre de los widgets, etc.
*/
Función pública __construct () {
$ widget_ops = array (
‘Classname’ = & gt; ‘REST-API-WIDGET’,
‘Descripción’ = & gt; ‘Un widget de API REST que extrae publicaciones de un sitio web diferente’
);
Parent :: __ construct (‘REST_PI_WIDGET’, ‘REST widget’, $ widget_ops);
}
/**
* Emite el contenido del widget
*
* @param array $ args
* @param array $ instancia
*/
Widget de función pública ($ args, $ instancia) {
// emite el contenido del widget
$ respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb/’);
If (is_wp_error ($ respuesta)) {
devolver;
}
$ POSTS = JSON_DECODE (WP_REMOTE_RETRIEVE_BODY ($ respuesta)); if (vacía ($ publicaciones)) {
devolver;
}
echo $ args [‘antes_widget’];
If (! Vacía ($ instancia [‘title’])) {
echo $ args [‘antes de_itle’]. APLICE_FILTERS (‘widget_itle’, $ instancia [‘title’], $ instancia, $ this- & gt; id_base). $ args [‘after_title’];
}
// Contenido del widget principal aquí
If (! Vacía ($ publicaciones)) {
echo ‘& lt; ul & gt;’;
Foreach ($ publicaciones como $ post) {
echo ‘& lt; li & gt; & lt; a href = & quot;’ . $ post- & gt; enlace. ‘& quot; & gt;’ . $ post- & gt; title- & gt; rended. ‘& lt;/a & gt; & lt;/li & gt;’;
}
echo ‘& lt;/ul & gt;’;
}
echo $ args [‘after_widget’];
}
/**
* Emite el formulario de opciones en el administrador
*
* @param array $ instancia el widget
*/
Formulario de función pública ($ instancia) {
// emite el formulario de opciones en el administrador
$ Title = (! Vacía ($ instancia [‘title’))? $ instancia [‘title’]: ”;
? & gt;
& lt; etiqueta para = & quot; & lt;? ? & gt; & quot; & gt; Título: & lt;/Label & gt;
& lt; class de entrada = & quot; WideFat & quot; id = & quot; & lt; ? & gt; & quot; Nombre = & quot; & lt;? ? & gt; & quot; Type = & quot; texto & quot; valor = & quot; & lt; ? & gt; & quot; /& gt;
& lt;?
}
} // Clase final
add_action (‘widgets_init’, function () {
register_widget (‘REST_PI_WIDGET’);
});
Esencialmente, creé un nuevo complemento. En ese complemento, creamos un widget que muestra una lista de publicaciones personalizadas de la base de conocimiento heroico en otro sitio web.
Lo que haremos ahora es cambiar esto para crear una función de búsqueda también. Paso 1: Cambiar el interrogatorio básico para lograr diferentes resultados en el último artículo, recordará que hemos discutido cómo obtener una lista de publicaciones y luego cómo cambiar los parámetros, para que podamos obtener el tipo de publicación personalizada del conocimiento base. Bueno, puede que no sea tan sorprendente aprender, esto no es todo lo que podemos hacer con el método GET. Usando los parámetros de filtración, en realidad podemos usar cualquiera de los argumentos disponibles al llamar a WP_QUEY. Por ejemplo, si queremos cambiar el número de publicaciones que se muestran, puede agregar:/publicaciones? Filtrar [POSTS_PER_PAGE] = 5
Haciendo la llamada remota así:
$ Respuesta = wp_remote_get (‘http: // sitio web with –api.com/wp-json/wp/v2/posts?filterches_per_page]);
O, si queremos mostrar una sola publicación aleatoria, podríamos agregar:
/Publicaciones
Y esto es lo mismo para un parámetro de búsqueda. En una consulta WP estándar, el parámetro se vería así:
‘s’ = & gt; ‘Palabra clave’
Por lo tanto, nuestra llamada remota debe verse así:
$ Respuesta = wp_remote_get (‘http: // sitio web-with -papi.com/wp-json/wp/v2/posts?filterches ubicado);
Es bastante simple una vez que comprende la conversión de los parámetros de WP_QUEY a la URL API.
Para obtener detalles completos sobre los parámetros disponibles, consulte la Guía WP_Query Codex. De hecho, no queremos buscar publicaciones estándar, queremos buscar el tipo de publicación personalizada de la base de conocimiento. Sin embargo, como hemos visto en el artículo anterior, esto es fácil de hacer, porque hicimos nuestro tipo personalizado de publicación agregando un filtro. Por lo tanto, todo lo que tenemos que hacer aquí es interrogar el tipo de publicación personalizada de la base de conocimiento cambiando / publicaciones / con el nombre de la publicación personalizada. En este caso / ht_kb /. La llamada remota ahora se verá así: $ respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb?filterches’;
Paso 2: El cuadro de búsqueda y los resultados de la personalización, por lo que ahora hemos buscado cambiar el interrogatorio para filtrar después de cierto término de búsqueda, el siguiente paso es crear una forma de obtener ese tiempo de búsqueda. En primer lugar, debemos agregar un cuadro de búsqueda de arado. Debido a que este será solo un formulario de búsqueda simple, podemos usar la función get_search_form () ya configurada por WordPress en lugar de crear un formulario de búsqueda por separado. En el archivo del complemento, busque la línea con el comentario // Contenido del widget principal aquí dentro de la función del widget y agregue get_search_form (); y editar directamente debajo para que se vea así:
// Contenido del widget principal aquí
get_search_form ();
If (! Vacía ($ publicaciones)) {
echo ‘& lt; ul & gt;’;
Foreach ($ publicaciones como $ post) {
echo ‘& lt; li & gt; & lt; a href = & quot;’ . $ post- & gt; enlace. ‘& quot; & gt;’ . $ post- & gt; title- & gt; rended. ‘& lt;/a & gt; & lt;/li & gt;’;
}
echo ‘& lt;/ul & gt;’;
}
Ahora, cuando vemos el widget en la página, verá el formulario de búsqueda estándar y la lista de publicaciones de la base de conocimiento. Que cuando buscamos algo, el parámetro de búsqueda aparece en la URL de la siguiente manera:
/? S = prueba
“S” es el parámetro $ _get y “prueba” es el término de búsqueda. Por lo tanto, todo lo que queda es tomar el tiempo de búsqueda en la URL y usarla en respuesta de la siguiente manera:
if (isset ($ _get [‘s’) & amp; & amp; vacía ($ _get [‘s’])) {

$ Respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb?filterots ubicado =’. $ _ Getuls ‘);
}
más {
$ respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb/’);
}
Lo que hace este código es verificar si $ _get [‘s’] se ha establecido y no está vacío. Si tiene/es, entonces lo incluye en su respuesta si no, entonces no se realiza una búsqueda y desea mostrar todas las publicaciones en la base de conocimiento como de costumbre.
Se pueden encontrar más detalles sobre la función get_search_form () aquí. Aquí esperaríamos que este artículo termine, ¿verdad? Después de todo, configuramos un formulario de búsqueda que interroga las publicaciones en un sitio web externo utilizando la API REST WordPress y luego devolvimos esos resultados en función del parámetro de búsqueda. En cualquier caso … Paso 3: Cambiar los resultados que se muestran si probamos el nuevo widget de búsqueda, podemos ver que el widget funciona como se esperaba, sin embargo, regresará del sitio actual en el contenido de la página principal.
Widget de búsqueda que muestra los resultados para “prueba” y la página que redirige a los resultados de búsqueda que esto se debe al sistema de plantilla de WordPress. WordPress usa la cadena de consulta para determinar qué plantilla o conjunto de plantillas usar. Porque, cuando se envía el formulario de búsqueda, agrega el parámetro “S” a la URL, WordPress le dice que haga una búsqueda y redirige a los resultados de búsqueda. Que, en el tema, veinteinteen es Search.php. Para obtener más información, consulte la documentación de la jerarquía de plantillas. Es genial si queremos hacer la búsqueda en un sitio web local y en un sitio web externo utilizando la API al mismo tiempo, porque los resultados para ambos se muestran. Sin embargo, en este caso, no queremos hacer esto. Solo queremos que los resultados devueltos usando API se muestren en Widget. La página principal no debe estar afectada. hay muchas maneras de hacer esto. Para este ejemplo, veremos cómo cambiar get_search_form (); La función ya no usa “S” como parámetro de búsqueda. En cambio, se cambiará a “A” para evitar el problema.
El primer paso es la modificación efectiva de la forma creando una nueva función.
Función api_search_form ($ form) {
$ form = ‘& lt; form rol = & quot; buscar ” método = & quot; Get & quot; class = & quot; Forma de búsqueda & quot; Acción = & quot; ‘ . Home_url (‘/’). ‘& quot; & gt;

& lt; etiqueta & gt;

& lt; span class = & quot; screen-keed-text & quot; & gt; ‘ . _x (‘Buscar:’, ‘etiqueta’). ‘& lt;/span & gt;
& lt; tipo de entrada = & quot; buscar ” Class = & quot; campo de búsqueda & quot; marcador de posición = & quot; . esc_attr_x (‘búsqueda …’, ‘marcador de posición’). ‘& quot; Valor = & quot; ‘ . get_search_query (). ‘& quot; Nombre = & quot; a & quot; Título = & quot; ‘ . esc_attr_x (‘buscar:’, ‘etiqueta’). ‘& quot; /& gt; & lt;/Label & gt;
& lt; tipo de botón = & quot; enviar ” Class = & quot; Search-Submit & quot; & gt; & lt; span class = & quot; screen-text & quot; & gt; search & lt;/span & gt;/button & gt;
& lt;/form & gt; ‘;
devolver $ formar;
}
add_filter (‘get_search_form’, ‘api_search_form’, 100);
La función en sí es bastante simple, prácticamente una forma nueva para usar en lugar de la forma predeterminada. Si observamos el tema de referencia de veintes y inspeccionar el formulario de búsqueda existente, notamos que la única diferencia del código es el nombre de la entrada de búsqueda. Inicialmente era “Name = S”, y ahora es “Nombre = A”. Esto elimina el parámetro “S” de la URL. Nota: Con este enfoque, cambiamos el formulario de búsqueda principal para buscar usando la API en lugar de mirar en el sitio de host. Por lo tanto, es importante considerar que si usamos el formulario de búsqueda principal en cualquier lugar del sitio, ya no redirigirá a los resultados de búsqueda en el sitio web del host. Para tener dos búsquedas diferentes, la solución más fácil sería agregar el código para este nuevo formulario directamente al widget en lugar de cambiar get_search_form ();
El último paso es agregar el filtro. Ella le dice a WordPress que reemplace el formulario existente con él. Podemos pegar todo el bloque de código en el archivo de complemento después de la clase de widget. En su lugar, se podría incluir las funciones.php del tema, pero al incluirlo en el complemento, significa que la modificación de la forma se realiza solo si el complemento se activa. Ahora que hemos cambiado el nombre de la entrada a “A”, debemos cambiar y cuál será el parámetro de búsqueda real. El parámetro ahora aparecerá en la URL como: /? A = prueba, en lugar de /? Para poder buscar usando el nuevo parámetro, actualice el código escrito anterior para la llamada de distancia para usar el parámetro “A” en lugar de “S”. Ahora debería verse así: if (isset ($ _get [‘a’]) & amp; & amp; vacía ($ _get [‘a’]) {
$ Respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb?filterots ubicado =’. $ _ Getng’a ‘);
} más {
$ respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb/’);
}
Tenga en cuenta que aunque el parámetro de búsqueda en $ _get ha cambiado, esto no cambia el filtro en una consulta real. Esto se debe a que la consulta WP estándar para la búsqueda sigue siendo “S”. Ahora, al probar el widget, deberíamos poder buscar artículos de la base de conocimiento en su sitio externo y devolver los resultados sin ser redirigidos a los resultados de búsqueda.
Widget de búsqueda que muestra los resultados para “probar” sin redirigir la página El código completo para el widget se ve así:
/**
* Nombre del complemento: KB – REST API Widget
* Autor: Kirsty Burgoine*/
Clase REST_PI_WIDGET extiende wp_widget {
/**
* Establece el nombre de los widgets, etc.

*/
Función pública __construct () {
$ widget_ops = array (
‘Classname’ = & gt; ‘REST-API-WIDGET’,
‘Descripción’ = & gt; ‘Un widget de API REST que extrae publicaciones de un sitio web diferente’);
Parent :: __ construct (‘REST_PI_WIDGET’, ‘REST widget’, $ widget_ops);
}
/**
* Emite el contenido del widget
*
* @param array $ args
* @param array $ instancia
*/
Widget de función pública ($ args, $ instancia) {
// emite el contenido del widget
if (isset ($ _get [‘a’]) & amp; & amp; vacía ($ _get [‘a’])) {
$ Respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb?filterots ubicado =’. $ _ Getng’a ‘);
} más {
$ respuesta = wp_remote_get (‘http://website-with-api.com/wp-json/wp/v2/ht_kb/’);
}
If (is_wp_error ($ respuesta)) {
devolver;
}
$ POSTS = JSON_DECODE (WP_REMOTE_RETRIEVE_BODY ($ respuesta));
if (vacía ($ publicaciones)) {
devolver;
}
echo $ args [‘antes_widget’];
If (! Vacía ($ instancia [‘title’])) {
echo $ args [‘antes de_itle’]. APLICE_FILTERS (‘widget_itle’, $ instancia [‘title’], $ instancia, $ this- & gt; id_base). $ args [‘after_title’];
}
// Contenido del widget principal aquí
get_search_form ();
If (! Vacía ($ publicaciones)) {
echo ‘& lt; ul & gt;’;
Foreach ($ publicaciones como $ post) {
echo ‘& lt; li & gt; & lt; a href = & quot;’ . $ post- & gt; enlace. ‘& quot; & gt;’ . $ post- & gt; title- & gt; rended. ‘& lt;/a & gt; & lt;/li & gt;’;
}
echo ‘& lt;/ul & gt;’;
}
echo $ args [‘after_widget’];
}
/**
* Emite el formulario de opciones en el administrador
*
* @param array $ instancia el widget
*/
Formulario de función pública ($ instancia) {
// emite el formulario de opciones en el administrador
$ Title = (! Vacía ($ instancia [‘title’))? $ instancia [‘title’]: ”;? & gt;
& lt; etiqueta para = & quot; & lt;? ? & gt; & quot; & gt; Título: & lt;/Label & gt;
& lt; class de entrada = & quot; WideFat & quot; id = & quot; & lt; ? & gt; & quot;
Nombre = & quot; & lt;? ? & gt; & quot; Type = & quot; texto & quot; valor = & quot; & lt; ? & gt; & quot; /& gt;
& lt;?
}
}
Función api_search_form ($ form) {
$ form = ‘& lt; form rol = & quot; buscar ” método = & quot; Get & quot; class = & quot; Forma de búsqueda & quot; Acción = & quot; ‘ . Home_url (‘/’). ‘& quot; & gt;
& lt; etiqueta & gt;
& lt; span class = & quot; screen-keed-text & quot; & gt; ‘ . _x (‘Buscar:’, ‘etiqueta’). ‘& lt;/span & gt;
& lt; tipo de entrada = & quot; buscar ” Class = & quot; campo de búsqueda & quot; marcador de posición = & quot; . esc_attr_x (‘búsqueda …’, ‘marcador de posición’). ‘& quot; Valor = & quot; ‘ . get_search_query (). ‘& quot; Nombre = & quot; a & quot; Título = & quot; ‘ . esc_attr_x (‘buscar:’, ‘etiqueta’). ‘& quot; /& gt;
& lt;/Label & gt;
& lt; tipo de botón = & quot; enviar ” Class = & quot; Search-Submit & quot; & gt; & lt; span class = & quot; screen-text & quot; & gt; search & lt;/span & gt;/button & gt;
& lt;/form & gt; ‘;
devolver $ formar;
}
add_filter (‘get_search_form’, ‘api_search_form’, 100);
add_action (‘widgets_init’, function () {
register_widget (‘REST_PI_WIDGET’);
});
Esta es una implementación muy simple de un widget de búsqueda personalizado que usa el resto.Como se ilustra anteriormente, podríamos agregar filtros adicionales a la consulta para limitar el número de resultados de búsqueda u orden en el que se muestran.Puede optar por mostrar información adicional en el widget, como el término de búsqueda y la cantidad de resultados o, si sabe jQuery/JavaScript, puede continuar con esto y agregar un buen efecto Ajax para que los resultados se devuelvan sin tener que actualizar página.Lectura adicional: Widgets API (WordPress Codex)
Introducción a la creación del primer widget WordPress (tutsplus)
Cómo crear un widget de widget personalizado (WP Beginner)
Cómo crear un complemento de widget para WordPress (WP Explorer)