Як зробити зміст у статті блогу на wordpress без плагінів

1. Робимо зміст в статті сайту на Вордпресс
2. Як зробити якір
3. Як прикріпити якір до змісту
4. Змінюємо дизайн блоку «Зміст»
5. Як змінити фон і розміри

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

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

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

Що б було все зрозуміло, буду показувати на прикладі однієї своєї статті в якій вирішив створити невеликий вміст. А ось зміст для цієї замітки.

Швидка навігація по статті

Робимо зміст в статті сайту на Вордпресс

Для загального уявлення: Кожному заголовку статті на який хочемо відправляти читачів з блоку «Зміст» присвоюється своя посилання, так званий якір. У самому змісті також, за кожним відповідним заголовку пропозицією закріплюється потрібне посилання.

Потім все можна оформити в рамку, виділену відповідним кольором.

Як зробити якір

В текстовому редакторі WordPress виділяємо потрібний заголовок, знаходимо на панелі значок «Якір» (дивіться скріни) - тиснемо на нього. У новому, вікні довільно прописуємо назву якоря, це і буде наша посилання, обов'язково копіюємо її інакше потім доведеться переходити в HTML редактор «Текст» і знаходити її там.

Звичайно не забуваємо після копіювання натиснути ОК. В результаті цих дій перед заданим розділом з'являється символ якоря, а в буфері обміну комп'ютера скопійована посилання.

Отже, якір для одного з розділів статті готовий, тепер його потрібно прив'язати до відповідної фразі в блоці «Зміст»

Як прикріпити якір до змісту

В принципі тут все просто - Виділяємо потрібну фразу «Змісту» і вставляємо як звичайне посилання вміст з буфера обміну (Ctrl + V) Є лише один важливий момент - Перед посиланням потрібно прописати символ решітки (Shift + 3) при англійській розкладці.

Подібним чином робимо з іншими потрібними нам частинами змісту. Не забуваємо зберегти. Після цього ми побачимо, що фрази «Змісту» стали активними посиланнями провідними до потрібного абзацу статті.

Ось і все, вже це буде відмінно працювати, можна залишити так. Бажано лише виділити зміст від решти тексту інструментами редактора.

Але що б виділити його особливим чином потрібно ще трохи попрацювати над дизайном нашого блоку.

Змінюємо дизайн блоку «Зміст»

Для цього нам знадобиться перейти з візуального в HTML редактор натиснувши кнопку «Текст». Тут потрібно знайти створене меню.

Тепер знадобиться ось такий, вже готовий HTML код. Я впізнав його від Дениса Повага про який трохи розповідав на ось цій сторінці. Цей код виділить наше «Зміст» рамкою з жовтим фоном. Просто скопіюйте його і застосовуйте.

<Div style = "background: # ffffa0; border: 1px solid # e5e597; padding: 8px 10px; font-size: 16px; "> тут пункти змісту </ div> (УВАГА! ВАЖЛИВО! Помітив, що в двох місцях, лапки в коді, після публікації статті, самі підміняються на трикутні дужки. Якщо будете користуватися запропонованим кодом то потрібно внести правку . Повинно бути так, перед «background ...... .. і після 16px;" трикутні дужки які ви бачите, потрібно виправити на лапки. Дивіться наступне зображення, там все вірно! (потрібно просто замінити дужки на лапки!)

Отже: потрібно скопіювати цей код, вставити його в свою запис, внести правку, а текст вашого змісту, разом з усіма відносяться до нього атрибутами кодів, помістити перед закривається тегом </ div> в цьому коді.

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

Чи можна змінити колір фону, товщину бордюру, розмір? Легко! Давайте звернемо увагу на інформацію в коді, змінивши яку можемо коригувати дизайн за своїм бажанням.

Як змінити фон і розміри

(A) - background: # ffffa0; - Це колір фону змінивши значення # ffffa0 ми змінюємо колір. Існують сайти для візуального підбору коду палітри кольору. Наприклад ось цей Вибираємо потрібний колір, копіюємо отриманий код і вставляємо його замість значення # ffffa0 (Важливо дотримуватися всі прогалини, крапки з комою і т.д.) підміняється тільки значення кольору - Оновлюємо сторінку і милуємося новою палітрою меню.

Подібним чином підміняємо значення в інших пунктах. Вони означають: Б - замінивши 1 на більше значення ми збільшимо ширину бордюру. В - Код Кольори бордюру Г і Д - Впливають на відстань від краю рамки до тексту і розміри.

Наприклад можна зробити ось так:

Але мені так звичайно не потрібно, це лише для прикладу.

Ось таким чином можна створити «Зміст» статті і змінити його на свій розсуд, без застосування плагінів. Описував довго і від цього може здатися занадто складним цю справу, але насправді все просто. Один раз спробувати і все легко запам'ятати.