Блог

Создание своего виджета WordPress со своими полями

Иногда стандартные виджеты WordPress не помогают нам добиться желаемого результата, и тогда мы можем прибегнуть к созданию своего виджета, где будут только те поля, которые нам нужны, а также наши подсказки и всё что мы захотим, далее приведен код простого виджета с несколькими полями для примера, имея базовые знания в PHP и WordPress вы сможете добавлять свои поля или редактировать текущие:

add_action( 'widgets_init', 'contact_block_widget' );

function contact_block_widget() {
    register_widget( 'contact_block_widget' );
}

class contact_block_widget extends WP_Widget {

    function contact_block_widget() {
        $widget_ops = array( 'classname' => 'icon-text-description', 'description' => __('Иконка, текст и описание', 'icon-text-description') );
        $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'icon-text-description' );
        $this->WP_Widget( 'icon-text-description', __('Иконка, текст и описание', 'icon-text-description'), $widget_ops, $control_ops );
    }

    function widget( $args, $instance ) {
        extract( $args );

        // Наши варианты для настройки виджета
        $icon = apply_filters('widget_title', $instance['title'] );
        $name = $instance['name'];
        $description = $instance['description'];

        /*--------------------------------
        --  Вывод виджета на страницу
        --------------------------------*/

        echo $before_widget;

        // Иконка
        if ( $icon )
            echo  '<i class="icon-' . $icon . '">' . '</i>';

        echo $before_title;
        // Заголовок
        if ( $name )
            echo $name;
        echo $after_title;

        // Вывод поля "описание"
        if ( $description )
            echo '<div>' . $description . '</div>';

        echo $after_widget;

        /*--------------------------------
        --  Вывод виджета на страницу end
        --------------------------------*/
    }

    // Обновляем свой виджет
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;

        // После сохранения настроек убиваем лишний HTML
        // Метод strip_tags() убирает весь мусорный код стандарта XHTML, который может сломать нашу верстку
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['name'] = strip_tags( $new_instance['name'] );
        $instance['description'] = strip_tags( $new_instance['description'] );

        return $instance;
    }

    function form( $instance ) { ?>

        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">
                <?php _e('Класс иконки:'); ?>
            </label>

            <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'name' ); ?>">
                <?php _e('Заголовок блока:'); ?>
            </label>

            <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'description' ); ?>">
                <?php _e('Описание блока:'); ?>
            </label>


            <textarea name="<?php echo $this->get_field_name( 'description' ); ?>" id="<?php echo $this->get_field_id( 'description' ); ?>" cols="30" rows="4" style="width:100%;"><?php echo $instance['description']; ?></textarea>
        </p>

    <?php
    }
}

 

Оставить комментарий

avatar