• 06-12-2021, 20:28:47
    #1
    Aşağıdaki görseldeki gibi bir ayar alanı ekledim ancak rakamsal değer hiç bir yerde yazmadığı için ne seçildiği anlaşılmıyor. Text olarak Input içeriğini nasıl ekrana yazdırabilirim? 0-100 arası 5+5+5 şeklinde artıyor.

    Görsel:

    Kodlar:
    class Laura {
        private $config = '{"title":"Cat Characteristics","prefix":"cat_haracteristic_","domain":"laura","class_name":"Laura","post-type":["post"],"context":"side","priority":"low","fields":[{"type":"range","label":"Playfulness","default":"50","max":"100","step":"5","id":"cat_haracteristic_playfulness"},{"type":"range","label":"Vocality","default":"50","max":"100","step":"5","id":"cat_haracteristic_vocality"},{"type":"range","label":"Activity Level","default":"50","max":"100","step":"5","id":"cat_haracteristic_activity-level"},{"type":"range","label":"Affection Towards Owners","default":"50","max":"100","step":"5","id":"cat_haracteristic_affection-towards-owners"},{"type":"range","label":"Independence","default":"50","max":"100","step":"5","id":"cat_haracteristic_independence"},{"type":"range","label":"Docility","default":"50","max":"100","step":"5","id":"cat_haracteristic_docility"},{"type":"range","label":"Intelligence","default":"50","max":"100","step":"5","id":"cat_haracteristic_intelligence"},{"type":"range","label":"Need for Attention","default":"50","max":"100","step":"5","id":"cat_haracteristic_need-for-attention"},{"type":"range","label":"Need for Grooming","default":"50","max":"100","step":"5","id":"cat_haracteristic_need-for-grooming"},{"type":"range","label":"Shedding","default":"50","max":"100","step":"5","id":"cat_haracteristic_shedding"},{"type":"range","label":"Health and Hardiness","default":"50","max":"100","step":"5","id":"cat_haracteristic_health-and-hardiness"},{"type":"range","label":"Friendship with Other Pets","default":"50","max":"100","step":"5","id":"cat_haracteristic_friendship-with-other-pets"},{"type":"range","label":"Friendship with Children","default":"50","max":"100","step":"5","id":"cat_haracteristic_friendship-with-children"},{"type":"range","label":"Social Needs","default":"50","max":"100","step":"5","id":"cat_haracteristic_social-needs"}]}';
    
        public function __construct() {
            $this->config = json_decode( $this->config, true );
            add_action( 'add_meta_boxes', [ $this, 'add_meta_boxes' ] );
            add_action( 'save_post', [ $this, 'save_post' ] );
        }
    
        public function add_meta_boxes() {
            foreach ( $this->config['post-type'] as $screen ) {
                add_meta_box(
                    sanitize_title( $this->config['title'] ),
                    $this->config['title'],
                    [ $this, 'add_meta_box_callback' ],
                    $screen,
                    $this->config['context'],
                    $this->config['priority']
                );
            }
        }
    
        public function save_post( $post_id ) {
            foreach ( $this->config['fields'] as $field ) {
                switch ( $field['type'] ) {
                    default:
                        if ( isset( $_POST[ $field['id'] ] ) ) {
                            $sanitized = sanitize_text_field( $_POST[ $field['id'] ] );
                            update_post_meta( $post_id, $field['id'], $sanitized );
                        }
                }
            }
        }
    
        public function add_meta_box_callback() {
            $this->fields_div();
        }
    
        private function fields_div() {
            foreach ( $this->config['fields'] as $field ) {
                ?><div class="components-base-control">
                    <div class="components-base-control__field"><?php
                        $this->label( $field );
                        $this->field( $field );
                    ?></div>
                </div><?php
            }
        }
    
        private function label( $field ) {
            switch ( $field['type'] ) {
                default:
                    printf(
                        '<label class="components-base-control__label" for="%s">%s</label>',
                        $field['id'], $field['label']
                    );
            }
        }
    
        private function field( $field ) {
            switch ( $field['type'] ) {
                case 'range':
                    $this->input_minmax( $field );
                    break;
                default:
                    $this->input( $field );
            }
        }
    
        private function input( $field ) {
            printf(
                '<input class="components-text-control__input %s" id="%s" name="%s" %s type="%s" value="%s">',
                isset( $field['class'] ) ? $field['class'] : '',
                $field['id'], $field['id'],
                isset( $field['pattern'] ) ? "pattern='{$field['pattern']}'" : '',
                $field['type'],
                $this->value( $field )
            );
        }
    
        private function input_minmax( $field ) {
            printf(
                '<input class="components-text-control__input" id="%s" %s %s name="%s" %s type="%s" value="%s">',
                $field['id'],
                isset( $field['max'] ) ? "max='{$field['max']}'" : '',
                isset( $field['min'] ) ? "min='{$field['min']}'" : '',
                $field['id'],
                isset( $field['step'] ) ? "step='{$field['step']}'" : '',
                $field['type'],
                $this->value( $field )
            );
        }
    
        private function value( $field ) {
            global $post;
            if ( metadata_exists( 'post', $post->ID, $field['id'] ) ) {
                $value = get_post_meta( $post->ID, $field['id'], true );
            } else if ( isset( $field['default'] ) ) {
                $value = $field['default'];
            } else {
                return '';
            }
            return str_replace( '\u0027', "'", $value );
        }
    
    }
    new Laura;
  • 10-12-2021, 10:32:13
    #2
    Aslında çok basit bir çözümü var.
    <input type="range" value="25" min="0" max="100" step="5" oninput="this.nextElementSibling.innerHTML = this.value">
    <span>24</span>