Snapshots in WordPress are popups which appear when you hover over a link. They’re meant to preview a site so you can decide whether to visit.
Sometimes they’re useful: I use them to check which blogs in my blogroll have been updated, so I can visit just the ones with new material. At other times they’re downright annoying: for example when one pops up over a picture I’m viewing.
At least for the theme I’m using, WordPress settings only let you turn all snapshots on or off. There isn’t a setting, say, to turns them off just for pictures, or show them only for external links.
Mine are currently turned on. So I can demonstrate, with a link to the brilliant comic xkcd. Hover over the link below and you’ll see that
- this is what happens.
(It took me a while to realise that you’re then supposed to click the link in the snapshot, not the one in the text; I was trying to chase the snapshot out of the way in order to get at the link in the text and click that.)
Gaining some control
Opera 9.6 has some nice features to analyse displayed web pages and see what’s going on. A rummage through a page of my blog revealed the existence of some likely-looking classes (categories which can be applied to HTML tags) with names like
snap_noshots. So I tried these out in some test posts and now have what I think is the solution. It works for my blog, at least. (I suspect there may be some variation depending which WordPress theme you’re using; mine is Cutline with some changes I’ve made to the appearance.)
This is what I found:
- Turn off all snapshots throughout the blog, overriding any settings made in individual posts
- Go to Appearance ⇒ Extras and untick the box.
- If you want any snapshots at all
- Leave the box in Appearance ⇒ Extras ticked.
- Turn off snapshots for an individual link
class="snap_noshots"in its tag.
<a href="http://xkcd.com/" class="snap_noshots">
- Turn off snapshots for a section of a post
<div class="snap_noshots"></div>around the section concerned.
Caution: it’s tempting to do this for the More tag. But this doesn’t work properly, since when the post’s introduction is displayed alone, it has the opening
<div>tag but no closing
</div>tag. Similarly, if you decide to put
<div class="snap_noshots"></div>around the entire post, you’ll have to avoid using the More tag in it.
- Override this to turn snapshots on for an individual link
<class="snap_preview">in the link’s tag.
<a href="http://xkcd.com/" class="snap_preview">
- Turn snapshots back on for part of a section where they’re turned off
<div class="snap_preview"></div>around the part where you want them.
- Add hover text to a link
title="the text you want"in the tag.
<a href="http://xkcd.com" class="snap_noshots" title="Link to a web comic I enjoy">
- I’ve been cautious in those instructions and only used
<div>tags. That’s because those are the only ones I’ve tried. Presumably you could add the
class=settings to other tags too, e.g.
<ul class="snap_noshots">to remove snapshots from a list of links. But I’ve not checked.
- I’m not sure how universal it is for browsers to turn
title="sometext"into hover text; all I can say is that Internet Explorer and Opera 9.6 both do it. If you know what other browsers do please tell me, and I’ll add the information to this post.
- There appear to be circumstances where turning snapshots off in Appearance ⇒ Extras only turns some of them off. I suspect it might vary from theme to theme. Any more information on that welcome too.