Teasers and the More Tag for Lengthy Articles

Traffic Ivy

Increase Traffic to Your Website

Get Instant Access

If you are writing lengthy articles on your blog, they tend to overpower the front page of your blog. While an article is new enough to still be on the front page, its length will push all the other articles a long way out of the visitors' sight. For example, I added a 700-word article as the newest post on my sample blog. This meant that a visitor would need to scroll down through four screens before the next story was visible. If you had several such articles on your front page, it could quickly become a dozen or more screens long. Having a home page of that length is a big turnoff to visitors. They feel overwhelmed by the amount of text presented and are likely to go elsewhere. WordPress has a couple of mechanisms to deal with this.

The first is a special tag you use in your post that allows you to present the first part of your article as a "teaser." The rest of the article is then available by clicking on a more link. To enable this feature, simply add the <!--more--> special tag to your post at an appropriate point in the text—the end of the first paragraph might be a good place. Figure 17-13 shows the special tag in place while editing an article.

Figure 17-13. Special more tag inserted into an article

Note that although the <!--more--> tag looks like an HTML comment, it isn't. Specifically, it does not contain any spaces, which a normal HTML comment tag does include. If the <!--more--> tag is not exactly like this, WordPress will ignore it. To be sure to get it right, you should use the more quicktag button above the post editor (see Chapter 14 for details on the quicktag buttons).

Adding the <!--more--> tag to your post changes the way WordPress presents the post on the front page of your blog. WordPress will display your article up to the teaser tag. It will then add a link with, by default, the text "(more...)," as shown in Figure 17-14. This link will take your reader to the single-page view of your article. This view will have the full text of your article followed by any comments and the comment form as normal. As a nice feature for the reader, the page will be scrolled to the text following the more link, ready for them to continue reading.

Friday, August 19th 2005

Enhancing The Visitor Experience posted @ 12:06 pm Edit This in [ Information Architecture ]

In this article I am going to discuss how to improve your visitors experience. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Comments (0)

Thursday, August 18th 2005

Pages

About This Site Articles Maximising Comments Multiple Authors

Blogroll

Carthik

Mike

Dougal

Michel

Donncha

Ryan

Alex

Matt

August 2005

M

T

W

T F S S

1

2

3

4 5 6 7

8

9

10

11 12 13 14

15

16

17

18 19 20 21

22

23

24

25 26 27 28

29

30

31

«

Jul

Nofollowthe Leader//

Shaunlnman.com WP-ShortStat -Jeff Minard, Web Developer

Del.icio.us Links

Nofollowthe Leader//

Shaunlnman.com WP-ShortStat -Jeff Minard, Web Developer

Figure 17-14. The more link on the page

You can change the text used for the link so it says something other than "more" by using the template tag the_content() in your template. This tag retrieves the content of your post and can take a parameter specifying the text to use in the link. Listing 17-10 shows an example of a different prompt.

Listing 17-10. Alternative Teaser Prompt Passed to the_content() in main-content.php

<div class="storycontent"> <?php the_content('<br />Click to read this article...'); ?>

Notice that Listing 17-10 includes an XHTML break tag, <br />, in the text. You can add any HTML tag valid in a link. For instance, you could include an image as part of the link. The output from this example is shown in Figure 17-15.

A final point about this teaser tag is a companion tag you can use: <!--noteaser-->. This tag will stop WordPress from displaying the teaser part of your article on the page after the reader clicks; that is, the text before the <!--more--> tag will not be displayed. You can place the <!--noteaser--> tag anywhere in your article, but I tend to place it next to the <!--more--> tag to remind myself that I am using it. Whether removing the teaser introductory text makes sense depends very much on the structure of your article.

ci il lui mi iy 11 le viäiLui CApci mutt;

posted @ 12:06 pm Edit This irr [ Information Architecture ]

In this article I am going to discuss how to improve your visitors experience. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Comments (0)

Thursday, August 18th 2005

Articles Maximising Comments Multiple Authors

Blogroll

Ryan

Matt

Alex

Mike

Carthik

Dougal

Donncha

Michel

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 182£ 20 21 22 23 24 25 26 27 28 29 30 31 «Jul

Del.icio.us Links

Nofollowthe Leader//

Shaunlnman.com WP-ShortStat -Jeff Minard,

Web Developer Plugin de estadísticas para wp

Figure 17-15. Alternate teaser link

Was this article helpful?

0 0

Post a comment