So teilen Sie ausgewählte Inhalte mit Sina Weibo in Wordpress-WordDrücken Sie-php.cn

So teilen Sie ausgewählte Inhalte mit Sina Weibo in Wordpress

藏色散人

Freigeben： 2020-01-07 10:10:48

Original

2566 Leute haben es durchsucht

Wie teile ich ausgewählte Inhalte mit Sina Weibo in WordPress?

Das Beispiel in diesem Artikel beschreibt, wie WordPress ausgewählte Inhalte an Sina Tencent Weibo weitergibt. Teilen Sie es als Referenz mit allen. Die spezifische Methode ist wie folgt:

Empfohlen: „WordPress-Tutorial“1. Ich glaube, dass die meisten WordPress-Blogs dies bereits getan haben jQuery eingeführt. Dann können Sie direkt mit dem zweiten Schritt fortfahren

2. Am Ende der Seite, oder genauer gesagt, fügen Sie diesen Teil von JS nach der Einführung der jQuery-Bibliothek hinzu Seite Es funktioniert.

Die Funktion zum Auswählen und Teilen sieht relativ fortgeschritten aus, aber tatsächlich ist die Implementierung recht einfach. Das Prinzip, das die meisten Leute nicht interessiert, wird hier übersprungen In diesem js-Text habe ich einfach die Funktion zum Teilen für Sina Weibo gekapselt. Der Methodenname lautet: $sinaMiniBlogShare

Der Beispielcode lautet wie folgt:

Der Code lautet wie folgt:

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); 
} 
}); 
}();

Nach dem Login kopieren

Sie können sehen, dass die sinaMiniBlogShare-Methode zwei Parameter hat: eleShare und eleContainer. Der erstere Parameter ist erforderlich und bezieht sich auf das schwebende Ebenenelement, das nach der Auswahl des Textes angezeigt wird (in der Demo ist es das Sina-Augensymbol). Der letztgenannte Parameter bezieht sich auf das Containerelement für die Textauswahl. Wenn er nicht festgelegt ist, bezieht er sich auf das Dokumentelement, d 🎜>Angenommen, der HTML-Code des Sina Weibo-Freigabesymbols lautet wie folgt:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Verwenden Sie den folgenden Code direkt:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen beim Aufbau einer WordPress-Website hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo teilen Sie ausgewählte Inhalte mit Sina Weibo in Wordpress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!