前言介紹
- 這款 WordPress 外掛「BS4WP Component」是 2020-04-12 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2020-12-11，距離現在已有 1605 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.2.4 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
hakik |
外掛標籤
slider | carousel | bootstrap slider | bootstrap carousel | bootstrap4 carousel |
內容簡介
這是一款輕量級的外掛程式，可以在任何螢幕上顯示輪播。
只需安裝外掛後，在「設定」>「一般」>「Bootstrap 4 元件設定區段」即可使用此外掛程式的選項。
如果您正在使用以 Bootstrap4 為基礎的佈景主題，則無需更改設定。但如果您的佈景主題未基於 Bootstrap4，而您想使用 Bootstrap4 輪播，則必須將它更改為「是」。
使用方法
首先上傳您要顯示為幻燈片的圖片
每個圖片都有唯一的 ID，將該 ID 複製並設置在 [bs4slide id="IMAGE_UNIQUE_ID"] 中
基本輪播 [沒有點, 沒有箭頭, 沒有標題]
[bs4slider id="test_slider"]
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
帶箭頭輪播 [沒有點, 沒有標題]
[bs4slider id="test_slider" arrow="yes"]
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
帶箭頭和點的輪播 [沒有標題]
[bs4slider id="test_slider" arrow="yes" dot="2"] //如果有 3 張圖片，則點 2 就是它從 0 開始計算
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
帶箭頭、點和標題的輪播
[bs4slider id="test_slider" arrow="yes" dot="2"]
[bs4slide id="26" active="active" alt="first" cap_title="First slide label" cap_subtitle="Nulla vitae elit libero, a pharetra augue mollis interdum." /]
[bs4slide id="26" alt="second" cap_title="First slide label" cap_subtitle="Nulla vitae elit libero, a pharetra augue mollis interdum." /]
[/bs4slider]
在 PHP 代碼中使用
[bs4slider id="test_slider"]
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
'); ?>
附註: 不要在每個幻燈片 [bs4slide] 之後按 Enter 鍵，否則會破壞短碼。
更多屬性
[bs4slider]
[bs4slider class=”YOUR_OWN_CLASS”] 如果需要
[bs4slider id=”YOUR_OWN_ID”] 以使每個輪播都具有唯一性
[bs4slider arrow=”yes/no”] 默認為「no」
[bs4slider left_icon=”fas fa-angle-left”] 如果您使用 Fontawesom
[bs4slider right_icon=”fas fa-angle-right”] 如果您使用 Fontawesom
[bs4slider dot=”3″] 默認為空。如果有 4 張幻燈片，它將是「3」
[bs4slide]
[bs4slide class=”YOUR_OWN_CLASS”] 默認為「d-block w-100」
[bs4slide id=”YOUR_UPLOADED_IMG_ID”]
[bs4slide size=”YOUR_DESIRED_IMG_SIZE”] 默認為「large」
[bs4slide alt=”YOUR_IMG_ALT”] 默認為空
[bs4slide active=”active”] 從此圖像開始輪播
[bs4slide cap_class=”YOUR_OWN_CLASS”] 它有助於您對反應控制。默認為「d-none d-md-block」
[bs4slide cap_title=”YOUR_TITLE_TO_DISPLAY”] 默認為空。如果您不需要顯示標題，則無需使用它。
[bs4slide cap_subtitle=”YOUR_SUB_TITLE_TO_DISPLAY”] 默認為空
原文外掛簡介
This is a lightweight plugin to display carousel in any screen.
Just install the plugin and you will get options of this plugin in Settings > General > Bootstrap 4 Component Settings Section
If you are running a theme which is built with Bootstrap4 then you don’t need to change the settings. But if your theme is not
built with Bootstrap4 and you want to use Bootstrap4 Carousel you have to change it to “Yes”.
Usage
First Upload the images, which you want to show as slides
Each image has unique id copy that id and set it in [bs4slide id="IMAGE_UNIQUE_ID"]
Basic Slider [No dots, No arrows, No Caption]
[bs4slider id="test_slider"]
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
Slider With Arrow [No dots, No Caption]
[bs4slider id="test_slider" arrow="yes"]
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
Slider With Arrow and Dots [No Caption]
[bs4slider id="test_slider" arrow="yes" dot="2"] // If 3 images then dot 2 it counts from 0
[bs4slide id="26" active="active" alt="first" /]
[bs4slide id="26" alt="second" /]
[bs4slide id="26" alt="third" /]
[/bs4slider]
Slider With Arrow, Dots and Caption
[bs4slider id="test_slider" arrow="yes" dot="2"]
[bs4slide id="26" active="active" alt="first" cap_title="First slide label" cap_subtitle="Nulla vitae elit libero, a pharetra augue mollis interdum." /]
[bs4slide id="26" alt="second" cap_title="First slide label" cap_subtitle="Nulla vitae elit libero, a pharetra augue mollis interdum." /]
[/bs4slider]
Usage in PHP Code
N.B. Don’t press enter after each slides[bs4slide] otherwise the shortcode will be broken.
More Attributes
[bs4slider]
[bs4slider class=”YOUR_OWN_CLASS”] if you want
[bs4slider id=”YOUR_OWN_ID”] for making unique each slider
[bs4slider arrow=”yes/no”] by default it is “no”
[bs4slider left_icon=”fas fa-angle-left”] If you are using Fontawesom
[bs4slider right_icon=”fas fa-angle-right”] If you are using Fontawesom
[bs4slider dot=”3″] by default it is null. If you have 4 slide it will be “3”
[bs4slide]
[bs4slide class=”YOUR_OWN_CLASS”] by default it is “d-block w-100”
[bs4slide id=”YOUR_UPLOADED_IMG_ID”]
[bs4slide size=”YOUR_DESIRED_IMG_SIZE”] by default it is “large”
[bs4slide alt=”YOUR_IMG_ALT”] by default it is null
[bs4slide active=”active”] from this image you want to start the slider
[bs4slide cap_class=”YOUR_OWN_CLASS”] It will help your for responsive control. By default “d-none d-md-block”
[bs4slide cap_title=”YOUR_TITLE_TO_DISPLAY”] By default it is null. If you have no need to display caption no need to use it.
[bs4slide cap_subtitle=”YOUR_SUB_TITLE_TO_DISPLAY”] By default it is null. If you have no need to display caption subtitle no need to use it.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「BS4WP Component」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Advanced Bootstrap Carousel 》Advanced Bootstrap Carousel 是一個輕量級的響應式幻燈片外掛。此外掛為 Bootstrap Carousel 提供進階和擴展功能。只有在您的佈景主題包含 Twitter Bootstra...。
Bootstrap Carousel 2x Post Widget 》Bootstrap Carousel 2x Post Widget是WordPress Recent Responsive Posts widget的進階版本，允許您增加自訂設定來顯示來自特定分類的最新文章，可依指定的排...。
All in One Slider 》All in One Slider 是一款非常易於使用的響應式圖片幻燈片外掛程式，適用於 WordPress 網站。此外掛程式結合了兩種非常知名的 jQuery 幻燈片，使用者只需單擊...。