在没有插件的情况下在Wordpress 5.5上从头开始创建标题MENU

问题描述

  1. 1°我使用一个儿童主题(父主题ASTRA)

  2. 2°子主题具有header.PHP文件

  3. 3°header.PHP使用父主题(ASTRA)的标题标签

  4. 4°定制文件
    具有HTML内容的header.PHP
    stylecode.css
    stylecodejs.js

  5. 链接file.css和file.js位于functions.PHP
    wp_enqueue_style('stylecss',get_stylesheet_directory_uri()
    wp_enqueue_style('stylejs',get_stylesheet_directory_uri()

  6. 6°我遵循了自定义标题的文档
    https://developer.wordpress.org/themes/functionality/custom-headers/
    7°,但页眉仍未出现在页面上。
    我将wp_nav_menu(array $ args = array())函数放在functions.PHP文件中,但是该函数显示了我创建的所有页面,但没有菜单

    有没有人在Hand上做了一个可以让我发光的标头?
    以下是文件
    谢谢!

in the functions.PHP file

 wp_nav_menu(
        array(
            'theme_location' => 'primary','container_class' => 'main-navigation','depth' => 2
        )
    );

function pp_load_css() {

wp_enqueue_style( 'style',get_stylesheet_uri() );

wp_register_style('stylecode',get_stylesheet_directory_uri() . '/assets/css/stylecode.css',array(),false,'all'); 

wp_enqueue_style('stylecode');
}
add_action( 'wp_enqueue_scripts','p5_load_css' );

function pp_load_js(){

        wp_enqueue_script('jQuery');

        wp_enqueue_script('stylecodejs',get_stylesheet_directory_uri() . '/assets/js/stylecodejs.js','jquery',true);

        wp_enqueue_script('stylecodejs');
    }   
add_action( 'wp_enqueue_scripts','p5_load_js' );


in the header.PHP file

<?PHP
/**
 * The header for Astra Theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Astra
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

?>
<!DOCTYPE html>
<?PHP astra_html_before(); ?>

<html <?phP Language_attributes(); ?>>

<head>

<?PHP astra_head_top(); ?>

<Meta charset="<?PHP bloginfo( 'charset' ); ?>">

<Meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="profile" href="https://gmpg.org/xfn/11">

<?PHP wp_head(); ?>

<?PHP astra_head_bottom(); ?>

</head>

<body <?PHP astra_schema_body(); ?> <?PHP body_class(); ?>>

<?PHP astra_body_top(); ?> 

<?PHP wp_body_open(); ?>
<div 
<?PHP
    echo astra_attr(
        'site',array(
            'id'    => 'page','class' => 'hFeed site',)
    );
    ?>
>

<a class="skip-link screen-reader-text" href="#content"><?PHP echo esc_html( astra_default_strings( 'string-header-skip-link',false ) ); ?></a>

    <?PHP astra_header_before(); ?> 

    <!--  astra_header HEADER TAG -->

    <?PHP astra_header_after(); ?>

     <?PHP astra_content_before(); ?>   

<link href='https://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>

<link href='style.css' rel='stylesheet' type='text/css'>

<header class='main_h'>

    <div class='row'>
        <a class='logo' href='#'>P/F</a>

        <div class='mobile-toggle'>
            <span></span>
            <span></span>
            <span></span>
        </div> <!-- / class='mobile-toggle' -->

        <nav>
            <ul>
                <li><a href='.sec01'>Section 01</a></li>
                <li><a href='.sec02'>Section 02</a></li>
                <li><a href='.sec03'>Section 03</a></li>
                <li><a href='.sec04'>Section 04</a></li>
            </ul>
        </nav>

    </div> <!-- / row -->

</header> <!-- / class='main_h' --> 


 <div id="content" class="site-content">
    <div class="ast-container"> 
```
in the stylecode.css file

/**
 * The header for Astra Theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Astra
 * @since 1.0.0
 */

.main_h {
  position: fixed;
  top: 0px;
  max-height: 70px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  background: none;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  top: -100px;
  padding-bottom: 6px;
  font-family: "Montserrat",sans-serif;
}
@media only screen and (max-width: 766px) {
  .main_h {
    padding-top: 25px;
  }
}

.open-nav {
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.sticky {
  background-color: rgba(225,180,205,0.93);
  opacity: 1;
  top: 0px;
  border-bottom: 1px solid gainsboro;
}

.logo {
  width: 50px;
  font-size: 25px;
  color: #8f8f8f;
  text-transform: uppercase;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
}
@media only screen and (max-width: 766px) {
  .logo {
    float: none;
  }
}

nav {
  float: right;
  width: 60%;
}
@media only screen and (max-width: 766px) {
  nav {
    width: 100%;
  }
}
nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}
@media only screen and (max-width: 766px) {
  nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
  }
}
nav ul li {
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5;
}
@media only screen and (max-width: 766px) {
  nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }
}
nav ul a {
  color: #888888;
  text-transform: uppercase;
  font-size: 12px;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
@media only screen and (max-width: 766px) {
  .mobile-toggle {
    display: block;
  }
}
.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #8f8f8f;
  display: block;
}

.row {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  padding: 0 2%;
}

* {
  Box-sizing: border-Box;
}

body {
  color: #8f8f8f;
  background: white;
  font-family: "Cardo",serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 30px;
  line-height: 1.8;
  text-transform: uppercase;
  font-family: "Montserrat",sans-serif;
}

p {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 2;
}

.content {
  padding: 50px 2% 250px;
}

.hero {
  position: relative;
  background: url(http://www.philippefercha.com/cd/toggle-menu-bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding-top: 110px;
  min-height: 500px;
  letter-spacing: 2px;
  font-family: "Montserrat",sans-serif;
}
.hero h1 {
  font-size: 50px;
  line-height: 1.3;
}
.hero h1 span {
  font-size: 25px;
  color: #e8f380;
  border-bottom: 2px solid #e8f380;
  padding-bottom: 12px;
  line-height: 3;
}

.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #e8f380;
  position: absolute;
  bottom: 40px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e8f380;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

```

```
in the stylecodejs.js file

function nameheader() {
    // Sticky Header
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $('.main_h').addClass('sticky');
        } else {
            $('.main_h').removeClass('sticky');
        }
    });
    // Mobile Navigation
    $('.mobile-toggle').click(function() {
        if ($('.main_h').hasClass('open-nav')) {
            $('.main_h').removeClass('open-nav');
        } else {
            $('.main_h').addClass('open-nav');
        }
    });
    $('.main_h li a').click(function() {
        if ($('.main_h').hasClass('open-nav')) {
            $('.navigation').removeClass('open-nav');
            $('.main_h').removeClass('open-nav');
        }
    });
    // navigation scroll lijepo radi materem
    $('nav a').click(function(event) {
        var id = $(this).attr("href");
        var offset = 70;
        var target = $(id).offset().top - offset;
        $('html,body').animate({
            scrollTop: target
        },500);
        event.preventDefault();
    });
}
```



解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)