How to add Affiliate Links in WordPress? 3 Steps to Create Inner Page Links

WordpressLinks can be added and managed through the background, but it does not have the function of links on the inner page.

consideringWordPress websiteFor the ease of use and accuracy, I decided to use the wp_list_bookmarks link function to call, and use a separate inner page template to achieve.

Specific examples can refer toChen WeiliangBlog's inner link page ▼

• Exchange Friendship Links (Inner Page Links)

How to create friendly links on inner pages

Step 1:Create new page

• Create new page, and set the page's permalinks to "links".

Step 2:Copy the page.php file

• Copy the page.php file in the theme root directory and rename it to page-links.php
• In fact, you can define the name after page- of this file as you like.
• When creating a page, you need to match the page address to this name.

Step 3:Find the article content display function

In the page-links.php file, find the article content display function ▼

<?php the_content(); ?>

Below it, add the following code▼

<div class="page-links">
    <h3>内页链接</h3>
    <ul>
        <?php
        $default_ico = home_url().'/links_default.ico'; //默认 ico 图片位置
        $bookmarks = get_bookmarks('title_li=&categorize=0&category=64,383&orderby=rand'); 

                    //如果你要输出某个链接分类的链接，更改一下get_bookmarks参数即可
                    /*如要输出链接分类ID为5的链接title_li=&categorize=0&category=5&orderby=rand */
                    
                    /*全部链接随机输出 title_li=&orderby=rand */
        if ( !empty($bookmarks) ) {
            foreach ($bookmarks as $bookmark) {
            echo '<li><img src="', $bookmark->link_url , '/favicon.ico" onerror="javascript:this.src=\'' , $default_ico , '\'" /><a href="' , $bookmark->link_url , '" title="' , $bookmark->link_description , '" target="_blank" >' , $bookmark->link_name , '</a></li>';
            }
        }
        ?>
    </ul>
</div>

• Watch out for code comments.

Add CSS styles to page-links

To make it more beautiful, you can define the class style of page-links.

The following isChen WeiliangCSS styles of the theme used ▼

/*内页链接*/
.page-links{overflow:hidden;margin:0 0 24px;padding:0;}
.page-links h3{border-bottom:1px solid #bfbebe;text-align:center;margin:0;}
.page-links ul{margin:0;padding:5px 0 0 0;}
.page-links ul li{float:left;width:150px;line-height:16px;height:16px;margin:5px 5px 0;padding:0;list-style-type:none;}
.page-links ul li:hover{background:#f2f2f2;}
.page-links ul li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

You're done!