we are developers

iMaster Developers

iMaster DevelopersPowered by:

Back-End

25 set, 2012

Criando temas WordPress usando jQuery Mobile

Fawad Hassan

Tem 1 artigos publicados com 100 visualizações desde 2011

Fawad Hassan
Publicidade

Objetivos da aprendizagem

  1. Introdução ao jQuery Mobile.
  2. Como usar os componentes do jQuery Mobile.
  3. Básico do desenvolvimento do tema WordPress.
  4. Como criar o tema WordPress para celular usando o jQuery Mobile.

Tente acessar meu website usando um dispositivo móvel para ter um preview do tema mobile que iremos desenvolver neste artigo ou faça o download dos arquivos do tema e os execute em uma máquina local.

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”.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<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><!-- /page -->

</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 Heading</h1> 
    </div>

    <div data-role="content">page content goes here...</div>

    <div data-role="footer">
	<h1>Page Footer</h1>
    </div>
</div><!-- /page -->

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 1</h2>
	Collapsible content goes here...
    </div>

    <div data-role="collapsible" data-collapsed="true">
	<h2>Title 2</h2>
	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:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<!--add jQuery core file-->
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/js/jquery-1.4.4.js"></script>
<!--add jQuery Mobile-->
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/js/jquery.mobile.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" data-role="page">
    <div id="header" data-role="header">
	<h1>iFadey Blog</h1>
        <div id="navbar" data-role="navbar">
            <?php wp_nav_menu( array( 'container' => '' ) ); ?>
        </div><!-- end navbar -->
    </div><!-- end header -->

    <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><!-- end content -->

<div id="footer" data-role="footer"> 
    <h4>Copyright 2009 - 2011. All Rights Reserved</h4>
</div><!-- end footer -->
</div><!-- end wrapper -->
</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.

<?php get_header(); ?>

<?php
/* 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' );
?>

<?php 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.

<?php if ( ! have_posts() ) : ?>
    <div id="post-0" class="post error404 not-found">
	<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
	<div class="entry-content">
		<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
		<?php get_search_form(); ?>
	</div><!-- .entry-content -->
    </div><!-- #post-0 -->
<?php endif; ?>

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">
<?php while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-role="collapsible" data-collapsed="true">
	<h2 class="entry-title"><?php the_title(); ?></h2>
    </div>
<?php endwhile; ?>
</div><!--end data-role="collapsible-set"-->

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"><?php the_title(); ?></h2>

<div class="entry-meta">
    <?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->

O elemento div com a classe  entry-meta contém os dados do post (nome do autor e data de publicação) deste artigo.
twentyten_posted_on() é uma função customizada dentro do functions.php que imprime os dados do post.

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
    <div class="entry-summary">
	    <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
<?php else : ?>
    <div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
<?php endif; ?>

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 <!??more??> 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">
    <?php if ( count( get_the_category() ) ) : ?>
	    <span class="cat-links">
		    <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
	    </span>
	    <span class="meta-sep">|</span>
    <?php endif; ?>
</div><!-- .entry-utility -->

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.

<?php endif; ?>

<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></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><!--end data-role="collapsible-set"-->

<?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <div id="nav-above" class="navigation">
	<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
	<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
    </div><!-- #nav-above -->
<?php endif; ?>

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).

***

Texto original disponível em  http://www.ifadey.com/2011/01/wordpress-theme-using-jquery-mobile/

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Fawad Hassan
Saiba mais

Fawad Hassan

edit1 Artigo(s)

É um desenvolvedor web do Paquistão com grande interesse em JavaScript, HTML e CSS. Ele é autor do blog iFadey, voltado para desenvolvimento web.