
內容簡介
屏幕展示外掛
使用本外掛,您可以利用 WordPress 原生工具建立簡報,而最好的部分是:完成後不需要上傳到 SlideShare。您可以隨時在自己的網站上分享/呈現簡報。本外掛的簡報範本基於 Luke Mahé 和 Marcin Wichary 的 html5slides,使用 CSS3 和 HTML5 進行建置,並可在現代瀏覽器上運作。
隨意在 github 上貢獻此外掛。
範例
http://dsgnwrks.pro/html5-presentation-example
編輯幻燈片說明
如果您瀏覽 範例,將會帶您閱讀此外掛提供的樣式和幻燈片類型。可下載範例簡報以查看幻燈片的操作方式。只需下載 xml 檔案,以正常上傳 WordPress。
自訂外掛
如果您想要使用自己的樣式,完全忽略預設樣式,只需將名稱為 html5slide-replace.css 的樣式表新增至您的佈景主題中。如果您想要在所提供的樣式表上方新增樣式表,請新增一個名為 html5slide-style.css 的樣式表至您的佈景主題中。
此外掛提供啟用/停用 <?php wp_head(); ?> 和 <?php wp_footer(); ?> 選項。
本外掛是完全獨立於已安裝的佈景主題,因此預設不啟用此選項。如果啟用了 <?php wp_head(); ?>,您可能會發現佈景主題及其他外掛的樣式表可能會干擾預設樣式表,但如果停用,您可能會錯失其他外掛的功能。
<?php wp_footer(); ?> 選項將允許管理列顯示於投影片頁面上(如果已啟用),也允許其他外掛和佈景主題添加功能。如果您有一個可以追蹤分析的外掛,並希望追蹤投影片頁面,您可能會需要啟用此選項。
儘管如此,如果您不想啟用 <?php wp_head(); ?> 或 <?php wp_footer(); ?>,您可以使用內建的 hook dsgnwrks_html5_head(); 和 dsgnwrks_html5_footer(); 在投影片頁面上添加功能。
範例如下:
```
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
```
不同幻燈片類型
每個幻燈片都有幾種選擇,可決定幻燈片類型,無標題幻燈片、Segue 幻燈片、顯示子元素動畫等。
不同版面配置
每個「標題幻燈片」都有幾個選項可決定簡報類型,包括是否為寬螢幕、Faux Widesc…等。
外掛標籤
開發者團隊
② 後台搜尋「HTML5 Slideshow Presentations」→ 直接安裝(推薦)
原文外掛簡介
With this plugin, You’ll be able to create a presentation in no time using WordPress’ familiar built-in toolset, and the best part is, You won’t need to upload to slideshare when you’re done. You’re hosting your own presentations and can share/present them anytime. The presentation template is based on html5slides by Luke Mahé and Marcin Wichary. This plugin was built with CSS3 and HTML5 and is intended to be used on modern browsers.
Feel free to contribute to this plugin on github.
Demo
http://dsgnwrks.pro/html5-presentation-example
Instructions for editing slides
If you view the demo, it will walk you through the styles and slide types available in this plugin. The sample presentation is available for you to download so you can see the slides in action. Just download the xml file, and import it to WordPress the way you normally import WordPress to WordPress.
Customizing the Plugin
If you want to use your own styles and completely disregard the default styles provided, add a stylesheet named html5slide-replace.css to your theme folder. If you would like to add a stylesheet in addition to the one provided, instead add a stylesheet named html5slide-style.css to your theme folder.
The plugin provides an option to enable/disable as well as .
This plugin is intended to operate completely independent of your installed theme, so by default this option is off. You may find that when is enabled, that your theme, and other plugins stylesheets may interfere with the default stylesheet, but you may be missing other plugins functionality if you disable it.
The option will allow the admin bar to be displayed on the slide page (if it is enabled) and will allow other plugins and your theme to add functionality. If you have a plugin that keeps track of analytics and you want it to track the slide pages, you will probably want this enabled.
That being said if you don’t want or enabled, you can use the built-in hooks, dsgnwrks_html5_head(); and dsgnwrks_html5_footer(); to add functionality to the slide pages.
Example:
Different Slide Types
Each Slide has several options for determing the type of slide, whether it is a slide without a title, a segue slide, if you want animated revealing child elements, ect.
Different layouts
Each “Title Slide” has a few options for determining the type of presentation, including whether it’s widescreen, “Faux Widescreen,” or standard, and if the presentation will have a logo stamp on the bottom right (the featured image).
Instructions for presenting
After you create a presentation, create a page to display it on. You’ll see a new dropdown menu for choosing HTML5 Presentations. Select you presentation, save and view!
Press Enter, space, right arrow to advance; Backspace, left arrow to go back.
Enter full-screen mode (F11 or Shift-Command-F in Chrome) before presenting.
You should be able to press Ctrl+R/F5/Cmd+R at any time to refresh without losing your place in the presentation.
If an iframe steals your focus and you can’t advance any more, please click outside the slide on the background to give the focus back to the presentation.
Caveats
These presentations should work on modern Chrome, Firefox, Safari, Opera… and generally touch devices. Your mileage in IE9 may vary.
Presentation Examples
Send me your presentations!
Send me links to presentations you make (contact form or @jtsternberg on twitter), and I’ll post them here, as well as on my site.
Sample Slide Show
http://dsgnwrks.pro/html5-presentation-example
