dongxia8656 2016-12-24 06:11
浏览 61
已采纳

我的WordPress自定义主题不会获得CSS样式

I'm learning how to make a WordPress theme from scratch & I'm facing a bad problem right now. The problem is that the CSS styles that I've added does not apply to the menu navigation of my theme.

Here's the index.php file:

    <?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();
?>

Here's the header.php file:

    <!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>

As you can see I added the css class site-nav to the tag and then I coded this as css styles to it:

.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;
}

But whenever I run the theme, I get this screen:

enter image description here

But note that I already have the functions.php which adds the CSS styles and I have added other CSS styles such as body or etc to it and it works but I don't why the menu navigation does not change !!

Here's the 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'),
));
?>

Here's the full CSS code

  • 写回答

1条回答 默认 最新

  • dqd78456 2016-12-24 06:34
    关注

    You have to provide class 

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

    Goto check Css like this

    #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 changes

    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');

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？