如何从现有的HTML模板代码创建Wordpress菜单?

梦想杀手

因此,我一直在为网站使用HTML模板,并添加了Wordpress功能。但是,我在Header.php中的导航仅将get_permalink用于页面链接。我想保留所有功能的相同导航菜单,但允许在仪表板中添加页面。

当前代码如下:

    <!-- Overlay Navigation Menu -->
<div class="overlay-navigation-wrapper enter-bottom" data-no-scrollbar data-animation="slide-in">
    <div class="overlay-navigation-scroll-pane">
        <div class="overlay-navigation-inner">
            <div class="v-align-middle">
                <div class="overlay-navigation-header row collapse full-width">
                    <div class="column width-12">
                        <div class="navigation-hide overlay-nav-hide">
                            <a href="#"> <span class="icon-cancel"></span> </a>
                        </div>
                    </div>
                </div>
                <div class="row collapse full-width">
                    <div class="column width-12">
                        <nav class="overlay-navigation nav-block">
                            <h4 class="menu-title">Website Title</h4>
                            <ul>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>">Home</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'About' ) ) ?>">About</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Services' ) ) ?>">Treatments &amp; Offers</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Shop' ) ) ?>">Store</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>">Contact</a> </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Overlay Navigation Menu End -->
<div class="wrapper reveal-side-navigation">
    <div class="wrapper-inner">
        <!-- Header -->
        <header class="header header-bottom header-fixed-on-mobile header-transparent" data-sticky-threshold="window-height" data-bkg-threshold="100">
            <div class="header-inner">
                <div class="row nav-bar">
                    <div class="column width-12 nav-bar-inner">
                        <div class="logo">
                            <div class="logo-inner"> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>"><img src="" alt="Sartre Logo" /></a> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>"><img src="" alt="Sartre Logo" /></a> </div>
                        </div>
                        <nav class="navigation nav-block secondary-navigation nav-right">
                            <ul>
                                <li>
                                    <!-- Button -->
                                    <div class="v-align-middle"> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>" class="button small text-uppercase pull-right no-margin-bottom">Book Now </span></a> </div>
                                </li>
                                <li class="aux-navigation hide">
                                    <!-- Aux Navigation -->
                                    <a href="#" class="navigation-show overlay-nav-show nav-icon"> <span class="icon-menu"></span> </a>
                                </li>
                            </ul>
                        </nav>
                        <nav class="navigation nav-block primary-navigation nav-center">
                            <ul>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>">Home</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'About' ) ) ?>">About</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Services' ) ) ?>">Treatments &amp; Offers</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Shop' ) ) ?>">Store</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>">Contact</a> </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- Header End -->
        <!-- MAIN CONTENT GOES HERE-->
    </div>
</div>

该代码非常肿,但是允许主题随附的移动响应能力和其他Javascript效果。

解决此问题的最佳方法是什么?谢谢

我是Joe Too

步骤1:在您的functions.php中注册一个导航菜单

<?php
function my_wp_nav_menu(){
    register_nav_menus( array(
        'primary' => 'Main Navigation'
    ) );
}
add_action( 'after_setup_theme', 'my_wp_nav_menu' );

步骤2:进入控制面板中的外观->菜单,添加导航项,然后选择主导航作为菜单。

第3步:将ulHTML中的导航替换为

<?php
wp_nav_menu( array(
    'container' => '',
    'theme_location' => 'primary'
) );

这将用可以在WordPress中控制的WordPress菜单替换您的列表。默认情况下,用来wp_nav_menu包装菜单列表,div这就是我们设置菜单的原因,'container' => ''因此,您获得的只是菜单列表标记。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从现有的AWS环境创建云形成模板?

来自分类Dev

从现有的python代码创建方法

来自分类Dev

我可以在WordPress中使用现有的HTML和CSS代码吗?

来自分类Dev

使用现有的绘图创建闪亮的下拉菜单

来自分类Dev

如何从现有的代码库副本创建新的应用程序

来自分类Dev

Angular 6 集成现有的 html 模板

来自分类Dev

为现有的异步代码创建C ++阻止功能

来自分类Dev

如何将现有的HTML / JQuery转换为ASP.net/JQuery代码

来自分类Dev

对现有的bookdown模板进行了较小的更改,如何设置自定义模板/default.html

来自分类Dev

根据现有菜单创建html下拉菜单

来自分类Dev

如何将现有的wordpress移至kubernetes?

来自分类Dev

如何使用内部现有代码为PhpStorm创建PHP模板?

来自分类Dev

如何更改现有的Atom.io代码段

来自分类Dev

如何在Android下重用现有的Qt代码?

来自分类Dev

如何改善我现有的GetOpenfile函数代码

来自分类Dev

如何从现有的远程分支创建本地分支?

来自分类Dev

如何为现有的Maven项目创建EAR文件

来自分类Dev

如何从现有的protobuf文件创建Java pojo?

来自分类Dev

如何从现有的Numpy数组创建Numpy数组

来自分类Dev

如何从现有的远程分支创建本地分支?

来自分类Dev

如何从现有的TXT文件创建TMX

来自分类Dev

如何为现有的ruby项目创建Java接口

来自分类Dev

如何使用现有的 jmeter 脚本创建 jmeter 脚本

来自分类Dev

如何使用现有的 json 文件创建 tmTheme 文件?

来自分类Dev

如何使用现有代码创建方法

来自分类Dev

找不到现有的视图模板

来自分类Dev

jQuery在现有的Bootstrap下拉菜单中创建New LI标签

来自分类Dev

如何在html中覆盖现有的meta标签?

来自分类Dev

对现有的wordpress实例使用grunt

Related 相关文章

  1. 1

    如何从现有的AWS环境创建云形成模板?

  2. 2

    从现有的python代码创建方法

  3. 3

    我可以在WordPress中使用现有的HTML和CSS代码吗?

  4. 4

    使用现有的绘图创建闪亮的下拉菜单

  5. 5

    如何从现有的代码库副本创建新的应用程序

  6. 6

    Angular 6 集成现有的 html 模板

  7. 7

    为现有的异步代码创建C ++阻止功能

  8. 8

    如何将现有的HTML / JQuery转换为ASP.net/JQuery代码

  9. 9

    对现有的bookdown模板进行了较小的更改,如何设置自定义模板/default.html

  10. 10

    根据现有菜单创建html下拉菜单

  11. 11

    如何将现有的wordpress移至kubernetes?

  12. 12

    如何使用内部现有代码为PhpStorm创建PHP模板?

  13. 13

    如何更改现有的Atom.io代码段

  14. 14

    如何在Android下重用现有的Qt代码?

  15. 15

    如何改善我现有的GetOpenfile函数代码

  16. 16

    如何从现有的远程分支创建本地分支?

  17. 17

    如何为现有的Maven项目创建EAR文件

  18. 18

    如何从现有的protobuf文件创建Java pojo?

  19. 19

    如何从现有的Numpy数组创建Numpy数组

  20. 20

    如何从现有的远程分支创建本地分支?

  21. 21

    如何从现有的TXT文件创建TMX

  22. 22

    如何为现有的ruby项目创建Java接口

  23. 23

    如何使用现有的 jmeter 脚本创建 jmeter 脚本

  24. 24

    如何使用现有的 json 文件创建 tmTheme 文件?

  25. 25

    如何使用现有代码创建方法

  26. 26

    找不到现有的视图模板

  27. 27

    jQuery在现有的Bootstrap下拉菜单中创建New LI标签

  28. 28

    如何在html中覆盖现有的meta标签?

  29. 29

    对现有的wordpress实例使用grunt

热门标签

归档