선택한 콘텐츠를 Wordpress의 Sina Weibo에 공유하는 방법

선택한 콘텐츠를 Wordpress의 Sina Weibo에 공유하는 방법은 무엇입니까?

이 문서의 예에서는 WordPress가 선택한 콘텐츠를 Sina Tencent Weibo에 공유하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 방법은 다음과 같습니다.

권장: "wordpress tutorial"

1. jQuery를 소개합니다. 대부분의 WordPress 블로그에서는 이미 jQuery를 도입했기 때문에 바로 두 번째 단계로 진행할 수 있습니다. 페이지 하단에, 좀 더 정확하게 말하면 jQuery 라이브러리를 도입한 후 이 JS 조각을 추가하면 이 사이트와 동일한 효과를 볼 수 있습니다.

선택 및 공유 기능이 비교적 고급스러워 보이지만, 사실 구현은 매우 간단합니다. 그 중 일부는 원칙에 관심이 없으며 여기서는 건너뛰겠습니다. 이 js 텍스트를 선택한 후 Sina Weibo에 공유하는 기능을 간단히 캡슐화했습니다. : $sinaMiniBlogShare

예제 코드는 다음과 같습니다.

코드는 다음과 같습니다.

var miniBlogShare = function() { 
//指定位置驻入节点 
$(&#39;<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="1328255868614.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="/1328255868314.png" />&#39;).appendTo(&#39;body&#39;); 
//默认样式 
$(&#39;.img_share&#39;).css({ 
display : &#39;none&#39;, 
position : &#39;absolute&#39;, 
cursor : &#39;pointer&#39; 
}); 
//选中文字 
var funGetSelectTxt = function() { 
var txt = &#39;&#39;; 
if(document.selection) { 
txt = document.selection.createRange().text; 
} else { 
txt = document.getSelection(); 
} 
return txt.toString(); 
}; 
//选中文字后显示微博图标 
$(&#39;html,body&#39;).mouseup(function(e) { 
if (e.target.id == &#39;imgSinaShare&#39; || e.target.id == &#39;imgQqShare&#39;) { 
return 
} 
e = e || window.event; 
var txt = funGetSelectTxt(), 
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, 
left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, 
top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40; 
if (txt) { 
$(&#39;#imgSinaShare&#39;).css({ 
display : &#39;inline&#39;, 
left : left, 
top : top 
}); 
$(&#39;#imgQqShare&#39;).css({ 
display : &#39;inline&#39;, 
left : left + 30, 
top : top 
}); 
} else { 
$(&#39;#imgSinaShare&#39;).css(&#39;display&#39;, &#39;none&#39;); 
$(&#39;#imgQqShare&#39;).css(&#39;display&#39;, &#39;none&#39;); 
} 
}); 
//点击新浪微博 
$(&#39;#imgSinaShare&#39;).click(function() { 
var txt = funGetSelectTxt(), title = $(&#39;title&#39;).html(); 
if (txt) { 
window.open(&#39;http://v.t.sina.com.cn/share/share.php?title=&#39; + txt + &#39; —— 转载自：&#39; + title + &#39;&url=&#39; + window.location.href); 
} 
}); 
//点击腾讯微博 
$(&#39;#imgQqShare&#39;).click(function() { 
var txt = funGetSelectTxt(), title = $(&#39;title&#39;).html(); 
if (txt) { 
window.open(&#39;http://v.t.qq.com/share/share.php?title=&#39; + encodeURIComponent(txt + &#39; —— 转载自：&#39; + title) + &#39;&url=&#39; + window.location.href); 
} 
}); 
}();

$sinaMiniBlogShare 메소드에는 eleShare와 eleContainer라는 두 개의 매개 변수가 있는 것을 볼 수 있습니다. 그 중 전자의 매개 변수는 필수이며 부동을 참조합니다. 텍스트를 선택한 후 나타나는 레이어 요소(이 기사의 데모에서는 Sina 눈 아이콘입니다), 후자의 매개변수는 텍스트 선택의 컨테이너 요소를 나타내고, 선택적 매개변수는 설정되지 않은 경우 문서 요소를 나타냅니다. 즉, 전체 페이지에서 텍스트를 선택하면 공유 기능이 실행됩니다.

Sina Weibo 공유 아이콘의 HTML이 다음과 같다고 가정합니다.

코드는 다음과 같습니다.

<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />

그런 다음 다음 코드를 직접 사용합니다.

코드는 다음과 같습니다.

$sinaMiniBlogShare(document.getElementById("imgSinaShare"));

이 글이 WordPress 웹사이트를 구축하는 모든 분들께 도움이 되기를 바랍니다.

위 내용은 선택한 콘텐츠를 Wordpress의 Sina Weibo에 공유하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!