Question

HTML CODE

<div class="tabs main bottom-40">
    <ul class="tabNavigation list-unstyled bottom-0 clearfix">
        <li class="active"><a data-toggle="tab" href="#tab1">First Tab</a></li>
        <li class=""><a data-toggle="tab" href="#tab2">Second Tab</a></li>
        <li class=""><a data-toggle="tab" href="#tab3"><i class="icon-cloud"></i>Third Tab</a></li>
    </ul>
    <div id="tab1" class="tabs-container active">
        <div class="tabs-content">
            <p>Morbi in dui quis est pulvinar ullamcorper.</p>
        </div>
    </div>
    <div id="tab2" class="tabs-container">
        <div class="tabs-content">
            <p>Morbi in dui quis est pulvinar ullamcorper.</p>
        </div>
    </div>
    <div id="tab3" class="tabs-container">
        <div class="tabs-content">
            <p>Morbi in dui quis est pulvinar ullamcorper.</p>
        </div>
    </div>
</div>

我想要短代码，如：
[突出部]
    [tab_item title =＆＃34; First Tab＆＃34;] Morbi in dui quis est pulvinar ullamcorper。[/ tab_item]
    [tab_item title =＆＃34; Second Tab＆＃34;] Morbi in dui quis est pulvinar ullamcorper。[/ tab_item]
    [tab_item title =＆＃34; Third Tab＆＃34;] Morbi in dui quis est pulvinar ullamcorper。[/ tab_item]
[/凸片]

Answer 1

从此链接下载插件 - https://wordpress.org/plugins/shortcodes-ultimate/

试试此代码

[su_tabs]
  [su_tab title="Tab 1"] Tab 1 content [/su_tab]
  [su_tab title="Tab 2"] Tab 2 content [/su_tab]
  [su_tab title="Tab 3"] Tab 3 content [/su_tab]
[/su_tabs]

Answer 2

这是你怎么做的。

// Add Shortcode
function custom_shortcode() {
//echo your html in here.
}
add_shortcode( '', 'custom_shortcode' );

// now shortcode available in editor like so
[custom_shortcode]

//更多文档和解释here来做你想做的事。它有点棘手但可能。

Answer 3

要制作标签，您将需要CSS。此外，显示的代码最适合使用id＆＃39; tab1＆＃39;

例如，

<div id='tab1'><a href='#'></a></div>
<style>
#tab1{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 4%;
    width: 10%;
    color: white;
    background-color: black;
    border-radius: 5px;
}
a{
    text-decoration: none;
    color: white;
}
a:hover{
    text-decoration: underline;
    color: green;
}
</style>

您可以将其直接嵌入网页。

如果你想添加其他内容，只需复制/粘贴div，将其ID更改为tab2，复制/粘贴样式内部，重命名顶部的＃tab2，然后向左更改：到10％。

如何使这个HTML选项卡到WordPress短代码？

3 个答案: