BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Как вывести дату на 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" type="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 остаются без изменения.

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

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

Получай обновления блога!!! Подпишись:

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

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

  1. art

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

    Ответить

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

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

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

    Попробуйте установить код после этого

    <?php echo getPostViews(get_the_ID()); ?>

    Ответить

  2. Виктор

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

    Ответить

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

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

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

    Ответить

  3. Svetlana

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

    Ответить

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

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

    Здравствуйте, Светлана.
    Код даты нужно добавлять между циклом:

    <?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
    <!-- вот тут дата -->
    <?php endwhile; ?>
    <?php endif; ?>
    

    Ответить

  4. Svetlana
    <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>
    
    

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

    Ответить

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

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

    Конечно не правильно!
    Строка №25

    while ( have_posts() ) : the_post();

    попробуйте после этого вставить мой код.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663