Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

pt-br:Personalizando "Leia Mais"


cb-help.png
Artigo parcialmente traduzido ou que precisa de tradução
Este documento está parcialmente traduzido ou precisa ser traduzido. Toda a tradução é feita por voluntários e você pode ser um deles.
ParticiparArtigos para traduzirFórum de SuporteTodos os Artigos

Se você tiver definido seu site WordPress para exibir trechos de postagens na página inicial ou em Home, você vai querer que os visitantes cliquem sobre o título ou sobre um link para que eles continuem a ler seu post ou artigo, certo? WordPress torna esta técnica fácil e personalizável.

Nota: Você deve editar arquivos do tema para que as sugestões a seguir sejam percebidas. Use um editor de texto adequado.

Sobre o Resumo

Resumos são mostrados no WordPress de duas maneiras:

Mostrará o que foi introduzido na caixa Resumo na tela de edição da postagem, ou mostrará 55 palavras do início da postagem com [...] no final. Os usuários podem clicar no título para continuar lendo se você atraiu a atenção com a introdução da postagem.

  • Mantendo a tag de modelo the_content() e então inserir a quicktag moreno ponto onde quer que a introdução do post termine
Na tela de edição/criação de postagens e páginas, acima da área de edição do texto, há botões de formatação e também o botão more. Após um parágrafo ou dois, clique neste botão e o código
<!--more-->
será inserido no código do seu texto.

Este código delimita até onde a introdução será mostrada na página inicial do seu site, como no exemplo:

São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul.<!--more-->

Gera a saída:

O título da postagem: O Tucano
14/01/2011 - Categoria: Aves - 2 Comentários


São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. Leia mais...


O resto do post continua, mas quando vistos na página web tais como arquivos, categorias, aprimeira página e resultados de pesquisas o post é mostrado como um trecho do ponto more.

Personalizações e Configurações

Seeing that you know how it works, now look at how we can make this little invitation to continue reading your post be more inviting.

By design, the_content() tag includes a parameter for formatting the <!--more--> content and look, which creates a link to "continue reading" the full post.

By default, it looks like this:

São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. Leia mais...


If you want to change the words from more.... to something else, just type in the new words into the tag:

<?php the_content('Ler...'); ?>

São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. Ler...


Or get more sophisticated and make it fun:

<?php the_content('Clique e descubra'); ?>

São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. Clique e descubra...


You can style the text in the tag, too.

<?php the_content('<span class="moretext">...on the edge of
your seat? Click here to solve the mystery.</span>'); ?>

Then set the moretext class in your style.css style sheet to whatever you want. Here is an example of the style which features bold, italic text that is slightly smaller than the default text and uses the font-variant: small-caps to force the text into small capital letters. :

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said ...On the Edge of Your Seat? Click Here to Solve the Mystery.

Some people do not want the text and prefer to use an extended character or HTML character entity to move the reader on to the full post.

<?php the_content('&raquo; &raquo; '); ?>

São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. &raquo; &raquo;


There is another parameter in the_content() template tag which will include the title of the post in the more text. Through the use of the_title() tag, the title of the article is included:

<?php the_content("...continue reading the story
called " . get_the_title('', '', false)); ?>

São designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. '', ''


and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said ...continue reading the story called A Tale That Must Be Told

Having a custom text for each post

Although the_content() is usually called from the template with a standard text as described above, it is possible to have an individual text for certain posts. In the visual editor, simply write <!--more Your custom text -->.

So, you may have something like this:

<!--more But wait, there's more! -->

Adding An Image

The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their Template Tags, including the more tag. To add an image, there are two ways to do it. Begin with the most simple -- listing it in the_content() template tag.

This examples features the image of a leaf after the "Read More" text and assumes that the image file is within your theme's images folder.

<?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?>

Notice that the code uses an ALT and TITLE in the image tag. This is in compliance with accessibility and web standards, since the image is both an image and a link. Here is what it might look like.

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said Read More...   leaf

You could even add a style to the image and more tag, as mentioned above, to style it even more. To use the image without the "Read More" text, just delete the text.

The second example uses the CSS background image. We have described how to use style classes in the above examples. This is a little tricker. The container's style must be set to allow the background image to show out from behind the text. If you were to use the above example as a background image, the style.css style sheet for this might look like this:

.moretext {
   width: 100px; 
   height: 45px; 
   background:url(/images/leaf.gif) no-repeat right middle;
   padding: 10px 50px 15px 5px}

The 50px padding against the right margin should make sure the text is pushed over away from the image as to not overlap it. The height ensures that the container will expand wide enough so the image is visible within the container, since a background image isn't "really there" and can not push against the container's borders. You may have to experiment with this to fit the size and shape of your own image.

You have gotten the basics. From here, it is up to your imagination.

How to use Read More in Pages

Please remember that the "Read More" tag is used only on the Home page which shows the latest posts. It does not work in "Pages". If you want to turn it on in Pages too for showing a set of partial posts, use the following code inside the loop for the dynamic content:

<?php
global $more;
$more = 0;
?>
//The code must be inserted ahead of the call to the content

<?php the_content('Continue Reading'); ?>

See More tag ignored on static front page forum topic.

Remover Exbição do Trecho

Para remover a exbição do trecho:

  • Mude the_content(); em seu arquivo index.php:
<?php the_content('',FALSE,''); ?>
  • Inclua <!--noteaser--> no texto da postagem, imediatamente após <!--more-->.

Veja mais parâmetros da tag de modelo em the_content().

Link Jumps to More or Top of Page

By default, when you click on the Read More link, the web page loads and then "jumps" to the spot where the <--more--> tag is set in the post. If you do not want that "jump", you can use this code in your theme's functions.php:

function remove_more_jump_link($link) { 
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

More about $more

If you set the $more variable to -1, the More tag will not be displayed. This can be useful in a "mullet loop". Like this:

<?php global $more; $more = -1; //declare and set $more before The Loop ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); //begin The Loop ?>
<?php 
    if ($more == -1) { //do not use the more tag on the first one.
        the_content();
        $more = 0; //prevent this from happening again. use the more tag from now on.
    }
    else { //use the more tag
        the_content(__('Read more...'));
    }
?>
<?php endwhile; //end of The Loop ?>