wordpress - 在 Wordpress 帖子中添加直接选项卡链接

Question

要在帖子中创建选项卡，我已经使用了自定义字段插件。这个插件对用户非常友好，效果很好，我想保留它。

这是我的 Wordpress 管理仪表板中这些帖子选项卡的屏幕截图。

这是帖子的显示：

但是，此插件不会将这些选项卡的路径添加到 url。目前，我无法获得带有选定打开选项卡的帖子的直接链接。

我正在寻找这个 url 结果：http://xxxx/categorie/title-of-my-post/tab1

有什么想法或解决方案吗？

注意：Wordpress仪表板将由客户使用，因此添加内容必须尽可能方便，任何方便的解决方案都可以接受。

谢谢

Answer 1

您好，您可以通过 url 打开特定选项卡，只需像这样使用 your-link/categorie/title-of-my-post/#tab1

如果 tab1 是 tab1 的 id 如果你可以提供你的网站 url 我可以提供准确的 url

但这是一个例子：-

http://kav.in/wp-ui-for-wordpress/#accordion

Answer 2

那是因为该插件的代码中没有“链接网址”。

试试这些插件

一个。http://wordpress.org/plugins/simple-side-tab/ 添加指向任何页面的链接。

湾。http://wordpress.org/plugins/wp-ui/

Answer 3

ACF 中的“选项卡”实际上并不在数据库中创建内容表。它们仅用于后端数据输入的布局。因此，当从“Tab 1”调用您的字段“text”时，您只需在模板上执行the_field('text')即可调用它。

您需要将您的被调用字段包装在页面模板的选项卡中。这与 ACF 无关，而是与您的模板无关。

<ul id="tabbed-nav">
     <li class="tab-1">Your field called <em>text</em>: <?php the_field('text'); ?></li>
     <li class="tab-2">Your second Tab Content <?php the_field('text_tab2'); ?></li>
</ul>

Answer 4

我做了一个小演示。

使用 ACF 插件，我创建了一个包含 3 个字段的字段组：tab1、tab2 和 tab3。我给了组规则，所以它们在页面“ tabtest（工作演示） ”上可见。

对于演示，我使用了 jQuery UI 中的选项卡。由于当前页脚和页眉用于另一个演示，因此我没有费心将 js 放在正确的位置。

<?php get_header(); ?>

    <div id="primary" class="site-content">

        <div id="content" role="main">

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                    <li><a href="#tabs-2">Proin dolor</a></li>
                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                </ul>

                <div id="tabs-1"><p><?php the_field('tab1');?></p></div>
                <div id="tabs-2"><p><?php the_field('tab2');?></p></div>
                <div id="tabs-3"><p><?php the_field('tab3');?></p></div>
            </div>

            <script>
                $(function() {
                    $( "#tabs" ).tabs();
                });
            </script>

        </div><!-- #content -->

    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>