Friendly links can be said to be a must for every independent blog. Many people choose to add friendly links columns in the sidebar, but establishing an independent friendly link page is also a good choice. This can be done easily with plug-ins, but I like the native ones, and I can solve it myself or solve it myself. After a while, the method came out.
Normal method
The steps to create a friendly link page are also relatively simple. First, create a new page template, call the friendly link function of UFIDA, and then add css beautification, and the matter is completed.
Let's talk about the specific steps below
1. Create a new template page
Copy the file in the topic and rename it to.
Add the following code at the top of the page
<?php /* Template Name: Links */ ?>
Then add a code similar to the following
<div class="post-content"><?php the_content(); ?></div>
Replace with
Copy the codeThe code is as follows:
<div class="lists"><p class="tips">Site Random Sorting</p><?php wp_list_bookmarks('orderby=rand&show_images=1'); ?></div>
After replacing, place it in the root directory of the theme folder, then create a new page, select the "Links" you just created in the page template, and save.
Explain the above code
my_list_bookmarks is a function that calls a friend link by WordPress, orderby is the sorting method of a friend link. Here I wrote rand, that is, random show_images is an image that controls whether to display a friend link. Boolean variable, 1 represents a display variable, 0 represents no display, and other optional parameters are as follows:
categorize
Boolean type, used to set whether the connection is displayed according to its respective categories
For string type, the following is "=link category ID number", and then the link under this category is displayed. If not specified, all links will be displayed.
category_name
String type. If "=name of a certain link classification" is followed, the name of the classification will be displayed before the link classification. If it is left blank here, the classification name of all link classifications will be displayed (i.e., the default form).
category_before
String type, text or code that is located before the link classification.
category_after
String type, text or code that is located after the link classification.
class
String type, each link class will have a "class" attribute (as can be seen from the above code), the default is: linkcat
category_orderby
String type, sorting method of link classification, by noun or ID.
‘name’ (default)
‘id'
category_order
String type, assembling the ascending and descending order of link classification:
ASC (default)
DESC
title_li
String type, the beginning or code of the link title, default is: Bookmarks, and it controls whether the connection is arranged in a list.
title_before and title_after
As the name implies, they are the text or code that connects the header before and after, and the default is the h2 tag.
show_private
Boolean, whether to display private links.
include
String type, outputs a category link for the Blogroll of the specified ID, and separates the "," of the half-width. All Blogroll categories are displayed by default.
exclude
String type, excluding the Blogroll classification link of the specified ID from the entire link list, and separates the IDs with a half-width ",". By default, nothing is excluded.
orderby
String type, Blogroll arrangement (default is sorted by name unless this value is left blank), that is, sorted according to the parameters we use in the WP background link settings interface:
（1）'id'
（2）‘url'
（3）‘name'
（4）‘target'
（5）‘description'
（6）‘owner'
（7）‘rating'
（8）‘updated'
(9) ‘rel’ – Arrange by set relationship
（10）‘notes'
（11）‘rss'
(12) ‘length’ – length setting of connection name
(13) ‘rand’ – Random arrangement display
order
String type, set the arrangement of ascending and descending order
ASC (default)
DESC
limit
Integer, set the maximum value of the output link number. The default value is "-1", and all outputs are all.
between
String type, text or code between each connection, picture, and description, defaults to "n" line break.
show_description
Boolean, whether to display a description for each link.
show_rating
Boolean, whether the link level is allowed.
show_updated
Boolean, whether to allow the display of the most recently updated timestamp.
hide_invisible
Boolean type, whether to display all links, or even links that are set to be invisible by the administrator, is allowed to display by default.
2. Add css to beautify. The following is personal css for your reference
.lists {padding: 5px; margin: 25px auto auto 0;}
.linkcat {font-size: 12px; font-weight: bolder; padding: 5px; margin-bottom: 15px; list-style: none; clear:both}
.lists li h2 {font-size:14px; margin-bottom: 15px; color: #99CC33; }
.listcat ul {margin-left: 20px;}
.linkcat ul li {float: left; margin-bottom: 20px; margin-left: 20px; padding: 4px 0 4px 6px; width: 150px; border: 1px solid #d9d9d9;}
.linkcat ul li a {color: #a4a4a4; text-decoration: none;}
.linkcat ul li a img {margin-right: 3px;}
.linkcat ul li a:visited {color: #a4a4a4;}
.tips {font-size: 14px; margin-bottom: 18px; margin-left: 5px;}
Using jQuery
The specific implementation steps are divided into two steps:
1. Load the jQuery library and you can directly call the google jQuery library
Copy the codeThe code is as follows:
<script type="text/javascript" src="/ajax/libs/jquery/1.3.2/"></script>
2. Load jQuery function code, pay attention to jQuery closing
$(".linkpage a").each(function(e){
$(this).prepend("<img src=/s2/favicons?domain="+(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
});
This paragraph of jQuery means iterating through all the a tags under the class as linkpage, and then adding img to the a tag, where ".linkpage" needs to be changed according to its own template.