Оформлення групи ВКонтакте в стилі вікі - розмітки

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

Перед тим як заглибитися в вікі - розмітку, створюючи інтерактивне меню, необхідно зробити деякі підготовчі дії, в першу чергу, змінити деякі настройки в групі. Натискаємо на «Управління співтовариством», відкриваємо «Обговорення», і підключаємо «Матеріали».

Тепер переходимо до підготовки зображень. Якщо Ви не працюєте з графічними редакторами, то доведеться звернутися до фрілансерам. Подальша робота буде показана з застосуванням Фотошопа, але може бути виконана і в інших редакторах.

Заготовляємо шаблон для групи ВКонтакте згідно зображенню.

Заготовляємо шаблон для групи ВКонтакте згідно зображенню

Розміри вікна А, в якому розміщуватиметься меню, можуть відрізнятися від вказаних. Все залежить від того, які розміри Ви задасте кнопок меню. У запропонованому варіанті передбачено по одній кнопці в рядок. Якщо ж Вам потрібно розмістити по дві кнопки в рядок, то ширину вікна А потрібно зменшити до 377 рх максимум. Висота цього вікна в більшості випадків підбирається досвідченим шляхом. У запропонованому варіанті висота в 377 рх обрана при розміщенні на передній сторінці групи кожного елемента інформації в один рядок.

У запропонованому варіанті висота в 377 рх обрана при розміщенні на передній сторінці групи кожного елемента інформації в один рядок

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

Як все це зробити, тут ми заглиблюватися не будемо, так як ця стаття не урок по Фотошопу

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

Зберігши і видаливши непотрібні фрагменти (фотошоп кроїть і зберігає все зображення і білі поля теж), перейменуємо фрагменти, пронумерувавши їх по порядку їх розташування в меню

Тепер переходимо безпосередньо до групи. Після коригування налаштувань, на стіні з'явилися дві вкладки: «Свіжі новини» і «Обговорення». Кількома по «Нова тема» в закладці обговорень і створюємо першу сторінку нашого меню.

Кількома по «Нова тема» в закладці обговорень і створюємо першу сторінку нашого меню

Її потрібно назвати відповідно до імені на графічному меню і заповнити поле з описом. Після заповнення всієї необхідної інформації, натискаємо «Створити тему».

Після заповнення всієї необхідної інформації, натискаємо «Створити тему»

На стіні з'явиться створене повідомлення. Таким же шляхом створюємо потрібну нам кількість (у відповідності з розділами меню) сторінок.

Таким же шляхом створюємо потрібну нам кількість (у відповідності з розділами меню) сторінок

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

Наводимо курсор на неї і натискаємо на «Редагувати»

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

Після цього перемикається в режим wiki - розмітки і редагуємо код

Зразок коду для розглянутого меню:

[[Photo161272339_305868837 | 387x50px; noborder; nopadding | topic-55525598_28652980]]
[[Photo161272339_305868826 | 387x50px; noborder; nopadding | topic-55525598_28653317]]
[[Photo161272339_305868817 | 387x50px; noborder; nopadding | topic-55525598_28653323]]
[[Photo161272339_305868805 | 387x197px; noborder; nopadding; nolink | ]]

Важливо мати на увазі, що для фрагментів, які не виконують роль кнопки необхідно замість посилання на сторінку прописувати «nolink». Інакше, фрагмент буде клікабельним, і при кожному натисканні на нього буде відкриватися сам фрагмент, як окреме зображення.

Посилання на сторінки беремо з адресного рядка, відкриваючи кожну окремо. Тут необхідно копіювати не весь адреса, а тільки топік.

Якщо все зроблено правильно і не допущено жодної помилки в коді, то при поверненні в нашу групу і після натискання на назву вкладки (Головне меню групи) відкриється створене нами меню, яке виглядає, як одне ціле разом з аватаром. Інтерактивне меню і графічне оформлення групи представляють собою єдину композицію. При натисканні на розділи меню ми потрапляємо до відповідних розділів групи.

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

Ми розглянули, як зробити інтерактивне меню або оформити групу в стилі wiki. Якщо виникнуть питання по самому процесу підготовки, пишіть в коментарях і разом спробуємо вирішити їх.