FANDOM


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

Загальні правила Редагувати

Незважаючи на те, що Головна сторінка може виглядати по-різному, є загальні принципи, дотримуючись яких Ви не помилитеся при наповненні Головної сторінки:

  • Читабельність — потрібно дотримуватися балансу між кількістю тексту і кількістю зображень. Не розміщуйте забагато тексту на Головній сторінці, тому що ця сторінка не просто ще одна стаття вашої вікі.
  • Опис — обов’язково розкажіть, про що ваша вікі, щоб користувач відразу чітко і ясно уявляв собі, куди він потрапив.
  • Дружній тон — продемонструйте, що тут завжди раді новим читачам та користувачам.
  • Навігація — дуже важливий елемент Головної сторінки. Його можна зробити за допомогою посилань, зображень, слайдера. Але якщо Ви проігноруєте цей елемент, то користувачі просто «зависнуть» на Головній сторінці і не підуть всередину вікі.
  • Оновлення — Головна сторінка не повинна бути статичною. Оновлюйте її періодично, щоб користувачі бачили, що вікі активна і готова порадувати читачів новим контентом.

Ви можете наочно подивитися, як ці правила працюють для {{#NewWindowLink:http://ru.community.wikia.com/index.php%7CЗаголовною сторінки Вики Спільноти}}. Тут Ви бачите дружнє вітання, якісний опис вікі, мінімальна кількість тексту, кілька навігаційних блоків (по вікіпроектам, по новинам, по довідковими статтям), які ведуть на найважливіші розділи вікі, елементи, які регулярно оновлюються (список блогів, вікі-місяця, активні вікі, теми на форумі). У підсумку отримуємо якісну і інформативну Головну сторінку, на яку приємно заходити.

Головна сторінка крок за кроком Редагувати

Крок 1: Колонки Редагувати

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

Якщо Ваша Вікі була створена недавно, то в неї, покищо, стандартна Головна сторінка, на якій Вас вже чекають підказки. В першу чергу, це теги колонок для Головної сторінки. З їх допомогою можна легко і просто надати Головній сторінці стрункий вигляд, не виміряючи вручну ширину окремих розділів. Теги колонок створюють на Головній сторінці дві колонки: ліва має динамічний розмір і змінює свою ширину залежно від роздільної здатності екрану користувача (мінімальний розмір колонки-700рх), права має стандартну ширину в 300рх. Весь вміст колонок Вам потрібно розмістити між тегами, як зазначено нижче. Пам’ятайте, що ці теги вказуються один раз. Не потрібно багато разів повторювати їх на сторінці.

<Mainpage-leftcolumn-start />
Вміст лівої колонки
<Mainpage-endcolumn />
<Mainpage-rightcolumn-start />
Вміст правої колонки
<Mainpage-endcolumn />

Крок 2: Оформлення тексту тегами Редагувати

Довідка:HTML містить список всіх підтримуваних тегів Якщо Ви хоча б раз заглядали в код Головної сторінки топових вікіпроектов, Ви напевно могли бачити теги span і div, а також br. Тег div використовується частіше інших, бо дозволяє розбивати текст, чи інший вміст, на блоки. Тег br застосовується для примусового переносу рядка. На перший погляд використовувана конструкція виглядає досить складно, розберемо її на прикладі невеликого привітального повідомлення для вікі.
Код
<Div style="border:4px solid #3A3A3A; background:#FFFFFF; text-align:center;
font-size:150%; color:#3A3A3A">'''Ласкаво просимо на<br />Тест Вікі!'''</div>
Результат
Ласкаво просимо на
Тест Вікі!


Опис
  • Div-головний тег, чий стиль впливає на зовнішній вигляд вмісту.
    Зверніть увагу, на його парність: <div> ставиться на початку рядків, які треба відформатувати, </div> (з косою рискою)-наприкінці рядка.
  • Border-малює рамку (в даному випадку ширина лінії рамки становить 4 пікселя)
    • Solid-параметр вказує, що рамка буде суцільною лінією; далі вказано колір рамки(Детальніше див. Довідка:Колір)
    • Background-відповідає за фоновий колір (в даному випадку червоний)
  • Text-align-відповідає за вирівнювання тексту (в даному випадку по центру)
  • Font-size-вказує розмір шрифту (в даному випадку 150 %, тобто на 50 % більші, ніж стандартний шрифт сторінки)
  • Color-вказує колір тексту (в даному випадку білий)
  • Br-переміщує слова «Тест Вікі!» На другий рядок

Аналогічний код можна використовувати для створення заголовків розділів, що ми розглянемо далі.

Пошукова оптимізація Редагувати

Не всі адміністратори знають, що Головна сторінка є головною «їжею» для {{#NewWindowLink:http://ru.community.wikia.com/index.php? Блог користувача:Kuzura/Що потрібно пошуковим роботам|пошукових ботів}}. Саме Головна сторінка отримує пріоритет в результатах пошуку вGoogleта інших пошукових системах. Тому дуже важливо розміщувати на Головній сторінці ключові слова та ключові посилання. Це можуть бути назви та імена по темі вики, посилання на сторінки персонажів, сезони серіалу, відеоігри та ін. Пам’ятайте, що індексація сторінки починається згори-розміщуйте там найбільш важливі слова. Намагайтеся не додавати два і більше однакових посилань, так як це зменшує рейтинг посилання.

Як приклад Головної сторінки, яка добре оптимізована для пошукових ботів, зверніть увагу на {{#NewWindowLink:http://ru.masseffect.wikia.com/index.php%7CMass Effect Wiki}}. Навігаційне меню цієї вікі, яке знаходиться відразу після привітання, намагається охопити всі можливі запити користувачів по темі вікі, а тільки потім слідують новинні блоги з менш важливою інформацією для пошукових роботів.

Крок 3: Навігація Редагувати

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

Код
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Зміст вікі'''</div>
{| Style="width: 100%"
|
*[[Відеоігри]]
**[[Гра 1]]
**[[Гра 2]]
**[[Гра 3]]
|
*[[Персонажі]]
**[[Персонаж 1]]
**[[Персонаж 2]]
**[[Персонаж 3]]
|
*[[Зброя]]
**[[Зброя 1]]
**[[Зброя 2]]
**[[Зброя 3]]
|}
Результат
Зміст вікі


  • Відеоігри
    • Гра 1
    • Гра 2
    • Гра 3
  • Персонажі
    • Персонаж 1
    • Персонаж 2
    • Персонаж 3
  • Зброя
    • Зброя 1
    • Зброя 2
    • Зброя 3


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

Код
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Навігація'''</div>
<Gallery orientation="landscape" widths="150" position="center" spacing="small" navigation="true">
TES Obvilion.jpg|link=Ігри|[[Ігри]]
TES Skyrim.jpg|link=Противники|[[Противники]]
TES online слайдер.jpg|link=Персонажі|[[Персонажі]]
</Gallery>
Результат
Навігація

Оновлюваний контент Редагувати

Інтерактивні та автоматично оновлювані розділи-це простий спосіб додати на Головну сторінку свіжої інформації без необхідності оновлювати сторінку вручну. Для цього можна використовувати:

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

Крок 4: Права колонка Редагувати

У праву колонку Головної сторінки можна помістити другорядні елементи, які менш важливі для Головної сторінки. У нашому прикладі там розмістяться список блогів та опитування. Подивіться, як теги для них виглядають у вихідному коді, і не забувайте про заголовки.

Код
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Блоги'''</div>
<Bloglist count=2 timestamp=true order=date>
<Category>Новини</category>
</Bloglist>
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Опитування'''</div>
<Poll>
Тестове опитування
Тест 1
Тест 2
</Poll>
Результат
Заглавная пример правой колонки
Головна приклад правої колонки

Як варіант

Додаткові елементи Редагувати

Inputbox Редагувати

Див. статтю Довідка:Inputbox.

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

Відео Редагувати

Див. статтю Довідка:Відео.

{{#NewWindowLink:Http://video.wikia.com/index.php|Відео Бібліотека Фандом}} надає всім вікіпроектам якісне і ліцензійне відео. Ви також можете самі завантажити відео з YouTube. Присутність відеоролика на Головній сторінці-це ще один інтерактивний елемент, який може привернути увагу до Вікі. Краще розміщувати відео в лівій колонці, щоб можна було подивитися відео в хорошій якості, а не вдивлятися в дрібні деталі, якщо розмістити відеоролик у вузькій правій колонці.

Соціальні елементи Редагувати

Див. статтю Довідка:Міжмовні посилання.

Обмін посиланнями з іншими вікіпроектамі і групами в соціальних мережах-відмінний спосіб залучити нових читачів і користувачів або показати місця, де є ще активні користувачи Вікі. На Головній сторінці можна виділити спеціальний розділ для цього, помістивши туди віджети соціальних мереж та посилання на дружні вікі.

Найпростішим способом співпраці є міжмовні посилання, які пов’язують між собою вікі на різних мовах. Чому вони знаходяться внизу сторінки? Тому що, як вже говорилося вище, пріоритетом у пошукових ботів повинна бути Ваша Вікі, а не інші, нехай дружні, вікіпроекти та групи в соціальних мережах.

Ще Редагувати

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

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

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

Приклади Редагувати

Приклад № 1 Редагувати

Головна сторінка з заголовками, слайдером, відео, списком блогів і опитуванням.



Код
<Mainpage-leftcolumn-start />
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Ласкаво просимо на<br />Тест Вікі!'''</div>

Це Тест Вікі-для тестування інструментів Фандом, вікі-тексту, шаблонів та іншого російською мовою. Кожен користувач може створювати тут будь-які сторінки на свій розсуд, а також [[Обговорення користувача:Kuzura|запросити права адміністратора і/або бюрократа]] для тестування їхніх можливостей.

<Gallery type="slider">
Ізображеніе1.jpg|Гра 1|link=Гра 1
Ізображеніе2.jpeg|Гра 2|link=Гра 2
</Gallery>
<br />
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Відео'''</div>
[[Файл:Assassin's Creed III|thumb|center|600 px]]
<Mainpage-endcolumn />
<Mainpage-rightcolumn-start />
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Блоги'''</div>
<Bloglist count=2 timestamp=true order=date>
<Category>Записи в блозі</category>
</Bloglist>
<Div style="border:4px solid # FFA500; background:# FF0000; text-align:center; font-size:150%; color:#FFFFFF">'''Опитування'''</div>
<Poll>
Тестове опитування
Тест 1
Тест 2
</Poll>
<Mainpage-endcolumn />
Результат

Приклад № 2 Редагувати

Головна сторінка з рамками (border-radius відповідає за радіус кутів рамки, margin-bottom створює розрив між рамками), навігацією, обраною статтею, чатом і форумом.



Код
<Mainpage-leftcolumn-start />
<Div style="border:4px solid # FF0000; border-radius:10px; text-align:center; font-size:110%; color:# 000000; margin-bottom:5px">
<Div style="font-size:150%; color:# FF0000">'''Ласкаво просимо на Тест Вікі!'''</Div><br />Це Тест Вікі-для тестування інструментів Фандом, вікі-тексту , шаблонів та іншого російською мовою. Кожен користувач може створювати тут будь-які сторінки на свій розсуд, а також [[Обговорення користувача:Kuzura|запросити права адміністратора і/або бюрократа]] для тестування їхніх можливостей.
</Div>
<Div style="border:4px solid # FF0000; border-radius:10px; text-align:center; font-size:110%; color:# 000000; margin-bottom:5px">
<Div style="font-size:150%; color:# FF0000">'''Навігація'''</div>
{| Style="width: 100%"
|
* Відеоігри
** Гра 1
** Гра 2
** Гра 3
|
* Персонажі
** Персонаж 1
** Персонаж 2
** Персонаж 3
|
* Зброя
** Зброя 1
** Зброя 2
** Зброя 3
|}
</Div>
<Div style="border:4px solid # FF0000; border-radius:10px; text-align:center; font-size:110%; color:# 000000; margin-bottom:5px">
<Div style="font-size:150%; color:# FF0000">'''Обрана стаття'''</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [[Lorem ipsum|... читати далі]]</div>
<Div style="border:4px solid # FF0000; border-radius:10px; text-align:center; font-size:110%; color:# 000000; margin-bottom:5px">
<Div style="font-size:150%; color:# FF0000">'''Відео'''</div>[[Файл:News Assassin's Creed III Achievements Leak|thumb|center|600 px]]
</Div>
<Mainpage-endcolumn />
<Mainpage-rightcolumn-start />
<Div style="border:4px solid # FF0000; border-radius:10px; text-align:center; font-size:110%; color:# 000000; margin-bottom:5px">
<Div style="font-size:150%; color:# FF0000">'''Чат'''</div><chat/></div>
<Div style="border:4px solid # FF0000; border-radius:10px; text-align:center; font-size:110%; color:# 000000; margin-bottom:5px">
<Div style="font-size:150%; color:# FF0000">'''Форум'''</div><wikiaforum/></div>
<Mainpage-endcolumn />
Результат

Див. також Редагувати

Community content is available under CC-BY-SA unless otherwise noted.