WP SinoType
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.
- st_fonts_cn ? Array of Chinese fonts
- 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.
Download & install the zip archive
The plugin package installer can be downloaded from the WP2E project tab called “code”.
1 – Select the version to download if this option is available otherwise the “latest” version of the main plugin will be used.
2 – After downloading the zip archive install the plugin package installer in you local environment and activate the script from the plugin list.
3 – Under the section “Plugins” of the admin dashboard you should see a new “Dependencies & Licenses” link. Follow the instructions from this panel to finalize the installation of the missing dependencies.
-
- Give a name to your project
-
- Download the Installer Package
-
- Install & activate the plugin locally
-
- Install the suggested dependencies
Tips: Use the WP2E panel to add/suggest new dependencies to the local installation. Press F5 in the list of dependencies if the changes are not displayed right away.