| 1 |
<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?> |
| 2 |
<div id='wpo_section_css' class="wpo_section wpo_group"> |
| 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> |
| 11 |
<form> |
| 12 |
<h3><?php esc_html_e('CSS options', 'wp-optimize'); ?></h3> |
| 13 |
<div class="wpo-fieldgroup"> |
| 14 |
<fieldset> |
| 15 |
<div class="wpo-fieldgroup__subgroup"> |
| 16 |
<label for="enable_css_minification"> |
| 17 |
<input |
| 18 |
name="enable_css_minification" |
| 19 |
type="checkbox" |
| 20 |
id="enable_css_minification" |
| 21 |
value="1" |
| 22 |
<?php echo checked($wpo_minify_options['enable_css_minification']); ?> |
| 23 |
> |
| 24 |
<?php esc_html_e('Enable minification of CSS files', 'wp-optimize'); ?> |
| 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); ?> |
| 36 |
> |
| 37 |
<?php esc_html_e('Enable removal of unused rules from CSS files (Experimental)', 'wp-optimize'); ?> |
| 38 |
</label> |
| 39 |
<span tabindex="0" 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> |
| 40 |
<?php if ($show_unused_css_advertise) : ?> |
| 41 |
<div class="wpo-inline-advertise"> |
| 42 |
<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> |
| 43 |
</div> |
| 44 |
<?php endif; ?> |
| 45 |
</div> |
| 46 |
<div class="wpo-fieldgroup__subgroup"> |
| 47 |
<label for="enable_merging_of_css"> |
| 48 |
<input |
| 49 |
name="enable_merging_of_css" |
| 50 |
type="checkbox" |
| 51 |
id="enable_merging_of_css" |
| 52 |
value="1" |
| 53 |
<?php echo checked($wpo_minify_options['enable_merging_of_css']); ?> |
| 54 |
> |
| 55 |
<?php esc_html_e('Enable merging of CSS files', 'wp-optimize'); ?> |
| 56 |
</label> |
| 57 |
<span tabindex="0" data-tooltip="<?php echo esc_attr($tooltip); ?>"><span class="dashicons dashicons-editor-help"></span> </span> |
| 58 |
</div> |
| 59 |
<div class="wpo-fieldgroup__subgroup"> |
| 60 |
<label for="inline_css" class="label-with-tooltip"> |
| 61 |
<input |
| 62 |
name="inline_css" |
| 63 |
type="checkbox" |
| 64 |
id="inline_css" |
| 65 |
value="1" |
| 66 |
<?php echo checked($wpo_minify_options['inline_css']); ?> |
| 67 |
> |
| 68 |
<?php esc_html_e('Inline CSS', 'wp-optimize'); ?> - <?php esc_html_e('Recommended if the CSS files are small enough.', 'wp-optimize'); ?> |
| 69 |
</label> |
| 70 |
<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> |
| 71 |
</div> |
| 72 |
<div class="wpo-fieldgroup__subgroup"> |
| 73 |
<label for="remove_print_mediatypes" class="label-with-tooltip"> |
| 74 |
<input |
| 75 |
name="remove_print_mediatypes" |
| 76 |
type="checkbox" |
| 77 |
id="remove_print_mediatypes" |
| 78 |
value="1" |
| 79 |
<?php echo checked($wpo_minify_options['remove_print_mediatypes']); ?> |
| 80 |
> |
| 81 |
<?php esc_html_e('Strip the "print" related stylesheets', 'wp-optimize'); ?> |
| 82 |
</label> |
| 83 |
<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> |
| 84 |
</div> |
| 85 |
<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?> |
| 86 |
<div class="wpo-fieldgroup__subgroup"> |
| 87 |
<label for="remove_css"> |
| 88 |
<input |
| 89 |
name="remove_css" |
| 90 |
type="checkbox" |
| 91 |
id="remove_css" |
| 92 |
value="1" |
| 93 |
<?php echo checked($wpo_minify_options['remove_css']); ?> |
| 94 |
> |
| 95 |
<?php esc_html_e('Dequeue all CSS files', 'wp-optimize'); ?> |
| 96 |
</label> |
| 97 |
<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> |
| 98 |
</div> |
| 99 |
<?php endif; ?> |
| 100 |
</fieldset> |
| 101 |
</div> |
| 102 |
|
| 103 |
<h3><?php esc_html_e('Exclude the following CSS files from processing', 'wp-optimize'); ?></h3> |
| 104 |
<div class="wpo-fieldgroup"> |
| 105 |
<fieldset> |
| 106 |
<label class="wpo-label__bold" for="exclude_css"> |
| 107 |
<?php esc_html_e('Any CSS files that match the paths below will be completely ignored.', 'wp-optimize'); ?> |
| 108 |
<br><?php esc_html_e('Use this if you are having issues with a specific CSS file', 'wp-optimize'); ?> |
| 109 |
<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> |
| 110 |
</label> |
| 111 |
<textarea |
| 112 |
name="exclude_css" |
| 113 |
rows="7" cols="50" |
| 114 |
id="exclude_css" |
| 115 |
class="large-text code" |
| 116 |
placeholder="<?php esc_attr_e('e.g.: /bootstrap.css', 'wp-optimize'); ?>" |
| 117 |
><?php echo esc_textarea($wpo_minify_options['exclude_css']);?></textarea> |
| 118 |
<br> |
| 119 |
<?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'); ?> |
| 120 |
</fieldset> |
| 121 |
</div> |
| 122 |
|
| 123 |
<h3><?php esc_html_e('Load the following CSS files asynchronously', 'wp-optimize'); ?></h3> |
| 124 |
<div class="wpo-fieldgroup"> |
| 125 |
<fieldset> |
| 126 |
<label class="wpo-label__bold" for="async_css"> |
| 127 |
<?php esc_html_e('Any CSS files that match the paths below will be loaded asynchronously.', 'wp-optimize'); ?><br> |
| 128 |
<?php esc_html_e('Use this if you have a completely independent stylesheet', 'wp-optimize'); ?> |
| 129 |
<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> |
| 130 |
</label> |
| 131 |
<textarea |
| 132 |
name="async_css" |
| 133 |
rows="7" |
| 134 |
cols="50" |
| 135 |
id="async_css" |
| 136 |
class="large-text code" |
| 137 |
placeholder="<?php esc_attr_e('e.g.: /wp-content/themes/my-theme/css/custom-font.css', 'wp-optimize'); ?>" |
| 138 |
><?php echo esc_textarea($wpo_minify_options['async_css']); ?></textarea> |
| 139 |
<div class="wpo-fieldgroup__subgroup"> |
| 140 |
<label for="exclude_css_from_page_speed_tools"> |
| 141 |
<input |
| 142 |
name="exclude_css_from_page_speed_tools" |
| 143 |
type="checkbox" |
| 144 |
id="exclude_css_from_page_speed_tools" |
| 145 |
value="1" |
| 146 |
<?php echo checked($wpo_minify_options['exclude_css_from_page_speed_tools']); ?> |
| 147 |
> |
| 148 |
<?php esc_html_e('Exclude stylesheets from page speed tests (PageSpeed Insights, GTMetrix...)', 'wp-optimize'); ?> |
| 149 |
</label> |
| 150 |
<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> |
| 151 |
</div> |
| 152 |
</fieldset> |
| 153 |
</div> |
| 154 |
|
| 155 |
<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?> |
| 156 |
<h3><?php esc_html_e('Enable asynchronous CSS', 'wp-optimize'); ?></h3> |
| 157 |
<div class="wpo-fieldgroup"> |
| 158 |
<fieldset> |
| 159 |
<label for="loadcss"> |
| 160 |
<input |
| 161 |
name="loadcss" |
| 162 |
type="checkbox" |
| 163 |
id="loadcss" |
| 164 |
value="1" |
| 165 |
<?php echo checked($wpo_minify_options['loadcss']); ?> |
| 166 |
> |
| 167 |
<?php esc_html_e('Load all CSS files asynchronously', 'wp-optimize'); ?> |
| 168 |
<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> |
| 169 |
</label> |
| 170 |
<p> |
| 171 |
<?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'); ?> |
| 172 |
</p> |
| 173 |
</fieldset> |
| 174 |
</div> |
| 175 |
<?php endif; ?> |
| 176 |
|
| 177 |
<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?> |
| 178 |
<h3> |
| 179 |
<?php esc_html_e('Critical path CSS', 'wp-optimize'); ?> |
| 180 |
</h3> |
| 181 |
<div class="wpo-fieldgroup"> |
| 182 |
<fieldset> |
| 183 |
<label class="wpo-label__bold" for="critical_path_css"><?php esc_html_e('Fallback CSS', 'wp-optimize'); ?></label> |
| 184 |
<textarea |
| 185 |
name="critical_path_css" |
| 186 |
rows="7" |
| 187 |
cols="50" |
| 188 |
id="critical_path_css" class="large-text code" |
| 189 |
placeholder=".css-code { display: block; }" |
| 190 |
><?php echo esc_textarea($wpo_minify_options['critical_path_css']); ?></textarea> |
| 191 |
</fieldset> |
| 192 |
|
| 193 |
<fieldset> |
| 194 |
<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> |
| 195 |
<textarea |
| 196 |
name="critical_path_css_is_front_page" |
| 197 |
rows="7" |
| 198 |
cols="50" |
| 199 |
id="critical_path_css_is_front_page" |
| 200 |
class="large-text code" |
| 201 |
placeholder=".css-code { display: block; }" |
| 202 |
><?php echo esc_textarea($wpo_minify_options['critical_path_css_is_front_page']); ?></textarea> |
| 203 |
</fieldset> |
| 204 |
</div> |
| 205 |
<?php endif; ?> |
| 206 |
|
| 207 |
<p class="submit"> |
| 208 |
<input |
| 209 |
class="wp-optimize-save-minify-settings button button-primary" |
| 210 |
type="submit" |
| 211 |
value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>" |
| 212 |
> |
| 213 |
<img class="wpo_spinner" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="..."> |
| 214 |
<span class="save-done dashicons dashicons-yes display-none"></span> |
| 215 |
</p> |
| 216 |
</form> |
| 217 |
</div> |
| 218 |
|
