引导程序代码在WordPress上运行异常

时间:2017-04-20 作者:user214936

我一直在研究我自己的主题,出于某种原因wordpress似乎没有实现我的代码。如果我登录,我的导航栏不会正确加载,但如果我注销,则加载查找;但是,如果我登录,则我在正文中输入的任何引导程序编码都会正确加载,但如果我注销,则不会加载。

登录时:

enter image description here

当我注销时:

enter image description here

标题代码:

  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Le styles -->
    <link href="<?php bloginfo(\'stylesheet_url\');?>" rel="stylesheet">


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
  </head>
<?php echo \'<body class="\'.join(\' \', get_body_class()).\'">\'.PHP_EOL; ?>
    <section class="navigation">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="<?php echo site_url(); ?>">AdventureSpace</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <?php wp_list_pages(array(\'title_li\' => \'\', \'exclude\' => 4)); ?>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
     <section id="body-content">
我看不出有什么理由让它这样加载。您甚至可以看到,当登录时,它无法正确加载导航栏,但它会正确加载列。我现在正在使用xampp在笔记本电脑上运行wordpress。

Update - Further Information我的风格。css(评论部分来自我所做的教程,我还将在下面链接):

/*
Theme Name: WP Bootstrap
Theme URI: http://teamtreehouse.com/how-to-build-a-simple-responsive-wordpress-site-with-twitter-bootstrap
Description: A simple responsive theme built with Bootstrap
Author: Zac Gordon
Author URI: http://zacgordon.com/
Version: 1.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This is an example theme to go along with the Treehouse blog post on <a href="http://teamtreehouse.com/how-to-build-a-responsive-wordpress-site-with-twitter-bootstrap">How to Build a Simple Responsive WordPress Site Using Twitter Bootstrap</a>.
*/

@import url(\'bootstrap/css/bootstrap.css\');
@import url(\'bootstrap/css/bootstrap-responsive.css\');
body { 
     padding-top: 70px; 
     padding-bottom: 40px; 
}
标题。php:

  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Le styles -->
    <link href="<?php bloginfo(\'stylesheet_url\');?>" rel="stylesheet">


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
  </head>
<?php echo \'<body class="\'.join(\' \', get_body_class()).\'">\'.PHP_EOL; ?>
    <section class="navigation">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="<?php echo site_url(); ?>">AdventureSpace</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <?php wp_list_pages(array(\'title_li\' => \'\', \'exclude\' => 4)); ?>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
     <section id="body-content">
页脚。php

     <hr>

      <footer>
        <p>© Company 2012</p>
      </footer>

    </section> <!-- /container -->
    </div> <!-- /container -->

    <?php wp_footer(); ?>

  </body>
</html>
功能。php(这里的许多内容都是为了解决隐藏在管理栏后面的导航栏问题WordPress admin bar overlapping twitter bootstrap navigation):

<?php 

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( \'custom-script\', get_template_directory_uri() . \'/bootstrap/js/bootstrap.js\', array( \'jquery\' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( \'custom-script\' );
}
add_action( \'wp_enqueue_scripts\', \'wpbootstrap_scripts_with_jquery\' );

if ( function_exists(\'register_sidebar\') )
    register_sidebar(array(
        \'before_widget\' => \'\',
        \'after_widget\' => \'\',
        \'before_title\' => \'<h3>\',
        \'after_title\' => \'</h3>\',
    ));
add_action(\'wp_head\', \'mbe_wp_head\');

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = \'body-logged-in\';
    } else{
        $classes[] = \'body-logged-out\';
    }
    return $classes;
}
function mbe_wp_head(){
    echo \'<style>\'
    .PHP_EOL
    .\'body{ padding-top: 40px !important; }\'
    .PHP_EOL
    .\'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }\'
    .PHP_EOL
    .\'body.logged-in .navbar-fixed-top{ top: 46px !important; }\'
    .PHP_EOL
    .\'@media only screen and (min-width: 783px) {\'
    .PHP_EOL
    .\'body{ padding-top: 40px !important; }\'
    .PHP_EOL
    .\'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }\'
    .PHP_EOL
    .\'body.logged-in .navbar-fixed-top{ top: 28px !important; }\'
    .PHP_EOL
    .\'}</style>\'
    .PHP_EOL;
}
?>
此处为原始教程http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

这不是导航栏的问题,如果我没有按照上面的说明取消隐藏,你就不会看到管理栏下面写着“冒险空间”的黑色部分由于某些原因,我的导航栏在登录时加载不正确(参见上图),但在注销时加载良好。

然而,我不太关心导航栏。我想解决这个问题,但我much more interested in why my other boostrap code isn\'t working:

    <div class="container">
    <div class="row">
        <div class="col-md-6">1 of 2</div>
        <div class="col-md-6">1 of 2</div>
    </div>
    <div class="row">
        <div class="col">1 of 3</div>
        <div class="col">1 of 3</div>
        <div class="col">1 of 3</div>
    </div>
    </div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ex laoreet venenatis imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ligula velit, efficitur a accumsan sit amet, cursus eget metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras consequat purus finibus lacus condimentum pulvinar. Aenean at commodo nulla, sollicitudin venenatis tortor. Vestibulum id efficitur sapien. Nulla congue tortor in mauris pulvinar, eu ultricies eros convallis. Sed non ligula id nulla lobortis vestibulum. Ut sed libero vel justo imperdiet suscipit a vel lectus. Aenean eget sapien eu eros facilisis finibus vitae et turpis. Nulla facilisi. Sed bibendum vehicula imperdiet. In quis erat sed massa volutpat posuere quis nec purus. Donec sagittis erat ex, congue sodales massa rutrum a. Morbi sed neque vel elit bibendum pretium sit amet vitae sapien.

Mauris vitae ligula non magna fringilla efficitur. Vestibulum convallis lacus eget imperdiet accumsan. Integer eget nulla eget urna gravida ultricies quis id lectus. Nulla dictum, mauris sed sollicitudin laoreet, augue magna feugiat leo, eu euismod ipsum massa eu tellus. Sed nec urna facilisis, posuere augue finibus, facilisis est. Proin pulvinar ex nec consequat egestas. Ut rutrum mollis mi, vitae rutrum tortor gravida vel. Nullam eu libero lobortis ligula molestie ultricies. Suspendisse eleifend, ligula ac feugiat ultrices, mi ipsum tincidunt augue, quis dapibus turpis sem accumsan enim. Ut sit amet eleifend arcu, ac condimentum ipsum. Praesent efficitur felis mauris, non ullamcorper elit tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla gravida nisl ipsum, id viverra justo finibus nec. Pellentesque placerat euismod lectus, sit amet vulputate diam. Cras ut nisl vel urna euismod fringilla id et turpis.

Donec et orci lacus. Curabitur dapibus nisi sit amet lobortis congue. Morbi turpis ex, sollicitudin nec nulla id, molestie lacinia dolor. Donec nec erat quis elit consectetur venenatis sit amet non nulla. Ut lacinia tempus faucibus. Mauris finibus ex sit amet urna feugiat, vel vehicula nisl vestibulum. Duis pulvinar magna ante, tempor pretium orci mollis at.

In aliquet risus vel quam hendrerit sagittis. Proin laoreet vel felis ut tempus. Donec efficitur odio in erat vehicula auctor. Vestibulum posuere tortor vitae ultricies pretium. Nam euismod sollicitudin tortor, id interdum orci tincidunt vel. Vivamus lobortis euismod finibus. Duis iaculis turpis nec orci viverra, auctor sodales urna vestibulum.

Etiam facilisis ac magna id pharetra. Donec a orci dolor. Ut aliquet lobortis dignissim. Aliquam quis tortor vel nunc varius pharetra. Ut placerat elit a risus semper finibus vitae eu tellus. Praesent sed sapien id nunc luctus dictum. Nunc rhoncus viverra metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id iaculis nibh. Maecenas nec nunc eget eros sodales interdum. Aliquam euismod massa in viverra tincidunt. Aliquam dolor felis, faucibus sed interdum vel, congue non tortor. Ut luctus nibh nisl, vel mollis velit dignissim eget. Integer pellentesque nec enim nec pulvinar. Donec varius at libero posuere varius.

</div>
正如您所看到的,应该也会显示某种网格系统。它在我登录时工作,在我注销时不工作,这是完全相反的问题。

2 个回复
SO网友:Greeso

在页面末尾的页脚部分添加以下内容:

wp_footer();
看看这是否有效。

SO网友:jamesfacts

在这种情况下,我会保持管理栏可见,并使用一些正文填充来降低非管理栏的内容。此CSS可能适用于您:

body.logged-in { margin-top: 28px !important; }

相关推荐

如何创建4列和2列Twitter-Bootstrap相结合的WordPress循环?

我想根据4列(桌面视图)、2列(mobile view 768px)和1列(mobile view 425px)的组合显示帖子。我在下面找到了很棒的代码:<?php $paged = ( get_query_var(\'paged\') ) ? get_query_var(\'paged\') : 1; $args=array( \'post_type\' => \'post\',