我的 WordPress 自定义主题没有 CSS 样式答案

【问题标题】：My WordPress Custom Theme Does Not Get CSS Styles我的 WordPress 自定义主题没有 CSS 样式
【发布时间】：2017-05-09 17:07:00
【问题描述】：

我正在学习如何从头开始制作 WordPress 主题，我现在正面临一个严重的问题。问题是我添加的 CSS 样式不适用于我的主题的菜单导航。

这是index.php 文件：

    <?php 
get_header();

if (have_posts()):
    while (have_posts()) : the_post(); ?>

    <article class="post">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <h2><?php the_content(); ?></h2>
    </article>

    <?php endwhile;

    else:
        echo '<p>No content found!</p>';

    endif;

get_footer();
?>

这是header.php 文件：

    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width">
        <title><?php bloginfo('name'); ?></title>
        <?php wp_head(); ?>
    </head>

<body <?php body_class(); ?>>

    <div class="container">
        <header class="site-header">
            <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
            <h5><?php bloginfo('description'); ?></h5>

            <nav class="site-nav">
                <?php 
                $args = array(
                    'theme_location' => 'primary'
                );
                ?>
                <?php wp_nav_menu($args); ?>
            </nav>
        </header>

如您所见，我将 css 类 site-nav 添加到标记中，然后将其编码为 css 样式：

.site-nav ul{
    margin:0;
    padding:0;
}
.site-nav ul:before, .site-nav ul:after{content: "";display:table;}
.site-nav ul:after{clear:both;}
.site-nav ul{*zoom:1;}
.site-nav ul li{
    list-style:none;
    float:left;
}

但是每当我运行主题时，我都会看到这个屏幕：

但请注意，我已经有 functions.php，它添加了 CSS 样式，并且我添加了其他 CSS 样式，例如 body 等，它可以工作，但我不明白为什么菜单导航没有改变！！

这是functions.php：

<?php 
function learningWordpress_resources(){
    wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','learningWordpress_resources');
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
));
?>

这是完整的 CSS code

【问题讨论】：

在标题中包含css路径并在样式表文件中添加所有css。它将自动工作
style.css 文件是否放在你的主题文件夹中？？
请提供functions.php
@Gulshan 如何在标题中包含 css 路径
@pouhiocuprai 首先告诉我你添加的主题的结构..

标签： php css wordpress wordpress-theming custom-wordpress-pages

【解决方案1】：

你必须提供类

 <nav class="site-nav">
 <?php 
      $args = array(
      'theme_location' => 'primary',
       'menu_class'     => 'site_nav',
     );
   ?>
  <?php wp_nav_menu($args); ?>

像这样去检查Css

#header .site-nav{} // container class
#header .site-nav ul {} // container class first unordered list
#header .site-nav ul ul {} //unordered list within an unordered list
#header .site-nav li {} // each navigation item
#header .site-nav li a {} // each navigation item anchor
#header .site-nav li ul {} // unordered list if there is drop down items
#header .site-nav li li {} // each drop down navigation item
#header .site-nav li li a {} // each drap down navigation item anchor

functions.php 更改

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
  register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
    ));
}
   add_theme_support('menus');

参考： http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/

【讨论】：

你找到解决方案了吗？？