Html контейнери
Блокова верстка Вордпресс
Для початку обговоримо загальний принцип формування html-коду для Вордпресс. Він носить назву «блокова верстка». І, як неважко здогадатися, це означає, що шаблон складається з деяких блоків. Ми вже бачили це на прикладі шаблону сторінки або запису.
Насправді, далеко не все так очевидно. Ось, наприклад, верстка таблиці:
Ми бачимо, що окремі елементи (комірки) прописані одна над іншою. А розташовуватися вони будуть на одній лінії. Ось результат такої простої записи:
Зверніть увагу, що, якщо в таблиці немає ніяких кордонів - то вміст її осередків виглядає, як звичайна запис. Уявіть, що ми можемо (а ми можемо!) Задати будь-яку конфігурацію для осередків, додати туди не тільки текст, а й картинки ... А тепер спробуйте уявити, яким навороченим буде код такої сторінки!
Саме такий принцип верстки застосовували раніше (наприклад, для сайтів narod) і іноді застосовують до сих пір! Він називається «табличная верстка». Так що, природність блокової верстки - це вдала знахідка розробників, а не випадковість.
Елементи блокової верстки
Але як формуються блоки в блокової верстці? Як браузер відрізняє, що один елемент закінчився і почався наступний? Як він визначає, що у цього елемента такі властивості і стилі, а в іншого - інші? - Це головні питання, які призводять нас від теорії до практики.
Отже, блоки - це фрагменти контенту, які укладені в блокові теги або блокові елементи (контейнери). Взагалі-то, їх чимало, але ми сьогодні познайомимося з найважливішими і часто зустрічаються - тегами div, p, h.
У всіх блокових елементів є загальні правила форматування:
- Ширина такого елемента буде дорівнює ширині батька. Тобто, наприклад, ширина тексту поста буде дорівнює всій ширині колонки;
- Висота визначається кількістю контенту. Тобто, абзац буде вище, якщо в ньому більше тексту;
- Новий блок починається з нового рядка.
контейнер div
Це базовий тег для будь-якого шаблону Вордпресс. Подивіться коди своєї теми - там будуть виклики функцій php:
І якісь фрагменти, укладені в теги - власне, контейнер:
Причому в такий контейнер можуть полягати і php-функції, і інші теги (наприклад, активні посилання, обмежені тегами а, заголовки h і т.д.)
Навіщо ж взагалі потрібен такий контейнер? - Щоб привласнити йому окремий стиль, який буде прописаний окремо (в таблиці стилів). Так можна написати досить лаконічний код, що складається з окремих блоків для яких буде призначено назву або id стилю. Але сам CSS-код оформлення буде довантажувати з іншого файлу. Властивості стилю дописують так:
Подивіться на код будь-якого з розділів шаблону вашого блогу і відразу побачите, про що я говорю. Для тренування, спробуйте виокремити окремі блоки і зрозуміти, за відображення яких елементів сторінки вони відповідають. А потім знайдіть в таблиці стилів назву або id стилів, які відносяться до різних блокам.
контейнер p
- text-align: left; - вирівнювання по лівому краю;
- text-align: right; - вирівнювання по правому краю;
- text-align: justify; - вирівнювання по ширині;
Повна запис виглядає, наприклад, так:
Всі інші стильові властивості для цього тега задані в таблиці стилів. Там прописані і шрифти, і їх розміри, і колір тексту (адже він може бути не тільки чорним!)
контейнер h
Це відомий тег, в який укладаються заголовки - h1, h2, h3 і так далі. Стилі для кожного типу заголовків вже прописані в темі блогу. Вони беруть участь і в верстці сторінок шаблону, і в форматуванні окремих постів.
Про використання заголовків різного рівня в тексті вже говорено-переговорено сеошниками всіх мастей. Але ми можемо застосувати цей тег і в шаблоні Вордпресс. Наприклад, додати девіз свого блогу на головну сторінку - під шапкою, над переліком посад. Наприклад, так:
А наступного разу ми розглянемо рядкові елементи, без яких верстка і форматування блогу, також, неможливі.