WordPress改造记录

安装了wp,但是很多地方不足以满足需求,记录一下自己的改造部分。

1、代码高亮

做这行工作怎能没有代码,高亮就是第一步想要实现的。
使用Google SyntaxHighlighter高亮插件,直接在添加插件页面搜索即可,然后安装。有Usage页面链接到http://code.google.com/p/syntaxhighlighter/wiki/Usage,看了一下,两种定义方式,使用pre或textarea标签:

<pre name="code" class="c-sharp">
... some code here ...
</pre>
Or
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

另外希望编辑器上有个按钮,点击插入源码功能。这个自然应该是涉及到TinyMCE工具栏定制,遂搜索了一下有关代码高亮的内容(本以为这个插件安装后自动有这个功能。。原来是要手动编辑html)。这时发现了一篇说“Google Syntax Highlighter 与WordPress – tinyMCE 的兼容性”, 原来pre标签插入是有问题的,pre的name属性在编辑器的“可视化”与“HTML”方式切换的时候,会将name属性去掉,因为xhtml里name不是pre的标准属性。于是测试了一下textarea标签,发现转换以后,源码的换行会被转为<br />显示在文本域中。。。不尽人意啊。于是按那篇博客所说的方法改造了一下。

在 wp-admin/includes/post.php 里面,搜素到$initArray变量的赋值行,在最后添加一个值:

'extended_valid_elements' => "pre[name|class]"
注:如果你是新手或不懂代码,没看懂以上简略的引用,就去看引用页面吧(上面加了链接的),比较详细。

这个意思看着就明白,额外的有效元素pre拥有有效的属性name和class。这样在编辑器两种编辑模式下转换,就不会丢失name属性了。

编辑器代码插入按钮还在研究ing…

2010-8-16注:今天找到了一个新插件:Auto SyntaxHighlighter,安装以后编辑器就可以拥有插入代码功能了,试了一下,浏览器查看源码发现跟Google SyntaxHighlighter高亮插件有重复的文件引用,所以保留一个插件就可以了。可以在安装新插件的页面搜索:Auto SyntaxHighlighter即可。截图:

2、改造编辑器内容样式。稍微好看点。

找到/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css,并添加或修改以下内容:

/* new */
p {margin:5px 0;text-indent:2em;}
blockquote{padding:10px;border-left:3px solid #6c6;background:#f8f8f8;}
/* modify */
pre {padding:0;}
body {word-wrap:break-word;word-break:break-all;}

3、利用wp的自定义域,给博文页面添加自定义css,自定义js,引用js文件

参考:http://codex.wordpress.org/Function_Reference/get_post_meta

约定:自定义css名称 : css, 自定义js名称: js, 引用的js源文件地址: js-src

在当前所用主题的目录,找到header.php和footer.php两个文件,编辑。

header.php 在<head>标签内添加如下代码,引入自定义css:

<?php
$css = get_post_meta($post->ID, 'css', true);
if (!empty($css)) :
?>
<style type="text/css">
<?php echo $css ?>
</style>
<?php endif;?>

footer.php在</body>闭合标签前面加入以下代码:

<?php
$jssrc = get_post_meta($post->ID, 'js-src');
$js = get_post_meta($post->ID, 'js', true);

if (count($jssrc) != 0) {
foreach ($jssrc as $src) {
echo "<script type='text/javascript' src='" . $src . "' ></script>";
};
}
?>
<?php if(!empty($js)) : ?>

<script type="text/javascript">
// <![CDATA[
<?php echo $js ?>
// ]]>
</script>
<?php endif;?>

以上代码丑了些,pre插入代码高亮在html和可视化编辑之间切换 会过滤php语法,看来得另外折腾了。另外本人不会php,if语法是照搬WordPress文档示例,foreach乃Google而来。凑合用吧,有个小插曲,在写if()之后没写:冒号,导致上传覆盖原文件以后浏览文章是空白了,多谢群里朋友喜羊羊提示。之后测试了一下,效果都有了。

测试:发布一个新文章,在自定义域那里添加4个元数据,分别为:  css, js, js-src, js-src ,内容就不说了,懂的自懂,不懂的貌似不会需要这个功能吧。

http://cssor.com/customize-wordpress.html

WordPress改造记录》有 2 条评论

  1. 2010.08.12 @ 15:08 Dianso

    syntaxhighlighter的高级用法

    高亮php [php][php][/php][/php]

    css [css] [css][/css][/css]

    • 2010.08.16 @ 03:08 tofishes

      ls所说的高级用法是bbcode吧,貌似需要额外的支持哟,应该是需要程序把相应的标签替换

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(32)移动开发(4)自然(22)