Programação

O que é WordPress e como funciona sua estrutura de dados

26 de abril de 2021By Laynara Vieira1 Comment

WordPress é um “Sistema de gerenciamento de conteúdo” de código aberto e livre com o objetivo de facilitar a criação de sites e blogs, sem a necessidade de ter um conhecimento prévio em programação.
O código do WordPress utiliza o PHP como linguagem back-end, e MySQL (ou MariaDB), como gerenciador do banco de dados.
Pode-se usá-lo para o desenvolvimento de sites de e-commerce, portfólios profissionais, publicação de eventos, divulgação científica ou qualquer tipo de conteúdo de forma textual e gráfica.
E esse é só o começo do porque usar wordpress.

Páginas e Posts, qual a diferença?

Páginas

• São atemporais;
• organização hierárquica (pai/filho);
• Não tem autor nem data de publicação.

Posts

• São oportunos;
• Organizados por taxonomias;
• Precisam de um autor e uma data.

Embora eles sejam diferentes, o armazenamento desses posts acontece no mesmo lugar, na tabela wp_post. Oque vai diferenciar essas duas coisas dentro da tabela é a coluna “post_type”, tipo de post, onde vai estar armazenado se o post é do tipo página, post, attachment etc…
Por Exemplo:

O que é Post meta?

Também chamados de “custom field”, são os campos do post que não fazem parte dos campos padrões, como o título, o conteúdo, ou o autor do post.
Por exemplo:

Nesse projeto criamos um post do tipo “despachante”, e precisamos também criar muitos post meta para armazenar as informações sobre esses despachantes. E é assim que vai aparecer no ambiente administrativo.

Já no banco de dados as informações ficam armazenadas desta forma:

Todos os posts meta de todos os tipos de post vão ficar armazenados nessa tabela chamada wp_post_meta.

O que é Taxonomia?

É uma forma fácil e prática de agrupar posts, garantindo que seja fácil pro usuário achar dentro do site conteúdos relacionados. Por padrão o Post já vem com as taxonomias categoria e tags, mas o wordPress disponibiliza uma função para que possamos criar nossas taxonomias personalizadas.
Por exemplo:

Usando o mesmo exemplo do projeto citado acima, criamos três taxonomias para agrupar os despachantes.

Já no banco de dados as taxonomias e seus termos são armazenados desta forma:

Essa é a tabela wp_term_taxonomy, onde ficam armazenados todas as taxonomias e seus termos.

Essa é a tabela wp_terms, onde ficam armazenados todos os termos.

Essa é a tabela wp_term_relationships, onde fizam armezados os termos e os posts aos quais este termo está relacionado.

Espero que tenha conseguido clarear um pouco mais na sua cabeça como funciona a estrutura de dados do nosso queridinho WordPress.
O que você achou desse artigo? Deixa um comentário vai, nunca te pedi nada <3

Como criar um lightbox

4 de abril de 2019By Laynara Vieira3 Comments

É muito comum que sites que possuem galeria de fotos precisem de um lightbox para poder ver melhor as fotos. Existem muitos plugins pra isso, mas plugins podem dar problemas ao longo do tempo. Então criei um lightbox simples, que você pode personalizar como quiser.
Na página onde você possui a galeria de fotos, no meu caso a galeria fica na single-product.php, vamos colocar este código html:

<div class="lightbox-product">
    <a class="btn-blue prev-photo"><i class="fas fa-caret-left"></i></a>
        <div class="content-light-img">
            <a class="btn-blue close-light"><i class="fas fa-times"></i></a>
            <img>
        </div>
    <a class="btn-blue next-photo"><i class="fas fa-caret-right"></i></a>
</div>

E no arquivo JS vão os códigos:
– Esse bloco pega as informações da foto clicada, pego o src da imagem e o id e coloco na tag <img> que está dentro do ‘content-light-img’;

   $('.thumbnail-principal').on('click', function(){
       var src =  $('.thumbnail-principal .slick-current').attr('src');
       var id =  $('.thumbnail-principal .slick-current').attr('id');
        $('.lightbox-product img').attr('src',src);
        $('.lightbox-product img').attr('id',id);
         $('.lightbox-product').fadeIn();
         $('.lightbox-product').css('display','flex');
    });

– Este código é o do botão que passa para a próxima foto, pegamos o id da foto atual dentro do lightbox e contamos a quantidade de fotos dentro do container, se o id for igual a quantidade de fotos voltamos para 1 senão soma-se mais 1 ao id. Com o resultado dessa soma pegamos as informações da próxima foto.

    $('.next-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == photos){
            var result = 1;
        } else {
            var result = parseInt(id) + 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

– Esse código é do botão que volta uma foto, como no botão next pegamos todas as informações da foto que está no lightbox só que ao contrário do outro subtraímos 1 do id, e quando id for igual a 1 dizemos ao contador que ele é igual a quantidade de fotos dentro do container.

    $('.prev-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == 1){
            var result = photos;
        } else {
            var result = parseInt(id) - 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

– E por ultimo esse código que fecha o lightbox;

    $('.close-light').on('click', function(){
        $('.lightbox-product').fadeOut();
    });

E esse foi o resultado:

Nesse lightbox eu usei os efeitos de Fade do javascript, mas você pode animar da forma que achar melhor.
Espero ter ajudado, e até a próxima!

Criando área de widget

4 de abril de 2019By Laynara Vieira0 comment

O que seria a área de widget? Bom, ela pode ser seu sidebar ou um menu no rodapé da página por exemplo, você decide. Eu usei como sidebar no site em que estava desenvolvendo.
Para adicionar a área de widget usamos a função abaixo:

function widgets_novos_widgets_init() {
                 register_sidebar( array(
                                'name' => 'Sidebar',
                                'id' => 'sidebar_widgets',
                                'before_widget' => '<div class="sidebar">',
                                'after_widget' => '</div>',
                                'before_title' => '<h2>',
                                'after_title' => '</h2>',
                 ) );
 }
 add_action( 'widgets_init', 'widgets_novos_widgets_init' );

Ela vai aparecer no painel do wordpress em Aparência > Widgets, assim:

Para mostrar o widget na página desejada usamos a seguinte função:

dynamic_sidebar('sidebar_widgets');

Em ‘sidebar_widgets’ vai o id que você deu ao seu widget.
Espero ter ajudado, e até a próxima.

Como adicionar campo para classe no widget do WordPress

4 de abril de 2019By Laynara Vieira0 comment

Pra que você otimize seu tempo e seu projeto, segue uma dica super importante sobre o wordpress.
Estava desenvolvendo um projeto e precisava de um campo para colocar uma classe personalizada que pudesse diferenciar um widget do outro. Então achei essa função:

function field_in_widget_form($t,$return,$instance){
 $instance = wp_parse_args( (array) $instance, array( 'widget_class' => '') );
 if($instance['widget_class'] != ''){
 $value = $instance['widget_class'];
 }else{
 $value = '';
 }
 ?>

(Essa parte você pode personalizar o campo, usando outas tags, tipo de input etc…)

 <p> <input id="<?php echo $t->get_field_id('widget_class'); ?>" name="<?php echo $t->get_field_name('widget_class'); ?>" type="text" value="<?php echo $value; ?>" />
 <label for="<?php echo $t->get_field_id('widget_class'); ?>"><?php _e('Adicionar Classe'); ?></label>   </p>
 <?php
 $return = null;
 return array($t,$return,$instance);
 }
 add_action('in_widget_form', ' field _in_widget_form',5,3);

Onde está ‘widget_class’ vai o nome que você quiser colocar para seu campo.
E para salvar o valor no seu novo campo usamos essa outra função:

function field_in_widget_form_update($instance, $new_instance, $old_instance){        $instance['widget_class'] = $new_instance['widget_class'];
 return $instance;
 }
 add_filter('widget_update_callback', ' field _in_widget_form_update',5,3);

E prontinho, agora você tem um campo para pôr classes no seu widget.

Saiba como adicionar Custom Fields nos dados gerais do produto (woocommerce)

7 de fevereiro de 2019By Laynara Vieira0 comment

No cadastro de produtos do woocommerce tem uma tabela com vários dados sobre o produto, nesse artigo vou ensinar como colocar campos novos na aba “Geral”, que é a primeira aba que aparece aberta.

Eu precisava de campos para colocar preço de atacado nos produtos, então adicionei a seguinte função no meu arquivo functions.php:
add_action(‘woocommerce_product_options_general_product_data’,’woo_add_custom_general_fields’ );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo ‘<div class=”options_group”>’;
echo ‘<h2>Atacado</h2>’;
woocommerce_wp_text_input(array(
‘id’                => ‘_regular_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
woocommerce_wp_text_input(array(
‘id’                => ‘_sale_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço promocional (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
echo ‘</div>’;
}
Você pode personalizar os nomes dos campos , classes, placeholder, tipo de input e etc…
Após adicionar os campos que você deseja precisará salvar eles também, e pra isso utilizamos essa outra função, também no arquivo funtions.php:
add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );
function woo_add_custom_general_fields_save( $post_id ){
$woocommerce_text_field = $_POST[‘_regular_price_wholesale’];
$_woocommerce_text_field = $_POST[‘_sale_price_wholesale’];
if( !empty( $woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_regular_price_wholesale’, esc_attr( $woocommerce_text_field ) );
}
if( !empty( $_woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_sale_price_wholesale’, esc_attr( $_woocommerce_text_field ) );
}
}

E esse foi o resultado! Espero ter ajudado, e até a próxima.

Aprenda como reorganizar os campos de checkout do woocommerce

7 de fevereiro de 2019By Laynara Vieira0 comment

Quando o usuário vai finalizar uma compra o woocommerce mostra os campos do checkout organizados da forma padrão, só que o projeto que eu estava desenvolvendo pedia por uma disposição dos campos de forma diferente. Então pesquisando achei uma solução simples e que funciona muito bem.
Na pasta checkout do woocommerce tem um arquivo de nome form-billing.php, nele estão os campos que aparecem no checkout. Você vai copiar a pasta e o arquivo para o seu tema para pode editar.
Ao abrir o arquivo ele estará desta forma:

Ele distribui os campos através de um foreach, então para mudar os campos vamos mexer nessa função, e ela ficará desta forma:

Você vai colocar os nomes dos campos na ordem em que deseja dentro de um array(), e depois fazer um foreach para mostras os campos utilizando a própria função do woocommerce: woocommerce_form_field(), como no exemplo acima. Eu fiz dois foreach por que queria colocar em divs diferentes, mas você poderá personalizar como quiser.

Thumbnail não aparece quando vou cadastrar um post – e agora?

22 de janeiro de 2019By Laynara Vieira0 comment

A resposta é bem simples e prática, está faltando o suporte ao tema para ativar o recurso das thumbnails.
Vá no arquivo functions.php do seu tema, e adicione a seguinte função:
add_action( ‘after_setup_theme’, ‘my_theme_setup’ );
function my_theme_setup(){
add_theme_support( ‘post-thumbnails’ );
}
Prontinho, agora você já pode cadastrar as thumbnails no seu post.

Saiba como preencher e limitar a quantidade mínima dos produtos no WooCommerce

22 de janeiro de 2019By Laynara Vieira13 Comments

Depois de muito quebrar a cabeça, a solução apareceu e era mais fácil do que o esperado.
No arquivo functions.php do seu tema adicione as funções:
Produto comum:
Add_filter(‘woocommerce_quantity_input_args’,’ex_woocommerce_quantity_input_args’,10,2);
function ex_woocommerce_quantity_input_args($args,$product){
if(is_singular(‘product’)){
$args[‘input_value’] = 25; (value do input)
}
$args[‘min_value’]=25; (valor mínimo)
return $args;
}
Produto Variável:
Add_filter(‘woocommerce_available_variation’,’ex_woocommerce_available_variation’);
function ex_woocommerce_available_variation($args){
$args[‘min_qty’]=25;
return $args;
}
Você pode pegar a quantidade mínima definida no cadastro do produto e por no lugar do número 25 da seguinte forma:
global $product;
$id = $product->get_id();
$min = get_post_meta($id,’min_qty’,true);
$args[‘min_qty’]= $min;

Operador condicional (ternário): Como exatamente funciona?

3 de julho de 2016By pedro0 comment

O que significa isso: “isset($_POST[‘name’]) ? $_POST[‘name’] : ‘Convidado’;” ?
Muito conhecido por ser utilizado por programadores ‘preguiçosos’, que evitam criar um código monótono e redundante. O operador ternário é uma versão do “IF…ELSE”, que consiste em agrupar, na mesma linha, os comandos da condição.
Mas qual a diferença dele para o nosso “IF…ELSE”?
Vamos comparar, primeiro a condição tradicional:

$sexo = 'M';
if($sexo == 'M'){
    $mensagem = 'Olá senhor';
}else{
    $mensagem = 'Olá senhora';
}

E agora como seria a nossa condição com operador ternário:

$sexo = 'M';
$mensagem = $sexo == 'M' ? 'Olá senhor' : 'Olá senhora' ;

Notamos que nosso código foi resumido de 6 linhas para apenas 2, a vantagem é bem clara, não é preciso repetir o nome da variável, pois o valor já é atribuído a ela.
OK, já vimos a comparação das condições, mas agora vamos entender como trabalhar com a estrutura do operador ternário.

$nota = 8;
$resultado = $nota > 7 ? 'Você Passou' : 'Você Reprovou' ;

Na condição o primeiro parâmetro recebe uma expressão booleana, o segundo é o retorno caso essa expressão seja verdadeira, e o último retorna o valor caso a expressão esteja errada. Assim a variável ‘resultado’ fica com o valor ‘Você Passou’.
O operador ternário vai facilitar muito sua vida, mas no caso de condições mais complexas, é aconselhado utilizar o tradicional IF…ELSE.

$cargo = $salario <= 1000 ? 'junior' : $salario <= 5000 ? 'senior' : 'diretor';

Ficou um pouco confuso, né? Então em casos complexos, ou de controle de fluxo, continue utilizando o IF…ELSE, mas quando for pra atribuir um valor a variável, use e abuse da condição ternánia.
Lembre-se, os exemplos dados acima foram feitos em PHP, condições ternárias, podem ser utilizados em outras linguagens, como Javascript.

validaEmail(email) ? enviaEmail(email) : mostraErro();