Intereting Posts

Расширение WP_Customize_Control с несколькими полями управления

Я пытаюсь выяснить, как закодировать пользовательский элемент управления, но, разочаровывающе, всю информацию, которую я нахожу в онлайн-точках, на том же примере создания единого текстового поля.

Я хотел бы создать настраиваемый элемент управления, который представляет 4 поля ввода для заполнения (сверху, справа, внизу, слева)

<table border="0" cellpadding="1" cellspacing="0"> <tr> <th>Top</th> <th>Right</th> <th>Bottom</th> <th>Left</th> </tr> <tr> <td><input type="number" name="top" min="0" max="20"></td> <td><input type="number" name="right" min="0" max="20"></td> <td><input type="number" name="bottom" min="0" max="20"></td> <td><input type="number" name="left" min="0" max="20"></td> </tr> </table> 

Solutions Collecting From Web of "Расширение WP_Customize_Control с несколькими полями управления"

Я смог достичь своей цели не путем создания настраиваемого элемента управления с несколькими полями ввода, а путем создания настраиваемого элемента управления, который все еще принимал один вход, но отображал бы встроенный с другими элементами управления.

Вот настраиваемый элемент управления для встроенного численного ввода:

 class Customizer_Number_Inline_Control extends WP_Customize_Control { public $fieldwidth = 'text'; public $type = 'number'; protected function render() { $id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) ); $class = 'customize-control customize-control-' . $this->type; ?> <li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>" style="clear:none;display:inline-block;max-width:<?php echo $this->fieldwidth . "%"; ?>"> <?php $this->render_content(); ?> </li> <?php } public function render_content() { ?> <label class="inline"> <span class="customize-control-title" style="font-size:10px;line-height:10px;height:20px;"><?php echo esc_html( $this->label ); ?></span> <input type="number" <?php $this->link(); ?> value="<?php echo intval( $this->value() ); ?>" /> </label> <?php } } 

Я добавил дополнительный параметр для установки ширины элемента управления, поэтому, если вы хотите иметь три элемента управления, вы установите каждый из них на 33 (33%), если вы хотите 2, вы установите каждый из них на 50% .. и т. Д.

Реализация этого в настройке выглядит примерно так.

 $wp_customize->add_setting( 'width', array ( 'default' => '77', 'type' => 'option', ) ); $wp_customize->add_control( new Customizer_Number_Inline_Control( $wp_customize, 'width', array ( 'label' => 'Width', 'type' => 'number', 'section' => 'site', 'priority' => 1, 'fieldwidth'=> '50', //set the field to 50% width so that we can display a second one next to it ) ) );