[WordPress] 外掛分享: BS4WP Component

首頁外掛目錄 › BS4WP Component
WordPress 外掛 BS4WP Component 的封面圖片
全新外掛
安裝啟用
尚無評分
1922 天前
最後更新
問題解決
WordPress 4.6+ PHP 5.2.4+ v1.1 上架:2020-04-12

內容簡介

這是一款輕量級的外掛程式,可以在任何螢幕上顯示輪播。

只需安裝外掛後,在「設定」>「一般」>「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 代碼中使用

<?php echo do_shortcode('
[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”] 默認為空

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.1) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「BS4WP Component」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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.

延伸相關外掛

文章
Filter
Mastodon