Com utilitzar l'API de WordPress i crear els nostres Custom Post Types

Fa unes quantes versions, WordPress va introduir una API rest que permet accedir al contingut externament. L'addició d'una API és una eina molt potent, ja que ens permet ampliar fàcilment l'oferta web a aplicacions com ara Android o iOS.

Amb l'API de WordPress podrem fer les peticions següents:

• GET: Permet obtenir dades com ara posts, entrades, usuaris, entre altres dades.
• POST: Permet enviar dades per crear contingut.
• PUT: Permet actualitzar dades a partir del contingut enviat.
• DELETE: Permet eliminar el contingut.

Tanmateix, per defecte aquestes peticions són per als tipus de dades que inclou WordPress per defecte (Post, Pàgines, Usuaris, etc...), però en aquest article, a més de veure com accedir a aquestes dades, us explicarem com crear el nostre propi endpoint per consultar i inserir els nostres Custom Post Types.

Creació de claus d'accés a l'API

Per poder accedir a l'API cal crear unes claus d'Usuari/Clau perquè les peticions no siguin rebutjades. Per a l'exemple d'aquest article utilitzarem el connector "Application Passwords" que ens permet crear una clau per a l'usuari de WordPress sense exposar la seva contrasenya d'accés al tauler de WordPress.

Per afegir el connector anirem a Plugins -> Añadir nuevo i a la barra de cerca escriurem "Application Passwords" i instal·larem i activarem el connector.

Un cop tinguem el connector activat anirem a Usuarios i seleccionarem l'usuari al qual vulguem concedir accés a l'API. És recomanable crear un usuari nou per a això, ja que no es recomana utilitzar l'usuari "admin" de WordPress.

Quan siguem al perfil de l'usuari veurem que s'ha afegit un apartat nou anomenat "Application Passwords", on haurem d'escriure un títol descriptiu per a la clau nova i fer clic a "Add New".

Un cop fem clic a "Add New" haurem de desar la clau que ens mostra, ja que serà la que utilitzarem per autenticar-nos. Per al nostre exemple les claus serien usuari: clouding i contrasenya  Dfjp KptN ogp2 1Ytv Hq48 HPzy.

Amb això ja tenim la base per poder accedir a l'API de WordPress.

Obtenir i crear Posts amb l'API de WordPress

Per a l'exemple utilitzarem l'eina Postman que ens permetrà provar de manera senzilla el funcionament de la nostra API. Si no la coneixeu, podeu descarregar-la en aquest enllaç https://www.postman.com/. 

L'URL a la qual haurem d'enviar les peticions serà "https://midominio.com/wp-json/wp/v2/posts". Podrem substituir "Posts" per les opcions següents, entre d'altres que inclou WordPress per defecte:

Podeu consultar la resta d'endpoints a l'enllaç següent https://developer.wordpress.org/rest-api/reference/.

Obtenir la llista de posts del nostre lloc WordPress

Ara obrim Postman i fem clic a "New Collection". 

Especifiquem un nom, una descripció i fem clic a Create.

Ara creem una Request nova.

Escrivim un títol i una descripció i fem clic a Save.

Seleccionem la Request nova del menú de l'esquerra i afegim l'URL a la qual farem la petició de tipus GET i a l'apartat Authorization triem el tipus Basic Auth i afegim les credencials creades anteriorment.

Fem clic a send i ens retornarà un JSON com el següent, on podrem veure informació com ara l'ID del post, el títol i el contingut.

Crear un post al nostre lloc WordPress

Des de Postman creem una Request nova com hem fet anteriorment. Especifiquem l'URL, però aquesta vegada canviem el tipus de GET a POST.

Tornem a emplenar l'apartat Authorization com hem fet anteriorment:

Com que hem d'enviar dades a l'API, ara seleccionarem Body -> raw -> JSON. Crearem un JSON com el següent indicant el títol i el contingut.

Un cop especificades les dades que enviarem a l'API, fem clic a Send i obtindrem una resposta com la següent:

Podem verificar des del tauler d'administració de WordPress que el Post s'ha creat correctament.

Podem afegir paràmetres a la nostra Request perquè es publiqui automàticament, inserir la categoria, tags, etc...

Amb aquests passos senzills hem pogut veure com accedir al nostre WordPress a través de l'API per obtenir i inserir les dades des d'una aplicació externa.

Crear un Custom Post Type

Per crear un Custom Post Type per a l'exemple anirem a Aparencia -> Editor de Temas i obrirem el fitxer functions.php. En aquest fitxer afegirem el codi següent, que crea un tipus "servidoresVps" en el qual afegirem un "TextBox" per especificar l'adreça IP dels nostres servidors. També s'especifica la funció per desar les dades a la base de dades de WordPress.

A més, especifiquem la variable "show_in_rest" amb un valor "true" perquè sigui accessible des de l'API de WordPress i habilitem "custom-fields" per poder afegir camps propis. 

<?php

add_action( 'init', 'registrar_custom_post_type' );

function registrar_custom_post_type() {
$labels = array(
'name' => _x( 'Servidores VPS', 'post type general name', 'text-domain' ),
'singular_name' => _x( 'Servidor VPS', 'post type singular name', 'text-domain' ),
'menu_name' => _x( 'Servidores VPS', 'admin menu', 'text-domain' ),
'add_new' => _x( 'Añadir nuevo', 'servidor', 'text-domain' ),
'add_new_item' => __( 'Añadir nuevo servidor', 'text-domain' ),
'new_item' => __( 'Nuevo servidor', 'text-domain' ),
'edit_item' => __( 'Editar servidor', 'text-domain' ),
'view_item' => __( 'Ver servidor', 'text-domain' ),
'all_items' => __( 'Todos los servidores', 'text-domain' ),
'search_items' => __( 'Buscar servidor', 'text-domain' ),
'not_found' => __( 'No hay servidores.', 'text-domain' ),
'not_found_in_trash' => __( 'No hay servidores en la papelera.', 'text-domain' )
);

$args = array(
'labels' => $labels,
'description' => __( 'Descripción.', 'text-domain' ),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'libro' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'show_in_rest' => true,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments', 'custom-fields')
);

register_post_type( 'servidoresVps', $args );
}

function informacion_vps_metabox() {
add_meta_box( 'informacion-vps', 'Datos técnicos del servidor', 'informacion_vps_box_content', 'servidoresVps', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'informacion_vps_metabox' );

function informacion_vps_box_content( $post ) {
$values = get_post_custom( $post->ID );
$ip = isset( $values['info_vps_ip'] ) ? esc_attr( $values['info_vps_ip'][0] ) : '';
?>
<p>
<label for="info_vps_ip">IP del servidor</label>
<input type="text" name="info_vps_ip" id="info_vps_ip" value="<?php echo esc_html( $ip ); ?>" />

</p>
<?php
}

add_action( 'save_post', 'informacion_vps_metabox_save' );
function informacion_vps_metabox_save( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}

if ( ! current_user_can( 'edit_post' ) ) {
return;
}

if ( isset( $_POST['info_vps_ip'] ) ) {
update_post_meta( $post_id, 'info_vps_ip', wp_kses( $_POST['info_vps_ip'], $allowed ) );
}
}

Un cop desem el fitxer, el nostre tipus nou apareixerà al menú lateral esquerre.

Si creem un registre nou, apareixerà el camp de text per inserir la "Ip del servidor".

Exposar Custom Post Types a l'API de WordPress per inserir dades

El primer que farem per poder inserir dades a través de l'API és registrar una ruta pròpia amb el mètode POST. Hem d'inserir el codi següent a Aparencia -> Editor de Temas -> functions.php. Això declararà l'URL midominio.com/wp-json/api/v1/insertar_vps.

add_action( 'rest_api_init', function() {
register_rest_route( 'api/v1','/insertar_vps', [
'methods' => 'POST',
'callback' => 'insertar_vps'
] );
} );

Ara hem de crear la funció per al callback que inserirà les dades rebudes a la base de dades de WordPress. Per fer-ho creem la funció següent:

function insertar_vps($data){

$parameters = $data->get_params();

$my_post = array(
'post_title' => $parameters['post_title'],
'post_content' => $parameters['post_content'],
'post_status' => 'publish',
'post_author' => 1,
'post_type' => 'servidoresVps',
'meta_input' => array(
'info_vps_ip' => $parameters['info_vps_ip'],
)
);

$idPost = wp_insert_post( $my_post );

if($idPost != 0){
return "OK";
};
return "KO";
}

Si obrim Postman com hem fet anteriorment, podem fer la prova d'inserir dades creant una Request nova com la següent:

Podem veure el resultat al nostre lloc WordPress fent clic al menú lateral esquerre a Servidores VPS. Com veiem a les imatges següents, ha desat les dades que hem passat a la request enviada a l'API.

Finalment, crearem les funcions per poder obtenir la llista de Post del tipus servidoresVPS que hem creat. Per fer-ho crearem una ruta nova a l'API i un callback nou que ens retornarà els posts.

add_action( 'rest_api_init', function() {
register_rest_route( 'api/v1','/obtener_vps', [
'methods' => 'GET',
'callback' => 'obtener_vps'
] );
} );

function obtener_vps() {

$args = [
'numberposts' => 10,
'post_type' => 'servidoresVps',
];

$posts = get_posts($args);

$data = [];

$data['ID'] = $posts[0]->ID;
$data['title'] = $posts[0]->post_title;
$data['content'] = $posts[0]->post_content;
$data['info_vps_ip'] = $posts[0]->info_vps_ip;
return $data;
}

Podem fer la prova a Postman creant una Request nova de tipus GET especificant la ruta nova. Com veiem a la imatge següent, ens ha retornat el Post creat a l'exemple anterior. 

Amb els passos que hem fet en aquest article hem pogut veure com ampliar les funcionalitats del nostre lloc web WordPress perquè siguin accessibles des d'altres plataformes, com ara una APP Android o iOS.