2016-03-12 76 views
1

我目前正在爲客戶開發定製的wordpress模板。我已完成主頁(http://www.spotutrecht.com/)並即將添加新頁面(http://www.spotutrecht.com/spot-map/)。WordPresspress:stylesheet.css只適用於主頁

現在我遇到了以下問題:style.css只能將樣式成功應用到我的主頁,而不能應用到「spot-map」頁面。我引用了header.php中的樣式表,它是head標籤中樣式表apears的功能鏈接。我點擊了它,它顯示了我的樣式表。不過,它不會將樣式應用於我的「spot-map」頁面。

我還不熟悉模板構建,所以也許(我希望)我正在做一些非常明顯的錯誤,但我無法弄清楚它是什麼。

我的header.php

<?php 
/** 
* The header for our 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 Spot_Utrecht 
*/ 

?><!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 

<!-- Bootstrap core CSS --> 
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/css/bootstrap.min.css" rel="stylesheet"> 

<!-- Font Awesome Icons --> 
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 

<!-- Google Fonts --> 
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'> 

<!-- Stylehsheet.css --> 
<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet"> 

<?php wp_head(); ?> 

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body <?php body_class(); ?>> 
<div id="page" class="site"> 
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e('Skip to content', 'spotutrecht'); ?></a> 

    <div class="page-wrap"> 
    <!-- HEADER 
    ================================================== --> 
    <header class="site-header" role="banner"> 

     <!-- NAVBAR 
     ================================================== --> 
     <div class="navbar-wrapper"> 

      <div class="navbar navbar-fixed-top" role="navigation"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <div class="social-buttons"> 
          <a href="https://www.facebook.com/spotutrecht030" class="badge social facebook" target="_blank"><i class="fa fa-facebook"></i></a> 
          <a href="https://www.instagram.com/spot_utrecht" class="badge social instagram" target="_blank"><i class="fa fa-instagram"></i></a> 
         </div> 
        </div> 

        <?php 
         wp_nav_menu(array(

          'theme_location' => 'primary', 
          'container'   => 'nav', 
          'container_class' => 'navbar-collapse collapse', 
          'menu_class'  => 'nav navbar-nav navbar-right' 

         )); 

        ?> 


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

     </div> 
    </header> 

我的位置地圖/集資頁

<?php 
/* 
    Template Name: Crowdfunding 
*/ 

get_header(); ?> 

<section id="spotbanner-otherpages"> 
     <article> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-3"> 
        </div> 

        <div class="col-sm-6 logo_container"> 
         <img src="<?php bloginfo('stylesheet_directory') ?>/assets/img/spot_square.png" alt="SPOT Logo">     
        </div> 

        <div class="col-sm-3"> 

        </div> 
       </div>   
      </div> 
     </article> 
    </section> 

<section class="frontpage white"> 
     <article> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-2"> 
        </div> 

        <div class="col-sm-8"> 
         <h1>SPOT kaart van Utrecht in de maak door Rood Gras</h1> 
         <p class="lead">Samen met Utrechtse illustrator Rob van Barneveld is SPOT bezig om een alternatieve kaart van Utrecht te ontwerpen. Hierbij wordt de toerist tips gegeven voor koffiezaken en die anders wellicht onontdekt zouden blijven. En hierbij hebben ze jullie hulp hard nodig!</p> 

         <p>Het idee ontstond doordat de Utrechters vinden dat hun stad meer te bieden heeft dan de gebruikelijke toeristische hotspots. Utrecht barst van de leuke kleine zaakjes en met een getekende kaart hopen ze hiervoor meer reclame te kunnen maken. </p> 

         <p>Het uiteindelijke doel is een reeks plattegronden samen te stellen met behulp van diverse lokale vormgevers, elk met een eigen thema. De kaarten wordt uiteindelijk in gelimiteerde oplage gezeefdrukt op A0-formaat en als poster geprint met RISO op A3-formaat bij Kapitaal. Ook wordt er samen gewerkt met hostels en zal de plattegrond in kaartvorm worden verkocht om de bekendheid te vergroten</p>  

         <h2>Wie is Rob van Barneveld?</h2> 
         <p>Rob van Barneveld is een Utrechtse illustrator met kenmerkende stijl die werkt onder de naam Rood Gras. Momenteel bekend van zijn kopjes en strips, maar binnenkort van de plattegrond! Hij werkt voor o.a. De Correspondent en VPRO en heeft een succesvolle webshop. </p> 
         <h2>Waarom deze plattegrond?</h2> 
         <p>Met deze plattegrond brengt SPOT je op andere plekken. SPOT kan op deze manier in de behoeftes van de toeristen en nieuwe utrechters voorzien. Velen worden op dit moment naar de standaard plekken gestuurd, maar ‘act like a local’ en ga van de gebaande paden af. SPOT vindt het belangrijk dat Utrecht niet alleen herkend en bekend wordt door haar grachten en domtoren maar ook herkend en bekend wordt door haar initiatieven, koffie, kroegen en etc en te voorzien in een beleving. Door deze overzichtelijke plattegrond brengt SPOT de mensen daar. Daarnaast wordt het ook nog eens een super souvenir van de stad Utrecht. </p> 

         <h2>Waarom het thema koffie?</h2> 
         <p>Het aantal koffiezaken in Utrecht is in 10 jaar geëxplodeerd en stuk voor stuk zijn ze razend populair. Maar wat maakt ze onderscheidend? En hoe komen toeristen er terecht? Rob van Barneveld maakt (in opdracht) kopjes en ander servies met een grappige afbeelding; een plattegrond over koffie sluit hier natuurlijk perfect bij aan! </p> 

         <h2>Waarom financieel bijdragen?</h2> 
         <p>Momenteel is deze crowdfundingpagina erzodat mensen geld kunnen bijdragen om het project te realiseren. Afhankelijk van het bedrag dat in wordt gelegd kunnen verschillende bedankjes worden verkregen. Waarom zou je dit doen? Omdat je zo lokale vormgevers steunt, je nieuwe Utrechters en bezoekers helpt te ontdekken wat deze stad zo ontzettend tof maakt en je er een bijzondere beloning voor terug krijgt. En vooral: omdat wij jou dan ontzettend dankbaar zullen zijn!</p> 

         <h2>Maar wat is die beloning dan?</h2> 
         <p>Wanneer je een bepaald bedrag doneert, krijg je daar het volgende voor terug: 

          <table class="crowdfunding"> 
           <tr><td class="price">€10</td>  <td class="reward">een plattegrond</td></tr> 
           <tr><td class="price">€25</td>  <td class="reward">een Rood Gras ansichtkaartenset en een plattegrond</td></tr> 
           <tr><td class="price">€50</td>  <td class="reward">een Rood Gras koffiekopje en een plattegrond</td></tr> 
           <tr><td class="price">€100</td>  <td class="reward">een Rood Gras gepersonaliseerd koffiekopje en een RISO poster</td></tr> 
           <tr><td class="price">€150</td>  <td class="reward">een Rood Gras ansichtkaartenset, twee koffiekopjes en een RISO poster</td></tr> 
           <tr><td class="price">€175+</td> <td class="reward">een zeefdruk van de plattegrond</td></tr> 
          </table> 

         </p> 

        </div> 

        <div class="col-sm-2"> 
        </div> 
       </div>   
      </div> 
     </article> 
    </section> 

    <section class="frontpage blue"> 
     <article> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-2"> 
        </div> 

        <div class="col-sm-8"> 
         <div class="icon-container"> 
          <i class="fa fa-clock-o" name="Clock Icon"></i> 
         </div> 
         <h1>Opening Hours</h1> 

         <p class="center"> 
          Wednesday: 10:00 - 18:00 <br> 
          Thursday: 10:00 - 18:00 <br> 
          Friday: 10:00 - 18:00 <br> 
          Saturday: 11:00 - 18:00 
         </p> 

        </div> 

        <div class="col-sm-2"> 
        </div> 
       </div>   
      </div> 
     </article> 
    </section> 

</div><!-- page wrap div --> 



<?php get_footer(); ?> 
+0

Style.css在內部頁面上正確鏈接 - 你有什麼特定的CSS風格沒有被應用? – Steve

+0

最明顯的例子是標識應該有180px的高度,社交按鈕看起來不像他們在主頁上做的。你能看出這種差異的原因嗎? – KCDC

+0

那麼,主頁有'assets/css/custom.css'鏈接,其中包含影響社交按鈕的樣式。內部頁面沒有鏈接該css文件 – Steve

回答

1

你已經錯過了span.reward類一個結束括號。

span.reward { 
    margin-left: 10px; 

關閉選擇器和樣式將被應用。

+0

謝謝Morven,確實是這個問題!我首先認爲它不可能是CSS內的錯誤,因爲主頁(應使用與header.php中聲明的相同的css文件)看起來非常好。網頁看起來很好的原因是因爲我的靜態index.html仍然在服務器上,這一直掩蓋着這個錯誤。感謝@Steve通過指出custom.css(我在我的靜態網站中使用)向我展示了這一點。 – KCDC

+0

@KoenCuijp樂於幫助:) – Morven

相關問題