WordPress 3.6 将更新的一些UI

WordPress 3.6 强调“内容编辑”,主要是带来以下的更新:自动保存,编辑流程,修订版本,文章格式,和自定义菜单。

WordPress 3.6 估计在2013年的4月22日发布

# 本文的截图在 3.6 alpha版本截取的,最终效果还要待发布后才知道。

文章格式

post-format-ui-old

WordPress 3.5 使用的 UI 截图

new-post-format-ui

WordPress 3.6 alpha 使用的 UI 截图

目前的WordPress 3.5只能用自订栏,或者用插件才能实现这些格式。新版本的UI有相对的输入框,也会自动给文章加入相对的讯息。

3.5 可以用的插件:wp-post-formats,也可以得到一样的效果

# 个人测试:3.6开始,不需要添加那些代码进去 function.php。

Continue reading WordPress 3.6 将更新的一些UI

推荐2款实用插件

  1. Art Direction
    这个插件允许你插入额外的代码(通常是CSS或JavaScript,但可以是任何东西)。可以选择单页,或者显示到一个特定的页面时(例如文章在第二页,你游览第二页时才自动插入额外的代码,其他页不会看到这些额外代码)
  2. Post Editor Buttons
    个人不太怎样用可视化编辑器,反而偏爱HTML编辑器。Wordpress 默认的HTML编辑器只有 b,i,link,b-quote 等等这些。Post Editor Buttons 可以让你创建一套编辑器按钮。我可以插入 <h3><pre><code> 这些额外的按钮

当然,上面的都可以自己用 Custom Fields 或者 javascript 都可以做出来

主题:九十度 V2

由于上次制作的 WordPress 主题对新版的 IE10 不太怎样支持,所以用了一阵子的时间做了第二版的主题。除了配色有改变之外,没什么改变(完全基于上个主题修改的)。唯一改变的是`搜索栏`添加到导航栏去了。

改变

  • 侧边栏移到文章下端
  • 导航栏有搜索按钮可以点击了
  • 新的配色
  • 某些字体图案换了 – 使用用的是免费的 Fontello
  • 现在有WordPress 的文章格式了,暂时有 Link 和 Status
  • 画廊(Gallery)页可以用键盘左右键翻页。

支持游览器

  • IE8+
  • Chrome(包括安卓手机版)
  • FireFox

不支持 IE6-7。

第一,太懒了。
第二,每个 IE 支持的CSS 都不一样。每个调试,可能要很长的时间。
第三,非专业产品,不支持也没所谓了。

如果您不能放弃旧版的 IE,小弟我推荐 Google Chrome Frame。这货不会破坏登陆银行,并且自动对适用的网站配置 Google Chrome 的渲染引擎。

插件

去掉 – Ajax 留言
添加 – Live Comment Preview(留言预览)

Changelog

2012-10-21 第一个提交
还有些地方等待修改,暂时就这样了。

2012-10-25 忘了 pre 这个 HTML 元素的配色改了,现在绿色的是 <ins>,红色的是 <del>

例如

<ins>

<del>


最后还是用上一个主题的话 – 本主题为私用。不提供下载。

WordPress 自定义栏目

自定义栏目:文章作者可以在 WordPress 中为其文章指定自定义栏目。详细就参考WordPress Codex

给 WordPress 主题添加自定其实也不是很难

版权声明

打开single.php,找到 <?php the_content(); ?>,在这后面添加下面的代码

<?php 
$CustomSrc = get_post_meta($post->ID, 'source', true);
// 如果有这个‘CustomSrc’自定义栏目,就显示出来
if ( $CustomSrc ) :
  echo $CustomSrc;
else :
  echo "原创文章…什么什么的都写这儿";
endif;
?>

在后台就添加个自定义栏目
名字叫做:source
值:就用 HTML 代码(例如:<a href="#blah">blah</a>。当然可以填 URL 地址,不过要改改第五行)

文章自定CSS样式

在主题的文件夹的 header.php 找到 <?php wp_head(); ?> 之前或者之后添加下面的代码

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

在后台就添加个自定义栏目
名字叫做:customstyle
值:css 样式

# 可以用同样的方式添加自定 Javascript

显示文章所有的自定义栏目

<?php the_meta(); ?>

注意,显示所有的自定义栏目是没参数的。

# 这个应该注意,有些插件自动用到自定义栏目,显示全部可能不是很适合。

更新:

如果有多个同一个名字的自定义栏目(array),代码可以这样:

<?php 
  $srcs = get_post_meta($post->ID, 'source', false);
  foreach( $srcs as $src)
    echo $src; // 打印自定义栏目
?>

更新2:截图解释如何在文章里添加自定栏

几款空白的WordPress模板

喜欢制作 WordPress 主题又不知道何如开始,不如使用开源的空白模板作为基础,加以修改,变成一款独特、有个性的主题。

#1 _S / Github Repo

由 Automattic 操刀,也就是 WordPress 的母公司。代码注解完整,可以定制主题header。基本可以用,不过就差了点样色。由于主题的函数都叫做”_s”,你可以使用,不过要用自己的主题名,就得去主页生成自定的主题

#2 Roots Theme / Github Repo / 演示

基于 Twitter Bootstrap 制作的 WordPress 主题,基本下载回来就可以用了(因为是个 Bootstrap 的 WordPress 主题,不作解释了。不明白的可以看看 Bootstrap)。代码注解也非常齐全,代码更新非常活跃。

  1. 不过要提醒下,这个Roots Theme 会修改WordPress 设定,所以要想好再用。

    •   修改你的永久链接为:/%postname%/
    •   修改你的上传文件夹为:/assets/
  2. LNMP 服务器比较麻烦,rewrite 可能要转换一下才能用。

#3 Skeleton / Github repo

样式齐全。可以融合 bbPress,或者 Jigoshop 一起用

#4 Bones / Github repo

基于 HTML5 Boilerplate。简单重置样式,接近空白主题。

新主题:180度

经过无数次学习 HTML 和 CSS 后,新主题终于能和大家见面了!
新主题基于 html5reset.org 的空白主题HTML5 BoilerplateBootstrap from Twitter的框架

主题名称:180度
Tags:media-queries, gradient, css3, two-column, generated content, liquid width

重点/特性

  • 支持的游览器:IE8, IE9 和非 IE 内核游览器(Chrome, Firefox, Opera)
  • Willin Kan 大师的
    1. ajax 留言
    2. spam 小墙
    3. 自动添加 meta description
    4. 自动添加 meta keywords
  • Modernizer
  • 本地 jQuery 备用
  • CSS3 Media Queries
    • 支持 iPhone 和 Android 手机游览,其他手机一概不支持
  • HTML5 本地验证
  • 谷歌搜索 Google CSE(webkit 用户可以使用语音搜索…国语 only)
  • 还有很多地方使用上 CSS3

不支持 IE6

1、我是个追随潮流的小弟,而 CSS3 和 HTML5 技术就是潮流(单靠 IE 赶不上);推荐使用 Google Chrome(或者:谷歌浏览器内嵌框架
2、JavaScript 不懂…所以潮流只能追到一半(所以主题没什么 javascript)。
3、虽然支持 IE7 和 IE8,他们还是不支持 CSS3 的新元素,所以会有点朴素。

暂时的 bug:

  1. Chrome 不支持伪元素动画(就是 :after这些)- 暂时只有 Firefox 支持

本主题为私有主题.

Changelog

2012-07-02
1、修改 Media Queries
2、支持 Flexbox 的游览器会看到牛逼的东西,在网页的底部
3、添加 HTML5Boilerplate 的时间戳

2012-06-11
1、removed: 回复发邮件
2、updated: Font Awesome ,并且在 IE7 可以看到图标!
3、fixed: 评论比以前漂亮多了

已知问题:
1、Media Queries 有待修正
2、Bootstrap 好多问题
3、Links 这个页面在 Android 上渲染有点问题,H3 > ul 继承了 H3 的 font-size 和背景颜色,我晕(只能强迫重置它,没 iOS 测试这个问题) fixed
4、页底的 4 栏是有 4 种颜色的,只不过 IE 不支持 nth-child 看不到…

2012-04-11
1、fix SEO
2、fix CSS(评论 form)
3、停用 willin spam 墙

2012-03-25
1、Font Awesome 字体图标
2、新的页脚配色
3、旧版 IE 的 CSS Hack 分开加载