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

WordPress allows you to add and manage friend links in the backend, but it does not have the feature for adding friend links to internal pages.

Considering the ease of use and accuracy of WordPress website building , it was decided to use the wp_list_bookmarks function for friend links, implemented using a separate inner page template.

For specific examples, please refer to the link page on Chen Weiliang 's blog ▼

• Exchange Friendship Links (Inner Page Links)

How to create friendly links on inner pages

Step 1: Create a 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: Locate the function to display article content.

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 are the CSS styles for the theme used by Chen Weiliang ▼

/*内页链接*/
.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!