O que é WordPress e como funciona sua estrutura de dados

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:

Tabela wp_post

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

READ MORE
Como ativar a Webcam usando javscript

Como ativar a Webcam usando javscript

Estava desenvolvendo um projeto de cadastro de despachantes utilizando meu queridinho WordPress, e uma das informações necessárias para a realização do cadastro era uma foto 3X4 que seria tirada na hora do cadastro, ou seja, teria que usar uma Webcam. Sem mais delongas, abaixo mostrarei a função que usei para ativar a Webcam.

HTML

Você pode usar as classes e Ids que quiser. A webcam irá reproduzir na tag <video>, a <img> eu usei para mostrar um preview da imagem que será gerada pela captura da webcam, e o input é onde eu vou colocar o base64 que vou usar para gerar uma imagem no PHP quando eu der submit no <form>.

 <div class=”content-photo”>

                <label>Foto 3×4</label>

                <video autoplay=”true” id=”webCamera”></video>  

                <img id=”imagemConvertida”/>

                <input  type=”hidden” id=”base_img” name=”agent_base_img”/>

            </div>

            <button type=”button” class=”cameratools”><i class=”fas fa-camera”></i>Abrir câmera</button>

JAVASCRIPT
Eu usei o mesmo botão para ativar a webcam e para capturar a imagem, então eu primeiro verifico se o botão está ativo ou não. Se estiver ativo o botão irá capturar a imagem, se não irá abrir a webcam.

 $(‘.cameratools’).on(‘click’, function(){

        if($(this).hasClass(‘active’)){//Captura a imagem

            $(this).removeClass(‘active’);     

             var video = document.querySelector(“#webCamera”);

            //Criando um canvas que vai guardar a imagem temporariamente

            var canvas = document.createElement(‘canvas’);

            canvas.width = video.videoWidth;

            canvas.height = video.videoHeight;

            var ctx = canvas.getContext(‘2d’);

            //Desenhando e convertendo as dimensões

            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            //Criando o JPG

            var dataURI = canvas.toDataURL(‘image/jpeg’); //O resultado é um BASE64 de uma imagem.

            document.querySelector(“#base_img”).value = dataURI;

            document.querySelector(“#imagemConvertida”).src = dataURI;

            $(‘#imagemConvertida’).show();

            $(‘#webCamera’).hide();

            $(this).html(‘<i class=”fas fa-camera”></i>Abrir câmera’);

        }else{//Abre a webcan

            $(this).addClass(‘active’);

            //Captura elemento de vídeo

            var video = document.querySelector(“#webCamera”);

            $(‘#webCamera’).show();

            $(‘#imagemConvertida’).hide();

            $(‘#imagemConvertida’).attr(‘src’,”);

            $(‘#base_img’).val(”);

            //As opções abaixo são necessárias para o funcionamento correto no iOS

            video.setAttribute(‘autoplay’, ”);

            video.setAttribute(‘muted’, ”);

            video.setAttribute(‘playsinline’, ”);

            //Verifica se o navegador pode capturar mídia

            if (navigator.mediaDevices.getUserMedia) {

                navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: ‘user’, height: 227, width: 227}})

                .then( function(stream){

                    //Definir o elemento vídeo a carregar o capturado pela webcam

                    video.srcObject = stream;

                })

                .catch(function(error) {

                    alert(“Você precisa ter uma câmera instalada no seu computador.”);

                });

            };

            $(this).html(‘<i class=”fas fa-camera”></i>Tirar foto’);

        }

    });

PHP

Aqui é onde eu gero a imagem através do base64 e salvo ela na pasta uploads.

if($_POST[‘agent_base_img’] != ”){
        $data = str_replace(” “,”+”,$_POST[‘agent_base_img’]); //O envio do dado pelo XMLHttpRequest tende a trocar o + por espaço, por isso a necessidade de substituir. 

        $name = md5(time().uniqid()); //Dou um nome aleatório para o arquivo
        $dir = wp_upload_dir();//Pego as urls dos diretórios do wordpress

        $path = $dir[‘path’].”/{$name}.jpg”;//Url wordpess

        $fileurl = $dir[‘url’].”/{$name}.jpg”;//Url da imagem no site

        $data = explode(‘,’, $data);

        //Save data

     $result = file_put_contents($path, base64_decode(trim($data[1])));//Cria a imagem

        if($result != ”){ //Se criou salva a URL da imagem num campo personalizado

update_post_meta($post_id,’imagem’,$fileurl);

        }    

    }

Agora você já sabe como executar a webcam, capturar uma imagem com ela e salvar ela no seu banco de dados. Espero ter ajudado e até a próxima.

READ MORE

Limite de Variações woocommerce

Você pode não estar sabendo, como eu não sabia, mas quando você cria as variações de forma automática e tem mais de 50 possibilidades, os vínculos acabam não acontecendo. 

Então, quando você vai na página do produto e seleciona um atributo, ele não filtra os outros que deveriam estar vinculados mesmo estando cadastrados no produto. O QUE EU FIZ DE ERRADO?  Calma, você não fez nada. O que acontece é que o woocommerce, para evitar derrubar o seu servidor por passar do limite de tempo, atualiza apenas 50 variações por “rodada”. Então, se você tem mais de 50 variações no produto, os vínculos não vão acontecer.

Mas, como o woocommerce é camarada, ele tem um filtro maroto para aumentar esse limite de updates: 

function custom_wc_ajax_variation_threshold( $qty, $product ) {
    return 200; (você pode colocar a quantidade máxima desejada aqui)
}
add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 100, 2 );

Coloque esse código no arquivo functions.php do seu site e seja feliz.

Deixa um comentário para o adm se consegui te ajudar, e até a próxima.

READ MORE

Como criar um lightbox

É 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:
lightbox
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!

READ MORE
widget

Criando área de widget

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:
result
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.

READ MORE
Ajax – 400 bad request

Ajax – 400 bad request – Como resolver?

Estava eu desenvolvendo meu projeto quando preciso fazer uma requisição via ajax e apareceu esse erro, e agora? Bom, como todo programador fui atrás de uma solução.
No meu arquivo functions.php coloquei a seguinte função:

add_action('wp_footer', 'eps_footer');
 function eps_footer() {
     echo "<script>var ajax_request_url = '".admin_url( 'admin-ajax.php' )."'</script>";
 }

E não resolveu todo o problema, começou a dar o erro 500 – internal server error, e comecei a pensar, por que não fiz Ed. Física?
Por fim a solução para esse erro era muito simples, eu tinha esquecido de dar o include do arquivo ajax.php no arquivo functions.php.
NÃO ESQUEÇAM DE DAR INCLUDE DO SEU ARQUIVO AJAX.
Espero ter ajudado, e até a próxima!
 

READ MORE
wordpress

Como adicionar campo para classe no widget do WordPress

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.
exemplo

READ MORE
woo

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

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.
sem-campo
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 ) );
}
}
com-campo
E esse foi o resultado! Espero ter ajudado, e até a próxima.

READ MORE

Aprenda como reorganizar os campos de checkout do woocommerce

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:
foreach
 
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:
second-foreach
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.

READ MORE
abri-um-negocio-de-assinaturas-e-agora

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

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.

READ MORE
  • 1
  • 2