Статьи

Як зробити зміст у статті блогу на 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 на більше значення ми збільшимо ширину бордюру. В - Код Кольори бордюру Г і Д - Впливають на відстань від краю рамки до тексту і розміри.

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

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

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

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

Новости

Как создать фото из видео
Кризис заставляет искать дополнительные источники дохода. Одним из таких источников может стать торговля на валютном рынке Форекс. Но чтобы не потерять свои деньги необходимо работать с надежным брокером.

Как оформить группу в вконтакте видео
Дано хотел свой магазин в вк, но не знал с чего начать его делать. Так как хотелось не банальный магазин с кучей ссылок и фото, а красиво оформленный. С меню, с аватаркой. После просмотра видео создал

Как оформить диск малыш от рождения до года из фото и видео
Оформить диск "Малыш от рождения до года" из фото и видео можно совершенно разными способами! Кто-то для достижения данной цели идет на шоу-таланты, кто-то пользуется услугами профессионалов, а кто-то