1. 首页
  2. 问答
  3. 将javascript添加到主题

将javascript添加到主题

2012-03-07 129 views
0

我试图将Nivo-slider代码（不是WP插件）添加到主题中。我已经加入该到的functions.php做到了：将javascript添加到主题

/* 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. 当我手动添加这样<script src="<?php bloginfo('template_url'); ?>/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> head标签内的脚本，NIVO滑块都出现了。现在它不会开始。我知道它找到了jquery.nivo.slider.pack.js，因为当我在浏览器中加载它并查看源代码时，该js文件的链接是正确的。

  2. 在浏览器中查看源代码之前，这会在文档类型和其他任何其他事项之前添加此文本http://example.com/wp-content/themes/pingst（除了它是网站所在的域而不是example.com）。

这是完整的输出（已经厌倦了将域名更改为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'); ?>" />

来源

2012-03-07 Niclas Nilsson

+0

什么是第2-3行header.php在你的主题中？目前，您的站点在doctype之前输出style.css文件。修复这可能是第一个问题。 – janw 2012-03-07 12:35:14

+0

我加了他们知道... – 2012-03-07 12:40:35

回答

1

问题是你用 'bloginfo()' 这将回声它是什么让。 使用'get_bloginfo()'使wp返回而不是回显。

因此改变，在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

来源

2012-03-07 15:20:09 janw

+0

哦！这解释了很多！ :-) Thnx ... – 2012-03-08 12:55:39

+0

是否解决了问题1？ – janw 2012-03-08 13:18:41

+0

是的，它确实。现在一切正常:-) – 2012-03-09 10:38:59

相关问题

 相关问题