WordPress开发:友情链接页面制作及使用教程

微饭网官方微信
weeiy

昨天有位小伙伴问微饭友情链接页面是怎么做的,当然也不是第一个问了,既然你诚心诚意的问了,那我就大发慈悲的告诉你(有木有数码宝贝的即视感 -。-)!

第一步:功能开启篇

因为Wordpress从3版本开始关闭了链接管理,需要自己手动添加代码开启此功能,此功能也是实现友情链接页面的最基本功能。

模板函数 (functions.php)中的最后个 ?> 添加以下代码:

// 友情链接添加、管理
// 微Fan'天空 http://www.weeiy.com
add_filter( 'pre_option_link_manager_enabled', '__return_true' );

$permalink_structure = get_option('permalink_structure');
if (!$permalink_structure || '/' === substr($permalink_structure, -1))
return;
add_filter('user_trailingslashit', 'ppm_fixe_trailingslash', 10, 2);
function ppm_fixe_trailingslash($url, $type)
{
if ('single' === $type)
return $url;
return trailingslashit($url);
}

 第二步:页面代码篇

创建一个 links.php 上传到你的主题目录,代码如下(有代码功底的你也可以根据你的主题进行修改):

<?php 
/*
	template name: 友情链接
	description: template for Www.Weeiy.Com Dfan 
*/
get_header();
?>
<div class="pagewrapper clearfix">
	<aside class="pagesidebar">
		<ul class="pagesider-menu">
			<?php echo str_replace("</ul></div>", "", ereg_replace("<div[^>]*><ul[^>]*>", "", wp_nav_menu(array('theme_location' => 'pagemenu', 'echo' => false)) )); ?>
		</ul>
	</aside>
	<div class="pagecontent">
		<header class="pageheader clearfix">
			<h1 class="pull-left">
				<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
			</h1>
			<div class="pull-right">
				<?php deel_share() ?>
			</div>
		</header>
		<?php while (have_posts()) : the_post(); ?>
			<article class="article-content">
				<?php the_content(); ?>
			</article>

<div class="blogroll-catigories">
<h1>Blogroll</h1>

<?php 
$bookmarks = get_bookmarks('orderby=date&category_name=' . $linkcat->name);
								if ( !empty($bookmarks) ) {
									foreach ($bookmarks as $bookmark) {
										$sitelink = $bookmark->link_url;
										$bsite = $sitelink{strlen($sitelink)-1} == '/' ? substr($sitelink, 0, -1) : $sitelink;
										$siteico = $bsite . '/favicon.ico';
										if(empty($bookmark->link_description)) $bookmark->link_description = '友情链接文字介绍未添加。';
										echo '<li><img width="16" height="16" src="' . $siteico . '" onerror="javascript:this.src=\'' . get_template_directory_uri() . '/images/links.ico\'"/><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_name . '" target="_blank" >';
										echo $bookmark->link_name . '</a>';
										echo '<p>' . $bookmark->link_description . '</p></li>';
									}
								}
							?>
						
					</div>

		

		<?php endwhile;  ?>
</div>
<?php comments_template('', true); ?>
<?php get_footer(); ?>

不会?下载现成的吧:Links.PHP下载地址

第三步 CSS代码篇

在你的 style.css 中添加以下代码,请根据你主题的实际情况进行添加:

//友情链接CSS代码 http://www.weeiy.com
.blogroll-catigories {
display:block;
width: auto;
overflow:hidden;
margin-bottom: 20px}
.blogroll-catigories ul{padding:0;list-style:none;width:auto;}
.blogroll-catigories li{position:relative;display:inline;background:#f9f9f9;width:169px;height:56px;float:left;border:dashed 1px #ccc;margin:0 15px 15px 0;padding:5px 10px;text-align: center;}
.blogroll-catigories a{display:inline-block;}
.blogroll-catigories p{border-top:1px solid #ddd;margin-top:3px;padding-top:3px;height:25px;overflow:hidden;font-size:12px;color:#999}
.blogroll-catigories img{position:absolute;bottom:-8px;left:50%;margin-left:-8px;}

第四步 创建新页面

页面 > 新建页面 > 页面属性 > 友情链接

QQ截图20141007195102

然后,大功告成,看一看完成后的效果吧!
友情链接页面演示
 

发表评论
加载中...
  • 料神Sam 3年前 (2015-03-21)

    Minty+Yusi 啊。哈哈。咱俩加个友链?

    查看对话
    • 微饭君 微Fan 3年前 (2015-03-22) 官方

      [v_notice] 已添加 [/v_notice]

  • 黎明的曙光 3年前 (2015-02-05)

    添加了所有代码,可是没效果啊?只显示 友情链接几个字。

    查看对话
  • good like 3年前 (2014-12-14)

    请问如何让它显示头像呢?

    查看对话
    • 微饭君 微Fan 3年前 (2014-12-14) 官方

      头像?

      • zllz 3年前 (2014-12-14)

        就是那个ico图标?只是显示默认的嘛?

        • 微饭君 微Fan 3年前 (2014-12-14) 官方

          他是调用目标站的图标~

          • zllz 3年前 (2014-12-14)

            全自动的嘛?如果对方的ico出现在对方主题文件夹内,那该如何判断呢?

            • 微饭君 微Fan 3年前 (2014-12-15) 官方

              这是自动调用的,如果获取不到则选择您自己设置的图标

  • 偏方大全qianjinpianfang.com 4年前 (2014-10-08)

    在框里对收录有影响么?

    查看对话
    • 微饭君 微Fan 4年前 (2014-10-08) 官方

      没影响,只是个美化样式而已!

  • 微饭君 微Fan 4年前 (2014-10-07) 官方

    如果有什么不懂的,欢迎在此留言。

    查看对话
    • 铁汉 4年前 (2014-10-11)

      太好了 正需要这个。谢谢你

相关文章