Como exibir um arquivo PDF em sua postagem WordPress
Esta será a postagem mais inusitada de todos os tempos.
Ao criar uma postagem para o site sobre o livro Tudo o que você precisa saber sobre o Twitter, resolvi criar uma versão do livro em .swf para que todos pudessem ler o livro diretamente aqui do site. Entretanto, ao digitar a tag <embed> e seus parâmetros na postagem, digitei o caminho do arquivo .pdf sem perceber.
Para a minha surpresa, ao visualizar a postagem, fui surpreendido com o arquivo .pdf sendo exibido perfeitamente na página.
Como descobertas boas devem ser sempre compartilhadas, fica aqui a dica de Como exibir um arquivo PDF em sua postagem WordPress
1 - Usando um cliente FTP, faça o upload do arquivo PDF para seu servidor. (O envio de arquivos do WordPress permite apenas 2MB de tamanho máximo de arquivo)
2 - Faça o Login em seu site WordPress e crie uma nova postagem, ou selecione a postagem no qual deseja inserir o pdf
3 - Selecione a edição HTML de seu editor e adicione o seguinte parâmetro para adicionar o arquivo PDF
<embed src="http://www.seusite.com.br/arquivo.pdf" width="X" height="Y">
Onde:
- src deve receber o caminho do arquivo.pdf
- X = Largura
- Y = Altura
Com isso você poderá exibir seus arquivos .pdf para seus usuários ao invés de apenas os disponibilizar para download, caso julgue necessário e interessante
WordPress + JQuery – Lista de categorias com Menu Accordion
Trago uma dica bacana, irei mostrar como fazer um Menu Accordion simples com Jquery incorporado com a Template Tag wp_list_categories, vamos lá então.
Passo 1: Baixe o Jquery, caso não o tenha ainda.
Passo 2: Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema. Apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.
Passo 3: Abra o arquivo header.php e insira as seguintes linha dentro do <head></head>:
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/menuaccordion.js"></script>
Passo 4: Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:
$(document).ready(function(){$('#accordion-container > li > a').bind('click',function(){var $next = $(this).next();if ($next.is(':visible')) return false;$(this).parent().parent().find('li > ul:visible').slideUp('normal');$next.slideDown('normal'); return false;});});
Não esqueça de salvá-lo.
Passo 5: Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:
#menu-accordion ul{margin:0;padding:0;list-style:none;}#menu-accordion ul#accordion-container{width:200px;padding:2px;}#menu-accordion ul#accordion-container > li{margin-top:1px;background:#000;}#menu-accordion ul#accordion-container > li > a{display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}#menu-accordion ul#accordion-container > li > a:hover{background: #666;}ul.accordion-menu{display:none;background:#000;}#menu-accordion ul.accordion-menu a{display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}#menu-accordion ul.accordion-menu a:hover{color:#fff;}
Não esqueça de salvá-lo.
Passo 6: Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)
<div id="menu-accordion">/* div pai que engloba todo o menu*/<ul id="accordion-container">/* essa parte é muito importante, essa "ul" engloba toda a formação do accordion*/<li><a href="#">Opção 1</a>/* Link que expandirá quando clicado para abrir as sub-opções, que serão as categorias que você definir*/<ul class="accordion-menu">/*class responsável por englobar cada Opção do Menu*/<?php wp_list_categories('title_li=&include=48,50'); ?>/* ID das categorias que serão apresentadas. Nessa opção, os números 48, 50 são os ID desse exemplo, o parâmetro "title_li=" está vazia para que não apareça a palavra Categoria acimas das opções*/</ul></li><li><a href="#">Opção 2</a><ul class="accordion-menu"><?php wp_list_categories('title_li=&include=49,42'); ?></ul></li></ul></div>
E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site.
Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.
Inté++ fui
Como utilizar os Campos Personalizados em seu tema
Provavelmente você já viu no Adicionar novo post ou página o formulário Campos personalizados. Com os campos personálizados você pode adicionar qualquer campo e posteriormente inserir em seu tema.
Para inserir em seu temas algum campo, utilize a seguinte tag:
<?php $values = get_post_custom_values(”campo“); echo $values[0]; ?>
Altere campo pelo nome que você escolheu para o campo personalizado.
Para quem quer utilizar miniaturas, uma maneira é inserir o seguinte código:
<a href=“<?php the_permalink() ?>” title=“<?php the_title(); ?>”><img src=”<?php $values = get_post_custom_values(“thumb“); echo $values[0]; ?>” alt=“<?php the_title(); ?>” width=”150px” height=”150px” /></a>
Agora é só inserir um campo personalido com o nome thumb e o valor o url da imagem.
Caso queira saber mais, acesse a página do Codex.
Veja como era o seu blog com o WayBack Machine
Quer lembrar como era o seu blog ou algum site? O WayBack Machine arquiva várias páginas por data de vários sites. Algumas imagens não funcionam pelo fato do site não conseguir arquivar tudo, mas já é possível ter uma idéia de como o site era.
Os 10 melhores plugins para seu blog
Selecionei os 10 melhores plugins, na minha opnião, que podem ajudar você a dar uma cara diferente para o seu blog:
- Akismet – Já vem com o WordPress, ele bloqueia os spans dos comentários.
- Yet Another Related Posts Plugin – Exibe uma lista de posts relacionados baseado em palavras chaves. Instalando esse plugin você consegue aumentar o tempo de visita em seu blog e o número de páginas visualizadas.
- Admin Drop Down Menu – Modifica o menu da administração do WordPress, tornando seu painel muito mais bonito além de você pode acessar em um clique.
- Auto Translator – Insere no menu lateral várias bandeiras referente a cada lingua, traduzindo seu blog quando clicada.
- Register Plus – Acrescenta campos personalizados no formulário de cadastro de usuários.
- WordPress Download Monitor – Cria uma administração de downloads.
- All in One SEO Pack – Ótimo plugin para melhorar o seu pagerank e sua posição nos buscadores. Ele aplica ferramentas de SEO no seu blog.
- Subscribe To Comments – Permite que o leitor receba e-mails alertando de novos comentários em um post. Assim ele pode retornar novamente ao seu blog.
- Twitter Tools – Esse plugin publica automaticamente em seu blog as últimas atualizações feitas no perfil do Twitter e, também, envia para o Twitter os posts publicados no seu blog. Nele você pode também criar um widget com suas últimas atualizações no Twitter.
- PDF24 Article To PDF – Este plugin permite que seus leitores para converter um ou mais artigos em um arquivo pdf. O visitante digita seu endereço de e-mail e recebe em seu e-mail um e-mail com um arquivo em PDF anexado.
A melhor forma de incluir o script JQuery no WordPress
Vocês já repararam que o dashboard do WordPress usa JQuery ? Não ? Pois é, eu já havia reparado isso.. e já que o JQuery há é nativo do WordPress, não temos a necessidade de baixá-lo para uso de suas outras funcionalidades.
Mediante isso, você deve estar se perguntando como se aproveitar disto e chamar em seu tema o JQuery já existenet em seu servidor.
É bem simples: Abra o arquivo header.php e coloque esta tag entre as tags <head> e </head>
<?php wp_enqueue_script(“jquery”); ?>
Aprendeu ? Molezinha né.. menos um javascript para carregar, o que pode acelerar o tempo de carregamento de sua página :)
Abraços !
Como exibir seu número total de seguidores no Twitter e Feedburner
Recebi alguns emails nesta semana perguntando como exibir no blog o número de seguidores que o usuário X tem no Twitter.
Alguns sites disponibilizam scripts para fazer tal exibição da contagem, porém em sua grande maioria não disponibilizam formas de se trabalhar este resultado.
Pesquisando sobre como buscar tal resultado com maior liberdade de customização, chegamos ao código disponibilizado logo abaixo e, de quebra, mostraremos também como exibir o número de assinantes de seu FeedBurner.
Exibir número total de seguidores do Twitter
Cole o código abaixo no arquivo functions.php de seu tema
function string_getInsertedString($long_string,$short_string,$is_html=false) { if($short_string>=strlen($long_string))return false; $insertion_length=strlen($long_string)-strlen($short_string); for($i=0;$i<strlen($short_string);++$i){ if($long_string[$i]!=$short_string[$i])break; } $inserted_string=substr($long_string,$i,$insertion_length); if($is_html && $inserted_string[$insertion_length-1]=='<'){ $inserted_string='<'.substr($inserted_string,0,$insertion_length-1); } return $inserted_string; } function DOMElement_getOuterHTML($document,$element){ $html=$document->saveHTML(); $element->parentNode->removeChild($element); $html2=$document->saveHTML(); return string_getInsertedString($html,$html2,true); } function getFollowers($username){ $x = file_get_contents("http://twitter.com/".$username); $doc = new DomDocument; @$doc->loadHTML($x); $ele = $doc->getElementById('follower_count'); $innerHTML=preg_replace('/^<[^>]*>(.*)<[^>]*>$/', "\\1",DOMElement_getOuterHTML($doc,$ele)); return $innerHTML; }
E para exibir o resultado em sua página, utilize o comando abaixo
<?php echo getFollowers("GugaAlves")." seguidores"; ?>
Substituindo meu nome de usuário (GugaAlves) pelo seu, e você terá como resultado: “XXX seguidores”
Assim, você poderá trabalhar alguma div, ul, etc da forma que desejar.
Exibir número total de assinantes do FeedBurner
Apenas cole o código abaixo no local que desejar:
<?php $fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=YourURL"; $ch = curl_init(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_URL, $fburl); $stored = curl_exec($ch); curl_close($ch); $grid = new SimpleXMLElement($stored); $rsscount = $grid->feed->entry['circulation']; echo $rsscount; ?>
Como customizar a mensagem Leia Mais, exibida pela tag more
Como todos nós já sabemos, a tag <!–more–> funciona para quebrarmos a exibição de uma postagem na página inicial… tudo o que estiver acima dela será exibido, e em seu lugar teremos a exibição de uma mensagem padrão, como ‘Leia Mais’ , ‘Read More’, ‘Read This Article’, ou algo neste sentido.
Na minha humilde concepção, acredito que tal mensagem deveria ser personalizada conforme a necessidade, para funcionar realmente como uma chamada para o leitor, algo que desperte seu interesse em continuar a ler a postagem..
Além disso, pensando em termos de SEO, ter uma página inicial com a mesma palavra repetida várias vezes faz com que esta palavra tenha uma importância maior do que as outras (Curioso sobre o funcionamento disso ? Leia nosso artigo sobre Keyword Density – Densidade de palavras chave), e não queremos que termos totalmente não relacionados com o conteúdo de nosso site sejam ligados a ele.. afinal, acho que ninguém busca ‘Leia Mais’ nos buscadores, tal termo não possui volume de buscas nem relevância.
Para solucionar tal problema, podemos customizar o texto da seguinte forma:
Normalmente usamos a tag desta forma: <!–more–>
Para customizar o texto, devemos apenas adicionar o texto escolhido dentro da tag more, desta forma: <!–more Coloque Seu Texto Aqui! –>
Muito simples !
Maiores informações pode ser encontradas neste link: http://codex.wordpress.org/Customizing_the_Read_More#Having_a_custom_text_for_each_post
Obrigado pelo comentário do colega Eduardo Zulian, que nos deu uma forma mais simples do que a descrita anteriormente por aqui. A postagem anterior foi substituida por esta. Obrigado novamente !
Quanto tempo devo esperar para atualizar meu WordPress para o 2.8 ?
Com o recente lançamento do WordPress 2.8, notei vários relatos de complicações na atualização e erros acontecidos.. nós mesmos do TudoParaWordPress sofremos um pouco com isso. Como tentamos sempre trazer as novidades para vocês, optamos por realizar a atualização, mesmo sabendo dos problemas que poderiam ocorrer. Tais erros tem gerado alguma repercussão na comunidade de usuários do WordPress, principalmente fora do Brasil, como pude acompanhar..
A grande pergunta feita por grande parte dos webmasters vai de encontro ao título desta matéria: Afinal, quanto tempo devo esperar para atualizar meu WordPress para a versão 2.8 ?
Verificando o histórico de atualizações do WordPress, a equipe de desenvolvimento normalmente faz um grande trabalho e testes em suas modificações, o que certamente é um dos pontos fortes deste sistema. Com a recente adição do ‘one-click updater’ (atualização com um clique) sendo parte nativa do sistema e aquele aviso bem pentelinho lembrando que devemos fazer a atualização, muitos dos usuários atualizaram seus blogs e sites imediatamente após o lançamento da versão 2.8 .
Infelizmente, cada atualização do WordPress pode vir a criar imcompatibilidades com plugins, com os temas que você esteja usando, e traz algumas alterações no código e novas funções. Se você atualizar seu WordPress antes de atualizar seus plugins e temas, bem, você pode vir sim a ter problemas. A equipe do site Ithemes postou uma interessante matéria em seu blog, entitulada ‘Quando devo atualizar meu WordPress?’. Tal matéria incluiu 5 passos importantes que devem ser feitos ANTES de você optar pelo ‘one-click updater’:
1. Faça um backup de todo seu site (recomendo o backup de todo seu Banco de Dados);
2. Atualize todos os plugin possíveis;
3. Visite o site do autor dos plugin e temas usados;
4. Antes de clicar na ‘atualização com um clique’, desabilite todos os plugins;
5. Pergunte a você mesmo se realmetne é necessário atualizar agora.
Caso não seja totalmente necessária a atualização, espere algumas semanas e fique de olho no feedback que os usuários estão dando sobre a atualização.
Muita gente ainda não atualizou seu WordPress para a versão 2.8 ainda.. e você, quando pretende atualizar seu WordPress ? Deixe sua resposta aqui nos comentários, dizendo também qual versão do WordPress estás usando..
Abraços !
Como mostrar o perfil do autor no post e configurar o arquivo author.php
Neste post irei mostrar como exibir informações do autor do post, como mostra a imagem abaixo e como configurar o arquivo author.php que exibe as informações dos autores do blog/site .
Parte I – Arquivo single.php
Primeiro, vamos criar a área na parte inferior de cada post. Estou alterando o tema default, mas sinta-se livre para usá-lo em seus próprios temas. Abra o single.php e encontre a função the_content() e insira:
<div> <?php echo get_avatar (get_the_author_id() , 80 ); ?>
Na segunda linha, temos obtido o Gravatar do autor usando seu ID. E depois definindo a dimensão 80 × 80 pixel do Gravatar. Na sequência:
<h4> Autor: <a href = "<? php the_author_url ();?>"> <?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4> <? php the_author_description ();?>
Isto irá exibir o primeiro e último nome do autor, com um link para seu site. Abaixo disso é a sua mini-biografia. Todos estes detalhes estão sendo puxado pelo perfil do autor no Dashboard.
<p><a href="<?php bloginfo ( 'url');?>/?author=<?php the_author_ID ();?>"> Ver perfil</a></p> </div>
Isto faz o link para o página do autor (o que vamos criar em seguida).
Parte II – Arquivo author.php
Crie um arquivo chamado author.php na pasta do seu tema. WordPress irá automaticamente utilizar este arquivo para visualizar o perfil do autor. Sem esse arquivo, o WordPress iria usar o arquivo archive.php.
No início nós incluímos o layout básico para o cabeçalho do tema default. Isto provavelmente será diferente se você estiver usando um tema diferente.
<?php get_header(); ?> <div id="content"> Agora, incluir o seguinte: <?php if(get_query_var('author_name')): $curauth = get_userdatabylogin (get_query_var('author_name')); else: $curauth = get_userdata(get_query_var('author')); endif; ?>
Sobre a única página, fomos capazes de obter as informações diretamente do autor a partir do WordPress loop. No entanto, uma vez que não está a obtenção de um determinado post ainda, funções do loop não vão funcionar. O código acima irá obter informações para nós e armazená-los em um array.
<div> <?php echo get_avatar( $curauth->ID , 80 ); ?>
Como você pode ver, na linha 2, incluímos o Gravatar novamente, mas desta vez estamos usando o nosso novo método para obter o ID do autor.
<h4><a href="<?php echo $curauth->user_url; ?>"> <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></a></h4>
O nome do autor e um link para seu site está incluído; novamente usando o novo método de recuperação.
<p><?php echo $curauth->description; ?></p> </div>
Finalmente, nós incluímos a mini-biografia do autor. Você pode incluir qualquer detalhe do autor aqui:
- $curauth->aim;
- $curauth->description;
- $curauth->display_name;
- $curauth->first_name;
- $curauth->ID;
- $curauth->jabber;
- $curauth->last_name;
- $curauth->nickname;
- $curauth->user_email;
- $curauth->user_login;
- $curauth->user_nicename;
- $curauth->user_registered;
- $curauth->user_url;
- $curauth->yim;
(Leia Mais: WordPress Codex)
Agora você pode inclui um WordPress Loop normal, exibindo o post como se você necessitar. Apenas as postagens do autor serão recuperadas. Exemplo:
<div> <h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4> <hr /> </div>
Parte III – Estilizando
Inclua o seguinte código na parte inferior do seu arquivo style.css, faça seus ajustes se necessários:
.postauthor {
background-color: #fafafa;
border: 1px solid #f3f3f3;
padding: 10px;
margin: 10px 0;
}
.postauthor h4 {
font-size: 1.2em;
margin: 0 0 10px 0;
}
.postauthor img {
float: left;
margin: 0 15px 8px 0;
}
Artigo Traduzido do site: http://blog.themeforest.net/wordpress/wordpress-author-details/ – com adaptações
