Uma pergunta comum, porque deveríamos alterar para o CDN do Google Hosted Libraries?

Resposta simples e com vários argumentos. O CDN do Google Hosted Libraries é utilizado por milhares de sites na internet, as chances de você ou seu cliente visitar outro site que esteja utilizando esta biblioteca são enormes, desta forma será feito cache no seu navegador e não será necessário baixá-la novamente, logo o site será carregado mais rápido. O download será mais rápido caso você não tenha o cache, pois servidores de CDN são preparados para entregas de bibliotecas, além de você também reduzir o overload de seu servidor pois será um arquivo a menos para entregar.

Dito as motivações para utilizar um CDN, vamos lhe ensinar como substituir o jQuery hospedado localmente para um CDN. Copie o seguinte código e cole dentro do seu arquivo functions.php localizado no diretório do seu tema.

Obs.: Note a versão do jQuery que inserimos, se seu site e scripts não comportam a versão 2.2.0, altere para a 1.12.0.

if(!function_exists('replace_jquery')):
    function replace_jquery()
    {
        if ( !is_admin() )
        {           
            wp_deregister_script('jquery');
            wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', FALSE, '2.2.0');
            wp_enqueue_script('jquery');
        }
    }
    add_action('init', 'replace_jquery');
endif;

Tem alguma dica ou sugestão? Deixe nos comentários.

Nossa primeira sugestão é Blue Admin.

O tema Blue Admin utiliza um esquema de cores branco e azul bem agradáveis,  possui um efeito drop-down na barra do administrador de forma elegante. Ele também permite que adicione menus de personalizados para a barra de administrador. Este tema tem um design limpo, oferecendo uma interface de administração mais clara e intuitiva.

Nossa segunda sugestão é o tema Fancy Admin UI

O tema Fancy Admin UI simplifica a interface do painel, tornando-o mais limpo e mais fácil de navegar. Ele não só muda o design do painel de administração, mas também a barra Admin no topo. Suas cores padrão são azul e cinza, mas você pode personalizar o esquema de cores na parte inferior da página Configurações> Geral.

Tem alguma dúvida ou sugestão? Deixe nos comentários.

O WordPress já possui uma função muito interessante para esconder os e-mails, é a função antispambot. Para utilizá-la é simples, basta chamar a função passando o e-mail como parâmetro.

Exemplo:

<?php echo antispambot( 'fake@example.com' ); ?>

O resultado deste código será parecido com o resultado abaixo, mas para o usuário será fake@example.com:

john.doe@mysite.com

Para facilitar, criamos também um shortcode, assim será possível usar o seguinte código para mascarar o e-mail em suas postagens:

[email]fake@example.com[/email]

Para habilitar esta facilidade, adicione o código abaixo em seu functions.php.

function antispam( $atts, $content = null ){

	$content = trim($content);

	if(!filter_var($content, FILTER_VALIDATE_EMAIL) === false)
	{
		return antispambot( $content );
	}

	return;

}
add_shortcode( 'email', 'antispam' );

Mais uma dica, para habilitar este recurso ser utilizado nos widgets, adicione estas duas linhas ao functions.php:

add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );

Alguma dica ou sugestão? Escreva nos comentários.

1. Contador de Visualizações para seus Posts
2. Aprenda a bloquear Spammers de pegar os e-mails do seu site WordPress
3. Mude o tema da Administração do WordPress
4. Substitua o jQuery do WordPress (local) pelo jQuery do Google Hosted Libraries

Alguma dica ou sugestão? Deixe nos comentários.

Adicione no arquivo functions.php o código abaixo:

<?php

# Resgata o ID do POST
function get_post_id(){
    return get_the_ID();
}

# Resgata a quantidade de visualizações que um POST contém
function getPostViews(){
    
    $postID = get_post_id();
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return __('Nenhuma Visualização');
    }
    
    if($count == 1){
        return __('1 Visualização');
    }
    
    return $count.__(' Visualizações');
}

# Registra/Atualiza o contador do POST
add_action('wp_head', 'setPostViews');
function setPostViews() {
    
    $postID = get_post_id();
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    } else {
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

?>

Para visualizar a quantidade de visualizações, insira em seu tema o código:

<?php

$count = getPostViews();
echo $count;

?>

Alguma dica ou sugestão? Escreva nos comentários.

Por padrão, na finalização de compra do WooCommerce são solicitados diversas informações, mas as vezes não precisamos de todas. Neste caso, existe uma maneira de fazer com estes campos não apareçam e assim, facilitando o fechamento. Um exemplo, você vende materiais que são entregues online e não é necessário pedir o endereço do cliente, sendo assim, você deveria esconder as informações de rua, estado….

Para executar o procedimento, você deverá ter acesso aos arquivos do tema e editar o arquivo functions.php. Adicione o código no final do arquivo.

O código abaixo iria tirar todos os campos, não utilize esta cópia, mas filtre apenas os campos que precisar.

add_filter( 'woocommerce_checkout_fields' , 'removendo_campos_checkout' );
 
function removendo_campos_checkout ( $fields ) {

    unset($fields['billing']['billing_first_name']); // Nome
    unset($fields['billing']['billing_last_name']); // Sobrenome
    unset($fields['billing']['billing_company']); // Empresa
    unset($fields['billing']['billing_address_1']); // Endereço
    unset($fields['billing']['billing_address_2']); // Endereço de entrega
    unset($fields['billing']['billing_city']); // Cidade
    unset($fields['billing']['billing_postcode']); // CEP
    unset($fields['billing']['billing_country']); // País
    unset($fields['billing']['billing_state']); // Estado
    unset($fields['billing']['billing_phone']); // Telefone
    unset($fields['order']['order_comments']); // Comentários
    unset($fields['billing']['billing_email']); // E-mail
    unset($fields['account']['account_username']); // Usuário
    unset($fields['account']['account_password']); // Senha
    unset($fields['account']['account_password-2']); // Confirmação de Senha

    return $fields;
}

Se precisar remover apenas campos do endereço de entrega:

add_filter( 'woocommerce_checkout_fields' , 'remove_dados_de_entrega' );

function remove_dados_de_entrega( $fields ) {

    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);
    unset($fields['shipping']['shipping_company']);

    return $fields;
}

Postem suas dúvidas e sugestões nos comentários.

Diante deste gigante do e-commerce, as vezes é necessário personalizar um pouco e é isto que vamos ensinar, como criar novos campos na tela de fechamento de pedido. Criar campos personalizados no Woocommerce pode parecer complicado, mas, vamos mostrar uma maneira fácil, rápida e sem a necessidade de utilizar mais plugins.

O que vamos precisar fazer é:

1. Criar o campo na tela de Checkout
2. Validar o novo campo
3. Salvar o valor do novo campo no banco de dados
4. Mostrar o campo na tela gerencial de pedidos

Vamos começar, acesse a pasta do seu tema e edite o arquivo functions.php, adicione no final os códigos citados.

1 – Criar o campo na tela de Checkout

add_action( 'woocommerce_after_order_notes', 'novo_campo_woocommerce' );
 
function novo_campo_woocommerce( $checkout ) {
 
    echo '<div id="novo_campo_woocommerce"><h2>' . __('Novo campo, informação de teste') . '</h2>';
 
    woocommerce_form_field( 'novo_campo', array(
        'type'          => 'text',
        'class'         => array('novo_campo form-row-wide'),
        'label'         => __('Campo de Teste'),
        'placeholder'   => __('Digite suas informações aqui'),
        ), $checkout->get_value( 'novo_campo' ));
 
    echo '</div>';
 
}

Exemplo de como ficará na tela de Checkout.

2 – Validar o novo campo

O próximo passo agora é validar o campo conforme nossa necessidade.

add_action('woocommerce_checkout_process', 'validar_novo_campo_woocommerce');
 
function validar_novo_campo_woocommerce() {

    if ( empty( $_POST['novo_campo']) )
        wc_add_notice( __( 'Obrigatório o preenchimento.' ), 'error' );
}

Exemplo de mensagem de erro retornada.

3 – Salvar o novo valor no banco de dados

add_action( 'woocommerce_checkout_update_order_meta', 'novo_campo_checkout_order' );
 
function novo_campo_checkout_order( $order_id ) {
    if ( ! empty( $_POST['novo_campo'] ) ) {
        update_post_meta( $order_id, 'Novo Campo', sanitize_text_field( $_POST['novo_campo'] ) );
    }
}

4 – Mostrar o campo na tela de gerenciamento

add_action( 'woocommerce_admin_order_data_after_billing_address', 'mostrar_novo_campo', 10, 1 );
 
function mostrar_novo_campo($order){
    echo '<p><strong>'.__('Novo Campo').':</strong> ' . get_post_meta( $order->id, 'Novo Campo', true ) . '</p>';
}

Exemplo de como aparecerá na tela de gerenciamento de pedido, campo destacado com a cor amarela.

Também é possível remover os campos que não são necessários, vamos postar esta dica amanhã.

Para removermos estas informações, iremos criar uma função e para isso, será necessário alterar o functions.php de seu tema. Adicione no final do arquivo o seguinte conteúdo.

function remove_extra_informations()
{
    remove_action( 'wp_head', 'feed_links_extra', 3); // Remover a categoria feeds
    remove_action( 'wp_head', 'feed_links', 2); // Remover Feeds de Post e Comentários 
    remove_action( 'wp_head', 'rsd_link' );
    remove_action( 'wp_head', 'wlwmanifest_link' );
    remove_action( 'wp_head', 'wp_generator' ); // Remove versão do WordPress

    //--  Esta parte é conectada ao gerador de FEED --//
    remove_action( 'rss2_head', 'the_generator' );
    remove_action( 'rss_head',  'the_generator' );
    remove_action( 'rdf_header', 'the_generator' );
    remove_action( 'atom_head', 'the_generator' );
    remove_action( 'commentsrss2_head', 'the_generator' );
    remove_action( 'opml_head', 'the_generator' );
    remove_action( 'app_head',  'the_generator' );
    remove_action( 'comments_atom_head', 'the_generator' );
}

add_action( 'after_setup_theme', 'remove_extra_informations' );

Dica: Você pode verificar todas as informações utilizando var_dump ou print_r na variável $GLOBALS['wp_filter'] .

Uma outra dica é remover informações de versão que constam nos arquivos CSS/Javascript.

function remove_src_version( $src )
{
    global $wp_version;

    $version_str = '?ver='.$wp_version;
    $version_str_offset = strlen( $src ) - strlen( $version_str );

    if( substr( $src, $version_str_offset ) == $version_str )
    {
        return substr( $src, 0, $version_str_offset );
    }
    else
    {
        return $src;
    }
}

add_filter( 'script_loader_src', 'remove_src_version' );
add_filter( 'style_loader_src', 'remove_src_version' );

Mais uma dica, esta é utilizar o plugin Hide My WP ($22,00). Este oculta os diretórios do WordPress como você precisar. Exemplo, alterar /wp-content para /assets. O plugin está disponível no Code Canyon e é pago.

Primeiro, precisar instalar o plugin TwentyTwenty.

Depois, faça upload das imagens para seu site, pode ser por pelo gerenciamento de Mídia ou pela inserção de imagens nos posts. Com as duas imagens no servidor, é necessária pegar o link de cada uma, copie e cole em um arquivo a parte para ficar mais fácil.

Agora, basta editar ou inserir um post, no campo de edição, vamos utilizar o shortcode [TwentyTwenty][/ TwentyTwenty].

Certifique-se que ambas as fotos tenham as mesmas dimensões.

Com tudo pronto, vamos inserir o pequeno código para gerar o efeito.

[twentytwenty]
<img src="/wp-content/uploads/2014/12/batons-vermelhos-antes.jpg" alt="Antes" width="100%" height="350"/>
<img src="/wp-content/uploads/2014/12/batons-vermelhos-depois.jpg" alt="Depois" width="100%" height="350"/>
[/twentytwenty]

Explicação do código:

[twentytwenty] e [/twentytwenty] são a abertura e fechamento das tags que formaram os efeitos.

As imagens são, a 1ª o antes e a 2ª o depois.

1ª – /wp-content/uploads/2014/12/batons-vermelhos-antes.jpg
2ª – /wp-content/uploads/2014/12/batons-vermelhos-depois.jpg

Agora que já sabe como utilizar, vamos criar o efeito.

[twentytwenty]


[/twentytwenty]

Conforme você deslizar o seletor, verá que a imagem é sobreposta de acordo com sua necessidade, tornando visível e fácil de comparar, o “Before” e “After” somem de acordo que é feito o deslizamento.

Isso é tudo. Esperamos que este artigo tenha ajudado a você aprender a mostrar o antes e depois de uma foto em seu site WordPress.  Se você gostou deste artigo, também visite no link no Facebook e Google+, há diversas publicações interessantes.

Um dos motivos que nos levaram a escrever esta postagem é, quando você deleta uma página com o link de “contato” e depois cria outra, ele criará o link “contato2”, você só conseguirá criar a página com o nome correto caso delete a “contato” antiga da lixeira.

Diante desta necessidade, vimos 2 opções:

1ª – Limpar o cache automaticamente depois de X dias

// Limpará a lixeira após 7 dias
define( 'EMPTY_TRASH_DAYS', 7);

2ª – Quando excluir, eliminar permanentemente

// Exclui permanentemente
define( 'EMPTY_TRASH_DAYS', 0);