分类目录归档：WordPress

WordPress主题的jQuery应用之标题提示

由 发表于 ┊1,955 PV

首先在header.php的head标签中加载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标签中加载，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 为透明度可自行根据喜好调整数字
                    "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; }

如果你还用了@回复这样的jQuery提示效果的话会被标题提示遮掉，可以参照下面解决：
代码中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”来排除class为atreply的a标签，或者用tipElements : “a:not([href^=’#’])”来排除href为锚点的a标签

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

自定义 WordPress 后台用户联系方式

由 发表于 ┊2,545 PV

在 WordPress 后台，个人设置（Profile）中，除了可以设置电子邮件和 Website 之外，还可以设置自己的联系方式，比如 AIM, Yahoo IM, Jabber/Google Talk。但是除了 Gtalk 之外，其他两个中国人基本不用，那么如何去掉我们基本不用的 AIM 和 Yahoo IM，并加上国人常用的 QQ, MSN 和飞信呢？

其实在 WordPress 中实现这样的功能是非常容易的，只需要调用下 custom_contactmethods 这个 WordPress Filter 既可以实现在后台支持常用的 QQ, MSN 和飞信等联系方式，代码如下：

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: 自定义博客的联系方式，从 WordPress 默认的 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 插件目录，然后激活即可。如果你需要加入其他联系方式，只需要按照同样的方式在上面数组中添加即可，这里就不一一详细介绍。

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

江阴印刷网新版风格

由 发表于 ┊11,004 PV

其实江阴印刷网换上新风格有一段时间了，只是首页的JS幻灯片一直没有完成。今天总算找到了一个，换上了。

风格仿的是Discuz的Supesite的默认风格，支持二级分类，后台自定义MEAT，广告，统计代码等。

主题要改的地方是index.php文件的array(1,3,4,5,6,7)，把里面的数字改成你想显示的分类ID号，幻灯片是自动读取文章中的图片，演示中最下面的最新图片是用advanced-post-image做的(注意：这个插件要求在你的uploads目录下建立thumb目录及写入权限)

下载：CMS THEME NO.1
截图
jyprint

在用的WP风格

由 发表于 ┊2,870 PV

没什么技术含量的，都是东抄西借，想名字也麻烦，就直接用缩写命名了(Blog Theme No. 1)，主题侧栏支持 WordPress 自带的 Widgets 功能。
后台可自定义关键，Meta，可选显示页面或分类，可用Google自定义搜索，带公告栏（在博客首页的文章区域上方显示），自主义侧栏RSS订阅地址，可选显示广告，可选显示备案和统计。

btn1

下载：btn1

为你的博客加上简易留言薄功能

由 发表于 ┊2,057 PV

看到好多WP友人，都在问如何实现WordPress的留言薄功能，下面我就用default主题为博客添加留言薄功能。
1. 复制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。

就这样，一个简单的留言薄就完成了，如果你用的是其它主题，请复制你相应的主题下面的文件。

如果你还想区别和文章不一样的留言文件，可以再复制comments.php为guestcomments.php
把gbook.php的这句代码

1
<?php comments_template(); ?>

改为

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

我觉得用一样的也蛮好的，这个看个人爱好。

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

由 发表于 ┊4,298 PV

这个网站的布局很特别，首页是三栏，左右不同的颜色，文章页根据不同的作者显示不同的颜色，页面又是一种风格。

1. 首先区分页面，首页，作者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框架内，以方便用CSS控制显示。

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

继续阅读 →