communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > Tutoriel CMS > WordPresse > Comment ajouter des favoris sur un blog WordPress ? (Joint avec le code d'implémentation)

Comment ajouter des favoris sur un blog WordPress ? (Joint avec le code d'implémentation)

青灯夜游
Libérer： 2023-02-28 20:00:23
avant
1854 Les gens l'ont consulté

Comment ajouter des favoris sur un blog WordPress ? L'article suivant vous expliquera comment ajouter des favoris dans les blogs WordPress et joindra le code d'implémentation. J'espère qu'il vous sera utile !

Comment ajouter des favoris sur un blog WordPress ? (Joint avec le code d'implémentation)

Au cours des deux derniers jours, j'ai bricolé l'ajout d'un « Social Bookmark » au blog, qui est un bouton sous l'article permettant aux lecteurs de collecter et de partager des articles. Il existe de nombreux plug-ins WordPress disponibles sur Internet pour implémenter la fonction de favoris, mais la plupart des plug-ins ne fournissent qu'un morceau de code JS et rien d'autre, et la personnalisation du code est extrêmement médiocre.

La bonne nouvelle est que certains sites Web fournissent du code pour implémenter la fonction de favoris, ce qui est génial. J'ai donc fait quelques tests, mais les résultats n'étaient pas très satisfaisants. Certains codes avaient échoué, et trop de petites images étaient appelées, ce qui augmentait le nombre de connexions http et avait un certain impact sur la vitesse de chargement du site. Il vaut mieux demander de l'aide que de demander de l'aide vous-même. J'ai téléchargé le dernier code des principaux sites de signets, et j'ai utilisé la technologie CSS Sprites pour combiner ces petites images en une seule. De plus, le code a été optimisé et a passé la vérification W3C.

L'image ci-dessous est l'effet d'un signet créé avec succès. Peut-être que ce que vous voyez au bas de cet article peut vous donner une expérience plus profonde :

Comment ajouter des favoris sur un blog WordPress ? (Joint avec le code dimplémentation)

Vous ne pouvez pas garder de bonnes choses pour vous. de créer ce bouton de collecte de signets. Très simple.

1. Ouvrez single.php dans votre dossier de thème WordPress

2. Recherchez ) et ajoutez le code suivant (c'est ici que le signet est affiché, ou placez-le là où vous le pensez). c'est un endroit approprié) : 

<div id="soucang">
<strong>
	<span style="color:#9932CC">收藏</span><span style="color:#57c200"> & </span>
	<span style="color:#9932CC">分享</span>
</strong>

<ul>
<li id="kaixin">
	<a href="http://www.kaixin001.com/repaste/share.php?rtitle=<?php echo urlencode($post->post_title);?>&rurl=<?php echo urlencode(get_permalink($post->ID));?>&rcontent=<?php $desc = strip_tags($post->post_excerpt); echo urlencode($desc); ?>" title="转贴到开心网" rel="nofollow"><span></span></a>
</li>

<li id="jiudian">
	<a title="推荐到九点" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="douban">
	<a title="推荐到豆瓣" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="yahoo">
	<a title="雅虎收藏" href="http://myweb.cn.yahoo.com/popadd.html?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="google">
	<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="Google书签" rel="nofollow"><span></span></a>
</li>

<li id="baidu">
	<a href="http://cang.baidu.com/do/add?it=<?php echo urlencode($post->post_title);?>&iu=<?php echo urlencode(get_permalink($post->ID));?>" title="百度搜藏" rel="nofollow"><span></span></a>
</li>

<li id="qq">
	<a href="http://shuqian.qq.com/post?from=3&title=<?php echo urlencode($post->post_title);?>&uri=<?php echo urlencode(get_permalink($post->ID));?>" title="收藏到QQ书签" rel="nofollow"><span></span></a>
</li>

<li id="vivi">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(vivi=window.open(&#39;http://vivi.sina.com.cn/collect/icollect.php?pid=www.ludou.org&title=&#39;+escape(d.title)+&#39;&url=&#39;+escape(d.location.href)+&#39;&desc=&#39;+escape(t),&#39;vivi&#39;,&#39;scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes&#39;));vivi.focus();" title="保存到爱问ViVi收藏夹"><span></span></a>
</li>			

<li id="bolaa">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(blog=window.open(&#39;http://www5.bolaa.com/CommendBlog/SmallLogin.aspx?title=&#39;+escape(d.title)+&#39;&newspath=&#39;+escape(d.location.href)+&#39;&subtitle=&#39;+escape(t),&#39;bolaa&#39;,&#39;width=400px,height=400px&#39;));blog.focus();" title="推荐到博拉"><span></span></a>
</li>

<li id="poco">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(keyit=window.open(&#39;http://my.poco.cn/fav/storeIt.php?t=&#39;+escape(d.title)+&#39;&u=&#39;+escape(d.location.href)+&#39;&c=&#39;+escape(t)+&#39;&img=http://www.h-strong.com/blog/logo.gif&#39;,&#39;keyit&#39;,&#39;scrollbars=no,width=475,height=575,status=no,resizable=yes&#39;));keyit.focus();" title="收藏到POCO网摘" rel="nofollow"><span></span></a>
</li>

<li id="hexun">
	<a href="javascript:t=document.title;u=location.href;e=document.selection?(document.selection.type!=&#39;None&#39;?document.selection.createRange().text:&#39;&#39;):(document.getSelection?document.getSelection():&#39;&#39;);void(open(&#39;http://bookmark.hexun.com/post.aspx?title=&#39;+escape(t)+&#39;&url=&#39;+escape(u)+&#39;&excerpt=&#39;+escape(e),&#39;HexunBookmark&#39;,&#39;scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes&#39;));" title="转帖到和讯网摘" rel="nofollow"><span></span></a>
</li>

<li id="delicious">
	<a href="http://www.delicious.com/post?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="deliciou" rel="nofollow"><span></span></a>
</li>

<li id="xianguo">
	<script charset="utf8" type="text/javascript">
	cT="0";nc="#444";nBgc="";nBorder="#F5E5A9";tc="#649B00";tBgc="#FFF4D0";tBorder="#F5E5A9";tDigg="%E6%8E%A8%E8%8D%90";tDugg="%E5%B7%B2%E8%8D%90";defaultItemUrl="WEB_URL";defaultFeedUrl ="http://feed.feedsky.com/ludou";
	</script>
	<script type="text/javascript" charset="utf8" src="http://re.xianguo.com/api/diggthis.js"></script>
</li>
</ul>
</div>
Copier après la connexion

3. Veuillez remplacer l'URL www.ludou.org dans le code ci-dessus par la vôtre, puis ajoutez le code suivant au fichier CSS de votre thème WordPress : 

#soucang {
	margin:15px auto;
}
#soucang ul {
	display:inline;
	position:absolute;
}
#soucang li {
	list-style:none;
	float:left;
	margin-right:10px;
	display:block;
}
#soucang li a span {
	/*请将下面的 http://example/m.gif 改成你自己的图片链接*/
	background:url(http://example/m.gif) no-repeat;
	display:block;
	height:16px;
	width:16px;
}
#soucang li#baidu  a span { background-position: 0 0; }
#soucang li#bolaa a span { background-position: 0 -17px; }
#soucang li#delicious a span { background-position: 0 -34px; }
#soucang li#douban a span { background-position: 0 -85px; }
#soucang li#google a span { background-position: 0 -102px; }
#soucang li#hexun a span { background-position: 0 -119px; }
#soucang li#jiudian a span { background-position: 0 -136px; }
#soucang li#kaixin a span { background-position: 0 -153px; }
#soucang li#poco a span { background-position: 0 -187px; }
#soucang li#qq a span { background-position: 0 -204px; }
#soucang li#vivi a span { background-position: 0 -221px; }
#soucang li#yahoo a span { background-position: 0 -238px; }
#soucang li#xianguo {margin-left:10px; padding-bottom:5px;}
Copier après la connexion

Le code ci-dessus utilise la technologie CSS Sprites , l'image d'arrière-plan de #soucang li a span peut être personnalisée, il suffit de la mettre dans le répertoire de votre site Web et de remplacer http://example/m.gif par votre propre adresse d'image. De plus, si la mise en page CSS ci-dessus ne convient pas à votre blog, vous pouvez la modifier vous-même.

D'accord, c'est la fin de l'histoire. En regardant ces différents boutons de favoris, ne vous sentez-vous pas très différent ? En fait, ces signets contribuent également à embellir le site Web. Si vous avez quelque chose, veuillez laisser un message ici.

En raison de la largeur limitée de la page Web, seuls 16 boutons de favoris courants sont fournis ici. D'autres peuvent être ajoutés en fonction de vos propres besoins. D'autres codes de favoris et téléchargements de logos sont fournis ci-dessous, qui ne me sont pas originaux. Après avoir compris le code fourni ci-dessus, il n'est pas difficile de l'ajouter vous-même.

Comment ajouter des favoris sur un blog WordPress ? (Joint avec le code d'implémentation)

Apprentissage recommandé : "Tutoriel 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!

Étiquettes associées：
php wordpress
source：ludou.org
Article précédent：Comment créer un menu de navigation thématique dans WordPress (2) Article suivant：Un article expliquant en détail comment créer des blocs de colonnes CMS dans WordPress
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Les tableaux PHP obtenus à partir des paramètres d'URL ne se comportent pas comme prévu J'ai un paramètre d'URL qui contient l'identifiant de la catégorie et je souhaite le trait...
Depuis 2024-04-06 22:09:02
0
1
1428
Où dois-je placer la directive CustomLog dans Apache J'utilise php:7.2-apachedocker. Je dois désactiver le journal d'accès à la connexion à l'U...
Depuis 2024-04-06 22:03:59
0
1
990
Quel est le format des variables dans la valeur de retour ? Je suis un nouvel apprenant de php. J'ai trouvé un morceau de code : if($x<time()){retu...
Depuis 2024-04-06 21:55:20
0
1
778
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
Regrouper les résultats MySQL par ID pour effectuer une boucle J'ai une table avec des données de vol dans MySQL. J'écris un code php qui regroupera et a...
Depuis 2024-04-06 17:27:56
0
1
406
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal