← All changes | templates/minify/css-settings-tab.php +166 -122 3.2.22 → 4.7.0 View file →

		@@ -1,66 +1,103 @@
1		-<?php if (!defined('WPO_VERSION')) die('No direct access allowed'); ?>
2		-<div class="wpo_section wpo_group">
	1	+<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?>
	2	+<div id='wpo_section_css' class="wpo_section wpo_group">
3	3	<div id="wpo_settings_warnings"></div>
	4	+ <div class="notice notice-warning wpo-warning is-dismissible wpo_section_notice_css" style="<?php echo $show_section_notice ? '' : 'display:none;'; ?>">
	5	+ <p>
	6	+ <span class="dashicons dashicons-shield"></span>
	7	+ <strong><?php esc_html_e('Enable merging of CSS files into one to reduce HTTP requests.', 'wp-optimize'); ?></strong><br>
	8	+ <?php echo wp_kses_post($notice_text);?>
	9	+ </p>
	10	+ </div>
4	11	<form>
5	12	<h3><?php esc_html_e('CSS options', 'wp-optimize'); ?></h3>
6	13	<div class="wpo-fieldgroup">
7	14	<fieldset>
8		- <label for="enable_css_minification">
9		- <input
10		- name="enable_css_minification"
11		- type="checkbox"
12		- id="enable_css_minification"
13		- value="1"
14		- <?php echo checked($wpo_minify_options['enable_css_minification']); ?>
15		- >
16		- <?php esc_html_e('Enable minification of CSS files', 'wp-optimize'); ?>
17		- </label>
18		- <label for="enable_merging_of_css">
19		- <input
20		- name="enable_merging_of_css"
21		- type="checkbox"
22		- id="enable_merging_of_css"
23		- value="1"
24		- <?php echo checked($wpo_minify_options['enable_merging_of_css']); ?>
25		- >
26		- <?php esc_html_e('Enable merging of CSS files', 'wp-optimize'); ?>
27		- <span tabindex="0" data-tooltip="<?php esc_attr_e('If some of the design is breaking on the frontend, disabling merging of CSS might fix the issues.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
28		- </label>
29		- <label for="inline_css">
30		- <input
31		- name="inline_css"
32		- type="checkbox"
33		- id="inline_css"
34		- value="1"
35		- <?php echo checked($wpo_minify_options['inline_css']); ?>
36		- >
37		- <?php esc_html_e('Inline CSS', 'wp-optimize'); ?> - <?php esc_html_e('Recommended if the CSS files are small enough.', 'wp-optimize'); ?>
38		- <span tabindex="0" data-tooltip="<?php esc_attr_e('When enabled, small CSS files will be inlined.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
39		- </label>
40		- <label for="remove_print_mediatypes">
41		- <input
42		- name="remove_print_mediatypes"
43		- type="checkbox"
44		- id="remove_print_mediatypes"
45		- value="1"
46		- <?php echo checked($wpo_minify_options['remove_print_mediatypes']); ?>
47		- >
48		- <?php esc_html_e('Strip the "print" related stylesheets', 'wp-optimize'); ?>
49		- <span tabindex="0" data-tooltip='<?php esc_attr_e('When selected, any CSS files with the media type "print" will be removed.', 'wp-optimize');?> <?php esc_html_e('Enable if your site does not need specific print styles.', 'wp-optimize');?>'><span class="dashicons dashicons-editor-help"></span> </span>
50		- </label>
51		- <?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
52		- <label for="remove_css">
	15	+ <div class="wpo-fieldgroup__subgroup">
	16	+ <label for="enable_css_minification">
53	17	<input
54		- name="remove_css"
	18	+ name="enable_css_minification"
55	19	type="checkbox"
56		- id="remove_css"
	20	+ id="enable_css_minification"
57	21	value="1"
58		- <?php echo checked($wpo_minify_options['remove_css']); ?>
	22	+ <?php echo checked($wpo_minify_options['enable_css_minification']); ?>
59	23	>
60		- <?php esc_html_e('Dequeue all CSS files', 'wp-optimize'); ?>
61		- <span tabindex="0" data-tooltip="<?php esc_attr_e('This is useful if you want to test your critical path CSS', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	24	+ <?php esc_html_e('Enable minification of CSS files', 'wp-optimize'); ?>
62	25	</label>
	26	+ </div>
	27	+ <div id="enable_unused_css_removal_wrapper" class="wpo-fieldgroup__subgroup" style="<?php echo $show_unused_css ? ' display:block;' : ' display:none'; ?>">
	28	+ <label for="enable_unused_css" style="<?php echo 'margin-left: 20px;'; ?>">
	29	+ <input
	30	+ name="enable_unused_css"
	31	+ type="checkbox"
	32	+ id="enable_unused_css"
	33	+ value="1"
	34	+ <?php checked($wpo_minify_options['enable_unused_css']); ?>
	35	+ <?php disabled($show_unused_css_advertise || !$is_page_cache_enabled); ?>
	36	+ >
	37	+ <?php esc_html_e('Enable removal of unused rules from CSS files (Experimental)', 'wp-optimize'); ?>
	38	+ <em class="<?php if ($is_page_cache_enabled || $show_unused_css_advertise) echo esc_attr('wpo_hidden'); ?>"><?php esc_html_e('This option is available only when page cache is enabled.', 'wp-optimize'); ?></em>
	39	+ </label>
	40	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('If some of the design is breaking on the frontend, disabling removal of unused CSS rules might fix the issues.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	41	+ <?php if ($show_unused_css_advertise) : ?>
	42	+ <div class="wpo-inline-advertise">
	43	+ <a class="" href="https://teamupdraft.com/wp-optimize/pricing/?utm_source=wpo-plugin&utm_medium=referral&utm_campaign=paac&utm_creative_format=overlay&utm_content=remove-unused-css" target="_blank"><?php esc_html_e('Upgrade to WP-Optimize Premium to unlock this feature.', 'wp-optimize'); ?></a>
	44	+ </div>
	45	+ <?php endif; ?>
	46	+ </div>
	47	+ <div class="wpo-fieldgroup__subgroup">
	48	+ <label for="enable_merging_of_css">
	49	+ <input
	50	+ name="enable_merging_of_css"
	51	+ type="checkbox"
	52	+ id="enable_merging_of_css"
	53	+ value="1"
	54	+ <?php echo checked($wpo_minify_options['enable_merging_of_css']); ?>
	55	+ >
	56	+ <?php esc_html_e('Enable merging of CSS files', 'wp-optimize'); ?>
	57	+ </label>
	58	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($tooltip); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
	59	+ </div>
	60	+ <div class="wpo-fieldgroup__subgroup">
	61	+ <label for="inline_css" class="label-with-tooltip">
	62	+ <input
	63	+ name="inline_css"
	64	+ type="checkbox"
	65	+ id="inline_css"
	66	+ value="1"
	67	+ <?php echo checked($wpo_minify_options['inline_css']); ?>
	68	+ >
	69	+ <?php esc_html_e('Inline CSS', 'wp-optimize'); ?> - <?php esc_html_e('Recommended if the CSS files are small enough.', 'wp-optimize'); ?>
	70	+ </label>
	71	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('When enabled, small CSS files will be inlined.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	72	+ </div>
	73	+ <div class="wpo-fieldgroup__subgroup">
	74	+ <label for="remove_print_mediatypes" class="label-with-tooltip">
	75	+ <input
	76	+ name="remove_print_mediatypes"
	77	+ type="checkbox"
	78	+ id="remove_print_mediatypes"
	79	+ value="1"
	80	+ <?php echo checked($wpo_minify_options['remove_print_mediatypes']); ?>
	81	+ >
	82	+ <?php esc_html_e('Strip the "print" related stylesheets', 'wp-optimize'); ?>
	83	+ </label>
	84	+ <span tabindex="0" class="wpo-tooltip" data-tooltip='<?php esc_attr_e('When selected, any CSS files with the media type "print" will be removed.', 'wp-optimize');?> <?php esc_html_e('Enable if your site does not need specific print styles.', 'wp-optimize');?>'><span class="dashicons dashicons-editor-help"></span> </span>
	85	+ </div>
	86	+ <?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
	87	+ <div class="wpo-fieldgroup__subgroup">
	88	+ <label for="remove_css">
	89	+ <input
	90	+ name="remove_css"
	91	+ type="checkbox"
	92	+ id="remove_css"
	93	+ value="1"
	94	+ <?php echo checked($wpo_minify_options['remove_css']); ?>
	95	+ >
	96	+ <?php esc_html_e('Dequeue all CSS files', 'wp-optimize'); ?>
	97	+ </label>
	98	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('This is useful if you want to test your critical path CSS', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	99	+ </div>
63	100	<?php endif; ?>
64	101	</fieldset>
65	102	</div>
66	103
		@@ -66,22 +103,24 @@
66	103
67	104	<h3><?php esc_html_e('Exclude the following CSS files from processing', 'wp-optimize'); ?></h3>
68	105	<div class="wpo-fieldgroup">
69	106	<fieldset>
70		- <label class="wpo-label__bold" for="exclude_css">
71		- <?php esc_html_e('Any CSS files that match the paths below will be completely ignored.', 'wp-optimize'); ?>
72		- <br><?php esc_html_e('Use this if you are having issues with a specific CSS file', 'wp-optimize'); ?>
73		- <span tabindex="0" data-tooltip="<?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
74		- </label>
75		- <textarea
76		- name="exclude_css"
77		- rows="7" cols="50"
78		- id="exclude_css"
79		- class="large-text code"
80		- placeholder="<?php esc_attr_e('e.g.: /bootstrap.css', 'wp-optimize'); ?>"
81		- ><?php echo esc_textarea($wpo_minify_options['exclude_css']);?></textarea>
82		- <br>
83		- <?php esc_html_e('Some files known for causing issues when combined / minified are excluded by default.', 'wp-optimize'); ?> <?php esc_html_e('You can see / edit them in the Advanced tab.', 'wp-optimize'); ?>
	107	+ <div class="wpo-fieldgroup__subgroup">
	108	+ <label class="wpo-label__bold" for="exclude_css">
	109	+ <?php esc_html_e('Any CSS files that match the paths below will be completely ignored.', 'wp-optimize'); ?>
	110	+ <br><?php esc_html_e('Use this if you are having issues with a specific CSS file', 'wp-optimize'); ?>
	111	+ </label>
	112	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	113	+ <textarea
	114	+ name="exclude_css"
	115	+ rows="7" cols="50"
	116	+ id="exclude_css"
	117	+ class="large-text code"
	118	+ placeholder="<?php esc_attr_e('e.g.: /bootstrap.css', 'wp-optimize'); ?>"
	119	+ ><?php echo esc_textarea($wpo_minify_options['exclude_css']);?></textarea>
	120	+ <br>
	121	+ <?php esc_html_e('Some files known for causing issues when combined / minified are excluded by default.', 'wp-optimize'); ?> <?php esc_html_e('You can see / edit them in the Advanced tab.', 'wp-optimize'); ?>
	122	+ </div>
84	123	</fieldset>
85	124	</div>
86	125
87	126	<h3><?php esc_html_e('Load the following CSS files asynchronously', 'wp-optimize'); ?></h3>
		@@ -86,32 +125,36 @@
86	125
87	126	<h3><?php esc_html_e('Load the following CSS files asynchronously', 'wp-optimize'); ?></h3>
88	127	<div class="wpo-fieldgroup">
89	128	<fieldset>
90		- <label class="wpo-label__bold" for="async_css">
91		- <?php esc_html_e('Any CSS files that match the paths below will be loaded asynchronously.', 'wp-optimize'); ?><br>
92		- <?php esc_html_e('Use this if you have a completely independent stylesheet', 'wp-optimize'); ?>
93		- <span tabindex="0" data-tooltip="<?php esc_attr_e("e.g. You may want to exclude 'fontawesome' or other libraries from the initial load", 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
94		- </label>
95		- <textarea
96		- name="async_css"
97		- rows="7"
98		- cols="50"
99		- id="async_css"
100		- class="large-text code"
101		- placeholder="<?php esc_attr_e('e.g.: /wp-content/themes/my-theme/css/custom-font.css', 'wp-optimize'); ?>"
102		- ><?php echo esc_textarea($wpo_minify_options['async_css']); ?></textarea>
103		- <label for="exclude_css_from_page_speed_tools">
104		- <input
105		- name="exclude_css_from_page_speed_tools"
106		- type="checkbox"
107		- id="exclude_css_from_page_speed_tools"
108		- value="1"
109		- <?php echo checked($wpo_minify_options['exclude_css_from_page_speed_tools']); ?>
110		- >
111		- <?php esc_html_e('Exclude stylesheets from page speed tests (PageSpeed Insights, GTMetrix...)', 'wp-optimize'); ?>
112		- <span tabindex="0" data-tooltip="<?php esc_attr_e('Use this only for testing purpose to find out which stylesheets are slowing down your site.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
113		- </label>
	129	+ <div class="wpo-fieldgroup__subgroup">
	130	+ <label class="wpo-label__bold" for="async_css">
	131	+ <?php esc_html_e('Any CSS files that match the paths below will be loaded asynchronously.', 'wp-optimize'); ?><br>
	132	+ <?php esc_html_e('Use this if you have a completely independent stylesheet', 'wp-optimize'); ?>
	133	+ </label>
	134	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e("e.g. You may want to exclude 'fontawesome' or other libraries from the initial load", 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	135	+ <textarea
	136	+ name="async_css"
	137	+ rows="7"
	138	+ cols="50"
	139	+ id="async_css"
	140	+ class="large-text code"
	141	+ placeholder="<?php esc_attr_e('e.g.: /wp-content/themes/my-theme/css/custom-font.css', 'wp-optimize'); ?>"
	142	+ ><?php echo esc_textarea($wpo_minify_options['async_css']); ?></textarea>
	143	+ </div>
	144	+ <div class="wpo-fieldgroup__subgroup">
	145	+ <label for="exclude_css_from_page_speed_tools">
	146	+ <input
	147	+ name="exclude_css_from_page_speed_tools"
	148	+ type="checkbox"
	149	+ id="exclude_css_from_page_speed_tools"
	150	+ value="1"
	151	+ <?php echo checked($wpo_minify_options['exclude_css_from_page_speed_tools']); ?>
	152	+ >
	153	+ <?php esc_html_e('Exclude stylesheets from page speed tests (PageSpeed Insights, GTMetrix...)', 'wp-optimize'); ?>
	154	+ </label>
	155	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Use this only for testing purpose to find out which stylesheets are slowing down your site.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	156	+ </div>
114	157	</fieldset>
115	158	</div>
116	159
117	160	<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
		@@ -117,22 +160,24 @@
117	160	<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
118	161	<h3><?php esc_html_e('Enable asynchronous CSS', 'wp-optimize'); ?></h3>
119	162	<div class="wpo-fieldgroup">
120	163	<fieldset>
121		- <label for="loadcss">
122		- <input
123		- name="loadcss"
124		- type="checkbox"
125		- id="loadcss"
126		- value="1"
127		- <?php echo checked($wpo_minify_options['loadcss']); ?>
128		- >
129		- <?php esc_html_e('Load all CSS files asynchronously', 'wp-optimize'); ?>
130		- <span tabindex="0" data-tooltip="<?php esc_attr_e('Note that inline CSS won\'t work if this is active', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
131		- </label>
132		- <p>
133		- <?php esc_html_e('If you have multiple css files per media type, they may load out of order and break your design when loaded asynchronously.', 'wp-optimize'); ?>
134		- </p>
	164	+ <div class="wpo-fieldgroup__subgroup">
	165	+ <label for="loadcss">
	166	+ <input
	167	+ name="loadcss"
	168	+ type="checkbox"
	169	+ id="loadcss"
	170	+ value="1"
	171	+ <?php echo checked($wpo_minify_options['loadcss']); ?>
	172	+ >
	173	+ <?php esc_html_e('Load all CSS files asynchronously', 'wp-optimize'); ?>
	174	+ </label>
	175	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Note that inline CSS won\'t work if this is active', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	176	+ <p>
	177	+ <?php esc_html_e('If you have multiple css files per media type, they may load out of order and break your design when loaded asynchronously.', 'wp-optimize'); ?>
	178	+ </p>
	179	+ </div>
135	180	</fieldset>
136	181	</div>
137	182	<?php endif; ?>
138	183
		@@ -152,28 +197,27 @@
152	197	><?php echo esc_textarea($wpo_minify_options['critical_path_css']); ?></textarea>
153	198	</fieldset>
154	199
155	200	<fieldset>
156		- <label class="wpo-label__bold" for="critical_path_css_is_front_page"><?php esc_html_e('is_front_page (conditional)', 'wp-optimize'); ?> <span tabindex="0" data-tooltip="<?php esc_attr_e('This will be inlined after the above if your page matches the WP conditional is_front_page()', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span></label>
157		- <textarea
158		- name="critical_path_css_is_front_page"
159		- rows="7"
160		- cols="50"
161		- id="critical_path_css_is_front_page"
162		- class="large-text code"
163		- placeholder=".css-code { display: block; }"
164		- ><?php echo esc_textarea($wpo_minify_options['critical_path_css_is_front_page']); ?></textarea>
	201	+ <div class="wpo-fieldgroup__subgroup">
	202	+ <label class="wpo-label__bold" for="critical_path_css_is_front_page"><?php esc_html_e('is_front_page (conditional)', 'wp-optimize'); ?></label>
	203	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('This will be inlined after the above if your page matches the WP conditional is_front_page()', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	204	+ <textarea
	205	+ name="critical_path_css_is_front_page"
	206	+ rows="7"
	207	+ cols="50"
	208	+ id="critical_path_css_is_front_page"
	209	+ class="large-text code"
	210	+ placeholder=".css-code { display: block; }"
	211	+ ><?php echo esc_textarea($wpo_minify_options['critical_path_css_is_front_page']); ?></textarea>
	212	+ </div>
165	213	</fieldset>
166	214	</div>
167	215	<?php endif; ?>
168		-
169		- <p class="submit">
170		- <input
171		- class="wp-optimize-save-minify-settings button button-primary"
172		- type="submit"
173		- value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>"
174		- >
175		- <img class="wpo_spinner" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); ?>" alt="...">
	216	+
	217	+ <div class="wpo-save-btn-container">
	218	+ <input class="wp-optimize-save-minify-settings button button-primary" type="submit" value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>">
	219	+ <img class="wpo_spinner" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="...">
176	220	<span class="save-done dashicons dashicons-yes display-none"></span>
177		- </p>
	221	+ </div>
178	222	</form>
179	223	</div>