在WordPress管理区域使用Foundation 5

时间:2014-06-25 作者:the Freelancer

我正试图在开发中实现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 &lsaquo; Career Women &#8212; 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&#038;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&#038;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&#038;subset=latin%2Clatin-ext&#038;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&#038;_wpnonce=d64cc433d5">Log Out</a>
                    </div>

            <div id=\'querylist\'>

    <div id="debug-bar-actions">
        <span class="maximize">+</span>
        <span class="restore">&ndash;</span>
        <span class="close">&times;</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冲突。

任何帮助都将不胜感激!

1 个回复
SO网友:kaiser

有时,最好的建议是放弃一个想法。这是我的建议:不要试图将接口元素从接口A推入接口B。

想象一下,你给自己买了一辆保时捷。然后想象一下,当你坐进一辆新车时,你会有一系列的期望,突然你看到的是捷豹或日产的仪表盘。

关于定制UI的讨论发生在几年前。在某种程度上,人们认识到插件和主题应该融合在一起,以提供无缝体验。你不想强迫你的用户学习一个视觉上和技术上不同的界面,它只适用于5%的管理区域,对吗?

结束