阿德日志 » wordpress http://blog.delai.me 我的自留地 Thu, 29 Dec 2011 03:33:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录 http://blog.delai.me/2009/03/flickrrss-50.html http://blog.delai.me/2009/03/flickrrss-50.html#comments Wed, 25 Mar 2009 15:28:31 +0000 阿德 http://blog.shidelai.cn/?p=794 因为wordpress更新的原因，flickrRSS也相应做了更新，改变了函数参数的编写方式，并加入了更易于配置的html参数。总之，更强大了，使用也更复制了。

我在flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片中提到的在文章后面显示与文章内容相关的flickr图片的功能如果不加以修改是不能使用的。拖了好几个星期，今天因为改了域名（www.shidelai.cn），所以想有个好的开始，把新的代码搞出来了，和原来的效果一样，接近完美。你可以根据我的代码加以修改成自己的代码，比如如果你的页面比较窄，那么可以把’num_items’ => 8修改为’num_items’ => 5等等。

具体方法如下：

将flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片

<?php get_(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>

修改为：

<?php get_flickrRSS(array(‘num_items’ => 8, ‘type’ => ‘public’, ‘tags’ => “$first_tag”, ‘html’ => ‘&nbsp;<a href=”%_page%” title=”%title%”><img src=”%image_square%” alt=”%title%”/></a>&nbsp;’)); ?>

就OK了。

参数解释：

The Parameters

‘type’ => ‘user’ – The type of Flickr images that you want to show. Possible values: ‘user’, ‘favorite’, ‘set’, ‘group’, ‘public’

‘tags’ => ” – Optional: Can be used with type = ‘user’ or ‘public’, comma separated

‘set’ => ” – Optional: To be used with type = ‘set’

‘id’ => ” – Optional: Your Group or User ID. To be used with type = ‘user’ or ‘group’

‘do_cache’ => false – Enable the image cache

‘cache_sizes’ => array(‘square’) – What are the image sizes we want to cache locally? Possible values: ‘square’, ‘thumbnail’, ‘small’, ‘medium’ or ‘large’

‘cache_path’ => ” – Where the images are saved (server path)

‘cache_uri’ => ” – The URI associated to the cache path (web address)

Presentational params

‘num_items’ => 4 – The number of images that you want to display

‘before_list’ => ‘‘ – The HTML to print before the list of images

‘html’ => ‘<a href=”%flickr_page%” title=”%title%”><img src=”%image_square%” alt=”%title%”/></a>’ – the code to print out for each image.

Meta tags available: %flickr_page%, %title%, %image_small%, %image_square%, %image_thumbnail%, %image_medium%, %image_large%

‘default_title’ => “Untitled Flickr photo” – the default title

‘after_list’ => ‘‘ – the HTML to print after the list of images

Examples

<?php get_flickrRSS(array(‘num_items’ => 4, ’type’ => ‘public’, ’tags’ => ‘sunflowers’)); ?> – This will display four photos from the public stream that are tagged with sunflowers

<?php get_flickrRSS(array(‘set’ => ’1234567890′, ’num_items’ => 6, ’type’ => ‘set’)); ?> – This will display six photos from a specified set

另外可以参考下本站的源码

Comments

  • 2009-04-2, 盒子 writes: 先留言 再接着看
  • 2009-04-9, 淘宝网店 writes: 先支持下，慢慢学习~！~
  • 2009-04-17, pc412 writes: 可不可以给个5.0的源文件？弄了半天都没效果 =（
  • 2009-04-17, 阿德 writes: 放到文章后面了,右键另存为就可以了
  • 2009-04-18, pc412 writes: 谢谢。。不过你有MSN吗？有些问题想问你 =）
  • 2009-04-18, pc412 writes: pc412_7@hotmail.com 这是我的～
  • 2009-05-2, 阿德 writes: 俺比较低端，都没用MSN。。。 我去下一个再加你。。， 不好意思回得有点晚
  • 2010-03-22, Eureka writes: 你好 我用了flickrRSS后一行只能显示一张图片 怎么才能想你的边栏一样一行显示3张？谢谢！
  • 2010-03-23, 阿德 writes: 是不是本来就只有4张照片呀？
  • 2010-03-23, Eureka writes: 请看一下www.eureka321.com 我设置显示六张照片 但只能单列显示 我希望一行能显示三张
  • 2010-03-25, 阿德 writes: 我右边栏上面8张照片也是单列显示的，是不是用widget显示这些照片的啊？ 下面6张照片分两行，每行3张是将flickrRSS的代码放到siderbar.php里才达到的效果。
  • 2010-03-25, Eureka writes: 哦 原来如此 谢谢谢谢

Related posts:

[原文链接：http://blog.delai.me/2009/03/flickrrss-50.html] ]]> http://blog.delai.me/2009/03/flickrrss-50.html/feed 12 不同浏览器里图片大小不同的解决方法 http://blog.delai.me/2008/12/photo-css-max.html http://blog.delai.me/2008/12/photo-css-max.html#comments Tue, 23 Dec 2008 14:39:43 +0000 阿德 http://www.soulward.cn/?p=630 不同浏览器里图片大小不同的解决方法

我之前写过flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片，后来发现一个问题：原本图片大小这个参数选择square的话，显示的应该是几张75×75的图片，这在firefox里面一直是正常的，但IE里面就不是这样了，很多图片会被放大，影响总体效果。

前些天偶尔翻CSS手册，看到max-height属性，心想这正好可以解决这个问题。解决方法如下：

修改css文件添加如下代码：

#related-pic img {
max-height:75px;
max-width:75px;
width: expression( this.width> 75 ? “75px” : (this.width+”px”) );
height: expression( this.height> 75 ? “75px” : (this.height+”px”) );
}

意思就是说，在id为related-pic的容器里面，(img)的最大宽度和长度是75px，如果发现宽度或长度大于75的，就改成75，如果小于75的就大小不变。

然后在single.php中出现75×75的图片的地方用id为related-pic的容器括进去就可以了：

<b>[相关图片]</b><br />
<div id=”related-pic”>
<?php get_(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

这样，IE的显示就正常了。你当然也可以把上面这段CSS代码这届嵌入到HTML代码里面，如:

<div style=”css code”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

类似的， 你也可以设定文章内容中图片的最大宽度，以免不小心用了太大的图，把页面撑得面目全非。

Comments

  • 2009-01-18, aibenwu writes: 博主你好，我想问您一下。我在Google Blogger 开的博客。在Chrome,火狐显示图片是正常的。但是在IE，傲游上显示的图片间隔变小，而挤在一起。让我很困扰。请问博主应该怎么解决这个问题呢？谢谢
  • 2009-01-20, 阿德 writes: Blogger我没用过，如果能编辑HTML的话，你在图片之间加入代表空格的HTML代码，   貌似也只能这样了， 或者在HTML里面嵌入CSS代码，如我我文中最后一个例子

Related posts:

[原文链接：http://blog.delai.me/2008/12/photo-css-max.html] ]]> http://blog.delai.me/2008/12/photo-css-max.html/feed 2 WordPress运行原理学习笔记之二：插件机制初探 http://blog.delai.me/2008/07/plugins.html http://blog.delai.me/2008/07/plugins.html#comments Tue, 15 Jul 2008 12:18:21 +0000 阿德 http://www.soulward.cn/?p=234 WordPress运行原理学习笔记之一：主题机制初探

WordPress运行原理学习笔记之二：插件机制初探

WordPress的插件机制使得开发者可以方便地向系统添加自己需要的功能，而这是使得Wordpress得以在全世界流行的重要原因。一个 WordPress插件是一个程序,或者是用PHP脚本语言写出的一个或一些函数的集合，用来往WordPress Webblog 里增加一些特定的特征和服务，它们可以通过WordPress的 Plugin Application Program Interface (API) 提供的接入点和函数无缝的集成到Webblog里.

插件机制的实现主要依靠wp-includes目录下的plugin.php文件，该文件中包含了与插件机制相关的几个函数。在 wordpress内核运行时设立了一些标记(tag)，当遇到这些标记时，wordpess会自动调用挂载到 (hook to)这个标记上的所有函数，该功能是通过数组来实现的，其过程可以直观的表示为下图：

插件hook原理

用户可以通过plugin API方便的将自定义的功能添加到系统相应的位置。需要指出的是：wordpress定义了两种类型的插件API，行为(actions)和过滤器 (filters)：

Actions: Actions are the hooks that the core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

Actions 是由WordPress内核在执行过程中的特定的点或者特定的事件发生时调用的. 使用这些Action API,你的plugin可以指定在这些点去执行一个或者多个PHP函数.

Filters: Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

Filters是一种hooks,由WordPress调用,针对于各种形式的文本,让它们在进入数据或发送到浏览器之前得到调整. 使用Filter API,你的插件可以指定在某个时间执行一个或者多个PHP函数来修改特定类型的文本.

一、一个最简单的插件的开发过程

下面以阿德弄的一个a_simple_song插件(其实跟自带的那个插件是一样的，只是修改了歌词而已)为例简述整个过程三个步骤：编写插件要执行的代码，添加add_action()，进入后台激活它。
该插件的功能是：在WordPress后台左上角随机显示《一首简单的歌》这首歌的歌词。
1．在wordpress目录/wp-content/plugins/下新建一个文件：a_simple_song。
2．用文本编辑工具打开它，输入<?php    ?>，接下来的工作就是在这里面填写相应PHP代码。
3．首先按一定的格式编写本插件的一些信息，WordPress读取它用于在后台显示，方便用户查看：

/*
Plugin Name: 一首简单的歌
Plugin URI: http://blog.shidelai.cn/#
Description: 这个插件会在后台随机显示《一首简单的歌》的歌词。
Author: 施德来
Version: 1.0
Author URI: http://blog.shidelai.cn
*/

4．编写要执行的操作：
$lyrics = “一首简单的歌    //定义了一个字符串数组用于存储歌词
这世界很复杂
………
你是我最珍贵的财富”;
$lyrics = explode(“\n”, $lyrics);
//explode()是PHP内置函数，功能就是分割字符串成字符数组
$chosen = wptexturize( $lyrics[ mt_rand(0, count($lyrics) - 1) ] );
/*
给chosen赋一条随机的歌词
wptexturize()在wp-includes\functions-formatting.php定义，功能：把某些特殊符号给自动转换化成标准码格式。
mt_rand()函数返回它2个参数之间的随机值
count()返回数组大小
*/
function a_simple_song() {
global $chosen;
echo “<p id=’dolly’>$chosen</p>”;
}
//dolly样式表由后面定义。
//显示歌词
5．添加add_action()，将a_simple_song函数hook到main_foot tag的队列中
add_action(‘admin_footer’, ‘a_simple_song’);
//admin_footer.php被调用时执行这个函数
add_action(‘admin_head’, ‘dolly_css’);
//admin_head.php被调用时执行dolly_css()
具体经过请参考下面的从源码解读a_simple_song插件的调用过程。

这样，保存为.php文件方到plugins文件夹下面，再到后台激活就可以了。效果如图

二、WordPress对所有可用的插件的读取

在文件/wordpress/wp-admin/plugins.php中，函数
<?php function get_plugins() ?>
用来从文件系统得到所有的插件。原理很简单，就是读取’wp-content/plugins’目录下的所有PHP文件。这个函数允许一级的子文件夹，也就是说在’wp-content/plugins’下面的PHP文件，以及所以在此目录下的一级子文件夹内部的PHP文件被列作插件的候选，用下面的函数去进一步提取插件信息。这样的好处是方便用户利用文件夹来对插件进行管理和组织。

foreach($plugins as $plugin_file => $plugin_data) {
…..
$plugin_data['Title']       = wp_kses($plugin_data['Title'], $plugins_allowedtags);
$plugin_data['Version']     = wp_kses($plugin_data['Version'], $plugins_allowedtags);
$plugin_data['Description'] = wp_kses($plugin_data['Description'], $plugins_allowedtags);
$plugin_data['Author']      = wp_kses($plugin_data['Author'], $plugins_allowedtags);
$author = ( empty($plugin_data['Author']) ) ? ” :  ‘ <cite>’ . sprintf( __(‘By %s’), $plugin_data['Author'] ) . ‘.</cite>’;
….
}

用于从插件的头部注释中获取插件的版本、名称、作者，等信息。

三、Active & Deactive Plugin（插件的激活与注销）

Active（Deactive）插件的操作都在Plugins.php中，比如我要ple_Deactive “a_simsong”这个插件，最后的URL其实是这个样子：

http://localhost/wordpress/wp-admin/plugins.php?action=deactivate&plugin=a_simple_song.php&_wpnonce=242c8cc3e5

其中，”Action”表示动作，值为”active”或者”deactivate”，而”Plugin”表示动作的对象插件，此处为”a_simple_song.php”。得到动作指令后，首先从数据库中取出当前已经激活的插件。

$active = get_option(‘active_plugins’);

然后根据动作，重新生成已激活插件数组，和theme一样存入数据库，并重新加载此页。加载的时候就需要考虑这些已经激活的插件是怎么工作的了。

四、插件的加载过程

WordPress中的每页都会包含”wp-config.php”文件，而在”wp-config.php”的最后有这样一句：

<?php require_once(ABSPATH.’wp-settings.php’); ?>

在”wp-settings.php”文件中，可以找到以下与插件相关的代码片断：

if ( get_option(‘active_plugins’) ) {
$current_plugins = get_option(‘active_plugins’);
if ( is_array($current_plugins) ) {
foreach ($current_plugins as $plugin) {
if (” != $plugin && file_exists(ABSPATH . PLUGINDIR . ‘/’ . $plugin))
include_once(ABSPATH . PLUGINDIR . ‘/’ . $plugin);
}
}
}

可见，这段代码会取出系统中所有Actived的插件，并Include进来。所以在每页加载的时候，都会首先Include这些插件代码。这也就是为什么在主题模板里面可以直接调用插件的函数。

五、WordPress通过插件机制注册系统事件

WordPress中的很多功能也都是通过这种插件结构来实现的，WordPress默认注册的系统事件保存在default-filter.php中。比如：
<?php add_filter(‘the_content’, ‘convert_smilies’); ?>
用来将正文（content）中的笑脸符号转换为图像。
add_filter(‘comment_text’, ‘wptexturize’);
用来将从数据库提取的正文中的特殊符号转化成标准格式的。

六、从源码解读a_simple_song插件的调用过程

在每一个wordpress/wp-admin/下面的文件（也就是后台显示需要的文件）的前面都有

<?php require_once(‘admin-header.php’); ?>

而在”admin-head.php”中将会执行扩展点”admin_head”的所有扩展：

<?php  do_action(‘admin_head’, ”); ?>

这样，就会执行所有hook到admin_head上的函数
Admin Page的Footer部分同样如此，

<?php do_action(‘admin_footer’, ”); ?>

这样，就会执行所有挂接到admin_footer的函数

a_simple_song里面有这么2行代码：

add_action(‘admin_footer’, ‘a_simple_song’);
add_action(‘admin_head’, ‘dolly_css’);

将控制形式和内容2个函数挂到不同的tag上，控制文字显示位置和样式的dolly_css是先被调用，然后admin_foot.php被调用一次，a_simplesong()也就被调用一次，来显示歌词。

Comments

Related posts:

[原文链接：http://blog.delai.me/2008/07/plugins.html] ]]> http://blog.delai.me/2008/07/plugins.html/feed 7 WordPress运行原理学习笔记之一：主题机制初探 http://blog.delai.me/2008/07/theme.html http://blog.delai.me/2008/07/theme.html#comments Tue, 15 Jul 2008 11:32:45 +0000 阿德 http://www.soulward.cn/?p=233 WordPress运行原理学习笔记之一：主题机制初探

WordPress运行原理学习笔记之二：插件机制初探

一、主题包各文件说明

header.php：这个文件中包含博客的标题（title），描述（description），tag，以及css等信息。
sidebar.php：这个文件控制你侧边栏中的显示方式。
footer.php：控制页面底部的显示，包括ICP，版权声明等信息。
archive.php：被系统调用用于显示用户提交分类，按日期归档，tag等查询后显示的页面。下面代码显示了archive.php内部是如何辨别不同的查询请求的：

<?php if (is_category()) { ?>
<div class=”pagetitle”>‘<?php single_cat_title(); ?>’ 分类下的文章</div>
<!–显示下面是哪个分类下的文章列表,‘ ’ 分别是左右单引号,下同–>
<?php }    elseif( is_tag() ) { ?>
<div class=”pagetitle”>‘<?php single_tag_title(); ?>’ 标签下的文章</div>
…………
<?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?><div class=”pagetitle”>日志归档</div>
<?php } ?>

search.php：用于显示用户提交搜索后显示的页面。
searchform.php：搜索栏表单，被header.php调用。
single.php：用于全文显示post页面。
page.php：用于全文显示page页面。
function.php：存放自定义的函数，被其他文件包含和调用。
comments.php：留意评论模板，被single.php，page.php等需要评论功能的网页调用。
style.css：整个网站布局和显示模式。
screenshot.jpg：用于在后台选择主题页面里显示这个主题的截图，wordpress会自动在主题目录下寻找screenshot.*文件。

二、从源码看主题的调用过程

当浏览器向apache发送请求要得到博客主页的HTML代码时，./index.php被调用。./index.php中的require(‘./wp-blog-header.php’);调用./wp-blog-header.php。
而./wp-blog-header.php做了一些链接数据库包含头文件等处理，其中有两件事情与主题调用有关：
1、有require_once( dirname(__FILE__) ./wp-includes/functions.php’);
而/wp-includes/functions.php中包含进了./wp-includes/theme.php，这里定义了get_home_template()。

function get_home_template() {//返回所要加载的主题
$template = ”;
if ( file_exists(TEMPLATEPATH . “/home.php”) )
$template = TEMPLATEPATH . “/home.php”;
elseif ( file_exists(TEMPLATEPATH . “/index.php”) )
$template = TEMPLATEPATH . “/index.php”;
return apply_filters(‘home_template’, $template);

其中apply_filters()的作用是：将$template hook到tag＝’home_template’的filters上并返回$template，也就是主题包的路径。
2、有require_once(ABSPATH . WPINC . ‘/template-loader.php’);
调用了.／wp-includes/template-loader.php（ABSPATH代表./， WPINC代表/wp-includes）。
而.／wp-includes/template-loader.php中有：

} else if ( is_home() && $template = get_home_template() ) {
include($template);
return;

get_home_template()将 主题包路径返回给$template，这里的include($template);语句就把./wp-content/themes/主题名/index.php(比如阿德日志现在所用的主题路径就是./wp-content/ade/index.php)包含进去了。于是开始执到./wp-content/themes/ade/index.php里面的代码了，接下来就是该主题内部的事情了。

三、主题被调用后，首页的加载过程

各个页面的加载过程大致相同，下面以首页为例说明。显示首页的时候，Wordpress只调用index.php，在index.php定义了要加载那些模板以及其加载顺序。一般情况是：header.php－>页面主要内容（index，page，signle等页面都有其自己的定义）->sidebar.php->footer.php

其实对于一个能够提供Theme的程序而言，在程序的构架上必须要实现数据和表现的分离。通常我们所说的MVC（Model、View、Controller）架构就是这个意思。

在WordPress中，是这样来实现数据和实现的分离的。
1. XHTML：用Div等用来表现数据，CSS来描述这些数据的表现形式，用这种方式来实现数据和表现的分离；
2. Template的方式：页面各个部分单独保存为一个一个.php文件（如上面的sidebar.php，footer.php等），页面加载时候调用所需代码。

比如<?php comments_template(); ?>就返回了留言框的所需代码。

在比如index中有：
<?php get_footer(); ?>
<?php get_header(); ?>
“get_header”和”get_footer”分别用来得到该页的Header和Footer，其实就是两个DIV块儿。index的主体同样是一个大的Div（<div id=”content”>），在该Theme的CSS中即可以看到对这个DIV的表现定义，包括字体、背景颜色、边距等等。这里唯一的 id＝content来告诉浏览器，这个标签内的内容显示在css中定义的content部分里面。

Comments

Related posts:

[原文链接：http://blog.delai.me/2008/07/theme.html] ]]> http://blog.delai.me/2008/07/theme.html/feed 2 WordPress侧边栏错位的原因及解决方法 http://blog.delai.me/2008/07/wordpress-sidebar-error.html http://blog.delai.me/2008/07/wordpress-sidebar-error.html#comments Sat, 05 Jul 2008 02:34:17 +0000 阿德 http://www.soulward.cn/?p=224 刚使用的主题WordPress主题常常有侧边栏错位，被放到留言框下面 或者 在原来侧栏位置的下面留言框右下脚的位置。

现象一：侧边栏位于留言框位置的右下角，既侧边栏原来位置的下面且左边没有内容的地方。

原因：不同的浏览器对.css ＋ HTML 的渲染算法稍有区别，这导致了常常firefox里面正常的，在IE7里面有点点不一样，在IE6里面浏览器认为，右边的空间不够用了，只好将侧边栏放到位于侧边栏原来位置的下面且左边没有内容的地方，于是就侧边栏错位了。

解决方法：修改主题包里的style.css文件。关键是修改里面的page和content两个div容器对应的宽度大小width属性值。要么让前者变大点，要么让后者变小点，这样对于发生错位的浏览器来说，侧边栏有足够的空间可以放了。操作很简单，你根本不需要任何.css的知识，搜索#page 找到后，看它的width属性的数值，比如970。那么你将整个style.css文件里面所有数值是970的都改大一点点，比如980，反正直到浏览器正常显示为止。当然也可以修改content那个数值，方法类似。

现象二：侧边栏位于留言框下面。

原因：如果，只是个别网页有这种情况。那么不是主题包的问题了，是你博客文章的HTML代码里面包含一些类似<div><!–DC  这样的代码，按照HTML的规则，类似C语言，一个<div>是要于</div>对应的，他们里面还可以再包含<div><div>，这里平白无故多出来个<div>，导致浏览器在解析时候把这个div开始到侧栏甚至底部都作为这个div容器的一部分了，自然，在渲染时候，他就把侧栏也当作左边正文content的一部分了，于是就给弄到留言框下面了。

我上次用某个博客备份软件，将网易博客备份成.xml然后导入到wordpress博客里面，结果导致很多文章里面有类似<div><!–DC这样的代码，导致了上面说的这种情况，起初在在源码里面找原因，着实花了我好长时间。平常正常的编辑一般不会导致这种情况，可以用<!—->对HTML进行注释的，而且一些插件也是这种调用方式的。

解决方法：原因里已经提到了～～，当然也不排除主题包的问题，但如果是主题包的问题一般是所有网页都这个样子的，如果是的话，那看看主题包的代码吧～。

Comments

  • 2008-07-5, buyaobo.cn|不要博 writes: 一点小建议,你的侧边放关于天气的插件没什么实际意义,还不如把连接做在侧边,增加你的外连,多SEO还是有一定好处的
  • 2008-07-5, 阿德.idea writes: 你说得对，我正在修改sidebar :cool:
  • 2008-07-16, 关于wordpress主题错位及侧边栏下掉的原因及解决办法 writes: [...] （以下内容参考自阿德日志） [...]
  • 2008-09-8, WordPress侧边栏错位的解决办法 writes: [...] 今天用Wordpress发表了转载的一篇文章之后，查看首页时即看到Wordpress侧边栏（sidebar）部分全部错位。整个侧边栏下沉到了博客首页文章的下面。我尝试着更换模板，重新上传模板文件，禁用所有的插件等方法都没有解决问题。在网上搜索了很多类似问题的解决办法，其中包括望月的博客的解决方法、阿德日志中提到的方法，但这些都没有解决我的这个问题。 [...]
  • 2008-09-12, 我就不行我搞不定你 | 杂货铺在线 writes: [...] WordPress侧边栏错位的原因及解决方法 (4) [...]
  • 2008-11-10, HUHU writes: 我都只是首页这样，请教，什么问题呢
  • 2008-11-10, 阿德Delai writes: 能具体点么？ 出现这种错位只有两种可能： 1. CSS 中宽度设置问题 2. 网页内容中有一些特殊符号，这些HTML符号会和原本的
    这样的符号对应起来，导致
    容器不正常地结束掉
  • 2008-11-11, HUHU writes: :cool: 谢谢，我已经换了主题，解决了，治标不治本的方法。哈哈
  • 2008-12-5, 关于wordpress侧边栏下沉，虚惊一场 | My Life My Sky--赵剑的博客 writes: [...] 在网上搜索了一下，查看了望月博客和阿德日志，把上面介绍的方法都试了一遍，发现还是没有解决问题。 [...]
  • 2008-12-26, 首佳博客 writes: 你好! 我的侧边栏也很奇怪啊.在IE下面浏览时,主页的侧边栏看不见.其它页面及文章都正常. FIREFOX下就正常.
  • 2008-12-28, 阿德 writes: firefox正常说明你的css是规范的。 你看一下css文件里面涉及到侧栏大小，位置的代码，看看是不是有 * 开头的代码行，如： #content { padding: 0px 0px 7px 25px; float: left; width: 670px; *wide: 680px; overflow: hidden; } IE应用的是带星号的那一行。 如果没有的话，你试试用这个办法加上针对IE的CSS吧。
  • 2009-01-13, yuelin writes: :mrgreen: 谢谢此篇文章解决了问题。 设置的摘要，把文章中下面的一个 给去掉了 ，导致侧边栏显示在下边。
  • 2009-01-13, 阿德 writes: u are welcome!
  • 2010-09-28, Anonymous writes: :cry:

Related posts:

[原文链接：http://blog.delai.me/2008/07/wordpress-sidebar-error.html] ]]> http://blog.delai.me/2008/07/wordpress-sidebar-error.html/feed 14 flickrRSS高阶使用三部曲之三：配合Gravatar2让flickr的图片作为WordPress留言的随机头像 http://blog.delai.me/2008/07/gravatars2-flickrrss.html http://blog.delai.me/2008/07/gravatars2-flickrrss.html#comments Fri, 04 Jul 2008 07:41:12 +0000 阿德 http://www.soulward.cn/?p=221 Gravatar，全称为 globally recognized avatar，是 http://www.gravatar.com/ 推出的一种头像身份标识服务。只要你在Gravatar上注册你邮箱，和上传头像图片，然后当你在启动 Gravatar 服务的博客上留言，就可以显示你的头像。

WordPress内置了对Gravatar的支持，但国内在Gravatar上注册过的人还是比较少的，这导致了留言中大部分都是默认的头像，这样想到很单调。

如果能让留言的人中Gravatar上注册过的显示其对应的头像，没注册过的随机显示一张来自flickr上的图片，那么留言框将很有生气哦。比如这样:http://blog.shidelai.cn/leave-message。

其实要实现这个效果很简单。

在WordPress插件：显示flickr上的图片－flickrRSS使用详解（http://blog.shidelai.cn/2008/06/how-to-.html）和 WordPress博客中显示与文章内容相关的Flickr图片 （http://blog.shidelai.cn/2008/06/essay-photo.html）中我已经介绍了在文章中显示与文章内容相关的flickr图片，如果按文中提到的设置过来，那么会有很多图片被缓存在/home/yourname/domains/soulward.cn/public_html/wp-content/cache这个文件夹下面。而Gravatar2这个插件最重要的改进就是可以随机选取一张图片作为留言头像。

参照上面提到的2篇文章解决好flickrRSS后，接下来就是Gravatar2的事情了。

gravatars2下载：http://blog.shidelai.cn/wp-content/uploads//2008/07/gravatars2.rar

解压后，安装它显示的文件夹结构，将gravatars2.php 和 gravatars2-wpcron.php 上传到plugins文件夹下，将gravatars文件夹上传到wp-content下面。

然后后台激活他们。其中gravatars2-wpcron.php是用来从Gravatar网站缓存用户头像的，可以选择不激活。

在Setting－Gravatar2中设置头像文件夹为：/home/yourname/domains/soulward.cn/public_html/wp-content/cache（根据具体情况修改）

然后在你的 style.css 文件中插入以下样式头像的代码：

.gravatar {
float: right;
margin-left: 10px;
width: 75px;
height: 75px;
border: 1px solid #b0deff;
}

上面是官方推荐的，下面的是我使用的：
.gravatar {
float: right;
margin-left: 10px;
width: 75px;
height: 75px;
border: 1px solid #b0deff;

}

最后在 comments.php 中找到

<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

在下面添加

<?php if (function_exists(‘gravatar’)) { gravatar_image_link(); } ?>

附上我的comments.php供参考

Comments

Related posts:

[原文链接：http://blog.delai.me/2008/07/gravatars2-flickrrss.html] ]]> http://blog.delai.me/2008/07/gravatars2-flickrrss.html/feed 2 抛弃All in One SEO Pack，WordPerss的SEO优化小结 http://blog.delai.me/2008/06/wordpress-seo.html http://blog.delai.me/2008/06/wordpress-seo.html#comments Sat, 28 Jun 2008 18:51:54 +0000 阿德 http://www.soulward.cn/?p=216 对于wordpress，SEO（Search Engine Optimization搜索引擎优化），我都是新手。查看高人前辈的文章，大概知道了以下这些：

应该把最重要的信息放到最前面：

1. 文章网页的标题最好包含文章的标题，而且网页标题以现文章标题后博客名称为佳，而不是wordpress默认的现博客名称后文章标题。 2. 搜索引擎的爬虫处理一个网页里的内容时候是安装html代码的顺序来的。所以，一般的主题都是先header.php 然后 最重要的内容部分 再 侧边栏 最后 footer.php 这们一个html代码顺序来的。

应该做到对搜索引擎友好：

3. 每个网页都要有keywords和description这两个meta标签，方便搜索引擎检索。 4. 日期，分类等存档页面都会有和单篇日志内容重复的现象，这回降低文章在搜索引擎中的排名权值，应该告诉爬虫我不希望这些页面被收录。

抛弃All in One SEO Pack

All in one seo pack 是常用的wordpress seo ，几乎人手一份，但我发现，完全可以自己修改主题源码做到比使用这个插件更好的效果。 我在水煮鱼 在 别用 All in One SEO Pack 提到：All in one seo pack无非四个功能：页面的标题，Meta 中 Keywords 和 Description，以及重复内容。

我拿来主义用他的办法并改进一些细节部分。 1. 标题和Keywords，Description Metab标签的优化： 在<head></head>之间插入

<?php if (is_home())
{
$description = “我的个人网站，记录我想记录的”;
$keywords = “时事、生活、、Linux”;
}
elseif (is_single())
{
$description =  $post->post_title ;
$keywords = “”;
$tags = wp_get_post_tags($post->ID);
foreach ($tags as $tag )
{
$keywords = $keywords . $tag->name . “, “;
}
}
elseif(is_category())
{
$description = category_description($cat);
$keywords = single_cat_title(“”, false);
}
elseif(is_tag())
{
$description = single_tag_title(“”, false);
$keywords = single_tag_title(“”, false);
}
?>
<title><?php if (is_single() || is_page() || is_archive()) { ?><?php wp_title(”,true); ?> @ <?php } bloginfo(‘name’); ?> ( <?php echo $keywords; ?> ) </title>
<meta name=”keywords” content= “<?php echo $keywords; ?>” />
<meta name=”description” content=”<?php echo $description; ?>” />

2. 避免内容没重复检索： 可以修改robots.txt来告诉爬虫那些内容不要收录，但多数情况下，可以在单独的网页html文件中增加相关meta标签来解决这个问题：

<meta name=”robots” content=”index,follow”>

<meta name=”robots” content=”noindex,follow”>

<meta name=”robots” content=”index,nofollow”>

<meta name=”robots” content=”noindex,nofollow”>

其中index标签表示搜索引擎可以收录，noindex不收录；follow表示可以根据页内链接继续漫游，nofollow则禁止。

所以我推荐用via E-Space的办法： 还是在<head></head>之间插入

<?php if (is_single() OR is_page() OR is_home()) : ?><meta name=”robots” content=”index,follow” /><?php else : ?><meta name=”robots” content=”noindex,follow” /><?php endif; ?>

如果不是首页或者单篇文章的内容，就不要收录。

Comments

Related posts:

[原文链接：http://blog.delai.me/2008/06/wordpress-seo.html] ]]> http://blog.delai.me/2008/06/wordpress-seo.html/feed 3 flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片 http://blog.delai.me/2008/06/essay-photo.html http://blog.delai.me/2008/06/essay-photo.html#comments Sat, 14 Jun 2008 06:55:56 +0000 阿德 http://www.soulward.cn/?p=214 在WordPress插件：显示flickr上的图片－flickrRSS使用详解中我介绍了flickrRSS插件的简单应用，也列举了如何在留言框下面显示flickr上最新发布的标签为：hangzhou的图片。但阿德总感觉这样太单调了，可不可以在这个位置显示与这篇文章内容相关的图片呢？如果可以岂不是太爽了？答案当然是肯定的！要不就不会有这篇博文了，呵呵。:cool:

方法

1. 在打开主题文件夹下的single.php，在

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

……….

</div><!–/post –>

之间添加如下代码：

<?php
$tags = explode(“, “, get_the_tag_list(”,’, ‘,”));
$first_tag=preg_replace(‘|<a\s.*?>(.*?)</a>|i’,   ‘\1′,   $tags[0]);
?>

2. 将flickrRSS使用详解里面提到的

<div id=”related-pic”>
<?php get_(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

修改为：

<div id=”related-pic”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

这段代码在新的flickr5.0版本中不适用了，具体解决方法看这里flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录

另外你可以参考不同浏览器里图片大小不同的解决方法

就是显示flickr上标签与文章第一个标签相同的图片，但是注意：文章的第一个标签并不是你在编辑时候输入的第一个标签，而是按照字母排序的第一个标签。

当然你也可以再这设置个$second_tag让它显示包含头2个标签的图片。不过我发现这样会很少有符合条件的图片，很多情况下一张都没有（主要是因为flickr上的标签英文居多，我们博客的标签中文居多）。

Advanced

发挥你的想象力，get_flickrRSS()真的是很好很强大阿，它一共可以设置7个参数，下面的参数介绍你或许用得着。

  1. $num_items – how many photos you want to appear   显示多少图片
  2. $type – specify user, set, favorite, group or community photosream    设置是在用户的所有图片，还是用户的收藏，还是。。。。中搜索
  3. $tags – a comma separated list of tags (with no spaces)  标签
  4. $imagesize – square, thumbnail, medium or large  图片大小
  5. $before_image – html appearing before each photo  插入每张图片之前的html代码
  6. $after_image – html appearing after each photo   插入每张图片之后的html代码
  7. $id_number – specify a user id (or group name)   在特定的用户或者组中搜索
  8. $set_id – specify the set id (found in set url)

Comments

Related posts:

[原文链接：http://blog.delai.me/2008/06/essay-photo.html] ]]> http://blog.delai.me/2008/06/essay-photo.html/feed 7 flickrRSS高阶使用三部曲之一：显示flickr上的图片 http://blog.delai.me/2008/06/how-to-flickrrss.html http://blog.delai.me/2008/06/how-to-flickrrss.html#comments Fri, 13 Jun 2008 07:30:32 +0000 阿德 http://www.soulward.cn/?p=209 通过flickrRSS你不仅仅是可以显示你自己flickr帐号上的图片，你也可以在WordPress博客中任何你想要的位置显示你所设定的flickr上的图片。比如：本网页留言框下面显示的是flickr上Tag为杭州的最新上传的图片，侧边栏上“养眼美图”部分就是flickrRSS的Widget，通过后台添加即可。

下载＆安装

flickrRSS 4.0 — for WP 2.5
flickrRSS 3.5 — for WP 2.3

解压缩后复制到plugins目录下即可，然后后台激活。

注意：由于flickr是国外网站，速度会比较慢，如果需要将图片在本地缓存，你需要新建一个可写的目录用于缓存图片。这样，图片第一次被浏览时候会下载到改目录下，下次就直接从该目录读取图片了。

比如在wp-content目录下新建一个文件夹命名为cache。

设置


进入setting（设置）下的flickrRSS设置页面，这里设置的是默认情况下flickrRSS输出的内容（用于侧边栏的Widget和<?php get_(); ?>）以及缓存文件夹的路径。

1. 点击ID Number后面的 idGettr 输入一个Photostream Address（形如：http://www..com/photos/delai，就是每个flickr用户主页的网址，你可以找个自己比较喜欢的用户的主页地址）。将获得的ID填入ID Number后面的文本框。

2. Display设置的是显示该用户的哪些图片，以什么方式显示，如图片大小，显示多少张等等。

在侧边栏中添加flickrRSS的Wigdet，应该可以显示图片了。

3. 如果要使用本地缓存功能，勾上Enable the image cache，然后设置下路径：

URL： http://blog.shidelai.cn/wp-content/cache/

Full Path：/home/yourname/domains/soulward.cn/public_html/wp-content/cache

你可以参照一下我的进行设置，如果你装过Gravatar2的话那么打开它的设置面板就可以很容易知道Full Path里面该填什么了。

使用

前面提到，出了能在侧边栏显示图片之外，我们还可以在主题中插入代码使得可以在博客的任意位置显示符合各种要求设定的flickr图片。阿德只简单地在留言框下面显示最新上传的flickr上Tag为’hangzhou’的图片，并且点击图片后是在新窗口打开对应的flickr页面，而不是默认地在本地窗口打开，咱不能让flickr抢了生意不是？。

方法：

1. 在single.php中最后一个</div>前面添加

<ul>
<div class=”flickrtag”>
<li><h3 class=”sidebartitle”>Flickr上的杭州</h3>
<?php get_flickrRSS(9, “community”, “hangzhou”,”square”); ?>
</li>
</div>
<ul>

如有疑问可以参看下我的single.php源码

2. 在style.css中添加

.flickrtag a:active{
text:expression(target=”_blank”);
}

测试下吧，呵呵

当然，你可以发挥自己的想象力，比如最新上传的tag为艳照门的图片阿什么的。关于get_flickrRSS函数的参数和使用例子作者的网站上以及有了，可以参考一下。

Comments

Related posts:

[原文链接：http://blog.delai.me/2008/06/how-to-flickrrss.html] ]]> http://blog.delai.me/2008/06/how-to-flickrrss.html/feed 6