{"id":17741,"date":"2022-07-19T01:12:50","date_gmt":"2022-07-19T05:12:50","guid":{"rendered":"https:\/\/pacificopencourses.col.org\/edt4ol\/?page_id=17741"},"modified":"2022-07-19T01:12:50","modified_gmt":"2022-07-19T05:12:50","slug":"adding-h5p-to-a-blog-post","status":"publish","type":"page","link":"https:\/\/pacificopencourses.col.org\/edt4ol\/learning-challenges\/interactive-learning-with-h5p\/adding-h5p-to-a-blog-post\/","title":{"rendered":"Adding H5P to a blog post"},"content":{"rendered":"<div id=\"content\" class=\"mw-body container\" role=\"main\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div id=\"bodyContent\">\n<div id=\"mw-content-text\" lang=\"en\" dir=\"ltr\" class=\"mw-content-ltr\">\n<p>Now you are ready to add your True False Question to a blog post in your personal WordPress portfolio blog site.\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Step_3\">Step 3<\/span><\/h2>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"activity\" src=\"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-content\/themes\/oeru-course\/idevices\/Icon_activity.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Add your H5P activity to a WordPress blog post<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p>1. To insert your H5P activity into a WordPress blog post, you need to use the individual <b>Shortcode<\/b> for the activity:\n<\/p>\n<ul>\n<li> Find this in the Shortcode box to the right or at the bottom of your saved activity.\n<\/li>\n<li> Copy the Shortcode, including the square brackets around it.\n<\/li>\n<li> To avoid losing the Shortcode as you move through your WordPress site, it is a good idea to paste it into a word-processing document or note tool on your computer for reference.\n<\/li>\n<\/ul>\n<div class=\"thumb tleft\">\n<div class=\"thumbinner thumbnail\" style=\"width:338px;\"><a href=\"https:\/\/wikieducator.org\/File:13_shortcode_box.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/b\/b5\/13_shortcode_box.jpg\" width=\"336\" height=\"280\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">1. Find the shortcode<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>2. Navigate back to your WordPress Posts page, using the main menu on the left-hand side of your screen.\n<\/p>\n<div class=\"thumb tleft\">\n<div class=\"thumbinner thumbnail\" style=\"width:408px;\"><a href=\"https:\/\/wikieducator.org\/File:14_find_posts.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/2\/20\/14_find_posts.jpg\" width=\"406\" height=\"198\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">2. Navigate to the Posts page<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>3. Create a new blog post and give it a suitable title, for example &#8220;H5P practice activities&#8221;. We suggest that you continue using this post to practise embedding <i>all<\/i> the H5P activities you create during this learning challenge. (For your <a href=\"\/edt4ol\/learning-challenges\/interactive-learning-with-h5p\/h5p-interactive-learning-challenge\" title=\"EDT4OL\/H5P\/Interactive content\">submission<\/a> at the end of the learning challenge, you will create a new blog post and embed just three of them.)\n<\/p>\n<ul>\n<li> Add some text and\/or images if you wish.\n<\/li>\n<\/ul>\n<p>4. At the desired position in your post, paste the Shortcode for your H5P activity into a new block (i.e. where it says &#8216;Type \/ to choose a block&#8217;).\n<\/p>\n<div class=\"thumb tleft\">\n<div class=\"thumbinner thumbnail\" style=\"width:470px;\"><a href=\"https:\/\/wikieducator.org\/File:18_type_to_choose_block.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/4\/41\/18_type_to_choose_block.jpg\" width=\"468\" height=\"112\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">4. New block<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>5. In the editing screen, it will look like this:\n<\/p>\n<div class=\"thumb tleft\">\n<div class=\"thumbinner thumbnail\" style=\"width:502px;\"><a href=\"https:\/\/wikieducator.org\/File:19_Shortcode_box.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/thumb\/2\/28\/19_Shortcode_box.jpg\/500px-19_Shortcode_box.jpg\" width=\"500\" height=\"164\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">5. Shortcode pasted into editing screen<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>6. To see your activity as it will appear in your published post, use <b>Preview<\/b>:\n<\/p>\n<ul>\n<li> Click the <b>Preview<\/b> button, select the device type you want to preview for, and click <b>Preview in new tab<\/b>.\n<\/li>\n<\/ul>\n<div class=\"thumb tleft\">\n<div class=\"thumbinner thumbnail\" style=\"width:364px;\"><a href=\"https:\/\/wikieducator.org\/File:20_Preview_in_new_tab.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/2\/26\/20_Preview_in_new_tab.jpg\" width=\"362\" height=\"247\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">6. Choose a preview mode<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>7: Return to the tab with your draft blog post. Continue editing the post or save it.\n<\/p>\n<ul>\n<li> If you need to edit the H5P activity again, you will need to go back to the H5P content section of the WordPress menu and edit it there. Any changes you make in the H5P will automatically be updated in your blog post.\n<\/li>\n<\/ul>\n<p>8. Publish your blog post when you are ready to share it.\n<\/p>\n<p>Congratulations! You have created your first blog post with an H5P activity embedded in it. You will be able to follow a similar process each time you want to add an H5P activity to one of your blog posts.\n<\/p>\n<p>\n<b>Note<\/b>: This is the process for adding H5P to a post on a WordPress <i>blog site<\/i>. There is a different process for embedding H5P into a WordPress <i>course website<\/i>, which uses WikiEducator. We will learn about that <a href=\"\/edt4ol\/learning-challenges\/authoring-a-learning-sequence\/embed-h5p-object\" title=\"EDT4OL\/Authoring\/Embed H5P\">later in this course<\/a>.\n<\/p>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p><!-- \nNewPP limit report\nCPU time usage: 0.093 seconds\nReal time usage: 0.130 seconds\nPreprocessor visited node count: 96\/1000000\nPreprocessor generated node count: 832\/1000000\nPost\u2010expand include size: 7257\/2097152 bytes\nTemplate argument size: 5688\/2097152 bytes\nHighest expansion depth: 7\/40\nExpensive parser function count: 0\/100\n--><\/p>\n<p><!-- Saved in parser cache with key we_en-mw_:pcache:idhash:189699-0!*!0!*!*!2!* and timestamp 20220719051250 and revision id 1097260\n -->\n<\/div>\n<div class=\"visualClear\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<ul class=\"pager\">\n<li class=\"previous\">\n            <a href=\"\/edt4ol\/learning-challenges\/interactive-learning-with-h5p\/h5p-in-wordpress\">\u2190 Previous<\/a>\n          <\/li>\n<li class=\"next\">\n            <a href=\"\/edt4ol\/learning-challenges\/interactive-learning-with-h5p\/creating-your-own-true-false-question\">Next \u2192<\/a>\n          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div id=\"wenote-ids\"><script type='text\/javascript' id='wenotes-ids'>\n    var WEnotesSite = \"https:\/\/wikieducator.org\";\n    var WEnotesPath = \"\/EDT4OL\/H5P\/H5P_blog_post\";\n    var WEnotesSiteID = \"0e3d258fbd36841f92259eefcd41d5e9\";\n    var WEnotesPathID = \"3a4928b25da3d489bb44f4824c662de1\";\n    var WEnotesIDs = { site: \"https:\/\/wikieducator.org\", path: \"\/EDT4OL\/H5P\/H5P_blog_post\", site_id: \"0e3d258fbd36841f92259eefcd41d5e9\", path_id: \"3a4928b25da3d489bb44f4824c662de1\" };\n<\/script><\/div>\n<\/div>\n<footer><\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Now you are ready to add your True False Question to a blog post in your personal WordPress portfolio blog site. Step 3 \u2190 Previous Next \u2192<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":17729,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17741","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/comments?post=17741"}],"version-history":[{"count":1,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17741\/revisions"}],"predecessor-version":[{"id":17742,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17741\/revisions\/17742"}],"up":[{"embeddable":true,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17729"}],"wp:attachment":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/media?parent=17741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}