template-functions.php 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. <?php
  2. /**
  3. * Functions which enhance the theme by hooking into WordPress
  4. *
  5. * @package WordPress
  6. * @subpackage Twenty_Twenty_One
  7. * @since Twenty Twenty-One 1.0
  8. */
  9. /**
  10. * Adds custom classes to the array of body classes.
  11. *
  12. * @since Twenty Twenty-One 1.0
  13. *
  14. * @param array $classes Classes for the body element.
  15. * @return array
  16. */
  17. function twenty_twenty_one_body_classes( $classes ) {
  18. // Helps detect if JS is enabled or not.
  19. $classes[] = 'no-js';
  20. // Adds `singular` to singular pages, and `hfeed` to all other pages.
  21. $classes[] = is_singular() ? 'singular' : 'hfeed';
  22. // Add a body class if main navigation is active.
  23. if ( has_nav_menu( 'primary' ) ) {
  24. $classes[] = 'has-main-navigation';
  25. }
  26. // Add a body class if there are no footer widgets.
  27. if ( ! is_active_sidebar( 'sidebar-1' ) ) {
  28. $classes[] = 'no-widgets';
  29. }
  30. return $classes;
  31. }
  32. add_filter( 'body_class', 'twenty_twenty_one_body_classes' );
  33. /**
  34. * Adds custom class to the array of posts classes.
  35. *
  36. * @since Twenty Twenty-One 1.0
  37. *
  38. * @param array $classes An array of CSS classes.
  39. * @return array
  40. */
  41. function twenty_twenty_one_post_classes( $classes ) {
  42. $classes[] = 'entry';
  43. return $classes;
  44. }
  45. add_filter( 'post_class', 'twenty_twenty_one_post_classes', 10, 3 );
  46. /**
  47. * Add a pingback url auto-discovery header for single posts, pages, or attachments.
  48. *
  49. * @since Twenty Twenty-One 1.0
  50. *
  51. * @return void
  52. */
  53. function twenty_twenty_one_pingback_header() {
  54. if ( is_singular() && pings_open() ) {
  55. echo '<link rel="pingback" href="', esc_url( get_bloginfo( 'pingback_url' ) ), '">';
  56. }
  57. }
  58. add_action( 'wp_head', 'twenty_twenty_one_pingback_header' );
  59. /**
  60. * Remove the `no-js` class from body if JS is supported.
  61. *
  62. * @since Twenty Twenty-One 1.0
  63. *
  64. * @return void
  65. */
  66. function twenty_twenty_one_supports_js() {
  67. echo '<script>document.body.classList.remove("no-js");</script>';
  68. }
  69. add_action( 'wp_footer', 'twenty_twenty_one_supports_js' );
  70. /**
  71. * Changes comment form default fields.
  72. *
  73. * @since Twenty Twenty-One 1.0
  74. *
  75. * @param array $defaults The form defaults.
  76. * @return array
  77. */
  78. function twenty_twenty_one_comment_form_defaults( $defaults ) {
  79. // Adjust height of comment form.
  80. $defaults['comment_field'] = preg_replace( '/rows="\d+"/', 'rows="5"', $defaults['comment_field'] );
  81. return $defaults;
  82. }
  83. add_filter( 'comment_form_defaults', 'twenty_twenty_one_comment_form_defaults' );
  84. /**
  85. * Determines if post thumbnail can be displayed.
  86. *
  87. * @since Twenty Twenty-One 1.0
  88. *
  89. * @return bool
  90. */
  91. function twenty_twenty_one_can_show_post_thumbnail() {
  92. /**
  93. * Filters whether post thumbnail can be displayed.
  94. *
  95. * @since Twenty Twenty-One 1.0
  96. *
  97. * @param bool $show_post_thumbnail Whether to show post thumbnail.
  98. */
  99. return apply_filters(
  100. 'twenty_twenty_one_can_show_post_thumbnail',
  101. ! post_password_required() && ! is_attachment() && has_post_thumbnail()
  102. );
  103. }
  104. /**
  105. * Returns the size for avatars used in the theme.
  106. *
  107. * @since Twenty Twenty-One 1.0
  108. *
  109. * @return int
  110. */
  111. function twenty_twenty_one_get_avatar_size() {
  112. return 60;
  113. }
  114. /**
  115. * Creates continue reading text.
  116. *
  117. * @since Twenty Twenty-One 1.0
  118. */
  119. function twenty_twenty_one_continue_reading_text() {
  120. $continue_reading = sprintf(
  121. /* translators: %s: Post title. Only visible to screen readers. */
  122. esc_html__( 'Continue reading %s', 'twentytwentyone' ),
  123. the_title( '<span class="screen-reader-text">', '</span>', false )
  124. );
  125. return $continue_reading;
  126. }
  127. /**
  128. * Creates the continue reading link for excerpt.
  129. *
  130. * @since Twenty Twenty-One 1.0
  131. */
  132. function twenty_twenty_one_continue_reading_link_excerpt() {
  133. if ( ! is_admin() ) {
  134. return '&hellip; <a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a>';
  135. }
  136. }
  137. // Filter the excerpt more link.
  138. add_filter( 'excerpt_more', 'twenty_twenty_one_continue_reading_link_excerpt' );
  139. /**
  140. * Creates the continue reading link.
  141. *
  142. * @since Twenty Twenty-One 1.0
  143. */
  144. function twenty_twenty_one_continue_reading_link() {
  145. if ( ! is_admin() ) {
  146. return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '#more-' . esc_attr( get_the_ID() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
  147. }
  148. }
  149. // Filter the content more link.
  150. add_filter( 'the_content_more_link', 'twenty_twenty_one_continue_reading_link' );
  151. if ( ! function_exists( 'twenty_twenty_one_post_title' ) ) {
  152. /**
  153. * Adds a title to posts and pages that are missing titles.
  154. *
  155. * @since Twenty Twenty-One 1.0
  156. *
  157. * @param string $title The title.
  158. * @return string
  159. */
  160. function twenty_twenty_one_post_title( $title ) {
  161. return '' === $title ? esc_html_x( 'Untitled', 'Added to posts and pages that are missing titles', 'twentytwentyone' ) : $title;
  162. }
  163. }
  164. add_filter( 'the_title', 'twenty_twenty_one_post_title' );
  165. /**
  166. * Gets the SVG code for a given icon.
  167. *
  168. * @since Twenty Twenty-One 1.0
  169. *
  170. * @param string $group The icon group.
  171. * @param string $icon The icon.
  172. * @param int $size The icon size in pixels.
  173. * @return string
  174. */
  175. function twenty_twenty_one_get_icon_svg( $group, $icon, $size = 24 ) {
  176. return Twenty_Twenty_One_SVG_Icons::get_svg( $group, $icon, $size );
  177. }
  178. /**
  179. * Changes the default navigation arrows to svg icons
  180. *
  181. * @since Twenty Twenty-One 1.0
  182. *
  183. * @param string $calendar_output The generated HTML of the calendar.
  184. * @return string
  185. */
  186. function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
  187. $calendar_output = str_replace( '&laquo; ', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
  188. $calendar_output = str_replace( ' &raquo;', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
  189. return $calendar_output;
  190. }
  191. add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );
  192. /**
  193. * Get custom CSS.
  194. *
  195. * Return CSS for non-latin language, if available, or null
  196. *
  197. * @since Twenty Twenty-One 1.0
  198. *
  199. * @param string $type Whether to return CSS for the "front-end", "block-editor", or "classic-editor".
  200. * @return string
  201. */
  202. function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
  203. // Fetch site locale.
  204. $locale = get_bloginfo( 'language' );
  205. /**
  206. * Filters the fallback fonts for non-latin languages.
  207. *
  208. * @since Twenty Twenty-One 1.0
  209. *
  210. * @param array $font_family An array of locales and font families.
  211. */
  212. $font_family = apply_filters(
  213. 'twenty_twenty_one_get_localized_font_family_types',
  214. array(
  215. // Arabic.
  216. 'ar' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  217. 'ary' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  218. 'azb' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  219. 'ckb' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  220. 'fa-IR' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  221. 'haz' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  222. 'ps' => array( 'Tahoma', 'Arial', 'sans-serif' ),
  223. // Chinese Simplified (China) - Noto Sans SC.
  224. 'zh-CN' => array( '\'PingFang SC\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
  225. // Chinese Traditional (Taiwan) - Noto Sans TC.
  226. 'zh-TW' => array( '\'PingFang TC\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
  227. // Chinese (Hong Kong) - Noto Sans HK.
  228. 'zh-HK' => array( '\'PingFang HK\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
  229. // Cyrillic.
  230. 'bel' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  231. 'bg-BG' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  232. 'kk' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  233. 'mk-MK' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  234. 'mn' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  235. 'ru-RU' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  236. 'sah' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  237. 'sr-RS' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  238. 'tt-RU' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  239. 'uk' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
  240. // Devanagari.
  241. 'bn-BD' => array( 'Arial', 'sans-serif' ),
  242. 'hi-IN' => array( 'Arial', 'sans-serif' ),
  243. 'mr' => array( 'Arial', 'sans-serif' ),
  244. 'ne-NP' => array( 'Arial', 'sans-serif' ),
  245. // Greek.
  246. 'el' => array( '\'Helvetica Neue\', Helvetica, Arial, sans-serif' ),
  247. // Gujarati.
  248. 'gu' => array( 'Arial', 'sans-serif' ),
  249. // Hebrew.
  250. 'he-IL' => array( '\'Arial Hebrew\'', 'Arial', 'sans-serif' ),
  251. // Japanese.
  252. 'ja' => array( 'sans-serif' ),
  253. // Korean.
  254. 'ko-KR' => array( '\'Apple SD Gothic Neo\'', '\'Malgun Gothic\'', '\'Nanum Gothic\'', 'Dotum', 'sans-serif' ),
  255. // Thai.
  256. 'th' => array( '\'Sukhumvit Set\'', '\'Helvetica Neue\'', 'Helvetica', 'Arial', 'sans-serif' ),
  257. // Vietnamese.
  258. 'vi' => array( '\'Libre Franklin\'', 'sans-serif' ),
  259. )
  260. );
  261. // Return if the selected language has no fallback fonts.
  262. if ( empty( $font_family[ $locale ] ) ) {
  263. return '';
  264. }
  265. /**
  266. * Filters the elements to apply fallback fonts to.
  267. *
  268. * @since Twenty Twenty-One 1.0
  269. *
  270. * @param array $elements An array of elements for "front-end", "block-editor", or "classic-editor".
  271. */
  272. $elements = apply_filters(
  273. 'twenty_twenty_one_get_localized_font_family_elements',
  274. array(
  275. 'front-end' => array( 'body', 'input', 'textarea', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', '.has-drop-cap:not(:focus)::first-letter', '.entry-content .wp-block-archives', '.entry-content .wp-block-categories', '.entry-content .wp-block-cover-image', '.entry-content .wp-block-latest-comments', '.entry-content .wp-block-latest-posts', '.entry-content .wp-block-pullquote', '.entry-content .wp-block-quote.is-large', '.entry-content .wp-block-quote.is-style-large', '.entry-content .wp-block-archives *', '.entry-content .wp-block-categories *', '.entry-content .wp-block-latest-posts *', '.entry-content .wp-block-latest-comments *', '.entry-content p', '.entry-content ol', '.entry-content ul', '.entry-content dl', '.entry-content dt', '.entry-content cite', '.entry-content figcaption', '.entry-content .wp-caption-text', '.comment-content p', '.comment-content ol', '.comment-content ul', '.comment-content dl', '.comment-content dt', '.comment-content cite', '.comment-content figcaption', '.comment-content .wp-caption-text', '.widget_text p', '.widget_text ol', '.widget_text ul', '.widget_text dl', '.widget_text dt', '.widget-content .rssSummary', '.widget-content cite', '.widget-content figcaption', '.widget-content .wp-caption-text' ),
  276. 'block-editor' => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block h1', '.editor-styles-wrapper .wp-block h2', '.editor-styles-wrapper .wp-block h3', '.editor-styles-wrapper .wp-block h4', '.editor-styles-wrapper .wp-block h5', '.editor-styles-wrapper .wp-block h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
  277. 'classic-editor' => array( 'body#tinymce.wp-editor', 'body#tinymce.wp-editor p', 'body#tinymce.wp-editor ol', 'body#tinymce.wp-editor ul', 'body#tinymce.wp-editor dl', 'body#tinymce.wp-editor dt', 'body#tinymce.wp-editor figcaption', 'body#tinymce.wp-editor .wp-caption-text', 'body#tinymce.wp-editor .wp-caption-dd', 'body#tinymce.wp-editor cite', 'body#tinymce.wp-editor table' ),
  278. )
  279. );
  280. // Return if the specified type doesn't exist.
  281. if ( empty( $elements[ $type ] ) ) {
  282. return '';
  283. }
  284. // Include file if function doesn't exist.
  285. if ( ! function_exists( 'twenty_twenty_one_generate_css' ) ) {
  286. require_once get_theme_file_path( 'inc/custom-css.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
  287. }
  288. // Return the specified styles.
  289. return twenty_twenty_one_generate_css( // @phpstan-ignore-line.
  290. implode( ',', $elements[ $type ] ),
  291. 'font-family',
  292. implode( ',', $font_family[ $locale ] ),
  293. null,
  294. null,
  295. false
  296. );
  297. }
  298. /**
  299. * Print the first instance of a block in the content, and then break away.
  300. *
  301. * @since Twenty Twenty-One 1.0
  302. *
  303. * @param string $block_name The full block type name, or a partial match.
  304. * Example: `core/image`, `core-embed/*`.
  305. * @param string|null $content The content to search in. Use null for get_the_content().
  306. * @param int $instances How many instances of the block will be printed (max). Default 1.
  307. * @return bool Returns true if a block was located & printed, otherwise false.
  308. */
  309. function twenty_twenty_one_print_first_instance_of_block( $block_name, $content = null, $instances = 1 ) {
  310. $instances_count = 0;
  311. $blocks_content = '';
  312. if ( ! $content ) {
  313. $content = get_the_content();
  314. }
  315. // Parse blocks in the content.
  316. $blocks = parse_blocks( $content );
  317. // Loop blocks.
  318. foreach ( $blocks as $block ) {
  319. // Sanity check.
  320. if ( ! isset( $block['blockName'] ) ) {
  321. continue;
  322. }
  323. // Check if this the block matches the $block_name.
  324. $is_matching_block = false;
  325. // If the block ends with *, try to match the first portion.
  326. if ( '*' === $block_name[-1] ) {
  327. $is_matching_block = 0 === strpos( $block['blockName'], rtrim( $block_name, '*' ) );
  328. } else {
  329. $is_matching_block = $block_name === $block['blockName'];
  330. }
  331. if ( $is_matching_block ) {
  332. // Increment count.
  333. $instances_count++;
  334. // Add the block HTML.
  335. $blocks_content .= render_block( $block );
  336. // Break the loop if the $instances count was reached.
  337. if ( $instances_count >= $instances ) {
  338. break;
  339. }
  340. }
  341. }
  342. if ( $blocks_content ) {
  343. /** This filter is documented in wp-includes/post-template.php */
  344. echo apply_filters( 'the_content', $blocks_content ); // phpcs:ignore WordPress.Security.EscapeOutput
  345. return true;
  346. }
  347. return false;
  348. }
  349. /**
  350. * Retrieve protected post password form content.
  351. *
  352. * @since Twenty Twenty-One 1.0
  353. * @since Twenty Twenty-One 1.4 Corrected parameter name for `$output`,
  354. * added the `$post` parameter.
  355. *
  356. * @param string $output The password form HTML output.
  357. * @param int|WP_Post $post Optional. Post ID or WP_Post object. Default is global $post.
  358. * @return string HTML content for password form for password protected post.
  359. */
  360. function twenty_twenty_one_password_form( $output, $post = 0 ) {
  361. $post = get_post( $post );
  362. $label = 'pwbox-' . ( empty( $post->ID ) ? wp_rand() : $post->ID );
  363. $output = '<p class="post-password-message">' . esc_html__( 'This content is password protected. Please enter a password to view.', 'twentytwentyone' ) . '</p>
  364. <form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">
  365. <label class="post-password-form__label" for="' . esc_attr( $label ) . '">' . esc_html_x( 'Password', 'Post password form', 'twentytwentyone' ) . '</label><input class="post-password-form__input" name="post_password" id="' . esc_attr( $label ) . '" type="password" size="20" /><input type="submit" class="post-password-form__submit" name="' . esc_attr_x( 'Submit', 'Post password form', 'twentytwentyone' ) . '" value="' . esc_attr_x( 'Enter', 'Post password form', 'twentytwentyone' ) . '" /></form>
  366. ';
  367. return $output;
  368. }
  369. add_filter( 'the_password_form', 'twenty_twenty_one_password_form', 10, 2 );
  370. /**
  371. * Filters the list of attachment image attributes.
  372. *
  373. * @since Twenty Twenty-One 1.0
  374. *
  375. * @param string[] $attr Array of attribute values for the image markup, keyed by attribute name.
  376. * See wp_get_attachment_image().
  377. * @param WP_Post $attachment Image attachment post.
  378. * @param string|int[] $size Requested image size. Can be any registered image size name, or
  379. * an array of width and height values in pixels (in that order).
  380. * @return string[] The filtered attributes for the image markup.
  381. */
  382. function twenty_twenty_one_get_attachment_image_attributes( $attr, $attachment, $size ) {
  383. if ( is_admin() ) {
  384. return $attr;
  385. }
  386. if ( isset( $attr['class'] ) && false !== strpos( $attr['class'], 'custom-logo' ) ) {
  387. return $attr;
  388. }
  389. $width = false;
  390. $height = false;
  391. if ( is_array( $size ) ) {
  392. $width = (int) $size[0];
  393. $height = (int) $size[1];
  394. } elseif ( $attachment && is_object( $attachment ) && $attachment->ID ) {
  395. $meta = wp_get_attachment_metadata( $attachment->ID );
  396. if ( isset( $meta['width'] ) && isset( $meta['height'] ) ) {
  397. $width = (int) $meta['width'];
  398. $height = (int) $meta['height'];
  399. }
  400. }
  401. if ( $width && $height ) {
  402. // Add style.
  403. $attr['style'] = isset( $attr['style'] ) ? $attr['style'] : '';
  404. $attr['style'] = 'width:100%;height:' . round( 100 * $height / $width, 2 ) . '%;max-width:' . $width . 'px;' . $attr['style'];
  405. }
  406. return $attr;
  407. }
  408. add_filter( 'wp_get_attachment_image_attributes', 'twenty_twenty_one_get_attachment_image_attributes', 10, 3 );