Desenvolvedor Front-end - Ruan Mér » Blog

Como verificar se um elemento existe no HTML com jQuery

Ruan Mér — Fri, 09 Sep 2011 19:38:25 +0000

As vezes usando jQuery (ou qualquer outra biblioteca javascript) precisamos verificar se um certo elemento existe ou não no HTML.

O uso dessa condição é comum quando você tem muitos plugins jQuery que não estão linkados em todas as páginas do seu site, e apenas um arquivo “base.js” com todas as chamadas das funções desses plugins. Nesse caso, o arquivo “base.js” vai dar erro, pois não vai encontrar o link dos plugins em todas as páginas que ele é executado.

Talvez você tenha tentado o óbvio que seria:

if ( $("#minhadiv") ){
  // faça algo
}

Mas o código acima não funciona com jQuery. O correto é usar o seguinte código:

if ( $("#minhadiv").length ){
  // faça algo
}

Com esse if você verifica se um elemento existe na página, e se sim (true), execute um código em especial. Caso o if retorne false, o código dentro dele será ignorado.

Adicionando a slug do post como classe no body em WordPress

Ruan Mér — Wed, 03 Aug 2011 03:55:57 +0000

Usar as classes inseridas da função body_class aumenta muito o seu poder de customização de CSS em seu projeto em WordPress. Por padrão o WordPress insere algumas classes como: ID do post, o tipo de post, o template usado, entre outras coisas. Mas as vezes isso não é o bastante. Em um post anterior eu ensinei como adicionar o nome do navegador como classe na função body_class. Neste post vou mostrar uma função simples que vai adicionar o tipo e slug de um post como classe na tag body.

Abaixo segue a função que você precisa adicionar no seu arquivo functions.php:

add_filter( 'body_class', 'post_name_in_body_class' );
function post_name_in_body_class( $classes ){
	if( is_singular() )
	{
		global $post;
		array_push( $classes, "{$post->post_type}-{$post->post_name}" );
	}
	return $classes;
}

O resultado dessa função é o tipo de post + o slug do post. Por exemplo, se for do tipo page (página) com nome de contato ficará “page-contato”.

Exibindo posts entre duas datas no WordPress

Ruan Mér — Tue, 19 Jul 2011 23:36:20 +0000

O WordPress é uma ferramente que permite diversas coisas, uma delas é exibir posts entre duas datas. Com um simples filtro, você pode mudar sua query. Para isso, adicione o seguinte código antes da função query_posts dentro da página do seu tema:


  function filter_where($where = '') {
        $where .= " AND post_date >= '1980-05-11' AND post_date <= '2011-05-11'";
    return $where;
  }
  add_filter('posts_where', 'filter_where');
 
  query_posts($query_string);
  while (have_posts()) :
      the_post();
      the_content();
  endwhile;
?>

Altere as datas ’1980-05-11′ e ’2011-05-11′ pelas datas desejadas, lembre-se de que a primeira data tem de ser anterior a segunda, e ambas tem de estar escritas no padrão americano (ano-mês-dia).

Adicionando o nome do navegador como classe na tag body no WordPress

Ruan Mér — Mon, 18 Jul 2011 22:07:15 +0000

Um problema comum que todo desenvolvedor encontra quando desenvolve seu código html/css é a falta de compatibilidade entre os navegadores (browsers), principalmente se tratando de Internet Explorer (IE). Somos obrigados a usar de diversos meios para poder fazer com que o código seja renderizado de formas diferentes em cada navegador.

Se você está usando o WordPress e precisa criar estilos diferentes para cada navegador, uma boa maneira de fazer isso é adicionar o nome do navegador como classe no elemento body do HTML. Você iria escrever seu CSS da seguinte forma:

.minha-div {}
.ie6 .minha-div {} /* se for o Internet Explorer 6 */
.ie7 .minha-div {} /* se for o Internet Explorer 7 */
.firefox .minha-div {} /* se for o Firefox */

No código HTML do seu tema WordPress, você tem a seguinte função PHP na tag body:

 body_class(); ?>>

Para adicionar classes a função body_class, teremos de criar uma função no arquivo functions.php que usará o filtro body_class. Veja o código a seguir com a função:

 
function browser_body_class($classes) { 
    $browser = $_SERVER[ 'HTTP_USER_AGENT' ];
 
    // Mac, PC ...ou Linux
    if ( preg_match( "/Mac/", $browser ) ){
        $classes[] = 'mac';
 
    } elseif ( preg_match( "/Windows/", $browser ) ){
        $classes[] = 'windows';
 
    } elseif ( preg_match( "/Linux/", $browser ) ) {
        $classes[] = 'linux';
 
    } else {
        $classes[] = 'unknown-os';
    }
 
    // Checa na seguinte ordem: Chrome, Safari, Opera, MSIE, FF
    if ( preg_match( "/Chrome/", $browser ) ) {
        $classes[] = 'chrome';
 
        preg_match( "/Chrome\/(\d.\d)/si", $browser, $matches);
        $classesh_version = 'ch' . str_replace( '.', '-', $matches[1] );
        $classes[] = $classesh_version;
 
        } elseif ( preg_match( "/Safari/", $browser ) ) {
            $classes[] = 'safari';
 
            preg_match( "/Version\/(\d.\d)/si", $browser, $matches);
            $sf_version = 'sf' . str_replace( '.', '-', $matches[1] );
            $classes[] = $sf_version;
 
         } elseif ( preg_match( "/Opera/", $browser ) ) {
            $classes[] = 'opera';
 
            preg_match( "/Opera\/(\d.\d)/si", $browser, $matches);
            $op_version = 'op' . str_replace( '.', '-', $matches[1] );
            $classes[] = $op_version;
 
         } elseif ( preg_match( "/MSIE/", $browser ) ) {
            $classes[] = 'msie';
 
            if( preg_match( "/MSIE 6.0/", $browser ) ) {
                $classes[] = 'ie6';
            } elseif ( preg_match( "/MSIE 7.0/", $browser ) ){
                $classes[] = 'ie7';
            } elseif ( preg_match( "/MSIE 8.0/", $browser ) ){
                $classes[] = 'ie8';
            } elseif ( preg_match( "/MSIE 9.0/", $browser ) ){
                $classes[] = 'ie9';
            }
 
            } elseif ( preg_match( "/Firefox/", $browser ) && preg_match( "/Gecko/", $browser ) ) {
                $classes[] = 'firefox';
 
                preg_match( "/Firefox\/(\d)/si", $browser, $matches);
                $ff_version = 'ff' . str_replace( '.', '-', $matches[1] );
                $classes[] = $ff_version;
 
            } else {
                $classes[] = 'unknown-browser';
            }
 
    return $classes;
}
 
add_filter('body_class','browser_body_class');
?>

Adicione essa função no arquivo functions.php e está pronto!
Essa função não só checa qual é o navegador do usuário, como também checa a versão e o sistema operacional (MAC, Windows, Linux).

Com um pouco de leitura do código você será capaz de customizar o código e adicionar outras classes para sua necessidade.

Exibindo o número de posts e páginas(pages) no WordPress

Ruan Mér — Thu, 22 Jul 2010 02:30:21 +0000

O código para mostrar o número de posts, pages ou ambos no WordPress é bem simples.

A variável que vamos usar para “imprimir” na tela o resultado vai ser $numposts.

Exibindo o número de posts e páginas(pages)

get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");
if (0 < $numposts) $numposts = number_format($numposts);
?>

// Mostra o valor

Exibindo o número de posts

get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'");
if (0 < $numposts) $numposts = number_format($numposts);
?>

// Mostra o valor

Exibindo o número de páginas(pages)

get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'page'");
if (0 < $numposts) $numposts = number_format($numposts);
?>

// Mostra o valor

Customizando o campo de busca (search form) no WordPress

Ruan Mér — Tue, 29 Jun 2010 01:29:34 +0000

É muito fácil customizar a forma de apresentação do campo de busca (search form) no WordPress.

Primeiro, para chamar o campo de busca no seu tema de WordPress você usa o código:

Caso você não tenha no seu tema um arquivo chamado de searchform.php, o WordPress por padrão vai apresentar o template do campo de busca dessa forma:


	Search for:

Para mudar esse template você pode fazer de 2 formas. Primeiro, você pode criar um arquivo searchform.php e adicionar o código abaixo:

/**
Template Name: Search Form
**/


  
    Search for:

E então é só editar da maneira que desejar o HTML e o CSS.

Outra maneira é criar uma função dentro do arquivo functions.php no seu tema. Dentro dele adicione o código:

function my_search_form($form) {
$form = '
' . __('Search for:') . '



';
return $form;
}

Para chamar a função que você criou no seu tema, em vez do get_search_form(), você precisa usar o seguinte código:

* Nota: o nome my_search_form tem de ser o mesmo nome da função que você criou no arquivo functions.php.

Resolvendo problemas de paginação no WordPress

Ruan Mér — Wed, 23 Jun 2010 19:58:24 +0000

Um problema que muitos sofrem é a paginação dos posts quando se altera um Loop no WordPress. Por exemplo, geralmente usamos a função query_posts antes do Loop para que o WordPress mostre uma determinada categoria, ou uma determinada quantidade de posts. O problema é que quando usamos o query_posts, o WordPress é afetado, e assim a paginação não funciona corretamente. O usuário clica em “Próximos Posts”, e ele repete os mesmo posts novamente.

A solução é incluir um código no Loop, que irá fazer a paginação funcionar corretamente.

Primeiro, entre em uma das páginas do seu tema (index.php por exemplo). Localize no Loop, o código:

Se você adicionou o query_posts, ele deve está algo assim:

Para solucionar o problema, substitua o código por:

* Nota: É importante que você mantenha as aspas duplas na função query_posts, pois só assim ele irá funcionar.

E está pronto!

Atualização: Caso a maneira acima não funcione…

Já aconteceu comigo de o código acima não funcionar, e então eu tive de procura outra maneira de resolver esse problema. Segue o código:

Espero que uma dessas soluções possa ajuda.

Exibir os posts relacionados no WordPress sem precisar instalar plugin

Ruan Mér — Tue, 08 Jun 2010 03:25:40 +0000

Existe uma maneira de exibir no WordPress os posts relacionados sem precisar instalar um plugin. A vantagem é que você pode editar da maneiro que quiser a estrutura de como vai ser exibida esses posts relacionados.

Você pode exibir esses posts relacionados pelas tags ou pela categorias. Ou seja, posts que tiverem as mesmas tags/categorias irão aparecer nessa lista de posts relacionados.

Exibir os post relacionados pelas tags

Abra o arquivo single.php por exemplo, e nele adicione o código dentro do if do post:

 
	$tags = wp_get_post_tags($post->ID); 
	if ($tags) { 
		$tag_ids = array(); 
		foreach($tags as $individual_tag) 
			$tag_ids[] = $individual_tag->term_id; 
 
		$args=array( 
			'tag__in' => $tag_ids, 
			'post__not_in' => array($post->ID), 
			'showposts'=>5, // Number of related posts that will be shown. 
			'caller_get_posts'=>1 
		); 
		$my_query = new wp_query($args); 
		if( $my_query->have_posts() ) { 
			echo 'Related Posts
'; 
			while ($my_query->have_posts()) { 
				$my_query->the_post(); ?> 
				 the_permalink() ?>" rel="bookmark" title="Permanent Link to  the_title_attribute(); ?>"> the_title(); ?> 
			 } 
			echo '
'; 
		} 
	} 
?>

Exibir os post relacionados pelas categorias

Abra o arquivo single.php por exemplo, e nele adicione o código dentro do if do post:

 
	$categories = get_the_category($post->ID);  
	if ($categories) {  $category_ids = array();  
		foreach($categories as $individual_category)  
			$category_ids[] = $individual_category->term_id; 
 
		$args=array( 
			'category__in' => $category_ids, 
			'post__not_in' => array($post->ID), 
			'showposts'=>5, // Number of related posts that will be shown. 
			'caller_get_posts'=>1 
		); 
		$my_query = new wp_query($args); 
 
		if( $my_query->have_posts() ) { 
			echo 'Related Posts
'; 
			while ($my_query->have_posts()) { 
				$my_query->the_post(); ?> 
				 the_permalink() ?>" rel="bookmark" title="Permanent Link to  the_title_attribute(); ?>"> the_title(); ?> 
			 } 
			echo '
'; 
		} 
	} 
?>

Importante!

É importante lembrar que os dois códigos são feitos utilizando o método wp_query. Isso quer dizer que a sua query de post vai ser sobrescrita. Para que isso não aconteça usamos a função wp_reset_query(). Ela reseta a query para a padrão da página. Um exemplo de erro que pode está acontecendo com você é colocar os posts relacionados antes da lista de comentários do post. Nesse caso você verá que os comentários ficaram bugados. Para resolver isso inclua o seguinte código antes da chamada dos comentários:

  
	// aqui entra o código do seu post 
	// aqui entra o código de posts relacionados 
	wp_reset_query(); // aqui você reseta a query 
	comments_template(); // sua função que chama seus comentários 
?>

Criando uma página personalizada no WordPress

Ruan Mér — Fri, 04 Jun 2010 03:37:55 +0000

As vezes, em certos projetos, precisamos criar uma página com uma estrutura diferente das demais. Para isso, o WordPress oferece algumas opções. Uma delas é usar a opção de “Modelo Personalizado”.

Passo a passo

1º Copie o arquivo page.php ou single.php e renomeie para outro nome como novotemplate.php (esse nome é um exemplo, você pode dar o nome que preferir).

2º Agora você tem de fazer o WordPress identificar esse arquivo como sendo um template. Para isso vamos edita-ló. Você terá de substituir o código do começo do arquivo que você copiou para:

Nome do Template */
get_header(); ?>

* Nota: No lugar do “Nome do Template” você colocará o nome que desejar dar a essa página personalizada.

3º Agora que seu template foi criado, você só precisa ativá-lo quando for criar uma nova página. Quando criar uma nova página, vai ter a opção “Modelo” do lado direito, você só precisa escolher o nome do seu template entre as opções.

Observe a opção “Modelo” no layout

As opções de edições são inúmeras, só depende do que você precisar.

A opção modelo não aparece?

Se você fez todo o passo a passo exatamente como descrito acima, e quando foi ativar o novo template não visualizou a opção “Modelo”, de uma lida nesse post sobre um possível problema que pode ocorrer em relação a opção “modelo”.

Use diferentes fontes com o Google Font API

Ruan Mér — Wed, 02 Jun 2010 20:50:42 +0000

A maior decepção para a maioria dos web-designers é não poder usar vários tipos de fontes quando vão fazer um layout para um site em HTML onde o texto é dinâmico.

Atualmente existem diversas maneiras inventadas de conseguir usar as fontes “não padrão” nos sites. Tem algumas soluções que usam Flash, outras em JavaScript, mas nenhuma delas é boa o suficiente para se tornar algo recomendável.

Pensando nisso o Google criou um catálogo de fontes de alta qualidade para o uso dos desenvolvedores, o Google Font API. Ainda não é o que todos nos desejariamos, que seria usar isso nativamente, pois o Google Font API requer o uso de arquivos do Google para poder funcionar, mas é uma ótima solução.

As vantagens do Google Font API em relação aos outros métodos com Flash ou JavaScript são enormes. A unica desvantagem por enquanto é que o catálogo dispõe de poucas fontes, o que imaginamos ser algo que vai crescer com o tempo.

Essa API é compatível com a maioria dos browser que usamos atualmente, como: Chrome versão 4+, Firefox versão 3.5+, Safari versão 3.1+, Opera versão 10.5+ e IE versão 6+.

Usando o Google Font API

Para usa-lo é muito fácil. Veja um exemplo:


  
    
    
  
  
    Making the Web Beautiful!

Repare o código em vermelho que você tem de usar para poder funcionar. Bem simples neh?! Vamos ver agora como funciona o código em detalhe.

Primeiro você usa a URL padrão:

http://fonts.googleapis.com/css

Para usar a fonte Inconsolata por exemplo, adiciona ao link ?family= e o nome da fonte:

http://fonts.googleapis.com/css?family=Inconsolata

Se o seu projeto precisar de mais de uma fonte do Google Font API, adicione ao final do nome da primeira fonte uma | e em seguida o nome da outra fonte:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

*Nota: repare que as fontes com nome com espaço você tem de adicionar um + no lugar do espaço.

Mudando o estilo da fonte

O Google Font API também permite customizar o estilo da fonte que você quiser usar. Para isso, adicione dois pontos ( : ) ao final do nome da fonte para usar os estilos que quiser, por exemplo:

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

As opções de estilo são:
itálico = italic ou i
negrito = bold ou b
negrito e itálico = bolditalic ou bi

Veja quais variações de estilo cada fonte suporta no catálogo de fontes.

O Google também disponibiliza uma biblioteca JavaScript, chamada WebFont Loader, que te dá mais controle sobre o carregamento das fontes.