Главная » Wordpress » Как вывести дату на WordPress и оформить ее с помощью CSS

Как вывести дату на WordPress и оформить ее с помощью CSS

2013-11-17 / Вр:12:32 / просмотров: 16989

Не знаю, как вам, но меня всегда привлекали на сайтах красиво оформленные даты статьей. Вот и решил написать эту статью.
Ну что, если вы хоть чуточку знаете WordPress и CSS, то вы осилите этот урок, тут даже ничего и думать не надо, просто скопировать код и правильно вставить в файлы сайта.
Итак, вот такой результат у вас должен получиться после всех процедур:

Ну, что, приступим?!

Вывод даты на WordPress.

Сперва нужно вывести дату и месяц. Для этого нужно открыть файл single.php вашего сайта. Если вы не знаете, где он находится, тогда сделайте вот такой путь:
откройте админ-панель WordPress => Внешний вид => Редактор => Одна запись (single.php)
И вставляйте код в любое из этих мест, где я указал в скриншоте:

Как вывести дату на WordPress и оформить ее с помощью CSS

изображение можно увеличить

Итак, выводим дату вот таким кодом:

<div class = "month">
<?php the_time('F'); ?>
<div class = "day">
<?php the_time('d'); ?>
</div>
</div>

Разъясню. Для вывода даты мы использовали встроенную на WordPress функцию the_time();, которая будет выводить месяц и число опубликованной статьи в автоматическом режиме (Пункт №2, №4).

Для оформления внешнего вида месяца и числа прописываем классы (class) для CSS.
div class = "month"
div class = "day"

Вывод даты для сайтов HTML и php.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title></title>
<link rel="stylesheet" media="screen" ENGINE="text/css" href="style.css" />
</head>
<body>
<div class = "month">
Ноябрь
<div class = "day">
17
</div>
</div>
</body>
</html>

Оформление даты, используя CSS

В первую очередь пропишем стиль в CSS для класса "month".
Откройте файл style.css на сайте. Если вы не знаете, где он находится на WordPress, тогда проделайте вот такой путь:
откройте админ-панель WordPress => Внешний вид => Редактор => style.css

И в конце файла вставьте вот такой код:

div.month {
 /* размеры прямоугольника */
 width: 65px;
 height: 40px;
 margin-left: 200px;

 /* Заливка градиентом */
 background-image: linear-gradient(bottom, rgb(3,122,169) 60%, rgb(12,105,145) 32%);
 background-image: -o-linear-gradient(bottom, rgb(3,122,169) 60%, rgb(12,105,145) 32%);
 background-image: -moz-linear-gradient(bottom, rgb(3,122,169) 60%, rgb(12,105,145) 32%);
 background-image: -webkit-linear-gradient(bottom, rgb(3,122,169) 60%, rgb(12,105,145) 32%);
 background-image: -ms-linear-gradient(bottom, rgb(3,122,169) 60%, rgb(12,105,145) 32%);
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.6, rgb(3,122,169)),
 color-stop(0.32, rgb(12,105,145))
 );

 /* Делаем круглые углы в прямоугольнике */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;

 /* работа с текстом */
 padding: 4px 0 0;
 text-align: center;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, Sans-serif;
 font-size: 11px;
 font-weight: bolder;
 color: #e8f6b0;
 position: absolute;
}

Обратите внимание на (пункт№5).

margin-left: 200px;

Здесь вы можете устанавливать месторасположение даты в любом удобном для вас месте.

Вот такой блок получится в результате:

Как вывести дату на WordPress и оформить ее с помощью CSS

Теперь пропишем стиль в CSS для класса "day"

div.day {
 /* размер блока */
 width: 65px;
 height: 35px;

 /* Заливаем градиентом */
 background-image: linear-gradient(bottom, rgb(24,172,231) 90%, rgb(2,149,207) 39%);
 background-image: -o-linear-gradient(bottom, rgb(24,172,231) 90%, rgb(2,149,207) 39%);
 background-image: -moz-linear-gradient(bottom, rgb(24,172,231) 90%, rgb(2,149,207) 39%);
 background-image: -webkit-linear-gradient(bottom, rgb(24,172,231) 90%, rgb(2,149,207) 39%);
 background-image: -ms-linear-gradient(bottom, rgb(24,172,231) 90%, rgb(2,149,207) 39%);
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.9, rgb(24,172,231)),
 color-stop(0.39, rgb(2,149,207))
 );

 /* закругление углов */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;

 /* работа с текста */
 padding: 3px 0 0;
 text-align: center;
 font-family: Georgia, Arial, Helvetica, Sans-serif;
 font-size: 24px;
 font-weight: bold;
 color: #fff;
 position: absolute;
 top: 24px;

 /* тень */
 -moz-box-shadow: 0 3px 0px rgba(188,235,254,0.9);
 -webkit-box-shadow: 0 3px 0px rgba(188,235,254,0.9);
 box-shadow: 0 3px 0px rgba(188,235,254,0.9);

}

Вот что получим в результате:

Как вывести дату на WordPress и оформить ее с помощью CSS

В принципе, можно оставить и так, а можно создать маленький «хвостик» снизу.

Для этого вставьте в файл следующий код:

div.day:after {
 /* Никакого контента */
 content:"";

 /* Размеры установятся автоматически */
 width: 0;
 height: 0;

 /* позиционирование */
 position: absolute;
 right: 27px;
 top: 100%;

 /* «Рамки» */
 border-left: 6px solid transparent;
 border-top: 6px solid #0294cf;
 border-right: 6px solid transparent;
}

div.day:before {
 /* Никакого контента */
 content:"";

 /* Размеры установятся автоматически */
 width: 0;
 height: 0;

 /* позиционирование */
 position: absolute;
 right: 24px;
 top: 100%;

 /* «рамки» */
 border-left: 9px solid transparent;
 border-top: 9px solid #bcebfe;
 border-right: 9px solid transparent;
}

Вот долгожданный результат долгих и мучительных ожиданий

Как вывести дату на WordPress и оформить ее с помощью CSS

[просмотр] - [скачать]

Итак, это был показан пример вывода и оформления даты для WordPress.
Но, если захотеть, то этот код можно использовать на других движкак, таких как Joomla, Drupal или на сайтах, которые написаны на HTML, php. Разница будет лишь в выводе функции даты, а так стили CSS остаются без изменения.

Вот и все! Буду заканчивать на слове «пока». Всем пока!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222435
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187485
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559

12 Ответов на комментарий - Как вывести дату на WordPress и оформить ее с помощью CSS

art

21.01.2014 в 13:16

Сделал все по инструкции,добавил код в index.php для вывода на главную страницу, появилась дата, но только в самом верхнем посте. Как сдалать чтобы даты были напротив каждого заголовка поста. Использую шаблон ecoBlog 1.2
Степан => автор блога

21.01.2014 в 18:52

я перепроверил свою инструкцию, у меня все получилось:

Попробуйте установить код после этого
```
<?php echo getPostViews(get_the_ID()); ?>
```
Виктор

28.02.2014 в 09:29

Спасибо автору за идею! Нужно было сделать почти так же как в примере – но что то не допер сразу, что можно же разделить функции.
Степан => автор блога

04.03.2014 в 19:41

Пожалуйста, Виктор!
Svetlana

04.07.2016 в 22:25

Добрый вечер. Не пойму почему дата появилась только на первом посте. И подскажите, пожалуйста, камк убрать вордпресовскую дату. Спасибо
Степан => автор блога

07.07.2016 в 00:27

Здравствуйте, Светлана.
Код даты нужно добавлять между циклом:
```
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>
<?php endif; ?>
```

Svetlana

07.07.2016 в 12:45

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

		<?php
		if ( have_posts() ) :

			if ( is_home() && ! is_front_page() ) : ?>
				<header>
				<div class = "month">
<?php the_time('F'); ?>
<div class = "day">
<?php the_time('d'); ?>
</div>
</div>

					<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
				</header>



			<?php
			endif;

			/* Start the Loop */
			while ( have_posts() ) : the_post();

				/*
				 * Include the Post-Format-specific template for the content.
				 * If you want to override this in a child theme, then include a file
				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
				 */
				get_template_part( 'template-parts/content', get_post_format() );

			endwhile;

			the_posts_navigation();

		else :

			get_template_part( 'template-parts/content', 'none' );

		endif; ?>
	</main><!-- #main -->
	</div>

Все равно не получилось((

Степан => автор блога

12.07.2016 в 12:51

Конечно не правильно!
Строка №25
```
while ( have_posts() ) : the_post();
```
попробуйте после этого вставить мой код.

Александр

11.04.2017 в 00:05

Добрый день, выводит дату возле первой записи и почему-то сегодняшнюю.

			<?php while ( have_posts() ) : the_post(); ?>
				<div class = "month">
					<?php the_time('F'); ?>
					<div class = "day">
						<?php the_time('d'); ?>
					</div>
				</div>
				<?php get_template_part( 'content', 'page' ); ?>

Степан => автор блога

13.04.2017 в 21:16

Здравствуйте, а в каком файле вы делаете правки?
Марианна

22.05.2018 в 11:00

Здравствуйте! А как сделать адаптивно?
Степан => автор блога

05.07.2018 в 11:01

Здравствуйте!
Пункт №5 (margin-left) укажите не в px а в %. То есть, было 200px, а Вы напишите 10%
```
div.month {
 /* размеры прямоугольника */
 width: 65px;
 height: 40px;
 margin-left: 10%; /* было margin-left: 200px */
/* тут продолжение кода */
```