安装了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 ,内容就不说了,懂的自懂,不懂的貌似不会需要这个功能吧。
《WordPress改造记录》有 2 条评论
2010.08.12 @ 15:08 Dianso
2010.08.16 @ 03:08 tofishes