Tableless » Wordpress http://tableless.com.br Tableless - Desenvolvimento inteligente com padrões web Fri, 18 May 2012 12:22:56 +0000 pt-br hourly 1 http://wordpress.org/?v=3.3.2 Cuidado com invasões no WordPress http://tableless.com.br/cuidado-com-invasoes-no-wordpress/ http://tableless.com.br/cuidado-com-invasoes-no-wordpress/#comments Fri, 20 Apr 2012 13:00:47 +0000 Paulo Rodrigues http://tableless.com.br/?p=5943 Um dos principais gerenciadores de conteúdo, o WordPress, possui ainda possui algumas falhas. É necessário ficar atento e tomar cuidado para qualquer situação.

Há duas semanas, passei sérios problemas com o WordPress, com o blog Papo de Buteco. Nunca tinha passado por uma situação parecida com essa, e por isso que tomar cuidado antes de agir.

Como verifiquei

Por otimizar o site, sempre estou verificando como as páginas do blog estão se comportando no Google. Busquei por site:papodebuteco.net para verificar todas as minhas páginas indexas no Google, e obtive o seguinte resultado:

Ao primeiro olhar, já observei as tags de título das páginas estavam totalmente diferentes, no mínimo estranho, não é? Comecei a estudar a situação, e conclui que neste caso, aconteceu uma espécie de Cloaking, que reproduzia a página normal para o usuário e outra página para o Google.

De primeira, achei que eram os plug-ins instalados no site que estavam fazendo isso, mas até que o Google me enviou a seguinte mensagem para o Web Master Tools do site:

Ao acessar o link indicado na mensagem, e realmente foi mostrada uma página com um conteúdo não relacionado ao blog.

Solucionando o problema

O que precisa ser feito é: Reinstalar o WordPress para atualizar seus arquivos.

No próprio painel do gerenciador, é possível fazer essa reinstalação, então nada de apagar todos os arquivos do FTP, enviar novamente e reintegrar com o banco de dados.

Em seu painel de adiminstração, procure no menu de navegação por Atualizações e siga como na imagem abaixo:

Depois disso, acessei a página que o Google indicou na mensagem e não tive mais problemas, a página foi carregou com seu conteúdo real.

Para confirmar, você pode tirar a “prova real” buscando como o Googlebot, que é uma ferramenta encontrada no Google Webmaster Tools.

 

 

 

 

 

Ao clicar em “Processando” e estiver lendo a página do jeito que deveria ler, com o seu código fonte real, pode ter certeza que o problema foi resolvido.

Conclusão

Não se sabe ao certo ainda como essa invasão se manifestou no blog, mas é bom ficar atento a qualquer tipo de propagação estranha relacionada a seu site. O tipo de invasão apresentado no artigo não é único, podem existir outros casos espalhados. A vulnerabilidade pode também está relacionada com o servidor onde o seu site está hospedado.

As páginas que não entraram no cache do Google depois que o problema foi solucionado, ainda se encontram com o mesmo conteúdo da invasão, se vocês procurarem, ainda acharam algumas páginas assim.

Apesar de tudo isso, não houve oscilação com o número de visitas do site, ele se mantéu estável. E o número de backlinks apontados para as páginas do blog cresceu, mas com um textos âncora sem relação ao conteúdo real do blog.

O Cloaking é considerada uma técnica de blackhat pelo Google, caso o problema não fosse solucionado a tempo, o blog poderia ser sofrer algum tipo de punição, veja mais em: http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=66355.

Se o seu site ainda não é integrado ao Google Web Master Tools, acesse agora e integre! É simples, fácil, e oferece informações importantes para o seu site. Para completar e evitar que algo semelhante aconteça, confira dicas para aumentar a segurança no WordPress.

Quero aproveitar o espaço para agradecer Leandro Lopes (dono do blog Papo de Buteco), que autorizou a postagem de exemplos relacionados ao blog dele. É importante relatar o que aconteceu, ainda mais com casos verídicos, pois pode acontecer com qualquer um.

Posts Relacionados

]]> http://tableless.com.br/cuidado-com-invasoes-no-wordpress/feed/ 16 Usando Meta Box em seu tema WordPress http://tableless.com.br/usando-meta-box-em-seu-tema-wordpress/ http://tableless.com.br/usando-meta-box-em-seu-tema-wordpress/#comments Tue, 20 Mar 2012 13:52:29 +0000 keppelen http://tableless.com.br/?p=5161 O que são Meta Boxes?

Os Meta Boxes (Caixas de informações) foi implementado a partir da versão 2.5 do CMS, os Meta Boxes são aquelas caixas arrastáveis que estão presente na Dashboard, edição de um post, páginas, além de outros locais na área administrativa do WordPress.

Os Meta Boxes é uma maneira atraente para a tela do editor de post e evita forçar os usuários a confiar em campos personalizados. Se você já criou algum tipo de campo personalizado no WordPress, você provavelmente gostaria de adicionar algum campo.

Com os Meta Box e mais fácil. Imagine que você esteja criando um tema para um cliente que precise catalogar sua coleção de vinil. Você começa imediatamente olhar para o WordPress para ver como isso pode ser feito. Cada Post representa um Vinil, que é perfeito para adicionar imagem, titulo e descrição. Podemos usar também as categorias e marcar dentro do WordPress para que os organize. Mas vamos supor que o cara queira acrescentar mais um dado para catalogação? O WordPress não te dar essa opção por padrão a não ser que usemos o grande Meta Box.

Usando o Meta boxes

Neste tutorial não iremos trabalhar em um arquivo functions.php. Que não é o lugar correto para ele. Se você está adicionando dados a uma mensagem, é provável que você quer que ele exista independentemente do seu projeto de front end. Como tal, você deve colocar esse código em algum lugar que não é dependente do seu design. Ex: Um arquivo de plugin.

Convenientemente o WordPress oferece uma função para adicionar os Meta Boxes a uma tela de administração, usando o seguinte “add_meta_box”. Abaixo um exemplo.

1
<?php add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>

Parâmetros

  • $id – (String) Identificador único (Obrigatório)
  • $title – (String) Titulo a ser exibido (Obrigatório)
  • $callback – (Callback) Função para exibir o conteúdo do Meta Boxes  (Obrigatório) Exemplo
  • $page – (String) Onde será exibido o Meta Boxes. Exemplos ('post', 'page', 'link', or'custom_post_type' )
  •  $context (String) Tela onde o box vai ser inserido.
  • $priority (String) Prioridade de inserção da caixa em relação as demais.
  • $callback_args (array) Determina a passagem de parâmetros a função callback.

Então, nosso add_meta_box será parecido com esse.

1
<?php add_meta_box ( 'my-meta-box-id', 'Meu primeiro Meta Box', 'vinil_meta_box_vinil', 'post', 'normal', 'high' ); ?>

Não podemos simplesmente colocar em nosso arquivo plugin sozinho, se não vamos acabar na tela branca da morte ou o erro fatal PHP. Chamada para a função indefinida, por quê? Porque chamamos a função add_meta_box antes do WordPress ser carregado. Com isso precisamos fazer um gancho no WordPress, que faz parte da api de um plugin. Basicamente, as funções começam enganchando em uma ação do WordPress. Então vamos fazer nosso gancho add_meta_box em uma função, então conectar essa função ao add_meta_boxes, evitando o erro fatal. Nosso código para o Meta Boxes para tela de postagem ficará assim:

1
2
3
4
5
6
7
<?php add_action( 'add_meta_boxes', 'vinil_meta_box_add' );

function vinil_meta_box_add() {

add_meta_box( 'my-meta-box-id', 'Meu primeiro Meta Box', 'vinil_meta_box_vinil', 'post', 'normal', 'high' ); }

?>

Renderizando o Meta Box

O código acima é o suficiente para adicionar o Meta Box, mas agora temos que tornar a coisa mais legal. Vamos adicionar campos, apenas um formulário HTML misturado com um pouco de PHP para exibir os dados salvos. Não precisamos incluir as tags de formulário pois o WordPress já faz isso para a gente.  :) Lembre que a string passada como o $callback em add_meta_box? Agora vamos criar um função com o mesmo nome.

1
2
3
4
5
<?php function vinil_meta_box_vinil() {

echo 'Conteúdo do meu primeiro Meta Box.'; }

?>

Agora vamos fazer o formulário, vamos adicionar vários campos para este Meta Box, 1 input, 1 select, 1 checkbox. Vamos começar com o input.

Na função

1
2
3
4
5
function vinil_meta_box_vinil() {

echo 'Conteúdo do meu primeiro Meta Box.'; }

?>

Vamos retirar o

1
echo 'Conteúdo do meu primeiro Meta Box';

Para começar a fazer o formulario do Meta Box, ficando da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
function vinil_meta_box_vinil()
{
?>
<p>
<label for="texto_meta_box">Text Label</label>
<input type="text" name="texto_meta_box" id="texto_meta_box" />
</p>
<?php
}

?>

Mas e quanto a exibir os dados? Bem você verá a seguinte, vamos armazenar esses dados na tabela usando a função wp_postmeta update_post_meta. Essas funções tem duas irmãs chamada get_post_meta e get_post_custom, que pega os dados de wp_postmeta. O get_post_meta só peega dados de uma chave, enquanto get_post_custom pega tudo. Como estamos usando realmente apenas um campo, neste ponto, vamos usar o get_post_meta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function vinil_meta_box_vinil()
{
$values = get_post_custom( $post->ID );
$text = isset( $values['texto_meta_box'] ) ? esc_attr( $values['texto_meta_box'][0] ) : '';
$selected = isset( $values['meta_box_select'] ) ? esc_attr( $values['meta_box_select'][0] ) : '';
$check = isset( $values['meta_box_check'] ) ? esc_attr( $values['meta_box_check'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>
<label for="texto_meta_box">Text Label</label>
<input type="text" name="texto_meta_box" id="texto_meta_box" />
</p>

<?php
}

?>

Agora vamos adicionar o DropDow em nosso Meta Box.

No drop-dow iremos usar uma das funções mais úteis no WordPress, o selected(). Ele compara o primeiro valor, os dados que salva, com o segundo atributo de valor, <option>. Se eles são os mesmos a função selected=”selected” que faz com o que o valor do drop down seja gravado. Mas você também pode usar o selected com botões de radio.

Ficando da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function vinil_meta_box_vinil()
{
$values = get_post_custom( $post->ID );
$text = isset( $values['texto_meta_box'] ) ? esc_attr( $values['texto_meta_box'][0] ) : '';
$selected = isset( $values['meta_box_select'] ) ? esc_attr( $values['meta_box_select'][0] ) : '';
$check = isset( $values['meta_box_check'] ) ? esc_attr( $values['meta_box_check'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>
<label for="texto_meta_box">Text Label</label>
<input type="text" name="texto_meta_box" id="texto_meta_box" />
</p>
<p>
<label for="meta_box_select">Color</label>
<select name="meta_box_select" id="meta_box_select">
<option value="red" <?php selected( $selected, 'red' ); ?>>Vermelho</option>
<option value="blue" <?php selected( $selected, 'blue' ); ?>>Azul</option>
</select>
</p>
<?php
}

?>

Adicionando o Check box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function vinil_meta_box_vinil()
{
$values = get_post_custom( $post->ID );
$text = isset( $values['texto_meta_box'] ) ? esc_attr( $values['texto_meta_box'][0] ) : '';
$selected = isset( $values['meta_box_select'] ) ? esc_attr( $values['meta_box_select'][0] ) : '';
$check = isset( $values['meta_box_check'] ) ? esc_attr( $values['meta_box_check'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>
<label for="texto_meta_box">Text Label</label>
<input type="text" name="texto_meta_box" id="texto_meta_box" />
</p>
<p>
<label for="meta_box_select">Color</label>
<select name="meta_box_select" id="meta_box_select">
<option value="red" <?php selected( $selected, 'red' ); ?>>Vermelho</option>
<option value="blue" <?php selected( $selected, 'blue' ); ?>>Azul</option>
</select>
</p>
<p>
<input type="checkbox" name="meta_box_check" id="meta_box_check" <?php checked( $check, 'on' ); ?> />
<label for="meta_box_check">Don't Check This.</label>
</p>
<?php
}

?>

Novamente o WordPress fornece a função checked(). Ela funciona exatamente como selected() comparando o primeiro valor com o segundo valor e repetindo para checked=”checked” se eles são o mesmo.

Para finalizar vamos salvar nosso Meta Box

Para salvar nossos dados, vamos confiar em outro gancho: save_post. Isso funciona como o nosso gancho na ação acima:

1
<?php add_action( 'save_post', 'vinil_meta_box_save' ); ?>

A função vinil_meta_box receberá um argumento, a ID do Post, e vai cuidar da limpeza e salvar todos os nossos dados.

Antes de podermos fazer qualquer coisa, no entanto, que temos que fazer 3 coisas: verificar se o Post esta auto salvando, verificar o valor único que criamos anteriormente, e verificar se o usuário atual pode realmente editar o post.

1
2
3
4
5
6
7
8
9
10
add_action( 'save_post', 'vinil_meta_box_save' );
function vinil_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

if( !current_user_can( 'edit_post' ) ) return;

}

Agora as coisas divertidas: na verdade, salvar nossos dados. A regra número um, ao colocar qualquer coisa em seu banco de dados ou em seu site é não confiar no usuário. Mesmo se esse usuário é você. Para o efeito, antes de salvar os dados, queremos ter certeza de que não há nada malicioso lá. Felizmente WordPress fornece um monte de funções para validação de dados. Para isso vamos utilizar o esc_attr(). E também vamos usar a função update_post_meta para salvar os nossos dados. Leva três argumentos: a ID post, a chave de meta, e o valor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
add_action( 'save_post', 'vinil_meta_box_save' );
function vinil_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

if( !current_user_can( 'edit_post' ) ) return;

$allowed = array(
'a' => array(
'href' => array()
)
);

if( isset( $_POST['texto_meta_box'] ) )
update_post_meta( $post_id, 'texto_meta_box', wp_kses( $_POST['texto_meta_box'], $allowed ) );

if( isset( $_POST['meta_box_select'] ) )
update_post_meta( $post_id, 'meta_box_select', esc_attr( $_POST['meta_box_select'] ) );

$chk = ( isset( $_POST['meta_box_check'] ) && $_POST['meta_box_check'] ) ? 'on' : 'off';
update_post_meta( $post_id, 'meta_box_check', $chk );
}

?>

É isso, agora você deve ter um Meta Boxes funcionando em seu WordPress.

Nosso arquivo fica assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
/*
Plugin Name: Meta Box
Plugin URI: http://bygiovanni.com.br
Description:
Version: 1.0
Author: Giovanni - Tableless
Author URI: http://bygiovanni.com.br
*/

//ADICIONANDO O META BOX
add_action( 'add_meta_boxes', 'vinil_meta_box_add' );
function vinil_meta_box_add()
{
add_meta_box( 'my-meta-box-id', 'Meu primeiro Meta Box', 'vinil_meta_box_vinil', 'post', 'normal', 'high' );
}

//FORMULARIO PARA SALVAS OS DADOS
function vinil_meta_box_vinil()
{
$values = get_post_custom( $post->ID );
$text = isset( $values['texto_meta_box'] ) ? esc_attr( $values['texto_meta_box'][0] ) : '';
$selected = isset( $values['meta_box_select'] ) ? esc_attr( $values['meta_box_select'][0] ) : '';
$check = isset( $values['meta_box_check'] ) ? esc_attr( $values['meta_box_check'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>
<label for="texto_meta_box">Text Label</label>
<input type="text" name="texto_meta_box" id="texto_meta_box" />
</p>
<p>
<label for="meta_box_select">Color</label>
<select name="meta_box_select" id="meta_box_select">
<option value="red" <?php selected( $selected, 'red' ); ?>>Vermelho</option>
<option value="blue" <?php selected( $selected, 'blue' ); ?>>Azul</option>
</select>
</p>
<p>
<input type="checkbox" name="meta_box_check" id="meta_box_check" <?php checked( $check, 'on' ); ?> />
<label for="meta_box_check">Don't Check This.</label>
</p>
<?php
}

add_action( 'save_post', 'vinil_meta_box_save' );
function vinil_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

if( !current_user_can( 'edit_post' ) ) return;

$allowed = array(
'a' => array(
'href' => array()
)
);

if( isset( $_POST['texto_meta_box'] ) )
update_post_meta( $post_id, 'texto_meta_box', wp_kses( $_POST['texto_meta_box'], $allowed ) );

if( isset( $_POST['meta_box_select'] ) )
update_post_meta( $post_id, 'meta_box_select', esc_attr( $_POST['meta_box_select'] ) );

$chk = ( isset( $_POST['meta_box_check'] ) && $_POST['meta_box_check'] ) ? 'on' : 'off';
update_post_meta( $post_id, 'meta_box_check', $chk );
}

?>

Para saber mais sobre os Meta Box podem ver no Codex que também é uma ótima fonte de estudo para o WP. http://codex.wordpress.org/Function_Reference/add_meta_box

Posts Relacionados

]]> http://tableless.com.br/usando-meta-box-em-seu-tema-wordpress/feed/ 3 Front-end concluído, como começar no WordPress? Parte I http://tableless.com.br/front-end-concluido-como-comecar-wordpress-parte-i/ http://tableless.com.br/front-end-concluido-como-comecar-wordpress-parte-i/#comments Thu, 05 Jan 2012 10:00:52 +0000 Paulo Rodrigues http://tableless.com.br/?p=4835 Andando pelo fórum do Tableless, me deparei com esta postagem, e pelo que eu vi, essa é uma grande dúvida para todos que estão iniciando no desenvolvimento com WordPress.

O usuário Angelo Lucas do nosso fórum postou a seguinte resposta:

  1. Desenvolva o Front-End do tema (HTML, CSS e Javascript)
  2. Instale o PHP, Mysql na sua máquina. Baixe o WordPress e instale-o, ele vem com alguns temas incluso
  3. Duplique um tema do wordpress e começe a implementar seu HTML na programação já existente, não é difícil, não é chato.

Gostei bastante da resposta, mas o assunto é tão empolgante que merecia um conteúdo mais detalhado. E para melhorar o aprendizado e nos guiar, desenhei um layout bem simples. Não reparem, sou péssimo design.

Iniciando o desenvolvimento

Com o front-end concluído, duplique o tema padrão do WordPress e altere o nome da pasta duplicada para o nome do seu tema. Acho melhor duplicar, pois se perde um tempo criando os arquivos do zero. Se o seu WordPress for a partir da versão 3.2, terás dois temas padrões: o Twenty Ten e o Twenty Eleven. A diferença é que o Twenty Eleven vem programado nas tags do HTML5.

Depois disso, é importante entender a hierarquia de arquivos do WordPress e saber que sem os arquivos index.php e style.css o tema não funciona.

O arquivo style.css, além do estilo do tema, pode-se preencher informações do tema. Adicione no inicio do style.css esses comentários:

1
2
3
4
5
6
7
8
9
/*
Theme Name: Nome do meu Tema
Theme URI: http://meusite.com.br
Description: Descrição do meu tema
Author: Paulo Rodrigues
Author URI: http://meusite.com.br
Version: 1.0
Tags: branco, vermelho, preto, header, menu, colunas, rodape
*/

Personalize a partir das suas informações, mas não é necessário preencher todas elas, colocar o nome do tema e o nome do autor está ótimo.

Dois arquivos do tema possuem importância e servem para aumentar a nossa produtividade, que são: header.php e footer.php e essas páginas são incluidas nas páginas através das funções get_header() e get_footer(), respectivamente.

Vou mostrar um exemplo de meus arquivos header.php e footer.php para vocês terem noção.

Header para desenvolvimento WordPress

header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
<head profile="http://gmpg.org/xfn/11">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('title');?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<!-- Se você for usar comentário no seu tema, deixe isso! -->
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' );?>
<!-- Se você for usar comentário no seu tema, deixe isso! -->
<?php
//Sempre deixa essa função wp_head(); pois alguns plugins utilizam dela para retornar informação
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="main">
<header>
<section id="logo">
<h2><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?>"><span></span><?php bloginfo('title'); ?> - <?php bloginfo('description'); ?></a></h2>
</section>
<?php
//Função para retornar o menu
wp_nav_menu(array(
'menu' => 'menu_principal',
'theme_location' => 'menu_principal',
'echo' => true,
'container' => 'nav',
'container_id' => 'menu'
));
?>
</header>
<div id="container">

Estudem essas funções: bloginfo(), wp_title(), wp_head() e wp_footer().

wp_nav_menu, WTF??? O que é isso, Paulo? Calma, é uma função para retornar menus, confira esse artigo de criação de menus no WordPress, que aí tenho certeza que vai entender tudo.

Personalize essas páginas através do seu front-end, tente explorar o máximo dessas páginas para não perder tempo nas páginas internas.

Finalizando esse inicio, o esqueleto do seu tema está pronto!

Trabalhando com a página inicial e páginas internas

Beleza, concluímos nosso “esqueleto”, e a partir daí vamos criar as páginas do tema. A página índex.php é a página inicial do tema, ela só não é a página inicial, quando adicionamos ao nosso tema a pagina home.php. Mas de inicio, vamos trabalhar com a página índex.php.

Já ouviram falar no Loop do WordPress? Confiram esse artigo pois vão entender para o que ela serve.

Vamos ao exemplo da página inicial:

Conteudo para tema no WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php get_header(); ?>
<div id="blog">
<?php while (have_posts()) : the_post(); ?>
<section class="post">
<h1 class="title-post"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p>Postado: <?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?></p>
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
</section>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Estude a função the_time() e a forma de customizar data e hora dessa função.

A função the_post_thumbnail serve para retornar os Posts Thumbnails, Caso não tenha interesse, pode remover a função, mas se tiver interesse, aprenda através desse artigo.

A função get_sidebar() serve para retornar o que está no arquivo sidebar.php, e esclareça suas dúvidas nesse artigo para criação de sidebars

Arquivo sidebar.php

1
2
3
4
5
<div id="sidebar">
<ul class="sidebar">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar("Blog Sidebar")); ?>
</ul>
</div>

Não se limite a esse artigo, aprofunde seu conhecimento através da documentação disponibilizada pelo WordPress. “Futuque” novas funções, pois é assim que se aprende, é quebrando a cara e arriscando. Basta somente ter interesse!

Esperem pelas próximas partes deste artigo, pois vou aprofundar mais esse assunto e pensar no WordPress como um poderoso CMS.

Quero deixar o espaço sempre aberto para quem tiver dúvidas, dar sugestões, criticas construtivas, ect. Podem comentar, enviar email e encher o fórum do Tableless, pois de lá nasceu a idéia para esse artigo e tenho certeza que nascerá os próximos também.

Posts Relacionados

]]> http://tableless.com.br/front-end-concluido-como-comecar-wordpress-parte-i/feed/ 17 Conheça o WP e-Commerce http://tableless.com.br/wp-e-commerce/ http://tableless.com.br/wp-e-commerce/#comments Sun, 30 Oct 2011 18:32:29 +0000 Paulo Rodrigues http://tableless.com.br/?p=4456 O WordPress tornou-se uma peça fundamental para desenvolvedores que utilizam deste CMS para solucionar suas demandas. Sua rápida evolução e fácil adaptação fez com que o WordPress não fosse somente projetado para pequenos sites, e sim para grandes projetos. Por causa disso, criou-se uma necessidade de uma possível integração com e-Commerce e a partir de plugins isso é possível.

Hoje existe uma diversidade de plugins para tornar seu site em uma loja virtual. Mas de uma maneira pratica e objetiva, apresento o plugin: WP e-Commerce.

O WP e-Commerce é o plugin mais popular e prático para transformar o seu site em WordPress em uma loja virtual. Trabalhar com o WordPress já é fácil, trabalhar com o WP e-Commerce é mais fácil ainda.

5 Motivos para usar o WP e-Commerce

  1. Plugin gratuito, fácil de instalar, altamente personalizável e funciona bem com qualquer tema compatível com o WordPress;
  2. Disponível em várias línguas, inclusive em português;
  3. Suporta múltiplas moedas, inclusive o real;
  4. Além de ter várias formas para pagamento, até com o PagSeguro;
  5. 100% amigável com SEO, e plugins de SEO para WordPress;

Tudo isso e muito mais! Confira a lista completa. Veja também a secção de vídeos explicando tudo sobre o WP-eCommerce.

Além do WP e-Commerce, o ShopperPress é uma alternativa para essa integração de lojas virtuais com WordPress.

Mais comentados

]]> http://tableless.com.br/wp-e-commerce/feed/ 9 Quando utilizar (ou não) frameworks CSS http://tableless.com.br/quando-utilizar-ou-nao-frameworks-css/ http://tableless.com.br/quando-utilizar-ou-nao-frameworks-css/#comments Thu, 01 Sep 2011 13:08:36 +0000 Talita Pagani http://tableless.com.br/?p=4048 Framework é um conjunto de componentes que provêm uma estrutura básica de elementos reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será construída.

No caso de CSS, os frameworks constituem bibliotecas que visam permitir a codificação do CSS de modo mais fácil e compatível com padrões de estilos, agregando uma série de opções já prontas para projetar uma página web, como se fosse um esqueleto, reduzindo o tempo gasto com o desenvolvimento.

Os frameworks CSS geralmente apresentam definições de formatação os elementos mais comuns de uma página: formulários, cabeçalhos, estilos de textos e imagens. Alguns apresentar opções para a estruturação do conteúdo baseado em grids.

A utilização de frameworks HTML e/ou CSS ainda é um assunto que divide a opinião dos desenvolvedores, pois muitos consideram o framework como uma solução pronta e acreditam que ele tira o trabalho das mãos do designer/desenvolvedor e faz com que ele não aprimore os seus conhecimentos.

Será que você, sem perceber, nunca criou o seu próprio framework? Pense em um arquivo CSS padrão (além do reset) que você criou para melhorar a produtividade de seus projetos.

É importante esclarecer que o uso de frameworks não substitui a necessidade do designer/ desenvolvedor de desenvolver o CSS do site. Ele apenas fornece uma base para a formatação de elementos comuns e otimiza o trabalho repetitivo.

Para quem os frameworks são recomendados

Utilizar um framework CSS não é uma prática recomendada para quem está começando, principalmente por privar a pessoa da prática e do conhecimento sobre o funcionamento do CSS. Além disso, se ela não compreender bem CSS, poderá ter problemas para resolver problemas de layout causados por incompatibilidade entre o framework e um código CSS específico que ela inseriu.

Portanto, é recomendável que frameworks sejam utilizados por quem possui um nível razoável de conhecimento e compreensão do código, mas tem a intenção de otimizar parte do trabalho com o uso de um framework. E isto serve não apenas para quem pretende utilizar um framework CSS, mas também qualquer tipo de framework.

Quando é interessante utilizar?

  • Prototipação rápida em HTML
  • Sites de larga escala e com estruturas similares (como portais, blog/sites no estilo magazine)
  • Sites construídos através de plataformas de CMS
  • Projetos que tenham prazos curtos
  • Projetos realizados em equipe onde há diversas pessoas trabalhando no mesmo CSS, podendo ter um conjunto consistente de padrões de codificação

Vantagens

  • Padronização de código entre a equipe de desenvolvimento;
  • Arquivos modularizados;
  • Flexibilidade de estilos, classes genéricas que podem ser combinadas de diversas formas nos elementos da página;
  • Geralmente já possuem uma documentação, que pode ser consultada pela equipe em caso de dúvida ou necessidade de solucionar algum problema;
  • Compatibilidade cross-browser (na maioria dos casos);
  • Você pode melhorar suas habilidades estudando o framework;
  • Redução de tempo: o desenvolvedor/designer pode se concentrar mais nos aspectos particulares do site desenvolvido, pois a base está assegurada e não precisa desenvolvê-la do zero;
  • Reduz futuros esforços de manutenção caso seja necessário resposicionar elementos ou alterar características de renderização (fonte, margens, etc) em diversos elementos.

Desvantagens

  • Quantidade excessiva de modificações que devem ser feitas para adaptar o framework;
  • O framework pode conter códigos irrelevantes que nunca serão utilizados no projeto e serão carregados sem necessidade, podendo diminuir o desempenho da página;
  • Nem sempre o código é bem organizado;
  • Muitos frameworks apresentam classes pouco semânticas (ex.: span-5).

Algumas dicas para melhorar o uso do framework

Como as classes geralmente não apresentam muita semântica, procure colocar IDs significativos nos elementos da página, quando possível.

Você também pode optar por utilizar somente uma parte do framework. Em projetos em que utilizei o Blueprint CSS, muitas vezes utilizava apenas algumas folhas de estilos do framework que se adequavam ao que eu necessitava.

Dica: evite usar vários frameworks CSS em um mesmo projeto. Isto quebra a ideia de consistência, uma vez que cada framework tem o seu padrão de estruturação.

Como escolher o framework?

  • Verificar se é realmente necessário o uso de um framework CSS no projeto;
  • Avaliar se o código do framework escolhido tem uma estrutura e organização;
  • Avaliar se há código excessivo que nunca será utilizado;
  • Conferir se há uma boa documentação;
  • Verificar se os recursos do framework são adequados ao que você necessita para o projeto. Não adianta utilizar um framework CSS focado em renderização quando seria mais útil um framework de grid.

Frameworks CSS, se bem utilizados, podem trazer muitos benefícios para seus projetos, basta saber como explorar o potencial que eles possuem ;)

Referências

Why you should NOT use a web framework - http://checkedexception.blogspot.com/2010/04/why-you-should-not-use-web-framework.html

To use a framework, or not to: that is the question - http://www.phparch.com/2010/04/to-use-a-framework-or-not-to-that-is-the-question/

Please do not Use CSS Frameworks - http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/

Which CSS Grid Framework Should You Use for Web Design? - http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

When to use CSS framework? - http://www.vcarrer.com/2008/08/when-to-use-css-framework.html

WHAT’S NOT TO LOVE ABOUT CSS FRAMEWORKS? - http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/

Frameworks for Designers - http://www.alistapart.com/articles/frameworksfordesigners

Posts Relacionados

]]> http://tableless.com.br/quando-utilizar-ou-nao-frameworks-css/feed/ 18 Melhorando carregamento do WordPress http://tableless.com.br/melhorando-carregamento-wordpress/ http://tableless.com.br/melhorando-carregamento-wordpress/#comments Thu, 09 Jun 2011 13:00:47 +0000 Paulo Rodrigues http://tableless.com.br/?p=3785

A web cresceu, e com isso várias tecnologias e ferramentas foram criadas ou melhoradas para suprir necessidades requisitadas pelos usuários. Ao longo do tempo clientes e usuários vão pedindo sites mais bonitos e atraentes, e também exigindo rapidez. Para quem usa WordPress, existe aperfeiçoamento e acertos para deixar ele mais rápido. Já para quem não usa, lamento, mas é bom prestar atenção algumas dicas, pois podem servir.

Comprima HTML, CSS e JS

Comprimir arquivos é essencial para reduzir o seu tamanho e melhorar o carregamento, pois menor é o seu tamanho, melhor e mais rápido ele vai abrir.

Para isso, usa-se o WP-Minify, este plug-in auxilia na compressão destes arquivos. Baixe WP-Minify, instale e ative as opções de compressão de que desejar.

Atenção: Ativando a compressão de HTML, se o seu código não estiver todo identado, não se espante. Quer uma dica? Se fores assim como eu, ative apenas a compressão do CSS e JS.

Otimize suas imagens

Por uma necessidade de sites bonitos, na maioria das vezes há um uso excessivo de imagens que na maioria das vezes estão mal otimizadas com alta qualidade.

Tente reduzir o tamanho das imagens do seu site sem que se atinja tanto a sua qualidade. Seja um background ou uma imagem qualquer.

Para reduzir o tamanho de imagens enviadas via WordPress, utilize o plug-in WP Smush.it

Use um Plug-in de Cache

Sempre é bom ter um plug-in de cache ativado no WordPress, como já citei no artigo “Otimizando seu site em WordPress para SEO”, o plug-in de cache, também ajuda no carregamento das páginas.

Re-indico WP Super Cache, W3 Total Cache, Batcache ou Hyper Cache.

Dicas úteis

  1. Estrutura dos códigos: A estrutura do código também interfere, seja ele HTML, CSS ou JS. Para HTML, faça um código semântico, sem muitas gambiarras. Confira esse artigo para melhorar organização do código CSS, que vai ajudar muito.
  2. Boa hospedagem: Ter um servidor com melhor qualidade ajuda muito no carregamento. Escolhendo uma boa hospedagem, tente também conter quedas no servidor.
  3. Desative plug-ins desnecessários: É relevante desativar plug-ins desnecessários ou sem muita utilidade, pois seus arquivos quando requisitados vão ser acionados, aumentando o carregamento final.
  4. Evite muitas requisições: Evite requisições desnecessárias, seja ela de CSS, JS ou até mesmo de outras páginas.
  5. Mantenha seu WordPress atualizado: As atualizações do WordPress não vem em vão, pois tem sua importância. Atualizando, você vai melhorar o desempenho, além de evitar vulnerabilidades, aumentando a segurança.

Vamos Refletir

Repare… Ter um site bonito, nem sempre é ter um site pesado. Se prestarmos atenção, melhora-se muita coisa no site. Fique atento, pois por alguns milésimos você perder um usuário e/ou ficar com uma posição indesejada nos mecanismos de busca.

Com o CSS3, muita coisa vai melhorar. Muita coisa será substituída com os novos elementos. Uma pena que não virou padrão ainda, nos deixa mais triste saber que vai demorar até virar padrão. (Mesmo assim), seja ousado e use alguns elementos.

Relação com SEO: Demonstrei certa preocupação com o SEO se tratando deste assunto, pois o carregamento da página vai interferir no seu posionamento em mecanismos de busca, em especial o Google.

Você pode analisar, através da ferramenta do Google – Page Speed, a velocidade no carregamento do site. Se você usa Google Analytics, segue uma dica para analisar o carregamento do site.

Posts Relacionados

]]> http://tableless.com.br/melhorando-carregamento-wordpress/feed/ 10 Posts Formats do WordPress http://tableless.com.br/posts-formats-do-wordpress/ http://tableless.com.br/posts-formats-do-wordpress/#comments Wed, 18 May 2011 12:59:34 +0000 Paulo Rodrigues http://tableless.com.br/?p=3659 O WordPress depois de sua atualização para versão 3.1, trouxe uma função de Formato nos Posts, que consiste em personalizar a visualização do post. É uma funcionalidade para temas, que oferece uma lista de formatos que estão disponíveis. São suportados os seguintes formatos:

  • aside
  • gallery
  • link
  • image
  • quote
  • status
  • video
  • audio
  • chat

Esses formatos são padrões, até hoje não se tem maneiras para criar um novo tipo de formato.

Ativando o suporte aos Posts Formats

Para ativar o suporte, adicione este seguinte código no arquivo functions.php do seu tema:

1
<?php add_theme_support('post-formats', array('aside', 'gallery','link','image')); ?>

Não é obrigatório usar todos os formatos, e sim os quais você achar necessário. Caso queria adicionar mais formatos, adicione dentro do array os formatos disponíveis na lista acima.

Com este código, só é adicionado o suporte para o conteúdo de Posts, caso queria adicionar em outros tipos de conteúdo, adicione o seguinte código:

1
<?php add_post_type_support( 'page', 'post-formats' ); ?>

Essa função habilita o suporte para outros tipos de conteúdo, no primeiro parâmetro defini-se o nome do conteúdo e no segundo, o tipo de suporte.

Após ativar o suporte, terás dentro da edição do seus posts, um espaço feito esse para edição dos Posts Formats.

Personalizando o retorno dos formatos

Para especificar o suporte, utilizamos formatos padrões. Mas como ele vai ser visualizado, como ele vai ser interpretado, é você quem vai definir.

Um exemplo simples de manipulação dos formatos (como isso é um post, este código deve ser adicionado no loop) :

1
2
3
4
5
<?php if ( has_post_format( 'link' )) : ?>
   <a href="<?php echo get_the_content(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php elseif(has_post_format( 'image' )) : ?>
   <img src="<?php echo get_the_content(); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>

A função has_post_format, é um tipo de tag condicional que verifica qual o tipo formato visualizado.

No exemplo acima, utilizei os dados enviados pelo content como um link para algum site ou link para leitura de imagem.

Dica: Se for usar este exemplo, antes de postar, utilize a aba de editor HTML para evitar qualquer tipo de formatação, e use get_the_content para retornar o que foi enviado pelo editor, para também evitar qualquer tipo de formatação e retornar somente a informação enviada.

Você pode personalizar este retorno das maneiras que quiser. Se for usar esta função, seja mais criativo possível, explorando o máximo que essa função tem para oferecer.

Caso tenha maiores dúvidas, consulte o codex de Posts Formats

Posts Relacionados

]]> http://tableless.com.br/posts-formats-do-wordpress/feed/ 4 Tags Condicionais do WordPress http://tableless.com.br/tags-condicionais-do-wordpress/ http://tableless.com.br/tags-condicionais-do-wordpress/#comments Tue, 12 Apr 2011 13:00:48 +0000 Paulo Rodrigues http://tableless.com.br/?p=3459 As Tags Condicionais são funções próprias do WordPress capazes de manipular todo o conteúdo de sua página. Com elas, você ganha aquele tempo que iria perder criando aquelas condições para retornar seus valores de maneira personalizada. Geralmente retornam o valor em Booleano, ou seja, TRUE (verdadeiro) ou FALSE (falso).

Como usar?

1
2
3
4
5
6
7
<?php
    if(tag_condicional()){
        //se verdadeiro, retorne isso
    }else{
        //se falso, retorne isso
    }
?>

Tags que podem receber parâmetros dentro de sua função, ex:

1
2
3
4
5
6
7
<?php
    if(tag_condicional(‘valor’)){
        //se verdadeiro, retorne isso
    }else{
        //se falso, retorne isso
    }
?>

A tabela abaixo que encontrei no livro WordPress 3, é basicamente um mini-guia das tags que precisam de parâmetros e das que não precisam.

Condicional ID Slug Título Array Outro
is_single X X X X
is_sticky X
is_page X X
is_page_template Nome do arquivo
is_category X X X X
in_category X X X X
is_tag X X X
has_tag X X X
is_tax X X X
is_author X Nome do usuário Nickname X
has_excerpt X
As tags seguintes não aceitam argumentos; elas são verdadeiras se o modelo de arquivo correspondente está sendo usado para exibir a página atual.
is_home is_search is_day is_feed is_404 is_comments_popup
is_front_page is_time is_month is_attachment is_trackback is_active_sidebar
is_archive is_date is_year is_singular is_preview is_admin
As tags seguintes não aceitam argumentos. Elas retornam informações sobre a página que está sendo visualizada.
comments_open pings_open is_paged in_the_loop

Para melhorar o conteúdo e o aprendizado, criei um Guia de Referência das Tags Condicionais do WordPress.

Posts Relacionados

]]> http://tableless.com.br/tags-condicionais-do-wordpress/feed/ 2 Custom Post Types no WordPress http://tableless.com.br/custom-post-types-wordpress/ http://tableless.com.br/custom-post-types-wordpress/#comments Tue, 29 Mar 2011 13:00:57 +0000 Paulo Rodrigues http://tableless.com.br/?p=3332 Custom Post Types é a função que manipula os tipos de conteúdo no WordPress, ou seja, pode-se criar conteúdos personalizados a partir da sua demanda. Isso é uma das provas mais concretas que temos hoje um CMS muito forte que não serve apenas para criar blog e/ou sites de pequeno porte.

Criando Custom Post Types

Como o assunto é muito amplo, criarei com vocês um exemplo de Notícias.

Em functions.php, adicione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
    add_action('init', 'type_post_noticias');
 
    function type_post_noticias() {
        $labels = array(
            'name' => _x('Notícias', 'post type general name'),
            'singular_name' => _x('Notícia', 'post type singular name'),
            'add_new' => _x('Adicionar Novo', 'Novo item'),
            'add_new_item' => __('Novo Item'),
            'edit_item' => __('Editar Item'),
            'new_item' => __('Novo Item'),
            'view_item' => __('Ver Item'),
            'search_items' => __('Procurar Itens'),
            'not_found' =>  __('Nenhum registro encontrado'),
            'not_found_in_trash' => __('Nenhum registro encontrado na lixeira'),
            'parent_item_colon' => '',
            'menu_name' => 'Notícias'
        );

        $args = array(
            'labels' => $labels,
            'public' => true,
            'public_queryable' => true,
            'show_ui' => true,         
            'query_var' => true,
            'rewrite' => true,
            'capability_type' => 'post',
            'has_archive' => true,
            'hierarchical' => false,
            'menu_position' => null,
'register_meta_box_cb' => 'noticias_meta_box',     
            'supports' => array('title','editor','thumbnail','comments', 'excerpt', 'custom-fields', 'revisions', 'trackbacks')
          );
 
register_post_type( 'noticias' , $args );
flush_rewrite_rules();
}
?>

Primeiro adicionamos a função add_action, que vai abrigar dois parâmetros, o gancho (aonde vai rodar a função) e a função callback (a função que vai ser chamada com as informações). É função type_post_noticias que vai armazenar as informações do post. A variável $labels, está indicando os valores para cada título.

A variável $args é onde vamos colocar as informações do post. Explico com mais detalhes abaixo.

  • labels: Indica a variável que contém as informações do label
  • public: determina se o conteúdo pode ser visto no painel de administração, por padrão é falso.
  • publicly_queryable: determina se a consulta pode ser realizada usando o argumento post_type, por padrão ele herda o valor do public.
  • show_ui: determina se telas de adicionar e editar o post devem ser adicionadas esse tipo de post, por padrão ele herda o valor do public.
  • query_var: evita consultas ou valores de sequência, por padrão é falso.
  • rewrite: reescrita do link, por padrão é verdadeiro.
  • capability_type: define o tipo de conteúdo que o tipo de post personalizado vai seguir, por padrão é post.
  • has_archive: permite os arquivos do tipo do post, por padrão é falso.
  • hierarchial: determina que o tipo do post é hierárquico (igual o das páginas), por padrão o valor é falso
  • menu_position: determina a ordem do menu, por padrão é null (ele ficará em baixo do menu dos comentários), mas pode receber esses seguintes valores
    • 5 – Em baixo do menu Post;
    • 10 – Em baixo do menu mídia;
    • 20 – Em baixo do menu páginas;
    • 60 – Em baixo do primeiro separador;
    • 100 – Em baixo do segundo separador.
  • register_meta_box_cb: Retorna a função que chamará as caixas de meta para o formulário (irei explicar à frente).
    supports: determina os recursos aceitos para esse tipo de post, por padrão é vazio, por isso tem que definir, ele recebe esses valores:

    • author: o autor por uma área personalizada
    • title: inclui o título ao tipo do post
    • editor: inclui a área de conteúdo do post (VISUAL ou HTML) e uploader de mídia
    • excerpts: inclui o campo de resumo
    • thumbnail: determina se o tipo de post pode inlcuir miniatura de post (http://tableless.com.br/adicionando-post-thumbnail)
    • comments: inclui os comentários
    • trackbacks: inclui os trackbacks
    • custom-fields: inclui a baixa de Custom Fields e se os campos serão automaticamente salvos
    • revisions: inclui revisões (armazenadas ou exibidas)
    • page-attributes: inclui a caixa Page Attributes (são encontradas na inserção de páginas), contendo as opções de parent, template e menu order.

Para o registro do post, é necessário a função register_post_type, que abrigará dois parâmetros. No primeiro é definido o nome do post (de preferência coloque em letras minúsculas e sem espaço, uma slug) e o outro agregará as demais informações do post, neste caso, a variável $args.

Criando Taxonomias

A taxonomia é uma forma de criar um tipo de categoria para o tipo de conteúdo.

Adicione em functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
register_taxonomy(
"categorias",
      "noticias",
      array(            
        "label" => "Categorias",
            "singular_label" => "Categoria",
            "rewrite" => true,
            "hierarchical" => true
)
);
?>

Com a função register_taxonomy, registramos uma nova taxonomia. O primeiro valor aonde será definido o nome da taxonomia (de preferência de letras minúsculas e sem espaço), o segundo valor é definido o nome do tipo de conteúdo registrado, onde essa taxonomia se agregará. No array, é definido informações já explicadas acima.

Criando campos personalizados

Vamos trabalhar com a variável register_meta_box na criação de campos personalizados. Para essa variável, foi definido o valor noticias_meta_box, que será a nossa função callback, a função que vai ser chamada para a criação da meta.

Em functions.php adicione:

1
2
3
4
5
<?php
function noticias_meta_box(){        
        add_meta_box('meta_box_test', __('Meta Box'), 'meta_box_meta_test', 'noticias', 'side', 'high');
}
?>

Retornamos a função definida para a criação de meta box, dentro dela definimos na função add_meta_box, os argumentos respectivamente, são:

  • $id: o nome para o meta box, destinado para uso interno
  • $title: o título da caixa
  • $callback: a função que irá ser chamada para imprimir o conteúdo da caixa
  • $page: o tipo de post que vão existir esse meta, para aparecer em mais de um, coloque dentro de um array, ex: array(‘noticias’, ‘post’)
  • $context: em qual parte da página de edição ela vai está (normal, advanced ou side [lateral])
  • $priority: em qual altura a caixa deve aparecer dentro da seção (high [alta], normal, low[baixa), a depender do valor, caixas com prioridade maior ficará encima

Depois que definimos a meta, vamos agora retornar a função que vai imprimir o conteúdo da caixa:

1
2
3
4
5
6
7
8
9
10
<?php
function meta_box_meta_test(){
      global $post;
      $metaBoxValor = get_post_meta($post->ID, 'valor_meta', true);
?>        
    <label for="inputValorMeta">Valor: </label>
    <input type="text" name="valor_meta" id="inputValorMeta" value="<?php echo $metaBoxValor; ?>" />
<?php
    }
?>

A função foi criada, dentro dela imprimi-se o que o Box vai conter. Para garantir que o campo retornado é necessário usar a função get_post_meta. Ela requer três argumentos: o ID do post, o nome do campo (se possível sem acentos e nem espaços) e um valor true/false determinando se a função deve retornar um valor individual ou não.

Por fim criaremos a função que vai salvar as alterações dos campos personalizados:

1
2
3
4
5
6
7
8
<?php
    add_action('save_post', 'save_noticias_post');
   
    function save_noticias_post(){
        global $post;        
            update_post_meta($post->ID, 'valor_meta', $_POST['valor_meta']);
    }
?>

Inicialmente adicionamos a ação no gancho save_post com o retorno da função save_noticias_post. A função update_post_meta vai receber três argumentos, os dois primeiros serão iguais aos explicados na função get_post_meta, a única diferença que o ultimo argumento vai receber o valor alterado, caso seja alterado manualmente colocamos uma simples string com o outro valor. Neste caso a alteração será feita após o envio do formulário.

Criando um LOOP personalizado

Vamos criar o LOOP personalizado de acordo com o tipo de post, caso ainda não tenha visto o que seja um LOOP, veja

Aonde queria que aparecesse a repetição, adicione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$newsArgs = array( 'post_type' => 'noticias', 'posts_per_page' => 4);                  
                       
      $newsLoop = new WP_Query( $newsArgs );                  
                       
      while ( $newsLoop->have_posts() ) : $newsLoop->the_post();              ?>
<div class="news">                                
        <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
            <p><strong><?php the_time('F jS, Y') ?></strong> by <?php the_author_posts_link() ?></p>
            <p><?php the_content(); ?></p>
<p><?php echo get_the_term_list( $post->ID, 'categorias', 'Categorias: ', ' '); ?></p>
            <p>Retornando o campo personalizado: <?php echo get_post_meta($post->ID, 'valor_meta', true); ?></p>
</div>
<?php endwhile; ?>

O único termo desconhecido no Loop é a função get_the_term_list, que vai retornar a taxonomia para o post. O primeiro argumento é o valor do ID do post, o segundo valor é o nome definido da taxonomia, o terceiro valor é o que vai retonar antes de retornar as taxonomias e o último o separador.

Não há dificuldade, o segredo está na variável $newsArgs, que é aonde você vai definir as opções da repetição, ele pode receber mais argumentos, que você pode ver em: http://codex.wordpress.org/Function_Reference/WP_Query

Para visualizar um post, editamos as informações no arquivo single.php do nosso tema, quando temos um Custom Post Type, por padrão ele lê com essa página, caso queria ter uma pagina só para o tipo de post, você pode uma nova página chamada single-{slug}.php, ou seja, essa slug seria trocada pelo nome do Custom Post Type, no nosso caso, single-noticias.php.

Feeds para tipos de post personalizado

Se seu site existe muitos leitores via feed e você quer mostrar o conteúdo personalizado, como fazer? Lendo um livro, WordPress 3 Básico (livro que indico para iniciantes ou desenvolvedores natos), achei essa solução, muito simples.

Em functions.php, adicione:

1
2
3
4
5
6
7
8
9
10
<?php
add_filter('pre_get_posts', 'postsfeed');
   
    function postsfeed($query){
        if( is_feed() ){
            $query->set('post_type', array('post', 'noticias'));
        }
        return $query;
    }
?>

No código vamos adicionar o filtro para a consulta de conteúdo para o Feed, você pode adicionar inúmeros conteúdos personalizados.

Reduzindo o código

Existe mesmo a necessidade para registrar o Custom Post Type a quantidade de argumentos que foi mostrado? Não.

Neste artigo fez questão de mostrar a maioria das variáveis, mas você pode reduzir o código ainda mais em futuras alterações. Em vez de registrar o seu conteúdo com aquele código enorme, pode-se substituir por:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
add_action('init', 'type_post_noticias');
 
    function type_post_noticias() {
        $labels = array(
            'name' => _x('Notícias', 'post type general name'),
            'singular_name' => _x(Notícia', 'post type singular name')
        );

        $args = array(
            'labels' => $labels,
            'public' => true,          
            'register_meta_box_cb' => 'noticias_meta_box',
            'supports' => array('title','editor','thumbnail','comments', 'excerpt', 'custom-fields', 'revisions', 'trackbacks')
          );
 
    register_post_type( 'noticias' , $args );
    flush_rewrite_rules();  
?>

Ambas as formas estão corretas.

Posts Relacionados

]]> http://tableless.com.br/custom-post-types-wordpress/feed/ 17 Otimizando seu site em WordPress para SEO http://tableless.com.br/otimizando-site-wordpress-seo/ http://tableless.com.br/otimizando-site-wordpress-seo/#comments Thu, 17 Mar 2011 11:59:54 +0000 Paulo Rodrigues http://tableless.com.br/?p=3152 Uma característica que defina o WordPress é a customização. Em poucas linhas conseguimos soluções significantes. Seja trabalhando com suas funções ou com seus plugins, temos resultados objetivos para preparar um Blog e até mesmo um site de grande porte, como temos hoje, vários exemplos disso.

Elogiam muito o WordPress por ele ter uma facilidade para otimização de sites (SEO). Antes de começarem a ler as dicas que vou citar, faça a seguinte reflexão: O que é um site hoje, sem ser bem indexado pelos mecanismos de busca?

Melhore a tag title do seu site

Você acha mesmo que a tag de título do seu site não tem importância? Espero que não, pois é com ela que os mecanismos de busca reconhecem uma das primeiras informações do seu site.

Coloque o seu título da seguinte forma:

1
<title><?php wp_title(“|”, true, ‘right’); ?><?php bloginfo(‘name’); ?></title>

A função wp_title imprime vários resultados a depender da sua página.

Links permanentes (Permalinks)

Quem usa WordPress e não usa essa função básica, não sabe o que está perdendo. A URL também tem uma função importante para indexação de sites, pois também é reconhecido antes da página ser carregada. O seu site sairia na frente de diversas URL’s que usam aqueles parâmetros grandes e sem semântica.

Dentro de seu painel de administração, procure por Settings (Configurações) e depois Links Permanentes (Permalinks). Selecione a opção Custom Structure (Estrutura Personalizada) e altere sua estrutura para:

1
/%category%/%postname%/

Otimizando as metas do seu site

Para otimizar as metas, utilize o plug-in All in One SEO Pack, com esse plug-in conseguimos facilmente manipular as metas e também títulos do site. Com ele, alteram-se as metas de descrição e keywords (palavras-chave) da página inicial e também dos posts, além dos títulos de cada página.

Baixe o plug-in, instale-o e ative.

Mecanismos de busca odeiam SPAM

Os mecanismos de busca odeiam SPAM, ou seja, odeiam conteúdo ruim e/ou desnecessário. Existe um plug-in que modera spam no seu site, chama-se Akismet. Geralmente ele já é incluído quando você instala o WordPress, mas caso não encontre depois que instalar, baixe-o e ative-o.

Para usar do plug-in é necessário resgatar um código gerado pelo site deles.

Use semântica no seu código

Do que adianta ter todos esses aperfeiçoamentos no seu site e seu site não estiver com um código semântico? Por isso trabalhe com um código de qualidade para que não haja dificuldade para seu código ser lido pelos mecanismos de busca.

Use alt e title para as imagens, não esqueçam, pois as imagens só podem ser lidas desta maneira. Trabalhe bem com as tags de título <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, e estabeleça uma hierarquia entre elas.

Utilize sempre um plug-in de cache

A partir da demanda do seu site e ele for crescendo em questão de conteúdo, é sempre bom ter um plug-in de cache para diminuir o carregamento da sua página, sendo assim os mecanismos de busca não terão dificuldades para carregar seu site.

Indico WP Super Cache, W3 Total Cache, Batcache ou Hyper Cache.

Tenho certeza que com um deles, seu site estará em boas mãos em relação ao cache.

Sitemaps (mapa do site)

Para os mecanismos de busca, um sitemap ajuda nas buscas de páginas, pois ele relaciona as URL existentes no seu site. Leia esse artigo e veja o porquê do uso de sitemaps.

O WordPress tem um plug-in que gera um sitemap já otimizado para mecanismos de busca.

Use o Google SiteMap Generator e não tenha possíveis problemas para este assunto.

Crie um bom Meta Robôs

É importante você ter um robots.txt na raiz do seu site, que é um arquivo funciona como filtro para os Crawlers e os robôs dos mecanismos de busca, permitindo ou não acesso a páginas do seu site.

Crie um arquivo em txt, chamado robots.txt com o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /trackback
Disallow: /feed
Disallow: /comments
Disallow: /category/*/*
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Disallow: /*?*
Disallow: /*?
Allow: /wp-content/uploads

# Google Image
User-agent: Googlebot-Image
Disallow:
Allow: /*

# Google AdSense
User-agent: Mediapartners-Google*
Disallow:
Allow: /*

# digg mirror
User-agent: duggmirror
Disallow: /

Sitemap: http://www.seusite.com.br/sitemap.xml

Envie para o servidor e ponha na raiz do seu site.

E no header.php do seu tema, adicione o código:

1
2
3
4
5
6
7
8
9
10
11
<?php
if(is_single() || is_page() || is_category() || is_home()) {
        echo '<meta name="robots" content="all,noodp" />';
}
else if(is_archive()) {
        echo '<meta name="robots" content="noarchive,noodp" />';
}
else if(is_search() || is_404()) {
        echo '<meta name="robots" content="noindex,noarchive" />';
}
?>

Faça um bom conteúdo

Não adianta ter um site todo otimizado para os mecanismos e eles não terem o que buscar de conteúdo no seu site. Fazer um bom conteúdo é essencial para qualquer indexação de artigo, página, textos ect.

Também não se esqueça de trabalhar com as redes sociais, pois maior quantidade de links gerados para o seu site, maior relevância ele terá.

Seja sempre objetivo e claro na suas publicações, tenho certeza que terá um bom resultado. Vale ressaltar que o Google está punindo quem copia conteúdo, muito cuidado.

Caso tenha futuras dúvidas, o WordPress oferece no seu codex um guia para otimização de SEO

Posts Relacionados

]]> http://tableless.com.br/otimizando-site-wordpress-seo/feed/ 20