Como usar cookies com JavaScript?

O que são Cookies? 

O cookie (biscoito em inglês) é um grupo de dados trocados entre o navegador e o servidor, guardado em um arquivo de texto criado no seu computador. A sua função principal é a de manter a persistência de sessões (e dados) durante a navegação. Ou seja, é uma forma de guardar dados ao fechar/mudar de página. Assim é possível manter sessões, por exemplo. É por isso que você não faz o login sempre que abre a página do Facebook, Gmail ou de qualquer outro site que armazena sua sessão pelos cookies.

 Como criar um em Javascript?

Para criar um uso esta function muito útil:

<script>
//CRIAR COOKIE
            function setCookie(name,exdays, value){   
                //função universal para criar cookie
                var expires;
                var date;                
                date = new Date(); //  criando o COOKIE com a data atual
                date.setTime(date.getTime()+(exdays*24*60*60*1000));
                expires = date.toUTCString();               
                document.cookie = name+"="+value+"; expires="+expires+"; path=/";
            }
</script>

Como ler os cookies criados:


<script>
//Exibir
            function getCookie(name) {
                var cookies = document.cookie;
                var prefix = name + "=";
                var begin = cookies.indexOf("; " + prefix);
                if (begin == -1) {

                    begin = cookies.indexOf(prefix);
        
                    if (begin != 0) {
                        return null;
                    }
                } else {
                    begin += 2;
                }
                var end = cookies.indexOf(";", begin);
                if (end == -1) {
                    end = cookies.length;                       
                }
                return unescape(cookies.substring(begin + prefix.length, end));
            }
</script>

Exibir:

<script>
//Excluir
            function deleteCookie(name) {
                   if (getCookie(name)) {
                      document.cookie = name + "=" +"; expires=Thu, 01-Jan-70 00:00:01 GMT";
                   }
            }
</script>

Até logo e espero ter ajudado.

Listar os Posts Wordpress mais Visualizados

Certo dia me deparei em um projeto com uma necessidade muito simples, porém com pouca documentação na internet sobre o mesmo.

Precisava listar os últimos 4 Posts de um site mais lidos e fiquei algumas horas tentando descobrir algum plugin que pudesse me ajudar e qual eu pudesse adaptá-lo para a necessidade de um cliente.

Esse plugin eu consegui achar.  Se trata deste abaixo com o link:
   - https://wordpress.org/plugins/wordpress-popular-posts/

A maior vantagem neste plugin foi a possibilidade de em uma página personalizada de um Theme que eu venha a desenvolver e em uma página personalizada criada, eu possa inserir os critérios de Post_Type personalizados.
Para o exemplo que fiz criei os campos personalizados que precisava com o uso dos seguintes plugins:

  - https://br.wordpress.org/plugins/advanced-custom-fields/

E para que fique todos os campos personalizados relacionados a um Post Type personalizado, uso o seguinte plugin:

  - https://wordpress.org/plugins/custom-post-type-ui/

Embora o propósito deste artigo não seja detalhar o uso e criação dos campos personalizados e   post types eu estarei mostrando alguns codigos com o uso do get_fields() método na adaptação do bloco personalizado de "Posts mais Vistos".

Então a personalização do bloco, por exemplo na Home (index.hp de seu theme ou outro).  o parametro PHP de chamada do plugin seria este aqui:

<?php
$contPersonalizado = '<div class=\'col-md-3\' id=\'id-bloco-ultimos\'>
                  <div class=\'box-empreendimento-small\'>
                            {IMAGEM_DESTAQUE}
                          <div class=\'caption bottomcap-small\'>
                                  <h3>{tipo}</h3>
                                 <h4> {text_title}</h4>
                                 <p> {texto_destaque_home}</p>
                                 <br>
                                 <a class=\'btn btn-default\' role=\'button\' href=\'{url}\'>ver mais</a>
                        </div>
                     </div>
               </div>';

     wpp_get_mostpopular( 'post_type="imoveis"&limit=5&post_html="'.$contPersonalizado.'"' ); ?>

Se observarmos acima eu adicionei dois campo personalizados que não existe em uma instalação crua do WordPress:

  - {IMAGEM_DESTAQUE} {tipo} {texto_destaque_home}

Enquanto que os campos:

  - {text_title}  => Título do site somente texto;
  - {url}  => Url direta para abrir o post listado;

Me empolguei um pouco, mas o plugin após instalado apresenta na administração as seguintes abas de configuração:

Na aba Parameters, temos os exemplos de como personalizaríamos a exibição:

Daí surge a pergunta:  - Como eu faço para acrescentar os campos a lista deste plugin.
A resposta é alterando o PHP do seguinte arquivo:

 - /seusite/wp-content/plugins/wordpress-popular-posts/wordpress-popular-posts.php

Após a linha 1868 adicione as variáveis de que precisa
         
            $postidd = $p->id;
            $tipo = getfield('tipo', $p->id);

na linha   1896, acrescemtamos a varível dentro do objeto de array:

             'postidd' => $postidd,
             'tipo'  => $tipo,

Edit line to add postidd in list

$pattern = '/\{(excerpt|summary|stats|postidd|title|image|thumb|thumb_img|rating|score|url|text_title|postidd|tipo|author|category|views|comments|date)\}/i';

E para finalizar vamos acrescentar os IFs depois da variável :
     
             array_map('strtolower', $matches[0]);

if ( in_array("{postidd}", $matches[0]) ) { 
     $string = str_replace( "{postidd}", $data['postidd'], $string ); 
}
if ( in_array("{tipo}", $matches[0]) ) { 
     $string = str_replace( "{tipo}", $data['tipo'], $string ); 
}


Agora o uso das chaves dentro do parâmetro '&post_html=' irão aceitar os dois campos criados.

Falou galera, espero que possa ajudar a muitos e até logo.