Alright, this post is admittedly narrow in the scope of people that might find it interesting, but with all the new in-China blogs starting up, I figured I’d throw a little help their way. Mind you, this is particularly for blogs that use WordPress.
The desired result:
Take a Chinese sentence, 这个åšå®¢çœŸåŽ‰å®³!, and cause it to do this (put your mouse cursor over the sentence): 这个åšå®¢çœŸåŽ‰å®³!
Now, of course, this can be changed to have the language in any order depending on what you’re trying to express:
zhège bókè zhēn lìhai!
This blog is radtastic!
The Code:
This is done by enclosing the phrase you want to have the effect on with a <span> tag. You then assign the tag a class (tech term for “name that tells it what style to use” – more on style below). On my blog I use “pytooltip” as the class name, but you can change this to whatever you want, as long as it’s not the same as any other class on your site.
Here’s an example of the code I used for the above phrase:
<span class=“pytooltip” title=“zhège bókè zhÄ“n lìhai! | This blog is radtastic!”>这个åšå®¢çœŸåŽ‰å®³!</span>
You can see the class=”pytooltip” names the tag, and the title=”” contains the content of the tooltip/mouseover effect.
The Style/CSS:
Next you need to add the “style” settings to your WordPress template. This is simply done by navigating over to the
Presentation/Theme Editor tab in the Administration (backend) of the blog. Very likely anyone with a WordPress blog will be familiar with this screen. If not, this is where the template files for your blog’s theme can be edited. The first (default) file to be displayed for editing is the
style.css file (if not, locate it on the right-hand side).
If you don’t know much about CSS, check this brief introduction out.
My site uses the following two CSS assignments:
span.pytooltip {border-bottom: 1px dashed #b6b6b6;}
span.pytooltip:hover {color: #fff; background:#a10101; cursor: help;}
The first defines the initial style of the affected phrase (how it looks before the person puts their mouse over it). The second defines what happens when the mouse is ‘hovering’ over the text/phrase. Again, for information on specific effects you can use with CSS, check out that link above. Basically, all I do is change the bottom border to a dashed line (using color #b6b6b6) and then on hover I change the text color, background and make the cursor display the question mark. Simple enough.
Making It Easier:
The problem with all this is that it’s a bit of a pain to continually insert all that code for each phrase. If you are using the WordPress Visual Editor (WYSIWYG editor), you also have to go the additional step of editing the HTML for the post. To get around this what I’ve done is turned off the visual/rich text editor, so I’m able to insert HTML tags directly into the text of my post and not have them stripped when I press the “Publish” button. NOTE: In doing so, you’ll need to learn how to add style in plain text mode. If you’ve no background in HTML it can be daunting at first glance, but it’s actually quite easy and will hugely benefit you in the long run.
With the WYSIWYG editor off, you’ll notice that WP uses a series of buttons at the top of the editing window, these are called QuickTags and make inserting HTML a breeze. Basically, you just select your text, press the appropriate QuickTag button, and Mao’s your uncle.
To make the Pinyin Tooltip easy to insert, I’ve simply added a QuickTag called “py” that will automatically insert the following code around the selected phrase I wish to Pinyinify:
<span class=“pytooltip” title=“”></span>
This is reasonably easy to do. Simply use an HTML or basic text editor and edit the quicktags.js file located in the [blog root directory]/wp-includes/js/ directory.
Scroll down a bit and you’ll see a series of items that all start with edButtons[edButtons.length] =. Each of these items represents a QuickTag button. Insert the following code somewhere in this section (where depends on in which order you want the button to appear):
edButtons[edButtons.length] =
new edButton('ed_pytooltip'
,'py'
,''
,''
,'p'
);
Save and upload this file to the corresponding directory on your server. That’s it. Reload your Write Post page, and it should display a new “py” button.
That’s all. Hope this little “How/Hao To” assists some of you in the China blogsphere. If you have any questions or modifications to this, please leave a comment.
Credit, where credit is due:
Like an idiot, I decided to do a bit of a search of the Chinese blogsphere AFTER I had written this to see if anyone had made mention of it before… and sure enough my good friends Rick and John both have great posts about this… if my post doesn’t help you, check out the following:
How to Annotate Chinese with Pinyin Tone Markers at Panda Passport
Adding the pinyin quicktag in WordPress at Sinosplice
John also makes mention of the WordPress Quicktags Guide, if you want more information about adding Quicktags.
Resources:
Alright, so you’ve got all this set up.. how do you get the pinyin? Well, first you need an Input Method Editor (IME), once you’ve got that, you can input Chinese characters. Take these Chinese characters and head over to Adsotrans (or use Wenlin) and get the pinyin with the tone markers and all that.
UPDATE:
I was talking to Rick about this today and he mentioned that the <abbr> tag shows up in RSS feeds, whereas the <span> tag doesn’t… so… I might suggest replacing all mentions of SPAN above with ABBR, particularly in the main HTML used in your posts, the CSS and the Quicktags.js file.
