網生@誌 | zEUS.'Blog » utf-8 http://zeuscn.net Not Only Wordpress Template, But Also My Life... Tue, 03 Jan 2012 13:20:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 如何控制 WordPress 文章标题的长度（顺带测试一下超长的标题输出） http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html#comments Mon, 30 Nov 2009 16:02:44 +0000 zEUS. http://zeuscn.net/?p=724 虽然大多数时候我们不需要去管 文章标题有多长，因为一般比较长的标题会自动分为两行显示。但是有时候我们为了控制模板的样式整洁，希望文章标题只显示成一行，比如 D&Z Theme Pro CP 主题首页幻灯片右侧的“最新的一篇日志”，这里我首先使用固定长度的摘要来控制文章长度，但是如果有时候文章标题过长而显示成两行的时候，文章摘要就会出现“溢出”。这个时候如果能让标题的长度固定为一行，就能让这里的样式看起来更整洁。在好友 Lee 的帮助下，我解决了这个问题。

其实解决这个问题很简单，只需要一句话就行了。在 WordPress 里，我们使用

<?php the_title(); ?>

来输出文章标题，与其相关的还有一个函数：

<?php get_the_title(); ?>

简单的说说两者的关系，get_the_title() 返回值是一个字符串（文章标题），而 the_title() 就是该字符串通过 echo 输出后的值。
实际上就是 WordPress 自己在输出文章标题时进行了简化，直接用

<?php the_title(); ?>

代替了

<?php echo get_the_title(); ?>

除此之外这里还需要用到另外一个函数：mb_strimwidth(string str, int start, int width, [string trimmarker], [string encoding]);

mb_strimwidth() truncates string str to specified width. It returns truncated string.

If trimmarker is set, trimmarker is appended to return value.

start is start position offset. Number of characters from the beginning of string. (First character is 0)

trimmarker is string that is added to the end of string when string is truncated.

encoding is . If it is omitted, internal encoding is used.

现在大部分的 服务器都支持了 MB 库（mbstring 库 全称是 Multi-Byte String 即各种语言都有自己的编码，他们的字节数是不一样的，目前php内部的编码只支持ISO-8859-*, EUC-JP, 其他的编码的语言是没办法在 程序上正确显示的。解决的方法就是通过 的 mbstring 函数库来解决），所以我们可以放心的使用这个用于控制字符串长度的函数：

<?php echo mb_strimwidth(get_the_title(), 0, 38, '...'); ?>

那么我们只需要用上面这个函数替换 WordPress 原有的

<?php the_title(); ?>

即可，这里我输出了字符串的第0位到第38位，根据主题的不同可以自行设置该数值，另外多余长度部分使用“…”代替。

控制 WordPress 文章标题长度

控制 WordPress 文章标题长度

其实我在控制文章摘要的时候也是使用的这个函数，比如我在 D&Z Theme Pro CP 主题的首页里使用的就是

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 470,"......"); ?>

来输出470个字符长度的摘要，并过滤了 HTML 标记。

虽然这是个很简单的方法，但我相信它对主题制作者而言还是相当实用的 :-)

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html/feed 27 给博客添加 Google 自定义搜索 http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html#comments Thu, 18 Sep 2008 04:06:44 +0000 zEUS. http://zeuscn.net/?p=493 何为“ 自定义搜索”？

创建根据自己的需求量身定制的搜索引擎：包括一个网站、多个网站或特定网页；将搜索框和搜索结果放入您自己的网站；自定义颜色和品牌以搭配您现有的网页。

Google 自定义搜索结果比博客默认的搜索结果要“更快，更准，更多”，无论是给读者还是管理员都提供了相当大的便利。

看猫猫用上了 Google 自定义搜索后我才想起来自己以前也搞过一个，不过不同的是之前我是让 Google 来托管搜索结果，而猫猫现在则是把搜索结果嵌入到了博客，恩，很好很强大，于是我自个儿就折腾了一下，将 Google 自定义搜索也嵌入到了博客里。具体效果您可以自行在搜索框内输入一个关键词（如：），然后回车，就能看到 Google 自定义搜索的结果了，也可以点击 这里 查看截图效果。

下面我就简单的介绍下如何为博客添加“”功能。
访问：http://www.google.com/coop/cse/?hl=zh-CN
点击“创建自定义搜索引擎”的蓝色按钮，页面跳转之后根据页面上的要求填写各项基本信息，在最下方的“选择版本”中选择“标准版”：

Google 自定义搜索

点击“下一步”，页面跳转之后点击“完成”。然后回到 Google 自定义搜索首页，依次点击“管理您现有的搜索引擎”–“控制面板”

Google 自定义搜索

查看“基本信息”下的各个选项和“使用偏好”是否正确，点击“外观”后选择第一种无背景色的搜索框，该页面的下方可以设置“自定义搜索结果”的颜色样式，类似 Google 的广告设置，非常简单，设置成和博客相同的链接颜色即可，保存设置。
再点击“代码”，在“搜索结果托管选项”下选择“在您的网站上托管搜索结果：”–“iframe – 需要两个网页：一个网页提供搜索框，另一个提供结果”：

Google 自定义搜索

“指定搜索结果详情”选项需要填写搜索结果所在的网页地址（例如我的是 http://zeuscn.net/search）：

Google 自定义搜索

该页面的下方提供了“搜索框代码”和“搜索结果代码”，记下这2段代码，接下来修改博客模板文件。

WordPress 博客模板里一般都会包含一个 searchform. 的文件，该文件定义了博客的搜索框。我们打开这个文件，可以看到类似如下的代码：

1
2
3

<form method="get" class="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="站内搜索" name="s" class="s" onfocus="if (this.value == '站内搜索') {this.value = '';}" onblur="if (this.value == '') {this.value = '站内搜索';}"/>
<input type="submit" class="submit" value="GO" /></form>

和 Google 自定义搜索提供的“搜索框代码”进行比较：

1
2
3
4
5
6
7
8
9
10

<form action="http://zeuscn.net/search" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="012316757526287753200:595_iqfdr6q" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="搜索" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>

我将 Google 自定义搜索提供的“搜索框代码”中有，但是 searchform.php 中没有的代码添加到 searchform.php 中，然后另存为 google-searchform.php 文件，上传到主题目录下。修改后的代码如下：

1
2
3
4
5
6
7
8

<form method="get" class="searchform" action="http://zeuscn.net/search">
<input type="hidden" name="cx" value="012316757526287753200:595_iqfdr6q" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="站内搜索" name="q" class="s" onfocus="if (this.value == '站内搜索') {this.value = '';}" onblur="if (this.value == '') {this.value = '站内搜索';}"/>
<input type="submit" class="submit" name="sa" value="GO" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>

其中我去掉了 Google 提供的搜索框的样式 id=”cse-search-box” 好让搜索框的样式更符合主题的效果。不少主题的搜索框都位于页面的头部（header），那么我们打开 header.php 文件，找到如下代码：

1

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

将其修改为：

1

<?php include (TEMPLATEPATH . '/google-searchform.php'); ?>

注：此搜索框的样式可能需要略微调整样式。

接下来需要做一个“搜索结果页”，先在本地打开主题文件夹中的 page.php，在文件顶部代码的前面添加：

1
2
3
4
5

<?php
/*
Template Name: Google自定义搜索结果
*/
?>

然后找到类似如下的代码：

1
2
3

<div class="entry">
<?php the_content('Continue reading &raquo;'); ?>
</div><!--/entry -->

使用 Google 自定义搜索提供的“搜索结果代码”将其替换掉。

1
2
3
4
5
6
7
8
9

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

修改完毕，文件另存为：search_temp.php （需要是 的编码），FTP 上传至主题目录下。

进入 WordPress 后台，撰写一个新页面，命名为“搜索结果”，缩略名（slug name）为：search，页面模板选择刚刚上传的 “Google自定义搜索结果”（search_temp.php），发布该页面。
此时你会发现这个页面出现在了博客导航菜栏里，一般来说我们不需要这个页面，所以就需要将其从导航栏中“隐藏”。进入 WordPress 后台，管理–页面，找到刚刚建立的“搜索结果”，将鼠标移动上去（不要点击），看浏览器状态栏的链接地址，地址的末尾有一个数字，此数字为该页面的 ID 号，例如我的是 491：

Google 自定义搜索

打开 header.php 文件，找到如下代码

1

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

将其修改为：

1

<?php wp_list_pages('sort_column=menu_order&depth=1&exclude=491&title_li=');?>

exclude 的值就是从 wp_list_pages() 函数中去除指定的页面 ID 号。保存后回到首页，导航栏里就找不到“搜索结果”这个链接了。

大功基本告成，Google 自定义搜索的搜索框和结果页全部都嵌入到了博客里，也许还需要根据博客模板的样式稍作修改。
现在你就可以直接进行搜索来看看效果了～ 以后凡是搜索的结果都会显示在 http://yourdomain/search 这个页面上，例如我的 http://zeuscn.net/search
Google 自定义搜索 还能把你的 Google Adsense 嵌入到搜索结果中去，有兴趣的朋友不妨自己研究一下～
Have fun :-)

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html/feed 101 为什么IE浏览器查看网页源代码是乱码 http://zeuscn.net/archives/2008/08/19/notpad-do-not-support-utf8.html http://zeuscn.net/archives/2008/08/19/notpad-do-not-support-utf8.html#comments Tue, 19 Aug 2008 07:06:20 +0000 zEUS. http://zeuscn.net/?p=469 IE查看源代码中文乱码答案必然让你恍然大悟，一语道破天机：

使用 浏览器查看网页源代码时， 是直接调用的 XP 自带记事本（），问题就显而易见了，记事本是不支持 编码的！而我们做博客，做网站一般都是使用的 UTF-8 编码，这样才使得我们的中文变成了乱码。

所以各位无需担心什么 IE 查看网页源代码乱码而影响网站收录之类的谣言，这本不是 IE 的错，我们无需怪罪与它…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/08/19/notpad-do-not-support-utf8.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/08/19/notpad-do-not-support-utf8.html/feed 14