Създаване на страница контакти

Най-важното, което трябва да знаете от този урок

В този урок научихте основите на създаването на страница за контакти в WordPress – как да добавяте основна контактна информация, карта на адреса чрез Google Maps и контактна форма. Много е важно да знаете, че ако премахнете или изключите разширението за контактна форма, краткият код няма да работи и формата ще изчезне от страницата.

Задача стъпка по стъпка: Създаване на контактна страница в WordPress 5

1. Отворете администрацията на вашия WordPress сайт и влезте в секцията „Страници" ("Pages").
2. Изберете съществуващата страница за контакти или създайте нова страница чрез „Добави нова“ ("Add New").
3. Въведете необходимата информация: име, телефон, адрес, email, текст за връзка.
4. За да добавите карта, посетете Google Maps, намерете вашия адрес и изберете опцията за „Вграждане на карта“ ("Embed map"). Копирайте предоставения HTML код.
5. Върнете се в редактора на страницата и преминете в "Текстови“ ("Text") или "Код" режим ("Code editor"), за да поставите HTML кода на картата.
6. Обновете ("Update") страницата и проверете дали картата се визуализира коректно.
7. За да добавите контактна форма, инсталирайте разширението „Contact Form 7" от менюто „Разширения“ ("Plugins") > „Добави ново“ ("Add New").
8. След инсталиране и активиране на разширението, създайте нова форма от „Contact“ > „Add New“. Използвайте стандартните полета: име, имейл, тема, съобщение, бутон за изпращане.
9. Копирайте получения кратък код (shortcode) за формата.
10. Върнете се в страницата за контакти и го поставете в "Текстовия" ("Text") или блоковия редактор.
11. Форматирайте съдържанието – ако не желаете да използвате HTML код, използвайте визуалния редактор и изберете подходящи заглавия, напр. H2 („Heading 2").
12. Обновете страницата и направете тест дали съобщенията се получават на посочения имейл. Ако е необходимо, прегледайте допълнителните настройки на разширението.
13. Внимавайте: Ако изключите разширението Contact Form 7, формата ще спре да работи, а на мястото ѝ ще остане само нейният кратък код.

Как да създадете контактна страница в WordPress 6 – новата версия

В най-новата версия WordPress 6, процесът за създаване на контактна страница с карта и форма е почти идентичен с този, показан в WordPress 5, но с някои подобрения в редактора (Gutenberg):

• Можете да използвате блокове (Blocks) за по-лесно добавяне на Google Maps чрез блок за "Вграждане на код" ("Custom HTML" или "Embed").
• За контактната форма можете да използвате както Contact Form 7, така и други съвместими плъгини. Вмъкването става чрез специален блок „Кратък код“ ("Shortcode") или чрез блока на разширението, ако то го предлага.
• Заглавията H2 се добавят чрез блок „Заглавие“ ("Heading") и се избират по-лесно чрез интерфейса.

Разлики: - Интерфейсът е по-модерен, като опциите за визуализация и подредба са по-интуитивни. - Добавянето на плъгини и тяхното активиране става директно в лентата с инструменти. - Функцията за визуализация е по-добре интегрирана.

Основни функции и команди, използвани в урока

• Contact Form 7 – Разширение за създаване и управление на контактни форми в WordPress.
• Shortcode – Кратък код, който вмъква функционалности на разширение в съдържанието на страница или публикация.
• Embed map/Вграждане на карта – Опция в Google Maps за генериране на HTML код за вграждане на карта в сайта.
• Text Editor/Текстови режим – Режим на редактора в WordPress, в който се работи директно с HTML кода.
• Ctrl + C – Копиране на избран текст или код.
• Ctrl + V – Поставяне (пейст) на копирания текст или код.