Como adicionar controles personalizados e colunas personalizadas do WordPress a itens relacionados
Elemento com um objeto
Cole o seguinte código
Vá para Painel do WordPress > Aparência > Editor de Tema . Abra a guia Theme Functions do seu tema WordPress atualmente ativo.
12345678910111213141516171819202122232425
add_filter( 'jet-engine/relations/types/posts/create-fields', function( $fields, $post_type ) {
if ( 'tour' === $post_type ) {
$fields[] = array(
'name' => '_duration_time',
'title' => __( 'Duration Time', 'jet-engine' ),
'type' => 'text',
);
}
return $fields;
}, 10, 2 );
add_action( 'jet-engine/relations/types/posts/on-create', function( $post_id, $data, $post_type ) {
if ( 'tour' !== $post_type ) {
return;
}
if ( $post_id && ! empty( $data['_duration_time'] ) ) {
update_post_meta( $post_id, '_duration_time', $data['_duration_time'] );
}
}, 10, 3 );Vamos dar uma olhada mais de perto nos componentes do código.
Este código adiciona um novo campo de texto ao pop-up “Adicionar novo…” para a relação especificada e salva os dados digitados no campo.
O gancho ‘jet-engine/relations/types/posts/create-fields’ deve ser alterado dependendo do tipo de dados. Este gancho específico funciona com postagens.
O gancho para termos:
jet-engine/relations/types/terms/create-fieldsO gancho para usuários:
jet-engine/relations/types/mix/create-fields/users
- ‘tour’ — um valor que representa o tipo de postagem ao qual você deseja adicionar campos adicionais;
- ‘_duration-time’ — um nome que foi usado durante a criação do metacampo;
- ‘Tempo de duração’ — um rótulo de título que será exibido em um pop-up;
- ‘texto’ — um tipo de campo mostrado em um pop-up ao adicionar um novo item.
Clique no botão “ Atualizar arquivo ” e prossiga para a postagem onde o novo campo pode ser visto.
Prossiga para a postagem
Por exemplo, vamos para o CPT “País”, pois o definimos como o tipo de postagem pai. E, como o tipo de postagem filho “Tour” está relacionado a ele, podemos ver o pop-up para criação de novos itens relacionados nas postagens do tipo de postagem pai.
Passe o mouse sobre qualquer postagem e clique no botão “ Editar ” para ver as alterações.
Clique no botão “ Adicionar novo… ” no editor de itens relacionados. Agora você pode ver o campo que adicionamos; vamos completar com alguns dados e apertar o botão “ Adicionar novo… ” para salvar o resultado.
O novo item aparece na lista. Vamos apertar o botão “ Editar ” para ver se os dados completos foram salvos.
Assim que a postagem for aberta, verifique se o metacampo está preenchido com dados.
Lembre-se de que você pode adicionar outros metacampos com código semelhante além do metacampo de texto.
OBSERVAÇÃO. Valores ‘text’, ‘media’, ‘date’, ‘time’, ‘textarea’, ‘datetime-local’ para gerar esses campos no pop-up.
Por exemplo, vamos verificar o campo de mídia.
Adicionamos o seguinte exemplo. Não esqueça que você deve alterar o tipo para ‘mídia’ neste caso.
Clique no botão “ Atualizar arquivo ” e vá para a postagem. Depois que o botão “ Adicionar novo… ” for clicado, você poderá ver o campo de mídia recém-adicionado.
Agora você pode fazer upload de arquivos facilmente diretamente no editor de itens relacionados. Pressione o botão “ Selecionar ou fazer upload de imagem ” para escolher a imagem e salvar as alterações pressionando o botão “ Adicionar novo… ”.
Os dados também serão salvos na nova postagem.
Elemento com Vários Objetos
Também existe a possibilidade de adicionar alguns campos que contenham vários componentes. Você pode adicionar campos ‘caixa de seleção’, ‘selecionar’ e ‘rádio’ com códigos semelhantes. Por exemplo, vamos adicionar o código do campo Checkbox.
Cole o código
Vá para WordPress Dashboard > Appearance > Theme Editor e abra a guia Theme Functions do tema WordPress atualmente ativo. Adicione o seguinte código:
12345678910111213141516171819202122232425262728293031323334353637383940414243
add_filter( 'jet-engine/relations/types/posts/create-fields', function( $fields, $post_type ) {
if ( 'tour' === $post_type ) {
$fields[] = array(
'name' => 'included',
'title' => __( 'Included', 'jet-engine' ),
'type' => 'checkbox',
'options' => array(
array(
'value' => 'meals',
'label' => 'Meals',
),
array(
'value' => 'transport',
'label' => 'Transport',
),
array(
'value' => 'accommodation',
'label' => 'Accommodation',
),
),
);
}
return $fields;
}, 10, 2 );
add_action( 'jet-engine/relations/types/posts/on-create', function( $post_id, $data, $post_type ) {
if ( 'tour' !== $post_type ) {
return;
}
if ( $post_id && ! empty( $data['included'] ) ) {
update_post_meta( $post_id, 'included', $data['included'] );
}
}, 10, 3 );Agora vamos verificar os componentes do código. A primeira parte do código inclui os seguintes elementos mutáveis:
- ‘jet-engine/relations/types/posts/create-fields’ — um gancho que pode ser alterado dependendo da fonte. Você pode alterá-lo para o gancho para termos (jet-engine/relations/types/mix/create-fields/users) ou usuários (jet-engine/relations/types/terms/create-fields) dependendo de suas necessidades;
- ‘tour’ — um tipo de postagem;
- ‘incluído’ — o valor do metacampo das caixas de seleção;
- ‘Incluído’ — rótulo que você deseja que seja exibido como título das caixas de seleção no pop-up;
- ‘checkbox’ — um tipo de campo que você está adicionando atualmente;
- ‘acomodação’ — um valor de opção de caixa de seleção;
- ‘Alojamento’ — o título do valor exibido no pop-up.
Adicione as opções de ‘array’ necessárias para criar as opções das caixas de seleção.
A segunda parte do código salva os dados marcados nas caixas de seleção.
Como você implementou todas as alterações no código, não se esqueça de apertar o botão “ Atualizar arquivo ”.
OBSERVAÇÃO. Se quiser adicionar o campo Caixa de seleção, você precisa ativar a opção Salvar como matriz . Caso contrário, as opções marcadas em um pop-up não serão salvas na postagem.
Para isso, acesse JetEngine > Post Types e abra o CPT com o qual você está trabalhando pressionando o botão “ Editar ”.
Role para baixo até a guia Metacampos e abra as configurações de campo da caixa de seleção necessárias.
Ative o recurso Salvar como matriz e pressione o botão “ Atualizar tipo de postagem ”.
Vá para a postagem
Abra a postagem desejada e clique no botão “ Adicionar novo… ” abaixo do título Criança… . No pop-up recém-exibido, você pode marcar todas as opções necessárias.
Clique no botão “ Adicionar Novo… ” e veja se o novo item apareceu no campo.
Prossiga para o editor de postagem clicando no botão “ Editar ” ao lado do novo item.
Agora o resultado é salvo no campo post meta.
Não se esqueça que você também pode criar outros campos com diversos objetos e salvar o resultado escolhido no post logo durante a pós-criação.
Agora vamos verificar como adicionar colunas personalizadas aos itens relacionados.
Colunas personalizadas na interface de edição de itens relacionados
Descubra o ID do relacionamento
Primeiramente, descubra o ID da relação com a qual você está trabalhando. Para isso, acesse o diretório JetEngine > Relações e pressione o botão “ Editar ” ao lado da relação desejada.
Veja o URL da página e copie o número no slug. Usaremos isso no código.
Cole o código
Vá para Painel do WordPress > Aparência > Editor de Tema e abra a guia Funções do Tema .
Copie e cole o código:
1234567891011121314
add_action( 'jet-engine/relations/init/12', function( $relation ) {
$relation->add_table_column( 'child_object', '_duration_time', 'Duration Time', function( $post_id ) {
$_duration_time = get_post_meta( $post_id, '_duration_time', true );
if ( $_duration_time ) {
return $_duration_time;
} else {
return 'Not set';
}
} );
} );OBSERVAÇÃO . Os valores do metacampo devem ser separados pelo sinal “_”, não pelo “-”. No segundo caso, o código não será salvo.
Vejamos os componentes do código que podem ser alterados de acordo com suas necessidades.
Abra a postagem.
- ‘jet-engine/relations/types/posts/create-fields’ — um gancho para as postagens. Lembre-se de que você também pode usar ganchos para termos (jet-engine/relations/types/mix/create-fields/users) e usuários (jet-engine/relations/types/terms/create-fields);
- ‘child_object’ — um objeto de relação ao qual queremos adicionar uma coluna personalizada. Mude para ‘parent_object’ se for adicionar colunas à tabela que exibe itens pai;
- ‘_duration_time’ — um identificador de coluna;
- ‘Tempo de duração’ — um título visual da coluna;
- ‘Not set’ — um valor retornado quando o metacampo é deixado vazio.
Vá para a postagem do objeto pai. Agora, ao lado da coluna “Título”, serão exibidas as colunas “Tempo de Duração” e “Partida”.
Como você pode ver, as colunas vazias mostram os valores “Not set” e “–” conforme especificamos no código.
Pressione o botão “ Editar ” ao lado do item para abrir o editor de postagem.
Preencha o campo
Preencha o campo Tempo de Duração . Pressione o botão “ Atualizar ” para salvar as alterações e retornar à postagem principal.
Agora a coluna está completa com os dados recém-inseridos.
Dessa forma, você pode adicionar a saída de qualquer campo em uma coluna separada.
Lembre-se que os códigos mencionados no artigo podem cooperar ou funcionar separadamente. Você pode encontrar o exemplo de código seguindo o link .
Por exemplo, podemos adicionar os campos no pop-up, mas não exibi-los em colunas. Ou mostre colunas na tabela para as quais não há campos no pop-up de criação de itens.
É isso; agora você sabe como adicionar controles personalizados do WordPress para novos itens relacionados e como pode adicionar colunas personalizadas à relação.