Відкрити меню

Як вивести перелік схожих статей з картинками після посту без використання плагіна

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

09-01-2016

 

Реалізувати все це дуже і дуже просто, але не забуваємо робити копії файлів ще до їх зміни, щоб в разі чого можна було все повернути назад. Розпочинаємо?

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

09-01-2016-2

Що нам для потрібно? Першим ділом – нам потрібно відкрити в Notepad++ файл шаблону single.php, який відповідає за вивід повного тексту нашої публікації. В цьому файлі шукаємо наступний рядок коду:

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

Значить ми, одразу після цього рядочка (або нижче, залежно від потреби) ставимо наступний шматок коду:

Тут я Вам опишу буквально два значення, які Ви можете змінити. Перше:

Замість “Також Вам може бути цікаво:” Ви ставите свій заклик чи заголовок, який Вам підходить, а також можете змінити значення вирівнювання align=”left” на align=”center”, тобто не ліворуч, а по центру.

А ще в рядочку ‘showposts’=>4, Ви можете замінити кількість схожих статей, що будуть виводитись. Зараз стоїть значення 4, Ви ж можете замінити його на 5, 6 чи 7 … як Вам буде потрібно.

Після цього ви цей код вставляєте у файл single.php. В результаті у Вас повинно вийти наступне:

09-01-2016-3

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

Для цього ми беремо файл стилів style.css і в будь-яке місце, я завжди всі свої зміни ставлю в самий кінець, прописуємо наступний стиль:

Що можна змінити тут? В першому рядочку:

Ви можете замінити значення margin:20px 0 30px 0; – де 20 – це відступ зверху, а 30 – це відступ знизу.

Трішки нижче Ви бачите значення height: 280px; – це фіксована висота. Ви можете це значення видалити взагалі, але тоді висота блоків буде підганятись під кількість тексту. Тобто, якщо у Вас заголовки до статей різної довжини, то висота блоків буде різною, а виглядає це не дуже гарно.

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

Далі йде рядок:

Тут послідовно 1рх – це товщина рамки навколо блоків, solid -це тип рамки, а #bbb – це колір рамки. Тут також можете значення поміняти під свої.

Ще нижче є значення width: 160px; – це ширина блоку, змінюйте на свою при потребі, якщо блоки Вам потрібні будуть ширші чи вужчі.

В самому низу є стиль:

Де background:#EFEFEF; – це колір фону блоків при наведенні мишки. Тут при необхідності змінюйте значення #EFEFEF, а border:1px solid #bbb; – це властивості рамки при наведенні мишки, змінюєте також по аналогії, яка була описана трішки вище.

Вставляєте цей стиль, змінений або ні, в самий кінець файлу style.css. В результаті у Вас виходить наступне:

09-01-2016-4

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

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

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

Ось так все просто.

Бажаю вам гарного вечора, шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 4, середній: 4,50 з 5)
Loading...
Обговорення: 9 коментарів
  1. Саша сказав:

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

    Відповіcти
  2. Игорь сказав:

    Здравствуйте, Олег!
    А сами вы, что используете для вывода похожих сообщений?

    Відповіcти
    1. Олег Волощук сказав:

      День добрий. Те що в статті описано, те і використовую 🙂

      Відповіcти
      1. Игорь сказав:

        Выше в комментарии написано, что в мобильной версии выглядит некорректно, я зашел на ваш сайт и у вас все отображается нормально. Спрашиваю, потому что не знаю пробовать поставить себе или нет?

        Відповіcти
        1. Олег Волощук сказав:

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

          Відповіcти
          1. Игорь сказав:

            Эх, к сожалению я в этом ничего не понимаю

            Відповіcти
            1. Олег Волощук сказав:

              Ну я допоможу розібратись, якщо надумаєте реалізувати – скажіть, я підтримаю в чому буде потрібно.

              Відповіcти
              1. Игорь сказав:

                Я установил у себя на этом сайте http://lechu-diabet.ru/priznaki-i-simptomy/priznaki-saharnogo-diabeta.html стили прописал как вы советовали, но в мобильной версии показывает некорректно. Шаблон у меня тоже от Goodwina как и у вас, только emulator.

                Відповіcти
                1. Олег Волощук сказав:

                  Відписав Вам на пошту, перевірте.

                  Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google