fundamentos dO WORDPRESS
desconstruindo para conhecer
http://slides.com/marlonlamancio/fundamentos-wp
Quem?
Marlon lacerda amâncio
Bibliotecário por formação e Web Designer por emoção.
Desenvolvo websites e aplicativos com WordPress desde 2010.
marlon@naveguefeliz.com.br
Agradecimento
Dedico essa apresentação a toda comunidade WordPress e à comunidade open-source.
ninja fail!
ao final dessa apresentação você
- Terá uma visão mais ampla do que é possível criar com o WP
- Irá entender quais são os principais componentes e estruturas que formam o WP
- Irá entender como funciona o ciclo de requisição/resposta do WP
- Conhecerá os recursos nativos que o WP oferece
- Será capaz de adaptar o seu problema dentro da lógica do WP
- Terá insumo para continuar aprendendo e debugar
nosso plano
Iremos desconstruir o WordPress decompondo-o em partes para entendermos como foi construído, analisando seus principais componentes e conceitos fundamentais.
o início
O QUE É O WORDPRESS?
O WordPress é um aplicativo web.
Aplicativo é um programa de computador que tem por objetivo ajudar o usuário a desempenhar uma tarefa específica.
Aplicativo web é um aplicativo que roda no ambiente web (servidor ou navegador) e pode ser visualizado no navegador.
Quais são as tarefas que o WordPress nos ajuda a executar?
segundo os próprios usuários
Matt Mullenweg, "State of the Word", 2013
código base inicial
Matt Mullenweg, "State of the Word", 2013
código base atual
wordpress como plataforma
Matt Mullenweg, "State of the Word", 2013
WORDPRESS É UM APLICATIVO QUE PODEMOS USÁ-LO OU EXTENDÊ-LO PARA CRIAR outros aplicativos PARA WEB
por ser um aplicativo em si, já possui estrutura, recursos e funcionalidades pré-definidas.
o desenvolvimento do wp é um processo criativo que um envolve decisões de design dirigidas pela comunidade buscando satisfazer requerimentos e limitações.
arquitetura
uma visão a longa distância
Pontos de vista
e
perspectivas
como funciona a web
website estático
Recursos
- Páginas HTML
- Imagens
- outros arquivos
- Gateways pagamento
Cliente
Servidor
Lição rápida
website dinâmico
URL aponta para o caminho do recurso no sistema de arquivos dentro do servidor.
A URL contém Query Strings que são pares de propriedade=valor que fornecem parâmetros para o servidor.
http://website.com/paginas/sobre
http://website.com/index.php?category=3&paged=4
Internet
Linguagem utilizadas
HTML - Linguagem de marcação que define a estrutura, semântica e conteúdo dos documentos web.
CSS - Linguagem de estilo. Define o layout e exibição dos elementos HTML do documento.
JAVASCRIPT - Linguagem de programação utilizada principalmente nos navegadores que permite inserir funcionalidade, programar comportamento e interação dos elementos da página.
PHP - (acrônimo Hypertext Preprocessor) é uma linguagem de script de uso geral, muito utilizada e especialmente projetada para o desenvolvimento de aplicações web embutível com HTML.
SQL - é uma linguagem projetada para o manipulação dos dados mantidos em um sistema de gerenciamento de banco de dados relacional.
Lição rápida
Visão geral e arquitetura do wp
WordPress core
e plugins
Banco de Dados
Tema (templates)
Camada de apresentação
HTML, CSS e JS
Camada da aplicação
PHP
Camada de persistência
MySQL
Arquitetura comum de Web Apps
Instalação WP no servidor
visão do ciclo de execução
Requisição de página
.htaccess redireciona
index.php
wp-blog-header.php
wp-load.php
wp-config.php
wp-settings.php
template-loader.php
Carrega o core, plugins e tema
Carrega o template do tema
parse_request()
Salva as variáveis (query)
e define as conditional tags.
http://website.com/nome-do-post
http://website.com/index.php?p=123
http://website.com/categoria/tuts
http://website.com/index.php?category=3
query_posts()
Banco de Dados
$wp_query
Template específico + LOOP
"Monta" a página e retorna para o usuário.
A cada nova requisição repete-se o cliclo.
Padrão de URL
Query String
category/(.+?)/?$
index.php?category_name=$matches[1]
Regras de Reescrita (Rewrite API)
Só para query padrão!!!
Objeto chave
2
3
1
design
uma visão aproximada
core da aplicação
plugin api
design dirigido a eventos
WordPress em execução
EVENTO
EVENTO
EVENTO
EVENTO
EVENTO
EVENTO
Gancho (hook)
Funções próprias
Funções próprias
Funções próprias
Funções próprias
Exemplos de eventos na execução do wp
Registra categorias e tags padrões.
Registra post e page padrões.
Plugin carregados.
Tema configurado (gancho importante).
Autenticou o usuário.
Iniciou os widgets.
Registrar sidebars.
Carregou scripts padrões.
Carregou estilos padrões.
Carregar scripts próprios e terceiros.
Interpretando a requisição do usuário.
Redirecionando para o template responsável.
Prestes a encerrar a execução do clico.
Ação (action)
Ações são pontos de acesso ativados em momentos específicos dentro do ciclo de execução do WP onde você pode inserir suas próprias funcionalidades (plugin ou tema) alterando o comportamento padrão do WP.
Filtro (filter)
Filtros são pontos de acesso no ciclo de execução do WP onde passam dados específicos permitindo modificá-los e então retornar o resultado do processamento antes de prosseguir demais ações com esses dados.
tipos de ganchos (hooks)
<?php apply_filters( $nome, $val1, $val2, $etc); ?>
<?php apply_filters_ref_array( $nome, $array ); ?>
<?php do_action( $nome, $val1, $val2, $etc ); ?>
<?php do_action_ref_array( $nome, $array ); ?>
Olhando direto no código fonte ou alguma referência ;)
Às vezes você pode atingir o mesmo objetivo com uma ação ou filtro.
Por exemplo, se você quer que seu plug-in altere o texto de um post, você pode adicionar uma função para a ação publish_post (o post será modificado ao ser salvo no banco de dados), ou uma função de filtro para the_content (o post é modificado quando ele é exibido na tela do navegador).
como saber qual e quando usar?
add_action ( 'hook_name', 'your_function_name', [priority], [accepted_args] );
Sintaxe do comando para criar ação
add_filter ( 'hook_name', 'your_filter', [priority], [accepted_args] );
Sintaxe do comando para criar filtro
exemplo de uso de uma ação
<?php function mla_exemplo_carrega_scripts() {
wp_enqueue_script(
'mla-script',
get_stylesheet_directory_uri() . '/js/exemplo.js',
array( 'jquery' ),
'1.0.0',
FALSE );
}
add_action( 'wp_enqueue_scripts', 'mla_exemplo_carrega_scripts' ); ?>
<?php do_action( 'wp_enqueue_scripts', $val1, $val2, $etc ); ?>
WP
Tema ou plugin
exemplo de uso de um filtro
<?php function mla_filtrar_conteudo( $content ) {
$palavras = array('palavra1','palavra2','...');
$content = str_ireplace( $palavras, '{censurado}', $content );
return $content;
}
add_filter( 'the_content', 'mla_filtrar_conteudo' ); ?>
WP
Tema ou plugin
<?php apply_filters( 'the_content', $content); ?>
wordpress api
application programming interface
- Dashboard Widgets API - auxilia criação de painéis no dashboard
-
Database API - inserções e consultas no banco de dados (BD)
- Options API - armazena e recupera opções do tema no BD
- Transients API - armazena dados no BD temporariamente
- Metadata API - armazena descrições dos conteúdos no BD
- HTTP API - auxilia fazer requisições HTTP de forma simples
- File Header API - funções para gerenciar arquivos do tema/plugin
- Filesystem API - permite ler e escrever arquivos dinamicamente no servidor
- Plugin API - permite extender as funcionalidades nativas do WP
- Quicktags API - permite adicionar botões predefinidos no editor textual
- Rewrite API - permite criar novas regras de reescrita das URLs
- Settings API - auxiliar criar páginas de configurações de temas e plugins
- Shortcode API - permite criar atalhos de funcionalidades para inserir nos posts
- Theme Modification API - auxilia gestão das modificações realizadas nos temas
- Theme Customization API - permite criar controles para customizar temas
- Widgets API - auxilia criar widgets para adicionar conteúdo e funcionalidade
temas
tocando a superfície
Temas WordPress são arquivos específicos que trabalham juntos para criar o design (e funcionalidade) de um app ou website.
O ideal é que essas funcionalidades sejam específicas ao tema e funcionalidades gerais sejam implementadas como plugins.
o que são?
Anatomia de um tema
Templates são arquivos PHP usados para gerar o conteúdo das páginas requisitadas pelo usuário.
index.php
Template principal para exibição do conteúdo.
syle.css
Controla a apresentação dos elementos HTML.
functions.php
Inserir funcionalidades específicas do tema.
page.php
Template para exibição de páginas.
single.php
Template para exibição de posts.
archive.php
Template para listagens de posts, termos etc.
Recomendado uma pasta com arquivos de tradução .pot.
Organizar os arquivos em pastas (img, js etc).
header.php, footer.php, sidebar.php
Hierarquia de template
HOME
front-page.php > home.php > page.php > index.php
PAGE
{custom-template}.php > page-{slug}.php > page-{id}.php > page.php > index.php
SINGLE
single-{post-type}.php > single.php > index.php
CATEGORIA
category-{slug}.php > category-{id}.php > category.php > archive.php > index.php
Como o WP define qual arquivo de template irá usar?
Interpretando a URL requisitada!
$wp_query (
is_home => 1,
is_page => ,
is_single => ,
is_category => ,
... )
estrutura de um template
header.php
Content (loop)
footer.php
header.php
header.php
footer.php
footer.php
Content (loop)
sidebar.php
Content (loop)
Form busca
sidebar.php
comments.php
loop
Loop é uma estrutura de repetição em PHP responsável por exibir o conteúdo resultante da busca (query) no banco de dados.
Header
Footer
Sidebar
exibindo conteúdo principal - loop
Início do loop
Tudo entre este ponto e o fim do loop será repetido até encerrar a lista de posts consultados no BD.
the_title()
Imprime o título do post que está sendo iterado.
the_excerpt()
Imprime o resumo do post que está sendo iterado.
the_content()
Imprime o conteúdo do post que está sendo iterado.
the_category()
Imprime a categoria do post que está sendo iterado.
the_author()
Imprime o autor do post que está sendo iterado.
Fim do loop
Retorna para o início do loop se houver mais posts ou encerra e continua execução do template.
Outras templates tags
Quaisquer outras templates tags deverão entrar no loop.
Continua execução do template
Sair
template tags
São funções PHP feitas para auxiliar a construção dos templates e exibição dinâmica de conteúdos.
Include Tags
- get_header()
- get_footer()
- get_sidebar()
- get_template_part()
- get_search_form()
- comments_template()
Template Tags
- the_title()
- the_content()
- the_author()
- the_category()
- tag_description()
- the_terms()
- comment_date()
- body_class()
- the_ID()
- wp_nav_menu()
Contitional Tags
- is_home()
- is_front_page()
- is_single(123)
- is_page(42)
- is_page_template('sobre.php')
- has_excerpt()
- is_active_sidebar()
- is_plugin_active(caminho)
outros recursos de tema
Sidebar são áreas destinas a exibir conteúdos além do conteúdo principal. Usualmente sidebars são criadas para exibir Widgets.
Widgets no WordPress são pequenos módulos que oferecem funcionalidades específicas e facilitam sua inserção nos temas através das sidebars.
Menus de navegação permitem a inserção e manutenção de menus de navegação customizados no tema.
Juntando as partes
<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_title();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>
camada de persistência e organização do conteúdo
options api, metadata api,
transients api
como o wp organiza o conteúdo?
- Post
- Page
- Custom Post Type
- Item de menu
- Attachment
- Revision
- Links
Post Types
- Tags
- Categorias
- Custom taxonomias
Taxonomias
- Post
- Custom Fields
- Comentários
- Usuários
Campos personalizados
Representa conteúdo
Descreve conteúdo (metadados)
estrutura do banco de dados
wp_posts
wp_postmeta
Armazena posts, páginas, anexos, revisões e itens de menus.
wp_comments
wp_commentmeta
wp_terms_relationships
wp_term_taxonomy
wp_terms
wp_links
wp_users
wp_user_meta
wp_options
Metadados (campos personalizados) de cada post. Metadata API.
Configurações e opções do site.
Options API e Transients API.
Usuários.
Metadados de cada usuário.
Metadados de comentários.
Comentários.
Links (blogroll).
Relações entre posts e taxonomias.
Os itens das categorias, tags e termos das taxonomias customizadas.
Categorias, tags e taxonomias customizadas.
Obrigado!
referências
- https://developer.wordpress.org/theme/getting-started/
- http://codex.wordpress.org/Stepping_Into_Templates
- http://codex.wordpress.org/Theme_Development
- http://codex.wordpress.org/Query_Overview
- http://premium.wpmudev.org/blog/wordpress-query-overview-how-a-page-request-is-translated-to-a-mysql-query/
- http://code.tutsplus.com/tutorials/using-wordpress-for-web-application-development-rethinking-architecture--wp-33880
- http://code.tutsplus.com/articles/using-wordpress-for-web-application-development-the-conceptual-model--wp-34095
- http://code.tutsplus.com/tutorials/using-wordpress-for-web-application-development-understanding-events-actions-and-filters--wp-34113
- http://www.wrox.com/WileyCDA/WroxTitle/Professional-WordPress-Plugin-Development.productCd-0470916222.html
- http://www.amazon.com/Professional-WordPress-Development-Brad-Williams/dp/111844227X
Fundamentos do WordPress
By Marlon Lacerda Amâncio
Fundamentos do WordPress
- 1,834