網生@誌 | zEUS.'Blog » php 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, 其他的编码的语言是没办法在 php 程序上正确显示的。解决的方法就是通过 php 的 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 使用自定义字段给 WordPress 添加日志图片 http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html#comments Mon, 24 Nov 2008 14:13:04 +0000 zEUS. http://zeuscn.net/?p=531 自定义字段是 的一个很强大的功能，但对于普通的使用者来说用处并不大…
关于如何通过自定义字段给 WordPress 博客首页中的每篇日志添加图片的方法，网上有不少介绍。我在给 www.vcbb.net 做模板时就用到了这个效果，方法是从 jinwen 的博客中（1、2、3、4）学到的，不过 jinwen 介绍的方法我在使用过程中遇到了问题，然后就对代码进行了小小的修正和修改，最终达到了自己想要的效果：

在博客首页的每一篇日志中都会显示一篇和内容相关的图片，该图片是我事先准备好的，而非日志中的缩略图，这张图片在单篇日志的内容中可以不予显示。如果我没有为日志指定一张图片，那么自动会有一张默认的图片进行“填充”。效果如下图所示：

wordpress, 自定义字段

这里分享一下我的制作经验，以及基于 jinwen 的方法并由我略做修改后的代码。
在 index. 中找到如下或类似的代码

1

<div class="post" id="post-<?php the_ID(); ?>">

在它的后面紧接一段代码：

1

<?php $image = get_post_meta($post->ID, 'index_image', true); ?>

添加之后的效果如下：

1
2

<div class="post" id="post-<?php the_ID(); ?>">
<?php $image = get_post_meta($post->ID, 'index_image', true); ?>

这其中的 index_image 这个新的变量就是我们即将在日志中用到的图片自定义字段。
继续往下，找到

1

<?php the_excerpt(); ?>

或

1

<?php the_content(); ?>

前者是输出摘要，后者是输出全文，了解 WordPress 的朋友肯定都知道，这里就不多说了。

找到这行代码后，我直接在它的前面添加如下代码：

1
2
3
4
5

<?php if ( get_post_meta($post->ID, 'index_image', true) ) { ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" title="<?php the_title(); ?>" /></a>
<?php } else {?>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/vc-default.png" title="<?php the_title(); ?>" /></a>
<?php } ?>

仔细看这段代码，这里我用了一个 if else 的条件判断语句：
第一行中，if 括号里面的条件 ‘index_image’ 如果为 true（真），也就是说，我在编辑文章时使用了这个自定义字段，那么就直接执行第二行代码：输出 index_image 这个值，index_image 的值是一张图片的绝对地址，所以我这里就直接输出了这张图片，并加上该篇日志的链接；
第三行的 else 的意思是除了第一行条件 true（真）之外（那就是假了）的话就执行第四行的代码；
第四行中我输出了一张位于主题文件夹的 images 目录下的默认的图片——vc-default.png ，同时也带上了文章的链接。

这样，必要的代码就添加完了，我们在编辑日志的时候，将页面的滚动条拉到位于页面下方的自定义字段一栏：

wordpress, 自定义字段

根据上图步骤
1、添加自定义字段名：index_image （添加过一次之后就直接能在下面的下拉菜单中选择了）；
2、添加放在首页文章里的图片绝对地址；
3、点击“添加自定义字段”的按钮。

这样，更新完日志之后就能在首页看到效果了～ 不过根据不同的博客主题，需要对这张图片进行不同的样式定义，比如 float:right 或 left ，亦或再给图片加个 border 等等，这就要看大家的想象力和喜好了。

另外在前文中提到的首页有可能是输出摘要，也有可能是全文输出，我个人的看法是：最好使用输出摘要——因为首页输出摘要时会省去文章中的图片，只保留文字内容，那么再配上这个自定义字段的图片，效果会更佳。

使用自定义字段给 WordPress 添加日志图片的方法就暂时介绍到这里，有兴趣的朋友不妨根据自己的主题模板也来折腾折腾这个效果～ 如有不清楚的地方，请在下面留言 :smile:
如果 能力强的话，完全可以根据这个功能把 WordPress 的首页，或者某个特殊页面做成“画廊”式的风格～ 以后有机会的话咱也要试试看 :cool:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html/feed 27 又见日记 http://zeuscn.net/archives/2008/10/26/diary-5.html http://zeuscn.net/archives/2008/10/26/diary-5.html#comments Sun, 26 Oct 2008 15:35:47 +0000 zEUS. http://zeuscn.net/?p=514 周末转瞬即逝，明早去公司报销上次去十堰的费用后就要踏上去荆州征途了。由于手机不能漫游，所以今天去买了一张临时用的手机卡，亲朋好友若是要找我的话请见我的 QQ 签名里的临时手机号码。

上一次去十堰做测试计划只待5天，却因为移动迟迟不开通 APN 而耗费了我10天半的时间，这次去荆州也是做同样的事情，希望荆州市的移动公司办事效率能更高一些。

最近一段时间发现自己衣橱里的衣物有一大半都不是很适合现在的我了，随着年龄的增长，省美观也渐渐发生了变化。大学时期的我一直都是以运动休闲装为主，现在工作都一年半了，有必要慢慢转型了，不过我还是不喜欢太商务的服装，I hate 西裤&皮鞋。

今天 SLL 以及她的 BF 还有 WQ 陪我出去街上逛了一圈，看了看衣裤以及手表，据我观察，今年秋冬季的休闲装较去年有近30%的涨幅，也就是去年 RMB 300+的衣裤现在都卖到了 RMB 400+，特别是一条 Lee 的牛仔裤竟然标到 RMB 1099 ！于是我开始怀疑金融危机真的来了吗？还是通货膨胀了？看到国外这些品牌衣物不可理喻的高暴利，我开始倾向于支持淘宝上的那些性价比更高的国产“作坊”了…

很早就想买手表了，但一直都很犹豫，为什么会这么犹豫呢？根本问题还是工资太少… 无论是工作，还是 ，还是 ，只能继续 Work hard 了… 进口手表暴不暴利我不清楚，我唯一知道的是关税很厉害，和汽车一样，国内进口手表的价格较之国外基本翻了一倍。中国用高关税的政策来保护民族企业，可民族企业带给国人的又是什么呢？不是我不支持国货，我只是被“三鹿奶粉”搞怕了…

出了近两周的差，回家后发现阳台上长满了辣椒… 可真把我吓了一跳，没想到辣椒的繁殖能力这么强！妈妈说种的是杭椒，咱吃的杭椒不都是绿色的吗？怎么现在不少辣椒都是红色的？而且从小都是红色的… （以下图片点击均可放大）

杭椒杭椒
杭椒杭椒

前几天看过一批很牛X的用变形金刚玩具制作的静帧动画后，真想自己也尝试一下，时间上到好说，挤一挤还是有的，但最无奈的是没有相机…可惜了这么帅的大黄蜂和擎天柱…

变形金刚,玩具变形金刚,玩具
变形金刚,玩具变形金刚,玩具
变形金刚,玩具变形金刚,玩具
变形金刚,玩具变形金刚,玩具

收工睡觉，希望明早能够顺利的报销…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/10/26/diary-5.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/10/26/diary-5.html/feed 39 分享一套入门级 SEO PPT http://zeuscn.net/archives/2008/10/09/share-a-seo-ppt.html http://zeuscn.net/archives/2008/10/09/share-a-seo-ppt.html#comments Thu, 09 Oct 2008 13:07:58 +0000 zEUS. http://zeuscn.net/?p=506 数日前这套 被我遗落到电脑桌面的某个角落，直到昨日清理桌面时才又发现了它… 似乎早就应该拿出来和大家分享了～ 虽然这套 SEO 教程介绍的内容比较简单，但涵盖面很广，很全面，喜欢捣鼓个人博客的朋友一定不要错过它！

该 PPT 的作者博客是：http://www.iwcn.net/ 和咱们玩基于 的 不同，作者应该是玩 asp.net 的高手，但相同的是大家都热爱互联网～～ SEO 对于大家来说都一样重要！

这套教程的主要内容有：

  • SEO常用术语解释
  • 如何让搜索引擎收录网站
  • SEO的目的
  • 站点自身内部的优化
  • 影响排名的外部因素
  • 常见的黑盒SEO手法
  • 参考文章及网站

下载猛击 这里

其中不少的内容我曾在我的博客中都有提到过，有兴趣的朋友不妨看看：

其实 SEO 是个很飘渺很纠结很怨念很脑残很百度很谷歌很不知所云的东东，对于个人博客而言做好一些基础工作就行了，不用花太多的功夫～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/10/09/share-a-seo-ppt.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/10/09/share-a-seo-ppt.html/feed 13 给博客添加 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 WordPress 较常用的首页文章 CMS 排版方法 http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html#comments Thu, 11 Sep 2008 14:41:23 +0000 zEUS. http://zeuscn.net/?p=486 D&Z Theme 首页一直在改版进行中，为的是推出 Pro 版本。在第一次改版时我在文章栏的上部添加了一个额外的内容模块——一个 Flash 展示窗和最新的一篇日志，下面的文章栏就依次显示除了第一篇日志外的其他日志，首页显示的总日志数还是可以在 后台设置-阅读里进行设置。这种类 的排版的方法网上有不少介绍，我也是从 Sofish 的一篇日志里学来的，虽然他介绍了方法，但我却还是尝试了很久才成功，原因是他的介绍过于简单，在这里我就做一些代码的补充。

wordpress

结合现在的 D&Z Theme 首页效果，代码和注释依次参考下文：

  1. 定义首页的第一篇文章，showposts=1 则是只显示最新的一篇文章（使用 函数来进行定义） 
    1
2
3

    <?php $my_query = new WP_Query('showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

  2. 第一篇文章的标题及内容（使用 和默认的 WordPress 标签来输出文章） 
    1
2
3
4
5
6

    <div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a></h2>
<div class="postinfo">分类: <?php the_category(' , ') ?> | <?php comments_popup_link('无人沙发', '1 条评论', '% 条评论'); ?> </div>
</div>
<div class="entry"><?php the_content('继续阅读 &raquo;'); ?></div>
<?php endwhile; ?>

  3. 调用第一篇文章结束，接下来可以放 AD 或者其它一些内容

  4. 然后首页调用后续文章部分（依然是使用 PHP 函数来进行定义）

    1
2

    <?php if (have_posts()) : while (have_posts()) : the_post();
if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

  5. 后续文章的标题及内容（还是使用 CSS 和默认的 WordPress 标签来输出文章） 
    1
2
3
4
5
6

    <div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a></h2>
<div class="postinfo">分类: <?php the_category(' , ') ?> | <?php comments_popup_link('无人沙发', '1 条评论', '% 条评论'); ?></div>
</div>
<div class="entry"><?php the_content('继续阅读 &raquo;'); ?></div>
<?php endwhile; endif; ?>

    如果你在后台设置了首页显示5篇文章，那么以上将显示除第一篇外的其余4篇

按照上述代码就能实现这种类CMS的排版方式，此时你可以向上图一样在第一篇文章的旁边放上一段 Flash 或者图片，你还可以修改后续文章的输出方式，使用

<?php the_excerpt(); ?>

代替

<?php the_content('继续阅读 &raquo;'); ?>

而让后续文章输出摘要而非全文，甚至你可以把它们都去掉只输出 H2 标签内的文章标题，再运用一些 CSS 手段让其显示得更加美观，等等等等，就要看大家的 CSS 技巧和想象力了。

这也算是一个 WordPress 的进阶使用方法，还是需要有一定 PHP HTML/CSS 基础，新手请慎用…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html/feed 108 WordPress 显示分类图片的补充 http://zeuscn.net/archives/2008/09/10/wordpress-category-icon-plus.html http://zeuscn.net/archives/2008/09/10/wordpress-category-icon-plus.html#comments Wed, 10 Sep 2008 13:02:25 +0000 zEUS. http://zeuscn.net/?p=485 Wordpress 技巧—显示分类图片 一文中我大致介绍了如何让文章所属的分类图片显示在文章旁边的方法，其调用代码借鉴自国外的 Wordpress 高手： 虽然我不是很懂 PHP ，但大致能理解上述代码的作用（理解如果有误，请指正）： 第一行调用 Wordpress 默认的分类函数并起了一个别名 $cat

阅读全文——共656字

]]> 骑车回家的路上突然冒出了个想法，回来一试还果真成功… 小有成就感 :grin:

在 WordPress 技巧—显示分类图片 一文中我大致介绍了如何让文章所属的分类图片显示在文章旁边的方法，其调用代码借鉴自国外的 高手：

1
2
3
4
5
6
7
8
9
10
11
12

<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
<span id="more-485"></span>
echo "<a href=/category/";
echo $catname;
echo "/>";
echo "<img src=http://yourdomain/wp-content/cat-icons/";
echo $catname;
echo ".jpg alt=\"$catname category \" title=\"$catname 分类 \" /></a>\n";
}
?>

虽然我不是很懂 ，但大致能理解上述代码的作用（理解如果有误，请指正）：
第一行调用 WordPress 默认的分类函数并起了一个别名 $cat
第三行将函数中的 category_nicename 分类缩略名变量赋值给 $catname
下面的几行就是输出图像链接和拼接。
看到倒数第三行中的 title=\”$catname 分类 \” ，这是输出图片的 title 属性，也就是我们鼠标移动到图片上所出现的简介文字。
由于我们使用中文分类名和英文缩略名，所以这里的 title 输出的并不是分类的名称，而是一串英文缩略名。这种效果对于中文来说这并不合适，所以我就想到何不仿造 $catname 来做个 $cattitle 以实现下图的效果呢？

wordpress, 分类图片

那么现在的问题是如何获取 WordPress 分类函数里定义分类名称的变量呢？

此时就轮到 Firefox 的著名插件 Firebug 登场了～
进入 WordPress 后台-管理-分类，使用 Firebug 查看元素属性和样式，于是我就轻而易举的得到了我想要的变量名：

wordpress, 分类图片

cat_name 这个变量即是我们的目标～ 找到对应的变量名之后，代码稍作修改即可（增加一个变量：$cattitle 和修改 title 的值：\”$cattitle\ ）：

1
2
3
4
5
6
7
8
9
10
11
12

<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
$cattitle=$cat->cat_name;
echo "<a href=/category/";
echo $catname;
echo "/>";
echo "<img src=http://yourdomain/wp-content/cat-icons/";
echo $catname;
echo ".jpg alt=\"$catname category \" title=\"$cattitle\" /></a>\n";
}
?>

Ok , that ‘s all~~ 修改完毕，这样整个效果就基本完美了

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/10/wordpress-category-icon-plus.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/09/10/wordpress-category-icon-plus.html/feed 18 WordPress 技巧—显示分类图片 http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html#comments Wed, 10 Sep 2008 06:12:06 +0000 zEUS. http://zeuscn.net/?p=483 何为分类图片？——我们的每篇日志都有自己的分类，一般来说在文章栏中我们会用文字链接来描述文章所属分类，但有时候出于美观和页面整体效果的需要我们要用不同的图片来代替各种分类。那么如何来达到这种效果呢？

其实 已经有了个叫做 Category Icons 的插件可以帮助我们在文章需要的地方显示分类图片，并且还能显示在 Feed 中，该插件还提供一些其它的功能。可惜的是插件作者主页国内无法访问，我找不到详细的使用说明文档，无奈只有放弃这款插件。

在继续搜寻互联网之后，我寻找到了另外一种同样非常有效方法——不用插件也能显示分类图片！该方法基于 Styling Posts by Category and Category-Specific Images 并修改自 Very Easy WordPress Theme Hack: Show Category Images ，下面我来谈谈我是如何在博客首页上实现这个效果的，效果如下图：

ZEUS.

  1. 准备好各个对应分类的图片，并且图片的名称需要和分类名一致！比如我有一个 “与我有关” 的文章分类，其缩略名是 “sth-about-me” ，那么我就将对应的分类图片命名为 “sth-about-me.jpg” （进入 WordPress 后台-管理-分类，即可修改分类缩略名，最好使用英文）。
  2. 使用 FTP 在你的 /wp-contant/ 目录下建立一个 cat-icons 目录，将所有分类图片上传至该目录下。
  3. 打开你的 index. 文件，在 post 容器内，即 
    1
2

    <div class="post" id="post-<?php the_ID(); ?>">
</div>

    之中的适当位置添加如下代码：

    1
2
3
4
5
6
7
8
9
10
11

    <?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
echo "<a href=/category/";
echo $catname;
echo "/>";
echo "<img src=http://yourdomain/wp-content/cat-icons/";
echo $catname;
echo ".jpg alt=\"$catname category \" title=\"$catname 分类 \" /></a>\n";
}
?>

    我想稍懂 HTML 和 PHP 的朋友应该能理解上述语句的含义，但请注意，倘若你的分类永久链接形式不是默认的： “http://yourdomain/category/分类名称/” 那么你就需要根据自己的链接形式修改第四行的 “/category/”

  4. 最后你还需要有一定的 HTML/ 的知识来将上述代码进行定位，你可以让它在 “entry 容器” 旁 float left 或者 right ，如果图片较小的话还能放到文章标题 H2 的旁边等等，这就要看大家的想象力和页面的排版方式了。

完成上述步骤后，分类图片就能自动的添加在文章旁了。有个问题还需要注意，如果你的文章不止属于一个分类，此时对应的所有分类图片都会显示，如果你的版式和我一样只想让它显示一个分类图标的话就需要用 CSS 技巧来 hiden 多余的图片了。根据不同的样式其方法也不一样，所以我也不进行说明了。

比起安装插件，这个方法要更加简洁！也更推荐大家使用～ 不过如果你对 PHP HTML/CSS 相关知识还一无所知的话，就需要慎用了…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html/feed 18 解除 XAMPP 的 Memory 大小限制 http://zeuscn.net/archives/2008/02/29/set-more-memory-size-for-xampp.html http://zeuscn.net/archives/2008/02/29/set-more-memory-size-for-xampp.html#comments Fri, 29 Feb 2008 03:25:38 +0000 zEUS. http://zeuscn.net/archives/2008/02/29/set-more-memory-size-for-xampp/ 想必不少玩 的朋友都有用 搭建本地 + 的环境用于 WordPress 主题模板和插件的测试。但是一直以来我都遇到一个问题：远程服务器上的 WordPress 后台导出的“文章、评论、分类”(XML)文件在导入到本地 WordPress 时出现下面的报错（可能是文章等内容比较多）：

Fatal error: Allowed of 33554432 bytes exhausted (tried to allocate 320160 bytes) in D:\xampp\htdocs\wp-admin\import\wordpress.php on line 125


从字面上理解应该是 memory size 的限制，前2日在 JC 的提示下终于找到解决办法（假设 XAMPP 安装在D盘根目录）：
1、打开 D:\xampp\\bin 目录；
2、找到并打开 php.ini 配置文件；
3、搜索 memory，找到如下内容：
;;;;;;;;;;;;;;;;;;;
; Resource Limits ;
;;;;;;;;;;;;;;;;;;;
max_execution_time = 60 ; Maximum execution time of each script, in seconds
max_input_time = 60 ; Maximum amount of time each script may spend parsing request data
memory_limit = 32M ; Maximum amount of memory a script may consume (16MB)
memory_limit 即是用于设定 memory size 大小的参数，将其值修改为64M或更大。另外2个参数 max_execution_time 和 max_input_time 字面理解应该是超时和导入时间的设定，也可以根据需要进行调整。最后保存；
5、回到 XAMPP 的根目录下，双击 xampp_restart.exe 重启 Apache 和 Mysql 。
That’s all. 回到 WordPress 后台，即可顺利导入XML文件了 :grin:
很 easy 吧～ 以后再也不用担心 memory size 的问题了！

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/02/29/set-more-memory-size-for-xampp.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/02/29/set-more-memory-size-for-xampp.html/feed 8