马上就加载好了...HTML使用技巧，在WordPress中设置锚点
by 冬瓜 on Aug 12 , 2013 , under 学术 , 3,636 views , Leave a Comment
在使用wordpress的过程中，大家毕竟还是习惯“博客”的玩法，而不是“微博”的玩法，所以文章还是比较长的，最近想把一篇文章中的某一段给朋友看，就想到了锚点的做法，让一个页面也存在不一样的入口。本篇博文献给小白wordpress用户。
创建描点
使用锚点可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。通过创建到这些锚记链接，可快速将访问者带到指定位置。
格式为<a name=”锚点名”></a>，如代码：
<a name=”no1″>这是第一段锚点</a>
链接到锚点
若要链接到当前文章中的名为“no1″的锚记，格式为<a href=”#锚点名”></a>，如代码：
<a href=”#no1″>点击我连接到第一段</a>
当然，也可以将带有锚点的URL直接发送，格式为网页 URL+#锚点名
锚点之间平滑滚动
简单实现WordPress锚点链接之间的平滑滚动，采用JQuery形式，故为网站引入JQuery支持是前提条件。由于此文只为备忘，所以废话也就不多说了，不过还是要再要强调一下加载的顺序，JQuery 先。
下面直接上锚点链接之间的平滑滚动的JQuery代码：
$(document).ready(function() {
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^//, ”) == this.pathname.replace(/^//, ”) && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) + ‘]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’).animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
});
以上说的这些，其实可以用在wordpress但不仅限于wordpress，因为大家都知道wordpress是使用html的，所以理论上任何网页都可以使用上述的锚点跳转，这里是一个简单的网页锚点实例：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf8″ />
<title>锚点示例</title>
</head><body>
<a name=”A0″ id=”A0″></a>
<a href=”#A1″>网页第一部分</a>
<a href=”#A2″>网页第二部分</a>
<div style=”height:900px; background:#CCCCCC”></div>
<a name=”A1″ id=”A1″></a>1<a href=”#A0″>返回顶部</a>
<div style=”height:900px; background:#999999″></div>
<a name=”A2″ id=”A2″></a>2<a href=”#A0″>返回顶部</a>
<div style=”height:900px; background:#666666″></div>
</body>
</html>
对SEO的作用
锚链接是一个非常重要的概念，在网页中增加恰当的锚链接，会让所在网页和所指向网页的重要程度有所提升，从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面：正常来讲，页面中增加的链接锚链接都和页面本身有一定的关系，因此，锚文本可以做为锚链接所在的页面的内容的评估。锚链接能精确的描述所指向页面的内容，因此，锚链接能做为对所指向页面的评估。锚链接对于关键字排名的意义在于它可以让内容页随机链接在一起，让蜘蛛可以很好的抓取更多页面，权重也能均匀的传递，同时增强页面的相关性，最终提升网站的关键词排名。
因此，在长篇大论时，建议大家可以适当地使用锚点，不仅能带来更好的用户体验，也会为你的SEO锦上添花。
猜你喜欢