Brak opisu

class-twentytwenty-customize.php 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. <?php
  2. /**
  3. * Customizer settings for this theme.
  4. *
  5. * @package WordPress
  6. * @subpackage Twenty_Twenty
  7. * @since Twenty Twenty 1.0
  8. */
  9. if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
  10. /**
  11. * CUSTOMIZER SETTINGS
  12. *
  13. * @since Twenty Twenty 1.0
  14. */
  15. class TwentyTwenty_Customize {
  16. /**
  17. * Register customizer options.
  18. *
  19. * @since Twenty Twenty 1.0
  20. *
  21. * @param WP_Customize_Manager $wp_customize Theme Customizer object.
  22. */
  23. public static function register( $wp_customize ) {
  24. /**
  25. * Site Title & Description.
  26. * */
  27. $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
  28. $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
  29. $wp_customize->selective_refresh->add_partial(
  30. 'blogname',
  31. array(
  32. 'selector' => '.site-title a',
  33. 'render_callback' => 'twentytwenty_customize_partial_blogname',
  34. )
  35. );
  36. $wp_customize->selective_refresh->add_partial(
  37. 'blogdescription',
  38. array(
  39. 'selector' => '.site-description',
  40. 'render_callback' => 'twentytwenty_customize_partial_blogdescription',
  41. )
  42. );
  43. $wp_customize->selective_refresh->add_partial(
  44. 'custom_logo',
  45. array(
  46. 'selector' => '.header-titles [class*=site-]:not(.site-description)',
  47. 'render_callback' => 'twentytwenty_customize_partial_site_logo',
  48. )
  49. );
  50. $wp_customize->selective_refresh->add_partial(
  51. 'retina_logo',
  52. array(
  53. 'selector' => '.header-titles [class*=site-]:not(.site-description)',
  54. 'render_callback' => 'twentytwenty_customize_partial_site_logo',
  55. )
  56. );
  57. /**
  58. * Site Identity
  59. */
  60. /* 2X Header Logo ---------------- */
  61. $wp_customize->add_setting(
  62. 'retina_logo',
  63. array(
  64. 'capability' => 'edit_theme_options',
  65. 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
  66. 'transport' => 'postMessage',
  67. )
  68. );
  69. $wp_customize->add_control(
  70. 'retina_logo',
  71. array(
  72. 'type' => 'checkbox',
  73. 'section' => 'title_tagline',
  74. 'priority' => 10,
  75. 'label' => __( 'Retina logo', 'twentytwenty' ),
  76. 'description' => __( 'Scales the logo to half its uploaded size, making it sharp on high-res screens.', 'twentytwenty' ),
  77. )
  78. );
  79. // Header & Footer Background Color.
  80. $wp_customize->add_setting(
  81. 'header_footer_background_color',
  82. array(
  83. 'default' => '#ffffff',
  84. 'sanitize_callback' => 'sanitize_hex_color',
  85. 'transport' => 'postMessage',
  86. )
  87. );
  88. $wp_customize->add_control(
  89. new WP_Customize_Color_Control(
  90. $wp_customize,
  91. 'header_footer_background_color',
  92. array(
  93. 'label' => __( 'Header &amp; Footer Background Color', 'twentytwenty' ),
  94. 'section' => 'colors',
  95. )
  96. )
  97. );
  98. // Enable picking an accent color.
  99. $wp_customize->add_setting(
  100. 'accent_hue_active',
  101. array(
  102. 'capability' => 'edit_theme_options',
  103. 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
  104. 'transport' => 'postMessage',
  105. 'default' => 'default',
  106. )
  107. );
  108. $wp_customize->add_control(
  109. 'accent_hue_active',
  110. array(
  111. 'type' => 'radio',
  112. 'section' => 'colors',
  113. 'label' => __( 'Primary Color', 'twentytwenty' ),
  114. 'choices' => array(
  115. 'default' => _x( 'Default', 'color', 'twentytwenty' ),
  116. 'custom' => _x( 'Custom', 'color', 'twentytwenty' ),
  117. ),
  118. )
  119. );
  120. /**
  121. * Implementation for the accent color.
  122. * This is different to all other color options because of the accessibility enhancements.
  123. * The control is a hue-only colorpicker, and there is a separate setting that holds values
  124. * for other colors calculated based on the selected hue and various background-colors on the page.
  125. *
  126. * @since Twenty Twenty 1.0
  127. */
  128. // Add the setting for the hue colorpicker.
  129. $wp_customize->add_setting(
  130. 'accent_hue',
  131. array(
  132. 'default' => 344,
  133. 'type' => 'theme_mod',
  134. 'sanitize_callback' => 'absint',
  135. 'transport' => 'postMessage',
  136. )
  137. );
  138. // Add setting to hold colors derived from the accent hue.
  139. $wp_customize->add_setting(
  140. 'accent_accessible_colors',
  141. array(
  142. 'default' => array(
  143. 'content' => array(
  144. 'text' => '#000000',
  145. 'accent' => '#cd2653',
  146. 'secondary' => '#6d6d6d',
  147. 'borders' => '#dcd7ca',
  148. ),
  149. 'header-footer' => array(
  150. 'text' => '#000000',
  151. 'accent' => '#cd2653',
  152. 'secondary' => '#6d6d6d',
  153. 'borders' => '#dcd7ca',
  154. ),
  155. ),
  156. 'type' => 'theme_mod',
  157. 'transport' => 'postMessage',
  158. 'sanitize_callback' => array( __CLASS__, 'sanitize_accent_accessible_colors' ),
  159. )
  160. );
  161. // Add the hue-only colorpicker for the accent color.
  162. $wp_customize->add_control(
  163. new WP_Customize_Color_Control(
  164. $wp_customize,
  165. 'accent_hue',
  166. array(
  167. 'section' => 'colors',
  168. 'settings' => 'accent_hue',
  169. 'description' => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ),
  170. 'mode' => 'hue',
  171. 'active_callback' => function() use ( $wp_customize ) {
  172. return ( 'custom' === $wp_customize->get_setting( 'accent_hue_active' )->value() );
  173. },
  174. )
  175. )
  176. );
  177. // Update background color with postMessage, so inline CSS output is updated as well.
  178. $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
  179. /**
  180. * Theme Options
  181. */
  182. $wp_customize->add_section(
  183. 'options',
  184. array(
  185. 'title' => __( 'Theme Options', 'twentytwenty' ),
  186. 'priority' => 40,
  187. 'capability' => 'edit_theme_options',
  188. )
  189. );
  190. /* Enable Header Search ----------------------------------------------- */
  191. $wp_customize->add_setting(
  192. 'enable_header_search',
  193. array(
  194. 'capability' => 'edit_theme_options',
  195. 'default' => true,
  196. 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
  197. )
  198. );
  199. $wp_customize->add_control(
  200. 'enable_header_search',
  201. array(
  202. 'type' => 'checkbox',
  203. 'section' => 'options',
  204. 'priority' => 10,
  205. 'label' => __( 'Show search in header', 'twentytwenty' ),
  206. )
  207. );
  208. /* Show author bio ---------------------------------------------------- */
  209. $wp_customize->add_setting(
  210. 'show_author_bio',
  211. array(
  212. 'capability' => 'edit_theme_options',
  213. 'default' => true,
  214. 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
  215. )
  216. );
  217. $wp_customize->add_control(
  218. 'show_author_bio',
  219. array(
  220. 'type' => 'checkbox',
  221. 'section' => 'options',
  222. 'priority' => 10,
  223. 'label' => __( 'Show author bio', 'twentytwenty' ),
  224. )
  225. );
  226. /* Display full content or excerpts on the blog and archives --------- */
  227. $wp_customize->add_setting(
  228. 'blog_content',
  229. array(
  230. 'capability' => 'edit_theme_options',
  231. 'default' => 'full',
  232. 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
  233. )
  234. );
  235. $wp_customize->add_control(
  236. 'blog_content',
  237. array(
  238. 'type' => 'radio',
  239. 'section' => 'options',
  240. 'priority' => 10,
  241. 'label' => __( 'On archive pages, posts show:', 'twentytwenty' ),
  242. 'choices' => array(
  243. 'full' => __( 'Full text', 'twentytwenty' ),
  244. 'summary' => __( 'Summary', 'twentytwenty' ),
  245. ),
  246. )
  247. );
  248. /**
  249. * Template: Cover Template.
  250. */
  251. $wp_customize->add_section(
  252. 'cover_template_options',
  253. array(
  254. 'title' => __( 'Cover Template', 'twentytwenty' ),
  255. 'capability' => 'edit_theme_options',
  256. 'description' => __( 'Settings for the "Cover Template" page template. Add a featured image to use as background.', 'twentytwenty' ),
  257. 'priority' => 42,
  258. )
  259. );
  260. /* Overlay Fixed Background ------ */
  261. $wp_customize->add_setting(
  262. 'cover_template_fixed_background',
  263. array(
  264. 'capability' => 'edit_theme_options',
  265. 'default' => true,
  266. 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
  267. 'transport' => 'postMessage',
  268. )
  269. );
  270. $wp_customize->add_control(
  271. 'cover_template_fixed_background',
  272. array(
  273. 'type' => 'checkbox',
  274. 'section' => 'cover_template_options',
  275. 'label' => __( 'Fixed Background Image', 'twentytwenty' ),
  276. 'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ),
  277. )
  278. );
  279. $wp_customize->selective_refresh->add_partial(
  280. 'cover_template_fixed_background',
  281. array(
  282. 'selector' => '.cover-header',
  283. 'type' => 'cover_fixed',
  284. )
  285. );
  286. /* Separator --------------------- */
  287. $wp_customize->add_setting(
  288. 'cover_template_separator_1',
  289. array(
  290. 'sanitize_callback' => 'wp_filter_nohtml_kses',
  291. )
  292. );
  293. $wp_customize->add_control(
  294. new TwentyTwenty_Separator_Control(
  295. $wp_customize,
  296. 'cover_template_separator_1',
  297. array(
  298. 'section' => 'cover_template_options',
  299. )
  300. )
  301. );
  302. /* Overlay Background Color ------ */
  303. $wp_customize->add_setting(
  304. 'cover_template_overlay_background_color',
  305. array(
  306. 'default' => twentytwenty_get_color_for_area( 'content', 'accent' ),
  307. 'sanitize_callback' => 'sanitize_hex_color',
  308. )
  309. );
  310. $wp_customize->add_control(
  311. new WP_Customize_Color_Control(
  312. $wp_customize,
  313. 'cover_template_overlay_background_color',
  314. array(
  315. 'label' => __( 'Overlay Background Color', 'twentytwenty' ),
  316. 'description' => __( 'The color used for the overlay. Defaults to the accent color.', 'twentytwenty' ),
  317. 'section' => 'cover_template_options',
  318. )
  319. )
  320. );
  321. /* Overlay Text Color ------------ */
  322. $wp_customize->add_setting(
  323. 'cover_template_overlay_text_color',
  324. array(
  325. 'default' => '#ffffff',
  326. 'sanitize_callback' => 'sanitize_hex_color',
  327. )
  328. );
  329. $wp_customize->add_control(
  330. new WP_Customize_Color_Control(
  331. $wp_customize,
  332. 'cover_template_overlay_text_color',
  333. array(
  334. 'label' => __( 'Overlay Text Color', 'twentytwenty' ),
  335. 'description' => __( 'The color used for the text in the overlay.', 'twentytwenty' ),
  336. 'section' => 'cover_template_options',
  337. )
  338. )
  339. );
  340. /* Overlay Color Opacity --------- */
  341. $wp_customize->add_setting(
  342. 'cover_template_overlay_opacity',
  343. array(
  344. 'default' => 80,
  345. 'sanitize_callback' => 'absint',
  346. 'transport' => 'postMessage',
  347. )
  348. );
  349. $wp_customize->add_control(
  350. 'cover_template_overlay_opacity',
  351. array(
  352. 'label' => __( 'Overlay Opacity', 'twentytwenty' ),
  353. 'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
  354. 'section' => 'cover_template_options',
  355. 'type' => 'range',
  356. 'input_attrs' => twentytwenty_customize_opacity_range(),
  357. )
  358. );
  359. $wp_customize->selective_refresh->add_partial(
  360. 'cover_template_overlay_opacity',
  361. array(
  362. 'selector' => '.cover-color-overlay',
  363. 'type' => 'cover_opacity',
  364. )
  365. );
  366. }
  367. /**
  368. * Sanitization callback for the "accent_accessible_colors" setting.
  369. *
  370. * @since Twenty Twenty 1.0
  371. *
  372. * @param array $value The value we want to sanitize.
  373. * @return array Returns sanitized value. Each item in the array gets sanitized separately.
  374. */
  375. public static function sanitize_accent_accessible_colors( $value ) {
  376. // Make sure the value is an array. Do not typecast, use empty array as fallback.
  377. $value = is_array( $value ) ? $value : array();
  378. // Loop values.
  379. foreach ( $value as $area => $values ) {
  380. foreach ( $values as $context => $color_val ) {
  381. $value[ $area ][ $context ] = sanitize_hex_color( $color_val );
  382. }
  383. }
  384. return $value;
  385. }
  386. /**
  387. * Sanitize select.
  388. *
  389. * @since Twenty Twenty 1.0
  390. *
  391. * @param string $input The input from the setting.
  392. * @param object $setting The selected setting.
  393. * @return string The input from the setting or the default setting.
  394. */
  395. public static function sanitize_select( $input, $setting ) {
  396. $input = sanitize_key( $input );
  397. $choices = $setting->manager->get_control( $setting->id )->choices;
  398. return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
  399. }
  400. /**
  401. * Sanitize boolean for checkbox.
  402. *
  403. * @since Twenty Twenty 1.0
  404. *
  405. * @param bool $checked Whether or not a box is checked.
  406. * @return bool
  407. */
  408. public static function sanitize_checkbox( $checked ) {
  409. return ( ( isset( $checked ) && true === $checked ) ? true : false );
  410. }
  411. }
  412. // Setup the Theme Customizer settings and controls.
  413. add_action( 'customize_register', array( 'TwentyTwenty_Customize', 'register' ) );
  414. }
  415. /**
  416. * PARTIAL REFRESH FUNCTIONS
  417. * */
  418. if ( ! function_exists( 'twentytwenty_customize_partial_blogname' ) ) {
  419. /**
  420. * Render the site title for the selective refresh partial.
  421. *
  422. * @since Twenty Twenty 1.0
  423. */
  424. function twentytwenty_customize_partial_blogname() {
  425. bloginfo( 'name' );
  426. }
  427. }
  428. if ( ! function_exists( 'twentytwenty_customize_partial_blogdescription' ) ) {
  429. /**
  430. * Render the site description for the selective refresh partial.
  431. *
  432. * @since Twenty Twenty 1.0
  433. */
  434. function twentytwenty_customize_partial_blogdescription() {
  435. bloginfo( 'description' );
  436. }
  437. }
  438. if ( ! function_exists( 'twentytwenty_customize_partial_site_logo' ) ) {
  439. /**
  440. * Render the site logo for the selective refresh partial.
  441. *
  442. * Doing it this way so we don't have issues with `render_callback`'s arguments.
  443. *
  444. * @since Twenty Twenty 1.0
  445. */
  446. function twentytwenty_customize_partial_site_logo() {
  447. twentytwenty_site_logo();
  448. }
  449. }
  450. /**
  451. * Input attributes for cover overlay opacity option.
  452. *
  453. * @since Twenty Twenty 1.0
  454. *
  455. * @return array Array containing attribute names and their values.
  456. */
  457. function twentytwenty_customize_opacity_range() {
  458. /**
  459. * Filters the input attributes for opacity.
  460. *
  461. * @since Twenty Twenty 1.0
  462. *
  463. * @param array $attrs {
  464. * The attributes.
  465. *
  466. * @type int $min Minimum value.
  467. * @type int $max Maximum value.
  468. * @type int $step Interval between numbers.
  469. * }
  470. */
  471. return apply_filters(
  472. 'twentytwenty_customize_opacity_range',
  473. array(
  474. 'min' => 0,
  475. 'max' => 90,
  476. 'step' => 5,
  477. )
  478. );
  479. }