Попередній урок ми завершили на тому, що встановили WordPress, однак сайт був недоступний з тієї причини, що після створення субдомену пройшло занадто мало часу.
Крок 4. Встановлення теми
Але якщо ми зайдемо в адмін-панель сайту наступного дня, то ми побачимо, що він вже без проблем відкривається в браузері, але виглядає доволі непривабливо. По дефолту разом з CMS встановлюється шаблон дизайну, який тут називається тема. В темі можна змінити структуру та зовнішній вигляд деяких елементів. Що саме можна змінити – залежить від автора-розробника теми. Зазвичай дозволяється змінити зображення банеру, шрифти та кольори, додати логотип, створити та редагувати меню. Даний шаблон, що ви бачите, є безкоштовним і називається Twenty Twenty-Two. Спробуємо пошукати іншу тему, що більше підходить для створення яскравого фотосайту.
Друзі, теми бувають безкоштовні та платні. Якщо ви плануєте серйозний проєкт – я раджу обрати серед платних тем. Вони надають більше можливостей по налаштуванню, ширший функціонал, крім того, ви можете розраховувати на техпідтримку розробника. Це теж важливо. Вартість тем складає від 30 до 150 доларів, це не так і багато, якщо врахувати, що платити доведеться всього один раз. Правда через кілька років дизайн вашого сайту морально застаріє і в ідеалі бажано його оновити – але то вже інша історія.
Втім і серед безкоштовних тем є чудові варіанти, тим більше що вибір дуже широкий – в бібліотеці WordPress їх кілька тисяч. Але функціонал у безкоштовних тем менший, ніж у платних, крім того, обмежені можливості по налаштуванню, також там може бути рекламний логотип розробника, який неможливо чи дуже важко прибрати.
Отже обираємо в меню: Вигляд > Теми > Додати.
Оскільки ми робимо сайт, присвячений фото, то знаходимо в переліку підходящий шаблон дизайну на фототематику. Я підібрав дві теми, однак не знаю, яка з них буде краще, тому пропоную встановити одразу дві: перша MYPHOTOGRAPHY, друга: Photography Gridly. Знаходимо тему і натискаємо спочатку «Інсталювати», а потім «Активувати».
В першому випадку файли теми мають завантажитися на сервер – для цього треба буде вказати логін/пароль для FTP-доступу (який вам надав провайдер). Після завантаження треба натиснути на кнопку «Активувати» – і саме ця тема стане активною. Тільки одна тема може бути активною в певний момент часу.
Тепер введіть в браузері доменне ім’я вашого сайту і подивіться, як змінилося зображення вашого сайту.
До речі, ви можете змінювати теми будь-коли без обмежень. Увесь користувацький контент, який ви занесли раніше, зберігається без змін в базі даних. В цьому плані WordPress вельми зручний.
Крок 5. Налаштування теми
Отже, ми інсталювали тему і бачимо, що сайт виглядає все так же непривабливо. Є тільки одне головне зображення, яке підтягнулося разом с темою, інший контент – відсутній. Тому нам треба налаштувати та наповнити шаблон дизайну: додати опис, логотип, фоновий малюнок, створити меню, тощо. Додатково створимо кілька окремих стандартних сторінок: одна з назвою «Інфо про цей сайт», друга: «Контакти».
Обираємо команду меню: Сторінки > Додати нову, заповнюємо Заголовок та основний текст (для цього скористаємося риба-текстом Lorem Ipsum), прикрашаємо сторінку малюнком та зберігаємо. Зверніть увагу, що в даному шаблоні створені сторінки автоматично додалися в головне меню сайту.
Тепер заходимо в меню Записи та додаємо кілька записів, разом з малюнками. Записи – це стрічка текстових чи графічних матеріалів, аналогічних, наприклад, стрічці новин на новинному порталі. Я підготував кілька зображень форматом 500х700 пікселів, однак для кожної теми може бути актуальним свій формат малюнків. Для цієї теми вочевидь формат 500х700 не дуже підходить, однак в цьому випадку WordPress сам обріже зображення до потрібних пропорцій при виведенні на екран, тому можна з цього приводу не перейматися.
Далі давайте персоналізуємо наш сайт, для цього заходимо в налаштування самої теми: пункт меню Вигляд > Налаштувати. Змінюємо назву та опис сайту, додаємо логотип, аватар, фонове зображення. Слід зазначити, що кожна тема має свої особливості налаштування, ті речі, які є в даній темі, можуть бути відсутніми в інших. Крім того, деякі зміни в алгоритмі налаштування можуть бути обумовлені змінами в самій платформі WordPress, яке постійно оновлюється.
Тепер налаштуємо футер (або підвал) сайту. Зазвичай в підвалі розміщують певну додаткову інформацію, наприклад юридичні відомості, місію інфоресурсу тощо. Для цього в адмін-панелі WordPress оберемо в меню: Вигляд > Налаштувати > Віджети. У вікні, що відкрилося, клацнемо по Footer Widget 1, далі натиснемо + і оберемо Параграф. Вставимо пояснювальний текст-рибу. Повторимо процедуру для Footer Widget 2, але вже оберемо у випадаючій панелі Цитату та вставимо текст цитати. Ще раз повторимо процедуру для Footer Widget 3, і оберемо Перелік, щоб вставити кілька речень списком. В кінці натиснемо на кнопку «Опублікувати», що зберегти зміни.
Далі зробимо головне меню для сайту. Як бачимо, при створенні нової сторінки відповідний пункт автоматично додається в меню. Приспустимо, що ми хочемо зробити перехід з меню на зовнішній сайт, наприклад, це може бути власний сайт, або ж сторінка для збору донатів. Для прикладу, зробимо перехід на сайт одного з відомих благодійних фондів. В саме меню додамо візуальний індикатор, який покаже користувачам, що посилання переведе їх на інший сайт. Обираємо в адмінпанелі: Вигляд > Налаштувати > Main_menu > + Додати елементи. Далі обираємо «Користувацьке посилання». В новій формі вводимо URL потрібного сайту, а в тексті посилання вводимо Донати ↗ без пробілів на початку та в кінці. Комбінація символів ↗ в підсумку і генерує ту стрілочку, що додається до тексту пункту меню.
Тепер переходимо з майстерні на сайт та тиснемо F5, щоб оновити. Як бачимо, сайт кардинально змінився – зараз він виглядає як повноцінний портал фотоподорожей, який не соромно показувати друзям та знайомим.
До речі, ми можемо прямо в адмінпанелі переглянути, як буде виглядати сайт на мобільних пристроях. Для цього в майстерні WordPress обираємо: Вигляд > Налаштувати. Внизу натискаємо одну з трьох кнопок, щоб увімкнути сайт в режимі перегляду на ПК, планшеті або смартфоні.
А тепер, коли сайт вже наповнений контентом, можемо за лічені секунди перемкнутися на другу інстальовану тему та подивитися, як буде виглядати сайт. Це дуже просто зробити: в адмінпанелі обираємо Вигляд > Теми, обираємо потрібну тему та натискаємо Попередній перегляд. Якщо результат подобається – тиснемо Активувати.
БІЛЬШЕ ЦІКАВОГО: