利用WordPress自定义字段为日记型博客添上天气和心情图标

利用WordPress自定义字段为日记型博客添上天气和心情图标

相信很多人使用WordPress作为网上的个人日记本,那么还记得现实生活中日记本子上的心情和天气一栏么?怎么样,和我一起把它搬到WordPress吧!

首先初步了解一下什么是"自定义字段"?

自定义字段是日志或页面的一部分,通过使用自定义字段,我们可以为日志或页面添加一些类似日期、分类的额外的meta信息。详细>>

接下来我们就开始用"自定义字段"完善日记型Blog吧。

首先我们需要在FTP里上传你需要显示的图标文件。

例如以下的文件结构:

  • http://yourwebsite/weather/rain.png
  • http://yourwebsite/weather/sun.png
  • http://yourwebsite/weather/cloudy.png
  • http://yourwebsite/weather/snow.png
  • ...
  • http://yourwebsite/mood/happy.png
  • http://yourwebsite/mood/unhappy.png
  • http://yourwebsite/mood/smile.png
  • http://yourwebsite/mood/evilgrin.png
  • ...

然后就是在日志页里添加自定义字段,我们以添加"天气(weather)"的自定义字段为例,看图继续:

利用WordPress自定义字段为日记型博客添上天气和心情图标

1. 在日志撰写页面找到自定义字段(Custom Fields)。

2. 点击"新增"。

3. 名称(Key)填写"weather"。

利用WordPress自定义字段为日记型博客添上天气和心情图标

4. 值(Value)填入"rain"。

当然,除了rain,你还可以填入sun、snow、cloudy等,但是必须是你的FTP里存在的文件名称

5. 点击"添加自定义字段"。

利用WordPress自定义字段为日记型博客添上天气和心情图标

6. 按照2-5再添加"心情(mood)"部分。

7. 以后撰写日志时,直接在下拉列表中选取并填入值即可!

利用WordPress自定义字段为日记型博客添上天气和心情图标

最后就是在WordPress的主题文件里添加相应的代码了。我们需要修改的是主页面模板(index.php)和单篇日志页(single.php)。

分别在这两个页面中你想显示图标的地方(例如:日志分类和时间的附近)插入以下代码:

心情:<img src="http://yourwebsite/mood/<?php echo get_post_meta($post->ID, "mood", $single = true); ?>.png" alt="<?php echo get_post_meta($post->ID, "mood", true); ?>" /> 天气:<img src="http://yourwebsite/weather/<?php echo get_post_meta($post->ID, "weather", $single = true); ?>.png" alt="<?php echo get_post_meta($post->ID, "weather", true); ?>" />

其中"mood"就是你填在"自定义字段 - 名称"里的内容,通过这段代码我们可以获取名称所对应的值,例如上面所填入的"rain",从而得到图片文件地址"http://yourwebsite/mood/rain.png"。

好了,教程至此,去主页看看效果吧!O(∩_∩)O哈哈~

WordPress作为全球最棒的的Blog程序,还有许多值得我们学习~

心情/天气 16px图标

我收集的一些16px的心情/天气图标,点击下载

12 条评论

发表评论

*