Creación de una aplicación o proyecto front-end potenciado por CMS de WordPress

La creación de una aplicación front-end impulsada por WordPress requiere el 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 artículo sobre la creación de una interfaz con tecnología de WordPress, vamos a crear una interfaz que contenga publicaciones destacadas, categorías y páginas de listas de usuarios.

Necesitará la ayuda de wireframes para crear una aplicación front-end con tecnología de WordPress.

La descripción general del proyecto

Es hora de comprender los requisitos y planificar todo el proyecto. Lo primero que necesitamos es enumerar páginas y páginas de solteros para publicaciones, usuarios y categorías.

Por lo tanto, necesitaríamos plantillas para esas páginas. La página de listado mostrará un cierto número de publicaciones con paginación. A continuación se muestra cómo debería verse aproximadamente una página de listado.

A continuación se muestra cómo debería verse una plantilla de una sola publicación.

La mayoría de las funciones que tenemos en el esquema están disponibles con la API REST de WP, pero hay algunas funciones adicionales que tenemos que agregar por nuestra cuenta, como el enlace de la imagen destacada, los nombres de las categorías y los nombres de los autores.

Demos un paso más allá y analicemos cómo deberían verse las categorías y los wireframes de las publicaciones. Así es como debería verse la plantilla de categorías.

Así es como debería verse la plantilla de usuarios.

Para tener algunas de estas características, necesitaría un complemento complementario. También notará que algunas de las 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 haya repetición.

Los requisitos

Antes de que pueda comenzar con el proyecto, necesita algunas aplicaciones instaladas.

1. Node.js para trabajar con ciertos 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 lo siguiente para clonar el repositorio de paquetes HTML:

$ clon de git https://github.com/bilalvirgo10/quiescent-rest-api-html.git

$ cd ruta/hacia/clonado/repositorio

La siguiente línea instalará los módulos de Node.js.

instalación de $ npm

La instalación tomará algún tiempo y luego ejecutará la fuente usando el comando $ gulp. Esto creará una carpeta llamada 'dist' donde se guardan todos los archivos fuente compilados.

Es hora de construir el complemento complementario:

Como dijimos anteriormente, necesitamos crear complementos complementarios para crear una aplicación front-end con tecnología de WordPress . Las siguientes son las cosas que vamos a lograr al crear un complemento complementario.

Las características son la imagen destacada de una publicación, el nombre del autor de una publicación junto con la imagen del autor de la cuenta de Gravatar y, finalmente, la lista de categorías para cada publicación.

Vaya a su carpeta wp-content/plugins y asígnele el mismo nombre que su complemento. Por ejemplo, vamos con quiescent-companion.

Vaya dentro de 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 crear un complemento.

/**
 * Nombre del complemento: Compañero inactivo
 * Descripción: Complemento para trabajar con el tema Quiescent WP REST API
 * Autor: Bilal Shahid
 * URI del autor: http://imbilal.com
 */

Creación del campo personalizado para la imagen destacada

Pegue el siguiente código que está destinado a crear una imagen destacada para una publicación. Básicamente, creará un campo personalizado y puede agregar una imagen destacada como lo hace.

/**
 * Modificar la respuesta para el objeto Publicar
 */
función quiescent_modify_post_response() {
    // agregando un campo para la imagen destacada
    register_rest_field( 'post', 'quiescent_featured_image', array(
        'get_callback' ='quiescent_get_featured_image',
        'update_callback' = nulo,
        'esquema' = nulo
    ) );
}
add_action('rest_api_init', 'quiescent_modify_post_response');

El siguiente código es para dar un nombre al campo personalizado para la imagen destacada y para recuperar la imagen.

/**
 * Función para recuperar el enlace de la imagen destacada
 */
función quiescent_get_featured_image ($ publicación, $ nombre de campo, $ solicitud) {
    $adjunto_id = $publicación['featured_media'];
    $attachment_info = wp_get_attachment_image_src ($attachment_id, 'quiescent_post_thumbnail');
    return $attachment_info[0];
}

Con el último método creado, puede recuperar mucha información sobre una publicación, como su ID, título, contenido, etc.

El siguiente código es para crear un tamaño personalizado para la imagen destacada. El tamaño se ha mantenido en 712 x 348 píxeles.

**
 * Agregar tamaño de imagen para la imagen destacada
 */
función quiescent_add_image_size() {
    add_image_size('quiescent_post_thumbnail', 712, 348, verdadero);
}
add_action( 'init', 'quiescent_add_image_size' );

Guarde el archivo porque se agrega el primer campo personalizado, faltan dos más.

Publicación relacionada: Imagen de portada frente a imagen destacada en el editor de bloques de WordPress

Creación de campos personalizados para usuarios y categorías

El siguiente es el código para agregar el campo para mostrar el nombre del autor.

// agregar un campo para el nombre del autor
register_rest_field( 'post', 'quiescent_author_name', array(
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = nulo,
    'esquema' = nulo
) );

/**
 * Función para recuperar el nombre del autor
 */
function quiescent_get_author_name ($ publicación, $ nombre de campo, $ solicitud) {
    return get_the_author_meta('display_name', $post['author'] );
}

El siguiente código es para agregar los nombres de las categorías.

// agregando un campo para categorías
register_rest_field( 'post', 'quiescent_categories', array(
    'get_callback' = 'quiescent_get_categories',
    'update_callback' = nulo,
    'esquema' = nulo
) );

/**
 * Función para recuperar categorías
 */
función quiescent_get_categories ($ publicación, $ nombre de campo, $ solicitud) {
    volver get_the_category ($ publicación ['id']);
}

Guarde el campo y ahora tenemos quiescent_featured_image, quiescent_author_name, quiescent_categories como los tres campos personalizados diferentes para las funciones que no están presentes en el formulario prefabricado.

Obtención de la imagen de Gravatar Pn Formato de 207 x 207 píxeles

Lo último que falta es la foto del autor de Gravatar. El siguiente código está destinado solo para eso.

/**
 * Modificar la respuesta para el objeto Usuario
 */
función quiescent_modify_user_response() {
     
}
add_action('rest_api_init', 'quiescent_modify_user_response');

/**
 * Modificar la respuesta para el objeto Usuario
 */
función quiescent_modify_user_response() {
    // agregando un campo para el avatar de 207 X 207
    register_rest_field('usuario', 'quiescent_avatar_url', array(
        'get_callback' ='quiescent_get_user_avatar',
        'update_callback' = nulo,
        'esquema' = nulo
    ) );
}

/**
 * Recuperación del avatar para el usuario
 */
función quiescent_get_user_avatar ($ usuario, $ nombre_campo, $ solicitud) {
    $argumentos = matriz(
        'tamaño' = 207
    );
     
    return get_avatar_url ($ usuario ['id'], $ argumentos);
}

Ahora, todo lo que necesita hacer es crear plantillas, rutas y servicios para los recursos y completar la construcción de una interfaz con tecnología de WordPress fácilmente.