Метка: вордпресс

Всего одна строчка кода, вместо плагина.

Чтобы вернуть классические виджеты в WordPress, вы можете использовать следующий код. С версии WordPress 5.8 была введена новая система виджетов, основанная на блоках, и если вы хотите вернуться к классическим виджетам, вам нужно добавить следующий код в файл functions.php вашей темы или в плагин. Continue reading «Вернуть классические виджеты в WordPress»

Одна строчка кода и ни каких сторонних плагинов.

Отключаем блоковый редактор для всех типов записей, на которые этот фильтр влияет, и заставляем WordPress использовать классический редактор (если он доступен) вместо блокового редактора.
Добавить в конец файла: functions.php Continue reading «Использовать классический редактор (если он доступен) вместо блокового редактора.»

Меняем Стандартный Поиск в WordPress: Как Создать Кастомную Форму Поиска

WordPress предоставляет удобный функционал для создания и управления сайтами, но стандартная форма поиска может не всегда соответствовать вашим требованиям по дизайну и функциональности. В этой статье мы рассмотрим, как можно изменить стандартную форму поиска в WordPress, добавив кастомную иконку и стилизовав её под ваши нужды.
Continue reading «Меняем стандартный поиск WP»

CSS-стиль для календаря.

#wp-calendar {
width: 100%;
max-width: 27.5rem;
background: #dddddd;
margin-left: auto;
margin-right: auto;

}

#wp-calendar caption {
background: #336188;
color: white;
padding: 0.25rem;
text-align: center;
text-align: center;
padding: 10px;
border-radius: 25px;
}

#wp-calendar thead tr {
border-right: 1px solid #ccc;
}

nav.wp-calendar-nav {
padding: 0;
width: 100%;
color: white;
background: #232325;
text-align: center;
padding: 10px;
border-radius: 25px;
}

nav.wp-calendar-nav a {
color: white;
padding-left: 30px;
text-decoration: none;
}

#wp-calendar thead th {
font-size: 90%;
font-weight: bold;
padding: 0.25rem;
background: #dddddd;
text-transform: uppercase;
text-align: center;
}

#wp-calendar tbody td {
position: relative;
padding: 0.125rem;
text-align: center;
border: 1px solid #dddddd;
background: white;
}

#wp-calendar tbody td.pad {
opacity: 0.6;
}

#wp-calendar tbody td#today {
font-weight: bold;
}

#wp-calendar tbody td#today:after {
content: »;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 10px solid #dddddd;
border-left: 10px solid transparent;
}

#wp-calendar tbody td a {
display: block;
background: #dddddd;
}

#wp-calendar tbody td a:hover {
background: #dddddd;
color: #fff;
}

#wp-calendar tfoot tr {
background: gray;
border: 1px solid #dddddd;
}

#wp-calendar tfoot tr td {
border: 0;
padding: 0;
}

#wp-calendar tfoot tr a {
display: block;
padding: 0.25rem 0.75rem;
}

#wp-calendar tfoot tr a:hover {
background: #fff;
}

#wp-calendar tfoot tr #prev {
text-align: left;

}

#wp-calendar tfoot tr #next {
text-align: right;
}

Вот краткое объяснение каждого блока стилей:
.calendar_wrap

Устанавливает отступы вокруг обёртки календаря: сверху и снизу 6%, слева и справа 4%.

#wp-calendar

Задает ширину календаря в 100% от родительского элемента, с максимальной шириной 27.5rem.
Устанавливает фоновый цвет #dddddd и выравнивание по центру.

#wp-calendar caption

Устанавливает фоновый цвет заголовка календаря как teal (тёмно-зелёный) и текст белым.
Добавляет отступы и выравнивание текста по центру.
Округляет углы заголовка с радиусом 30px.

#wp-calendar thead tr

Добавляет правую границу к строкам заголовка календаря с цветом #ccc (светло-серый).

nav.wp-calendar-nav

Устанавливает отступы, ширину и фоновый цвет навигационной панели календаря.
Устанавливает цвет текста белым, выравнивание по центру и округление углов.

nav.wp-calendar-nav a

Устанавливает цвет ссылок белым и добавляет отступ слева. Убирает подчеркивание текста.

#wp-calendar thead th

Устанавливает размер шрифта и жировый начертание для заголовков таблицы.
Добавляет отступы, фоновый цвет #dddddd и делает текст верхним регистром.

#wp-calendar tbody td

Устанавливает относительное позиционирование, отступы, выравнивание текста и границу для ячеек таблицы.
Фоновый цвет ячеек — белый.

#wp-calendar tbody td.pad

Устанавливает прозрачность для ячеек с классом .pad в 0.6.

#wp-calendar tbody td#today

Устанавливает жирное начертание текста для ячейки с id today.

#wp-calendar tbody td#today:after

Добавляет стрелку у ячейки с id today, используя псевдоэлемент :after.

#wp-calendar tbody td a

Устанавливает фоновый цвет для ссылок внутри ячеек и делает их блочными элементами.

#wp-calendar tbody td a:hover

Меняет фоновый цвет ссылок на белый при наведении и делает текст белым.

#wp-calendar tfoot tr

Устанавливает фоновый цвет серый и границу для строк в подвале таблицы.

#wp-calendar tfoot tr td

Убирает границу и устанавливает отступы в ячейках подвала таблицы.

#wp-calendar tfoot tr a

Устанавливает отступы для ссылок в подвале таблицы.

#wp-calendar tfoot tr a:hover

Меняет фоновый цвет ссылок на белый при наведении.

#wp-calendar tfoot tr #prev и #wp-calendar tfoot tr #next

Выравнивает ссылки в подвале таблицы: #prev — слева, #next — справа.

Этот стиль создаёт современный и аккуратный календарь с хорошо структурированным дизайном, ясными заголовками, удобной навигацией и стилями для интерактивных элементов.

Берём за основу стандартный шаблон HTML5 страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок страницы</title>
</head>
<body>
<header>
<!-- Шапка сайта -->
</header>

<nav>
<!-- Навигация -->
</nav>

<main>
<!-- Основное содержимое страницы -->
</main>

<footer>
<!-- Подвал сайта -->
</footer>

<script src="script.js"></script>
</body>
</html>

Этот шаблон содержит основные элементы, которые обычно используются на HTML5 страницах, включая декларацию типа документа, мета-теги для корректного отображения на мобильных устройствах и структурные элементы, такие как header, nav, main и footer. Вы можете добавить свой контент внутрь этих тегов и расширить функциональность с помощью CSS и JavaScript.