WordPress RoyalSlider 多功能輪播外掛&中文化下載

03/25 | wordpress分享留言(23)

<前言>

有在注意國外 wordpress 市集的朋友,應該有發現到不管是 theme 還是 plugin,功能都相當的全面且完整,小弟也常常購買相關產品,的確幫了我不少的忙。

然而語系的整理往往會佔據我開發上的許多時間,再加上自己本身也踩過幾次地雷,買到不堪用的外掛卻無法退費,demo 頁面也只能看到前臺卻看不到後臺,能夠評估是否值得購買的中文說明往往都是對岸同胞的 Google 翻譯火星文,

於是我就想如果有更清楚的說明以及前後臺的實際操作畫面,是否能幫助更多朋友來使用這些方便的工具,所以我把自己曾購買過並已經使用在好幾個專案中的工具整理了一下,生出了這系列的廣告文加中文語系檔的付費下載,希望能幫助到有需要的朋友,也能幫助到自己的荷包XD~

 

RoyalSlider 多功能輪播外掛介紹


img-royalslider-introduce

無論是在那一種類型的網站中,圖像的呈現往往是關鍵,尤其是大面積的輪播廣告,更是是否能在第一時間吸引使用者的主要因素,也因此透過豐富的互動方式來呈現精彩的圖片內容,是每一個網站的基本配備。

 

今天要介紹的這支外掛 RoyalSlider ,事實上跟目前市集名列前茅的產品如 Slider Revolution 、LayerSlider 相比,它比較沒有那麼多的轉場特效跟圖層設定,乍看下可能會覺得它不夠酷炫,但因為我比較講究實用,太多酷炫的效果可能會讓老電腦跑不動,所以我最常用的還是它。

 

另外一個吸引我的因素,除了它能在手機裝置上完整呈現外,還支援觸碰手勢操作,也就是說它可以提供手機裝置的使用者更接近於原生 APP 的使用體驗。

 

其它的特色,它在官網上洋洋灑灑的列快 30 點,有興趣的朋友可以上去看看。以下就我自己的使用經驗,整理出最常使用的三大特色,並附上展示頁面與後臺介面操作,讓有需要的朋友可以快速了解 RoyalSlider 的基本功能。

 

<一>十二種輪播介面

RoyalSlider 有 12 種的介面可供切換,透過細部設定還能設計出更多的介面,所有基本效果如下:

 

1.水平切換

img-royalslider-style0 範例頁面:https://dotcreativestudio.com/wordpressdemo/

 

2.水平+縮圖

img-royalslider-style1 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style2/

 

3.垂直+縮圖

img-royalslider-style2 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style3/

 

4.水平頁籤

img-royalslider-style3 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style4/

 

5.垂直輪播

img-royalslider-style4 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style5/

 

6.垂直頁籤

img-royalslider-style5 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style6/

 

7.延伸+標題

img-royalslider-style6 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style7/ 

 

8.延伸

img-royalslider-style7 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style8/

 

9.相簿

img-royalslider-style8 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style9/

 

10.滾動頁籤

img-royalslider-style9 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style10/

 

11.筆電外框

img-royalslider-style10 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style11/

 

12.分割

img-royalslider-style11 範例頁面:https://dotcreativestudio.com/wordpressdemo/wordpress-royalslider/style12/

 

以上的效果,都可以進入範例網站的後臺做調整,後臺登入資訊如下:

登入網址:https://dotcreativestudio.com/wordpressdemo/wp-login.php

帳號:test

密碼:test

控制臺 > 多功能輪播 > 編輯廣告

 

<二>七種建立廣告模式

 

一般的輪播功能,最常見的就是自行上傳圖片來建立內容,但除了基本模式外, RoyalSlider 還設計了其它六種的方方式來新增圖片,說明如下:

img-royalslider-backend

1.自定輪播廣告

基本的建立模式,從媒體庫新增檔案後插入圖片。

 

2.文章內容廣告

如果你的文章有設定特色圖片,可以直接從特色圖片中建立廣告,只要選擇要顯示的文章類別即可。

 

3.相簿藝廊廣告

wordpress 本身內建插入相簿的功能,只要加入一段簡碼,直接讓你現有的 wordpress 相簿立刻套用 wordpress 的設定與播放效果。

 

4.Instagram 廣告

前陣子才被 Facebook 蒐購的相簿服務 Instagram 也有支援,只要先在設定中同步你的 Instagram 帳號,就可以透過 Instagram 的相簿來建立圖片。

 

5.相簿網站 500px 廣告

以擁有最多高畫質女體照片(?)聞名的相簿服務 500px 也有支援,特別的地方是可以從最熱門照片、編輯精選、以及分類中的圖片來建立廣告。

 

6.相簿網站 Flickr 廣告

全球容量最大的圖床 Flickr 也是有支援,這很方便把 Flickr 當作網站圖床的使用者來建立廣告。

 

7.外掛 NextGEN 廣告

著名的外掛 NextGEN galler 也是支援的,增加簡碼後亦可套用 RoyalSlider 的設定。

 

以上的設定,都可以進入範例網站的後臺做新增,後臺登入資訊如下:

登入網址:https://dotcreativestudio.com/wordpressdemo/wp-login.php

帳號:test

密碼:test

控制臺 > 多功能輪播 > 編輯廣告 > 新增輪播廣告

 

<三>彈性介面修改

除了內建的版面外,還可以透過一些預設的參數來或是直接輸入 HTML 來修改內容,修改如徑如下:

img-royalslider-custom

{{image_tag}} :主要元素的標籤,可能是圖片、影片、或 HTML 區塊

{{limage_url}}:圖片的 URL

{{image_width}}:圖片的寬度

{{image_height}}:圖片的高度

{{thumbnail}}:縮圖

{{thumbnail_width}}:縮圖的寬

{{thumbnail_height}}:縮圖的高

{{title}}:圖片的標題

{{description}}:圖片的說明

更多的 API 請參考:http://help.dimsemenov.com/kb/wordpress-royalslider-tutorials/wp-using-slide-markup-editor

 

中文化說明

另外在我中文化的過程中,發現作者少了一些語系的設定,我已有與作者反應,在新版還未釋出之前,我先用 javascript 來翻譯語系檔沒有的部份,設定方法如下:

 

1.下載 RoyalSlider 中文包,並將其解壓縮(此中文包未含主程式)。

2.完成 RoyalSlider 的購買與安裝。

3.將 new_royalslider-zh_TW.po 與 new_royalslider-zh_TW.mo 置於 plugin/new-royalslider/languages 裡面。

4.將 custom-wp-admin.js 置於 themes/你的主題/js 資料夾裡面,如果你的主題沒有 js 資料夾則自行建立。

5.開啟 themes/你的主題/function.php 檔案,將以下程式碼貼入:

function custom_admin_js() {

$url = get_option(‘siteurl’);

$url = get_bloginfo(‘template_directory’) . ‘/js/custom-wp-admin.js’;

echo ‘”<script type=”text/javascript” src=”‘. $url . ‘”></script>”‘;

}

add_action(‘admin_footer’, ‘custom_admin_js’);

6.完成中文化

 

小結

如果大家覺得這支外掛不錯,可以直接去 Themeforest 進行購買,強烈建議不要去對岸下載,你永遠不會知道裡面有包含著什麼東西。 如果不知道該如何在 Themeforest 購買外掛的朋友可以參考這一篇文章

 

購買 RoyalSlider中文化贊助下載NT$199

 

 

 

23 篇留言

  1. Fren 說:

    感謝大大整理這麼詳細,
    已收藏XD

  2. Gavin 說:

    請問,您的贊助中文化下載,裡面有包含插件嗎? 還是只有語系檔案呢?

  3. Gavin 說:

    抱歉,剛才沒仔細看到,文內您已經有提到了,感謝

  4. Sherry 說:

    請問一下喔!我在themeforest買了版面跟它的外掛one-page-html,照方法FTP將外掛檔案上傳到「wp-content/plugins」目錄下,或是用wordpress的新增外掛方式,都成功不了,請問為什麼會這樣呢?

    • admin 說:

      Hello Sherry~

      成功不了指的是:
      1.外掛安裝失敗
      2.外掛安裝成功,但把 royalslider 的 shortcode 放在頁面或文章中,卻沒出現輪播功能

      有連結可以讓我看一下嗎?

  5. Eric Yang 說:

    帮助很大,好文

  6. 小蔡 說:

    你好!!!
    對這相片、廣告的外掛很有興趣!!!

    請問~~~目前網頁版型寬幅只到960的解析度~~~~
    這樣支援上會有差異嗎?

    如果以後換版型的話,授權是否可以跟著轉換!!!

    謝謝

    • oberon 說:

      您好!

      1.它可以設定看是要滿版還是固定寬度,如果是滿版它就會自動跟著你的版型寬度做縮放,
      2.換版型沒有差,它的授權是跟網址走的,一個網址一次授權。

  7. Nicole 說:

    你好!謝謝你的介紹。我想問怎樣改變圖片的大小,因為現在我的網站,一個頁面的圖片slider跟另一個頁面的slider不一樣。
    謝謝!求救啊!

  8. 恩恩 說:

    我的佈景裡面只有 functions.php 沒有function.php 把語法加入 functions.php 裡上傳後沒有任何作用
    是不是語法要改變 怎改呢?

    • oberon 說:

      您好!

      您可以先試著看一下 functions.php 裡面有沒有 include 其它檔案,然後試著把您要修改的語法貼到 include 的檔案試試,或是自行新增 function.php 來處理,都不行的話就只能請求原佈景開發商求助了~

  9. 李聖榮 說:

    請問一下, 我付款了, 沒有收到貴司的中文化, 是否可以寄給我呢

  10. smirkboy 說:

    您好!購買好了,但遇到問題了,要新增外掛上去,確發生安裝失敗
    訊息如下:

    正在安裝上傳的外掛,檔案:codecanyon-700256-royalslider-touch-content-slider-for-wordpress.zip
    檔案解壓縮中…

    安裝外掛中…

    無法安裝該軟件包。 沒有找到有效的外掛。

    外掛安裝失敗。

    是否可以協助呢? 麻煩您了,謝謝!!

  11. peng 說:

    hello,我還是學生 只是想做一些資料建檔用的網站,有沒有類似 且是免費的資源外掛呢??
    (冒險去對岸網站下載? 我主要想做的網站會是照片呈現居多@@

    • oberon 說:

      Hello~你可以到 WordPress 的 Plugin 去搜尋,就會有很多免費的資源外掛—>https://srd.wordpress.org/plugins/search.php?q=slider

回覆文章