這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

Simple Tabs Shortcodes

外掛說明

Plugin adds shortcodes to place a page content in tabs. Uses a lightweight JS script, no additional CSS files so you need to add own CSS style to your theme’s stylesheet to ensure proper display of the tabs.

安裝方式

In most cases you can install automatically from plugins page in admin panel.

However, if you want to install it manually, follow these steps:

  1. Download the plugin and unzip the archive.
  2. Upload the entire simple-tabs-shortcodes folder to the /wp-content/plugins/ directory.
  3. Activate the plugin through the Plugins menu in WordPress.

常見問題集

Example usage

There are two shortcodes available, below is a simple example of usage:

[tabs]
[tab title="First tab"]The content of the first tab.[/tab]
[tab title="Second tab"]The content of the second  tab.[/tab]
[tab title="Third tab"]The content of the third tab.[/tab]
[/tabs]

This will output the following HTML:

<div class="tabs-container">
    <div class="tabs-nav">
        <ul>
            <li><a href="#first-tab" class="active">First tab</a></li>
            <li><a href="#second-tab">Second tab</a></li>
            <li><a href="#third-tab">Third tab</a></li>
        </ul>
    </div>
    <div class="tabs-content">
        <section id="first-tab" class="tab active">The content of the first tab.</section>
        <section id="second-tab" class="tab">The content of the second tab.</section>
        <section id="third-tab" class="tab">The content of the third tab.</section>
    </div>
</div>

Optionally, you can set a custom ID by adding id="my-id" in tab shortcode.

Example CSS

Here is an example CSS, make the necessary changes if you want to customize the look and feel of tabs.

.tabs-nav {
    margin: 0;
    border-bottom: 1px solid #ccc;
}
.tabs-nav ul {
    list-style: none;
}
.tabs-nav li {display: inline-block;}
.tabs-nav a {
    display: block;
    padding: 5px 10px;
    border: 1px solid transparent;
    text-decoration: none;
}
.tabs-nav a.active {
    border-color: #ccc;
    border-bottom-color: #fff;
}
section.tab {
    display: none;
    margin-bottom: 15px;
    padding: 15px 0;
}
section.tab.active {display: block;}

Selecting a tab by the URL

You can select default tab by using a hash in the URL – simply add #tab-name at the end of the page URL to select the specific tab. This example URL will select tab with the title / id “something”: http://domain.tld/your-page/#something

Switching to the tab by the link

Tabs can be switched by a normal link, just add a class tab-url to the link. Example:

<a class="tab-url" href="#something">Something</a>

使用者評論

閱讀全部 4 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Simple Tabs Shortcodes〉的開發相關工作。

參與者

〈Simple Tabs Shortcodes〉外掛目前已有 1 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Simple Tabs Shortcodes〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.3 (2020-04-08)

  • Pure JavaScript instead of jQuery.

1.2. (2018-08-12)

  • Support non-Latin URLs.

1.1.2 (2018-12-13)

  • Minor fixes.

1.1 (2017-12-07)

  • Changed class name tab-content to tabs-content.

1.0.2 (2017-02-10)

  • Changes in tabs navigation structure.

1.0 (2017-02-09)

  • First public version.