Creación de una aplicación front-end basada en WordPress requiere conocimiento de WP REST API y AngularJS. Puede crear cualquier aplicación con WordPress como backend. Puede liberarse del tema convencional y el modelo de administración que es popular en WordPress.
En este articulo construyendo una interfaz basada en WordPress, vamos a crear una interfaz con publicaciones destacadas, categorías y páginas de listas de usuarios.
Necesitará ayuda con la maqueta para Creación de una aplicación front-end basada en WordPress.
Revisión de diseño
Es hora de comprender los requisitos y planificar todo el proyecto. Lo primero que necesitamos es una lista de páginas individuales y páginas para publicaciones, usuarios y categorías.
Por lo tanto, necesitaríamos plantillas para estas páginas. La página de listado mostrará el número especificado de publicaciones con paginación. Así es como debería verse una página de oferta aproximada.
Así es como debería verse una plantilla de una sola publicación.
La mayoría de las funciones que tenemos en la estructura alámbrica están disponibles en la API REST de WP, pero hay algunas funciones adicionales que debemos agregar nosotros mismos, como el enlace destacado de la imagen, los nombres de las categorías y los nombres de los autores.
Vayamos un paso más allá y analicemos cómo deberían verse las maquetas de categorías y publicaciones. Así es como debería verse la plantilla de categoría.
Este es el aspecto que debería tener la plantilla de usuario.
Necesitará un complemento complementario para tener algunas de estas características. También notará que algunas funciones son comunes en todas estas plantillas y, por lo tanto, debemos crear una directiva AngularJS común para que las funciones comunes se puedan compartir y no duplicar.
Requisitos
Antes de que pueda iniciar un proyecto, debe instalar algunas aplicaciones.
1. Node.js para trabajar con algunos comandos.
2. GulpJS para optimización y Git para clonación
3. Instalación de WordPress con el complemento WP REST API
En la línea de comandos de Github, debe escribir el siguiente comando para clonar el repositorio de paquetes HTML:
$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd path/to/cloned/repository The following line will install Node.js modules. $ npm install
La instalación tomará algún tiempo y luego ejecutará la fuente con $ gulp. Esto creará una carpeta llamada «dist» que almacena todos los archivos fuente compilados.
Es hora de crear un complemento complementario –
Como se mencionó anteriormente, requerimos que se construyan complementos complementarios para construyendo una aplicación front-end basada en WordPress. Estas son las cosas que vamos a lograr al crear un complemento complementario.
Las funciones incluyen la imagen destacada de la publicación, el nombre del autor de la publicación y la imagen del autor de cuenta gravatar y finalmente una lista de categorías para cada publicación.
Ve a la carpeta wp-content/plugins y dale el mismo nombre que los plugins. Por ejemplo, vamos con un compañero tranquilo.
Vaya a la carpeta y cree un archivo php con el mismo nombre que la carpeta. Ábralo y pegue el siguiente código, que es solo un comienzo formal para la creación del complemento.
/** * Plugin Name: Quiescent Companion * Description: Plugin to work with the Quiescent WP REST API theme * Author: Bilal Shahid * Author URI: http://imbilal.com */
Crear un campo personalizado para la imagen destacada
Pegue el siguiente código para crear una imagen destacada para su publicación. Básicamente, creará un campo personalizado y puede agregar una imagen destacada como lo hace.
/**
* Modifying the response for the Post object
*/
function quiescent_modify_post_response() {
// adding a field for the featured image
register_rest_field( 'post', 'quiescent_featured_image', array(
'get_callback' ='quiescent_get_featured_image',
'update_callback' = null,
'schema' = null
) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );
El siguiente código se usa para nombrar un campo personalizado para una imagen destacada y para descargar una imagen.
/**
* Function to retrieve featured image link
*/
function quiescent_get_featured_image( $post, $field_name, $request ) {
$attachment_id = $post['featured_media'];
$attachment_info = wp_get_attachment_image_src( $attachment_id, 'quiescent_post_thumbnail' );
return $attachment_info[0];
}
Al utilizar el método creado recientemente, puede recuperar mucha información sobre la publicación, como su ID, título, contenido, etc.
El siguiente código se usa para crear un tamaño de imagen destacado personalizado. El tamaño se ha mantenido en 712 x 348 píxeles.
**
* Adding image size for the featured image
*/
function quiescent_add_image_size() {
add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action( 'init', 'quiescent_add_image_size' );
Guarde el archivo ya que se ha agregado el primer campo personalizado, quedan dos.
Publicación relacionada: Imagen de portada vs Imagen destacada en el editor de bloques de WordPress
Crear campos personalizados para usuarios y categorías
A continuación se muestra el código para agregar un campo para mostrar el nombre del autor.
// adding a field for author name
register_rest_field( 'post', 'quiescent_author_name', array(
'get_callback' = 'quiescent_get_author_name',
'update_callback' = null,
'schema' = null
) );
/**
* Function to retrieve author name
*/
function quiescent_get_author_name( $post, $field_name, $request ) {
return get_the_author_meta( 'display_name', $post['author'] );
}
El siguiente código se utiliza para agregar nombres de categoría.
// adding a field for categories
register_rest_field( 'post', 'quiescent_categories', array(
'get_callback' = 'quiescent_get_categories',
'update_callback' =null,
'schema' = null
) );
/**
* Function to retrieve categories
*/
function quiescent_get_categories( $post, $field_name, $request ) {
return get_the_category( $post['id'] );
}
Guarde este campo y ahora tenemos quiescent_featured_image, quiescent_author_name, quiescent_categories como tres campos personalizados diferentes para funciones que no están en el formulario terminado.
Descarga de imagen Gravatar Pn en formato de 207 x 207 píxeles
Lo último que falta es una foto original de Gravatar. El siguiente código está destinado precisamente a eso.
/**
* Modifying the response for the User object
*/
function quiescent_modify_user_response() {
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );
/**
* Modifying the response for the User object
*/
function quiescent_modify_user_response() {
// adding a field for 207 X 207 avatar
register_rest_field( 'user', 'quiescent_avatar_url', array(
'get_callback' ='quiescent_get_user_avatar',
'update_callback' = null,
'schema' = null
) );
}
/**
* Retrieving the avatar for the user
*/
function quiescent_get_user_avatar( $user, $field_name, $request ) {
$args = array(
'size' = 207
);
return get_avatar_url( $user['id'], $args );
}
Ahora todo lo que necesita hacer es crear plantillas, rutas y servicios para recursos y completar la construcción de una interfaz basada en WordPress Fácilmente.
