Документація по Порто

1. Огляд
2. Установка
3. Тільки тема
4. Суб-тема Порту
5. Меню
6. Модулі
7. Загальні обов'язкові модулі
8. Повзунки зображення
9. NivoSlider
10. Титульна сторінка
11. Сайт однієї сторінки
12. Меню однієї сторінки
13. Налаштування теми
14. Типи спеціального вмісту
15. Колонки портфоліо
16. Пов'язані проекти:
17. Фільтри портфоліо:
18. Команда
19. Командні фільтри:
20. Карусель
21. Відгуки
22. FAQ
23. Паралакс
24. Блог (повідомлення)
25. Автор біо
26. Блокові регіони
27. Регіони блоків заголовків
28. Регіони блокування вмісту
29. Область блоку нижнього колонтитула
30. Додатково
31. Приклади коду
32. Потік Flickr
33. Віджет Twitter
34. Лайтбокс
35. Соціальні іконки
36. Переключити
37. Анімації CSS3
38. Спасибі

Огляд

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

Оновлено: 01.04.14
Автор: Рефактор
Документи забезпечують: TOC
Оригінальний дизайн Криво

Установка

Існує декілька способів встановлення Порту. Для існуючих сайтів, які вже мають вміст, перший метод передбачає лише встановлення та активацію теми. Другий варіант включає в себе повну установку Drupal 7 з тим самим файлом бази даних SQL, який використовується для створення демо-теми. Виберіть спосіб встановлення, який найкраще підходить для вас, і дотримуйтесь інструкцій. Ми настійно рекомендуємо виконати повну інсталяцію, особливо якщо ви плануєте використовувати функціональність Commerce.

Тільки тема

• Відвідайте ваш домен.com/admin/appearance/install
• Завантажте файл Porto.zip
• Увімкнути та встановити значення за умовчанням

• Витягніть файл Porto.zip і завантажте його за допомогою FTP до / sites / all / themes
• Відвідайте ваш домен.com/admin/appearance/
• Прокрутіть вниз до "ВИМКНЕНІ ТЕМИ" і встановіть і ввімкніть Порту

Повна установка Drupal

Наступні кроки призначені для людей, які мають досвід вручну встановлення Drupal та імпортування баз даних. Якщо ви не відчуваєте себе впевненим у виконанні цих кроків самостійно, зверніться за допомогою до адміністратора сервера. ПРИМІТКА Ця опція призначена для абсолютно нової установки Drupal. Не імпортуйте наданий файл SQL у існуючу базу даних Drupal, або ви втратите всі свої дані!

1. Створіть базу даних для цієї інсталяції Drupal і імпортуйте файл SQL, що входить до теми.
2. Слідкуйте ці напрямки створити файл settings.php. Збережіть цей файл десь так, що ви можете скопіювати його до встановленої нами Drupal.
3. Скопіюйте весь вміст папки / demo / porto до місця розташування на вашому веб-сервері, де потрібно отримати доступ до вашого сайту. Якщо ви хочете, щоб ваш основний домен вказував на установку порту, скопіюйте все всередині кореневої папки. Якщо ви хочете, щоб ваш сайт був доступний як підрозділ вашого домену (наприклад: yourdomain.com/drupal), то просто перейменуйте папку / demo / porto на потрібне ім'я та завантажте його до кореня сервера. Також обов'язково скопіюйте файл settings.php, згаданий у попередньому кроці
4. Увійдіть на свій сайт за допомогою імені Стіва і адміністратора пароля і відвідайте / admin / people, щоб змінити ім'я користувача та пароль адміністратора.
5. Перейдіть до конфігурації Drupal, знайденої в / admin / config і оновіть всю необхідну інформацію для відображення вашого сайту. Також обов'язково відвідайте / admin / config / media / file-system і змініть Тимчасовий каталог.

Суб-тема Порту

Примітка: у версії 1.1.2 підтема є активною темою за умовчанням у повній демонстраційній установці.

Порто поставляється з підтемою оболонки, яка називається Porto_sub, яку можна використовувати для налаштування стилю та структури шаблону батьківської теми без необхідності змінювати батьківську тему. Це корисно, якщо ви плануєте оновлювати батьківську тему, коли ми випускаємо оновлення на ThemeForest. Якщо ви виконали повну інсталяцію, ви побачите Porto_sub у списку доступних тем. Якщо ви зробили автономну інсталяцію, ви можете знайти файл Porto_sub.zip у корені завантажуваних файлів, і ви можете встановити його як будь-яку іншу тему.

Існує вже порожня таблиця стилів, яка є /css/custom.css (всередині папки Porto_sub). Використовуйте цей файл, щоб додати всі користувацькі CSS, які ви плануєте використовувати. Ви також можете скопіювати будь-який файл шаблону з папки / Porto / templates в папку / Porto_sub / templates, і він спочатку прослухає файл шаблону суб-тем. Це дозволить вам оновлювати батьківську тему під час оновлення без втрати ваших налаштувань. Просто зверніть увагу на журнал змін і порівняйте файли батьківської теми з вашими і внесіть необхідні зміни.

Вам потрібно буде налаштувати параметри теми підтеми окремо від батьківської теми, тому відвідайте / admin / appearance / settings / porto_sub, щоб налаштувати параметри теми для підтеми. Необхідно також окремо налаштувати області блоків.

Меню

Порто має область блоку під назвою Header Menu, яка може бути використана для додавання будь-якого меню, яке вам подобається. Демо просто використовує блок головного меню за замовчуванням, але ви можете створити спеціальний блок меню, якщо хочете.

Примітка. Переконайтеся, що на всіх батьківських елементах з дітьми встановлено прапорець "Показати як розгорнуте", щоб переконатися, що випадаюче меню працює правильно.

Модулі

Ви можете знайти всі модулі, що використовуються в демо в папці модулів в корені теки, яку ви завантажили з ThemeForest. Не всі модулі повинні використовувати тему, але нижче наведено список модулів, які потрібно використовувати різні елементи теми

Загальні обов'язкові модулі

NivoSlider

Контакт

Дані щодо вмісту Порто

Якщо ви використовували опцію "тільки для теми" для встановлення теми на існуючій установці, яка вже має вміст, ми рекомендуємо вам використовувати модуль даних контенту Porto для створення додаткових типів вмісту, полів і переглядів, необхідних для повної використання теми. Ви знайдете його в папці активів у корені теки, яку ви завантажили з ThemeForest. Цей модуль є звичайним Особливості модуля і не буде працювати без нього. Рекомендується скопіювати всі модулі з папки / demo / porto / sites / all / modules в інсталяцію, якщо ви ще не маєте їх. Після того, як всі модулі просто завантажують і активують модуль даних контенту Porto, будуть автоматично створені типи вмісту, поля і перегляди.

Повзунки зображення

Мега слайдер

Порто включає в себе Drupal Мега слайдер модуля. Цей модуль пропонує неймовірну кількість варіантів для створення точного повзунка для ваших потреб. Щоб почати налаштування повзунка / admin / structure / md-slider, натисніть посилання "Додати новий повзунок". Ви можете знайти документацію для повзунка в папці модуля md_slider, і ви можете посилатися на відео нижче.

NivoSlider

Якщо ви хочете використовувати слайдер зображення NivoSlider на вашому сайті, просто встановіть модуль NivoSlider і відвідайте / admin / structure / nivo-slider, щоб налаштувати і настроїти слайдер. Для вашого слайдера створено область блоку, яку можна використовувати в будь-якій області блокування, яку ви обираєте.

Титульна сторінка

Перша сторінка, що бачиться на демонстрації Porto, складається з різних областей блоку. Деякі з них генеруються модулями (тобто Mega Slider), інші - Views, а деякі - спеціальними блоками зі спеціальною розміткою. Ви можете знайти всю розмітку, використовувану на першій сторінці демонстрації, у теці / examples / front-page-blocks у корені теки.

Сайт однієї сторінки

Нове у версії 1.1 підтримує сторінку стилю "на одній сторінці", де весь вміст розміщено на одній сторінці. Для прикладу того, як це виглядає, можна звернутися до демонстраційної сторінки тут. Створено спеціальний шаблон сторінки, який називається page - onepage.tpl.php, і призначений для роботи зі сторінкою з назвою "одна сторінка". Створено нову область блоку під назвою "Одна сторінка", яка буде використовуватися спеціально для цього шаблону сторінки. Це абсолютно необов'язково, але це може дозволити вам краще відстежувати різні блоки.

Меню однієї сторінки

Шаблон однієї сторінки також підтримує ефект плавного прокручування до # anchor elements. Наприклад, на вашій сторінці є чотири розділи: #about, #services, #team, #contact. Кожен з пунктів меню може посилатися на ці елементи прив'язки за допомогою наступної структури URL: "node / ID / # contact". Ідентифікатор у цьому випадку - це ідентифікатор вузла сторінки, яку ви створили для використання в шаблоні "на одній сторінці". Щоб знайти ідентифікатор, просто відвідайте / admin / content та натисніть редагування на цій сторінці. URL-адреса покаже вам ідентифікатор.

Якщо ви використовуєте блок Останні проекти, ви можете посилатися на #projects. Якщо ви використовуєте блок команди «Одна сторінка», ви можете встановити посилання на #team. Якщо ви бажаєте зв'язати власний блок із власною розміткою, просто додайте атрибут id = "" до основного div вашого вмісту блоку, який відповідає вашому меню.

Налаштування теми

Відвідайте / admin / appearance / settings / Porto, щоб налаштувати параметри теми. Можна вибрати колірну схему, додати власний користувацький CSS, додати свій власний логотип тощо.

Типи спеціального вмісту

Портфоліо

Поля:

• Зображення: поле зображення за замовчуванням, яке використовується для завантаження зображень.
• Категорія портфеля: це поле посилання на термін, яке пов'язане з словником, створеним спеціально для цього типу вмісту.

Блок портфоліо - приклад: http://refaktorthemes.com/porto/portfolio-4-columns

Це стандартний стиль портфоліо, який використовує вигляд "Сторінка блоку портфоліо". Якщо ви не використовуєте повну демо-версію або не використовуєте модуль Custom Content, ви можете скористатися кодом у /assets/views_exports/portfolio-filters.txt (у корені файлів завантаження ThemeForest), щоб імпортувати цей перегляд. Потім просто помістіть "Перегляд: блок портфоліо" в регіоні "Вміст" і налаштуйте параметри видимості блоків за своїм смаком.

Файли шаблонів

• /templates/node/node--portfolio.tpl.php
• /templates/field--field_image--portfolio.tpl.php
• /templates/node/node--view--portfolio--block.tpl.php
• /templates/views/views-view--portfolio-block.tpl.php

Колонки портфоліо

Для зміни кількості елементів, що з'являються в рядку в блоці портфоліо, відвідайте параметри теми (/ admin / зовнішній вигляд / налаштування / Порто).

Пов'язані проекти:

Файли шаблонів

• /templates/node/node--view--related-projects--block.tpl.php
• /templates/views/views-view--related-projects.tpl.php

Фільтри портфоліо:

Портфоліо включає підтримку ефекту фільтрування ізотопів на основі термінів таксономії. Для використання цього ефекту відвідайте / адміністратор / структуру / таксономію і створіть новий словник (наприклад: Портфоліо). Після створення свого словника ви можете створити терміни, якими ви бажаєте скористатися для класифікації об'єктів портфеля. Цей словник таксономії може бути пов'язаний з типом вмісту портфеля через поле терміну посилання, так що ви можете вибрати категорію або категорії, в які ви хочете розмістити свої елементи.

Фільтри живляться за допомогою перегляду, що називається фільтрами портфоліо, яка розміщена в заголовку перегляду як глобальна область перегляду. Якщо ви ще не маєте цього перегляду, ви можете скористатися кодом у /assets/views_exports/portfolio-filters.txt (у корені файлів для завантаження ThemeForest), щоб імпортувати як перегляд для розташування у заголовку перегляду .

Файли шаблонів

• /templates/views/views-view-list--portfolio-filters.tpl.php
• /templates/views/views-view-fields--portfolio-filters.tpl.php

Команда

Командний блок - приклад: http://refaktorthemes.com/porto/team

Поля:

• Зображення: поле зображення за замовчуванням, яке використовується для завантаження зображень.
• Категорія портфеля: це поле посилання на термін, яке пов'язане з словником, створеним спеціально для цього типу вмісту.
• Команда Bio: Текстове поле для введення короткого опису про члена команди.
• Facebook Link: Використовується для додавання посилання на сторінку Facebook учасника команди.
• Посилання на Twitter: Використовується для додавання посилання на сторінку Twitter члена команди.
• LinkedIn Link: Використовується для додавання посилання на сторінку члена команди LinkedIn.

Дещо схожий на Портфоліо, блок команди може бути використаний для демонстрації вашого сайту або членів команди компанії. Якщо ви не використовуєте повну демо-версію або не використовуєте модуль Custom Content, ви можете скористатися кодом у /assets/views_exports/portfolio-filters.txt (у корені файлів завантаження ThemeForest), щоб імпортувати цей перегляд. Потім просто розмістіть "Перегляд: Команда" в регіоні Зміст і налаштуйте параметри видимості блоку за своїм смаком.

Файли шаблонів

• /templates/node/node--view--team--block.tpl.php
• /templates/views/views-view--team.tpl.php

Командні фільтри:

Перегляд блоку команди також включає підтримку ефекту фільтрування ізотопів на основі термінів таксономії. Для використання цього ефекту відвідайте / admin / structure / taxonomy і створіть новий словник (наприклад: Team). Після створення свого словника ви можете створити терміни, якими ви бажаєте скористатися для класифікації об'єктів портфеля. Цей словник таксономії може бути пов'язаний з типом вмісту команди через поле посилання на термін, щоб можна було вибрати категорію або категорії, в які ви хочете розмістити свої елементи.

Фільтри живиться від перегляду, що називається «Фільтри команди», які розміщені в заголовку «Вид» як глобальна область перегляду. Якщо ви ще не маєте цього перегляду, ви можете скористатися кодом у /assets/views_exports/portfolio-filters.txt (у корені файлів для завантаження ThemeForest), щоб імпортувати як перегляд для розташування у заголовку перегляду .

Файли шаблонів

• /templates/views/views-view-list--team-filters.tpl.php
• /templates/views/views-view-fields--team-filters.tpl.php

Карусель

Цей тип вмісту дозволяє створювати карусель із зображенням на Flexslider. Він використовує лише стандартне поле зображення (поле_зображення), що дозволяє використовувати необмежену кількість зображень.

Поля:

• Зображення: поле зображення за замовчуванням, яке використовується для завантаження зображень.

Файли шаблонів

• /templates/node/node--carousel.tpl.php
• /templates/views/views-view--client-carousel.tpl.php
• /templates/views/views-view-unformatted--client-carousel.tpl.php

Код експорту /views-exports/carousel.txt можна використовувати для створення перегляду каруселі, який використовує відображення блоку. Цей блок може бути доданий до регіону за вашим вибором.

Відгуки

Поля:

• Вміст свідчення: Використовується для письмового змісту відгуку.
• Зразок зображення: Поле зображення за замовчуванням, яке використовується для завантаження зображення автора.
• Показна назва: текстове поле для імені автора заяви.
• Інформація про відгук : текстове поле для додавання додаткової інформації про автора відгуку, наприклад, про компанію або організацію.

Файли шаблонів

• /templates/node/node--testimonials.tpl.php
• /templates/views/views-view--testimonials.tpl.php
• /templates/views/views-view-unformatted--testimonials.tpl.php

Код експорту /assets/views_exports/portfolio-filters.txt (у корені файлів для завантаження ThemeForest) можна використовувати для створення перегляду «Відгуки», яке використовує відображення блоку. Цей блок може бути доданий до регіону за вашим вибором.

FAQ

Поля:

• Активний: це простий тип булевого поля, який використовується для встановлення відкритості чи "активного" елемента FAQ.

Файли шаблонів

• /templates/node/node--faq.tpl.php
• /templates/views/views-view--faq.tpl.php
• /templates/views/views-view-unformatted--faq.tpl.php

Код експорту /assets/views_exports/portfolio-filters.txt (у корені файлів завантаження ThemeForest) можна використовувати для створення перегляду запитань до запитань, яке використовує відображення блоку. Цей блок може бути доданий до регіону за вашим вибором.

Паралакс

Поля:

• Фонове зображення: Стандартне поле зображення для завантаження фонового зображення для вашого вмісту Parallax.
• Піктограма Parallax: Додайте клас іконок Шрифт Awesome для використання в блоці. Класи можна знайти тут.
• Big Caption: Використовуйте це поле, щоб додати до вашого вмісту великий заголовок.
• Невеликий підпис: використовуйте це поле, щоб додати до вмісту невеликий заголовок.
• Колір тексту: виберіть колір чорного або білого тексту.
• Категорія паралакса: поле посилання на термін для додавання асоціації термінів таксономії з вмістом Parallax.

Файли шаблонів

• /templates/node/node--parallax.tpl.php
• /templates/views/views-view--parallax.tpl.php
• /templates/views/views-view-unformatted--parallax.tpl.php

Код експорту /assets/views_exports/portfolio-filters.txt (у корені файлів завантаження ThemeForest) можна використовувати для створення паралаксного перегляду, який використовує відображення блоку. Ці блоки потім можуть бути додані до регіону за вашим вибором.

Блог (повідомлення)

Демо Порту використовує перегляд для відображення вузлів типу вмісту статті. Якщо ви ще не маєте цього перегляду, використовуючи один з наших різних способів встановлення, ви можете скористатися кодом, знайденим у /assets/views_exports/portfolio-filters.txt (у корені файлів завантаження ThemeForest), щоб імпортувати перегляд і всі його налаштування . Щоб змінити стиль зображення на цій сторінці перегляду, ви можете скористатися параметром Image View Image у налаштуваннях теми (/ admin / зовнішній вигляд / налаштування / Porto).

Автор біо

Щоб відобразити невелику біографію автора на сторінці сайту, встановіть Модуль Profile2 і налаштуйте його наступним чином:

1. Відвідайте / admin / structure / profiles і створіть новий тип профілю, який називається "main". Якщо це вже існує, перейдіть до наступного кроку.
2. Додайте поле до профілю, який називається "Bio". Якщо це існує, перейдіть до наступного кроку.
3. Відвідайте / admin / people та відредагуйте користувача. Потім натисніть на вкладку "Головний профіль" у верхньому правому куті поруч із посиланням "Обліковий запис", щоб додати біографію автора.

Блокові регіони

Порто має 16 областей блокування, де можна додавати власний вміст. Відвідайте ваш домен.com/admin/structure/block, щоб додати власний вміст до визначених областей блоку. Натисніть "Додати блок", щоб створити новий користувальницький блог, або виберіть існуючий блок зі списку "Вимкнено" нижче визначених блокових областей.

Регіони блоків заголовків

Порто має чотири регіони заголовка: брендування заголовків, верхній колонтитул, меню заголовка та іконки заголовка. Ви можете скористатися посиланням "демонструвати регіони блоку" на / admin / structure / block, щоб точно побачити, де вони знаходяться, але імена досить зрозумілі. Якщо ви хотіли б імітувати область соціальних піктограм, що відображається поруч із меню на демонстраційній версії, ви можете використовувати наступну розмітку в блоці:

Регіони блокування вмісту

Порто має 5 областей блоку вмісту: перед вмістом, вмістом, бічною панеллю ліворуч, бічною панеллю праворуч і після змісту. Подібно до областей Заголовок, описаних вище, ці регіони досить зрозумілі. Зауважимо, що регіони до і після змісту називаються за межами основного вмісту, так що ви можете використовувати повністю повну ширину вмісту (наприклад, слайдер зображення) або використовувати власні обгортки. Ці регіони існують для того, щоб робити все, що вам подобається, і не обмежуються будь-якою додатковою розміткою.

Порто також підтримує Flexslider, а для показу слайдів у ваших статтях просто завантажуйте більше одного зображення в налаштування поля "Зображення" під час редагування вузла статті.

Область блоку нижнього колонтитула

Нарешті, доступні 6 областей блоку нижнього колонтитула, чотири окремих чотирьох областях стовпців і дві додаткових шести областей стовпців нижче.

Додатково

Вкладка Останні / Популярні повідомлення блок

Ми включили підтримку блоку нещодавніх / популярних повідомлень із вкладками, що працюють на основі переглядів. Якщо ви не працюєте над повною установкою і не використовували спеціальний модуль вмісту для створення всіх типів тематичного вмісту, полів і переглядів, ви можете імпортувати файл /assets/views_exports/tabbed-recent-posts.txt та / assets / views_exports /tabbed-popular-posts.txt (у такому порядку), який створить необхідні перегляди. Звідси додайте блок "Популярні повідомлення про вкладки" до регіону за вашим вибором (не блок останніх публікацій, який використовується в блоці перегляду популярних публікацій). Можна також додати додаткове поле "мініатюри" до типу вмісту статті, щоб завантажити невеликий ескіз, який використовується в блоці.

Приклади коду

Ми включили деякі приклади кодів у папку / assets / examples в кореневій папці, яку ви завантажили з ThemeForest, з деякою розміткою, що використовується на декількох шаблонах демонстраційних сторінок.

Потік Flickr

Наступну розмітку можна використовувати для створення каналу Flickr у будь-якому місці вашого сайту:

Віджет Twitter

Перш ніж ви зможете скористатися віджетом Twitter, потрібно налаштувати параметри Twitter у налаштуваннях теми (/ admin / appearance / settings / porto). Щоб отримати необхідні ключі автентифікації, ви повинні відвідати https://dev.twitter.com/apps і увійдіть до свого облікового запису Twitter. Після того, як ви зможете створити програму та створити ключі OAuth, необхідні для введення в налаштування теми. Після внесення цих параметрів можна використовувати наступну розмітку в блоці (переконайтеся, що встановлено текстовий фільтр на PHP):

Лайтбокс

Нижче наведено приклад того, як можна створити дуже просте лайтбокс зображень у вмісті вашого вузла:

Соціальні іконки

Соціальні іконки з ефектом перекидання можна легко відображати за допомогою наведеної нижче позначки:

Нижче наведено список підтримуваних нижче значків:

• digg
• водіння
• facebook
• flickr
• перший
• googleplus
• html5
• icloud
• lastfm
• linkedin
• мій простір
• paypal
• picasa
• pinterest
• reddit
• rss
• skype
• stumbleupon
• tumblr
• щебетати
• vimeo
• wordpress
• yahoo
• YouTube
• github
• behance
• віщувати
• пошта
• instagram
• foursqaure
• zerply

Переключити

Якщо ви хочете створити вручну розділ перемикання, як на сторінці запитань, ви можете використовувати наступну розмітку:

Анімації CSS3

Версія 1.1.2 теми ввела підтримку CSS3 анімації, яку можна побачити тут на нашому demo> . Зверніться до файлу /examples/animations.php для прикладів коду для кожної анімації.

Спасибі

Велике спасибі за придбання тематики Porto Responsive Drupal 7. Ще раз, якщо у вас виникли проблеми або відгуки, будь ласка, підключіться через Сторінка авторів теми . Насолоджуйтесь використанням Порту!