Tableless » php http://tableless.com.br Boas práticas de Desenvolvimento com Padrões Web Wed, 08 Feb 2012 13:23:50 +0000 pt-br hourly 1 http://wordpress.org/?v=3.3.1 Bloginfo Template Tag http://tableless.com.br/bloginfo-template-tag/ http://tableless.com.br/bloginfo-template-tag/#comments Thu, 21 Aug 2008 01:08:11 +0000 Diego Eis http://tableless.com.br/?p=1006 A Template Tag Bloginfo mostra informações sobre o blog. A maioria dessas informações são modificadas diretamente no painel de controle da sua instalação do WordPress. Isso pode ser utilizado em qualquer lugar do seu site. A Template Tag é a get_bloginfo().

Por exempo, se você precisa do nome do site para colocar em algum lugar do site, como o Logo, a sintaxe seria:


Os valores possíveis:

  • ‘name’ – Nome do site. Valor padrão.
  • ‘description’ – Descrição do site.
  • ‘url’ – O endereço do site.
  • ‘rdf_url’ – Endereço do RDF/RSS 1.0.
  • ‘rss_url’ – Endereço do RSS 0.92.
  • ‘rss2_url’ – Endereço para RSS 2.0.
  • ‘atom_url’ – URL Feed Atom.
  • ‘comments_rss2_url’ – Url para acesso do RSS 2.0 dos comentários.
  • ‘pingback_url’ – Url dos Pingbacks Pingback (XML-RPC file).
  • ‘admin_email’ – Endereço de email do administrador do WordPress.
  • ‘charset’ – Tabela de caractéres utilizada no Worpdress; Você define isso na Opções de Leitura no Admin.
  • ‘version’ – Mostra a versão do WordPress que você utiliza..
  • ‘text_direction’ – Retorna ‘rtl’ leitura da direita para esquerda ou ‘ltr’ para leitura da esquerda para direita, que é o padrão.

Se você quer ler mais sobre WordPress, experimente visitar a parte exclusiva sobre WordPress no Tableless.

Mais sobre Bloginfo no site do WordPress.

Posts Relacionados

]]> http://tableless.com.br/bloginfo-template-tag/feed/ 7 WordPress Include Tags http://tableless.com.br/wordpress-include-tags/ http://tableless.com.br/wordpress-include-tags/#comments Sun, 06 Jul 2008 06:22:43 +0000 Diego Eis http://tableless.com.br/?p=998 O WordPress tem 3 TemplatesTags para incluir elementos básicos de Cabeçalho, Coluna lateral (sidebar) e Rodapé, são eles: get_header(), get_sidebar() e get_footer(). Essas TemplateTags não aceitam qualquer tipo de parâmetro, portanto são simples de se aplicar. Em todos os themes do WordPress, essas 3 TemplateTags estão sempre presentes, mesmo assim, você pode modificar isso incluindo outro arquivo que não seja o padrão que o WP estabeleceu.

get_header()

O <?php get_header(); ?>inclui em seu template o arquivo header.php, que é onde vai o cabeçalho do seu site. É lá onde vai o começo da estrutura básica do HTML – Doctype, html, head, title, metatags e body.

get_sidebar()

O <?php get_sidebar(); ?> é a função que incluirá em seu template a sua coluna lateral. Menu lateral, banners, informações e tudo o que normalmente vai em um sidebar.

get_footer()

O <?php get_footer(); ?> inclui em seu template o arquivo footer.php. É lá onde você normalmente termina seu . É neste arquivo que você terá o código do rodapé e de elementos que sempre seguirão o final da página.

Se o WordPress não encontrar, por exemplo o arquivo footer.php, ele irá incluir o arquivo relacionado do theme default: wp-content/themes/default/footer.php. O mesmo acontece para o sidebar.php, o header.php e o comments_template().

Incluindo qualquer arquivo

Claro que você vai querer incluir outros arquivos. Por exemplo, caso seu site tiver duas colunas, ou o seu cabeçalho for muito grande e você quiser inserir os elementos em arquivos separados. Nestes casos você pode utilizar esse código:

1
&lt;?php include (TEMPLATEPATH . '/header2.php'); ?&gt;

O WordPress vai inserir o arquivo pedido como um include PHP normal.

Quer saber mais sobre WordPress? Fique antenado aqui!

Posts Relacionados

]]> http://tableless.com.br/wordpress-include-tags/feed/ 17 WordPress – Uma pequena introdução http://tableless.com.br/wordpress-uma-pequena-introducao/ http://tableless.com.br/wordpress-uma-pequena-introducao/#comments Sun, 10 Feb 2008 02:00:07 +0000 Diego Eis http://tableless.com.br/wordpress-uma-pequena-introducao O WordPress não foi feito para ser um CMS. Ele foi criado primeiramente para suprir necessidades de criação de blogs. Por acaso, talvez como se fosse um acidente, começamos a utilizá-lo para criar websites, desde os mais simples até os mais complicados. O pessoal do WordPress curtiu a ideia e agora está melhorando cada vez mais o sistema para que ele se torne um CMS de verdade, mesmo assim mantendo toda a simplicidade do WordPress original. E o melhor, é tudo de graça.

Quero mostrar aqui o caminho das pedras. O que você precisa aprender para não ficar batendo cabeça no começo. É coisa simples.

Criando o index.php e o style.css

Para fazer um tema de WordPress, você precisa apenas de dois arquivos: index.php e o style.css.

O style.css tem uma pequena sintaxe no começo do arquivo com informações do autor do Template. Essas informações serão utilizadas pelo WordPress na tela de Templates.

A sintaxe que está escrita no meu style.css é este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Você pode utilizar esse código e modificar para ficar com suas informações. Não precisa decorar, isso é coisa de maluco. ;-)

Crie um <strong>style.css</strong> com este código dentro. Não iremos utilizar o CSS neste artigo.

Crie também um <strong>index.php</strong> com a estrutura básica de HTML. Eu utilizo sempre assim:

[cc lang="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

Daqui para frente, irei colocar apenas o código que irá dentro do BODY do documento. Portanto, tudo que iremos ver agora, insira dentro do BODY do seu documento.

As Template Tags

O segredo do WordPress são as Template Tags. Você pode conferir todas aqui: http://codex.wordpress.org/Template_Tags

Os templates do wordpress são escritos em PHP. Isso torna pro designer um pouco complicado, mas não muito. Se você souber um pouco de PHP, fazer um template é muito fácil, porque PHP é uma linguagem que todo mundo usa. Para facilitar, o WordPress chama as funções do PHP que são utilizadas pelo seu sistema de Template Tags. As Template Tags não passam de funções PHP que recuperam do banco, informações que você precisará para compor o conteúdo do site. Para o programador isso não muda nada. Mas para o pessoal que não é tão íntimo assim com a linguagem PHP, a forma que usamos essas “funções” (Template Tags) facilita demais.

O Loop – Listando os posts na página

O Loop é o responsável pelo trecho de código que será repetido para cada post impresso na tela.

1
2
3
<?php while ( have_posts() ) : the_post (); ?>

<?php endwhile; ?>

Pra você chamar os posts do blog é muito simples. Você começará utilizando duas Template Tags dentro deste código de Loop.

1
2
3
4
<?php while ( have_posts() ) : the_post (); ?>
<h2><? the_title(); ?></h2>
<? the_content(); ?>
<?php endwhile; ?>

A primeira Template Tag que coloquei foi a the_title(). Ela chama os títulos dos posts do site.
A segunda, the_content() chama o conteúdo dos posts. O Conteúdo vem escrito da forma que você criou no WordPress.

Apenas com esse código acima, você não faz um blog completo. Um blog tem outras características importantes. E são elas que iremos ver agora.

Características de um Blog

Há algumas características que compõem um blog. Essas características são encontradas geralmente em blogs, isso não quer dizer que em sites de notícias não podem contem essas características:

  • Comentários
  • Categorias
  • Data, autor
  • Feed
  • Arquivo (histórico)
  • Busca
  • Permalink

Não iremos mostrar em nosso código como se faz Comentários nem Categorias. O Artigo iria ficar muito mais complicado. Portanto, se estiver interessado, faça a Oficina de WordPress da Visie.

Vamos agora melhorar um bocado esse código para que o site se pareça mais com um blog.

Primeiro, vamos colocar Permalinks nos títulos dos posts.

1
2
3
4
5
6
<?php while ( have_posts() ) : the_post (); ?>

<h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2>
<? the_content(); ?>

<?php endwhile; ?>

Autor e Data

A Template Tag que iremos utilizar é a the_author_posts_link() para Autor, que colocará a o nome do Autor com o link para seus posts. E a the_time() para colocar a data.

1
2
3
4
5
6
7
8
<?php while ( have_posts() ) : the_post (); ?>

<p>por <? the_author_posts_link(); ?> em <? the_time(); ?></p>

<h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2>
<? the_content(); ?>

<?php endwhile; ?>

Você pode deixar a Template Tag the_time do jeito que você quiser. Ela usa aquela tabela de formatação padrão de data do PHP, você pode encontrar essa tabela aqui: http://php.net/date/
Iremos formatar nossa data aqui:

1
2
3
4
5
6
7
8
<?php while ( have_posts() ) : the_post (); ?>

<p>por <? the_author_posts_link(); ?> em <? the_time(d/m/Y); ?></p>

<h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2>
<? the_content(); ?>

<?php endwhile; ?>

BUSCA

Para colocar um formulário de busca é muito simples. O código do formulário será:

1
2
3
4
<form action="<? bloginfo('home'); ?>">
<input name="s" type="text" id="busca" value="<? =$_GET['s'] ?>" />
<input type="submit" value="Procurar" />
</form>

A Template Tag bloginfo() tráz do banco informações sobre o site. Neste caso, ele vai trazer a URL da home do site.
Os inputs do formulário de busca do WordPress já vem com nomes pré-definidos, o input de busca, por exemplo, chama-se s.

Nosso código está assim agora.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="<? bloginfo('home'); ?>">
<input name="s" type="text" id="busca" value="<? =$_GET['s'] ?>" />
<input type="submit" value="Procurar" />
</form>

<?php while ( have_posts() ) : the_post (); ?>

<p>por <? the_author_posts_link(); ?> em <? the_time(d/m/Y); ?></p>

<h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2>
<? the_content(); ?>

<?php endwhile; ?>

Arquivo e Histórico

Para criar os arquivos, ou histórico, iremos utilizar a Template Tag: wp_get_archives().

1
<? wp_get_archives(); ?>

Por padrão, essa Template Tag irá gerar uma lista de links dos meses que há posts. Preste bem atenção no código HTML que ele retorna. Ele cria uma lista de LI sem UL ou OL envolta.

Por tanto, temos que escrever dessa forma:

1
2
3
<ul>
<? wp_get_archives(); ?>
</ul>

Ele faz deste modo caso você queira colocar uma CLASS ou ID para nomear a lista.

Linkando o FEED o arquivo CSS

O WordPress já cria os Feeds automaticamente. O trabalho que temos é colocar um link para o que o visitante consiga copiar o endereço do RSS e cadastrar no leitor de Feeds preferido dele. Podemos oferecer em RSS, RSS 2 ou ATOM. Existem pessoas que oferecem os três formatos. Vamos oferecer apenas um formato: o RSS2.

A tag link tem um atributo ‘rel’. O atributo rel é mandatório, ele vai dizer qual será o resto da tag. Se você por exemplo colocar o valor rel=”stylesheet”, você está dizendo ao navegador que essa tag link é relativo a uma folha de estilo.

O valor ‘alternate’ diz ao navegador que estamos diponibilizando o conteúdo de nosso site em um meio alternativo:

1
2
<link rel="alternate" ...
<link rel="stylesheet" ...

A tag type serve para indicar o tipo de arquivo que será carregada. No caso da folha de estillo, existem dois tipos que são utilizados hoje: o XSLT, que é utilizado para formatar código XML. E o tipo CSS, que é para formatar código HTML.

1
2
<link rel="alternate" type="application/rss+xml" href="<? bloginfo('rss_url'); ?>" />
<link rel="stylesheet" type="text/css" href="<? bloginfo('stylesheet_url'); ?>" />

Novamente iremos utilizar a tag boginfo(). Agora ela irá buscar o endereço do RSS e do CSS.

Perceba que utilizamos neste exemplo apenas um arquivo, o index.php para listar o conteúdo. O WordPress tem uma maneira eficaz de hierarquia de arquivos. Por exemplo: nós precisamos de um arquivo chamado archives.php para criar a lista de histórico. Na falta deste arquivo, o WordPress utiliza o index.php para criar a lista. Se tivéssemos feito o archives.php e colocado o código que utlizamos acima que cria a lista de histórico, o WordPress não utilizará o index.php.

Posts Relacionados

]]> http://tableless.com.br/wordpress-uma-pequena-introducao/feed/ 35