wp-optimize / templates / minify / css-settings-tab.php

css-settings-tab.php in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 3.3.0, at templates/minify/css-settings-tab.php

180 lines 8.1 KB

Raw Download Zip

1	<?php if (!defined('WPO_VERSION')) die('No direct access allowed'); ?>
2	<div class="wpo_section wpo_group">
3	<div id="wpo_settings_warnings"></div>
4	<form>
5	<h3><?php esc_html_e('CSS options', 'wp-optimize'); ?></h3>
6	<div class="wpo-fieldgroup">
7	<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">
53	<input
54	name="remove_css"
55	type="checkbox"
56	id="remove_css"
57	value="1"
58	<?php echo checked($wpo_minify_options['remove_css']); ?>
59	>
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>
62	</label>
63	<?php endif; ?>
64	</fieldset>
65	</div>
66
67	<h3><?php esc_html_e('Exclude the following CSS files from processing', 'wp-optimize'); ?></h3>
68	<div class="wpo-fieldgroup">
69	<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'); ?>
84	</fieldset>
85	</div>
86
87	<h3><?php esc_html_e('Load the following CSS files asynchronously', 'wp-optimize'); ?></h3>
88	<div class="wpo-fieldgroup">
89	<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>
114	</fieldset>
115	</div>
116
117	<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
118	<h3><?php esc_html_e('Enable asynchronous CSS', 'wp-optimize'); ?></h3>
119	<div class="wpo-fieldgroup">
120	<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>
135	</fieldset>
136	</div>
137	<?php endif; ?>
138
139	<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
140	<h3>
141	<?php esc_html_e('Critical path CSS', 'wp-optimize'); ?>
142	</h3>
143	<div class="wpo-fieldgroup">
144	<fieldset>
145	<label class="wpo-label__bold" for="critical_path_css"><?php esc_html_e('Fallback CSS', 'wp-optimize'); ?></label>
146	<textarea
147	name="critical_path_css"
148	rows="7"
149	cols="50"
150	id="critical_path_css" class="large-text code"
151	placeholder=".css-code { display: block; }"
152	><?php echo esc_textarea($wpo_minify_options['critical_path_css']); ?></textarea>
153	</fieldset>
154
155	<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>
165	</fieldset>
166	</div>
167	<?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="...">
176	<span class="save-done dashicons dashicons-yes display-none"></span>
177	</p>
178	</form>
179	</div>
180