Home • Статьи • Как изменить вид календаря в WordPress без плагинов

Как изменить вид календаря в WordPress без плагинов Сделай сам. Без плагинов...

📝 Пост № 230 от 9 декабря 2025 | В категории Статьи | Комментариев нет

Календарь опубликованных постов в WordPress, как вы могли заметить, просто никакой… Почему так сделали «умельцы» — приходится только догадываться. Неужели мозгов не хватило? И, если вы захотите видеть у себя в блоге хоть мало-мальски презентабельный вид календаря в футере или сайдбаре, то вам нужно будет загружать плагины. К тому же, довольно-таки «тяжелые» и с кучей не нужных настроек.

Но, зачем козе баян, если можно сделать за 2 минуты свой вариант? Простой и без лишних заморочек, на простом css…

Вот такой вариант я вам сегодня и покажу, если, конечно вы этого не знали и эта тема вам интересна. Что для этого нужно? А необходимо всего лишь воспользоваться боковой панелью настроек, которая позволяет прописать свой css код и получить мгновенный результат более-менее презентабельного вида календарик в футере или сайдбаре.

Для начала, просто установите в футер или сайдбар дефолтный виджет календаря и далее — пошагово…

ПЕРВОЕ, что вам нужно сделать — это админке, в меню в Консоли выбрать Внешний вид > Настроить. Откроется боковая панель, где необходимо открыть «Дополнительные стили«.

ВТОРОЕ — И вот туда вписать примерно такой код css стилей…

Контент заблокирован

Доступ только для подписчиков

Ваши данные в полной безопасности. Мы не рассылаем спам.


/* — Стили для стандартного виджета календаря WordPress — */
/* Обертка календаря — растягиваем на всю ширину */
#calendar_wrap {
  width: 100%;
}
/* Основная таблица календаря */
#wp-calendar {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto,
    «Helvetica Neue», Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
/* Заголовок (название месяца) */
#wp-calendar caption {
  caption-side: top;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #ccc;
  background: #676767;
  margin: 0;
}
/* Навигация (предыдущий/следующий месяц) */
#wp-calendar caption a {
  text-decoration: none;
  color: #fc0303;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.2s;
}
#wp-calendar caption a:hover {
  background-color: #e0e0e0;
  color: #fcfc03;
}
/* Ячейки с названиями дней недели */
#wp-calendar thead th {
  text-align: center;
  padding: 5px 5px;
  font-weight: 600;
  background: #dedede;
  border: 1px solid #ddd;
  color: #393939;
  text-transform: uppercase;
  font-size: 11px;
}
/* Общие стили для ячеек с датами */
#wp-calendar tbody td {
  text-align: center;
  padding: 5px 5px;
  border: 1px solid #ddd;
  background: #434343;
  transition: background-color 0.2s, color 0.2s;
}
/* Ссылки на дни с постами */
#wp-calendar tbody td a {
  display: block;
  padding: 5px 5px;
  text-decoration: none;
  font-weight: 600;
  color: #fff; /* Цвет текста для ссылок */
  background-color: #349db9; /* Цвет подсветки для дней с постами */
  border-radius: 2px;
  transition: background-color 0.2s;
}
#wp-calendar tbody td a:hover {
  background-color: #45a049; /* Более темный цвет при наведении */
}
/* Сегодняшний день (если на нем нет постов) */
#wp-calendar tbody td#today {
  background-color: #ff9800; /* Цвет для сегодняшнего дня */
  color: #fff;
  font-weight: 600;
}
/* Сегодняшний день, если на нем ЕСТЬ посты (важно для приоритета) */
#wp-calendar tbody td#today a {
  background-color: #ff5722; /* Другой цвет для сегодняшнего дня с постами, чтобы выделить */
}
/* Пустые ячейки в начале/конце месяца */
#wp-calendar tbody td.pad {
  background: #434343;
  color: #ccc;
}
/* Ссылка на следующий/предыдущий месяц под календарем */
#wp-calendar tfoot td {
  padding: 10px 25px;
  text-align: center;
  background: #f8f9fa;
  border: 1px solid #ddd;
}
#wp-calendar tfoot a {
  text-decoration: none;
  color: #0073aa;
}
#wp-calendar tfoot a:hover {
  text-decoration: underline;
}
/* Адаптивность для мобильных устройств */
@media screen and (max-width: 600px) {
  #wp-calendar {
    font-size: 12px;
  }
  #wp-calendar caption {
    font-size: 14px;
    padding: 8px;
  }
  #wp-calendar thead th,
  #wp-calendar tbody td,
  #wp-calendar tbody td a {
    padding: 5px 2px;
  }
}

При таких стилях выглядеть календарь у вас будет «не как у всех»… А, немного покопавшись в коде, вы сможете легко изменить цветовую гамму по своему усмотрению. Главное, что вы ничем не рискуете при правке. Любое изменение в коде происходит у вас «на глазах». Вы сразу видите результат и можете прописывать свои стили, не боясь «поломать» сайт.

Удачи и до новых встреч!
С уважением, MasterPRO