Как создать динамические вкладки, табы только на CSS – БЕЗ использования Javascipt и jQuery.

Скачать исходники для статьи можно ниже

1. Создаем структуру вкладок:

  <input id="tab1" type="radio" name="tabs" checked>
		  <label for="tab1">1</label>
	
		  <input id="tab2" type="radio" name="tabs">
		  <label for="tab2">2</label>
	
		  <input id="tab3" type="radio" name="tabs">
		  <label for="tab3">3</label>
			 	
		  <div class="content">  
			  <div id="content1">
				<p>
				  Содержимое 1-ой вкладки.
				</p>
			  </div>
	
			  <div id="content2">
				<p>
				 Содержимое 2-ой вкладки.
				</p>
			  </div>
	
			  <div id="content3">
				<p>
				 Содержимое 3-ей вкладки.
				</p>
			  </div>
			  
		  </div>

Для примера, можно вставить данный код в виджет “Текст”.
Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Виджеты”, выбираем виджет “Текст” и вставляем в него вышеуказанный код:

2. Далее прописываем стили для вкладок:

.content > div {display: none; padding: 20px 25px 5px;}
 
   input {display: none;}
   label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
   label:hover {color: #fff; cursor: pointer;}
   input:checked + label {background: #ed5a6a; color: #fff;}
 
   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   #tab3:checked ~ .content #content3 {
     display: block;
   }
 

Для сайтов на wordpress – файл стилей находится в админке, в пункте “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл стилей – style.css и вставляем в него (можно в самом низу) вышеуказанный код.

Теперь заходим на сайт и видим результат:

PS: Как в wordpress вставить вкладки в самой записи сверху?

Можно воспользоваться произвольными полями.

Для этого заходим в создание новой записи – в левом меню выбираем пункт “Записи” – подпункт “Добавить новую”.

Если окно “Произвольные поля” не видны – то заходим во вкладку “Настройки экрана” и ставим галочку напротив пункт “Произвольные поля”:

Далее создаем новое произвольное поле – задаем имя и в его содержимое вставляем код динамических вкладок:

А далее в файл single.php (в админке выбираем пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем пункт ) вставляем код вывода произвольного поля с заданным именем, в данном примере имя произвольного поля – 333.

<?php echo (get_post_meta($post->ID, '333', true)); ?>

Можно вставить данный код перед выводом контента статьи (цикл loop):

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

<?php echo (get_post_meta($post->ID, '333', true)); ?>


		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

			/*
			 * Include the post format-specific template for the content. If you want to
...

Вот что в итоге получилось: