Як у WordPress зробити таблиці адаптивними

Привіт:) У цьому пості покажу, як на WordPress-сайті зробити адаптивними таблиці, щоб вони коректно відображалися на будь-якому пристрої та розмірі екрану.

Проблема зазвичай виникає для широких таблиць із декількома стовпцями на вузьких екранах планшетів та мобільних. Як таблиця не вміщається по ширині екрану, то виникає горизонтальне прокручування. Виглядатиме це приблизно так:

Така ситуація складає незручність для перегляду вмісту сторінки відвідувачем, а також може стати причиною помилок у Google Search Console.

Проблему можна виправити, додавши код нижче у файл functions.php.

/**
 * Responsive tables
 * 
 * https://wpmudev.com/blog/wordpress-responsive-tables/
 * 
 */
add_action( 'wp_head', 'mp_adaptive_tables_css' );
add_action( 'wp_footer', 'mp_adaptive_tables_script' );

if ( ! function_exists( 'mp_adaptive_tables_css' ) ) {
	function mp_adaptive_tables_css() {
		if ( is_single() || is_page() ) {
			?>
			<style>
				@media screen and (max-width: 600px) {
					table {
						width:100%;
					}
					thead {
						display: none;
					}
					tr:nth-of-type(2n) {
						background-color: inherit;
					}
					tr td:first-child {
						background: #f0f0f0; 
						font-weight: bold;
						font-size: 1.3em;
					}
					tbody td {
						display: block;
						text-align: center;
					}
					tbody td:before {
						content: attr(data-th);
						display: block;
						text-align:center;
					}
				}
			</style>
			<?php
		}
	}
}

if ( ! function_exists( 'mp_adaptive_tables_script' ) ) {
	function mp_adaptive_tables_script() {
		if ( is_single() || is_page() ) {
			echo '<script>
					var headertext = [];
					var headers = document.querySelectorAll("thead");
					var tablebody = document.querySelectorAll("tbody");
					for (var i = 0; i < headers.length; i++) {
						headertext[i]=[];
						for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
						  var current = headrow;
						  headertext[i].push(current.textContent);
						  }
					} 
					for (var h = 0, tbody; tbody = tablebody[h]; h++) {
						for (var i = 0, row; row = tbody.rows[i]; i++) {
						  for (var j = 0, col; col = row.cells[j]; j++) {
							col.setAttribute("data-th", headertext[h][j]);
						  } 
						}
					}
				  </script>';
		}	  
	}
}

У коді передбачається, що таблиці присутні на стандартних сторінках та постах ВордПрес-сайту:

if ( is_single() || is_page() ) {
    ...
}

Якщо табличні дані будуть розміщуватися ще й на сторінках інших типів WordPress-записів, цю умову потрібно буде доповнити. Наприклад, ви створили тип запису (Custom Post Type) із назвою "book", а таблиці плануєте розміщувати у постах цього типу. Тому умову можна переписати так:

if ( is_single() || is_page() || is_singular( 'book' ) ) {
    ...
}

В результаті роботи коду таблиця вище виглядатиме так: