logo curso

Wordpress

O Wordpress é um gestor de conteúdos (CMS, Content Management System) desenvolvido em PHP. É software livre publicado sob a licença GNU GPL.

Temas Wordpress

No âmbito do Wordpress, chama-se tema a todo o conjunto de definições que determina o aspecto de um website. Essas definições assumem essencialmente a forma de três tipos de ficheiros:

CSS
O código que trabalha o aspecto de cada página.
Templates PHP
O “esqueleto” de cada página apresentada. Um template é um pequeno programa executado no servidor que selecciona a informação a ser apresentada ao utilizador.
Javascript
Funções executadas no browser, normalmente em resposta a acções do utilizador.

Os temas estão alojados, a partir do directório onde o Wordpress reside, sob wp-content/themes, cada um num directório com o respectivo nome.

Construção de Temas

Há duas opções para construir um novo tema no Wordpress: começar do zero (folha branca) ou partir de uma tema já existente e alterá-lo (tema derivado).

Tema Derivado (Child Theme)

Esta opção usa-se quando se quer modificar um tema já existente, desde que o copyright de publicação do tema permita modificações. Não é boa ideia alterar directamente os ficheiros de um tema, porque se se der o caso de o autor original publicar uma nova versão, o mecanismo de actualizações automáticas do Wordpress irá sobrepor a nova versão à antiga. Logo, qualquer alteração feita nos ficheiros da anterior versão perder-se-á.

Assim, em vez de alterar o tema existente, cria-se um novo tema que inclui os ficheiros originais e acrescenta-lhes algo mais (novos CSS, novos templates, etc.).

Como criar um tema derivado?

1º: Criar o directório para o tema derivado, sob wp-content/themes.
É boa prática usar o mesmo nome do tema principal acrescido do sufixo “-child”. Assim, para derivar um tema chamado twentytwenty, devemos usar twentytwenty-child.
2º: Criar o ficheiro de estilos principal do novo tema.

Este ficheiro deve obrigatoriamente chamar-se style.css. Segue-se um exemplo:

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twenty-twenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentychild
*/
3º: criar o ficheiro functions.php.

Este ficheiro vai instruir o Wordpress para incluir no tema derivado as definições do tema original. O seu conteúdo deve ser (no mínimo):

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}
4º: Activar o novo tema.
Ir à administração do Wordpress, em Appearance > Themes, e activar o novo tema.

Tema Novo (página em branco)

Os dois primeiros passos para criar um tema de raiz são idênticos aos da criação dum tema derivado: criar o directório do tema (sob wp-content/themes, agora com um nome único) e o ficheiro principal de CSS (style.css, desta vez sem as linhas que referem o tema a derivar). A seguir, há que criar os templates que sejam necessários.

Templates Wordpress

Cada template é um ficheiro PHP, um modelo de página (o esqueleto da informação). Na prática, cada template gera o HTML que é enviado ao cliente (o browser) e formatado com CSS. Consoante o tipo de página que é pedida ao Wordpress, um dos seguintes templates é usado:

index.php
O template principal, que é usado sempre que nenhum mais específico for encontrado. Tem que existir.
comments.php
É usado para páginas de comentários (no caso de haver um blog, por exemplo, com posts e comentários).
front-page.php
Gera o conteúdo da primeira página.
home.php
Gera o conteúdo da página Home, que é a primeira página por omissão. Contudo, se se usar uma página estática para primeira página, este template gera a página dos últimos posts (o blog).
single.php
Template da página de um único post.
page.php
Gera o conteúdo de uma página estática.
category.php
Template da página de uma categoria.
tag.php
Gera a página de uma tag.
author.php
Gera a página relativa a um autor.
date.php
Gera a página de uma data/hora.
archive.php
Gera a página de uma categoria, um autor ou uma data/hora, caso os respectivos e mais específicos templates não existam.
search.php
Template da página de busca. Apresenta os resultados de uma busca.
attachment.php
Gera a página de um conteúdo anexo (attachment).
image.php
Cria a página de visualização duma única imagem anexa. Se não existir, attachment.php é usado.
404.php
Modelo da página “404 - Not Found”, usado quando o pedido não corresponde a nenhum conteúdo existente.

(Nota: Esta lista é não-exaustiva. Há mais templates possíveis, mas só são usados em casos muito específicos.)

Cabeçalhos e Rodapés

É frequente um template começar por carregar o cabeçalho das páginas e acabar por carregar o rodapé. Para esse efeito há duas funções específicas: get_header() e get_footer(). Estas funções carregam, respectivamente, o conteúdo gerado pelos templates header.php e footer.php. Se se desejar carregar um cabeçalho específico para uma página (header-xpto.php, por ex.), estas funções aceitam um parâmetro, do tipo string, que funciona como sufixo do nome do ficheiro (neste exemplo, a chamada à função seria get_header('xpto')).

O Ciclo do Wordpress (Loop)

O Ciclo do Wordpress é um código usado para carregar um conteúdo da base de dados e apresentá-lo. Esse conteúdo pode ser o texto de uma página estática, um comentário, um (ou mais) posts do blog, etc. — o termo post usa-se aqui no sentido lato para significar conteúdo que foi armazenado na base de dados que o Wordpress usa.

Qualquer PHP ou HTML dentro do Ciclo será executado/apresentado uma vez para cada post. Algumas funções podem ser usadas dentro do Ciclo e o seu valor de retorno depende do post a ser processado. Por exemplo:

the_title()
Retorna o título do post.
the_time()
Retorna a data e hora de publicação do post.
the_category()
Retorna a categoria do post.
the_author()
Retorna o autor do post.
the_ID()
Retorna o ID numérico do post.
the_content()
Retorna o conteúdo do post.

A função the_post(), que só faz sentido dentro do Ciclo, prepara um post para ser consultado pelas demais funções desta lista. Assim, o Ciclo pode ser algo tão simples como:

<?php
while (have_posts()) {
	the_post();
	the_content();
}
?>

Este código verifica se há posts (conteúdo) para a página pedida; se existirem, começa um ciclo em que, para cada post, prepara-o e apresenta o seu conteúdo.

Um exemplo mais completo, que carrega cabeçalho, rodapé e barra lateral (se existirem) para além dos conteúdos do Ciclo:

<!DOCTYPE html>

(…)

<body>
	<header>
		<?php get_header(); ?>
	</header>

	<main>
		<?php
		if (have_posts()) {
			while (have_posts()) {
				the_post();
				?>
				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h2>
				<div class="conteudo"><?php the_content(); ?></div>
				<?php
				echo sprintf('<div class="autoria">Autor: %s, Data: %s</div>', get_the_author(), get_the_date('Y-m-d'));
			}
		} else _e('Não há conteúdo para a página pedida.');
		?>
	</main>
	
	<footer>
		<?php get_footer(); ?>
	</footer>
<body>
<html>

As funções get_the_author() e get_the_date() são idênticas às funções the_author() e the_date(), mas retornam valores para o programa ao invés de fazerem o output imediato para a página.