如何设置我的主题管理页面的样式?

时间:2017-07-18 作者:Onur

我做了一项大规模的研究。但我什么都不想要。我想在静态样式文件中设置选项页面的样式。我该怎么做?

Sources

/*
*Create A Simple Theme Options Panel
*Exit if accessed directly
*/
if (!defined(\'ABSPATH\')){
exit;
}

    // Start Class
if ( ! class_exists(\'Azura_Theme_Options\')){
class Azura_Theme_Options{
    public function __construct(){
        // We only need to register the admin panel on the back-end
        if (is_admin()){
            add_action(\'admin_menu\', array( \'Azura_Theme_Options\', \'add_admin_menu\'));
            add_action(\'admin_init\', array( \'Azura_Theme_Options\', \'register_settings\'));

        }
    } 
    public static function get_theme_options() {
        return get_option(\'theme_options\');
    }
    public static function get_theme_option($id) {
        $options = self::get_theme_options();
        if (isset($options[$id])){
            return $options[$id];
        }
    }

    // Add sub menu page
    public static function add_admin_menu(){
        add_menu_page(
            esc_html__(\'Azura Panel\', \'text-domain\'),
            esc_html__(\'Azura Panel\', \'text-domain\'),
            \'manage_options\',
            \'azura-panel\',
            array(\'Azura_Theme_Options\', \'create_admin_page\')
        );
    }

    /**
     * Register a setting and its sanitization callback.
     * We are only registering 1 setting so we can store all options in a single option as
     * an array. You could, however, register a new setting for each option
     */
    public static function register_settings(){
        register_setting(\'theme_options\', \'theme_options\', array( \'Azura_Theme_Options\', \'sanitize\'));
    }

    // Sanitization callback
    public static function sanitize($options){
        // If we have options lets sanitize them
        if ($options){
            // Input
            if (!empty($options[\'site_name\'])){
                $options[\'site_name\'] = sanitize_text_field( $options[\'site_name\'] );
            }else{
                unset($options[\'site_name\']); // Remove from options if empty
            }

            // Select
            if (!empty($options[\'select_example\'])){
                $options[\'select_example\'] = sanitize_text_field( $options[\'select_example\'] );
            }
        }

        // Return sanitized options
        return $options;
    }

    /**
     * Settings page output
     */
    public static function create_admin_page(){ ?>

        <div class="wrap">
            <h1><?php esc_html_e(\'Tema Ayarları\', \'text-domain\'); ?></h1>
            <form method="post" action="options.php">
                <?php settings_fields(\'theme_options\'); ?>
                <table class="form-table wpex-custom-admin-login-table">

                    <?php // Text input example ?>
                    <tr valign="top">
                        <th scope="row"><?php esc_html_e(\'Başlık\', \'text-domain\'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option(\'site_name\'); ?>
                            <input type="text" name="theme_options[site_name]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><?php esc_html_e(\'Açıklama\', \'text-domain\'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option(\'site_desc\'); ?>
                            <input type="text" name="theme_options[site_desc]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><?php esc_html_e(\'Buton\', \'text-domain\'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option(\'top_header_btn\'); ?>
                            <input type="text" name="theme_options[top_header_btn]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><?php esc_html_e(\'Buton Link\', \'text-domain\'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option(\'top_header_btn_link\'); ?>
                            <input type="text" name="theme_options[top_header_btn_link]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div><!-- .wrap -->
    <?php }
}
}
new Azura_Theme_Options();

// Helper function to use in your theme to return a theme option value
function myprefix_get_theme_option( $id = \'\' ) {
    return Azura_Theme_Options::get_theme_option( $id );
}

3 个回复
SO网友:Rian

在构造函数中,您还需要将自定义样式表排队,该样式表将容纳CSS以设置主题选项的样式。

简化的示例如下所示:

function admin_style() {
    wp_enqueue_style( \'theme-options-style\', get_template_directory_uri().\'styles/theme-options-style.css\');
}
add_action(\'admin_enqueue_scripts\', \'admin_style\');

SO网友:rudtek

@如果你把代码放在一个主题中,Rian的答案很好。如果要在插件中使用它,请使用以下命令排队:

from the codex:

function load_custom_wp_admin_style($hook) {
        // Load only on ?page=mypluginname
        if($hook != \'toplevel_page_mypluginname\') {
                return;
        }
        wp_enqueue_style( \'custom-admin_css\', plugins_url(\'admin-style.css\', __FILE__) );
}
add_action( \'admin_enqueue_scripts\', \'load_custom_wp_admin_style\' );
这将把完整的URL返回给custom。css,例如示例。com/wp-content/plugins/myplugin/custom-admin\\u css。

如果您不确定您的$挂钩名称是什么。。使用此选项确定您的hookname。将代码放在函数的{后面

wp_die($hook);
(或者,当您在管理页面上时,只需查看url的最后一部分)

此代码确保您不会在站点的每个页面上加载css;但只在插件的管理页面上。

SO网友:Chris Cox

从WP admin CSS中为HTML元素提供现有类,它们将继承与仪表板其余部分一致的样式。精心设计主题或插件UI的样式以与应用程序的其余部分发生冲突是令人憎恶的。

结束

相关推荐

从Options表中的数据创建阵列

大家好,我正试图从wordpress的选项表中的数据创建一个数组。我的数据都以相同的方式开始,然后是字段信息的名称。有没有办法提取所有这些数据并使用WordPress命令创建数组?或者,唯一的方法是使用适当的“SQL查询”,我想很多人都说在WordPress中不要这样做?