Lucifr

分享网络、博客、软件及其它趣事

克瓜子

| Comments

与他的英勇无畏相比,我真的只是懦夫,只能以这样缩头缩脑的方式表达一份支持⋯⋯哎⋯⋯

限时免费:Wallpaper Wizard for Mac

| Comments

AppStorm 最近大搞宣传活动,继刚刚结束的 iPad 2 大抽奖之后,现在又和 Wallwiz 搞合作,限时免费提供 Wallpaper Wizard 的完整版。

Wallpaper Wizard 原价要卖 $6.99,是一个自动更换壁纸的 App,提供了超过 100000 张的高清壁纸。除了随机更换壁纸以外,还可以手动上传,或从类别中选择自己喜欢的壁纸。

具体方法如下:

  1. 先在 Mac App Store 下载 Wallpaper Wizard 的 Lite 版本, 这个精减版是免费的。
  2. 安装好后,在有网络连接的情况下启动 Wallpaper Wizard Lite。
  3. 在欢迎窗口的下方,巨大的 “Start the Magic” 蓝色按钮下面有个 “Click here to upgrade!” 链接,点击之。
  4. 在出现的窗口中输入 MACAPPSTORM,然后点击 “Upgrade”。等待其升级既可。

PS. 限时免费持续到 4 月 13 日。目前可能由于升级的人太多,好多人反映点了 Upgrade 之后显示错误,Wallwiz 的开发人员似乎正在修补。

Wordpress 的 Tumblr 化:Post Format 功能小试

| Comments

主机放在国外的一个好处就是升级 Wordpress 变得很方便,看到 Dashboard 里提示有新的 Wordpress 版本之后就随手点几下,新版本就自动装好了。这份方便也让 Lucifr 很少再去研究新版本的功能,以至于差点错过了 Wordpress 3.1 中这个很不该忽视的 Post format (文章格式) 功能。

什么是 Post format

如果接触过 Tumblr 这个“不存在”的博客服务的话,可能会更加容易理解 Post format。简单来说 Post format 就像是一种针对主题的通用类别(Category),通过 Post format 可以将文章分为几类,从而方便主题(Theme)针对不同的类别采用相应的显示风格。

有哪些 Post format

目前 Wordpress 3.1 已经支持的 Post format 分为以下几个:

  • aside
  • gallery
  • link
  • image
  • quote
  • status
  • video
  • audio
  • chat

实际上除了这些以外还有一个就是普通类型的 standard,通常可以作为传统意义上的长文章来对待,未指定 post format 的文章都被归为此类。

可以看出,和 Tumblr 类似,这些 Post format 基本上涵盖了各种文章类型,但与之前用户自定义的“类别”不同,Post format 是由 Wordpress 官方定义的,也就是说主题创作者只可以从这些分类中进行选择,并为相应的分类制作出对应的风格来。这就确保了用户在不同主题之间切换时,Post format 保持了一致性。在这一点上和 Tumblr 的理念也是一样的。

如何为主题添加 Post format 功能

由于 Post format 基本上是为主题制作者设置的,对于普通用户来说,可能为既有主题添加 Post format 功能,并达到如 Tumblr 众多精美主题的风格水准并不是件很容易的事。所以以下的内容也只是供参考,并不是详细的教程。

添加主题支持

需要在主题的 function.php 中添加 add_theme_support() 来告诉 Wordpress 主题中需要激活的 Post format 类型。如:

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

这样就开启了对 aside 和 gallery 这两种 Post format 的支持。这时在 Wordpress 后台的编辑文章页面就可以看到相应的 Post format 选项,并为文章指定相应的 Post format 了。

在主题中整合 Post format

经过上述这一步,只是添加了主题对 Post format 的支持而已,要在前台显示出不同 format 之间在风格上的区别,这才是主题制作上的重头戏,也留给了创作者很大施展的空间。

如何将不同的类型的文章展示出不同的风格呢?简单来说,就是通过条件语句加上 CSS 的控制来达到的。

目前 Lucifr 就在修改使用中的这个主题,以让其实现 Post format 功能,以 aside 类别的添加为例:

<?php if ( has_post_format( 'aside' )) { ?>
    <div class="post clearfix format-aside">
        <a class="view_post" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">Permalink for this post</a>
        <div class="aside-pointer"></div>
        <div class="aside-entry">
        <?php the_content(); ?>
        </div>
    </div>
<?php }else { ?>

在显示文章列表的 entry.php 中添加了以上的代码之后,就为 aside 创建出了一个特殊的格式,配合一些 CSS:

.aside-entry {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 1px #A0A0A0;
    padding: 12px 30px;
    color: #666666;
    font-size: 14px;
}

.aside-entry a {
    color: #3174A3;
}

.aside-pointer {
    background: url("images/aside-pointer.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 17px;
    margin: 12px 0 0 -13px;
    position: absolute;
    width: 13px;
}

就可以显示出与正常(standard)文章不同的风格:

如图所示,上方的 aside 属于简短形式的不重要的文章,所以一切从简,标题、作者、发表时间等信息都不予显示。

同理,我们也可以为其它的 Post format 创造出独特的风格来。

只要按照这样的写法就可以了:

<?php if ( has_post_format( 'aside' )) { ?>
    这里写入 aside 的格式
<?php } else if (has_post_format('gallery')) { ?>
    这里写入 gallery 的格式
<?php } else if (has_post_format('link')) { ?>
    这里写入 link 的格式
...
<?php }else { ?>
    最后是普通格式
<?php } ?>

这样的写法适合各种 Post format 之间差别很大的情况,如果是可以通过 CSS 进行调整的小修改,也可以通过活用 post_class() 函数的方式配合 CSS 来达到目的.比如:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
</div>

配合 CSS:

.format-aside .post-title {
    display:none;
}

就达到了只在 aside 类型中隐藏文章标题的作用,同理也可以调整字体、背景等等。

后记

Post format 功能是 Wordpress 向 Tumblr 的一次学习,在我看来,这反映出开发者们认识到了 Wordpress 在个人使用时还不够简单、纯粹。

目前已经有一些商用主题开始支持 Post format,相信之后个人用 Wordpress 主题会涌现出更多的 Tumblr 风格吧。

jQuery + CSS 打造一个可伸展的代码框

| Comments

长久以来,长代码的换行就一直困扰着我。有一段时间我曾经使用 SyntaxHighlighter 这个代码高亮插件,它的 v2 版本可以做到对长代码的自动换行,可效果欠佳,时常出现换行不正常的情况。

最近看到的这篇教程,介绍了如何利用 jQuery 制作一个鼠标悬停时可以自动伸展的代码框。

Lucifr 针对这个方案进行了一点点优化,主要是当代码行的长度超出了伸展后的框的长度时,会自动出现水平方向的滚动条;此外 Lucifr 研究了半天才发现在更新版的 jQuery 为了避免冲突要把其中所有的 $ 都替换成 jQuery 才行。

以下是这个方案的几个部分:

  1. 一个 js 文件,包含以下代码(Thanks to Kars for mods),可保存为 extend.js:

    (function ($) {
        $("pre:not([name='code'])").wrapInner("<span></span>");
    
    $("pre").hover(function() {
        var contentwidth = $(this).contents().width();
        var blockwidth = $(this).width();       
        if(contentwidth > blockwidth) {
            $(this).stop().animate({ width: '950px' }, 250, function(){$(this).css("overflow","auto");});
            }
        }, function() {
            $(this).stop().animate({ width: '597px' }, 250, function(){$(this).css("overflow","hidden");});
    });
    })(jQuery);
    

    以上代码中 950px 是伸展后的最大宽度,597px 是当前正文部分的宽度,可以根据实际情况自行修改。

  2. 在 </body> 标签之前载入这个 js:

    <script src="http://js所在路径/extend.js" type="text/javascript"></script>
    
  3. CSS 里对 <pre> 元素样式的一些设定:

    pre {
        overflow: hidden; 
        z-index: 999;
    }
    

OK,效果嘛,可见本文

如何解锁 Twitter for Mac 的隐藏功能

| Comments

Mac App Store 如约和大家见面了,相信不少人都是和 Lucifr 一样是第一时间把雪豹升级到 10.6.6 抢鲜体验的吧。

目前 Mac App Store 中的软件还不是很丰富,当然丰富了也可能我们都买不起。在现有的免费软件里,最让 Lucifr 欣喜的就是新的 Twitter for Mac 了,在 Tweetie 被收购成为官方版的 Twitter 客户端之后,版本几乎就没变过,现在终于随着 Mac App Store 的开张发布了新的版本。

新版本的 Twitter for Mac 在 UI 上有了很大的变化,可以说更加漂亮了。同时 Lucifr 用起来很顺手的快捷键也得到了增强。虽然也还有这样那样的不如意的地方,但相信会在之后的更新中改进吧(会吧?会吧?!一定会的!)。

就在 Twitter for Mac 发布的同时,MacHeist 公布了新版 Twitter for Mac 中隐藏的“彩蛋”,凡是购买过 MacHeist 的 nanoBundle 2 的客户都可以通过按住 Ctrl+Option+Command 点击 Help 菜单,就会显示出一个隐藏的菜单项 “MacHeist Secret Stuff”,点击它就可以弹出一个对话框,在其中输入购买 nanoBundle 2 的 email 和 license key 就可以解锁 Twitter for Mac 的一些隐藏功能了。

但对于没有购买 nanoBundle 2 的我们来说怎么办捏?难道就只能巴巴的眼馋么?

答案当然是否定的。目前已经有两个方法来激活这些隐藏的功能。Lucifr 来一一介绍下:

优化 Wordpress 永久链接结构

| Comments

Lucifr 这个基于 Wordpress 的小博客自从诞生之日起永久链接的结构就没有动过,一直是 /%year%/%monthnum%/%day%/%postname%/ 这样的/年/月/日/文章名/,现在,这一切终于要改变了……

之所以有这样的想法是基于 Lucifr 最近看到的 Wplover 去年的一篇文章,提到了 /%post_id%/%postname%/ 这种格式的几点好处