更改自定义选项页的布局

时间:2014-10-21 作者:Lemon Butter

我跟着导游走了here 要为我的主题创建自定义选项页,请使用add_options_page. 默认情况下,这些将按列表排列:

Default layout

理想情况下,我希望这些选项排列在一个五行的网格中。如何覆盖默认的WordPress选项样式来实现这一点?

这是我正在使用的代码,基于上面链接中的示例2:

class MySettingsPage
{
    /**
     * Holds the values to be used in the fields callbacks
     */
    private $options;

    /**
     * Start up
     */
    public function __construct()
    {
        add_action( \'admin_menu\', array( $this, \'featured_content_menu\' ) );
        add_action( \'admin_init\', array( $this, \'custom_page_init\' ) );
    }

    /**
     * Add options page
     */
    public function featured_content_menu()
    {
        // This page will be under "Settings"
        add_options_page(
            \'Featured Content\', 
            \'Featured Content\', 
            \'manage_options\', 
            \'set-featured-content\', 
            array( $this, \'create_featured_page\' )
        );
    }

    /**
     * Options page callback
     */
    public function create_featured_page()
    {
        // Set class property
        $this->options = get_option( \'featured_content\' );
        ?>
        <div class="wrap">
            <?php screen_icon(); ?>
            <h2>Set Featured Content</h2>           
            <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields
                settings_fields( \'set_featured_genres\' );   
                do_settings_sections( \'set-featured-content\' );
                submit_button(); 
            ?>
            </form>
        </div>
        <?php
    }




    /**
     * Register and add settings
     */
    public function custom_page_init()
    {        
        register_setting(
            \'set_featured_genres\', // Option group
            \'featured_content\', // Option name
            array( $this, \'sanitize\' ) // Sanitize
        );

        add_settings_section(
            \'featured_genre_id\', // ID
            \'Featured Genres\', // Title
            array( $this, \'print_section_info\' ), // Callback
            \'set-featured-content\' // Page
        );  

        add_settings_field(
            \'featured_genre_1\', // ID
            \'Genre 1\', // Title 
            array( $this, \'featured_genre_1_callback\' ), // Callback
            \'set-featured-content\', // Page
            \'featured_genre_id\' // Section           
        );      

    }

    /**
     * Sanitize each setting field as needed
     *
     * @param array $input Contains all settings fields as array keys
     */
    public function sanitize( $input )
    {
        $new_input = array();
        if( isset( $input[\'featured_genre_1\'] ) )
            $new_input[\'featured_genre_1\'] = sanitize_text_field( $input[\'featured_genre_1\'] );    

        return $new_input;
    }

    /** 
     * Print the Section text
     */
    public function print_section_info()
    {
        print \'Select featured genres below:\';
    }

    /** 
     * Get the settings option array and print one of its values
     */
    public function featured_genre_1_callback()
    {

      echo \'<select id="featured_genre_1" name="featured_content[featured_genre_1]" >\';

      $categories = get_terms( \'genre\', array(
          \'orderby\'    => \'count\',
          \'hide_empty\' => 0
      ) );
      $output = \'objects\'; // or names
      if  ($categories) {
        foreach ($categories  as $category ) {
          $selected = ($category->name == $this->options[\'featured_genre_1\']) ? \'selected="selected"\' : \'\';
          echo \'<option value="\' . $category->name . \'" \'.$selected.\' >\' . $category->name . \'</option>\';
        }
      } 
      echo \'</select>\';

    }


}

1 个回复
SO网友:Heidi

我认为您需要编辑适当的样式表,以便使用类“wrap”的div浮动到彼此的左侧。如果Wordpress在其他地方使用“wrap”,我会给它起个新名字,比如“mywrap”您可能还想给它一个20%的宽度,0填充和0边距,以确保它们都适合。你可能需要做一点实验来适应它。

结束