在 Wordpress 管理员中使用 Bootstrap - Rush Frisby 的 hack答案

【问题标题】：Using Bootstrap within Wordpress admin - a hack by Rush Frisby在 Wordpress 管理员中使用 Bootstrap - Rush Frisby 的 hack
【发布时间】：2016-08-15 00:56:55
【问题描述】：

为 Wordpress 构建我的第一个插件我遇到了 Rush Frisby 的 Bootstrap hack，因此您可以在管理面板中使用 Bootstrap，而不会与 Wordpress 管理核心样式发生冲突。你可以在这里找到它：https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel/

我已经按照他解释的方式在我的插件中实现了它。你可以通过https://github.com/kennnielsen/wordpress_dev在线查看我的代码

这部分只有一个问题：

.bootstrap-wrapper {
    @import (less) url('bootstrap.min.css');
}

如果我从上面的代码中删除 (less)，下面的错误将会消失，但是 hack 没有按预期工作 - 引导程序没有加载到引导程序包装器中。

首先，我从未真正使用过 LESS，但我知道 LESS 的基本概念以及它如何简化 CSS 的工作。

不过，在运行我的插件并转到设置 - 自定义登录时，我看到以下错误：

我不知道该怎么做。我在网上搜索了答案，但我真的找不到解决方案，也找不到解决办法。

有人知道如何解决这个问题吗？ - 以及关于 .map 文件的简要说明？

提前谢谢大家！

对于那些不想去 Github 的人，请参阅下面用于管理页面的代码。

<?php 

// Meaning of abbreviations:
// clsc = Custom login shortcode

// Runs when plugin is activated
register_activation_hook( PLUGIN_MAIN_FILE, 'clsc_install');
// Create new database fields
function clsc_install() {
    $clsc_options = array(

        'Login_link'        => 'log-in/',
        'Login_string'      => 'Log in',
        'Login_class'       => '', // Default is empty to inherit theme styles
        'Logout_link'       => wp_logout_url( home_url()),
        'Logout_string'     => 'Log out',
        'Logout_class'      => '', // Default is empty to inherit theme styles
        'Account_link'      => 'my-account/',
        'Account_string'    => 'My Account',
        'Account_class'     => '' // Default is empty to inherit theme styles

    );
    add_option('clsc_options_array', $clsc_options, '', 'yes');
}

// Register settings for wordpress to handle all values
function admin_init_register_setting()
{    
    register_setting('wp_plugin_template-group', 'clsc_options_array');

}
add_action('admin_init','admin_init_register_setting');


// Create admin option page
function add_clsc_option_page() {
    add_options_page(
        'Custom Login',             // The text to be displayed in the title tag
        'Custom Login',             // The text to be used for the menu
        'administrator',            // The capability required to display this menu
        'custom-login-shortcodes',  // The unique slug name to refer to this menu
        'clsc_html_page');          // The function to output the page content
}
/* Call the html code */
add_action('admin_menu', 'add_clsc_option_page');

// Enqueue admin styles and scripts
function clsc_enqueue_scripts() {
    global $wpdb;
    $screen = get_current_screen();

    if ( $screen->id != 'settings_page_custom-login-shortcodes' ) {
        return; // exit if incorrect screen id
    } 

        wp_enqueue_style( 'custom-shortcodes-styles', plugins_url( 'admin/css/admin_styles.css', dirname(__FILE__) ) );
        wp_enqueue_style( 'bootstrap', plugins_url('admin/css/bootstrap.css', dirname(__FILE__) ) );
        wp_enqueue_script('admin_js_bootstrap_hack', plugins_url('admin/scripts/bootstrap-hack.js', dirname(__FILE__) ) );
        wp_enqueue_script('jquery', plugins_url('admin/scripts/jquery.min.js', dirname(__FILE__) ) );

}
add_action('admin_enqueue_scripts', 'clsc_enqueue_scripts' );

function clsc_html_page()
{
    if(!current_user_can('manage_options'))
    {
        wp_die( __('You do not have sufficient permissions to access this page.','clsc') );
    }

    ?>

    <script type="text/javascript">

        var default_logout = <?php echo json_encode( wp_logout_url( home_url()) ); ?>;

        $(document).ready(function(){
            $("#logout-default").click(function(){
                $("#logout-field").val(default_logout);
            });
        });
    </script>

    <div class="wrap">

        <form method="post" action="options.php"> 
            <?php 

            $options = get_option('clsc_options_array');     
            settings_fields('wp_plugin_template-group');
            do_settings_fields('wp_plugin_template-group'); 

            ?>          
            <div class="bootstrap-wrapper">
                <div class="row">
                    <div class="col-md-12">
                        <h1><?php _e('Custom Login Shortcode','clsc'); ?></h1>
                        <p><?php _e('To use for shortcode:','clsc'); ?><br/><span class="shortcode-preview">[custom_login]</span></p>
                    </div>
                </div>
                <div class="row" id="login-content">
                    <div class="col-md-4">
                        <h5><?php _e('Log in link:','clsc'); ?></h5>
                        <input name="clsc_options_array[Login_link]" placeholder="<?php _e('Example: log-in/', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Login_link']; ?>" />
                    </div>
                    <div class="col-md-4">
                        <h5><?php _e('Log in string:','clsc'); ?></h5>
                        <input name="clsc_options_array[Login_string]" placeholder="<?php _e('Example: Log in', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Login_string']; ?>" />
                    </div>
                    <div class="col-md-4">
                        <h5><?php _e('Log in class:','clsc'); ?></h5>
                        <input name="clsc_options_array[Login_class]"  placeholder="<?php _e('Example: login_style', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Login_class']; ?>" />
                    </div>
                </div>
                <div class="row top-buffer" id="logout-content">
                    <div class="col-md-4">
                        <h5><?php _e('Log out link:','clsc'); ?></h5>
                        <input id="logout-field" name="clsc_options_array[Logout_link]" placeholder="<?php _e('Example: log-out/', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Logout_link']; ?>" />
                        <input class="btn btn-default btn-xs" type="button" name="logout-default" id="logout-default" value="<?php _e('Use default logout link','clsc') ?>"/>
                    </div>
                    <div class="col-md-4">
                        <h5><?php _e('Log out string:','clsc'); ?></h5>
                        <input name="clsc_options_array[Logout_string]" placeholder="<?php _e('Example: Log out', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Logout_string']; ?>" />
                    </div>
                    <div class="col-md-4">
                        <h5><?php _e('Log out class:','clsc'); ?></h5>
                        <input name="clsc_options_array[Logout_class]" placeholder="<?php _e('Example: logout_style', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Logout_class']; ?>" />
                    </div>
                </div>
                <div class="row top-buffer" id="account-content">
                    <div class="col-md-4">
                        <h5><?php _e('Account link:','clsc'); ?></h5>
                        <input name="clsc_options_array[Account_link]" placeholder="<?php _e('Example: my-account/', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Account_link']; ?>" />
                    </div>
                    <div class="col-md-4">
                        <h5><?php _e('Account string:','clsc'); ?></h5>
                        <input name="clsc_options_array[Account_string]" placeholder="<?php _e('Example: My Account', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Account_string']; ?>" />
                    </div>
                    <div class="col-md-4">
                        <h5><?php _e('Account class:','clsc'); ?></h5>
                        <input name="clsc_options_array[Account_class]" placeholder="<?php _e('Example: account_style', 'clsc') ?>" class="form-control" type="text" value="<?php echo $options['Account_class']; ?>" />
                    </div>
                </div>            
            </div>

            <?php submit_button( __('Save Changes', 'clsc') ); ?>

        </form>

    </div>

    <?php
}
?>

【问题讨论】：

您遇到的错误是否与您共享的 css 代码有关？？？
对不起，是的！如果我删除（更少），错误就消失了，但是它不起作用。我会更新我的问题。
将(less) 更改为(lessjs)，如果解决了问题，请再次通知我......！
是的。您还可以访问 Github 并查看代码。我已经尝试了你的建议，不幸的是它没有解决它。现在显示另一个错误：“SyntaxError: expected ')' got 'j'”。
当问题涉及在管理面板中使用 Bootstrap 和 LESS 时，我为什么要使用插件来提供主题 LESS 支持？

标签： php css wordpress twitter-bootstrap less

【解决方案1】：

建议： 将缩小的 CSS 用于开发目的并不是一个好主意，而且当您的 CSS 代码中存在错误时也很难调试，而且由于整个代码被转换为似乎没有结束的一行，因此有时会出现解析错误完全没有。

问题： LESS 无法编译 Bootstrap 的缩小版本是一个已知问题：http://github.com/less/less.js/issues/2207。

解析器可能会在某些不符合 CSS 的特定于浏览器的黑客攻击中失败（错误消息可能因 Bootstrap 和/或 Less 版本而异）。通常的解决方法是编译非缩小版本（注意编译缩小版本没有太大意义，因为编译的结果无论如何都不是缩小的 CSS）

@Credit 转到 seven-phases-max 以获取参考 URL

解决方案： 嗯，问题似乎出在你的缩小版bootstrap.min.css文件上，尝试使用未缩小版的bootstrap.css就没有问题了。

【讨论】：