{"id":143,"date":"2022-12-25T19:52:53","date_gmt":"2022-12-25T19:52:53","guid":{"rendered":"https:\/\/www.joyokanjikai.com\/learning-japanese\/?p=143"},"modified":"2024-07-04T18:06:32","modified_gmt":"2024-07-04T18:06:32","slug":"how-to-write-furigana-in-wordpress-answered","status":"publish","type":"post","link":"https:\/\/www.joyokanjikai.com\/learning-japanese\/how-to-write-furigana-in-wordpress-answered\/","title":{"rendered":"How to Write\/Add Furigana in a WordPress Post or Page? (Answered)"},"content":{"rendered":"\n<p class=\"has-link-color wp-elements-38f901af608175de40fa4c014a4ba70b\" style=\"font-size:24px\">Wondering how to write furigana (<a href=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/what-are-furigana\/\" title=\"\">those little hiragana characters you sometimes see above Japanese kanji<\/a>) in WordPress? <\/p>\n\n\n\n<p>Here&#8217;s how:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1.<\/h2>\n\n\n\n<p class=\"has-link-color wp-elements-035f8b14339daadecfdd3df975dd421e\">Step 1 &#8211; You&#8217;re going to need to use the &#8216;Custom HTML&#8217; WordPress Block (note: not sure what WordPress Blocks are? \u2013 <a href=\"https:\/\/youtu.be\/PhHeZs0KMro\" target=\"_blank\" rel=\"noopener\" title=\"\">here&#8217;s a quick YouTube video<\/a>). <\/p>\n\n\n\n<p>Here&#8217;s how to find it: click the plus symbol in the blue square at the top-left of the WordPress editor. <\/p>\n\n\n\n<p>Here&#8217;s what that looks like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"689\" src=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/insert-wordpress-block-symbol-1024x689.jpg\" alt=\"\" class=\"has-border-color has-quaternary-border-color wp-image-144\" srcset=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/insert-wordpress-block-symbol-1024x689.jpg 1024w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/insert-wordpress-block-symbol-300x202.jpg 300w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/insert-wordpress-block-symbol-768x517.jpg 768w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/insert-wordpress-block-symbol.jpg 1466w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2. <\/h2>\n\n\n\n<p>Step 2 &#8211; In the Search box that appears straight after you click the above symbol, start typing &#8216;custom&#8217;, and almost as you do, you should then see the &#8216;Custom HTML&#8217; block appear just below it. <\/p>\n\n\n\n<p>Shown here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"809\" src=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/custom-html-wordpress-block-search-1024x809.jpg\" alt=\"\" class=\"has-border-color has-quaternary-border-color wp-image-145\" srcset=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/custom-html-wordpress-block-search-1024x809.jpg 1024w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/custom-html-wordpress-block-search-300x237.jpg 300w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/custom-html-wordpress-block-search-768x607.jpg 768w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/custom-html-wordpress-block-search.jpg 1532w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3. <\/h2>\n\n\n\n<p>Step 3 &#8211; Click where it says &#8216;Custom HTML&#8217; to insert the block into your WordPress post or page.<\/p>\n\n\n\n<p>Which should then look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"155\" src=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-1024x155.jpg\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-1024x155.jpg 1024w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-300x45.jpg 300w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-768x116.jpg 768w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-1536x233.jpg 1536w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block.jpg 1572w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4. <\/h2>\n\n\n\n<p>Step 4 &#8211; Where it says &#8220;Write HTML&#8230;&#8221;, write (or copy and paste) the sentence or paragraph (containing the words\/characters you&#8217;d like to add furigana to) in whatever language\/s you like. For this example we&#8217;ll go for a mixture of English and Japanese: <\/p>\n\n\n\n<p style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">&#8220;Here&#8217;s an example of some Japanese kanji characters \u6f22\u5b57&#8221;<\/p>\n\n\n\n<p>Which when written inside the Custom HTML block looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"155\" src=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-with-example-1024x155.jpg\" alt=\"\" class=\"wp-image-147\" srcset=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-with-example-1024x155.jpg 1024w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-with-example-300x45.jpg 300w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-with-example-768x116.jpg 768w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-with-example-1536x233.jpg 1536w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-with-example.jpg 1572w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-link-color wp-elements-e5da5f05e605c827643659111395bcd5\">Step 5. <\/h2>\n\n\n\n<p class=\"has-link-color wp-elements-dbc19a6f6f1e792c7bc6fd6e78430459\">Step 5 &#8211; You can now use the HTML &lt;ruby&gt; element (<a href=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/how-to-write-furigana-in-html\/\" title=\"\">read more on this here<\/a>) to show some furigana of your choosing above the kanji.<\/p>\n\n\n\n<p>Continuing with our example, choosing to display the hiragana &#8216;\u304b\u3093&#8217; and &#8216;\u3058&#8217; as furigana above each of our respective kanji characters, gives us:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"155\" src=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-example-kanji-with-furigana-1024x155.jpg\" alt=\"\" class=\"wp-image-194\" srcset=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-example-kanji-with-furigana-1024x155.jpg 1024w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-example-kanji-with-furigana-300x45.jpg 300w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-example-kanji-with-furigana-768x116.jpg 768w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-example-kanji-with-furigana-1536x233.jpg 1536w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-custom-html-block-example-kanji-with-furigana.jpg 1572w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-foreground-color has-text-color\">Which all being well, will then display (<strong>once you either save and view the post\/page on your actual website as any normal reader would \u2013 i.e. on the front end of your site \u2013 OR by clicking within the Custom HTML Block to bring up the block options and then toggling from &#8220;HTML&#8221; to &#8220;Preview&#8221;<\/strong>) as shown below.<\/p>\n\n\n\n<div class=\"wp-block-columns has-border-color has-quaternary-border-color has-primary-color has-text-color is-layout-flex wp-container-core-columns-is-layout-95e72c11 wp-block-columns-is-layout-flex\" style=\"border-width:1px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p style=\"color:black;\">Here&#8217;s an example of some Japanese kanji characters <ruby>\u6f22<rt>\u304b\u3093<\/rt>\u5b57<rt>\u3058<\/rt><\/ruby><\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-foreground-color has-text-color has-tiny-font-size\">NOTE: you can easily view any WordPress post or page at any time by saving your post [by clicking &#8220;Save draft&#8221;] and then clicking &#8220;Preview&#8221; \u2013 both of which can be found at the top-right of the WordPress editor.<\/p>\n\n\n<div class=\"lightweight-accordion bordered\"><details><summary class=\"lightweight-accordion-title\"><span>Here&#8217;s where to find the &#8220;Save draft&#8221; and &#8220;Preview&#8221; buttons (Click to Expand).<\/span><\/summary><div class=\"lightweight-accordion-body\">\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-editor-save-draft-and-preview-links-1024x509.jpg\" alt=\"\" class=\"wp-image-154\" srcset=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-editor-save-draft-and-preview-links-1024x509.jpg 1024w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-editor-save-draft-and-preview-links-300x149.jpg 300w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-editor-save-draft-and-preview-links-768x382.jpg 768w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-editor-save-draft-and-preview-links-1536x764.jpg 1536w, https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-content\/uploads\/2022\/12\/wordpress-editor-save-draft-and-preview-links.jpg 1834w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<\/div><\/details><\/div>\n\n\n<p><\/p>\n\n\n\n<p class=\"has-extra-large-font-size\"><strong>Done!<\/strong><\/p>\n\n\n\n<p class=\"has-link-color wp-elements-7cc045744539614f2fbc2510dccb3017\">NOTE: for more on how to write furigana in HTML, <a href=\"https:\/\/www.joyokanjikai.com\/learning-japanese\/how-to-write-furigana-in-html\/\" title=\"\">check out this other post of ours<\/a>!<\/p>\n\n\n\n<p>Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wondering how to write furigana (those little hiragana characters you sometimes see above Japanese kanji) in WordPress? Here&#8217;s how: Step 1. Step 1 &#8211; You&#8217;re going to need to use the &#8216;Custom HTML&#8217; WordPress Block (note: not sure what WordPress Blocks are? \u2013 here&#8217;s a quick YouTube video). Here&#8217;s how to find it: click the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[16],"tags":[21,26,20],"class_list":["post-143","post","type-post","status-publish","format-standard","hentry","category-kanji","tag-furigana","tag-how-to","tag-html"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":41,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":1191,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts\/143\/revisions\/1191"}],"wp:attachment":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}