How to add bookmarks to WordPress blog? (Attached with implementation code)

How to add bookmarks to WordPress blog? The following article will explain to you how to add favorite bookmarks in WordPress blogs, and attach the implementation code. I hope it will be helpful to you!

In the past two days, I have been tinkering with adding a "Social Bookmark" to the blog, which is a button under the article for readers to collect and share articles. There are many WordPress plug-ins available on the Internet to implement the bookmark function, but most plug-ins only provide a piece of JS code and nothing else, and the customization of the code is extremely poor.

The good news is that some websites provide code to implement the bookmark function, which is very good. So I did some testing, but the results were not very satisfactory. Some codes had failed, and too many small pictures were called, which increased the number of http connections and had a certain impact on the loading speed of the website. It is better to ask for help than to ask for help yourself. I downloaded the latest code from major bookmark websites. After a little piece together, I used CSS Sprites technology to combine these small pictures into one. The speed has obviously increased. In addition, the code has been optimized and passed W3C verification.

The picture below is the effect of a successfully created bookmark. Perhaps what you see below this article can give you a deeper experience:

Good things cannot be exclusive. Let’s share the process of making this bookmark collection button. Very simple.

1. Open single.php in your WordPress theme folder

2. Find and add the following code below (it’s a bookmark) Display position, or put it where you think is appropriate):

  收藏 &  分享  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
   
 
 

3. Please change the www.ludou.org URL in the above code to yours, and then add the following code to your WordPress theme CSS file :

#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;}

The above code uses CSS Sprites technology, in which the background image of#soucang li a spancan be customized. Just put it in your website directory and change http:/ Just change /example/m.gif to your own image address. In addition, if the above CSS layout is not suitable for your blog, you can change it yourself.

Okay, this is the end of the story. Looking at these various bookmark buttons, don’t you feel very different? In fact, these bookmarks also help to beautify the website. If you have anything, please leave a message here.

Due to the limited width of the web page, only 16 mainstream bookmark buttons are provided here. Others can be added according to your own needs. Other bookmark codes and logo downloads are provided below, which are not original to me. After understanding the code provided above, it is not difficult to add it yourself.

Recommended study: "WordPress Tutorial"

The above is the detailed content of How to add bookmarks to WordPress blog? (Attached with implementation code). For more information, please follow other related articles on the PHP Chinese website!