• inove主题链接两列显示方法

    之前我已经对inove主题sidebar(侧边栏)上面的链接显示做了修改,可以让链接分两列显示,但是之前用的那个方法里面用的是id,这样的话,如果sidebar想要有多个分开的链接目录(比如你的链接有3个分类),那么这样就是错误的,因为一个页面只能有一个ID(需要注意的是,我已经对inove的主题的sidebar做了比较大的修改,原来的sidebar有4个widget,我已经修改为了2个,而且链接和分类目录已经不是左右并列显示了)。

    开始想的比较简单,直接把ID改成class,然后style.css再把“#”换成“. ”就行了,不过这很快就被验证是不行的,因为原来的那个CSS里面嵌套的DIV UL比较乱,写的很不规范,那就自己动手改规范吧。

    我的sidebar显示有两个链接分类,还有一个组织活动(这个没有加到链接里面,是我在sidebar里面直接写代码的)。

    代码来了。

    <div class="widget"><!– 第一个链接目录–>
    	<h3>网址</h3>
    	<ul class="links">
    		<?php wp_list_bookmarks('title_li=&categorize=0&category=2&orderby=name&limit=20′); ?></ul>
    	<div class="fixed"></div>
    </div >
    
    <div class="widget"> <!– 第二个链接目录–>
    	<h3>友情链接(随机排序)</h3>
    	<ul class="links">
    		<?php wp_list_bookmarks('title_li=&categorize=0&category=12&orderby=rand&limit=30′); ?>
    	</ul>
    	<div class="fixed"></div>
    </div >
    
    <!–组织活动的 直接写的HTML代码 –>
    <div class="widget" id="organizations">
    	<h3>组织活动</h3>
    	<ul class="links">
    		<li><a id="wpg"href="http://www.wpg.im/" target="_blank" title="WPG中文博客群组">WPG中文博客群组</a></li>
    		<li><a id="wpg_lucky"href="http://wpg.im/lucky" target="_blank" title="左邻右舍">I feel lucky!</a></li>
    		<li><a id="chinablogs" href="http://www.chinablogs.org" target="_blank" title="中国博客联盟 汇聚天下博主,展示精彩博客!">中国博客联盟</a></li>
    	</ul>
    	<div class="fixed"></div>
    </div>
    

    P:默认的inove里面,UL标签里面是没有加那个class=”links”的,这也就是我实现两列显示的关键,所以如果你的sidebar结构跟我类似的话,那么给里面的UL加上class=”links”,然后再给CSS加上下面的代码应该就OK了。

    CSS代码我就加了一句

    .links li {float:left;width:40%}
    

    P:这里可能有朋友要问为何width不是50%了,因为我试验的时候50%达不到要求的效果,这应该是原来sidebar里面写的这句#sidebar li{padding-left:22px;}导致的。

    最后,要记得清除浮动,不然就可能导致显示效果换乱了,如果发现你的<ul>代码。。。</ul>后面没有<div class=”fiexd”></div> ,那么就加上吧。

    ————————————————————————–

    WP相关知识扫盲:

    wp_list_bookmarks() 是WP里面一个用来显示友情链接的函数,具体用法可以参考这个博友的文章 http://www.slyar.com/blog/wp-list-bookmarks.html

  • typecho按分类显示文章标题颜色实战

    今天想把我用typecho搭建的一个站的文章标题颜色按照分类来显示,也就是不同分类,文章标题的颜色就会不同,效果可以查看www.jingang.org

    刚开始想用<?php if ($this->is(‘category’,’news’)): ?> ,但是想了下,这个只是判断当前页面是不是news分类下面的,并不能达到我的要求,事实也证明我用此判断然后输出样式没有成功。

    那怎么搞呢?typecho群里的宅给我提醒了,“ 直接class=”<?php echo 分类缩略字 ?>” ”,试了下 <?php $this->category(‘,’); ?> 不行,因为那个直接就输出分类的链接了。不过答案很快就给我找到了,<?php echo $this->category; ?> 就可以了。

    下面说说具体怎么用吧,如果你想在index页面,让文章标题的颜色根据分类显示,那么就打开你的模板文件夹下的index.php文件

    <h2 class="entry_title"></h2>
    

    替换为

    <h2 class="entry_title">
    	<a href="<?php $this->permalink() ?>" class="<?php echo $this->category; ?>"><?php $this->title() ?></a>
    </h2>
    

    这样就会在index页面的每篇文章里加上class=”分类缩略名”,然后我们就可以用这个来修改css样式了

    打开你的主题文件夹下style.css文件来定义css,比如我的一个分类是news,想把分类下文章标题都变成红色的,那么添加代码

    .news{color:red;}
    

    同理,你也可以将archives.php,以及post.php等页面都照此法处理。

    ———————————注意—————————–

    据我观察,如果一篇文章属于多个分类,那么用<?php echo $this->category; ?>只能输出一个分类缩略名,暂时还没找到更好的办法。

  • typecho学习札记

    近日用typecho搭建了一个小站www.jingang.org (为何不用WP?那个VPS的内存不够大,WP是比较耗资源的,而且WP的速度不是很快,typecho在这方面是很有优势的),但是由于typecho的资料比较少,而且刚试用这个程序,很多都不懂,找了半天解决了一些小问题。

    首先是typecho的title我觉得写的不是很好,就找到了默认模板中header.php做了些修改。

    原来的title是这样的

    <title><?php $this->options->title(); ?><?php $this->archiveTitle(); ?></title>

    我把他改成这样的

    <title><?php if ($this->is(‘index’)){
    $this->options->title();
    }else{
    $this->archiveTitle(”,”,’|’);
    $this->options->title();
    }
    ?>
    </title>

    这样的效果是如果是首页就显示你的博客title,如果是其他页面就显示你的日志标题+你的博客title。

    还有一个就是对header.php中调用的那个$this->header() 做了个修改 ,$this->header()的定义在 /var/Widget/Archive.php中(开始我找了好久不知道在哪里定义的,后来在typecho坛子中羽中在回答别人的问题时提到了这个文件,激动哇)

    原来的$this->header()在header.php中加入了不少feed还有generator等信息,有的我不想要,就删除了。

  • 推动浏览器的W3C标准需要这样做吗?

    不用去点击关闭按钮,下面的是一个图片~~

     

    这个是webrebuild.org的一个活动,目的是让大家升级新版或是安装非IE浏览器,推动浏览器的W3C标准。

    我在不少博客看到过这个界面了,网页一打开,如果你的浏览器是IE6或是更低版本的,那么这个DIV直接将显示出来,不关闭都不行。

    我这里想问的是,有多少人看到这个界面后就自己去升级新版或是安装非IE浏览器,这样做真的有效果吗?我们这样做有为用户考虑过吗?

    下面是我的一些看法,也许很扯,但是我就是这样想的:

    1、我们为什么要推动浏览器的W3C标准?

    我认为有以下几个原因,老旧的浏览器(例如IE6)长久霸占浏览器的市场份额,漏洞多,安全隐患多,执行效率低下,设计师等还要为这样的早应退出的浏览器设计不符合标准的界面,为他的安全问题负责,总之,原因很多。

    2、谁能让浏览器的W3C标准顺利执行?

    我认为有三者在推动他,一个是浏览器开发商,一个是市场的作用,再一个是用户。

    浏览器开发商我认为已经做了很大的推广了,他们比我们更明白新版浏览器普及的意义。而市场作用和用户的选择在这里的关系却是非常复杂的,这两者相互联系却又相互制约,一方面当一个浏览器市场份额很大的时候,用户就会有很大的可能性就认同他,认为这个是成熟且流行的浏览器,就有可能去安装并使用他,另一方面当众多用户在使用一个浏览器的时候,这款浏览器的份额自然就会很大,市场想要改变这样的状况就会很难,而且需要花很长的时间。

    3、这个活动能推动浏览器的W3C标准吗?

    可以,但是作用我感觉不大。首先我们要知道为什么要推动浏览器的W3C标准。W3C的最终的目的是为了行业的发展及用户的使用,这个活动是从行业的角度让用户做出选择。当我看到这样一个界面的时候,我必须做出选择,要么换用其他的浏览器,要么将这个窗口关闭,而且每浏览一个页面就会弹出这样一个界面,我很烦,而且有的时候,其他的DIV会挡住关闭按钮,这时由于我不能关闭这个界面,我将不能继续浏览需要的内容。

    推动W3C标准,需要为用户考虑,用户的体验是重要的一方面,当用户不喜欢,甚至讨厌的时候,这样的推广有效吗?会不会适得其反?而且W3C标准的推动不是短时间,靠某一个组织,一个活动就能立马见效的,这同样需要市场的作用。

  • 万网域名转出到Godaddy全程记录

    前几天我已经发过两篇文章说我的域名情况了,第一篇是发牢骚,说国内域名转出很难难,文章见《我的域名,何去何从?》,第二篇是《收到万网域名转移码》。零零散散的,感觉不成样子,这里对我的转出经过简单记录下,希望对大家有用。

    1、转出遇阻

    我的域名 zenoven.com是在万网的一个代理m95.cn这里注册的(当时图便宜,对国内域名不了解,现在想想都后悔,如果直接在国外注册就不会这么麻烦了),3月14日之前我就一直在询问代理域名转出的事情,他说要交50,我很愤怒,不想交钱,因为大家都知道域名转出注册商是不应该设置障碍的,而且万网已经说过了,转出是免费的,而他却说是公司规定!垃圾!14号的时候我实在是太想转出了,就跟代理联系,交了50块,接下来却又有问题了!问题就在于我的Registrant Organization上面填的是zenoven,如果想转出的话,就要邮寄zenoven的身份证等信息给万网,这可能吗?给万网打电话,回答是一样的。代理说,还有个办法就是在线过户,这样就可以更改那个Registrant Organization,不过两年之后才能转出。- – !

    两年?天!扯淡!网上说万网这个是霸王条款,丝毫也不为过!让我说这不是霸王,是流氓!你凭什么让我两年之内不能转出?

    看来在代理及万网的这些规定下,我想要跟他们好好的说转出是不可能了,但是那50块已经交了,代理说给我续费一年吧,本来还是55的,那就续费吧。。。

    2、想霸占我的域名?没门!到ICANN投诉他!

    想起我的网名了没?Zenoven!自由人!想霸占着我的域名是不可能的,条条大路通罗马,既然这条路行不通,那就换一条,看了hugege转出万网的经历,我真为他捏了把汗,比我的难多了。。。他是向ICANN投诉,最后成功转出的,既然此路可行,那我也试一试吧。

    打开ICANN这个网址http://reports.internic.net/cgi/registrars/problem-report.cgi ,填上你域名的各项信息,然后贴上你的投诉(具体细节可以搜索 “ICANN 投诉范文”),提交之。我第一封投诉发出后没有任何回复,这个可能是当时我的域名的Registrant Email是126的,而投诉信息里我用的是gmail的,隔了有三四天吧(网上有的说投诉间隔是4-7天),我耐不住了,就又给投诉了一封。等了好几天还是没结果。

    3、拿到转移码!成功转出Godaddy!

    24号上午,正当我一筹莫展的时候,信箱里多了一封信,标题–“万网”,发件人 ***@hichina.com ,打开一看,正是我等了许久的域名转移码!这里要说的是这个转移码并不是我的管理密码,和网上很多人的说法不一样,不知道这究竟是怎么回事。

    转移码拿到了,那接下来当然就是转出了,我选择了Godaddy!具体的细节这里就不再啰嗦了,网上一大堆教程。25号的时候,又收到了一封信,还是万网的,标题为“中国万网:国际英文域名转出万网确认信”,内容为“中国万网于2010年3月25号收到有关您希望把域名zenoven.com转到其他注册商的通知。如果您希望继续进行转移,请您不必回复此信;如果您希望取消此次转移,请您在2010年3月28号之前回复此邮件,谢谢!”,既然转出,那我当然就不回复了。等待吧。

    30号,也就是今天,我算着时间应该到了(我以为昨天就能完成的,但是昨天并没有如愿以偿),网上还有网友说,Godaddy一般会在120个小时后的中午12:30给你发邮件,通知你,我当时也没注意时间,12点40多去查了下WHOIS,域名已经在Godaddy下面了,后来才收到了Godaddy发出的成功信件,标题为“Domain Transfer Confirmation”。

    至此,从14号到30号,历时17天,我的域名终于成功转出了,哈哈~~ 希望以后大家在注册域名的时候,认真选择,不要图一时便宜,为以后转出等埋下障碍。

    好事不常有,这几天又有个新闻出来,说Godaddy停止了在华域名注册业务,这个新闻好像正是我域名转出期间出来的,哎。。。真悲剧,现在又要为他的前途担忧了。。。啊啊啊。。。

  • 各种HTML标签CSS属性默认值汇总

    html, address,
    blockquote,
    body, dd, div,
    dl, dt, fieldset, form,
    frame, frameset,
    h1, h2, h3, h4,
    h5, h6, noframes,
    ol, p, ul, center,
    dir, hr, menu, pre   { display: block }
    li              { display: list-item }
    head            { display: none }
    table           { display: table }
    tr              { display: table-row }
    thead           { display: table-header-group }
    tbody           { display: table-row-group }
    tfoot           { display: table-footer-group }
    col             { display: table-column } 
    colgroup        { display: table-column-group }
    td, th          { display: table-cell; }
    caption         { display: table-caption }
    th              { font-weight: bolder; text-align: center }
    caption         { text-align: center }
    body            { margin: 8px; line-height: 1.12 }
    h1              { font-size: 2em; margin: .67em 0 }
    h2              { font-size: 1.5em; margin: .75em 0 }
    h3              { font-size: 1.17em; margin: .83em 0 }
    h4, p,
    blockquote, ul,
    fieldset, form,
    ol, dl, dir,
    menu            { margin: 1.12em 0 } 

    h5              { font-size: .83em; margin: 1.5em 0 }
    h6              { font-size: .75em; margin: 1.67em 0 }
    h1, h2, h3, h4,
    h5, h6, b,
    strong          { font-weight: bolder }
    blockquote      { margin-left: 40px; margin-right: 40px }
    i, cite, em,
    var, address    { font-style: italic }
    pre, tt, code,
    kbd, samp       { font-family: monospace }
    pre             { white-space: pre }
    button, textarea,
    input, object, 
    select          { display:inline-block; }
    big             { font-size: 1.17em }
    small, sub, sup { font-size: .83em }
    sub             { vertical-align: sub } 
    sup             { vertical-align: super }
    table           { border-spacing: 2px; }
    thead, tbody,
    tfoot           { vertical-align: middle }
    td, th          { vertical-align: inherit }
    s, strike, del  { text-decoration: line-through }
    hr              { border: 1px inset }
    ol, ul, dir,
    menu, dd        { margin-left: 40px }
    ol              { list-style-type: decimal }
    ol ul, ul ol,
    ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
    u, ins          { text-decoration: underline }
    br:before       { content: “\A” }
    :before, :after { white-space: pre-line } 

    center          { text-align: center }
    abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em }
    :link, :visited { text-decoration: underline }
    :focus          { outline: thin dotted invert }

    /* Begin bidirectionality settings (do not change) */
    BDO[DIR=”ltr”]  { direction: ltr; unicode-bidi: bidi-override }
    BDO[DIR=”rtl”]  { direction: rtl; unicode-bidi: bidi-override }

    *[DIR=”ltr”]    { direction: ltr; unicode-bidi: embed }
    *[DIR=”rtl”]    { direction: rtl; unicode-bidi: embed }

    @media print {
      h1            { page-break-before: always }
      h1, h2, h3,
      h4, h5, h6    { page-break-after: avoid }
      ul, ol, dl    { page-break-before: avoid }

    此文来源于网络

  • CSS Sprites技巧:单个图片插入多个链接

    平时我们做网页的时候会用到img标签来插入图片,再结合a标签可以给图片加上链接,但是其实单独用a标签就可以实现这样的效果,而且可以在单个图片中插入多个链接。

    本文的基本做法就是用CSS Sprites将多个图片合并为1个,用CSS中的background属性代替img标签,用background-position来实现多个图片链接的最终效果。

    例如原来3个图片链接的HTML代码如下

    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    

    现在用CSS Sprites时HTML代码为

    <a id="a"href="#">链接名称1</a>
    <a id="b"href="#">链接名称2</a>
    <a id="c"href="#">链接名称3</a>
    

    CSS代码为

    #a,#b,#c{
    	display:block;
    	width:250px;
    	margin:5px auto;
    	text-indent:-999em;
    	background:url(img.png) no-repeat;
    }
    #a{
    	height:100px;
    	background-position:0 0;
    }
    #b{
    	height:90px;
    	background-position:0 -100px;
    }
    #c{
    	height:70px;
    	background-position:0 -190px;
    }
    

    注:本例中的图片为250*260(a,b,c的高度分别为100px,90px,70px),我的小站这样做修改后的实际效果如下图,具体效果可以参看http://www.zenoven.com首页右下角处的图片链接。

    那么有朋友要问,这样做的好处是什么呢?

    1、3个图片合为1个,减少了HTTP请求数量,在图片大小没有大的变化时可以加快网页加载速度。

    2、a标签中的<img />没有了,取而代之的是链接名称,有利于SEO。

    3、DIV+CSS的一个要求是内容与表现形式的分离,这样做可以在不修改HTML的情况下直接通过修改CSS更换图片。

  • WordPress单日志添加AD及sidebar小工具的应用

    1、单日志添加AD(如Google AD)

    WordPress中single.php是单篇日志模板,如果需要在单篇日志中加入GoogleAdSense或是其他广告,这样做。

    找到你所在主题中single.php如下代码

    <?php the_content(); ?>

    在其前面加入

    <!– AD START –>
    <div style=”float:right;margin-left:5px;”>
    此处放入广告代码
    </div>
    <!– AD END –>

    这样修改后效果是广告在日志右上角显示,效果在我的日志中就可以看到。

    如果要改为左上角显示可以在<?php the_content(); ?>前面加入如下代码(这些都是DIV+CSS的应用,有基础的朋友可以根据情况自己修改)

    <!– AD START –>
    <div style=”float:left;margin-right:5px;”>
    此处放入广告代码
    </div>
    <!– AD END –>

    2、WordPress中sidebar小工具的应用

    现在大部分WordPress主题都包含了小工具(widget),本文主要介绍下WordPress中小工具的原理。

    A sidebar中只有1个widget

    (1) WordPress主题所在目录中functions.php中的如下代码是注册一个widget

    if ( function_exists(‘register_sidebar’) )
        register_sidebar(array(
            ‘before_widget’ => ‘<div id=”%1$s”>’,
            ‘after_widget’ => ‘</div>’,
            ‘before_title’ => ‘<h3>’,
            ‘after_title’ => ‘</h3>’,
        ));

    (2) sidebar中的如下代码是用来显示这些注册过的widget中的内容

    <?php if ( !function_exists(‘dynamic_sidebar’)|| !dynamic_sidebar() ) : ?>
    <?php endif; ?>

    (3)有了这些代码后我们就可以在WordPress后台的小工具中随意添加代码了。

    另外如果没有(1)中的代码,那么在后台就查看不到小工具了,此时就相当于主题不支持widget,如果没有(2)中的代码,在WordPress后台能添加widget,但是在WordPress中不能显示这些widget中的内容。

    B sidebar中有多个widget

    (1) 和只有1个widget情况类似,只是functions.php中相关代码改为如下(此例中有两个widget,名字分别为widget1 widget2)

    if( function_exists(‘register_sidebar’) ) {
     register_sidebar(array(
      ‘name’ => ‘widget1’,
      ‘before_widget’ => ‘<div id=”%1$s”>’,
      ‘after_widget’ => ‘</div>’,
      ‘before_title’ => ‘<h3>’,
      ‘after_title’ => ‘</h3>’
     ));
     register_sidebar(array(
      ‘name’ => ‘widget2’,
      ‘before_widget’ => ‘<div id=”%1$s”>’,
      ‘after_widget’ => ‘</div>’,
      ‘before_title’ => ‘<h3>’,
      ‘after_title’ => ‘</h3>’
     ));
    }

    (2) sidebar中的如下代码是显示注册过的widget1和widget2中的内容

    <?php if ( !function_exists(‘dynamic_sidebar’)|| !dynamic_sidebar(widget1) ) : ?>
    <?php endif; ?>

    <?php if ( !function_exists(‘dynamic_sidebar’)|| !dynamic_sidebar(widget2) ) : ?>
    <?php endif; ?>

    注:在以上A和B中的步骤(1)中register_sidebar的参数要因主题的不同需要做修改,用法可以参考http://codex.wordpress.org/Function_Reference/register_sidebar

第1页,共3页123