Comment partager le contenu sélectionné avec Sina Weibo dans Wordpress

Comment partager le contenu sélectionné avec Sina Weibo dans WordPress ?

L'exemple de cet article décrit comment WordPress partage le contenu sélectionné avec Sina Tencent Weibo. Partagez-le avec tout le monde pour votre référence. La méthode spécifique est la suivante :

Recommandé : "tutoriel wordpress"

1. Présentez jQuery. Je crois que la plupart des blogs WordPress l'ont déjà fait. introduit jQuery. Ensuite, vous pouvez passer directement à la deuxième étape

2. En bas de la page, ou plus précisément, ajoutez ce morceau de JS après avoir introduit la bibliothèque jQuery, vous pouvez voir la même chose que ceci. site Cela fonctionne.

La fonction de sélection et de partage semble relativement avancée, mais en fait la mise en œuvre est assez simple. Le principe qui fait grossir la tête et qui n'intéresse pas la plupart des gens sera ignoré ici. ce texte js j'ai simplement encapsulé la fonction de partage sur Sina Weibo. Le nom de la méthode est : $sinaMiniBlogShare

L'exemple de code est le suivant :

Le code est le suivant :

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

Vous pouvez voir $ La méthode sinaMiniBlogShare a deux paramètres, eleShare et eleContainer Parmi eux, le premier paramètre est obligatoire et fait référence à l'élément de calque flottant qui apparaît après la sélection du texte (dans la démo de cet article, il. est l'icône de l'œil Sina). Ce dernier paramètre fait référence au conteneur de sélection de texte, paramètre facultatif, s'il n'est pas défini, il fait référence à l'élément du document, c'est-à-dire que la sélection du texte de la page entière déclenchera la fonction de partage.

Supposons que le code HTML de l'icône de partage Sina Weibo soit le suivant :

Le code est le suivant :

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

Utilisez directement le code suivant :

Le code est le suivant :

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

J'espère que cet article sera utile à tout le monde dans la création d'un site Web WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!