为你的WordPress打造实时更新的Opera快速拨号缩略图

Opera 快速拨号
在Opera 11.10中,快速拨号的内容的可以定制啦!!!
让我们抛弃传统的缩略图,把站点LOGO、最新文章等真正需要传达的信息显示出来!
一切由站长控制,更漂亮,更实用,更灵活!

具体的定制方法请前往Dev.Opera查看让你的网站在Opera快速拨号中发光发亮吧

在这里,我只简单介绍下对于WordPress程序如何输出可实时更新的缩略图。

在Opera 11.10中定制缩略图有3种方法:

  1. 使用<link>标签添加快速拨号图片,但是有时候会影响favicon的显示。
  2. 使用CSS中的 view-mode: minimized功能,为快速拨号输出特殊的样式表。
  3. 使用X-Purpose Header,为快速拨号项中显示一个量身定做的网页!

在这里,我们使用第三种方法,因为第三种方法,自定义程度最大,而且无需对现有网页做任何改变。

首先我们创建一个o.php文件,将以下代码复制进去(有了这5行代码,才能输出WP的数据):

<?php
    define('WP_USE_THEMES', false);
    require('wp-blog-header.php');
    query_posts('showposts=1');
?>

然后再添加以下代码输出文章标题、摘要和时间等信息:

<?php while (have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<p><span><?php the_modified_date() ?></span></p>
<?php endwhile; ?>

这样,我们的网页雏形就出来了,根据需要,我们还可以添加网站LOGO等。
根据个人需要做些修改后,我们会得带以下这份代码(以我的页面为例):

<?php
    define('WP_USE_THEMES', false);
    require('wp-blog-header.php');
    query_posts('showposts=1');
?>
<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8" />
    <meta http-equiv="preview-refresh" content="3600">
    <title>小影's Blog | 关注、分享感兴趣的事物!</title>
</head>
<body>
    <h1><img src="/wp-content/themes/piol/images/logo.png" alt=""></h1>
    <?php while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <span>Last update: <?php the_modified_date() ?></span>
    <?php endwhile; ?>
</body>
</html>

其中的<meta>标签是控制快速拨号自动刷新的频率,3600等于1小时。
接着就是用CSS的view-mode: minimized功能控制页面样式,其中最重要的是要把我们显示的内容控制在256px*160px之中。
我的方法是使用table把内容控制在页面正当中,然后固定各个元素的宽度。

@media screen and (view-mode: minimized){
    #wrapper {
        display: table;
        height: 100%;
        width: 100%;
    }
    #cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}

完整的代码就不贴出来了,有兴趣的可以打开我的o.php查看源代码。
最后编辑网站的.htaccess文件,在文件最后追加以下代码,将访问引导至o.php文件:

RewriteCond %{HTTP:X-Purpose} ^preview$
RewriteRule ^(.*) o.php

这样,一个简单的为Opera定制的WordPress缩略图页面就完工了。
对比图
好吧,我承认上面是张失败的的对比图...
因为就算不定制,Opera对我的博客也只显示LOGO区域,导致定制不定制看起来差不多=。=

不管怎么样,Opera作为创新力最强的浏览器不断的为我们带来新的功能,新的体验,期待其他浏览器也能早日实现这个功能吧! 😳

17 条评论

发表评论

*