我正试图在开发中实现Zurb的Foundation 5,以使我能够利用其功能在wp admin中创建更好的页面UI。然而,由于某些原因,Foundation的JS不起作用。
以下是自定义wp管理页面的来源:
<!DOCTYPE html>
<!--[if IE 8]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie8 wp-toolbar" lang="en-US">
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar" lang="en-US">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Profile ‹ Career Women — WordPress</title>
<script type="text/javascript">
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!=\'function\'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
var ajaxurl = \'/wp-admin/admin-ajax.php\',
pagenow = \'users_page_your-profile\',
typenow = \'\',
adminpage = \'users_page_your-profile\',
thousandsSeparator = \',\',
decimalPoint = \'.\',
isRtl = 0;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel=\'stylesheet\' id=\'foundation-loader-php-f-foundation-css-css\' href=\'http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/foundation/loader.php?f=foundation.css&ver=1.0.0\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'foundation-loader-php-f-normalize-css-css\' href=\'http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/foundation/loader.php?f=normalize.css&ver=1.0.0\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'admin-admin-css-css\' href=\'http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/admin/admin.css?ver=1.0.0\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'admin-events-css-css\' href=\'http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/admin/events.css?ver=1.0.0\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'open-sans-css\' href=\'//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9.1\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'dashicons-css\' href=\'http://careerwomen.ca/wp-includes/css/dashicons.css?ver=3.9.1\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'admin-bar-css\' href=\'http://careerwomen.ca/wp-includes/css/admin-bar.css?ver=3.9.1\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'debug-bar-css\' href=\'http://careerwomen.ca/wp-content/plugins/debug-bar/css/debug-bar.dev.css?ver=20111209\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'wp-admin-css\' href=\'http://careerwomen.ca/wp-admin/css/wp-admin.css?ver=3.9.1\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'buttons-css\' href=\'http://careerwomen.ca/wp-includes/css/buttons.css?ver=3.9.1\' type=\'text/css\' media=\'all\' />
<!--[if lte IE 7]>
<link rel=\'stylesheet\' id=\'ie-css\' href=\'http://careerwomen.ca/wp-admin/css/ie.css?ver=3.9.1\' type=\'text/css\' media=\'all\' />
<![endif]-->
<link rel=\'stylesheet\' id=\'wp-auth-check-css\' href=\'http://careerwomen.ca/wp-includes/css/wp-auth-check.css?ver=3.9.1\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'mymail-admin-css\' href=\'http://careerwomen.ca/wp-content/plugins/myMail/assets/css/admin.css?ver=1.6.6.3\' type=\'text/css\' media=\'all\' />
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/jquery/jquery.js\'></script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/jquery/jquery-migrate.js\'></script>
<script type=\'text/javascript\'>
/* <![CDATA[ */
var userSettings = {"url":"\\/","uid":"1","time":"1403717225"};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/utils.js\'></script>
<script type="text/javascript">
domain = "http://careerwomen.ca/";
</script><script type="text/javascript">var _wpColorScheme = {"icons":{"base":"#999","focus":"#2ea2cc","current":"#fff"}};</script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
</head>
<body class="wp-admin wp-core-ui no-js debug-bar-maximized users_page_your-profile auto-fold admin-bar branch-3-9 version-3-9-1 admin-color-fresh locale-en-us no-customize-support no-svg">
<script type="text/javascript">
document.body.className = document.body.className.replace(\'no-js\',\'js\');
</script>
<script type="text/javascript">
(function() {
var request, b = document.body, c = \'className\', cs = \'customize-support\', rcs = new RegExp(\'(^|\\\\s+)(no-)?\'+cs+\'(\\\\s+|$)\');
request = true;
b[c] = b[c].replace( rcs, \' \' );
b[c] += ( window.postMessage && request ? \' \' : \' no-\' ) + cs;
}());
</script>
<div id="wpwrap">
<a tabindex="1" href="#wpbody-content" class="screen-reader-shortcut">Skip to main content</a>
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu" role="navigation"></ul>
</div>
<div id="wpcontent">
<div id="wpadminbar" class="nojq nojs" role="navigation">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu"></ul> </div>
<a class="screen-reader-shortcut" href="http://careerwomen.ca/wp-login.php?action=logout&_wpnonce=d64cc433d5">Log Out</a>
</div>
<div id=\'querylist\'>
<div id="debug-bar-actions">
<span class="maximize">+</span>
<span class="restore">–</span>
<span class="close">×</span>
</div>
<div id=\'debug-bar-info\'>
<div id="debug-status">
<div id=\'debug-status-site\' class=\'debug-status\'>
<div class=\'debug-status-title\'>ks4003078.ip-142-4-208.net</div>
<div class=\'debug-status-data\'>#1</div>
</div><div id=\'debug-status-php\' class=\'debug-status\'>
<div class=\'debug-status-title\'>PHP</div>
<div class=\'debug-status-data\'>5.3.3</div>
</div><div id=\'debug-status-db\' class=\'debug-status\'>
<div class=\'debug-status-title\'>MySQL</div>
<div class=\'debug-status-data\'>5.1.73</div>
</div><div id=\'debug-status-memory\' class=\'debug-status\'>
<div class=\'debug-status-title\'>Memory Usage</div>
<div class=\'debug-status-data\'>35,273,824 bytes</div>
</div><div id=\'debug-status-warning\' class=\'debug-status\'>
<div class=\'debug-status-title\'>Please Enable</div>
<div class=\'debug-status-data\'>WP_DEBUG</div>
</div> </div>
</div>
<div id=\'debug-bar-menu\'>
<ul id="debug-menu-links">
<li><a
id="debug-menu-link-Debug_Bar_Object_Cache"
class="debug-menu-link current"
href="#debug-menu-target-Debug_Bar_Object_Cache">
Object Cache </a></li>
</ul>
</div>
<div id="debug-menu-targets">
<div id="debug-menu-target-Debug_Bar_Object_Cache" class="debug-menu-target" style="display: block">
<div id=\'object-cache-stats\'><p><strong>Cache Hits:</strong> 406<br /><strong>Cache Misses:</strong> 53<br /></p><ul><li><strong>Group:</strong> options - ( 94.58k )</li><li><strong>Group:</strong> default - ( 0.03k )</li><li><strong>Group:</strong> users - ( 0.38k )</li><li><strong>Group:</strong> userlogins - ( 0.03k )</li><li><strong>Group:</strong> useremail - ( 0.05k )</li><li><strong>Group:</strong> userslugs - ( 0.03k )</li><li><strong>Group:</strong> user_meta - ( 3.58k )</li><li><strong>Group:</strong> counts - ( 0.16k )</li></ul></div> </div>
</div>
</div>
<div id="wpbody">
<div id="wpbody-content" aria-label="Main content" tabindex="0">
<div id="screen-meta" class="metabox-prefs">
<div id="contextual-help-wrap" class="hidden no-sidebar" tabindex="-1" aria-label="Contextual Help Tab">
<div id="contextual-help-back"></div>
<div id="contextual-help-columns">
<div class="contextual-help-tabs">
<ul>
</ul>
</div>
<div class="contextual-help-tabs-wrap">
</div>
</div>
</div>
</div>
<div class="wrap" id="profile-page">
<h2>
Edit User
<a href="user-new.php" class="add-new-h2">Add New</a>
</h2>
<form id="your-profile" action="http://careerwomen.ca/wp-admin/user-edit.php" method="post">
<div class="row">
<div id="wpz-user-profile" class="large-9 columns"></div>
<div id="wpz-user-profile-widgets" class="large-3 columns"></div>
</div>
<div class="wpz-foundation wpz-foundation-tabs">
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel1a">Tab 1</a>
</li>
<li class="tab-title"><a href="#panel2a">Tab 2</a>
</li>
<li class="tab-title"><a href="#panel3a">Tab 3</a>
</li>
<li class="tab-title"><a href="#panel4a">Tab 4</a>
</li>
</ul>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>
</div>
<p class="submit">
<input type="submit" name="submit" id="submit" class="button button-primary" value="Update User">
</p>
</form>
</div>
<script type="text/javascript">
// jQuery(document).foundation();
</script>
<div class="clear"></div></div><!-- wpbody-content -->
<div class="clear"></div></div><!-- wpbody -->
<div class="clear"></div></div><!-- wpcontent -->
<div id="wpfooter">
<p id="footer-left" class="alignleft">
<span id="footer-thankyou">Thank you for creating with <a href="https://wordpress.org/">WordPress</a>.</span> </p>
<p id="footer-upgrade" class="alignright">
Version 3.9.1 </p>
<div class="clear"></div>
</div>
<div id="wp-auth-check-wrap" class="hidden">
<div id="wp-auth-check-bg"></div>
<div id="wp-auth-check">
<div class="wp-auth-check-close" tabindex="0" title="Close"></div>
<div id="wp-auth-check-form" data-src="http://careerwomen.ca/wp-login.php?interim-login=1"></div>
<div class="wp-auth-fallback">
<p><b class="wp-auth-fallback-expired" tabindex="0">Session expired</b></p>
<p><a href="http://careerwomen.ca/wp-login.php" target="_blank">Please log in again.</a>
The login page will open in a new window. After logging in you can close it and return to this page.</p>
</div>
</div>
</div>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Js/foundation/foundation.min.js\'></script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Js/foundation/load.js\'></script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/hoverIntent.js\'></script>
<script type=\'text/javascript\'>
/* <![CDATA[ */
var commonL10n = {"warnDelete":"You are about to permanently delete the selected items.\\n \'Cancel\' to stop, \'OK\' to delete."};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-admin/js/common.js\'></script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/admin-bar.js\'></script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-content/plugins/debug-bar/js/debug-bar.dev.js\'></script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-admin/js/svg-painter.js\'></script>
<script type=\'text/javascript\'>
/* <![CDATA[ */
var heartbeatSettings = {"nonce":"d62090b23b"};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/heartbeat.js\'></script>
<script type=\'text/javascript\'>
/* <![CDATA[ */
var authcheckL10n = {"beforeunload":"Your session has expired. You can log in again from this page or go to the login page.","interval":"180"};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://careerwomen.ca/wp-includes/js/wp-auth-check.js\'></script>
<div class="clear"></div></div><!-- wpwrap -->
<script type="text/javascript">if(typeof wpOnload==\'function\')wpOnload();</script>
</body>
</html>
我已经删除了不相关的代码,例如wp管理菜单和管理栏。
这是我装载的内容。js文件:
jQuery.noConflict();
jQuery(document).foundation();
出于某种原因,基础选项卡功能不起作用,这让我相信存在JS冲突。
任何帮助都将不胜感激!