WP SinoType

Description

WP SinoType is a simple WordPress plugin for WordPress website owners with little or no knowledge of how to edit CSS, and more importantly have no knowledge of Chinese web-safe fonts. The plugin is a tool to select a Chinese and English font stack to target HTML heading tags (H1-H6) and the HTML body tag. This works for multi-language websites in Chinese and English and also provides an English font fallback for numbers and and English words on native Chinese sites.

This plugin is developed by Grafica Real, a Beijing website design and development company.

PHP Documentation

Plugin is adding submenu to Appearance bucket with name WP Sinotype. The internal id is ‘sinotype_config’
Plugin is working with 4 variables which are saved in WP table ‘options’ 1. 2. 3. 4. sinotype_heading_cn Ð value of Chinese font for Headings sinotype_heading_en Ð value of English font for Headings sinotype_body_cn Ð value of Chinese font for body text sinotype_body_en Ð value of English font for body text

All values are simple string, which is CSS code for selected font-family
The // === Experimental === // Section is under development and has no impact on plugin functionality
While submitting selected fonts there is a IF statement for custom English heading font
All fonts used in plugin are filled in 2 arrays.

1. st_fonts_cn Ð Array of Chinese fonts
2. st_fonts_en Ð Array of English fonts

Both Array structure is: Array(0=>Array(‘font css code’,’front end title’), 0=>Array(‘font css code’,’front end title’)); Example: Array(0=>Array(‘Arial’,’Arial’), 0=>Array(‘sans-serif’,’Sans Serif’));
Fonts can be freely added to the arrays without any inpact on functionality.
While loading the actual website, plugin inserts at the end of header section where it rewrites the font-family set before, for h1 Ð h6 and body.

In Detail:

• body {font-family:values;} Ð Rewrites the font-family for the whole body element
• h1,h2,h3,h4,h5,h6{font-family:values;} Ð Rewrites the font-family for h1 Ð h6 elements
• h1>,h2>,h3>,h4>,h5>,h6>{font-family:values;} Ð Rewrites font-family of all elements inside of H1 Ð H6 elements.

In case of setting h1 Ð h6 font family by a class, plugin will not work. For example the html code is

Hello World!

and CSS is : .heading{font-family:Georgia;} In this case plugin cannot rewrite font-family of H1 element.

In order to use this plugin, WP theme in use MUST have in header.php file, and it must be placed just before tag.

Javascript Documentation

Javascript in plugin is used for Live preview of selected font-families (excluding English custom font).
Script used in this plugin is based on jQuery Javascript library, therefore this library must be used.
At first load Javascript scan which fonts are selected (loaded from database by php) and set those font to live preview.
After setting first load fonts, Javascript is listening to the select boxes and once user select other font Javascript changes live preview css to desired font-family.
Case of broken javascript has no inpact on functionality of the plugin, Javascript is used only for live preview of fonts.