Нещодавно я виклала в свій магазин нову вордпресс тему Wecreation Style . До цієї теми додається інструкція по установці, яку я і хочу запропонувати вашій увазі. У ній ми крок за кроком будемо налаштовувати шаблон з тим, щоб він виглядав в точності як на live demo. Зокрема порушені такі питання, як встановити тему на хостинг, базові настройки шаблону, настройка меню, створення сторінок і постів, завантаження картинок, установка віджетів сайдбара і футера, а також створення онлайн портфоліо. Всі кроки супроводжуються скриншотами і докладним описом здійснюваних дій.

Крок 1. Встановлення теми

1.1 Розпаковуємо скачаний архів. У ньому містяться такі файли і папки:
- wecreationstyle.zip - архів шаблону
- Plugins - плагіни для шаблону
- Instructions - інструкція по установці
- Угода - угоду користувача

1.2 Спочатку переконайтеся в тому, що у вас на хостингу встановлений вордпресс 3.0 версії і вище. Після цього заходимо в адмінку вордпресс і вибираємо закладку Зовнішній вигляд -> Теми -> Встановити теми -> Завантажити. Вибираємо архів wecreation.zip на вашому комп'ютері і натискаємо Встановити. В процесі установки відкриється віконце, в якому вам треба буде ввести логін і пароль для доступу на серевер.

Якщо ви хочете вручну встановити тему, то для цього треба розпакувати архів wecreationstyle.zip. За допомогою FTP завантажити папку «wecreationstyle» на сервер в папку «/ wp-contents / themes /». Все фали шаблону будуть лежати на хостнге за адресою «wp-contents / themes / wecreationstyle /». Після цього треба зайти в адмін панель вордпресс.

1.3 Після того, як тема успішно встановлена, треба натиснути на посилання Активувати для активації теми.

1.4 Після цього треба вибрати закладку Зовнішній вигляд -> Віджети і деактивувати всі дефолтовая віджети (6 штук) в блоці Сайдбар, перетягнувши їх назад на ліву панель. Ми Статуту всі потрібні віджети заново трохи пізніше.

Крок 2. Базові установки

2.1 Вибираємо закладку Параметри -> Загальні і задаємо загальні налаштування блогу. Не забуваємо зберігати.

2.2 Йдемо в закладку Налаштування теми Wecreation Style і в випадаючому меню блоку Колір теми вибираємо колір оформлення теми.

2.3 Вибираємо закладку Параметри -> Читання і задаємо настройки читання. Не забуваємо зберігати.

2.4 Вибираємо закладку Параметри -> Медіафайли і задаємо розмір передпереглядом 120х120. Не забуваємо зберігати.

Крок 3. Налаштування рубрик

3.1 У закладці Записи -> Рубрики створюємо рубрики і підрубрики. Задаємо назву, ярлик і опис. Для підрубрик в випадаючому меню задаємо батьківську рубрику. Не забуваємо натискати Додати нову рубрику.

3.2 Я створила 4 рубрики (Перша, Друга, Третя і Четверта) і 3 підрубрики для Четвертої рубрики (Категорія один, Категорія два, категорія три). У правій частині закладки з'явилася відповідна таблиця з рубриками.

Крок 4. Створення сторінок

4.1 У закладці Сторінки -> Додати нову створюємо нову сторінку. Не забуваємо натиснути Опублікувати. Таким чином створюємо 4 сторінки: Про сайт, Контакти, Реклама, Портфоліо.

4.2 Переходимо в закладку Сторінки -> Все сторінки. Перш за все видалимо дефолтовая сторінку Приклад сторінки, натиснувши на посилання Видалити. Повинно залишитися 4 сторінки: Про сайт, Контакти, Реклама, Портфоліо.

Крок 5. Створення меню

5.1 Переходимо в закладку Зовнішній вигляд -> Меню. В поле Тема меню пишемо main_menu (!). І потім натискаємо кнопку Створити меню.

5.2 Закладка Зовнішній вигляд -> Меню. Тепер натискаємо на закладку зі знаком + і додаємо ще одне меню. Для цього в поле Тема меню пишемо small_menu (!). І потім натискаємо кнопку Створити меню.

5.3 Закладка Зовнішній вигляд -> Меню. У меню праворуч вибираємо закладку main_menu. У блоці Області теми в випадаючому меню вибираємо пункт main_menu в якості головного меню Primary Navigation. Натискаємо кнопку Зберегти.

5.4 Ми все ще на закладці Зовнішній вигляд -> Меню. Далі переходимо до наступного блоку на закладці main_menu - Довільні посилання. Вводимо урл вашого сайту в поле URL слово Головна в поле Текст. Потім натискаємо кнопку Додати в меню. І після цього обов'язково натискаємо кнопку Зберегти меню.

5.5 Переходимо до блоку Рубрики. Вибираємо закладку Все і вибираємо всі категорії крім Без рубрики. Натискаємо кнопку Додати в меню. Після цього пересуваємо мишкою пункти меню в тому порядку, який нам потрібен. А потім не забуваємо натиснути кнопку Сохранить меню.

В даному випадку меню повинно виглядати так.

5.6 Закладка Зовнішній вигляд -> Меню. У меню праворуч вибираємо закладку small_menu. Нас цікавить блок Сторінки. Натискаємо Виділити все і потім натискаємо кнопку Додати в меню. Після цього пересуваємо мишкою пункти меню в тому порядку, який нам потрібен. А потім не забуваємо натиснути кнопку Сохранить меню.

На цій стадії установки наш шаблон виглядає так.

Крок 6. Установка плагіна WP jQuery Lightbox

6.1 Цей плагін відкриває картинки для перегляду з красивим сучасним ефектом. Йдемо в закладку Модулі -> Додати новий. Потім вибираємо кнопку Завантажити та далі вибираємо архів wp-jquery-lightbox.1.3.3 з папки Модулі з основного архіву шаблону. Натискаємо кнопку Встановити.

6.2 У процесі установки треба буде ввести пароль доступу до серевер. Після успішного завантаження натискаємо посилання Активувати плагін.

6.3 Після активації відповідна закладка з'явиться в меню зліва. Вибираємо Параметри -> jQuery Lightbox задаємо такі параметри. Після тиснемо кнопку Зберегти зміни.

Крок 7. Установка плагіна Contact Form

7.1 Йдемо в закладку Модулі -> Додати новий. Потім вибираємо кнопку Завантажити та далі вибираємо архів contact-form-7.2.4.6 з папки Модулі з основного архіву шаблону. Натискаємо кнопку Встановити. В процесі установки треба буде ввести пароль доступу до серевер. Після успішного завантаження натискаємо посилання Активувати плагін.

7.2 Після активації відповідна закладка з'явиться в бічному меню зліва. Вибираємо закладку Contact. Відкриється така сторінка. Скопіюйте код, який на коричневому тлі.

7.3 Потім йдемо на закладку Сторінки і вибираємо сайту Контакти для редагування. Скопійований в попередньому кроці код вставляємо в HTML поле поста. Натискаємо Оновити.

Крок 8. Установка плагіна Most Popular Posts

Йдемо в закладку Модулі -> Додати новий. Потім вибираємо кнопку Завантажити та далі вибираємо архів most-popular-posts.1.6 з папки Модулі з основного архіву шаблону. Натискаємо кнопку Встановити. В процесі установки треба буде ввести пароль доступу до серевер. Після успішного завантаження натискаємо посилання Активувати плагін. На цій стадії ми просто активували плагін. Налаштовувати його в сайдбарі ми будемо трохи пізніше.

Крок 9. Установка плагіна Subscribe to Comments

Йдемо в закладку Модулі -> Додати новий. Потім вибираємо кнопку Завантажити та далі вибираємо архів subscribe-to-comments2.1.2 з папки Модулі з основного архіву шаблону. Натискаємо кнопку Встановити. В процесі установки треба буде ввести пароль доступу до серевер. Після успішного завантаження натискаємо посилання Активувати плагін. В принципі, плагін підписки на коментарі вже працює. Єдине, можна перевести на російську мову деякі фрази. Для цього йдемо на закладку Параметри -> Subscribe to Comments. Вставляємо необхідні фрази російською мовою.

Крок 10. Віджет сайдбара: Соціальні іконки

Вибираємо закладку Налаштування теми Wecreation Style. Вибираємо блок Іконки в сайдбарі. Щоб іконки були включені потрібно поставити галочку в Галочка. У відповідні поля вставляємо урли ваших акаунтів в Фейсбуці і Твіттері. Також зазначаємо адреса фида і урл підписки за допомогою Фідбернера. Не забуваємо натискати Зберегти зміни.

Крок 11. Віджет сайдбара: Блок реклами

Вибираємо закладку Налаштування теми Wecreation Style. Вибираємо блок Банери в сайдбарі. Для включення ставимо галочку в чекбоксі вкл / викл. Копіюємо код, наведений нижче в відповідне поле. І потім міняємо знак # на урл рекламного банера, титл і урл картинки відповідно. Ну і пишемо свій текст під картинкою. Розмір банерів 125х125.

Крок 12. Віджет сайдбара: Популярні статті

Вибираємо закладку Зовнішній вигляд -> Віджети. Там в блоці Доступні віджети шукаємо віджет Most Popular Posts і потім мишкою перетягуємо його в блок Sidebar. Заповнюємо поле Title, ставимо кількість записів і відживають галку показів кількості коментарів. Натискаємо кнопку Зберегти.

Крок 13. Віджет сайдбара: Youtube

Вибираємо закладку Зовнішній вигляд -> Віджети. Там в блоці Доступні віджети шукаємо віджет Текст і потім мишкою перетягуємо його в блок Sidebar. Пишемо заголовок Youtube. В поле віджета вставляємо код з Youtube. Важливо! При генерації коду ролика на Ютубі вказуємо розмір 226 по ширині. Як приклад копіюємо і вставляємо в віджет код, розташований нижче. Потім натискаємо кнопку Зберегти.

Крок 14. Віджет сайдбара: Свіжі коментарі

Вибираємо закладку Зовнішній вигляд -> Віджети. Там в блоці Доступні віджети шукаємо віджет Свіжі коментарі і потім мишкою перетягуємо його в блок Sidebar. Пишемо заголовок і кількість коментарів. Потім натискаємо кнопку Зберегти.

Крок 15. Віджет сайдбара: Facebook

Вибираємо закладку Зовнішній вигляд -> Віджети. Там в блоці Доступні віджети шукаємо віджет Текст і потім мишкою перетягуємо його в блок Sidebar. Пишемо заголовок Facebook. Акуратно копіюємо код, розташований нижче і вставляємо його у вільний поле віджета. Важливо! У другому рядку коду знайдіть слово DesigNonstop і замініть на назву вашої сторінки у Фейсбуці. Потім натискаємо кнопку Зберегти.

Крок 16. Віджет сайдбара: Twitter

Вибираємо закладку Зовнішній вигляд -> Віджети. Там в блоці Доступні віджети шукаємо віджет Текст і потім мишкою перетягуємо його в блок Sidebar. Пишемо заголовок Twitter. Акуратно копіюємо код, розташований нижче і вставляємо його у вільний поле віджета. Важливо! У передостанньому рядку коду знайдіть слово DesigNonstop і замініть на назву вашого облікового запису в Твіттері. Потім натискаємо кнопку Зберегти.

Крок 17. Інші віджети

Вибираємо закладку Зовнішній вигляд -> Віджети. Там в блоці Доступні віджети шукаємо віджет Хмара міток і потім мишкою перетягуємо його в блок Other Tags. Пишемо заголовок. Потім натискаємо кнопку Зберегти.

Тепер на сторінках пошукової видачі і 404 сторінці буде присутній блок тегів.

Крок 18. Віджет футера: Останні записи

Вибираємо закладку Зовнішній вигляд -> Віджети. Перетягуємо віджет Свіжі записи з блоку Доступні віджети в блок First Footer Widget Area. Пишемо заголовок і кількість записів. Натискаємо кнопку Зберегти.

Крок 19. Віджет футера: Всі теги

Вибираємо закладку Зовнішній вигляд -> Віджети. Перетягуємо віджет Хмара міток з блоку Доступні віджети в блок Second Footer Widget Area. Пишемо заголовок і натискаємо кнопку Зберегти.

Крок 20. Віджет футера: Рубрики

Вибираємо закладку Зовнішній вигляд -> Віджети. Перетягуємо віджет Рубрики з блоку Доступні віджети в блок Third Footer Widget Area. Пишемо заголовок і натискаємо кнопку Зберегти.

Крок 21. Віджет футера: Про мене

Вибираємо закладку Зовнішній вигляд -> Віджети. Перетягуємо віджет Текст з блоку Доступні віджети в блок Fourth Footer Widget Area. Пишемо заголовок. Потім копіюємо код, розташований нижче і вставляємо в поле віджета. Потім в цей код замість знака # вставляємо урл аватарки, а замість фраз Your text пишемо пару абзаців тексту про себе. Натискаємо кнопку Зберегти

Крок 22. Налаштування поста

22.1 Вибираємо закладку Налаштування теми Wecreation Style. Вибираємо блок Налаштування поста. Використовуючи чекбокс вкл / викл, включаємо ті установки, які ми хочемо бачити біля посту. В поле для коду вводимо адресу Фідбернера підписки поштою для вашого сайту. Не забуваємо натискати Зберегти зміни.

Так буде виглядати блок після вашого поста при включених налаштуваннях.

Щоб на головній сторінці з'явився частина поста, а весь пост був доступний після натискання на посилання Читати далі, використовуйте в місці розриву тег:

Крок 23. Додати зображення

23.1 Йдемо в закладку Записи -> Додати нову і створюємо новий пост. Пишемо заголовок, сам текст поста, вибираємо категорію, вставляємо картинку в пост. Для того, щоб вставити картинку, треба натиснути на відповідний значок.

23.2 У діалоговому віконці завантаження файлу вибираємо файл, в даному випадку з комп'ютера, і завантажуємо на хостинг. (!) Зверніть увагу, щоб на хостингу у папок стояли права доступу, що дозволяють запис.

23.3 Після успішного завантаження відкриється діалогове віконце Додати зображення. У ньому заповнюємо відповідні поля і обов'язково (!) Натискаємо Використовувати як мініатюру і потім кнопку Вставити в запис. Потім натискаємо кнопку Оновити біля посту.

23.4 Довідково! Даний шаблон розрахований під картинки розміром 630х215. Висота картинки може бути будь-який, але раджу дотримуватися ширини 630 пікселів. Якщо ви вставите картинку меншою ширини, то для того, щоб текст огинав картинку збоку треба в діалогом віконці Додати зображення вказати вирівнювання.

Крок 24. Налаштування слайдера

24.1 Спочатку переконаємося, що в закладці Налаштування теми Wecreation Style в блоці Слайдер стоїть галочка в чекбоксі. Це означає, що слайдер включений.

24.2 Варто звернути на два важливих моменти. По-перше, потрібно створити 3 поста в одній категорії для того, щоб слайдер заробив. По-друге, у картинки в пості повинна бути включена функція Використовувати як мініатюру. Також у картинки в якості заголовка має бути введено назву посади. Потім переходимо в закладку Параметри -> WP Nivo Slider. Використовуйте наступні установки.

Крок 25. Портфоліо

25.1 Вибираємо закладку Медіафайли -> Додати новий і вибираємо з комп'ютера файли для завантаження.

25.2 Після того, як файли успішно завантажені, вибираємо закладку Медіафайли -> Бібліотека. Там ми бачимо тільки що завантажені картинки. Навпаки кожної картинки є посилання Прикріпити. Натискаємо на неї.

25.3 У діалоговому віконці робимо активним чекбокс Сторінка, а в поле пошуку пишемо Портфоліо. Натискаємо Пошук. Після того, як сторінка Портфоліо знайдена, відзначаємо її в чекбоксі і натискаємо кнопку Вибрати. Після цього аналогічно прикріплюємо всі завантажені картинки на сторінку Портфоліо.

25.4 Після цього йдемо редагувати сторінку Портфоліо. Там натискаємо на значок Додати зображення і вибираємо закладку Галерея. Вибираємо налаштування галереї, як на малюнку нижче. Натискаємо Вставити галерею. В пост вставиться відповідний шорткод такого виду:

25.5 Тепер сторінка Портфоліо буде виглядати так. Для того, щоб зробити підписи під картинками, потрібно в діалоговому вікні Додати зображення навпроти кожної картинки в графі Підпис вписати потрібне опис. Натиснувши на картинку, можна побачити як працює плагін WP jQuery Lightbox при відкритті картинки.

Крок 26. Банер в шапці

Вибираємо закладку Налаштування теми Wecreation Style. Вибираємо блок Банер в шапці. Для включення ставимо галочку в чекбоксі вкл / викл. Копіюємо код, наведений нижче в відповідне поле. І потім міняємо знак # на урл рекламного банера, титл і урл картинки відповідно. Розмір банера 468 × 60. Натискаємо кнопку Зберегти.

Крок 27. Google Analytics

Вибираємо закладку Налаштування теми Wecreation Style. Вибираємо блок Google Analytics і вставляємо в поле код відстеження, що надається Google Analytics. Натискаємо кнопку Зберегти.

Крок 28. Мета теги

Вибираємо закладку Налаштування теми Wecreation Style. Вибираємо блок Мета дані і вписуємо спочатку кілька ключових слів, розділених комами в верхнє поле. А потім фразу, що описує ваш блог, в другому полі. Натискаємо кнопку Зберегти.

Крок 29. Шорткоди

В даному шаблоні доступні шорткоди блоків повідомлень, великих і маленьких кнопок, а також шорткодов виділення тексту маркером.

Використовуються шорткоди наступним чином. На сторінці Редагувати пост є вбудований блок-підказка Шорткоди з усіма шорткодамі. Ви просто копіюєте шорткод і вставляєте його в тіло поста. А замість фрази Ваш текст тут вставляєте текст, який вам потрібно.

В кінцевому рахунку після все налаштувань наш вордпресс шаблон буде виглядати так.