wordpress怎么添加导航菜单栏

wordpress怎么添加导航菜单栏,第1张

1、进入到我们自己的WordPress后台,找到文章下面的分类目录!

2、点击新建分类目录,注意目录下面的别名我们要改一下!

3、再找到页面下面的新建页面按钮,这时,我们要新建一个页面!

4、页面建好之后,我们找到外观下面有个菜单,我们选择它!

5、这时我们选择刚才我们新建的页面和分类目录,把他们都添加到菜单!

6、添加完成后,我们会发现重复了,这时我们要把其中的一个给移除掉,留下分类目录的那个!

7、全部添加完成后,点击保存菜单即可,我们在前台刷新一下即可查看我们新添加之后的效果!

1)配置多个页面

        1)在你的 React Native 项目中安装react-navigation这个包

            yarn add react-navigation

        2)导入依赖创建路由

            import { createStackNavigator } from 'react-navigation'、

            import Home from "./Home"

            import Details from "./Details"

        3)创建

          const RootStack = createStackNavigator(

            {

               //两个js页面

               Home: HomeScreen, 

              Details: DetailsScreen,

            },

            {

              initialRouteName: 'Home',

            }

          )

2)页面切换

        <Button

          title="跳转详情页面"

          onPress={() =>this.props.navigation.navigate("Details")}

        />

        <Button

          title="跳转自己本身Home页面:navigate"

          onPress={() =>this.props.navigation.navigate("Home")}

        />

        <Button

          title="跳转自己本身Home页面:push"

          onPress={() =>this.props.navigation.push("Home")}

        />

        <Button

          title="返回按钮"

          onPress={() =>this.props.navigation.goBack()}

        />

    3)页面传值:

        传值数据A:

            <Button

              title="跳转详情页面,实现传递参数"

              onPress={() =>

                this.props.navigation.navigate("Details", { name: "张三", age: 20 })

              }

            />

        接收数据B:

            this.props.navigation.getParam("name", "admin")

    4)配置标签栏

      //1.设置默认标题

      static navigationOptions = {

        title: "Home"

      }

      //2.设置参数作为标题

      static navigationOptions = ({ navigation }) =>{

        return {

          title: navigation.getParam("name", "Details")

        }

      }

      //3.单个页面更改样式

      static navigationOptions = {

        title: "Home",

        headerStyle: {

          backgroundColor: "#0000f4"

        },

        headerTintColor: "#605",

        headerTitleStyle: {

          fontWeight: "bold"

        }

      }

      //4.在路由表中配置样式,实现多个页面共享样式

      const Route = createStackNavigator(

        //配置路由页面

        {

          Home: {

            screen: Home

          },

          Details: Details

        },

        {

          //配置初始化页面

          initialRouteName: "Home",

          //跨页面共享标题栏设置

          navigationOptions: {

            headerStyle: {//标题栏背景样式

              backgroundColor: "#f4511e"

            },

            headerTintColor: "#fff", //标题栏文本颜色

            headerTitleStyle: {//标题栏文本样式

              fontWeight: "bold"

            }

          }

        }

      )

      //5.标题栏设置

      header: null,

      headerLeft: (

      ),

      headerRight: (

      )

二、底部导航栏,顶部导航栏

    createTabNavigator(或者TabNavigator)

    createBottomTabNavigator

    案例:

        //顶部导航栏

        const Route2 = createTabNavigator({

          New1: New1,

          New2: New2

        })

        //底部导航栏

        const Route2 = createBottomTabNavigator({

          Home: {

            screen: Home,

            navigationOptions: {

              title: "首页"

            }

          },

          New: {

            screen: Route3,

            navigationOptions: {

              title: "消息"

            }

          },

          My: {

            screen: My,

            navigationOptions: {

              title: "我的"

            }

          }

        })

里面有个车仔设置点进去,找到主题就可以更换,或者直接进入App也可以。在浏览器中输入自己的域名,在域名的后方添加wp,admin即可进入管理员登录界面,登陆完成以后,找到页面左边栏的外观一栏,并点击进入下一步。

诺威达导航主题的切换

进入外观栏目以后,如果我们的导航菜单之前已经建立好,只是需要导入新主题,就选择自定义如果还没有建立过导航,就需要进入到下方的菜单来建立,进入自定义的界面以后,我们找到页面中的导航菜单这一栏,并点击进入下一步,在导航菜单的目录下,找到Primary Menu,在这一项的下方找到自己已经建立好的导航菜单,选择好以后,在页面右上角找到保存并发布按钮,完成 *** 作。

在车载导航仪里找到里面的图片,看有选项可以设置成壁纸的,导航有的有这功能,设置主题里面,安装百度地图出门必备神器,支持线站搜索,可直接搜索公交线路.支持更丰富的路线规划方式屏幕可设置常亮,导航更贴心,还可以下载来进行更换墙纸。‍


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11939852.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存