Дизайн страниц сайта обычно задан автоматически в теме-шаблоне Вордпресс, однако, в нем нужно разбираться и подучивать язык программирования php, чтобы не столкнуться позже с неразрешимыми трудностями. Для меня первым шоком стало перекашивание части страницы сайта, когда я по инструкции с какого-то сайта вставил туда код кнопки скачивания файла. Сама настройка скачивания файла удалась, но почему-то текст после нее размазался по всей ширине экрана, без отступов слева и справа. Вид был ужасный. И если бы я хоть немного не разбирался в php, то упустил бы из виду появление маленькой “приставочки” под встроенным мной кодом — div. Это же обозначение, которое вводит контейнер!!! Параметры контейнера не прописаны, поэтому он берет и растекается по всей ширине html-создания. По умолчанию так, еще с допотопных времен появления интернета, контейнер без всяких дополнительных указок вот таким и задан: по ширине всей публикации. Тогда я убрал три буквы div, и неполадка исчезла: нет невесть откуда взявшегося контейнера, значит рулит во всем тема-шаблон. Все нормализовалось и вписалось в общий дизайн. Вот именно для исправления таких косяков php, которое оказывается супер простым, и нужно учить базовые команды и понятия языка php. Иначе придется искать фрилансера, он проделает ту же элементарную по сути работу, но придется заплатить ему рублей 500. Не хочется, правда? Одно дело, когда мы отдаем деньги за выполнение реально трудоемкой задачи, другое — раскидываемся ими по незнанию. Вывод таков: есть сайт на WordPress, значит выкраивайте свободное время и учите основы php.
Отладка дизайна страниц сайта путем введения div
Div – это обозначение контейнера. Подобно настоящему вместилищу вещей, стоящему у нас в квартире, он содержит текст, блоки картинок, аудио или видео и все прочие “полезности”. В программировании котейнер представляет собой блок, сегмент с неким содержанием. Напомним, бывают блоки с:
отзывами клиентов;
примерами работ;
выборками последних статей
Когда мы видим их отдельными разделами на сайте, порой несложно догадаться, что они и сверстаны разделением кода. Для одного блока вводится один “див” с открывающим и закрывающим тегами, для другого — другой. Синтаксис таков: <div>… </div>. Закрывающий тег обязателен.
Внутри “дива” располагается еще целая вереница кодов, обозначающих деление его на отсеки, отступы, расстояния и прочие дизайнерские элементы конфигурации. Притом в CSS обязательно указать их свойства.
Только в отличие от данных картинки, прописывать нужно то, что указано в наименовании класса (class=”iliya”, допустим, значит пишем в CSS iliya и задаем ему свойства).
Как подключить div-блок всплывающим окном в WordPress
В Вордпресс, чтобы созданный вами самолично блок заработал, его сначала нужно подключить через добавление следующего кода в functions.php:
Как видно, он базируется на хуке wp_enqueue_scripts. Далее в wp_footer можно добавить функционал вывода вашего блока, как всплывающего окна или формы данным ниже кодом:
add_action( ‘wp_footer’, ‘the_popup_form’, 1 );
function the_popup_form() { ?>
<div id=”popup” class=”mfp-hide popup”>
<form id=”popup-form” class=”popup-form”>
<!– … –>
</form>
</div>
<?php }
Он станет триггером всплывающего окна. Теперь вписывайте свою инициализацию, стили и скрипты, характерные именно для вашего нового див-блока всплывающего окна.
Правила написания кода в div-блоках
Содержимое блока на “диве” важно писать на php. Рассмотрим некоторые особенности его применения и освежим, как будет выглядеть привычный и читаемый алгоритмами код.
Div можно использовать исключительно для отделения одной части (например, текста) от другой (например, рисунка). Тег div в HTML разбивает документ на отдельные части, которые отличаются друг от друга.
Атрибуты тега div
Как и у всех остальных тегов, у див тоже есть атрибуты. Атрибуты — это обозначения ряда условных свойств, формирующих внешний вид всего тега. Пока они не заданы, он словно бесформенный.
id — идентификатор раздела. Значение этого атрибута должно быть уникальным в пределах документа.
align — отвечает за выравнивание содержимого внутри тега.
class — определяет имя класса стилей, который был создан заранее.
style — позволяет задать стили для содержимого раздела.
title — краткое описание раздела.
Термин div изначально произошел от английского division — “раздел, секция”. Этому разделу необходимо прописать характеристики. Сделать это следует через атрибуты и их значения. Значения атрибутов записываются после символа равно — “=”. Например, в htmp-редакторе прописывают:
И тут же в CSS задают ему свойства дизайна на странице сайта:
.warning {
border: 10px ridge #f00;
background-color: #ff0;
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.warning img {
width: 100%;
}
.warning p {
font: small-caps bold 1.2rem sans-serif;
text-align: center;
}
В итоге получается текст с предупреждением о наличии леопардов с картинкой животного.
Задан класс для дива — warning. По этому названию класса “warning” (раз уж его так обозвали, ведь называть можно как угодно) указываются значения CSS.
Сделайте себе на сайте такую картинку с любым изображением и подписью в качестве упражнения к выученному здесь и сейчас удивительному моменту насчет div.
Что бывает написано в разделе div
Дизайн страниц сайта во многом опирается на блочные элементы. Приведем примеры заполнения кодом дива, чтобы примерно представлять, как он может выглядеть на практике. В дивы можно вставлять абзацы — через <p>, таблицы — <table> и прочие структуры. Атрибут align считается архаичным, старайтесь избегать его употребления, а вместо него перейти к заданию всей эстетики через CSS.
Рассмотрение примера порядка прописания кодов в div и их иерархии удобно произвести, представив их все в виде родственников одной большой семьи так:
Для основной массы данных в полотне кода div-контейнер выглядит как подселившийся с детьми сосед.
В самых простых вариантах использования дива ему задают некий класс (для последующего “колдовства” со стилями в CSS) и пишут внутри простой текст. К примеру
<body>
<div class=”block1″>
Ведущие психиатры рекомендуют избегать психотравмирующих моментов и среды, вызывающей нервозность.
Психика остается стабильной лишь в благоприятных условиях.
</div>
<div class=”block2″>
Конкретные советы смотрите в известных учебниках по психиатрии.
</div>
Вот эта простая раскладка уже позволяет четче понять, как встраивается новый блок в структуру дизайна страниц сайта. Не забываем, что здесь заданы классы block1 и block2, свойства которым нужно сочинить в коде CSS. Иными словами, див-блоки идут в неотрывной связи с классами стилей, где им задают определленные параметры по внешнему виду.
