将javascript添加到主题

时间:2012-03-07 12:25:20

标签: wordpress wordpress-theming

我正在尝试将Nivo滑块代码(不是WP插件)添加到主题中。我已经将它添加到functions.php:

/* Add scripts for theme to work*/
function theme_add_scripts() {
  wp_enqueue_script('jquery'); //omit if jQuery already included
  wp_enqueue_script('nivoslider',  bloginfo('stylesheet_url') . '/wp-content/themes/pingst/nivo-slider/jquery.nivo.slider.pack.js', 'jquery', '2.7.1');
  }
add_action('init', 'theme_add_scripts');

它似乎应该有效,但有两个问题。

  1. 当我在head标签内手动添加如此<script src="<?php bloginfo('template_url'); ?>/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>的脚本时,Nivo-slider确实出现了。现在它不会开始。我知道它找到了jquery.nivo.slider.pack.js,因为当我在浏览器中加载它并查看源代码时,该js文件的链接是正确的。

  2. 这会在doctype之前添加此文本http://example.com/wp-content/themes/pingst(除了它是网站所在的域,而不是example.com),在浏览器中查看源代码时会添加任何其他内容。

  3. 这是完整的输出(厌倦了将域名更改为example.com,无论如何都不是秘密)。

    http://example.com/wp-content/themes/pingst<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="sv-SE">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title> Pingstförsamlingen Mörlunda</title>
      <link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css' />
    
    
      <link rel="stylesheet" href="http://pingstwp.theninth.se/wp-content/themes/pingst/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="http://pingstwp.theninth.se/wp-content/themes/pingst/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    
      <link rel="stylesheet" href="http://pingstwp.theninth.se/wp-content/themes/pingst/style.css" type="text/css" media="screen" />
      <link rel="pingback" href="http://pingstwp.theninth.se/xmlrpc.php" />
    
      <!--   <script src="http://pingstwp.theninth.se/wp-content/themes/pingst/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> -->
      <meta name='robots' content='noindex,nofollow' />
    <link rel="alternate" type="application/rss+xml" title="Pingstförsamlingen Mörlunda &raquo; Hem kommentarsflöde" href="http://pingstwp.theninth.se/?feed=rss2&#038;page_id=39" />
    <link rel='stylesheet' id='gce_styles-css'  href='http://pingstwp.theninth.se/wp-content/plugins/google-calendar-events/css/gce-style.css?ver=3.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='gce_custom_styles-css'  href='https://www.google.com/calendar/feeds/gr368o4ds072hbqilbmuaj1md8%40group.calendar.google.com/public/basic?ver=3.3.1' type='text/css' media='all' />
    <script type='text/javascript' src='http://pingstwp.theninth.se/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
    <script type='text/javascript' src='http://pingstwp.theninth.se/nivo-slider/jquery.nivo.slider.pack.js?ver=2.1'></script>
    <script type='text/javascript' src='http://pingstwp.theninth.se/wp-includes/js/comment-reply.js?ver=20090102'></script>
    
    <script type='text/javascript' src='http://pingstwp.theninth.se/wp-content/plugins/google-calendar-events/js/jquery-qtip.js'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var GoogleCalendarEvents = {"ajaxurl":"http:\/\/pingstwp.theninth.se\/wp-admin\/admin-ajax.php","loading":"Loading..."};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://pingstwp.theninth.se/wp-content/plugins/google-calendar-events/js/gce-script.js'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://pingstwp.theninth.se/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://pingstwp.theninth.se/wp-includes/wlwmanifest.xml" /> 
    <link rel='prev' title='Bockara' href='http://pingstwp.theninth.se/?page_id=33' />
    <meta name="generator" content="WordPress 3.3.1" />
    <link rel='canonical' href='http://pingstwp.theninth.se/' />
    
      <!-- Nivo-slider -->
      <script type="text/javascript">
        $(window).load(function() {
          $('#slider').nivoSlider({
            effect: 'sliceDown'
          });
        });
      </script>
    
    </head>
    
    <body>
      <!-- Whole width -->
      <div id="container">
        <div id="header">
          <a href="http://pingstwp.theninth.se/">
            <img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/logotype.png" alt="logotype" />
          </a>
        </div>
    
        <!-- Dropdown menu -->
        <div id="nav">
          <ul id="menu-huvudmeny" class="menu"><li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://pingstwp.theninth.se/?page_id=9">Barn</a></li>
    <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://pingstwp.theninth.se/?page_id=11">Församlingen</a>
    <ul class="sub-menu">
        <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://pingstwp.theninth.se/?page_id=26">Historia</a></li>
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://pingstwp.theninth.se/?page_id=31">Stöd församlingen</a></li>
    
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://pingstwp.theninth.se/?page_id=28">Kristen tro</a></li>
    </ul>
    </li>
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://pingstwp.theninth.se/?page_id=33">Bockara</a></li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://pingstwp.theninth.se/?page_id=7">Ungdomar</a></li>
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://pingstwp.theninth.se/?page_id=5">Kalender</a></li>
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://pingstwp.theninth.se/?page_id=2">Kontakt</a></li>
    </ul>    </div>
    
        <!-- Left sidebar -->
    
        <div id="sidebar">
                <!-- Frame no 1 -->
          <div class="frame-leftside">
    <div class="cal-presentation">
    <h2 class="widgettitle">Kalender</h2>
    <p class="cal-eventname">&raquo; Smågrupp</p>
    <p class="cal-date">Onsdag 2012-03-07 17:30</p><br />
    
    <h3 class="cal-category">Barn</h3>
    
    <p class="cal-eventname">&raquo; Söndagsskola</p>
    <p class="cal-date">Söndag 2012-03-11 10:00</p><br />
    
    <h3 class="cal-category">Ungdom</h3>
    <p class="cal-eventname">&raquo; Tonår</p>
    <p class="cal-date">Lördag 2012-03-10 17:00</p><br />
    
    </div>
    </div>
          <!-- Frame no 2 -->
    
    
          <!-- Frame no 3 -->
    
          <!-- Frame no 4 -->
    
          <!-- Frame no 5 (Post it) -->
          <div class="post-it"><h2 class="Post-it">Dagens bibelord</h2>         <div class="textwidget">Stilla din harm, låt din vrede slockna,
    reta inte upp dig, det leder bara till ont.
    
    Ps 37:8</div>
            </div>    </div>
    
        <!-- Main - This is right column with the real content -->
    
        <div id="main">
          <!-- Slideshow frame -->
          <div class="frame-fullsize">
            <div class="slider-wrapper theme-default">
              <div class="ribbon"></div>
              <div id="slider" class="nivoSlider">
                <img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/kyrkan.jpg" alt="" />
                <img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/kyrkan3.jpg" alt="" />
                <img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/kyrkan4.jpg" alt="" />
    
                <img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/kyrkan2.jpg" alt="" />
              </div>
        </div>
            <div id="htmlcaption" class="nivo-html-caption">
              <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
    
          </div>
    
          <!-- Content frame -->
          <div id="content-frame" class="frame-fullsize">
    
        <!-- Actual side content  -->
            <div id="content">
                                        <div class="post">
                    <h2 class="blogtitle"><a href="http://pingstwp.theninth.se/">Hem</a></h2>
    
                      <div class="entry">
                        <p>Pingstförsamlingen i Mörlunda finns till för vanliga<br />
    människor, som du och jag. Med våra förtjänster och våra<br />
    dåliga sidor. Både ung, gammal och de som är någonstans mitt<br />
    i mellan. Människorna som delar församlingsgemenskapen är på<br />
    många sätt olika. Men det som förenar är tron på Jesus, inte<br />
    bara som historisk person, utan framförallt levande<br />
    idag. Jesus är den som ger människan ett liv med mål och<br />
    
    mening.</p>
    <p>&nbsp;</p>
    <p>Vi kan uppleva många saker i livet som meningsfullt;<br />
    relationer, barn, barnbarn och så vidare. Men innerst inne<br />
    längtar vi alla efter något mer. Vi brottas med frågan om<br />
    den den yttersta meningen med tillvaron, om våra liv<br />
    verkligen spelar roll och vad som händer efter<br />
    döden. Predikaren säger om Gud att ”evigheten har han lagt i<br />
    människornas hjärtan.” Vi kan vara så upptagna i livet med<br />
    
    annat att vi inte hör frågorna från djupet av våra hjärtan,<br />
    men likväl finns de där. I Jesus Kristus kan dessa frågor få<br />
    ett svar.</p>
    <p>&nbsp;</p>
    <p>Välkommen att vara med på en gudstjänst, cafékväll,<br />
    tonår eller något annat som händer.</p>
    <p>&nbsp;</p>
    <p>I församlingen finns också människor som är beredda att<br />
    samtala med dig som vill det. Det finns inga utbildade<br />
    terapeuter, men medmänniskor som vill ta dig på allvar och<br />
    
    är beredda att både lyssna på dig och dela sina egna<br />
    erfarenheter om livet tillsammans med Jesus.</p>
                        <p class="postmetadata">
                                              </p>
                      </div>
                  </div>
                              <div class="navigation">
                                  </div>
                      </div>
    
            <!-- Right sidebar -->
            <div id="rightbar">
    
              <!-- Frame no 1 -->
              <div class="frame-rightside">         <div class="textwidget"><img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/akti.gif" class="iconbox-icon" alt=""/> 
    <div class="iconbox-text">
    <h2>Kalender</h2>
    <a href="#">Vad händer i församlingen? &gt;&gt;</a>
    </div></div>
    
            </div>
              <!-- Frame no 2 -->
              <div class="frame-rightside">         <div class="textwidget"><img src="http://pingstwp.theninth.se/wp-content/themes/pingst/images/fragetecken.gif" class="iconbox-icon" alt=""/> 
    <div class="iconbox-text">
    <h2>Frågor</h2>
    <a href="#">Har du funderingar, kontakta oss här &gt;&gt;</a>
    </div></div>
            </div>
              <!-- Frame no 3 -->
    
    
            </div>
          </div>
        </div>
        <div id="footer">
          Design: <a href="http://www.anxtreme.se">AnXtreme Foto &amp; Grafisk Produktion</a> | <a href="http://www.anxtreme.se">www.anxtreme.se</a> | <a href="http://www.andersholm.se">www.andersholm.se</a>
    
        </div>
      </div></body>
    </html>
    

    编辑1:

    header.php的第一行:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
      <link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css' />
    
      <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
    
      <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    

1 个答案:

答案 0 :(得分:1)

问题是你使用'bloginfo()'来回应它的内容。 使用“get_bloginfo()”使wp返回而不是echo。

所以在functions.php中改变它

wp_enqueue_script('nivoslider',  bloginfo('stylesheet_url') . '/wp-content/themes/pingst/nivo-slider/jquery.nivo.slider.pack.js', 'jquery', '2.7.1');

应该是

wp_enqueue_script('nivoslider',  get_bloginfo('stylesheet_directory') . '/nivo-slider/jquery.nivo.slider.pack.js', 'jquery', '2.7.1');

那应该解决问题nr 2,希望也问题nr 1