Criando um aplicativo ou projeto de front-end com WordPress CMS
Publicados: 2021-08-17
Construir um aplicativo front-end com WordPress requer o conhecimento da WP REST API e AngularJS. Você pode construir qualquer aplicativo com o WordPress como back-end. Você pode se libertar do tema convencional e do modelo de administração que é popular no WordPress.
Neste artigo de construção de um front-end com WordPress, vamos criar uma interface contendo postagens em destaque, categorias e páginas de listagem de usuários.
Você precisará da ajuda de wireframes para construir um aplicativo front-end com WordPress.
A Visão Geral do Projeto
É hora de entender o requisito e planejar todo o projeto. A primeira coisa que precisamos é listar páginas e páginas de singles para posts, usuários e categorias.
Portanto, precisaríamos de modelos para essas páginas. A página de listagem mostrará um certo número de postagens com paginação. Veja a seguir como uma página de listagem deve se parecer aproximadamente.
Veja a seguir como um único modelo de postagem deve se parecer.
A maioria dos recursos que temos no wireframe está disponível com WP REST API, mas existem alguns recursos adicionais que temos que adicionar por conta própria, como link de imagem em destaque, nomes de categorias e nomes de autores.
Vamos dar um passo adiante e analisar como as categorias e os wireframes dos posts devem se parecer. É assim que o modelo de categorias deve ser.
É assim que o modelo de usuários deve se parecer.
Para ter alguns desses recursos, você precisaria de um plug-in complementar. Você também notaria que alguns dos recursos são comuns em todos esses modelos e, portanto, devemos criar uma diretiva AngularJS comum para que os recursos comuns possam ser compartilhados e não haja repetição.
Os requisitos
Antes de iniciar o projeto, você precisa de alguns aplicativos instalados.
1. Node.js para trabalhar com determinados comandos.
2. GulpJS para otimização e Git para clonagem
3. Instalação do WordPress com o plugin WP REST API
Na linha de comando do Github, você deve escrever o seguinte para clonar o repositório de pacotes HTML –
$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd caminho/para/clonado/repositório A linha a seguir instalará os módulos Node.js. $ npm instalar
A instalação levará algum tempo e, em seguida, execute a fonte usando o comando $ gulp. Isso criará uma pasta chamada 'dist' onde todos os arquivos de origem compilados são mantidos.
Hora de construir o plugin Companion –
Como afirmamos anteriormente, exigimos a criação de plugins complementares para a criação de um aplicativo front-end com WordPress . A seguir estão as coisas que vamos alcançar construindo um plugin complementar.
Os recursos são a imagem em destaque de uma postagem, o nome do autor de uma postagem junto com a imagem do autor da conta do Gravatar e, finalmente, a lista de categorias para cada postagem.
Vá para a pasta wp-content/plugins e nomeie-a com o mesmo nome do seu plugin. Por exemplo, vamos com quiescent-companion.
Entre na pasta e crie um arquivo php com o mesmo nome da pasta. Abra-o e cole o código a seguir, que é apenas um começo formal para criar um plugin.
/** * Nome do plug-in: Companion Quiescent * Descrição: Plugin para trabalhar com o tema Quiescent WP REST API * Autor: Bilal Shahid * URI do autor: http://imbilal.com */
Criando o campo personalizado para a imagem em destaque
Cole o código a seguir, destinado a criar uma imagem em destaque para uma postagem. Basicamente, ele criará um campo personalizado e você poderá adicionar uma imagem em destaque da mesma maneira que faz.
/**
* Modificando a resposta para o objeto Post
*/
function quiescent_modify_post_response() {
// adicionando um campo para a imagem em destaque
register_rest_field( 'post', 'quiescent_featured_image', array(
'get_callback' ='quiescent_get_featured_image',
'update_callback' = null,
'esquema' = null
));
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );
O código a seguir é para dar um nome ao campo personalizado para a imagem em destaque e para recuperar a imagem.
/**
* Função para recuperar o link da imagem em destaque
*/
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];
}
Usando o último método criado, você pode recuperar muitas informações sobre uma postagem, como ID, título, conteúdo e afins.
O código a seguir é para criar um tamanho personalizado para a imagem em destaque. O tamanho foi mantido em 712 x 348 pixels.
**
* Adicionando o tamanho da imagem para a imagem em destaque
*/
function quiescent_add_image_size() {
add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action( 'init', 'quiescent_add_image_size' );
Salve o arquivo porque o primeiro campo personalizado foi adicionado, faltando mais dois.
Post relacionado: Imagem de capa vs imagem em destaque no editor de blocos do WordPress
Criando os campos personalizados para usuários e categorias
A seguir está o código para adicionar o campo para mostrar o nome do autor.
//adicionando um campo para o nome do autor
register_rest_field( 'post', 'quiescent_author_name', array(
'get_callback' = 'quiescent_get_author_name',
'update_callback' = null,
'esquema' = null
));
/**
* Função para recuperar o nome do autor
*/
function quiescent_get_author_name( $post, $field_name, $request ) {
return get_the_author_meta( 'display_name', $post['autor'] );
}
O código a seguir é para adicionar os nomes das categorias.
// adicionando um campo para categorias
register_rest_field( 'post', 'quiescent_categories', array(
'get_callback' = 'quiescent_get_categories',
'update_callback' = null,
'esquema' = null
));
/**
* Função para recuperar categorias
*/
function quiescent_get_categories( $post, $field_name, $request) {
return get_the_category( $post['id']);
}
Salve o campo e agora temos quiescent_featured_image, quiescent_author_name, quiescent_categories como os três campos personalizados diferentes para os recursos que não estão presentes no formulário pronto.
Buscando a imagem Gravatar Pn 207 x 207 Pixel Format
A última coisa que falta é a foto do autor do Gravatar. O código a seguir é destinado apenas para isso.
/**
* Modificando a resposta para o objeto User
*/
function quiescent_modify_user_response() {
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );
/**
* Modificando a resposta para o objeto User
*/
function quiescent_modify_user_response() {
// adicionando um campo para avatar de 207 X 207
register_rest_field( 'usuário', 'quiescent_avatar_url', array(
'get_callback' ='quiescent_get_user_avatar',
'update_callback' = null,
'esquema' = null
));
}
/**
* Recuperando o avatar para o usuário
*/
function quiescent_get_user_avatar( $user, $field_name, $request ) {
$args = array(
'tamanho' = 207
);
return get_avatar_url( $user['id'], $args);
}
Agora, tudo o que você precisa fazer é criar modelos, rotas e serviços para os recursos e concluir a construção de um front-end com WordPress facilmente.