Использование вики разметки вконтакте: изучаем в общих чертах

Если у вас есть своя группа, то вы имеете возможность создавать в ней отдельные страницы. Это позволяет создавать большие и самые разнообразные сообщества, публикую всевозможную информацию, и структурируя ее.

Для создания страниц используется Вики разметка. Сейчас мы разберем, что это такое.

Оглавление:

Блок: 1/6 | Кол-во символов: 311
Источник: https://vksetup.ru/page/viki-razmetka-vkontakte.html

Как работает вики-разметка

Вики-разметка — это язык, который используется для верстки страниц. Условно его можно назвать младшим братом HTML. На вики-страницах удобно писать и форматировать текст, вставлять иллюстрации, видео, ссылки, таблицы. Можно сверстать простую статью или составить целый интерактивный гайд с главами и подзаголовками.

Ширина любой вики-страницы — 607px. Высота ограничивается только количеством знаков, всего их может быть около 16 000.

Вся вики-разметка держится на тегах, как и HTML. Есть одиночные теги (например, <br/> — перенос строки) и парные (например, <b>жирный текст</b>).

01 Как работают теги для текста

Как работают теги для текста в вики-разметке

В некоторых случаях вики-разметка использует упрощенный синтаксис (теги заменены на типографские знаки). Например, для создания маркированного списка используются звездочки «*», а для нумерованного — решетки «#».

02 Как работают типографские знаки

Как работают типографские знаки в вики-разметке

Все существующие теги и методы их использования собраны в официальном сообществе вики-разметки . Используйте материалы этого сообщества как надежную шпаргалку. А в этой статье мы пройдемся по основным принципам работы с вики-разметкой и пошагово покажем, как с ее помощью создавать страницы и меню группы.

В стандартном редакторе вики-страниц есть два режима: визуальный и режим вики-разметки (кнопка переключения выглядит так: <>).

03 Так выглядит активный режим вики-разметки

Так выглядит активный режим вики-разметки

Примитивный текст с парой картинок можно сверстать в визуальном режиме. Это обычный редактор текста и не требует никаких знаний вики-разметки. Но если вам нужна аккуратная вики-страница с таблицами, ссылками и встроенными видео, это можно сделать только в режиме разметки — при помощи кода.

Сами создатели рекомендуют не переключать режимы редактирования туда-сюда во время работы. Говорят, это чревато ошибками на странице и съехавшей версткой.

Блок: 2/13 | Кол-во символов: 1867
Источник: http://lead-academy.ru/poleznye-materialy/viki-razmetka-vo-vkontakte-dlya-nachinayushhix/

Что такое вики разметка?


Итак, пресловутая wiki-разметка представляет собой не что иное, как специальный язык оформления информационных веб-страниц в создаваемой вами группе. Этот, весьма ценный, инструмент позволяет строить целые «шедевры»: меню, таблицы, теги, а также организовывать дополнительную структуру элементов навигации для перемещения объектов внутри группы, выполнять форматирование текста по нужному шаблону.

Блок: 2/7 | Кол-во символов: 422
Источник: http://Great-World.ru/wiki-razmetka-vkontakte/

Для чего используется?

Для создания страниц и оформления групп. Используя разметку, вы сможете создавать информативные и функциональные страницы, элементы меню и т.д.

Блок: 3/6 | Кол-во символов: 167
Источник: https://vksetup.ru/page/viki-razmetka-vkontakte.html

Структура Wiki разметки

опубликовано очень подробное руководство. Вот ссылка:

Пример Wiki разметки

Так для создания ссылки на страницу, нужно вставить следующий код:

]

Блок: 4/6 | Кол-во символов: 154
Источник: https://vksetup.ru/page/viki-razmetka-vkontakte.html

Как создать вики-страницу


Придерживаемся следующего плана при создании вики-страницы:

  • Определиться с видом страницы и сделать её макет. Бывают такие виды: ВК-лэндинг, ВК-пост, интерактивная страница.
  • После того, как Вы определились с видом своего мини-сайта, можно приступать к созданию вики-станицы. Создать меню, сделать кнопки меню активными. Наполнить страницы контентом. Сделать ссылки на товары. Подключить видео или аудио записи и многое другое. Всё зависит от Вашей фантазии.
  • Художественно оформить сообщество. Вставить картинки, логотипы, аватарки, фото товаров…

    Мы покажем конкретный пример оформления интерфейса уже существующей группы с помощью вики-разметки. Создадим тестовое сообщество и разберём весь процесс пошагово.

Для того, чтобы создать вики-страницу, нам нужно в поисковую строку браузера скопировать ссылку .

Вместо *** нужно вставить уникальный Id сообщества.

В нашем случае это 105722542.

Id находится в адресной строке браузера после /club; /event или /public.

Вместо «ИМЯ» — вбить название вики-страницы, например, «каталог товаров».

Обратите внимание, что поменять название уже не получится.

вики разметка

wiki разведка

После перехода по ссылке откроется следующая страница.

wiki3

Для дальнейшего доступа к нашему разделу меню обязательно скопируем и сохраним выделенную ссылку в текстовый документ.

Для перехода в режим вики-разметки нажмём на кнопку «Редактирование», а затем «Режим вики-разметки».

wiki4

В режиме разметки нужно набрать следующий код.

wiki5

{|nomargin ***с помощью этой команды убираем границы

|-***начинаем создавать надписи

|<center>Главная</center> ***создаём надпись «Главная» и выравниваем её по центру прямоугольника

|<center>каталог товаров</center>*** создаём надпись «каталог товаров» и выравниваем её по центру прямоугольника

|<center>о нас</center>***создаём надпись «о нас» и выравниваем её по центру прямоугольника

|<center>контакты</center>***создаём надпись «контакты» и выравниваем её по центру прямоугольника

|}***закрываем блок надписей

]***создаём ссылку на «Главная»

]***создаём ссылку на «О нас»

]*** создаём ссылку на «Контакты»

________________________________________

***Примечание

Далее переходим по ссылкам и копируем их в текстовый документ (к ранее сохранённой ссылке «каталог товаров»). Теперь ссылки из ВК-кода можно удалить.

Далее копируем код из раздела «каталог товаров» и вставляем его в три другие страницы. Вместо надписей вставляем ссылки из разделов.

Копируем их до «?». Вот что должно получиться в итоге на каждой странице.

Блок: 3/4 | Кол-во символов: 2508
Источник: https://blog.smmbox.com/novichkam/viki-razmetka-vkontakte-dlya-chajnikov.php

Игры


Используя вики-публикации можно создавать простенькие квест-игры:


Мы рассмотрели три самых популярных причины использования вики-публикаций для сообществ в . Давайте разберемся с технической стороной. 

Блок: 4/8 | Кол-во символов: 216
Источник: https://smmplanner.com/blog/polnyj-manual-po-viki-razmetke-vkontakte/



Как сделать вики разметку

Существуют приложения для быстрого и простого конструирования страниц. В список этих сервисов входят:

В первом случае вы заходите в программу и поэтапно следуете ее указаниям.

В двух остальных необходимо выбрать сообщество, с которым вы будете работать, в скобках рядом с его наименованием нажать «Новая», ввести заголовок и перейти в редактор.

Блок: 3/7 | Кол-во символов: 377
Источник: https://semantica.in/blog/chto-takoe-viki-razmetka-vkontakte.html

Как создавать страницы


Конечно, я сам не сразу пришел к тому, как создавать отдельные странички для своей группы. Потом мне пришло в голову, все-таки, прочитать инструкции по верстке на wiki, не скрою этот факт… )))

Для тех, кто не знает, что такое страница… Это некий Интернет-элемент, который вмещает информацию для общего обозрения всеми пользователями. Оказалось, что страницы формируются в автоматическом режиме, если вы указываете конкретный текст:

] или ],

После чего нужно просто перейти по этой ссылке и отредактировать страницу по желанию.

Тексты подаются на страницах при помощи специальных знаков – тегов. Пример оформления тегов подаю в таблице ниже.

Блок: 5/7 | Кол-во символов: 658
Источник: http://Great-World.ru/wiki-razmetka-vkontakte/

Как начать пользоваться?

Для начала необходимо убедиться, что в вашей группе активны материалы. Идем в сообщество, открываем меню и выбираем пункт «Управление сообществом».

Управление сообществом

Идем на вкладку «Раздел». Здесь находим пункт «Материалы», и для него выставляем значение «Открытые».

img1

Сохраняем настройки и возвращаемся обратно в группу.

У нас появляется вкладка «Свежие новости». Идем на нее, и нажимаем кнопку «Редактировать».

img1

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

Когда закончите, сохраните страницу.

Создаем страницу с помощью Wiki разметки

Блок: 5/6 | Кол-во символов: 619
Источник: https://vksetup.ru/page/viki-razmetka-vkontakte.html

Статьи

Вики-публикации позволяют форматировать статьи, применяя правила редакторской гигиены для удобного чтения. 

Вместо простыни текста, можно получить статью с иллюстрациями по тексту, с видео и звуком, у текста будут правильные отступы и оформлены заголовки. Все статьи SMMplanner в оформлены через вики-публикации.

Вики-публикации помогают авторам передавать контент в той форме, который удобен для читателя, вики-публикации индексируются поисковыми сетями и вики-публикации можно распространять в качестве гостевых публикаций получая трафик на свое сообщество.

Ссылки на вики-публикации можно размещать в других смм-пабликах в качестве гостевых размещений и получать трафик на свое сообщество.

Контентные статьи часто выходят в топ-выдачи Яндекса и Гугла наравне со статьями из блогов. Для продвижения сообществ можно использовать SEO-оптимизацию контента.

Моя статья 60 способов иногда попадает в топы выдачи, но довольно редко.

Вики-разметка, кроме очевидных инструментов верстки, позволяет создать делать много других штук: ссылаться на другие страницы, ссылаться на определенное место на странице, предлагать поделиться страницами с друзьями, на паблик и многое другое.

Блок: 2/8 | Кол-во символов: 1187
Источник: https://smmplanner.com/blog/polnyj-manual-po-viki-razmetke-vkontakte/

Код главной страницы


Главнаяhttps://vk.com/page-105722542_54261370https://vk.com/page-105722542_54261943https://vk.com/page-105722542_54261944

***Примечание

Остальные кнопки меню оформляем аналогично коду «главной страницы».

Сохраняем все изменения на каждой странице.

Переходим на любой из разделов в обычном режиме, скопировав ранее сохранённую ссылку из текстового документа в строку браузера.

wiki6

Копируем выделенную ссылку и переходим на главную страницу. На ней нажимаем «добавить запись» и вставляем ссылку в поле.

wiki7

Ждём, пока не появится пункт меню. После этого ссылку нужно удалить и нажать кнопку «отправить». Возле кнопки необходимо выбрать пункт «От имени сообщества».

Далее нужно закрепить запись в шапке группы.

wiki8

Каждую страницу меню нужно заполнить текстом. После этого можно приступить к художественному оформлению.

Добавим «шапку» и «аватарку».

Сделать их можно по видео уроку

wiki9

Мы показали Вам, что такое вики-разметка для чайников. Оформлять сообщество с её помощью очень увлекательно. Изучайте вики-разметку и создавайте настоящие мини-сайты.

Вот ссылка на видео курс :

.


Блок: 4/4 | Кол-во символов: 1073
Источник: https://blog.smmbox.com/novichkam/viki-razmetka-vkontakte-dlya-chajnikov.php

Самые «важные» коды вики-разметки*

* Которые я чаще всего использую 

Заголовок первого уровня. Для оформления заголовка первого уровня используются символы « == » с двух сторон заголовка. 

 


Отступ от края страницы. Для отступа используется символ « : » перед абзацем. Чем больше двоеточий, тем больше отступ. Я использую эту разметку, чтобы показать примеры и отделить их от основного уровня текста. 

 

Серый текст. Чтобы обозначить пример, я использую разметку, которая делает черный цвет текста серым. Для этого нужна разметка « <gray > » и нужен закрывающий текст « </gray > » (убрать пробелы перед закрывающей скобкой) 

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

Таблица начинается с « {| », а заканчивается « |} », чтобы обозначить строку, используется код « |- », а для того, чтобы разбить строку на ячейки, используется « | ». 

В таблице, часто использую: 

Невидимые границы таблицы: noborder; 

Расширить таблицу на ширину страницы (по-умолчанию, таблица создаётся на 500 px, а ширина вики-страницы 600 px): nomargin; 

Колонки фиксированной ширины (по-умолчанию таблица растягивается в зависимости от контента). Если нужно сделать три столбца одинаковой ширины, после того как прописали код открывающий таблицу, пишите на следующей строке |~. 

 

Цитата со встроенной таблицей с тремя колонками

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

Блок: 6/8 | Кол-во символов: 1542
Источник: https://smmplanner.com/blog/polnyj-manual-po-viki-razmetke-vkontakte/

Текст

Возможности оформления текста в вики-разметке в целом не отличаются от возможностей рядового текстового редактора. При редактировании непосредственно текста (сделать жирным, выровнять по правому краю и т. д.) используем теги вики-разметки, не забываем их закрывать: <center>Текст по центру</center>.

Для структурирования текста в вики-разметке предусмотрены сочетания типографских знаков. Например, такой код «—-» поставит в тексте горизонтальную разделяющую полосу, а такой «::»  — двойной отступ перед абзацем.

На одну страничку можно поместить около 16 тысяч знаков.

Блок: 6/13 | Кол-во символов: 590
Источник: http://lead-academy.ru/poleznye-materialy/viki-razmetka-vo-vkontakte-dlya-nachinayushhix/

Как сделать вики-меню

Меню группы ВК — это не какой-то отдельный функционал, а попросту вики-страница с несколькими картинками, в каждую из которых зашита ссылка на определенную страницу. На самом деле здесь все просто.

  1. Готовим обложку для меню. Можно взять любую подходящую картинку и нанести на нее текст. А можно нанять дизайнера, который отрисует вам красивые блоки и кнопки. У нас будет меню на 6 кнопок. Для этого нам нужна картинка, где будут обозначены эти кнопки. Определимся с ее размером.

При подготовке картинки для меню помните, что ширина вики-страницы — 607 px, Ширина картинки не должна быть больше, иначе изображение ужмется и потеряет в качестве. Для примера мы взяли изображение размером 510х300 px.

18 Картинка для меню сообщества

При активном инструменте «Раскройка» кликаем правой кнопкой мыши по картинке и выбираем «Разделить фрагмент», указываем нужное количество фрагментов и нажимаем «ОК».

19 Как разрезать картинку в Photoshop

Как разрезать картинку в Photoshop

Чтобы сохранить все отдельные фрагменты, нажимаем «Файл» → «Экспортировать» → «Сохранить для Web». Полученные части картинки загружаем в отдельный альбом сообщества.

Наше меню будет оформлено в виде таблицы из 6 ячеек: в три строки и два столбца. Для этого мы нарезали картинку для меню на 6 равных частей размером 255×100 px. Такой же размер нужно будет проставить для каждой ячейки.

  1. Создаем каркас для таблицы. Заходим в режим редактирования новой страницы и делаем таблицу. Открываем ее тегом и сразу задаем три важных параметра:
  • — разрешит картинкам соприкасаться
  • — скроет видимые границы таблицы
  • — позволит задать точные размеры ячеек.

Указываем фиксированную ширину ячеек — (два раза, потому что столбцов тоже два). Дальше устанавливаем места для начала новых строк тегом и новых ячеек (столбцов) тегом . Закрываем таблицу тегом и получаем такой каркас:

20 Каркас кода для будущего меню группы

  1. Помещаем картинки в ячейки и задаем для них ссылки. Поочередно открываем в альбоме сообщества нужные части картинки, копируем из строки браузера их , заключаем в двойные квадратные скобки, прописываем размеры и тег для склеивания картинок. После вертикальной черты назначаем ссылку для каждой кнопки. Получаем такой код.
  1. Готово! Нажимаем «Сохранить страницу» — и получаем удобное меню для сообщества.

21 Готовое меню группы в десктопной версии

Готовое меню группы в десктопной версии


Готовое меню группы в мобильной версии

Как закрепить меню сообщества

Если вы делали меню для группы, то оно будет легко доступно по клику на «Свежие новости» (кстати, эту страничку можно переименовать на «Меню» в режиме редактирования).

Если вы делали меню для паблика, то его можно поместить на видное место под названием сообщества при помощи закрепленной записи.

Чтобы закрепить меню в группе, опубликуйте запись с баннером и ссылкой на вики-страницу от имени сообщества (если опубликовать от своего имени, закрепить страницу будет невозможно). В паблике проблем с закреплением не будет: там можно закрепить запись любого автора.

23 Как сделать пост со ссылкой на меню

Как сделать пост со ссылкой на меню в паблике

24 Как закрепить меню

Как закрепить меню сообщества

Блок: 11/13 | Кол-во символов: 2953
Источник: http://lead-academy.ru/poleznye-materialy/viki-razmetka-vo-vkontakte-dlya-nachinayushhix/

Как переименовать неправильно названные страницы


Раньше считалось, что если ошибиться в названии страницы, то придется создавать новую страницу с правильным названием. Но СММщики нашли лазейку, нужно при открытой вики-странице с неправильным названием, в конце адресной строки прописать /market и перейти на новую страницу. Появится кнопка редактирования названия страницы, подробнее способ описан в материале «Как изменить название вики-страницы» 

 

Блок: 7/8 | Кол-во символов: 458
Источник: https://smmplanner.com/blog/polnyj-manual-po-viki-razmetke-vkontakte/

Что такое спойлеры и какова их роль

Спойлеры представляют собой объект с заголовком, наполненный содержанием. Такие объекты могут скрываться и показываться попеременно. Спойлеры необходимы для сокрытия больших объемов информации, полноэкранный вид которых «перегрузит» страницу информацией дополнительного значения.

Примеры спойлеров представлены в таблице ниже.

Поработав в этом направлении неделю-другую с  вики-разметкой, у вас будет собственная !

Напоследок видео-урок найденный на ютубе:


Блок: 7/7 | Кол-во символов: 492
Источник: http://Great-World.ru/wiki-razmetka-vkontakte/

Подытожим

Вики-публикации — мощный инструмент для развития и продвижения сообществ в . 

Чтобы проще было создавать страницы используйте «Исходный код» или расширение VkOpt. 

Изучите учебник по вики-разметке, кроме важных кодов, есть куча других полезных кодов, которые я не использую, а кому-то могут быть полезны. Когда я изучал учебник, у меня постоянно было: «А что так можно было?». 

Вики-страницы можно редактировать. Пользуйтесь этим. 

Вики-страницы нужно seo-оптимизировать. Используйте это. 

 

SMMplanner</u>» href=»https://smmplanner.com/?register» target=»_blank»>Зарегистрируйтесь в SMMplanner и запланируйте посты во

Блок: 8/8 | Кол-во символов: 686
Источник: https://smmplanner.com/blog/polnyj-manual-po-viki-razmetke-vkontakte/



Таблицы

На wiki-страницах их создают с помощью различных кодов. Их можно сделать самостоятельно или найти готовый шаблон. Каждая матрица открывается символами «{|» , а закрывается «|}».

Другие знаки:

  • |- – начало новой строки. Ставится после {|.
  • | – простая ячейка.
  • ! – ячейка с выделенным, центрированным текстом.
  • |+ – заголовок по центру.

Также в построении часто используются теги (всегда прописываются после первого знака):

  • Noborder – отсутствие видимых рамок.
  • Nomargin – увеличивает таблицу на ширину материала.
  • Nopadding – уменьшает отступы в ячейках.
  • Fixed – фиксирует ширину.

Пример.

Блок: 6/7 | Кол-во символов: 598
Источник: https://semantica.in/blog/chto-takoe-viki-razmetka-vkontakte.html

Видео

Для начала нужно загрузить видео в видеозаписи сообщества. После загрузки открыть видео и скопировать из адресной строки его id (выделено жирным).

Обрамляем это квадратными скобками и получаем такой код:

Получаем небольшую картинку со значком ▶play, при нажатии на который разворачивается полноценный видеоплеер. Чтобы видео воспроизводилось на самой странице, разработчики ВК предлагают воспользоваться тегом .

Но здесь мы получаем непропорциональную черную рамку вокруг видео:

13 Видео с черной рамкой

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

14 Видео без черных рамок

Мы получили видео без черных рамок, оно будет воспроизводиться прямо на странице

Блок: 9/13 | Кол-во символов: 696
Источник: http://lead-academy.ru/poleznye-materialy/viki-razmetka-vo-vkontakte-dlya-nachinayushhix/

Что запомнить о вики-разметке

  • Стандартный метод создания вики-страниц кропотливый и не очень удобный. Проще всего создать страницу через приложение «Мобивик», «Исходный код» или «Вики Постер».
  • Меню сообщества нужно сделать таблицей, чтобы оно аккуратно смотрелось на мобильных устройствах.
  • При редактировании вики-страницы в стандартном интерфейсе не стоит переключаться между визуальным режимом редактирования и режимом вики-разметки. Из-за этого может поехать верстка.

Запоминать все теги необязательно, достаточно держать под рукой ссылку на шпаргалку в официальном сообществе вики-разметки .

Блок: 13/13 | Кол-во символов: 596
Источник: http://lead-academy.ru/poleznye-materialy/viki-razmetka-vo-vkontakte-dlya-nachinayushhix/

Кол-во блоков: 25 | Общее кол-во символов: 19523
Количество использованных доноров: 6
Информация по каждому донору:

  1. https://smmplanner.com/blog/polnyj-manual-po-viki-razmetke-vkontakte/: использовано 5 блоков из 8, кол-во символов 4089 (21%)
  2. http://lead-academy.ru/poleznye-materialy/viki-razmetka-vo-vkontakte-dlya-nachinayushhix/: использовано 7 блоков из 13, кол-во символов 8055 (41%)
  3. https://blog.smmbox.com/novichkam/viki-razmetka-vkontakte-dlya-chajnikov.php: использовано 2 блоков из 4, кол-во символов 3581 (18%)
  4. https://semantica.in/blog/chto-takoe-viki-razmetka-vkontakte.html: использовано 2 блоков из 7, кол-во символов 975 (5%)
  5. http://Great-World.ru/wiki-razmetka-vkontakte/: использовано 3 блоков из 7, кол-во символов 1572 (8%)
  6. https://vksetup.ru/page/viki-razmetka-vkontakte.html: использовано 4 блоков из 6, кол-во символов 1251 (6%)


Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.