- Introdução ao jQuery Mobile.
- Como usar os componentes do jQuery Mobile.
- Básico do desenvolvimento do tema WordPress.
- Como criar o tema WordPress para celular usando o jQuery Mobile.
Source Files
Introduzindo o jQuery Mobile
jQuery Mobile é o framework web oficial do jQuery usado para desenvolver interfaces do usuário baseadas na web para dispositivos móveis. Ele está no seu estágio Alpha, e eu fiquei impressionado quando vi seus demos pela primeira vez, e com a menor quantidade de código necessária para escrever um aplicativo para mobile.É um framework de várias plataformas, escreve o aplicativo web uma vez e é executado em plataformas múltiplas, como iOS, Android, Windows Phone, Symbian, Blackberry, e muitos mais. Clique aqui para visualizar a lista completa dos browsers compatíveis em diferentes sistemas operacionais.
Usando o jQuery Mobile
Antes de integrar o jQuery Mobile com o WordPress, vamos dar uma olhada em como o jQuery Mobile funciona. O jQuery Mobile utiliza bastante os atributos de dados do HTML5. Vou explicar o uso desses componentes, que utilizarei no tema WordPress.Antes de explicar seus elementos de interface do usuário, inclua todos os arquivos necessários (css e js) como mostrado abaixo:
<link rel="stylesheet" href="css/jquery.mobile.css" /> <script type="text/javascript" src="js/jquery-1.4.4.js">script> <script type="text/javascript" src="js/jquery.mobile.js">script>Página
Todas as suas páginas html devem começar com um doctype HTML5 . Todos os componentes da páginas devem estar dentro de uma div contendo data-role=”page”, e os conteúdos da página devem estar dentro de uma div contendo data-role=”content”.
<html> <head> <title>Page Titletitle> <link rel="stylesheet" href="css/jquery.mobile.min.css" /> <script src="js/jquery-1.4.4.min.js">script> <script src="js/jquery.mobile.min.js">script> head> <body> <div data-role="page"> <div data-role="content">page content goes here...div> div> body> html>Leia mais sobre Componentes de Página.
Barras de ferramentas
Irei usar barras de ferramentas para o header e o footer no tema WordPress. Para usar a barra de ferramenta do header e do footer, tudo que você precisa é de duas divs: data-role=”header" e footer data-role=”page”.
<div data-role="page"> <div data-role="header"> <h1>Page Headingh1> div> <div data-role="content">page content goes here...div> <div data-role="footer"> <h1>Page Footerh1> div> div>Leia mais sobre Barras de Ferramentas.
Áreas expansíveis
Área expansiva é uma coleção de conteúdo no qual o usuário pode visualizar/esconder ao clicar em seu título. Este componente será usado para mostrar a lista dos posts do blog. Aqui está o markup para a área expansiva.
<div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="true"> <h2>Title 1h2> Collapsible content goes here... div> <div data-role="collapsible" data-collapsed="true"> <h2>Title 2h2> Collapsible content goes here... div> div>Leia mais sobre o componente Collapsible.
Espero que você tenha entendido quão fácil é usar os componentes do jQuery Mobile. Tudo que você precisa fazer é escrever o html no formato correto, e o resto é feito pelo Javascript e pelo CSS. É assim que ele vai ficar:
Preparando o WordPress para o jQuery Mobile
Eu geralmente começo meu projeto WordPress por modificar o tema padrão TwentyTen ou o tema Starker. Neste artigo, modificarei o tema TwentyTen.Header
Vamos primeiramente destrinchar o header.php, removendo os códigos desnecessários dele. Aqui está a versão enxugada:
<html php language_attributes(); ?>> <head> <meta charset="" /> <title>title> <link rel="stylesheet" href="" /> <script type="text/javascript" src="/js/jquery-1.4.4.js">script> <script type="text/javascript" src="/js/jquery.mobile.js">script> head> <body php body_class(); ?>> <div id="wrapper" data-role="page"> <div id="header" data-role="header"> <h1>iFadey Blogh1> <div id="navbar" data-role="navbar"> '' ) ); ?> div> div> <div id="content" data-role="content">Como você pode ver no código acima, a cada elemento div é dado um parâmetro data-role. A div é na verdade o componente da página. Da mesma maneira, a div header contém o título do header e o componente de navegação (data-role=”navbar”). O “navbar” na verdade contém os links do menu customizado criado pelo administrador do wp. O wp_nav_menu() é usado para mostrar o menu customizado.
Divs com conteúdos parecidos no header irão conter o conteúdo do blog, e esta div terminará em footer.php.
Footer
Da mesma maneira, modifique o footer como mostrado abaixo.
div> <div id="footer" data-role="footer"> <h4>Copyright 2009 - 2011. All Rights Reservedh4> div> div> body> html>O conteúdo da div termina aqui, e a barra de ferramentas do footer também está aqui com a tag de fechamento (componente da página).
Index
Agora modifique o arquivo index.php, que por padrão mostra os posts do blog como uma lista com paginação.
get_header(); ?>
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
get_footer(); ?>Como você pode ver, o index.php é muito simples. Ele está apenas chamando outras funções para imprimir o código html necessário. O get_header() e o get_footer() mostram o código inheader.php e footer.php. É parecido com o uso da função include do PHP.Loop
Toda lógica para mostrar os posts do blog irão no loop.php, e a função get_template_part() no index.php na verdade mostra o conteúdo do arquivo loop.php. Eu destrinchei o loop.php do tema TwentyTen para o uso no tema mobile.
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title">h1>
<div class="entry-content">
<p>p>
div>
div>
A primeira parte do loop.php mostra a página “Página não encontrada” e o formulário de busca. Ele na realidade checa a existência de posts usando a função have_posts(). O importante a notar aqui é a função _e(). Cada string que precisamos imprimir é passada para _e() ou __(). Por exemplo, _e( ‘Not Found’, ‘twentyten’ ). Isso é feito para tornar nosso tema multilingual._e() é usado para traduzir e ecoar a string. __() também a traduz e a retorna para que você possa armazená-la em uma variável.
O formulário de busca é mostrado usando a função get_search_form() e você visualiza o código para busca no wp-includes/general-template.php. Aqui está o código para formulário de busca no get_search_form().
$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" > <div><label class="screen-reader-text" for="s">' . __('Search for:') . 'label> <input type="text" value="' . get_search_query() . '" name="s" id="s" /> <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" /> div> form>';A segunda parte deste arquivo é o loop do WordPress para mostrar posts. Vamos dar uma olhada nele passo a passo.
<div data-role="collapsible-set"> <div id="post-" php post_class(); ?> data-role="collapsible" data-collapsed="true"> <h2 class="entry-title">h2> div> div>O código acima envolve o loop em uma div com parâmetro data-role identificando que é um item expansível. Assim, o conteúdo interno fica escondido por padrão e só é exibido se o usuário desejar.
O loop itera sobre cada post do blog e mostra a div com uma única id usando a função the_ID(). Da mesma maneira, a função post_class() aplica classes do CSS nesta div, o que é útil para modificar a aparência usando o CSS. Então vem o data-role, que é utilizado para torná-lo um elemento collapsible. Finalmente, o data-collapsed é configurado como true, para que ele não mostre seu conteúdo por padrão. O usuário terá que clicar no título para disponibilizar seu conteúdo.
Então temos a tag h2, que contém o pequeno texto do post. Esse h2 será o título do componente collapsible.
Agora adicione o código abaixo para o título do post como mostrado abaixo:
<h2 class="entry-title">h2> <div class="entry-meta"> div>O elemento div com a classe entry-meta contém os dados do post (nome do autor e data de publicação) deste post. twentyten_posted_on() é uma função customizada dentro do functions.php que imprime os dados do post.
<div class="entry-summary">
div>
<div class="entry-content">
→', 'twentyten' ) ); ?>
'' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
div>
O código acima primeiro checa para ver se o pedido atual é para o arquivo ou uma página de busca, que aparece depois que o usuário insere uma palavra-chave e clica no botão “procurar”. Se é arquivo ou busca, então ele mostra o excerpt (sumário do post) para cada post. Os excerpts são mostrados usando a função the_excerpt().A outra parte da condição if mostra os componentes completos de cada post. Essa parte é executada quando abrimos a home page do blog contendo uma lista de posts com paginação. Note que os conteúdos dos posts são mostrados usando a função the_content(). A função checa por tags para parar de mostrar o conteúdo naquele lugar, e mostra um link “Continue lendo →”.
A próxima linha na outra parte é uma chamada de função para wp_link_pages(). Essa função é usada para paginar um único post. Por exemplo, se o seu post é muito longo e você não quer que ele seja mostrado em uma única página. Você pode simplesmente escrever a quicktag <–nextpage–> onde você quiser que o conteúdo do post pare de ser mostrado, e mostrar os links da paginação.
<div class="entry-utility"> <span class="cat-links"> Posted in %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> span> <span class="meta-sep">|span> div>A próxima parte no loop.php é uma div com classe entry-utility. Essa div contém a condição if para checar se se existe alguma categoria atrelada ao post atual. A função get_the_category() retorna um array contendo as categorias, e count() é usado para contar o número total de elementos no array retornado da função get_the_category(). Se existir alguma categoria, ela simplesmente imprime as duas tags span. O primeiro span com a classe “cat-links” contém as categorias separadas por vírgula. O segundo span contém o separador |. Esse separador é adicionado a categorias separadas dos links de comentários, que iremos adicionar em seguida.
<span class="comments-link">span>Adicione a linha acima depois de endif. A função comments_popup_link() é usada para mostrar os links para os comentários. Se existe um único comentário, ou mais de um comentário, então ele mostra o link como “NUM Comments” (em que NUM é o total comentários); caso contrário, ele mostra um link “Deixe um comentário”.
A última coisa que irá dentro da div entry-utility é o link Edit, que será mostrado quando o administrador estiver logado. Esse link pega o usuário logado para editar a página do post no painel do administrador.
php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|span> <span class="edit-link">', 'span>' ); ?>Adicione a linha acima abaixo da chamada de função comments_popup_link().
Finalmente, adicione o fragmento de código a seguir abaixo da div final de data-role=”collapsible-set”.
div> max_num_pages > 1 ) : ?> <div id="nav-above" class="navigation"> <div class="nav-previous">← Older posts', 'twentyten' ) ); ?>div> <div class="nav-next">→', 'twentyten' ) ); ?>div> div>A última parte desse arquivo mostra os links para posts antigos/posts novos usando as funções next_posts_link e previous_posts_link. Isso é feito para permitir a paginação em posts do blog.
Um pouco de CSS
Adicione o CSS a seguir no style.css.@import url("css/jquery.mobile.css"); #nav-below, #nav-above, .entry-meta, .entry-utility, .page-link { background: #EFEFEF; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1) inset; font-size: .8em; padding: 4px; } .nav-previous { float: left; } .nav-next { float: right; } .page-link { font-size: 1.1em; text-align: center; margin: 6px 0; } .demo_source { font-size: 1.5em; text-align: center; } .demo_source a { text-shadow: 1px 1px 0 #fff; } .more-link { font-size: 1.4em; text-decoration: none; text-shadow: 0 0 6px rgba(0, 0, 0, .2); } .more-link:hover { text-shadow: none; } /*clearfix taken from Html5 Boilerplate http://html5boilerplate.com*/ .clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }Note que em vez de adicionar o arquivo CSS do jQuery Mobile no header.php, eu o importei no style.css. Como você pode ver nos estilos acima, .nav-previous e .nav-next estão flutuados da esquerda para a direita. Ambas as classes são aplicadas a links que são filhos do #nav-below e #nav-above. Devido aos filhos flutuantes do #nav-below e #nav-above., precisamos aplicar uma classe clearfix em ambas as barras nav. Lembre-se também de que essas barras nav contêm os links para os posts anterior/próximo relativos ao post que está atualmente aberto.
Primeiramente, abra o single.php e adicione a classe clearfix ao #nav-above. Mas remova o #nav-below do single.php porque estamos construindo este tema para dispositivos móveis, então precisamos reduzir o HTML e o CSS. Agora a div de abertura do #nav-above deve estar assim:
<div id="nav-above" class="navigation clearfix">O jQuery Mobile é uma nova biblioteca, e está no seu estágio Alpha. Por isso, você pode encontrar problemas em alguns dispositivos e a performance não será otimizada (especialmente quando você o usa online).
0
Postar um comentário