<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>網生@誌 &#124; zEUS.&#039;Blog &#187; character encoding</title>
	<atom:link href="http://zeuscn.net/index.php/archives/tag/character-encoding/feed" rel="self" type="application/rss+xml" />
	<link>http://zeuscn.net</link>
	<description>Not Only Wordpress Template, But Also My Life...</description>
	<lastBuildDate>Tue, 03 Jan 2012 13:20:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>如何控制 WordPress 文章标题的长度（顺带测试一下超长的标题输出）</title>
		<link>http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html</link>
		<comments>http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html#comments</comments>
		<pubDate>Mon, 30 Nov 2009 16:02:44 +0000</pubDate>
		<dc:creator>zEUS.</dc:creator>
				<category><![CDATA[Wordpress研究]]></category>
		<category><![CDATA[character encoding]]></category>
		<category><![CDATA[iso 8859]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[utf-8]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://zeuscn.net/?p=724</guid>
		<description><![CDATA[虽然大多数时候我们不需要去管 WordPress 文章标题有多长，因为一般比较长的标题会自动分为两行显示。但是有时候我们为了控制模板的样式整洁，希望文章标题只显示成一行，比如 D&#038;Z Theme Pro CP 主题首页幻灯片右侧的“最新的一篇日志”，这里我首先使用固定长度的摘要来控制文章长度，但是如果有时候文章标题过长而显示成两行的时候，文章摘要就会出现“溢出”。这个时候如果能让标题的长度固定为一行，就能让这里的样式看起来更整洁。在好友 Lee 的帮助下，我解决了这个问题。 其实解决这个问题很简单，只需要一句话就行了。在 WordPress 里，我们使用 &#60;?php the_title&#40;&#41;; ?&#62; 来输出文章标题，与其相关的还有一个函数： &#60;?php get_the_title&#40;&#41;; ?&#62; 简单的说说两者的关系，get_the_title() 返回值是一个字符串（文章标题），而 the_title() 就是该字符串通过 echo 输出后的值。 实际上就是 WordPress 自己在输出文章标题时进行了简化，直接用 &#60;?php the_title&#40;&#41;; ?&#62; 代替了 &#60;?php echo get_the_title&#40;&#41;; ?&#62; 除此之外这里还需要用到另外一个函数：mb_strimwidth(string str, int start, int width, [string trimmarker], [string encoding]); mb_strimwidth() truncates string str to specified width. It [...]]]></description>
			<content:encoded><![CDATA[<p>虽然大多数时候我们不需要去管 <a href="http://zeuscn.net/archives/tag/wordpress" class="st_tag internal_tag" rel="tag" title="标签 wordpress 下的日志">WordPress</a> 文章标题有多长，因为一般比较长的标题会自动分为两行显示。但是有时候我们为了控制模板的样式整洁，希望文章标题只显示成一行，比如 <a href="http://zeuscn.net/archives/2009/06/19/dz-theme-pro-cp-released.html" target="_blank">D&#038;Z Theme Pro CP</a> 主题首页幻灯片右侧的“最新的一篇日志”，这里我首先使用固定长度的摘要来控制文章长度，但是如果有时候文章标题过长而显示成两行的时候，文章摘要就会出现“溢出”。这个时候如果能让标题的长度固定为一行，就能让这里的样式看起来更整洁。在好友 Lee 的帮助下，我解决了这个问题。</p>
<p>其实解决这个问题很简单，只需要一句话就行了。在 WordPress 里，我们使用</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> get_the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>代替了</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>除此之外这里还需要用到另外一个函数：mb_strimwidth(string str, int start, int width, [string trimmarker], [string encoding]);</p>
<blockquote><p>mb_strimwidth() truncates string str to specified width. It returns truncated string. </p>
<p>If trimmarker is set, trimmarker is appended to return value. </p>
<p>start is start position offset. Number of characters from the beginning of string. (First character is 0) </p>
<p>trimmarker is string that is added to the end of string when string is truncated. </p>
<p>encoding is <a href="http://zeuscn.net/archives/tag/character-encoding" class="st_tag internal_tag" rel="tag" title="标签 character encoding 下的日志">character encoding</a>. If it is omitted, internal encoding is used. </p></blockquote>
<p>现在大部分的 <a href="http://zeuscn.net/archives/tag/php" class="st_tag internal_tag" rel="tag" title="标签 php 下的日志">PHP</a> 服务器都支持了 MB 库（mbstring 库 全称是 Multi-Byte String 即各种语言都有自己的编码，他们的字节数是不一样的，目前php内部的编码只支持ISO-8859-*, EUC-JP, <a href="http://zeuscn.net/archives/tag/utf-8" class="st_tag internal_tag" rel="tag" title="标签 utf-8 下的日志">UTF-8</a> 其他的编码的语言是没办法在 <a href="http://zeuscn.net/archives/tag/php" class="st_tag internal_tag" rel="tag" title="标签 php 下的日志">php</a> 程序上正确显示的。解决的方法就是通过 <a href="http://zeuscn.net/archives/tag/php" class="st_tag internal_tag" rel="tag" title="标签 php 下的日志">php</a> 的 mbstring 函数库来解决），所以我们可以放心的使用这个用于控制字符串长度的函数：</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #990000;">mb_strimwidth</span><span style="color: #009900;">&#40;</span>get_the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">38</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'...'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>即可，这里我输出了字符串的<strong>第0位到第38位</strong>，根据主题的不同可以自行设置该数值，另外多余长度部分使用“&#8230;”代替。</p>
<div id="attachment_725" class="wp-caption aligncenter" style="width: 310px"><a href="http://zeuscn.net/wp-content/uploads/2009/12/wp-title-width.jpg"><img src="http://zeuscn.net/wp-content/uploads/2009/12/wp-title-width-300x130.jpg" alt="控制 WordPress 文章标题长度" title="点击放大" width="300" height="130" class="size-medium wp-image-725" /></a><p class="wp-caption-text">控制 WordPress 文章标题长度</p></div>
<p>其实我在控制文章摘要的时候也是使用的这个函数，比如我在 <a href="http://zeuscn.net/archives/2009/06/19/dz-theme-pro-cp-released.html" target="_blank">D&#038;Z Theme Pro CP</a> 主题的首页里使用的就是</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #990000;">mb_strimwidth</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strip_tags</span><span style="color: #009900;">&#40;</span>apply_filters<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'the_content'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_content</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">470</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;......&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>来输出470个字符长度的摘要，并过滤了 HTML 标记。</p>
<p>虽然这是个很简单的方法，但我相信它对主题制作者而言还是相当实用的 <img src='http://zeuscn.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p align=right>zEUS.</p>
<hr /><h2>日志评论</h2><ul><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://www.life-studio.cn' rel='external nofollow' class='url'>万戈</a> writes: 一般超长，我用overflow:hidden;哈哈～
摘要截断输出用mb_strimwidth很不错，已经用到主题上了，自我升级，谢谢老大</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://www.digglife.cn' rel='external nofollow' class='url'>摩摩诘</a> writes: Z兄的技术贴写得都很通俗易懂。</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://louishan.com/' rel='external nofollow' class='url'>Louis Han</a> writes: 如果题目中有英文或者符号，会不会被截断？</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: 它不考虑字符串里是中文还是英文还是符号，全部都可以截断</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: 呵呵，我觉得我比较啰嗦，想极力说得更明白 :-)</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: overflow:hidden 会把文字掐断，不是太美观，不过我以前也是用这个，呵呵</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://dogorgod.com/' rel='external nofollow' class='url'>Timer</a> writes: 实用！很久没看兄弟的技术型文章了，激动</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://www.mozin.org' rel='external nofollow' class='url'>默默</a> writes: 非常好，最近正好遇到了标题超长导致显示不正常的问题，非常感谢！</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 1日</a>, <a href='http://www.dgdxbxg.com/bb' rel='external nofollow' class='url'>大兴</a> writes: 实用，知识下！</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 2日</a>, <a href='http://wyshuo.com' rel='external nofollow' class='url'>星网</a> writes: ......我需不需要？问题是我还是不会~~~</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 2日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: 基本上需要... 照着步骤做吧，其实很简单的...</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 2日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: 呵呵，不客气 :-)</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 2日</a>, <a href='http://blogmars.com/' rel='external nofollow' class='url'>Mars</a> writes: 不错，学习了，不过，如果作者能在写的时候，就精简下标题，会更好。</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 7日</a>, <a href='http://www.jutoy.net' rel='external nofollow' class='url'>Jutoy</a> writes: 一般情况下用不到这么长的标题，哈哈……</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 8日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: 有时候 CMS 主题需要这种方法 :-)</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 19日</a>, <a href='http://interjc.net' rel='external nofollow' class='url'>interjc</a> writes: http://codex.wordpress.org/Function_Reference/wp_trim_excerpt</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2009年, 十二月 27日</a>, <a href='http://www.180life.cn/archives/73.html' rel='external nofollow' class='url'>如何控制 WordPress 文章标题的长度 | 180度生活</a> writes: [...] | zEUS.’Blog » 如何控制 WordPress 文章标题的长度（顺带测试一下超长的标题输出）&#8221; /&gt;     Trackback URL | Say [...]</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2010年, 一月 3日</a>, <a href='http://%/spzasibsk' rel='external nofollow' class='url'>Shadow</a> writes: <strong><a href="http://z7k.cinemajokes.ru" rel="nofollow"> </a><a href="http://qh3.cinemajokes.ru" rel="nofollow"></a><a href="http://g5d.cinemajokes.ru" rel="nofollow"> </a><a href="http://qs4.cinemajokes.ru" rel="nofollow"> </a>...</strong>

Норм<b><a href="http://g7k.cinemajokes.ru" rel="nofollow"> </a><a href="http://qa3.cinemajokes.ru" rel="nofollow"> </a><a href="http://aad.cinemajokes.ru" rel="nofollow"> </a><a href="http://fs4.cinemajokes.ru" rel="nofollow"> </a>...</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2010年, 二月 8日</a>, <a href='http://www.jfond.com' rel='external nofollow' class='url'>像风一样自由</a> writes: 学习了，很强大</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2010年, 二月 25日</a>, <a href='http://www.jfond.com' rel='external nofollow' class='url'>像风一样自由</a> writes: Q群不让加？

请教博主，侧边栏最新日志的标题截断该如何做呢？
期待解答</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2010年, 三月 19日</a>, <a href='http://www.linuxhobby.com' rel='external nofollow' class='url'>麦叔</a> writes: 这个可以用CSS来实现吧!</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2011年, 二月 19日</a>, <a href='http://www.22frame.com/blog' rel='external nofollow' class='url'>22frame</a> writes: 侧边栏的标题可以设置截断吗?</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2011年, 二月 19日</a>, <a href='http://zeuscn.net/' rel='external nofollow' class='url'>zEUS.</a> writes: 可以的，原理类似，但是具体要看输出什么内容了，最新文章？随机文章？
最新留言的截断效果可以参见我的侧栏。</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2011年, 二月 25日</a>, <a href='http://www.52digital.com' rel='external nofollow' class='url'>明月登楼</a> writes: 哈哈，不错，谢谢了，这个方法最科学了！</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2011年, 六月 13日</a>, bpm100 writes: 加到什么地方呢？</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2011年, 七月 10日</a>, 星仔 writes: 謝謝啦，研究很久了</li><li><a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">2012年, 一月 18日</a>, <a href='http://www.swannwoodwork.com/' rel='external nofollow' class='url'>thanksgiving crafts for preschoolers and toddlers</a> writes: <strong>Super Website...</strong>

[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]...</li></ul><hr /><p>本文地址：<a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html">http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html</a>，转载原创文章请注明 <a href="http://zeuscn.net/">zEUScn.NET</a> ‖
      您可以直接 <a href="http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html#comments"title="to the comments">发布评论</a>
      </p>
    <p>Copyright©<a href="%%blogurl%%">zEUScn.NET</a>.Some rights reserved.</p>
(Digital Fingerprint:<br /> 05538bd2e0492fe803256b5788cfa6fd)
	<ul class="st-related-posts">
	<li><a href="http://zeuscn.net/archives/2010/02/03/ipple-lite-v2-will-release.html" title="Ipple Lite V2 即将发布 (2010年, 二月 3日)">Ipple Lite V2 即将发布</a> (135)</li>
	<li><a href="http://zeuscn.net/archives/2011/08/09/windows2003-iis6-wordpress-and-discuz-static-permalink.html" title="Windows2003 IIS6.0 下 WordPress 和 DiscuzX2 的伪静态实现方法 (2011年, 八月 9日)">Windows2003 IIS6.0 下 WordPress 和 DiscuzX2 的伪静态实现方法</a> (102)</li>
	<li><a href="http://zeuscn.net/archives/2009/11/08/ajax-load-for-dztheme-pro.html" title="给博客首页增加了一个 Ajax 效果 (2009年, 十一月 8日)">给博客首页增加了一个 Ajax 效果</a> (26)</li>
	<li><a href="http://zeuscn.net/archives/2011/07/31/new-404-not-found-page.html" title="新 404 Not Found 页面上线 (2011年, 七月 31日)">新 404 Not Found 页面上线</a> (1)</li>
	<li><a href="http://zeuscn.net/archives/2007/12/16/wow-theme-update.html" title="WOW Theme 更新 (2007年, 十二月 16日)">WOW Theme 更新</a> (1)</li>
	<li><a href="http://zeuscn.net/archives/2007/09/02/messageboard-for-wordpress.html" title="2步创建留言本 (2007年, 九月 2日)">2步创建留言本</a> (36)</li>
	<li><a href="http://zeuscn.net/archives/2010/02/09/ipple-lite-v2-test.html" title="Ipple Lite V2 小范围测试 (2010年, 二月 9日)">Ipple Lite V2 小范围测试</a> (28)</li>
	<li><a href="http://zeuscn.net/archives/2007/04/03/fh-freedom-blue.html" title="wordpress模板 FH Freedom blue 0.2 (2007年, 四月 3日)">wordpress模板 FH Freedom blue 0.2</a> (10)</li>
	<li><a href="http://zeuscn.net/archives/2008/01/01/ready-to-work.html" title="Ready to Work.. (2008年, 一月 1日)">Ready to Work..</a> (68)</li>
	<li><a href="http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html" title="针对 WordPress 模板导航栏2级悬浮菜单的一个很好的解决方案 (2008年, 十二月 18日)">针对 WordPress 模板导航栏2级悬浮菜单的一个很好的解决方案</a> (22)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html/feed</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
	</channel>
</rss>

