• 博客設置
  • 編輯管理
  • 返回首頁
焚花祭秋
Wordpress Typecho 以及周邊知識的一個筆記,成長的過程中相互學習,共同進步!
首頁 歸檔 關於 友鏈 留言
分類
  • 博客.技巧
  • 網絡.主機
  • HOME
  • 博客.技巧
  • Typecho CSS3個性留言板讀者墻頁面的添加方法

Typecho CSS3個性留言板讀者墻頁面的添加方法

作者:焚花祭秋  /   发布时间:August 11, 2015  /   分类:博客.技巧  /   1 Comment

字體大小選擇: [ 超大字體 中型字體 默認字體 ]

Typecho 獲Typecho CSS3個性留言板讀者墻頁面的添加方法.沫

看到文章的首圖相信大家都不陌生,可能其他博客的讀者墻或者留言薄頁面都見過,挺簡約的真實記錄博客的訪客,留下的足跡,便於回訪,這也算是博客裏面互動的一個重要依據或者途徑,下面就來說說在Typecho下該如何實現這麼個性的訪問記錄:

首先、把下面代碼粘貼到當前主題的functions.php頁面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//獲得讀者墻
function getFriendWall()   
{   
    $db = Typecho_Db::get();   
    $sql = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail')   
              ->from('table.comments')   
              ->where('status = ?', 'approved')   
              ->where('type = ?', 'comment')   
              ->where('authorId = ?', '0')   
              ->where('mail != ?', 'admin@ben-lab.com')   //排除自己上墻
              ->group('author')   
              ->order('cnt', Typecho_Db::SORT_DESC)   
              ->limit('15');    //讀取幾位用戶的信息  
    $result = $db->fetchAll($sql);   
 
    if (count($result) > 0) {   
        $maxNum = $result[0]['cnt'];   
        foreach ($result as $value) {   
            $mostactive .= '<li><a target="_blank" rel="nofollow" href="' . $value['url'] . '"><span class="pic" style="background: url(http://1.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=36&d=&r=G) no-repeat; "></span><em>' . $value['author'] . '</em><strong>+' . $value['cnt'] . '</strong><br />' . $value['url'] . '</a></li>';       
        }   
        echo $mostactive;   
    }   
}

其次、在主題目錄裏新建一個guestbook.php,粘貼以下代碼,當然,新建頁面的名稱可以自己填寫,本篇是以guestbook為例,你懂的

1
2
3
4
5
6
7
<?php   
    /**  
    * 自定義頁面模板
    *  
    * @package custom  
    */  
?>

第三、打開當前主題的page.php,復制全部代碼.然後粘貼到guestbook.php,接著其次那步下面的代碼

第四、替換代碼,搜索下面代碼替換成再下面內容

1
php<?php $this->content(''); ?>

替換成

1
2
3
4
<div id="list-post">          
<ul class='readers-list'>     
<?php getFriendWall(); ?>     
</ul></div>

第五、打開主題的style.css,粘貼以下代碼

1
2
3
4
5
6
7
8
9
10
11
12
.readers-list {line-height:16px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-o-text-}
.readers-list li{width:180px;float:left;*margin-right:-1px;list-style:none;}
.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2);}
.readers-list a{position:relative;display:block;height:30px;margin:4px;padding:2px 4px 2px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px;font-size:10px;line-height:14px;}
.readers-list .pic,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;}
.readers-list .pic{width:30px;height:30px;float:left;margin:0 8px 0 -40px;border-radius:2px;}
.readers-list em{color:#666;font-style:normal;margin-right:10px;font:bold 12px/16px microsoft yahei;}
.readers-list strong{color:#ddd;width:34px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei;}
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none;}
.readers-list a:hover .pic{opacity:.6;margin-left:0;}
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei;}
.readers-list a:hover strong{color:#EE8B17;right:134px;top:0;text-align:center;border-right:#ccc 1px solid;height:34px;line-height:34px;}

第六、新建頁面或者編輯你的讀者墻頁面,點擊底部高級選項,在自定義模版選擇"自定義頁面模版"發布即可!

上一篇: WordPress 獲取顯示文章內圖片作為縮略圖的方法 下一篇: Typecho 創建文章歸檔頁面的非插件實現方法
    分享到: QQ空間 新浪微博 騰訊微博 開心網 人人網 淘江湖 百度空間
訂閱本站:焚花祭秋
文本標籤:沫, typecho讀者墻, typecho留言模板, typecho訪客記錄
友情聲明:本站所有文章皆為原創,圖文皆為網絡搜索傳播,轉載請以鏈接形式標明原文出處地址,謝謝合作!
本文鏈接:http://tc.muo.me/about-typecho-css3-friendwall.html [复制]

   一枚評論閃亮誕生! »

  1. 天地华宇 天地华宇
    September 25th, 2015 At Friday 12:25 AM    ReplyTa

    好东西 谢谢分享先收藏一下下 嘻嘻


取消回复
My WeChat

簡繁切換

    • Wordpress登陸後臺管理面板空白.
    • LinuxVPS CentOS 配置Postfix取代Sendmail進行郵件收發
    • WordPress通過jQuery和CSS使高亮代碼實現可伸展的方法分享
    • FlickrSync 同步上傳.更新硬盤照片到Flickr
    • Typecho 獲取顯示文章內圖片作為縮略圖的方法
    • Wordpress免費主題推薦GrassV1.0正式版

  • YueTing.Org
    悦听有声,路过看看
  • 自由草
    简繁转换功能在也没刷新下会失效
  • 天地华宇
    好东西 谢谢分享先收藏一下下 ...
  • flippy
    主题蛮好看的,好像轻博客一样
  • flippy
    不错呀
  • qkwu
    不错哦 收藏了
文章 RSS And 评论 RSS
焚花祭秋 Is Powered By Wordpress Theme Desgin By 沫(Muo.me)