metasync / code-minification / views / settings-tab.php

settings-tab.php in Search Atlas SEO – OTTO AI SEO Automation for WordPress 2.6.20, at code-minification/views/settings-tab.php

244 lines 16.5 KB

Raw Download Zip

1	<?php
2	/**
3	* Code Minification Settings Tab View
4	*
5	* @package Search Atlas SEO
6	* @copyright Copyright (C) 2021-2025, Search Atlas Group - support@searchatlas.com
7	* @since 2.5.23
8	*/
9
10	if (!defined('WPINC')) {
11	die;
12	}
13	?>
14	<div class="metasync-code-min-container">
15	<!-- Main Settings Area -->
16	<div class="metasync-code-min-main">
17	<form method="post" action="" id="metasync-code-minification-form">
18	<?php wp_nonce_field('metasync_save_code_minification', 'metasync_code_minification_nonce'); ?>
19
20	<!-- ═══ Section: Asset Minification ═══ -->
21	<div class="metasync-section-header">
22	<span class="dashicons dashicons-editor-code"></span>
23	<h3><?php esc_html_e('Asset Minification', 'metasync'); ?></h3>
24	</div>
25
26	<!-- CSS Minification -->
27	<div class="metasync-card">
28	<div class="metasync-card-header">
29	<div class="metasync-card-title-group">
30	<h2><?php esc_html_e('CSS Minification', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_css_minify', 'Can break site styling/scripts if a theme or plugin script depends on exact formatting. Test your site after enabling; turn off for anything that breaks.'); ?></h2>
31	<span class="metasync-card-subtitle"><?php esc_html_e('Strip whitespace and comments from enqueued stylesheets', 'metasync'); ?></span>
32	</div>
33	<label class="metasync-toggle <?php echo isset($conflicts['css_minify']) ? 'metasync-toggle-overridden' : ''; ?>">
34	<input type="checkbox" name="metasync_code_min[enable_css_minify]" value="1"
35	<?php checked(!empty($settings['enable_css_minify'])); ?>
36	<?php disabled(isset($conflicts['css_minify'])); ?>>
37	<span class="metasync-toggle-slider"></span>
38	</label>
39	</div>
40
41	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_css_minify"
42	<?php echo empty($settings['enable_css_minify']) ? 'style="display:none;"' : ''; ?>>
43	<div class="metasync-field">
44	<label for="css_exclude_handles"><?php esc_html_e('Excluded Handles', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_css_exclude_handles', 'A \'handle\' is the internal name WordPress gives a script or stylesheet. If you don\'t know it, leave this blank — the defaults protect essential files.'); ?></label>
45	<input type="text" name="metasync_code_min[css_exclude_handles]" id="css_exclude_handles"
46	value="<?php echo esc_attr($settings['css_exclude_handles']); ?>"
47	placeholder="handle1, handle2, handle3">
48	<p class="metasync-field-description"><?php esc_html_e('Comma-separated list of wp_enqueue_style handles to exclude from minification.', 'metasync'); ?></p>
49	</div>
50	</div>
51	</div>
52
53	<!-- JS Minification -->
54	<div class="metasync-card">
55	<div class="metasync-card-header">
56	<div class="metasync-card-title-group">
57	<h2><?php esc_html_e('JS Minification', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_js_minify', 'Can break site styling/scripts if a theme or plugin script depends on exact formatting. Test your site after enabling; turn off for anything that breaks.'); ?></h2>
58	<span class="metasync-card-subtitle"><?php esc_html_e('Strip whitespace and comments from enqueued scripts', 'metasync'); ?></span>
59	</div>
60	<label class="metasync-toggle <?php echo isset($conflicts['js_minify']) ? 'metasync-toggle-overridden' : ''; ?>">
61	<input type="checkbox" name="metasync_code_min[enable_js_minify]" value="1"
62	<?php checked(!empty($settings['enable_js_minify'])); ?>
63	<?php disabled(isset($conflicts['js_minify'])); ?>>
64	<span class="metasync-toggle-slider"></span>
65	</label>
66	</div>
67
68	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_js_minify"
69	<?php echo empty($settings['enable_js_minify']) ? 'style="display:none;"' : ''; ?>>
70	<div class="metasync-field">
71	<label for="js_exclude_handles"><?php esc_html_e('Excluded Handles', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_js_exclude_handles', 'A \'handle\' is the internal name WordPress gives a script or stylesheet. If you don\'t know it, leave this blank — the defaults protect essential files.'); ?></label>
72	<input type="text" name="metasync_code_min[js_exclude_handles]" id="js_exclude_handles"
73	value="<?php echo esc_attr($settings['js_exclude_handles']); ?>"
74	placeholder="handle1, handle2, handle3">
75	<p class="metasync-field-description"><?php esc_html_e('Comma-separated list of wp_enqueue_script handles to exclude from minification.', 'metasync'); ?></p>
76	</div>
77	</div>
78	</div>
79
80	<!-- ═══ Section: Script Loading ═══ -->
81	<div class="metasync-section-header">
82	<span class="dashicons dashicons-performance"></span>
83	<h3><?php esc_html_e('Script Loading', 'metasync'); ?></h3>
84	</div>
85
86	<!-- JS Defer -->
87	<div class="metasync-card">
88	<div class="metasync-card-header">
89	<div class="metasync-card-title-group">
90	<h2><?php esc_html_e('JS Defer', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_js_defer', 'Loads scripts after the page appears, speeding up display. Some interactive features may briefly stop working — if a slider or form breaks, turn this off or exclude that script.'); ?></h2>
91	<span class="metasync-card-subtitle"><?php esc_html_e('Add defer attribute to non-essential scripts to prevent render blocking', 'metasync'); ?></span>
92	</div>
93	<label class="metasync-toggle <?php echo isset($conflicts['js_defer']) ? 'metasync-toggle-overridden' : ''; ?>">
94	<input type="checkbox" name="metasync_code_min[enable_js_defer]" value="1"
95	<?php checked(!empty($settings['enable_js_defer'])); ?>
96	<?php disabled(isset($conflicts['js_defer'])); ?>>
97	<span class="metasync-toggle-slider"></span>
98	</label>
99	</div>
100
101	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_js_defer"
102	<?php echo empty($settings['enable_js_defer']) ? 'style="display:none;"' : ''; ?>>
103	<div class="metasync-field">
104	<label for="js_defer_exclude_handles"><?php esc_html_e('Excluded Handles', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_js_defer_exclude_handles', 'A \'handle\' is the internal name WordPress gives a script or stylesheet. If you don\'t know it, leave this blank — the defaults protect essential files.'); ?></label>
105	<input type="text" name="metasync_code_min[js_defer_exclude_handles]" id="js_defer_exclude_handles"
106	value="<?php echo esc_attr($settings['js_defer_exclude_handles']); ?>"
107	placeholder="jquery, jquery-core, jquery-migrate">
108	<p class="metasync-field-description"><?php esc_html_e('Comma-separated list of script handles that should never be deferred. jQuery and core WP scripts are always excluded.', 'metasync'); ?></p>
109	</div>
110	</div>
111	</div>
112
113	<!-- JS Delay -->
114	<div class="metasync-card">
115	<div class="metasync-card-header">
116	<div class="metasync-card-title-group">
117	<h2><?php esc_html_e('JS Delay', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_js_delay', 'Holds heavy scripts (analytics, chat, pixels) until the visitor clicks or scrolls, then loads them automatically after 5 seconds. Improves speed but delays those tools slightly.'); ?></h2>
118	<span class="metasync-card-subtitle"><?php esc_html_e('Delay heavy third-party scripts until user interaction (improves INP)', 'metasync'); ?></span>
119	</div>
120	<label class="metasync-toggle <?php echo isset($conflicts['js_defer']) ? 'metasync-toggle-overridden' : ''; ?>">
121	<input type="checkbox" name="metasync_code_min[enable_js_delay]" value="1"
122	<?php checked(!empty($settings['enable_js_delay'])); ?>
123	<?php disabled(isset($conflicts['js_defer'])); ?>>
124	<span class="metasync-toggle-slider"></span>
125	</label>
126	</div>
127
128	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_js_delay"
129	<?php echo empty($settings['enable_js_delay']) ? 'style="display:none;"' : ''; ?>>
130	<div class="metasync-field">
131	<label for="js_delay_handles"><?php esc_html_e('Delay Handles', 'metasync'); ?><?php Metasync::render_tooltip_icon('code_min_js_delay_handles', 'A \'handle\' is the internal name WordPress gives a script or stylesheet. If you don\'t know it, leave this blank — the defaults protect essential files.'); ?></label>
132	<input type="text" name="metasync_code_min[js_delay_handles]" id="js_delay_handles"
133	value="<?php echo esc_attr($settings['js_delay_handles']); ?>"
134	placeholder="analytics-script, facebook-pixel">
135	<p class="metasync-field-description"><?php esc_html_e('Comma-separated list of script handles to delay until user interaction.', 'metasync'); ?></p>
136	</div>
137	<div class="metasync-field">
138	<label for="js_delay_patterns"><?php esc_html_e('Delay URL Patterns', 'metasync'); ?></label>
139	<textarea name="metasync_code_min[js_delay_patterns]" id="js_delay_patterns"
140	rows="3"
141	placeholder="facebook.net, google-analytics.com, googletagmanager.com"><?php echo esc_textarea($settings['js_delay_patterns']); ?></textarea>
142	<p class="metasync-field-description"><?php esc_html_e('Comma-separated URL substrings. Scripts whose src matches any of these patterns will be delayed. Delayed scripts auto-load after 5 seconds if no interaction occurs.', 'metasync'); ?></p>
143	</div>
144	</div>
145	</div>
146
147	<!-- ═══ Section: Cache ═══ -->
148	<div class="metasync-section-header">
149	<span class="dashicons dashicons-database"></span>
150	<h3><?php esc_html_e('Cache', 'metasync'); ?></h3>
151	</div>
152
153	<!-- Cache Settings -->
154	<div class="metasync-card">
155	<div class="metasync-card-header">
156	<div class="metasync-card-title-group">
157	<h2><?php esc_html_e('Cache Settings', 'metasync'); ?></h2>
158	<span class="metasync-card-subtitle"><?php esc_html_e('Configure cache lifetime for minified assets', 'metasync'); ?></span>
159	</div>
160	</div>
161	<div class="metasync-card-body">
162	<div class="metasync-field">
163	<label for="cache_ttl_days"><?php esc_html_e('Cache Lifetime (Days)', 'metasync'); ?></label>
164	<input type="number" name="metasync_code_min[cache_ttl_days]" id="cache_ttl_days"
165	value="<?php echo esc_attr((int) $settings['cache_ttl_days']); ?>"
166	min="1" max="365" step="1" style="max-width: 120px;">
167	<p class="metasync-field-description"><?php esc_html_e('Number of days before cached minified files are cleaned up. Files are automatically re-created on next request. Default: 30 days.', 'metasync'); ?></p>
168	</div>
169	</div>
170	</div>
171
172	<!-- Submit Buttons -->
173	<div class="metasync-form-actions">
174	<button type="submit" class="button button-primary metasync-btn-save">
175	<span class="dashicons dashicons-saved" style="margin-top: 4px;"></span>
176	<?php esc_html_e('Save Settings', 'metasync'); ?>
177	</button>
178	<button type="submit" name="metasync_code_min_reset" value="1" class="button metasync-btn-reset"
179	onclick="return confirm(window.metasyncCodeMin?.resetConfirm \|\| 'Reset settings?');">
180	<span class="dashicons dashicons-image-rotate" style="margin-top: 4px;"></span>
181	<?php esc_html_e('Reset to Defaults', 'metasync'); ?>
182	</button>
183	</div>
184
185	</form>
186	</div>
187
188	<!-- Sidebar -->
189	<div class="metasync-code-min-sidebar">
190	<!-- Active Features -->
191	<div class="metasync-card">
192	<div class="metasync-card-header">
193	<h3><?php esc_html_e('Active Features', 'metasync'); ?></h3>
194	</div>
195	<div class="metasync-feature-status-list">
196	<div class="metasync-feature-status-item">
197	<span class="metasync-feature-dot <?php echo !empty($settings['enable_css_minify']) ? 'active' : 'inactive'; ?>"></span>
198	<span><?php esc_html_e('CSS Minification', 'metasync'); ?></span>
199	</div>
200	<div class="metasync-feature-status-item">
201	<span class="metasync-feature-dot <?php echo !empty($settings['enable_js_minify']) ? 'active' : 'inactive'; ?>"></span>
202	<span><?php esc_html_e('JS Minification', 'metasync'); ?></span>
203	</div>
204	<div class="metasync-feature-status-item">
205	<span class="metasync-feature-dot <?php echo !empty($settings['enable_js_defer']) ? 'active' : 'inactive'; ?>"></span>
206	<span><?php esc_html_e('JS Defer', 'metasync'); ?></span>
207	</div>
208	<div class="metasync-feature-status-item">
209	<span class="metasync-feature-dot <?php echo !empty($settings['enable_js_delay']) ? 'active' : 'inactive'; ?>"></span>
210	<span><?php esc_html_e('JS Delay', 'metasync'); ?></span>
211	<?php if (!empty($settings['enable_js_delay'])): ?>
212	<span class="metasync-feature-format"><?php esc_html_e('5s fallback', 'metasync'); ?></span>
213	<?php endif; ?>
214	</div>
215	</div>
216	</div>
217
218	<!-- Performance Tips -->
219	<div class="metasync-card">
220	<div class="metasync-card-header">
221	<h3><?php esc_html_e('Performance Tips', 'metasync'); ?></h3>
222	</div>
223	<ul class="metasync-tips-list">
224	<li>
225	<span class="dashicons dashicons-performance" style="color: #10b981;"></span>
226	<?php esc_html_e('Enable CSS + JS minification together for maximum file size reduction.', 'metasync'); ?>
227	</li>
228	<li>
229	<span class="dashicons dashicons-clock" style="color: #3b82f6;"></span>
230	<?php esc_html_e('JS Defer improves First Contentful Paint by loading scripts after HTML parsing.', 'metasync'); ?>
231	</li>
232	<li>
233	<span class="dashicons dashicons-visibility" style="color: #f59e0b;"></span>
234	<?php esc_html_e('JS Delay is ideal for analytics, chat widgets, and social pixels that are not needed immediately.', 'metasync'); ?>
235	</li>
236	<li>
237	<span class="dashicons dashicons-info" style="color: #667eea;"></span>
238	<?php esc_html_e('jQuery and core WP scripts are always excluded from defer to prevent breakage.', 'metasync'); ?>
239	</li>
240	</ul>
241	</div>
242	</div>
243	</div>
244