WordPress制作圆形头像友情链接页面的方法

网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门

就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多都不是很详细,于是打算自己写一篇文章方便大家:
操作之前先看看我的另外两篇文章:【这两篇文章很重要,网上很多的方法不详细就是少了很多的步骤】
1.WordPress设置圆形旋转头像的方法
这个里面的功能有很多,但是在这里我叫你们查看这篇文章主要是为了利用里面设置友链用户头像大小,不操作这一步的话设置出来的头像会很大
2.WordPress后台添加友情链接管理功能
这一步主要是为了管理链接,很重要哦
好了,如果上面都实现了的话就看下面的步骤:
1.到cpanel面板复制一份page.php然后改名为links.php,然后上传到和page.php一个路径下。
2.在cpanel面板中打开links.php编辑,在页面的最上面添加下面代码:


1

2

3

4

5

<?php

/*

Template Name: Links

*/

?>

3、在links.php中找到文章内容输出函数,在后面插入以下代码:


1

2

3

4

5

6

7

8

9

<?php $bookmarks=get_bookmarks();

  if ( !empty($bookmarks) ){

    echo ‘<ul class="link-content clearfix">‘;

    foreach ($bookmarks as $bookmark) {

      echo ‘<li><a href="‘ . $bookmark->link_url . ‘" title="‘ . $bookmark->link_description . ‘" target="_blank" >‘. get_avatar($bookmark->link_notes,64) . ‘<span class="sitename">‘. $bookmark->link_name .‘</span></a></li>‘;

    }

    echo ‘</ul>‘;

  }

?>

4.在style.css中添加下面的代码:(和网上不同,我删改过部分代码)


1

2

3

4

5

/*圆形友链头像*/

.link-content li{float:left;text-align: center;width: 100px;font-size:12px;margin-bottom:10px;list-style-type:none !important;}

.link-content li img{border-radius:100%;transition:0.5s;-webkit-transtion:0.5s}

.link-content li span{display:block}

.link-content li:hover img{transform:rotate(360deg);-webkit-transform:rotate(360deg);}

5.打开左边的链接按钮添加链接,在这里添加的链接之后会自动显示在友链页面的最下面(见最上面的图片)

添加链接的时候注意最下面备注的地方要填写友链用户的邮箱地址(如图),如果不填写,或者友链用户没有注册过Gravatar的话,那么这里就会显示默认的Gravatar头像,比如我上面的图片中的两个友链都是默认的Gravatar头像,

6.新建一个页面名字就写友链(名字根据你自己写),然后正文内容可以像我一样添加一些文字说明,添加的文字会显示在上面,而上一步添加的所有链接会自动
显示在最下面,然后在页面右边的模板选择links.php,之后保存一下就可以了,然后给你的菜单中添加一个友链页面的链接即可。

时间: 2024-12-11 22:33:50

WordPress制作圆形头像友情链接页面的方法的相关文章

数据绑定控件LiisView制作的网站友情链接管理

客户端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FriendLinks.aspx.cs" Inherits="ListView控件的绑定.FriendLinks" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

wordpress 不用插件添加友情链接

哎,也不知道为啥,网上说的那个link manager这个插件死活找不到啊, 找了一个类似的,但是不是,这么多的英文看了好几遍才发现不是 然后从大神哪里找到一个好方法 在你用的那个主题的function.php里面添加下面这个东东,然后去后台就多了一个链接,你添加就行了啊 add_filter( 'pre_option_link_manager_enabled', '__return_true' ); 前台怎么调用呢?看的别人的,也可以添加图片,就是不能上传,只能添加图片地址,主要的表就是wp_

wordpress调用指定id的page页面的方法,适用于多id调用

前面我们讲到wordpress如何调用指定page页面内容,现在再用另外的方法来调试一下,可以直接在single.php模板使用,同样可以调用多id,随ytkah一起来看看 <?php $args = array( 'include' => '673,23',//调用指定id,可以多id 'post_type' => 'page', 'post_status' => 'publish' ); $pages = get_pages($args); foreach ( $pages a

HTML基础——网站友情链接显示页面

1.列表标签 有序列表:type默认是1,2,3--,reserved指降序排列 <ol type="I" start="" reversed="reversed"> <li></li> </ol> 无序列表:type默认是disc <ul type=""> <li></li> </ul> 2.超链接标签 <a href=&q

WordPress友情链接插件的安装

插件:link manager 这样就安装成功! 在外观小工具里 把右边即可 这样在前台页面上就可看见添加的友情链接了!!!

WordPress后台添加友情链接管理功能

其实很早之前WordPress是有这个功能的,但是伴随着wordpress的经常升级和主题的升级以及更换,有时候后台会发现没有链接管理的入口,不过还是可以通过代码还原这个功能. 将以下代码添加到您当前主题的 functions.php 文件: 1 2 //开启wordpress友情链接管理 add_filter( 'pre_option_link_manager_enabled', '__return_true' ); 这样你就可以在后台管理友情链接了,还可以给链接分类等.

兼容所有浏览器圆形头像的CSS

圆形头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明. 这里需要注意的是需要把图片保存成24位的png,虽然IE6支持8位的png的透明,但是8位的png做透明圆弧图片存在效果上的问题,就是存在白色的杂边或锯齿.24位的png或32位的png的圆弧透明(半透明)图片则非常光滑,但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持),需要我们额外的一下处理:使用 AlphaImageLoader就可以解决IE6不能显示24位和32位PN

【Android】自定义圆形ImageView(圆形头像 可指定大小)

最近在仿手Q的UI,这里面经常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这种头像的原理.不过里面提供的方法还有一个不足的地方就是不能根据实际需求改变图片的大小,也就是说提供的原图是大尺寸的,转换之后的图片也是大尺寸的,这显然不符合我们实际项目中的需求.于是我对里面介绍的第一种方法做了一番改进,使其能直接在XML中指定图片的大小. 大体步骤 将原图居中裁剪成正方形 根据指定的宽度对正方形进行缩放 裁剪成圆形 效果 代码实现 package com.de

友情链接的添加保存

linkaddsave.php (保存php页面) 1 <?php 2 include '../inc/db_mysqli.php'; 3 $ty = $_POST['ty']; 4 if($ty=='Y'){ 5 //纯文字友情链接,不用保存图片 6 $stmt = $m->prepare('insert into hnsc_link(ltype,title,url,flag,atime) values(?,?,?,?,?)'); 7 $stmt->bind_param('ssssi'