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

registered_taxonomy

registered_post_type

plugins_loaded

after_setup_theme

set_current_user

widgets_init

register_sidebar

wp_default_scripts

wp_default_styles

wp_enqueue_scripts

parse_request

template_redirect

shutdown

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

http://universowp.com.br/porque-usar-frameworks/

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

https://yoast.com/wordpress-theme-anatomy/

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
Made with Slides.com