分類目錄歸檔：WordPress

WordPress主題的jQuery應(yīng)用之標(biāo)題提示

由 發(fā)表于 ┊2,038 PV

首先在header.php的head標(biāo)簽中加載jQuery庫

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一個JS文件，在header.php的head標(biāo)簽中加載，JS文件中加入下例代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var sweetTitles = {
    x : 10,                            
    y : 20,                            
    tipElements : "a",                 
    init : function() {
        $(this.tipElements).mouseover(function(e){
            this.myTitle = this.title;
            this.myHref = this.href;
            this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);       // url 超過 30 個字符的部分用 ... 代替
            this.title = "";
            var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
            $('body').append(tooltip);
            $('#tooltip')
                .css({
                    "opacity":"0.8",                   // 0.8 為透明度可自行根據(jù)喜好調(diào)整數(shù)字
                    "top":(e.pageY+20)+"px",
                    "left":(e.pageX+10)+"px"
                }).show('fast');   
        }).mouseout(function(){
            this.title = this.myTitle;
            $('#tooltip').remove();
        }).mousemove(function(e){
            $('#tooltip')
            .css({
                "top":(e.pageY+20)+"px",
                "left":(e.pageX+10)+"px"
            });
        });
    }
};
$(function(){
    sweetTitles.init();
});

在CSS文件中添加下例代碼：

1
2
3
body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

如果你還用了@回復(fù)這樣的jQuery提示效果的話會被標(biāo)題提示遮掉，可以參照下面解決：
代碼中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”來排除class為atreply的a標(biāo)簽，或者用tipElements : “a:not([href^=’#’])”來排除href為錨點(diǎn)的a標(biāo)簽

原文：http://leeiio.me/sweet-titles-for-jquery/

自定義 WordPress 后臺用戶聯(lián)系方式

由 發(fā)表于 ┊2,583 PV

在 WordPress 后臺，個人設(shè)置（Profile）中，除了可以設(shè)置電子郵件和 Website 之外，還可以設(shè)置自己的聯(lián)系方式，比如 AIM, Yahoo IM, Jabber/Google Talk。但是除了 Gtalk 之外，其他兩個中國人基本不用，那么如何去掉我們基本不用的 AIM 和 Yahoo IM，并加上國人常用的 QQ, MSN 和飛信呢？

其實(shí)在 WordPress 中實(shí)現(xiàn)這樣的功能是非常容易的，只需要調(diào)用下 custom_contactmethods 這個 WordPress Filter 既可以實(shí)現(xiàn)在后臺支持常用的 QQ, MSN 和飛信等聯(lián)系方式，代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
/*
Plugin Name: Custom Contact
Plugin URI: http://wpjam.com/
Description: 自定義博客的聯(lián)系方式，從 WordPress 默認(rèn)的 AIM, Yahoo IM 改為中國常見的 QQ, MSN 和飛信。
Version: 1.0
Author: Neekey
Author URI: http://photozero.net/
*/
 
add_filter('user_contactmethods','custom_contactmethods');
function custom_contactmethods($user_contactmethods ){
    $user_contactmethods  = array(
        'qq' => 'QQ',
        'msn' => 'MSN',
        'jabber' => __('Jabber / Google Talk'),
        'fetion' => '飛信'
    );
    return $user_contactmethods ;
}
?>

把上面這些代碼保存下來，存為一個 PHP 文件，保存為 UTF-8 without BOM 格式，上傳到 WordPress 插件目錄，然后激活即可。如果你需要加入其他聯(lián)系方式，只需要按照同樣的方式在上面數(shù)組中添加即可，這里就不一一詳細(xì)介紹。

原文：http://fairyfish.net/2010/01/30/custom-contact/

江陰印刷網(wǎng)新版風(fēng)格

由 發(fā)表于 ┊11,142 PV

其實(shí)江陰印刷網(wǎng)換上新風(fēng)格有一段時間了，只是首頁的JS幻燈片一直沒有完成。今天總算找到了一個，換上了。

風(fēng)格仿的是Discuz的Supesite的默認(rèn)風(fēng)格，支持二級分類，后臺自定義MEAT，廣告，統(tǒng)計代碼等。

主題要改的地方是index.php文件的array(1,3,4,5,6,7)，把里面的數(shù)字改成你想顯示的分類ID號，幻燈片是自動讀取文章中的圖片，演示中最下面的最新圖片是用advanced-post-image做的(注意：這個插件要求在你的uploads目錄下建立thumb目錄及寫入權(quán)限)

下載：CMS THEME NO.1
截圖
jyprint

在用的WP風(fēng)格

由 發(fā)表于 ┊2,900 PV

沒什么技術(shù)含量的，都是東抄西借，想名字也麻煩，就直接用縮寫命名了(Blog Theme No. 1)，主題側(cè)欄支持 WordPress 自帶的 Widgets 功能。
后臺可自定義關(guān)鍵，Meta，可選顯示頁面或分類，可用Google自定義搜索，帶公告欄（在博客首頁的文章區(qū)域上方顯示），自主義側(cè)欄RSS訂閱地址，可選顯示廣告，可選顯示備案和統(tǒng)計。

btn1

下載：btn1

為你的博客加上簡易留言薄功能

由 發(fā)表于 ┊2,103 PV

看到好多WP友人，都在問如何實(shí)現(xiàn)WordPress的留言薄功能，下面我就用default主題為博客添加留言薄功能。
1. 復(fù)制page.php，并改名為gbook.php，打開編輯，在

1
<?php get_header(); ?>

上面加入：

1
2
3
4
5
<?php
/*
Template Name: GuestBook
*/
?>

2.在

1
<?php edit_post_link(__('Edit this entry.', 'kubrick'), '<p>', '</p>'); ?>

下面加入：

1
<?php comments_template(); ?>

3.在后臺新建一個頁面，頁面模板選GuestBook，在固定鏈接：那起個英文名字，像我的就是gbook。

就這樣，一個簡單的留言薄就完成了，如果你用的是其它主題，請復(fù)制你相應(yīng)的主題下面的文件。

如果你還想?yún)^(qū)別和文章不一樣的留言文件，可以再復(fù)制comments.php為guestcomments.php
把gbook.php的這句代碼

1
<?php comments_template(); ?>

改為

1
<?php comments_template('/guestcomments.php');?>

我覺得用一樣的也蠻好的，這個看個人愛好。

rin-wendy.com情侶模板的制作思路(二)

由 發(fā)表于 ┊7,377 PV

上一篇分析的是情侶模板的基本布局，接下來就是評論部分。主要是判斷非作者、作者A和作者B，還有奇偶的問題。

1. 修改comments.php，在wp_list_comments代碼那加上&callback=my_comment。

1
<?php wp_list_comments('type=comment&callback=my_comment'); ?>

繼續(xù)閱讀 →

rin-wendy.com情侶模板的制作思路(一)

由 發(fā)表于 ┊4,362 PV

這個網(wǎng)站的布局很特別，首頁是三欄，左右不同的顏色，文章頁根據(jù)不同的作者顯示不同的顏色，頁面又是一種風(fēng)格。

1. 首先區(qū)分頁面，首頁，作者A和作者B。

1
2
3
4
5
6
7
8
9
10
11
12
<?php if (is_page())  {
    $style_item = 'page';
} elseif (is_single()) {
    if ($post->post_author == '1') {
        $style_item = 'left';
    }
    elseif ($post->post_author == '2') {
        $style_item = 'right';
    }
} else {
    $style_item = 'normal';
} ?>

把定義的$style_item加在DIV框架內(nèi)，以方便用CSS控制顯示。

1
< div id="page" class="wrap-<?php echo($style_item); ?>">

繼續(xù)閱讀 →