custom-search-widget

php

<?php
/**
 * Plugin Name: Custom Search Widget
 * Description: Виджет с полем поиска, который можно добавлять через настройки "Внешний вид" -> "Виджеты".
 * Version: 1.4
 * Author: Andrew Lazarev
 */

// Регистрация виджета
class Custom_Search_Widget extends WP_Widget {

    // Конструктор виджета
    public function __construct() {
        parent::__construct(
            'custom_search_widget', // ID виджета
            'Custom Search Widget', // Название виджета
            array( 'description' => 'Пользовательский виджет поиска с возможностью настройки цветов' ) // Описание виджета
        );
    }

    // Вывод виджета на сайте
    public function widget( $args, $instance ) {
        $button_color = !empty( $instance['button_color'] ) ? $instance['button_color'] : '#ffc107';
        $border_color = !empty( $instance['border_color'] ) ? $instance['border_color'] : '#ced4da';

        echo $args['before_widget'];
        
        // Добавление заголовка виджета, если он установлен
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        // Инлайн-CSS с использованием настроек цвета
        echo '<style>
			
			.btn {
				border-radius: 0;
				background-color: ' . esc_attr( $button_color ) . ';
				padding: none;
				font-size: inherit;
				
				
			}

			.btn svg {
				width: 1em;
				height: 1em;
			}

			.input-wrapper {
				height: 100%;
			}
			
			#s {
                		height: 40px;
                		border-radius: 0px;
				border: 2px solid ' . esc_attr( $border_color ) . ';
				font-size:24px;
				flex-grow: 1; padding: .5rem;
				height: 100%;
            		}
			
			.svg_style{
				width: 1em;
				height: 1em;
				fill: white;
			}
			
		</style>';
	
	$search_placeholder = __('Search', 'default'). '...';

        // HTML-код для формы поиска с SVG-иконкой
        ?>
        <form role="search" method="get" id="searchform" class="search-form" action="<?php echo home_url( '/' ); ?>">
            <div style="display: flex; align-items: center;">
                <input type="text" class="form-control" placeholder="' . $search_placeholder . '" value="<?php echo get_search_query(); ?>" name="s" id="s"/>
                <button type="submit" class="btn" id="searchsubmit">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg_style" alt="Search button">
                        <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
                    </svg>
                </button>
            </div>
        </form>


        <?php
        echo $args['after_widget'];
    }

    // Административная часть — настройки виджета
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : 'Поиск';
        $button_color = ! empty( $instance['button_color'] ) ? $instance['button_color'] : '#ffc107';
        $border_color = ! empty( $instance['border_color'] ) ? $instance['border_color'] : '#ced4da';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">Заголовок:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'button_color' ); ?>">Цвет кнопки (можно использовать переменные):</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'button_color' ); ?>" name="<?php echo $this->get_field_name( 'button_color' ); ?>" type="text" value="<?php echo esc_attr( $button_color ); ?>" placeholder="Например: var(--global-color)" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'border_color' ); ?>">Цвет рамки (можно использовать переменные):</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'border_color' ); ?>" name="<?php echo $this->get_field_name( 'border_color' ); ?>" type="text" value="<?php echo esc_attr( $border_color ); ?>" placeholder="Например: var(--global-color)" />
        </p>
        <?php 
    }

    // Сохранение настроек виджета
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        $instance['button_color'] = ( ! empty( $new_instance['button_color'] ) ) ? strip_tags( $new_instance['button_color'] ) : '#ffc107';
        $instance['border_color'] = ( ! empty( $new_instance['border_color'] ) ) ? strip_tags( $new_instance['border_color'] ) : '#ced4da';
        return $instance;
    }
}

// Регистрация виджета
function register_custom_search_widget() {
    register_widget( 'Custom_Search_Widget' );
}
add_action( 'widgets_init', 'register_custom_search_widget' );

Чтобы собрать плагин, поместите этот файл в одноименную папку и заархивируйте zip-архиватором.