1PROMTAI.RU

Как неудобство стандартных плагинов привело меня к созданию идеального конструктора таблиц для WordPress

Знакомо чувство, когда перепробовал кучу плагинов для создания таблиц в WordPress, а всё не то? То функционала не хватает, то интерфейс запутанный, то таблицы криво смотрятся на мобильных. Я через это прошёл.

Мне надоело постоянно искать компромиссы между красотой и функциональностью. Хотелось просто брать и создавать красивые, адаптивные таблицы с цветовым оформлением, без танцев с бубнами вокруг коротких кодов и настроек.

Решил — хватит это терпеть! Буду делать свой плагин, который будет делать именно то, что мне нужно.

Но я же не профессиональный разработчик. Знаю WordPress на уровне пользователя, с кодом на «вы». Поэтому обратился за помощью к DeepSeek — как к техническому напарнику.

И знаете, что удивительно? Процесс создания оказался не таким страшным, как я думал. Я описывал, что хочу видеть в интерфейсе, как должна работать цветовая палитра, какая нужна адаптивность для мобильных устройств. DeepSeek помогал с технической реализацией, предлагал решения, исправлял ошибки.

Мы работали в тандеме: я — как «продукт-менеджер» с пониманием потребностей, DeepSeek — как разработчик, который превращал мои идеи в рабочий код.

Результат превзошёл все мои ожидания! Получился плагин, в котором:

— Интуитивно понятный конструктор — никаких сложных настроек
— Красивые цветовые схемы на выбор
— Полная адаптивность — таблицы идеально смотрятся на любых устройствах
— Управление колонками и строками в пару кликов
— Встроенный предпросмотр перед публикацией

Самое приятное — когда проверил скорость сайта с плагином, оказалось что он не только удобный, но и не тормозит сайт! PageSpeed показывает 90+ баллов даже с тяжёлыми изображениями и рекламой.

Теперь я создаю таблицы за минуты, а не часы. И главное — получаю именно тот результат, который хотел.

Если вы тоже устали бороться с неудобными плагинами — возможно, стоит попробовать создать свой? С современными AI-инструментами это гораздо проще, чем кажется!

Это сам плагин:


storage_key))) {
            update_option($this->storage_key, array());
        }
    }
    
    public function deactivate() {
        // Clean up if needed
    }
    
    public function check_compatibility() {
        if (version_compare(get_bloginfo('version'), '5.0', '<')) {
            deactivate_plugins(plugin_basename(__FILE__));
            wp_die(__('Плагин требует WordPress версии 5.0 или выше', 'colorful-tables-pro'));
        }
    }
    
    public function init() {
        add_action('wp_enqueue_scripts', array($this, 'frontend_assets'));
        add_action('admin_enqueue_scripts', array($this, 'admin_assets'));
        load_plugin_textdomain('colorful-tables-pro', false, dirname(plugin_basename(__FILE__)) . '/languages');
    }
    
    public function admin_menu() {
        add_menu_page(
            __('Colorful Tables Pro', 'colorful-tables-pro'),
            __('Colorful Tables Pro', 'colorful-tables-pro'),
            'manage_options',
            'colorful-tables-pro',
            array($this, 'admin_page'),
            'dashicons-art',
            100
        );
    }
    
    public function frontend_assets() {
        wp_add_inline_style('wp-block-library', $this->get_frontend_css());
    }
    
    public function admin_assets($hook) {
        if ($hook !== 'toplevel_page_colorful-tables-pro') {
            return;
        }
        
        wp_enqueue_script('jquery');
        add_action('admin_head', array($this, 'output_admin_css'));
    }
    
    public function output_admin_css() {
        echo '';
    }
    
    public function admin_page() {
        if (!current_user_can('manage_options')) {
            wp_die(__('Недостаточно прав для доступа к этой странице.', 'colorful-tables-pro'));
        }
        
        // Process forms
        if (isset($_POST['save_table']) && check_admin_referer('colorful_tables_nonce')) {
            $this->save_table();
            echo '
✅ ' . __('Таблица сохранена успешно!', 'colorful-tables-pro') . '
';
        }
        
        if (isset($_POST['delete_table']) && check_admin_referer('colorful_tables_nonce')) {
            $this->delete_table();
            echo '
️ ' . __('Таблица удалена!', 'colorful-tables-pro') . '
';
        }
        
        $tables = get_option($this->storage_key, array());
        $edit_table_data = null;
        
        if (isset($_GET['edit_table'])) {
            $this->editing_table_id = intval($_GET['edit_table']);
            if (isset($tables[$this->editing_table_id])) {
                $edit_table_data = $tables[$this->editing_table_id];
            }
        }
        
        $edit_data_js = $edit_table_data ? $this->safe_json_encode($edit_table_data) : 'null';
        ?>
        
        

            
            

                

                    

                        
                        
                        editing_table_id): ?>
                            
                        
                    

                    

                

            


            

                
                

                    

                        

                            

                                editing_table_id): ?>
                                    ✏️ 
                                
                                     
                                
                            

                        


                        

                            
                            
                            editing_table_id): ?>
                                
                            

                            
                            

                                

                                    
⚙️ 

                                

                                

                                    

                                        

                                            
                                            
                                        

                                        
                                        

                                            
                                            
                                        

                                    

                                

                            


                            
                            

                                

                                    
️ 

                                

                                

                                    

                                        

                                            
 

                                            

                                                

                                                    
                                                    

                                                        
                                                        
                                                        
                                                    

                                                

                                                

                                                    
                                                    
                                                

                                            

                                        

                                        
                                        

                                            
 

                                            

                                                

                                                    
                                                    

                                                        
                                                        
                                                        
                                                    

                                                

                                                

                                                    
                                                    
                                                

                                            

                                        

                                    

                                    
                                

                            


                            
                            

                                

                                    
️ 

                                    

                                        
                                        
                                        
                                        
                                        
                                        
                                    

                                

                                

                                    

                                        
                                    

                                

                            


                            
                            

                                

                                    
 

                                    

                                        

                                            
                                            
                                            
                                            
                                        

                                        
                                    

                                

                                

                                    

                                        
                                    

                                

                            


                            
                            

                                

                                    
                                    editing_table_id): ?>
                                        
                                            ↩️ 
                                        
                                    
                                    
                                

                            

                        

                    

                


                
                

                    
                    

                        

                            
 

                        

                        

                            
                                

                                    

                                    

                                    

                                

                            
                                

                                     $table): ?>
                                        

                                            

                                                

                                                #
                                            

                                            

                                                
                                                     ×
                                                
                                                
                                                     get_style_name($table['style']); ?>
                                                
                                            

                                            

                                                [colorful_table id=""]
                                                
                                            

                                            

                                                
                                                    ✏️ 
                                                
                                                

                                                    
                                                    
                                                    
                                                

                                            

                                        

                                    
                                

                            
                        

                    


                    
                    

                        

                            
 

                        

                        

                            

                                

                                    

                                    

                                

                                

                                    

                                        
                                    

                                    

                                

                            

                        

                    

                

            

        


        
        

        
         __('Градиентный', 'colorful-tables-pro'),
            'modern' => __('Современный', 'colorful-tables-pro'),
            'elegant' => __('Элегантный', 'colorful-tables-pro'),
            'vibrant' => __('Яркий', 'colorful-tables-pro'),
            'minimal' => __('Минимализм', 'colorful-tables-pro')
        );
        return isset($styles[$style]) ? $styles[$style] : $style;
    }
    
    private function sanitize_color($color) {
        if (empty($color)) return '';
        
        $color = sanitize_hex_color($color);
        return $color ?: '';
    }
    
    private function get_frontend_css() {
        ob_start(); ?>
        .ct-table-container {
            margin: 2rem 0;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            background: white;
            overflow: hidden;
        }
        
        /* Desktop version */
        .ct-table-desktop {
            display: grid;
            width: 100%;
        }
        
        .ct-table-header {
            padding: 18px 20px;
            font-weight: 700;
            text-align: center;
            font-size: 16px;
            word-break: break-word;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            min-height: 60px;
            box-sizing: border-box;
        }
        
        .ct-table-cell {
            padding: 16px 20px;
            background: #ffffff;
            min-height: 60px;
            display: flex;
            align-items: center;
            word-break: break-word;
            line-height: 1.5;
            transition: all 0.3s ease;
            box-sizing: border-box;
            border-bottom: 1px solid #f8f9fa;
        }
        
        .ct-table-cell:nth-child(odd) {
            background: #fafbfc;
        }
        
        /* Mobile version */
        .ct-table-mobile {
            display: none;
        }
        
        .ct-mobile-row {
            border-bottom: 1px solid #f0f2f5;
            padding: 0;
        }
        
        .ct-mobile-row:last-child {
            border-bottom: none;
        }
        
        .ct-mobile-cell {
            display: grid;
            grid-template-columns: 120px 1fr;
            gap: 15px;
            padding: 15px 20px;
            align-items: start;
            border-bottom: 1px solid #f8f9fa;
        }
        
        .ct-mobile-cell:last-child {
            border-bottom: none;
        }
        
        .ct-mobile-header {
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
            word-break: break-word;
        }
        
        .ct-mobile-content {
            word-break: break-word;
            line-height: 1.5;
        }
        
        /* Styles for different themes */
        .ct-table-container.style-gradient .ct-table-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .ct-table-container.style-modern .ct-table-desktop {
            border: 1px solid #e0e0e0;
        }
        
        .ct-table-container.style-modern .ct-table-header {
            background: #2c3e50;
            color: white;
        }
        
        .ct-table-container.style-elegant .ct-table-desktop {
            border: 1px solid #d4af37;
        }
        
        .ct-table-container.style-elegant .ct-table-header {
            background: #d4af37;
            color: #2c3e50;
            font-weight: 600;
        }
        
        .ct-table-container.style-vibrant .ct-table-header {
            background: #e74c3c;
            color: white;
            font-weight: 800;
        }
        
        .ct-table-container.style-minimal .ct-table-header {
            background: none;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            font-weight: 600;
        }
        
        /* Responsive media queries */
        @media (max-width: 768px) {
            .ct-table-desktop {
                display: none;
            }
            
            .ct-table-mobile {
                display: block;
            }
            
            .ct-table-container {
                margin: 1rem 0;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
            
            .ct-mobile-cell {
                grid-template-columns: 100px 1fr;
                gap: 12px;
                padding: 12px 15px;
            }
            
            .ct-mobile-header {
                font-size: 13px;
            }
            
            .ct-mobile-content {
                font-size: 14px;
            }
        }
        
        @media (min-width: 769px) {
            .ct-table-mobile {
                display: none;
            }
            
            .ct-table-desktop {
                display: grid;
            }
        }
        
        .ct-wrapper {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
        }
        
        .ct-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 0;
            margin: 0 -20px 20px;
        }
        
        .ct-header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .ct-header h1 {
            font-size: 2em;
            margin: 0 0 8px 0;
            font-weight: 600;
            color: white;
        }
        
        .ct-subtitle {
            font-size: 1em;
            opacity: 0.9;
            margin: 0;
            color: white;
        }
        
        .ct-logo {
            font-size: 1.1em;
            margin-right: 8px;
        }
        
        .ct-badge {
            background: rgba(255,255,255,0.2);
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 0.7em;
            margin-left: 12px;
            color: white;
        }
        
        .ct-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 20px;
            padding: 0 20px;
        }
        
        .ct-main-panel {
            min-width: 0;
        }
        
        .ct-sidebar {
            display: grid;
            gap: 20px;
            grid-template-rows: auto auto;
        }
        
        .ct-panel {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .ct-panel-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
        }
        
        .ct-panel-header h2,
        .ct-panel-header h3 {
            margin: 0;
            font-weight: 600;
            color: #2c3e50;
            font-size: 1.1em;
        }
        
        .ct-panel-content {
            padding: 20px;
        }
        
        .ct-section {
            background: white;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #f0f2f5;
        }
        
        .ct-section-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
        }
        
        .ct-section-header h3 {
            margin: 0;
            font-weight: 600;
            color: #2c3e50;
            font-size: 1em;
        }
        
        .ct-section-content {
            padding: 20px;
        }
        
        .ct-form-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .ct-form-group {
            margin-bottom: 15px;
        }
        
        .ct-label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.9em;
        }
        
        .ct-input, .ct-select, .ct-number-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            font-size: 13px;
            transition: all 0.2s ease;
            box-sizing: border-box;
            color: #2c3e50;
            background: white;
        }
        
        .ct-input:focus, .ct-select:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
            outline: none;
        }
        
        .ct-structure-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .ct-structure-item h4 {
            margin: 0 0 12px 0;
            color: #2c3e50;
            font-size: 0.95em;
        }
        
        .ct-control-group {
            display: grid;
            gap: 12px;
        }
        
        .ct-number-control {
            display: grid;
            gap: 8px;
        }
        
        .ct-number-control label {
            font-weight: 600;
            color: #2c3e50;
            margin: 0;
            font-size: 0.9em;
        }
        
        .ct-number-buttons {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 5px;
            align-items: center;
        }
        
        .ct-number-btn {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            width: 35px;
            height: 35px;
            border-radius: 6px;
            display: grid;
            place-items: center;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.2s ease;
            color: #2c3e50;
        }
        
        .ct-number-btn:hover {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .ct-number-input {
            text-align: center;
            background: #f8f9fa;
            height: 35px;
        }
        
        .ct-action-buttons-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        
        .ct-button-small {
            padding: 6px 10px;
            font-size: 11px;
            height: auto;
        }
        
        .ct-button-danger {
            background: #e74c3c;
            color: white;
            border: none;
        }
        
        .ct-button-danger:hover {
            background: #c0392b;
            color: white;
        }
        
        .ct-structure-info {
            grid-column: 1 / -1;
            margin-top: 15px;
            padding: 12px;
            background: #e8f6f3;
            border-radius: 6px;
            border: 1px solid #2ecc71;
            color: #2c3e50;
        }
        
        .ct-structure-stat {
            text-align: center;
            font-size: 13px;
            color: #27ae60;
        }
        
        .ct-color-presets-grid {
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: 12px;
            color: #6c757d;
            flex-wrap: wrap;
        }
        
        .ct-color-presets-grid span {
            white-space: nowrap;
        }
        
        .ct-color-swatch {
            width: 18px;
            height: 18px;
            border: 2px solid white;
            border-radius: 3px;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }
        
        .ct-color-swatch:hover {
            transform: scale(1.1);
        }
        
        .ct-table-actions-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: center;
        }
        
        .ct-headers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .ct-header-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            color: #2c3e50;
        }
        
        .ct-header-card:hover {
            border-color: #3498db;
        }
        
        .ct-card-header-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .ct-card-header-grid label {
            font-size: 0.9em;
            font-weight: 600;
            color: #495057;
            margin: 0;
        }
        
        .ct-color-preview {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .ct-color-controls-grid {
            display: grid;
            gap: 12px;
            margin-top: 12px;
        }
        
        .ct-color-group-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px;
            align-items: center;
        }
        
        .ct-color-group-grid label {
            font-size: 11px;
            font-weight: 600;
            color: #6c757d;
            margin: 0;
            min-width: 40px;
        }
        
        .ct-color-input-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 6px;
            align-items: center;
        }
        
        .ct-color-input {
            width: 40px !important;
            height: 32px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            cursor: pointer;
            padding: 0;
        }
        
        .ct-color-hex {
            padding: 6px 8px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            font-family: monospace;
            font-size: 11px;
            height: 32px;
            box-sizing: border-box;
            color: #2c3e50;
            background: white;
        }
        
        .ct-rows-container {
            max-height: 500px;
            overflow-y: auto;
            background: #fafbfc;
            padding: 15px;
            border-radius: 8px;
            border: 1px dashed #e9ecef;
        }
        
        .ct-row-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 1px solid #f0f2f5;
            transition: all 0.2s ease;
            color: #2c3e50;
        }
        
        .ct-row-card:hover {
            border-color: #3498db;
        }
        
        .ct-row-header-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .ct-row-header-grid span {
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.9em;
        }
        
        .ct-clear-row {
            background: none;
            border: 1px solid #e74c3c;
            color: #e74c3c;
            padding: 3px 6px;
            border-radius: 3px;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .ct-clear-row:hover {
            background: #e74c3c;
            color: white;
        }
        
        .ct-cells-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        
        .ct-cell-card {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            color: #2c3e50;
        }
        
        .ct-cell-card:hover {
            border-color: #3498db;
        }
        
        .ct-cell-header-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .ct-cell-header-grid label {
            font-size: 10px;
            font-weight: 600;
            color: #6c757d;
            margin: 0;
        }
        
        .ct-cell-card textarea {
            width: 100%;
            min-height: 50px;
            padding: 8px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            resize: vertical;
            font-size: 12px;
            box-sizing: border-box;
            color: #2c3e50;
            background: white;
        }
        
        .ct-actions {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #f0f2f5;
        }
        
        .ct-main-actions-grid {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 8px;
            justify-content: end;
        }
        
        .ct-button-primary {
            background: #3498db;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s ease;
            color: white;
        }
        
        .ct-button-primary:hover {
            background: #2980b9;
            transform: translateY(-1px);
            color: white;
        }
        
        .ct-button-secondary {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            color: #2c3e50;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 13px;
            transition: all 0.2s ease;
        }
        
        .ct-button-secondary:hover {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .ct-icon {
            margin-right: 4px;
        }
        
        .ct-tables-grid {
            display: grid;
            gap: 12px;
        }
        
        .ct-table-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            color: #2c3e50;
        }
        
        .ct-table-card:hover {
            border-color: #3498db;
        }
        
        .ct-table-header-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .ct-table-header-grid h4 {
            margin: 0;
            color: #2c3e50;
            font-size: 0.95em;
        }
        
        .ct-table-badge {
            background: #3498db;
            color: white;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .ct-table-meta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .ct-meta-item {
            font-size: 11px;
            color: #6c757d;
        }
        
        .ct-table-shortcode-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .ct-table-shortcode-grid code {
            background: white;
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 11px;
            border: 1px solid #e9ecef;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2c3e50;
        }
        
        .ct-copy-btn {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 6px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            height: 30px;
            width: 30px;
            display: grid;
            place-items: center;
            color: #2c3e50;
        }
        
        .ct-copy-btn:hover {
            background: #3498db;
            color: white;
        }
        
        .ct-table-actions-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 6px;
        }
        
        .ct-delete-form {
            margin: 0;
        }
        
        .ct-empty-state {
            text-align: center;
            padding: 30px 15px;
            color: #6c757d;
        }
        
        .ct-empty-icon {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .ct-empty-hint {
            font-size: 0.8em;
            opacity: 0.7;
        }
        
        .ct-stats-panel .ct-panel-content {
            padding: 15px;
        }
        
        .ct-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .ct-stat-item {
            text-align: center;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 6px;
            color: #2c3e50;
        }
        
        .ct-stat-number {
            font-size: 1.5em;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 4px;
        }
        
        .ct-stat-label {
            font-size: 0.75em;
            color: #6c757d;
        }
        
        .ct-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            display: none;
            place-items: center;
        }
        
        .ct-modal-content {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 700px;
            max-height: 70vh;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .ct-modal-header-grid {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 15px;
            align-items: center;
        }
        
        .ct-modal-header-grid h3 {
            margin: 0;
            color: #2c3e50;
            font-size: 1em;
        }
        
        .ct-modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #6c757d;
            padding: 0;
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
        }
        
        .ct-modal-body {
            padding: 20px;
            max-height: 50vh;
            overflow-y: auto;
        }
        
        .ct-notification {
            position: fixed;
            top: 15px;
            right: 15px;
            background: #2ecc71;
            color: white;
            padding: 10px 15px;
            border-radius: 6px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            z-index: 10000;
            font-weight: 500;
            font-size: 13px;
        }
        
        .ct-notification-error {
            background: #e74c3c;
        }
        
        /* Fix text colors in all elements */
        .ct-header-card input,
        .ct-cell-card textarea,
        .ct-color-hex,
        .ct-row-card span,
        .ct-table-card h4 {
            color: #2c3e50 !important;
        }
        
        @media (max-width: 1200px) {
            .ct-container {
                grid-template-columns: 1fr;
            }
            
            .ct-sidebar {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
            }
            
            .ct-structure-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .ct-header h1 {
                font-size: 1.6em;
            }
            
            .ct-form-grid-2 {
                grid-template-columns: 1fr;
            }
            
            .ct-headers-grid {
                grid-template-columns: 1fr;
            }
            
            .ct-cells-grid {
                grid-template-columns: 1fr;
            }
            
            .ct-main-actions-grid {
                grid-template-columns: 1fr;
                justify-content: stretch;
            }
            
            .ct-table-actions-grid {
                grid-template-columns: 1fr;
            }
            
            .ct-sidebar {
                grid-template-columns: 1fr;
            }
            
            .ct-color-presets-grid {
                grid-template-columns: 1fr;
            }
        }
        log_error('Unauthorized table save attempt');
            return;
        }
        
        $table_id = isset($_POST['edit_table_id']) ? intval($_POST['edit_table_id']) : null;
        
        // Validate and sanitize data
        $table_data = array(
            'name' => sanitize_text_field($_POST['table_name']),
            'columns' => intval($_POST['columns']),
            'style' => sanitize_text_field($_POST['style']),
            'headers' => array(),
            'rows' => array()
        );
        
        // Sanitize headers
        if (isset($_POST['headers']) && is_array($_POST['headers'])) {
            foreach ($_POST['headers'] as $header) {
                $table_data['headers'][] = array(
                    'content' => sanitize_text_field($header['content']),
                    'bg_color' => $this->sanitize_color($header['bg_color']),
                    'text_color' => $this->sanitize_color($header['text_color'])
                );
            }
        }
        
        // Sanitize rows and cells
        if (isset($_POST['rows']) && is_array($_POST['rows'])) {
            foreach ($_POST['rows'] as $row) {
                $row_data = array('cells' => array());
                if (isset($row['cells']) && is_array($row['cells'])) {
                    foreach ($row['cells'] as $cell) {
                        $row_data['cells'][] = array(
                            'content' => wp_kses_post($cell['content']),
                            'bg_color' => $this->sanitize_color($cell['bg_color']),
                            'text_color' => $this->sanitize_color($cell['text_color'])
                        );
                    }
                }
                $table_data['rows'][] = $row_data;
            }
        }
        
        $tables = get_option($this->storage_key, array());
        
        if ($table_id && isset($tables[$table_id])) {
            $tables[$table_id] = $table_data;
        } else {
            $new_id = empty($tables) ? 1 : max(array_keys($tables)) + 1;
            $tables[$new_id] = $table_data;
        }
        
        update_option($this->storage_key, $tables);
        
        // Clear cache
        $this->clear_table_cache($table_id ?: $new_id);
    }
    
    private function delete_table() {
        if (!current_user_can('manage_options')) {
            $this->log_error('Unauthorized table delete attempt');
            return;
        }
        
        $table_id = intval($_POST['delete_table']);
        $tables = get_option($this->storage_key, array());
        
        if (isset($tables[$table_id])) {
            unset($tables[$table_id]);
            update_option($this->storage_key, $tables);
            $this->clear_table_cache($table_id);
        }
    }
    
    private function clear_table_cache($table_id) {
        delete_transient('colorful_table_' . $table_id);
    }
    
    private function log_error($message) {
        if (WP_DEBUG === true) {
            error_log('Colorful Tables Pro: ' . $message);
        }
    }
    
    public function shortcode($atts) {
        $atts = shortcode_atts(array('id' => '0'), $atts);
        $table_id = intval($atts['id']);
        
        if ($table_id <= 0) {
            return '
' . __('Неверный ID таблицы', 'colorful-tables-pro') . '
';
        }
        
        // Check cache
        $cache_key = 'colorful_table_' . $table_id;
        $cached = get_transient($cache_key);
        
        if ($cached !== false) {
            return $cached;
        }
        
        $tables = get_option($this->storage_key, array());
        
        if (!isset($tables[$table_id])) {
            return '
' . __('Таблица не найдена', 'colorful-tables-pro') . '
';
        }
        
        $output = $this->render_table($tables[$table_id]);
        
        // Cache for 1 hour
        set_transient($cache_key, $output, HOUR_IN_SECONDS);
        
        return $output;
    }
    
    private function render_table($table) {
        $columns = $table['columns'];
        $headers = $table['headers'];
        $rows = $table['rows'];
        $style = $table['style'];
        
        $output = '
';
        
        // Desktop version
        $output .= '
';
        
        // Headers for desktop
        foreach ($headers as $header) {
            $header_style = '';
            if (!empty($header['bg_color'])) $header_style .= 'background-color: ' . esc_attr($header['bg_color']) . ';';
            if (!empty($header['text_color'])) $header_style .= 'color: ' . esc_attr($header['text_color']) . ';';
            
            $output .= '
';
            $output .= esc_html($header['content']);
            $output .= '
';
        }
        
        // Cells for desktop
        foreach ($rows as $row) {
            foreach ($row['cells'] as $cell) {
                $cell_style = '';
                if (!empty($cell['bg_color'])) $cell_style .= 'background-color: ' . esc_attr($cell['bg_color']) . ';';
                if (!empty($cell['text_color'])) $cell_style .= 'color: ' . esc_attr($cell['text_color']) . ';';
                
                $output .= '
';
                $output .= wp_kses_post($cell['content']);
                $output .= '
';
            }
        }
        
        $output .= '
'; // .ct-table-desktop
        
        // Mobile version
        $output .= '
';
        
        foreach ($rows as $row_index => $row) {
            $output .= '
';
            
            foreach ($row['cells'] as $cell_index => $cell) {
                if (isset($headers[$cell_index])) {
                    $cell_style = '';
                    if (!empty($cell['bg_color'])) $cell_style .= 'background-color: ' . esc_attr($cell['bg_color']) . ';';
                    if (!empty($cell['text_color'])) $cell_style .= 'color: ' . esc_attr($cell['text_color']) . ';';
                    
                    $output .= '
';
                    $output .= '
' . esc_html($headers[$cell_index]['content']) . '
';
                    $output .= '
' . wp_kses_post($cell['content']) . '
';
                    $output .= '
';
                }
            }
            
            $output .= '
'; // .ct-mobile-row
        }
        
        $output .= '
'; // .ct-table-mobile
        $output .= '
'; // .ct-table-container
        
        return $output;
    }
}

new ColorfulTablesPro();

А этот плагин я выложу в открытый доступ — может, кому-то ещё пригодится решение, выстраданное реальными потребностями.

P.S. Кстати, эту статью тоже помогал писать DeepSeek — я просто поделился мыслями, а он оформил их в связный текст. Работа в тандеме — это круто!

Скачать архив с плагином: скачать

 

А вы пользуетесь кастомными плагинами?

Поделитесь своим опытом в комментариях!

Метки: , , , , , , , , , , , , , , , , , , ,

Один комментарий на «“Как неудобство стандартных плагинов привело меня к созданию идеального конструктора таблиц для WordPress”»

  1. https://tvrs.pro:
    19 ноября, 2025 в 12:05 пп

    Как раз хотел разобрать подобное, и как
    раз увидел в этом разборе супер разбор:)

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вход и регистрация

Рубрики

Новые

Облако меток

SEO Женщина Шедеврум анализ блог видео вордпресс девушка девушки женщины изображения ии интеллект интересный интернет информация искусственный картинка картинки красивые материал мой мп3 написать нейросети нейросеть новые нужный онлайн очень пользователь привлечь промт промты разные раскрутка реклама рисуем рисунки рисунок сайт сайта светотень создать тексты

Новое

Вход

Календарь

Декабрь 2025
Пн Вт Ср Чт Пт Сб Вс
1234567
891011121314
15161718192021
22232425262728
293031  

Мои сайты

  1. Серёгин сайт
  2. Тема Вордпресс
  3. Промты ИИ
  4. Мой Дзен

Copyright © 2020 — 2025

Автор темы сайта: Ведерников С.Н.