WordPress

WordPress彩色的标签云

二 7th

由Jacky发表在WordPress

没有评论

自己写simpleblog程序的时候做过一个彩色的标签云，所以想自己写一个用到wordpress里面，后来发现网上这样的代码很多，就找了段现成的。
修改了mystique主题的widgets模板文件 ~/wp-content/themes/mystique/lib/widgets.php
可以看到重点是wordpress的这个方法add_filter(‘wp_tag_cloud’, ‘colorCloud’, 1)，我没做过wordpress开发，对这个不熟啦，
但是联想了一下Servlet的filter机制，对这个函数的理解也八九不离十啦，能用了。

<div class="tag-cloud">
<!--Colorful tag cloud -->
<?php
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$color = dechex(rand(0,16777215));
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

?>
<!--end -->
<?php wp_tag_cloud(apply_filters('widget_tag_cloud_args', array())); ?>

</div>

mystique主题的中文翻译有问题，下载了个poedit修改了一下zh_CN.po文件，这个工具蛮方便的，能自动生成mo文件，自己更新一下主题下的mo文件就行了
~/wp-content/themes/mystique/lang/
zh_CN.mo
zh_CN.po

,

为wordpress博客文章设置单独的CSS

一 10th

由Jacky发表在JavaScript

没有评论

因为想要在文章中插入一些动态的内容来做一些前端的demo，自然用到了JavaScript和CSS，目前我用的wordpress2.9对插入JavaScript的功能已经支持得蛮好，即使使用富文本编辑器和HTML视图切换的时候JavaScript不会被过滤掉，但是用link标签还是会被过滤。 

网上有个per post css的wordpress插件，利用的是自定义meta域的方法，在页面渲染的时候插入css的link,虽然我没搞过WP的插件开发，但是代码倒也挺容易看懂，基本上不用解释了。 

下面这个插件，性能不好，如果文章和css比较多的，每次查看的时候都要做很多次无效的循环（比如单独查看每个页面的时候），所以我没有选择这个插件。我换了个思路解决不能插入link标签的问题。 


<?php

/*
Plugin Name: Per-Post CSS
Version: 1.1
Plugin URI: <a href="http://trevorcreech.com/geekery/wordpress/per-post-css/">http://trevorcreech.com/geekery/wordpress/per-post-css/</a>
Description: This plugin allows you to specify a chunk of CSS, which will be included in the header only when viewing that post, or a page where that post appears.  Put the custom CSS in a Custom Field called "Per-Post CSS".  The Custom Fields interface can be found directly below the file upload interface when you are creating or editing a post.
Author: Trevor Creech
Author URI: <a href="http://trevorcreech.com">http://trevorcreech.com</a>
*/

function ppc_header()
{
 global $posts;
 for($i=0;$i<count($posts);$i++)
 {
  $ppc_embed = get_post_meta($posts[$i]->ID, 'Per-Post CSS', false);
  $ppc_ext = get_post_meta($posts[$i]->ID, 'Per-Post CSS File', false);
  for($j=0;$j<count($ppc_embed);$j++)
  {
   $ppc_output .=  '/* Embedded CSS for "' . $posts[$i]->post_title . "\" */\n";
   $ppc_output .= $ppc_embed[$j] . "\n";
  }
  for($j=0;$j<count($ppc_ext);$j++)
  {
   $ppc_output .=  '/* Externel CSS for "' . $posts[$i]->post_title . "\" */\n";
   $ppc_output .= "@import url(\"$ppc_ext[$j]\")" . "\n";
  }
 }
 if($ppc_output)
 {
  echo "<style type=\"text/css\">\n/* Per-Post CSS */\n";
  echo $ppc_output;
      }
 echo "</style>\n";
}

add_action('wp_head', 'ppc_header');
?>

我的解决办法是既然JavaScript标签现在wordpress已经有支持了，那么就用JavaScript为需要单独使用css的文章或者页面加载css文件，下面的代码摘录自我的一个测试页面： 

 
<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">// <![CDATA[
    google.load("jquery", "1.3.2");
// ]]&gt;</script>

<script src="http://www.haojii.com/webdev/working-with-events/events.js" type="text/javascript"></script>
<script src="http://www.haojii.com/webdev/working-with-events/loadcss.js" type="text/javascript"></script>

 

//loadcss.js
$(document).ready(function() {
   var $per_post_css = $('<link href="http://www.haojii.com/webdev/working-with-events/working-with-events-part-1.css" media="screen, projection" rel="stylesheet" type="text/css"></link>');
   $(document.body).append($per_post_css);
});
, , , ,