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

WordPress / 更新于 / 17 条评论

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 条评论

发表评论