Recently I’m doing some wordpress theme designing for XMind Ltd. They want a blog for multi-language support. Since it could be useful for many people, I would like to share my experiences.

我最近在给Xmind这家公司做一个多语言的Blog模板，感觉效果还不错，把我的经验共享一下：

The theme is based on a clean blue theme “Cold Blue” which matches the company’s color scheme perfectly and it’s free. I made some changes so that it looks better for me. But the problem is the theme has no support for multilingual. So I have to dig into the theme PHP files and manually change that. So:

我的模板是下载的 “Cold Blue” 这个比较简洁的模板，我很喜欢，但是它并没有多语言的支持，所以我只好手动修改PHP文件，下面介绍一下如何把一个模板加入多语言的支持。

How to add multilingual support for a theme?

The answer is: You have to tell wordpress which is a multilingual string.
Like said in this blog, you first register a name for yourself in function.php.

你要做的就是在模板里把需要翻译的地方标记出来，先要在function.php里面给你的模板注册一个名字，这样才能在里面使用。


load_theme_textdomain('coldblue')


And in other theme files, you can now tell wordpress which are multilingual strings in your file. Basically there are following things you may want to use:

然后在模板里，看到一段字符串就把它们替换成下面的写法吧。注意一下_e('','')是直接输出，适用于一般的文字内容。而__('','')是返回一个字符串，这样可以放在其它函数里面调用。如果对于比较复杂的情况，可以使用printf来输出。不明白可以看我提供的下载里面是怎么用。

<?php _e('Hello world', 'coldblue') ?>
<!--Will output the string directly--!>
 
<?php some_function( __('Hello world', 'coldblue') ) ?>
<!-- Returns a string for function use --!>
 
<?php printf(__('Sometimes %s and %s and %s'),$a1,$a2,$a3);?>
<!-- Complicate things--!>

So you need to change every possible strings in your theme into multilingual notations. And after that you can ask the tool gettext to find those things for you!

一旦标记完成了之后，就可以用gettext工具把所有标记过的东西查找出来，如下：

cd wp-content/themes/coldblue
find . -iname "*.php" > files.tmp
xgettext --language=PHP --indent --keyword=__ --keyword=_e \ 
--keyword=__ngettext:1,2 -s -n --from-code=UTF-8 -f files.tmp

Then you will get a file calledmessage.po. You may rename it for your locale setting, like zh_CN.po, and edit the first lines of the file like this:

然后得到一个message.po的文件，然后你可以把它重命名一下，把开头的一段话改成以下的样子：

msgstr  "Project-Id-Version: PACKAGE VERSION\n"
        "Report-Msgid-Bugs-To: \n"
        "POT-Creation-Date: 2009-08-03 17:35+0800\n"
        "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
        "Last-Translator: FULL NAME \n"
        "Language-Team: LANGUAGE \n"
        "MIME-Version: 1.0\n"
        "Content-Type: text/plain; charset=UTF-8\n"
        "Content-Transfer-Encoding: 8bit\n"
        "Plural-Forms: nplurals=2; plural=1 != 1;\n"

And then translate items one by one in .pofile. Once you finished, a compile job is needed:

当把.po文件里面的所有行都翻译过了之后，可以把它编译成机器识别的.mo文件

msgfmt -o zh_CN.mo zh_CN.po

There are some tricky things about the date format. My way is to make the date format string multilingual:

对于一些比较麻烦的事情比如日期格式，其实可以把它本身就设成多语言字符串，这样就可以分别独立进行设置了。其实不同语言的格式也是可以随便改的，把css地址也设成多语言字符串，然后你就知道怎么回事了吧。

get_the_time(__('F jS, Y','coldblue'))

msgid	"F jS, Y"
msgstr	"Y年n月j日"

You may need to edit wp-config.php to change define ('WPLANG', 'zh_CN'); for a refresh, or simply wait for the next thing:
如果对于一般应用的话，可以直接改wp-config.php来设置语言，但这并不是真正的多语言。

How to add multilingual contents?

A very nice plugin called WPML. It will:

我找到的一个插件是WPML，简直是为我量身定做。

• Allow you to create translations of posts or pages manually. (I don’t want the “Google Translate” way. 可以为每篇日志创建不同语言的版本而不是用Google翻译的办法。
• Skip contents if no translation is available. So the page will look native. 如果没有相关语言的文章版本，可以设置直接不显示。
• Setup the theme locale for each language. 为不同的语言版本设置不同的模板语言文件，我们刚才做的那些东西就可以用上了。
• Translate widget titles, blog titles, tags and categories. 可以设置翻译各处的小标题，标签名，分类名，保证不留死角。

You may follow the manual of the plugin which is very clear about everything. I just want to show some screenshots: 具体如何设置看它的手册已经写得很清楚了。我只是大概贴几张截图，大体介绍一下。

Setting translation for posts: 设置文章的版本

Setting widget titles: 设置小标题

Theme properties, you know how to use the .mo, .potranslations now. 模板的语言设置

And of course I would like to share the modified theme to you. 就知道有人想坐享其成，欢迎笑纳。

Click to Download

However I’m not yet so interested in making a multilingual site myself, I think writing them together is fine for a normal blogger

不过现在我还不打算用那种方式来多语言，对于我一个平头百姓来说，这样英汉混杂大家不影响理解也就好了。

It’s very quickly made (actually the whole page with images/html/css are finished in one day), so I don’t think it deserve to examine too carefully. But I really like the icons I made for the site. My friend said they are “Web 2.0 like”.

Pixel Perfection in Web/UI Designs 像素级设计

Webpages and software UI are all things that meet your eyes on the computer screen. The minimal unit of the screen is the pixel, just like everything is consisted of atoms. All best designers provide pixel-perfect designs, which means they have already polished all details they could (there is no half-pixel any more). Pixels are small, but they are not invisible. On the screen there are 1-pixel-thin lines everywhere: many of the link underlines, cursor in the text fields, outlines of boxes, etc. You may call them “hairy” but they are useful.

像素级设计在网页和软件界面中是一个经常见到的名词，因为它们是显示在屏幕上的。电脑屏幕上最小的元素就是像素，正如物体的最小元素是原子一样。顶尖的设计师们都会提供像素级的设计，也就是说：他们已经尽力把所有细节都美化了(再没有半个像素了)。像素虽然小，但并非看不见。比如文本框里面的光标，链接上面的下划线，还有很多边框都是1像素。纤细，但是同时有用。

Vector Tool not for Pixels? 矢量vs像素

Adobe Illustrator is a widely loved tool for vector-based designs. Vectors are good for printing because they can be scaled up to any size without losing quality. But they also don’t (or hardly) have a minimal unit so you can scaled down everything without losing information. There is a problem for the screen: it displays things in pixels, but the positions of the vectors are not necessarily constrained by pixels. A line can be 0.5px (for pixel) wide, and a box can have a position at (100.1px, 100.2px). The half-pixels are displayed as semi-transparent, blurry pixels on screen. The freedom is a headache when you really meant to design pixel by pixel.

Adobe Illustrator是一个矢量绘图软件，也可以说是最好的一个。矢量图片非常适合印刷，因为它能保证无论如何放大都能保持清晰。无限制地可放大同时也就意味着无限制地可缩小，这对于屏幕来说就是一个问题。在屏幕上最小就是1像素，如果一个图形比1像素还小，那屏幕上只好用一个半透明的像素去显示它。在矢量软件中，我们是可以画一条半像素宽的线，或者让一个框的位置出现在非整数的像素上的。这样固然很自由，但是如果你真的需要逐像素去设计的时候，就会发现很难保证单个像素显示的效果。

For most designers, they choose to use Photoshop or Fireworks to work in pixels. But every tool has its own advantages, illustrator is still a very sweet 2D graphic designing tool for its numerous shape editing tools, multiple appearance options. And best of all, it’s nondestructive editing and the selection tools are more powerful and convenient than photoshop. — Think if there are 100 shapes!

所以设计者们一般会借助Photoshop和Fireworks去实现像素级的设计。但是每种工具都有它的优点，Illustrator的形状编辑等功能，还有对形状设定多种”外观”以实现复杂的效果都是其它软件不具备的。Illustrator作为矢量软件，在编辑过程中一切是无损进行的，同时还有着最好用的节点和形状选择工具 (如果有100个路径的话，PS尚能饭否?)。

Yes Illustrator Loves Pixels. AI也喜欢像素

You are not alone if you want to use Illustrator to design your website or software icons. Even Illustrator provides built-in templates for Web now. But there are other tweaks which I will show you in this post. So let’s get started.

首先要相信希望用Illustrator做网页和图标设计的人大有其人，现在Illustrator已经自带了Web的一些模板，但是要实现真正的像素级效果，还是需要进行一定的调整。我们现在开始：

Begin with a new document like this, make sure the options are set to pixel and RGB.
首先新建一个文档，注意设定为像素和RGB模式的地方。

And make some changes in the preferences in Illustrator:
然后还要对Illustrator的软件设置进行修改：

This will make your keyboard nudges objects half a pixel each time, we’ll see how this works.
这个选项让每次方向键移动半个像素，接下来会说明为什么。

Make sure everything we talk in Illustrator is in pixels.
同时把所有的单位都改成像素。

Same here, even you will not use this most of the time.
栅格的设定也改一下，虽然一般时候用不到。

But we’re not done, you need to turn off the “Snap” options in “View” menu. They will snap your 0.5px nudges to 1px and thus make our tweaks useless.
最后还要把视图菜单中的对齐选项关掉，否则的话我们每次半像素的移动就自动被对齐成一像素，之前的设定就没意义了。

Draw Your Shapes at 100% 放大到100%再画

Now you have a pixel to pixel connection from the screen to the document. When you draw something on the screen, the positions and lengths are in whole numbers (integers). See in your “Transform” panel.

现在我们已经把屏幕和文档建立了一一对应的关系，这时要保证你的放大比例在100%，这样所有的长度和位置都会是整数了。在“变换”面板中可以看到这些信息。

Sharpen Our Vectors! 让我们的图形变清晰

It still doesn’t mean nice and sharp pixels, but we are not too far. You’ll still have a god damn blurry line when you draw a 1px line (yes I double checked!).
现在离我们的像素级目标已经不远了，但是你如果画一条1px的线的话，会发现它居然还是虚的！

But what if we nudge it 0.5px? (use keyboard)
但是如果我们移它半像素呢？也就是一次方向键

It’s nice and sharp now, isn’t it? You may have a think about why it behaves like this, but it does works this simple.
果然它变清晰了，抛却原因，这样确实有效而且简单。

Again, a blurry box out of the box (with integer informations). It has a 1px stroke.
再试一次，一个模糊的1像素矩形，但是所有的信息都是整数像素的。

So we nudge it in two directions. See! It’s sharp now.
移动两下，它现在马上清晰了。

Luckily if a box only has fills and no strokes, it’s sharp enough without nudge.
当然如果矩形只有填充的话这个步骤就简单得多，直接画好就行了。

Round corner boxes can be sharp enough as demand. I prefer the appearance way because it can always be easily changed.
圆角矩形也能保证它的清晰，我通常喜欢画一个矩形然后加上圆角的效果。

Sometimes we need dotted lines (1px by 1px). But you can’t use the “Dashed Line” option in the stroke panel, it simply doesn’t work as promised. So the best way is to use the patten to fake a dotted line.
1像素的虚线也是经常需要用到的，但别指望描边选项里面的虚线功能，你设成1px 1px也会发现它其实还是虚的。最简单的办法是用图案去伪造虚线。

I assume you already how to make this tiny pattern, the black dot is 1px x 1px and the empty box is 2px x 2px.
制作图案的步骤不再多说，黑点是1像素，而图案本身是2像素见方。

And the line is indeed a 1px tall box. But it’s not too complex I think.
现在这条虚线实际上是1像素高的矩形，但这并不算什么麻烦的技巧。

So we have already make things sharp, especially for horizontal and vertical lines (they are often blurry by default). And there is one thing more: the text. But it’s quite easy for us now. We just use the “Rasterize” function from “Effects” menu. It works well for most latin fonts just like the old windows times if you turn off the anti-aliasing. The texts are still editable because the rasterize is only a nondestructive effect.
现在我们已经知道如何保证像素级精确的直线效果，还有一个需要考虑的事情就是文字。但这个设定起来就简单得多，只要有效果菜单中的“像素化”功能针对文字设定就可以，在其中关掉反锯齿的选项。加上这个效果之后，文字还是可以编辑的，但是它们更像是我们熟悉的像素字体了。

If it looks strange in letter spaces, try to nudge it a bit.
如果文字间距有点奇怪的话，移动一下可能就会正常。

A very big problem for me before was to find a way to display the bitmap Chinese font in windows. You may need to install a modified “Simsun” from here, and then simply rasterize it.
曾经困扰我的一个问题就是汉字的像素字体如何在AI里面重现，我发现水木上面的这个像素宋体效果很好，其它的设置都一样，美中不足的是粗体还是没法做到。

Now we are ready to make some real things. The blue button is made of two objects, a reflection and a box. I just added multiple appearance for the 1px highlights and shadows. (That’s why I love Illustrator.)
现在可以进行实际的设计了，图中的蓝色按钮有1像素的高光和阴影，我们已经实现了清晰的像素级效果。

As you expected, the sharpness remains in exported images. Yay!
正如你想象的那样，导出的图片中同样如此清晰。

Good But You’ll Still Use Photoshop? 还是想用Ps

I’d say Photoshop, Illustrator, Fireworks are just tools. A good designer only use them to finish their ideas. I make this tutorial just want to tell those Illustrator lovers, you can make pixel perfect designs in it and this is not compromise. You just export your images and use it directly and expect the sharpness. Hope you find it useful. And thanks for watching!

即使你还是喜欢用Ps也没关系，对于设计师来说软件只是实现想法的工具。我只是想让喜欢用Illustrator的人们知道，用AI做像素级的设计是完全可行的，不需要什么妥协或者转换就能做到。用AI导出来的图片也是直接可用的。

The 0.5px nudge and the preferences things are from this screencast, and I made some additions like the dotted line and the text, etc.

So what’s the problems took me so long to complete?

• A Case-sensitive Volume! The default and trouble-free format is case-insensitive on Mac. But if you wanna build these things, at least make a .dmg and mount it. (of course you can make another partition on disk)
• The Fortran/C Compiler.
• Compile MPI support: The packages need this framework to communicate among CPUs, like network support or something.
• Compile Math Libraries: i.e. BLAS, LAPACK, BLACS, SCALAPACK. Looks geeky? Think them to be your math symbols like cos, sin, lg, etc; the packages simply use them instead of code them one by one. Of course the libraries are in fact for matrix operations instead of simple math functions, but you get it.
• Linking them. We may got many specialists as a team, but you still need to make sure they could talk to each other.

The Fortran/C Compiler

On a mac (it should be intel now) the best available compiler would be the ifort, icc provided by intel themselves. Believe me, they are fast. But they need tricker configurations when you compile. Also, they need to pay for licenses. Of course you can apply a trial license and compile your codes. If you really care about that, you may think about the open source gfortran/gcc. And some kind guys(http://hpc.sf.net) provides usable version for Mac OSX. All you need is just un-archive and use. The intel compilers are easy to install also, they use the standard .dmg and .pkg install routines.

Mission 1 Checked.

The MPI Support

In Leopard (OSX 10.5), apple have included OpenMPI framework. But very sadly, it comes with no fortran support. So we need to re-compile OpenMPI, or you can choose LAMMPI, MPICH 2 etc. They work basically the same, but you can still choose your favorite. I’d say I used OpenMPI because they had a FAQ for OSX. If you use gcc/gfortran, just follow the steps, except you need to make it 64bit! This is a lesson, so beware it: the default setting of gcc/gfortran compile 32bit files.

My options for gcc/gfortran:

./configure --prefix=/opt/openmpi.gcc \
             --with-wrapper-ldflags="-Wl,-search_paths_first" \
             CFLAGS=-m64 CXXFLAGS=-m64

The intel compilers seems to compile 64bit files by default, but you can’t be too careful. My options:

./configure --prefix=/opt/openmpi.intel\
             --with-wrapper-ldflags="-Wl,-search_paths_first" \
             CFLAGS=-m64 CXXFLAGS=-m64 \
             CC=icc CXX=icpc F77=ifort FC=ifort

And then enjoy the sexy scrolling matrix Terminal window, and then make; sudo make install to enjoy for another chance. This step is easy enough too.

Checked Mission 2!

The Math Libraries

Also I would like to mention the built-in LAPACK and ATLAS packages in Leopard, but they don’t quite seem to work neither. SIESTA needs BLAS, LAPACK, BLACS and SCALAPACK (yes, all of them) to build a parallel version. VASP seems a little more merciful, you just need BLAS and LAPACK.

As always, there is a simple way and a tricky way to do this. The simple way: you can use the SCALAPACK installer. And ask it to download and compile the libs (the coolest thing is, it builds all of them) for you. Remind you, the -m64 flag for gcc/gfortran!

The tricky way, you can use Intel’s Math Kernel Library (MKL). Don’t worry, you should already installed them with your compilers on Mac. But the worst thing is, it provides BLAS, LAPACK support except SCALAPACK. They have it on Linux/Win, but not Mac. So you should use the installer mentioned above, just download and compile. But you don’t need to use all the libs, only the SCALAPACK and BLACS.

OK, Mission 3 done.

Linking and Compiling

We finally get to the final part. But before SIESTA/VASP really work, your efforts still mean nothing. Generally speaking, you need to take care of the configuration files in the following ways:

• Compiler: mpif77/mpif90 depends on the specific package. But you should make sure it if you have several versions and do not use gfortran/ifort because they won’t compile parallel apps.
• Flags: What did I say time after time? 64bit for gfortran! And for intel compilers, you surely want a best option to work well and fast. I’m not sure about everything, but this works for me:-O3 -m64 -axSSE4.1,SSSE3 -xSSSE3 -mp1 -prec-div -pc80 -pad -ip
• Linking Libraries: for gcc/gfortran, I simply use the libraries installed by the scalapack installer. and for intel, I use the following settings: (again, it works for me and don’t make me to explain )
  
  

  MKLPATH=/opt/intel/Compiler/11.0/059/Frameworks/mkl/lib/em64t/
  INTEL_MKL=-L$(MKLPATH)\
        -I/opt/intel/Compiler/11.0/059/Frameworks/mkl/include/  \
        -lmkl_lapack\
        $(MKLPATH)/libmkl_intel_lp64.a\
        $(MKLPATH)/libmkl_intel_thread.a \
        $(MKLPATH)/libmkl_core.a\
        $(MKLPATH)/libmkl_intel_thread.a \
        $(MKLPATH)/libmkl_core.a\
        $(MKLPATH)/libmkl_intel_thread.a \
        $(MKLPATH)/libmkl_core.a\
        -liomp5 -lpthread
  LIBS=  $(SCALAPACK_LIBS) $(BLACS_LIBS)  \
         $(INTEL_MKL)

You should know the linking LIBS are just making everything together, so it doesn’t matter what intermediate variables in the makefile(or arch.make for SIESTA). Just make sure the compiler link the libraries in this way.

Mission Complete!

Ta-da

The apps should be working for now. If not, let me provide these tricky makefiles for ya. They may not work for you immediately, but I think they could be a better start than those in the package.

Updates

Peter Klaver suggested the heavy optimization -O3 could be problematic for some of the libs in VASP. If the executable is not working, please check the optimization options. Thanks Peter!

I did have to reduce the optimization level on one file, fftmpi.F90. With -O3 I get an executable that gives me errors ‘Input and output electron density differ’. But reducing optimization for fftmpi.F90 to -O1 fixes it. I had emailed someone who was using linux/ifort earlier. He too found that the mpi version produces those errors unless optimization was reduced.

What if I want to make the output in my way ?

其实Wordpress的官方已经给了一个足够清楚的解释，那就是修改模板的function.php文件。首先，在你的comments.php里面用到wp_list_comments函数的地方用这样的代码：

<ol id="comment_list">
  <?php wp_list_comments('type=comment&callback=fruity_comment'); ?>
  <li class="navigation clearfix">...</li>
</ol>

问题的关键就是callback这个参数，它会调用function.php里设置的函数，比如我自己这个fruity_comment，在这里你终于可以为所欲为了。

下面就是我在function.php里面定义的相关情况：

<?php function fruity_comment($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment; ?>
  <li <?php comment_class('clearfix'); ?> id="li-comment-<?php comment_ID() ?>">
    <div id="comment-<?php comment_ID(); ?>">
      <?php echo get_avatar($comment,$size='40'); ?>
      <div class="reply">
        <h4>
          <?php comment_reply_link(
                array_merge( $args, array(
                                       'reply_text' =>'Reply',
                                       'depth' => $depth, 
                                       'max_depth' => $args['max_depth'])
                                   )
               ) ?>
        </h4>
      </div>
      <h4 class="comment-author">
        <?php printf(__('%s:'), get_comment_author_link()) ?>
      </h4>
      <?php if ($comment->comment_approved == '0') : ?>
        <em><?php _e('Your comment is awaiting moderation.') ?></em>
        <br />
      <?php endif; ?>
      <small class="comment-meta">
        <a href="<?php echo htmlspecialchars( 
                         get_comment_link( $comment->comment_ID ) ) ?>">
          <?php printf(__('%1$s'), get_comment_date()) ?>
        </a>
      </small>
      <div class="the_comment"> 
      <?php comment_text() ?>
      </div>
    </div>
<?php
        }
?>

有点乱，但是毕竟这一切都是透明的了。需要特别注意的一点，

// Do not write </li>!

Wordpress会自动把不匹配的闭合掉，这样你的评论才能层层包进来。
这样你在写css的时候肯定会得心应手多了，而且由于function.php是模板的一部分，你对评论的设置在别人那里也是肯定会被应用的。

It’s long since I last updated my blog, simply because I’m building the new home here brick by brick. I don’t like my previous blog theme and function and I think I can “CHANGE”. And so, change happens. Remind you, this is my first ever wordpress theme. It still needs some more refinement, but I’m loving this.

The codename of the theme is “fruity” in my mind. I wanted to create a fresh and sweet theme that brings joy to my blog. And so you see the jars on the front page of the website. It is not easy to illustrate realistically with vector tools, I illustrate one for a day in my holiday. I did not tell my parents what I’m doing and they felt me “insane”. Of course their opinions for not sitting too long is right, but it would be better if they can understand me.

I wanted to reuse the elements in the inner pages but I gave up the idea because there are always graphical contents in my blog, my portfolio and other pages, a blank theme could be better for you to focus on the actual content instead of the shiny jars. The paper-like style is inspired from a book with different printed book designs. I feel the subtle gradient can be good visual dividers for the web and so I tried. It looks OK for now. But I still find it a little plain and I’m thinking about another change before I find some other inspiration.

Developing Wordpress theme is not very easy for you need to dive into PHP, provided you can mockup HTML and CSS from a picture. Fortunately I can handle this (maybe for the most). As long as you constructed something ‘working’, you began to think about making it work better. That’s why I made a photo album function with Jquery by myself. I searched many tools or plugins, they did look awesome in some way, but I just wanted a constant way like apps like “iPhoto” or “Windows Photo Browser”. I have to admit I knew little about jquery before, but now things are easier for me to understand and make. Practice makes perfect, true.

The theme is not for release I think, since it’s a personal styled rather than a common used. But if anyone interested in anything in my theme: Cross browser CSS compatibility, Jquery usage, Wordpress customization, and also vector illustration, feel free to contact with me. And by the way, I tested browsers like IE6, IE7, Firefox 3, Safari 3 (Opera not yet).

I would like to thank CSS-Tricks and Best Web Gallery for inspirations and necessary learning. I will write about other details later.

欢迎大家来到我的新家，我放假回家之前就想做一个自己的主页，而且想好了用Wordpress来做，断断续续从画画到写html,css再到改模板，加javascript(主要是jquery)效果，花了到今天为止差不多一个月吧。我查了一下我文件夹的第一张图片，是1月26号创建的。这段时间没少到处骚扰大家，不知道大家是不是已经都烦了。我这个模板还是不提供下载了，倒不是因为别的原因，主要是这个模板并不太适合做通用，有很多自己才知道的hack。但是如果大家对其中的功能感兴趣，我也很乐意和大家交流。马上快毕业了，希望给自己留个出路，比如说万一做IT什么的。