Intereting Posts

Код Bootstrap, действующий странно на wordpress

Я работал над своей собственной темой, и по какой-то причине WordPress, похоже, не реализует мой код. Моя панель навигации не загружается правильно, если я зарегистрирован, но загружает find, если я вышел из системы, однако любое кодирование начальной загрузки, которое я помещал в тело, загружается правильно, если я зарегистрирован, но не загружается, если я вышли из.

Когда я вошел в систему:

введите описание изображения здесь

Когда я выйду из системы:

введите описание изображения здесь

Код заголовка:

<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 на моем ноутбуке прямо сейчас.

Обновление – Дополнительная информация my style.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; } 

header.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"> 

footer.php

  <hr> <footer> <p>© Company 2012</p> </footer> </section> <!-- /container --> </div> <!-- /container --> <?php wp_footer(); ?> </body> </html> 

functions.php (много чего здесь было дано как решение для навигатора, скрытого за панель администратора, здесь панель администратора WordPress перекрывает навигацию twitter bootstrap ):

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

Это не проблема с навигационной панелью, если бы я не выполнил приведенные выше инструкции для ее отображения, вы не увидите эту темную часть под панелью администратора, которая говорит «AdventureSpace». По какой-то причине мой навигатор не загружается должным образом, когда я вошел в систему (см. Рисунки выше), но загружается нормально, когда я вышел из системы.

Однако меня гораздо меньше беспокоит его навигация. Я хотел бы это исправить, но меня гораздо больше интересует, почему мой другой код boostrap не работает :

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

Как вы можете видеть, должна быть какая-то сетка. Он работает, когда я вошел в систему и не работает, когда я вышел из системы, что является полностью противоположной проблемой.

Добавьте нижеследующую информацию в конец страницы:

 wp_footer(); 

И посмотрим, работает ли это.

В этой ситуации я буду держать панель администратора видимой и использовать некоторое дополнение к телу, чтобы подтолкнуть содержимое без админ-бара ниже. Этот CSS, вероятно, сработает для вас:

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