主题开发:菜单链接带有页面跳转的选项卡式页面

时间:2015-01-30 作者:ccot

这听起来可能是一个基本问题,但这是我第一次为wordpress开发:

我正在开发一个主题,我需要:

带有导航菜单的登录页,在单击的每个导航菜单项上,登录页重定向到的另一页,我可以在导航菜单中有多个选项卡;例如,在主页上,我们有一个导航菜单:

详细信息|关于|联系人

我希望当用户单击例如:“Details”来更改页面的主要内容(而不是页眉或页脚)并显示包含内容的不同选项卡时。

因此,关于联系人的详细信息应全部指向同一页面,并将菜单项附加到url。

例如,如果用户单击“详细信息”:

==>应该转到url:

host/permanent-page/#details
因此,详细信息选项卡将加载到页面上。

如果用户单击“关于”:

==>它应该转到相同的url:

host/permanent-page/#about
因此,“关于”选项卡将加载到页面上。

如何制作此机制?:

所有页面都指向相同的url,url将附加#itemname

    任何指导/提示都将非常有助于了解从何处开始。

1 个回复
最合适的回答,由SO网友:Howdy_McGee 整理而成

从SEO的角度来看,这听起来很糟糕,但你可以这样做:

Note

在查询中必须这样做的原因(我相信)是因为Wordpress在默认情况下没有“页面存档”,所以您无法通过更改一些.htaccess “简单的豌豆”完成了。。。这会更复杂一些。

创建页面或页面模板。从那里你可以创建一个新的WP_Query 调用所有页面或一组页面。循环浏览您的页面,并为每个页面指定一个特定的<div><h1> 使用页面段塞ID,然后使用哈希创建菜单。

<?php
    $my_pages = new WP_Query( array(
        \'post_type\'      => \'page\',
        \'posts_per_page\' => -1,
        \'orderby\'        => \'menu_order\'
    ) );

    if( $my_pages->have_posts() ) : 
?>
    <?php while( $my_pages->have_posts() ) : $my_pages->the_post(); ?>

        <div id="<?php echo $page->post_name; ?>" class="page-section">
            <h1><?php the_title(); ?></h1>
            <?php the_content(); ?>
        </div> <!-- class="page-section" -->

    <?php endwhile; ?>
<?php endif; ?>
我们得到的可能是这样的:

<div id="about" class="page-section">
    <h1>About</h1>
    <p>Blah blah blah blah. . .</p>
</div> <!-- class="page-section" -->

<div id="details" class="page-section">
    <h1>Details</h1>
    <p>Blah blah blah blah. . .</p>
</div> <!-- class="page-section" -->

<div id="contact" class="page-section">
    <h1>Contact</h1>
    <p>Blah blah blah blah. . .</p>
</div> <!-- class="page-section" -->
现在只要你去http://www.your-url.com/#contact 您将跳转到该页面的“联系人”部分,因为它具有相同的ID。这种菜单称为“跳转菜单”,这是许多网站的功能,例如Wikipedia 用于大截面。如果你转到wikipedia链接并单击字母表中的一个字符,你会注意到页面跳转,URL添加了一个#. 最后,要表达菜单的工作原理,这里有一个JSFiddle of the actual Menu.

因此,根据JSFIDLE,您现在需要创建#page-slug. 你有几个选择,你想怎么做,这完全取决于你。我没有按特定顺序列出这些选项。

创建新的WP Nav菜单(外观->菜单),并创建自定义菜单#page-slug 全部手工完成。这可能会很乏味,只有在你付钱给别人的情况下才会自动完成WP_Query 在页面顶部,循环浏览以创建菜单,rewind_posts(), 然后再次运行查询以生成页面及其内容wp_list_pages() 如果你要运行WP_Query 无论如何

结束

相关推荐

Get_Pages--父级对子级?

我正在一个非常干净和层次结构的网站上使用get\\u页面。作为模板的一部分,我想将子页面显示为模板“样板”的一部分。正在读取Codex documentation, 有两个似乎相关的参数:parent 和child_of.我一直在摆弄它们,用一个简单的转储到页面的主体,就像这样,但我看不出这两个参数有什么根本不同。。。除了给他们带来冲突的风险。例如,如果我设置child_of 至17(有效页)和parent 除了17或1。。。我得到一个空数组。这很有道理。。。但是为什么有两个参数?在扫描文档和代码时找不到