大前端D4主题bug及优化集锦

切换到了大前端D4主题,没想到还有这么多要折腾的,呵呵,都记录下来了,也形成了自己现在所用的版本,如果大家只想用我现在使用的版本,那就不必看下面的了,可以直接拿去使用,链接为大前端D4主题moper修改版下载

1、在根目录下建立avatar
使用大前端D4的时候会出现类似于如下的错误,原因是没有在根目录建立avatar文件夹。

Warning: copy(/avatar/b5bce33239d69ae1dd920fa5fb6c7b3b) [function.copy]: failed to open stream: No such file or directory in wp-content/themes/d4/inc/function-opt.php on line 526
Warning: filesize() [function.filesize]: stat failed for avatar/b5bce33239d69ae1dd920fa5fb6c7b3b in wp-content/themes/d4/inc/function-opt.php on line 528
Warning: copy(avatar/b5bce33239d69ae1dd920fa5fb6c7b3b) [function.copy]: failed to open stream: No such file or directory in wp-content/themes/d4/inc/function-opt.php on line 528
Warning: copy(avatar/b5bce33239d69ae1dd920fa5fb6c7b3b) [function.copy]: failed to open stream: No such file or directory in wp-content/themes/d4/inc/function-opt.php on line 526
Warning: filesize() [function.filesize]: stat failed for avatar/b5bce33239d69ae1dd920fa5fb6c7b3b in wp-content/themes/d4/inc/function-opt.php on line 528
Warning: copy(avatar/b5bce33239d69ae1dd920fa5fb6c7b3b) [function.copy]: failed to open stream: No such file or directory in wp-content/themes/d4/inc/function-opt.php on line 528

2、侧栏读者墙和下方文章列表显示错位

common.css中查找.sub-greater,增加overflow:hidden属性;查找.post-list,增加clear:both属性。

可能出现的问题:读者墙说明不显示,缩小的时候,侧边栏的热门标签悬挂出现

可能是因为,添加了overflow:hidden。
把common.css中的overflow:hidden属性去掉

3、有可能在页面添加友情链接单页的时候,在第一行出现错误。
修改links.php文件中的空格错误,用notepad2等工具修改文件空格模式为LF即可。

4、Math Comment Spam Protection把布局搞乱
想添加数字验证码插件,暂时未和D4主题融合,可考虑拖动插件。

5、增加首页翻页功能

修改主题的home.php文件,找到下面这段代码:



将第二行修改为下面的代码:


然后在home.php里面想要放翻页的地方加入


6、分类页右侧侧边栏不显示

网上流传的版本少了class定义,造成风格不对,以下是修正过的。
修改inc/function-opt.php文件中的分页函数,改成如下所示代码:

//分页功能
function dtheme_pagenav( $p = 4 ) {
global $wp_query, $paged;
if ( is_singular() ) return;
$max_page = $wp_query->max_num_pages;
if($max_page == 1 )echo '
'; //最新更新判断,更新2011-12-22 echo ''; } function p_link( $i, $title = '' ) { if ( $title == '' ) $title = "第 {$i} 页"; echo "{$i} "; }

7、侧边栏搜索在内页失效。

sidebar.php里面的搜索前的form改成如下。

8、不显示搜索的关键词

首先修改inc/function-opt.php文件中的面包屑导航,function dtheme_crumbs($s)带上参数,如果要加粗和红色,把

echo $tag_a.$s.' 的搜索结果';

改成:

echo $tag_a.''.$s.' 的搜索结果';

接下来修改,header.php里的

dtheme_crumbs();
改为
dtheme_crumbs($s);

9、防止内容里的代码跑出

在css/article.css中26行左右加上

.entry pre{overflow:auto;}

10、搜索按钮错位

在common.css文件里找到.btn样式,把里面的min-width宽度改成min-width:48px; 或者加上clear:both; 可解决按钮错位。
不能同时使用,本博使用了min-width:48px;

11、公告栏功能

第一步,打开主题文件common.css,找到“.crumbs-tip”将其替换为:

.crumbs-tip{overflow:hidden;position:absolute;width:400px; height:18px;top:5px;right:20px;border:#febe8f 1px solid;background-color:#fff8d9;border-radius:2px;color:#f60;padding:5px 12px}
.crumbs-tip ul{position:absolute;height:50px;}
.crumbs-tip ul li{overflow:hidden;list-style:none;float:left;width:450px;height:25px;margin-left:-5px;border-right:1px solid #ddd;}

第二步,打开主题文件function-opt.php,找到“//面包屑导航”

将如下代码:

if (get_option('d_onlytip_b') == 'Open') {
echo '
'.stripslashes(get_option('d_onlytip')).'
'; };

替换为:

if (get_option('d_onlytip_b') == 'Open') {
		echo '
  • 欢迎各位同学在本博客留言,提建议,有访必回!
  • 博客遭受评论机器人攻击,后台太卡了,只好用数据库删了所有待审评论,导致有些同学的待审评论也被删除了,在
  • 公告内容
'; };

代码中的中文即为公告内容,为了防止文章标题太长后和公告栏打架,所以公告栏宽度有所限制,公告内容最多可写45个字,编辑的时候注意要把握好字数,另外,以后公告内容就在functions-opt.php这个文件中手动输入吧,懒得集成到后台主题选项处输入了,麻烦!

第三步,也是最重要的一步了,把如下代码添加到common.js文件中:

	// 文字滚动
    (function($){
    $.fn.extend({
    Scroll:function(opt,callback){
    if(!opt) var opt={};
    var _this=this.eq(0).find("ul:first");
    var        lineH=_this.find("li:first").height(),
    line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
    speed=opt.speed?parseInt(opt.speed,10):7000, //卷动速度,数值越大,速度越慢(毫秒)
    timer=opt.timer?parseInt(opt.timer,10):7000; //滚动的时间间隔(毫秒)
    if(line==0) line=1;
    var upHeight=0-line*lineH;
    scrollUp=function(){
    _this.animate({
    marginTop:upHeight
    },speed,function(){
    for(i=1;i<=line;i++){
    _this.find("li:first").appendTo(_this);
    }
    _this.css({marginTop:0});
    });
    }
    _this.hover(function(){
    clearInterval(timerID);
    },function(){
    timerID=setInterval("scrollUp()",timer);
    }).mouseout();
    }
    })
    })(jQuery);
    $(document).ready(function(){
    $(".crumbs-tip").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间
    });

moper修改:
调用了一个微博的feed,采用的是万戈工具条的代码。
即在第二步的时候,在主题文件function-opt.php,找到“//面包屑导航”改变如下代码。

	if (get_option('d_onlytip_b') == 'Open') {
    function wgToolBar_notice( $num = 5){
        date_default_timezone_set('PRC');
        require_once (ABSPATH . WPINC . '/class-feed.php');
        $feed = new SimplePie();
        $feed->set_feed_url( 'http://t.moper.me/rss.xml' );    //RSS 地址
        $feed->set_file_class('WP_SimplePie_File');
        $feed->set_cache_duration( 6000 );    //缓存时间,600秒
        $feed->init();
        $feed->handle_content_type();
        $items = $feed->get_items( 0, $num );
        echo '
'; echo ''; echo '
'; } wgToolBar_notice( 5 ); //输出数量 };

12、关于加入微博图标等,移植自万戈
css如下:

#wgSNS li{list-style-type:none;}
#wgSNS li a{background:url(../img/sns_icon.png) no-repeat;display:block;text-indent:28px;}
#wgSNS #tb_fav{background-position:0 0;}
#wgSNS #tb_mail{background-position:0 -25px;}
#wgSNS #tb_rss{background-position:0 -50px;}
#wgSNS #tb_sohu{background-position:0 -75px;}
#wgSNS #tb_twitter{background-position:0 -100px;}
#wgSNS #tb_sina{background-position:0 -125px;}
#wgSNS #tb_net163{background-position:0 -150px;}
#wgSNS #tb_baidu{background-position:0 -175px;}
#wgSNS #tb_douban{background-position:0 -200px;}
#wgSNS #tb_facebook{background-position:0 -225px;}
#wgSNS #tb_tencent{background-position:0 -250px;}
#wgSNS #tb_digu{background-position:0 -275px;}

编辑关于页面,加入如下html

我的微博

13、大前端D4主题导航栏下拉菜单实现方法

第一步:打开后台—外观—菜单—在右侧新建菜单—首页(名字随便起),然后将左侧的页面和分类目录选中之后添加至菜单,并进行拖动
第二步只需在主题文件/css/common.css中添加如下css代码即可:

.nav li li {height:30px;float:left;}   
.nav li li a {line-height:30px !important;}   
.nav li ul {position: absolute;left: -999em;width: 150px;margin: 0;border-width: 1px 1px 0px;z-index: 999;}   
.nav  li ul li {border-top: 1px solid #484848;border-bottom: 1px solid #0C0C0C;border-right: none;border-left: none;}   
.nav  li ul li a {background: #484848;width: 100px;height:30px;color: #fff !important;  font-weight: normal;opacity: .80;filter: alpha(opacity=80); text-shadow: 0px 1px 0px #000 !important;}   
.nav li ul li a:hover {text-shadow: 0px 1px 0px #fff !important;}   
.nav  li ul li a:hover {background: #333333;color: #fff !important;text-shadow: 0px 1px 0px #000 !important;text-decoration: none;}   
.nav  li ul ul {margin: -31px 0px 0px 150px;}   
.nav  li ul ul li a {}   
.nav  li ul li ul li a {}   
.nav  li:hover,.nav  li.hover {position: static;}   
.nav  li:hover ul ul,.nav  li:hover ul ul ul,.nav  li:hover ul ul ul ul {left: -999em;}   
.nav  li:hover ul, .nav  li li:hover ul,.nav  li li li:hover ul,.nav  li li li li:hover ul {left: auto;}  

14、网站导航归档页
在网站导航里面加入了归档页,参照的是zww.me的代码。

特点:
1. 这个存档函数会在数据库生成一个表 SHe_archives_25216,用来保存在文章新发表/删除文章时生成的 html,这主要是加快访问速度,不用每次都要查询数据库生成归档。
2. 显示每月文章数
3. 显示每篇文章的评论数

说明:我另外加了jQuery滑动效果,jQ代码来自上面提到的 hzlzh,稍微修改。

下面是详细步骤

1. 把下面的 archives_list_SHe 函数代码扔进主题的 functions.php 里面 (2010.7.23 edit)

function archives_list_SHe() {
     global $wpdb,$month;
     $lastpost = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC LIMIT 1");
     $output = get_option('SHe_archives_'.$lastpost);
     if(empty($output)){
         $output = '';
         $wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE 'SHe_archives_%'");
         $q = "SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC";
         $monthresults = $wpdb->get_results($q);
         if ($monthresults) {
             foreach ($monthresults as $monthresult) {
             $thismonth    = zeroise($monthresult->month, 2);
             $thisyear    = $monthresult->year;
             $q = "SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE '$thisyear-$thismonth-%' AND post_date AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC";
             $postresults = $wpdb->get_results($q);
             if ($postresults) {
                 $text = sprintf('%s %d', $month[zeroise($monthresult->month,2)], $monthresult->year);
                 $postcount = count($postresults);
                 $output .= '
  • ' . $text . '  (' . count($postresults) . ' 篇文章)
      ' . "\n"; foreach ($postresults as $postresult) { if ($postresult->post_date != '0000-00-00 00:00:00') { $url = get_permalink($postresult->ID); $arc_title = $postresult->post_title; if ($arc_title) $text = wptexturize(strip_tags($arc_title)); else $text = $postresult->ID; $title_text = 'View this post, "' . wp_specialchars($text, 1) . '"'; $output .= '
    • ' . mysql2date('d日', $postresult->post_date) . ': ' . "$text"; $output .= ' (' . $postresult->comment_count . ')'; $output .= '
    • ' . "\n"; } } } $output .= '
' . "\n"; } update_option('SHe_archives_'.$lastpost,$output); }else{ $output = '
Sorry, no posts matched your criteria.
' . "\n"; } } echo $output; }

2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:


再然后找到类似 ,在其下面加入如下代码(2010.7.21 edit)

全部展开/收缩

进wp后台添加一新页面,在右侧栏模板选择 archives

3. 如果你的主题本身加载了 jQuery 库,那么继续把下面的 jQ 代码加上去,就会有滑动伸缩效果了(2010.7.23 edit)

/* 存档页面 jQ伸缩 */
 $('#expand_collapse,.archives-yearmonth').css({cursor:"s-resize"});
 $('#archives ul li ul.archives-monthlisting').hide();
 $('#archives ul li ul.archives-monthlisting:first').show();
 $('#archives ul li span.archives-yearmonth').click(function(){$(this).next().slideToggle('fast');return false;});
 //以下下是全局的操作
 $('#expand_collapse').toggle(
 function(){
 $('#archives ul li ul.archives-monthlisting').slideDown('fast');
 },
 function(){
 $('#archives ul li ul.archives-monthlisting').slideUp('fast');
 });

css 样式可以通过 #archive 来定义

moper修改,当时实现时好像jquery代码无法生效,后经直接查看zww的代码复制过来后生效,不知道是什么情况,大家如果出现这样的错误,可以直接查看本博的jquery代码。

以下是在网上找出的各种bug修正和优化方法,没有在moper修改版中实现。

1、ipad下css错位
没有ipad,无法测试,网上的那位朋友也没有直接给出方法,不过大家可以去看他的css。

2、主页上顶端的两个大的推荐栏,话说我一篇文章只有一个按钮怎么办?
这个代码需要修改文件inc/home-header.php.也就是在原来的按钮外面加一个判断,如果第二个按钮显示的标签设置为“non”的时候,按钮将不显示。






3、列表用ul

确的列表应该是这样的

大前端用成了

经查看,发现只有带缩略图的那些是上面的这种情况。修改后会造成css错误,暂未修改。

4、风格函数包重复

这个一般来说是没什么影响的,我那天遇到的问题是我评论了一个评论,然后就调用风格中发送邮件的函数。但是这个函数被定义了两次,所以出错。这个就只需要在函数外面加一个条件判断function_exists就行了,就能够防止重复定义了。

5、d4友情链接消失

首先进入 链接分类目录 然后将鼠标放在 你的分类目录名称上,在浏览器的左下方就会出现一个链接地址如:

http://moper.me/wp-admin/edit-tags.php?action=edit&taxonomy=link_category&tag_ID=10&post_type=post

我们看这个链接中的 tag_ID=10 我们记住这个ID号,然后在D4主题的根目录下找到Sidebar.php这个文件并打开,找到下面的代码(63行处)

将上面代码中的

category=2
改成tag_ID=10中的ID代表数字10

category=10
改好后保存,在去看看我们的友情链接是不是已经显示出来了!!!

6、大前端D4主题加图文幻灯

wordpress主题中知更鸟的HotNews pro主题很多朋友都用过,这个主题是一个非常经典的主题,其中有很多值得我们学习i的东西,Maxling.com今天把HotNews pro主题首页的图文幻灯提取出来加入到了我现在用的大前端D4主题中,顺便分享出来记录一下调用方法,说不定以后修改主题的时候用得上。

这个图文幻灯的效果大家可以在本站或去知更鸟的网站去看,幻灯是自动调用后台的5篇最新置顶文章(含文章中的第一张图片)。

注意!大家在参照本文修改之前记得先备份一下主题。(我这是以大前端D4主题为例,其他主题大同小异)

1) 下载幻灯所需的JS文件,图片和slider.php 并将下载的所需文件放到你想加幻灯的主题目录里【 slider of hotnews

2) 在主题的footer.php中添加js的调用代码

找到


在其下面加入


3) 在functions.php文件的最后一个 ?> 标志前添加如下代码

/*Catch first image (post-thumbnail fallback) */
 function catch_first_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
		$random = mt_rand(1, 22);
		echo get_bloginfo ( 'stylesheet_directory' );
		echo '/img/default-image.jpg';
  }
  return $first_img;
 }
 ;

//标题文字截断
function cut_str($src_str,$cut_length)
{
    $return_str='';
    $i=0;
    $n=0;
    $str_length=strlen($src_str);
    while (($n<$cut_length) && ($i<=$str_length))
    {
        $tmp_str=substr($src_str,$i,1);
        $ascnum=ord($tmp_str);
        if ($ascnum>=224)
        {
            $return_str=$return_str.substr($src_str,$i,3);
            $i=$i+3;
            $n=$n+2;
        }
        elseif ($ascnum>=192)
        {
            $return_str=$return_str.substr($src_str,$i,2);
            $i=$i+2;
            $n=$n+2;
        }
        elseif ($ascnum>=65 && $ascnum<=90)
        {
            $return_str=$return_str.substr($src_str,$i,1);
            $i=$i+1;
            $n=$n+2;
        }
        else
        {
            $return_str=$return_str.substr($src_str,$i,1);
            $i=$i+1;
            $n=$n+1;
        }
    }
    if ($i<$str_length)
    {
        $return_str = $return_str . '';
    }
    if (get_post_status() == 'private')
    {
        $return_str = $return_str . '(private)';
    }
    return $return_str;
}
;

小贴士:以上代码的13行中有一句 /img/default-image.jpg ,在文章没有图片时调用的默认图片,请自己制作一张名为default-image.jpg ,放置到主题下的img目录里。

4) 在common.css中添加如下CSS样式代码

/** slideshow **/
#slideshow {position:relative; background:#fff; width:672px; height:248px; padding:10px; border:1px solid #ccc;}
.slideshow {width:672px;height:248px;overflow:hidden;}
.featured_post{line-height:24px; width:670px;height:248px;overflow:hidden;}
.slider_image,.slider_image img {float: left;width:360px;height:248px;}
.slider_post {float:right;width:280px;padding-right:10px;}
.slider_post p{font-size:13px;text-indent:2em;margin-top:5px;}
#slider_nav  {position:absolute;display:block;width:200px;height:34px;z-index:999;margin:210px 0 0 210px;}
#slider_nav a {background:url(img/slider_nav.png);display:block;float:left;font-size:12px;font-weight:bold;
                  margin-right:5px;padding:0 8px 0 8px;color:#ebebeb;}
div#slider_nav a.activeSlide { color:#f99356;}
#featured_tag {background:url(img/featured.png);width:21px;height:79px;left:0px;position:absolute;top:20px;z-index:999;}
#tag_c {background:url(img/tag_c.png);width:21px;height:79px;right:0px;position:absolute;top:170px;z-index:10;}
.news {background:url(img/news.png);position:absolute;width:51px;height:51px;right:-3px;top:-3px;z-index:10;}

注:请根据你存放背景小图片的位置来修改代码中的图片路径

5) 在需要调用的地方(一般为首页index.php)添加以下代码即可


在实际调用中,你可能要修改css代码中的宽高参数,以及 slider.php文件中 标题和内容的截取字数,请自行调整。


7、加入标签云页
有这个想法,大家也可以用插件或者代码来实现,由于本博还没有那么迫切的需要,So……暂时搁置了。

8、为文章中的图片加上alt
发现读者墙头像和文章内页的图片没有alt信息。暂时没有解决。

如大家还发现了什么错误,或者有什么好的建议,可以留言一起探讨哦。

参照了以下很多人的总结,如果有未加上链接的,请留言告知,多谢大家哈~

大前端D4主题分类目录页相关问题总结
http://www.dreamxyt.net/518.html
WordPress大前端D4主题实现动态公告栏的方法
http://www.dreamxyt.net/526.html
为大前端的D4主题增加首页翻页功能
http://www.letuknowit.com/archives/daqianduan-d4-wordpress
大前端D4主题加图文幻灯
http://maxling.net/da-qian-duan-d4-zhu-ti-jia-tu-wen-huan-deng.html
大前端D4主题导航栏下拉菜单实现方法
http://www.dreamxyt.net/478.html
D4主题优化版正式放出下载
http://www.dreamxyt.net/571.html
代码实现WordPress归档页面模板
http://zww.me/archives/25209
D4主题Bug处理
http://www.hicoogle.com/bug-handling-d4-topic.html
大前端D4主题的一些bug修复
http://www.zoudongyan.com/blog/181/large-number-of-front-end-bug-fixes-d4-theme