Популярні записи зі слайдами в сайдбарі без плагіна
Напевно ви помітили у мене в сайдбарі блок «Популярне на блозі», звичайно плагіном там і не пахне, все зроблено засобами самого звичайного HTML.
Це напевно найпростіший спосіб виведення популярних записів на WordPress, але він на мій погляд має ряд плюсів, до яких я повернуся трохи пізніше.
Отже, навіщо взагалі потрібен список популярних записів? Справа в тому, що горезвісний поведінковий фактор все сильніше впливає на позиції сайту в пошуковій видачі і все більше пошукових систем використовують ПФ в своїх алгоритмах.
Блок популярних записів з інтригуючими заголовками, безумовно сприятиме просуванню Вашого проекту в пошуковій видачі.
Так що не зайвим би було допомогти відвідувачу дістатися до найцікавіших, корисних і просто читаються записів вашого ресурсу.
Звичайно існує маса різних плагінів, призначених для виведення популярних записів, як зі слайдами, так і без і за традицією я перерахую деякі з них.
Я розумію, що новачкам буде простіше використовувати один з плагінів, ніж ритися в «незрозумілих» файлах шаблону, але ще раз всіх попереджаю:
Велика кількість плагінів негативно позначиться на швидкості завантаження сторінок Вашого ресурсу!
Мабуть почну урок з самого простого способу виведення популярних записів на WordPress. Поїхали!
Як вивести популярні записи в сайдбарі за допомогою HTML
Дані спосіб можна сміливо назвати ручною роботою, так як вибір статей для блоку проводиться безпосередньо Вами і все посилання проставляються ручками. Але зате є істотні плюси:
Плюс №1. Можливість спочатку зробити мініатюри потрібного розміру, тобто виключити її стиснення, так би мовити, на льоту, про що я писав у статті про висновок блоку схожих записів.
Плюс №2. Можливість використовувати мініатюри, створені CMS WordPress.
Плюс №4. Для посилання можна скласти абсолютно будь-який анкор, відмінний від заголовка статті, що поліпшить анкор-лист проекту.
Плюс №5. Чистий HTML дозволить мінімізувати навантаження на сервер.
Отже, для початку треба визначитися, як буде виглядати наш блок популярних записів. Зрозуміло, що якщо він буде розташовуватися в сайдбарі, то сильно великим його робити не варто. Пропоную два варіанти.
Але ж можна зробити мініатюру посиланням і взагалі обійтися без заголовка?
Можна звичайно, але тоді користувач може не зрозуміти про що той чи інший матеріал і переходу не буде. Але якщо дати волю фантазії, то заголовок можна придумати дуже навіть заманливий, так би мовити, зіграти на людському цікавості.
Як Ви зрозуміли, ми створили найпростішу таблицю, шириною в одну клітинку і висотою в п'ять осередків.
Тепер нам треба в кожну клітинку помістити мініатюру і заголовок. Виглядати це повинно так:
Виникає резонне питання, а навіщо взагалі потрібна таблиця?
Справа в тому, що без таблиці зображення і заголовки будуть налазить один на одного і взагалі буде творитися чортзна-що. Ось наочна ілюстрація:
За допомогою таблиці ми встановлюємо невидимі кордони, за які вже нічого «виповзати» не буде.
Як бачите, таблиця успішно розставила мініатюри, але заголовки все одно виглядають не так як треба.
Щоб виправити стан справ, задамо клас для нашої таблиці. До тегу table дописуємо наступне:
Тепер у нас є можливість застосувати стилі і довести зовнішній вигляд блоку популярних записів до розуму.
Ну ось зовсім інша справа:
Ще раз хочу повторити:
Звичайно, для блоку популярних записів можна використовувати мініатюри, які WordPress створює автоматично, але тоді треба правильно вказати шляхи. Наприклад, ось таку назву у мініатюри з мого блогу, створеної WordPress з зображення для статті - Символи яких немає на клавіатурі.
Саме цифри (розміри) 150х111 відрізняють назву мініатюри від назви основного зображення. У вас звичайно можуть бути інші цифри. Детально про те, як налаштувати розміри мініатюр при їх автоматичному створенні на WordPress, ви можете почитати тут.
У моєму випадки шлях до мініатюри буде виглядати так:
Створюємо таблицю з такою структурою:
Дана таблиця в ширину має дві осередку, а в висоту п'ять осередків.
Тепер в усі осередки вставляємо мініатюри і заголовки, точно також, як ми це робили в першому варіанті. Єдине, що я б хотів порадити - це не робіть по-другому варіанті занадто довгих заголовків. наприклад:
По-моєму набагато краще, коли популярні записи виглядають так:
Ось в принципі і все. Правда ж просто? Чи залишиться скопіювати код і вставити його в віджет, а краще прямо в файл sidebar.php, щоб не гальмувати завантаження сторінок.
У цьому випадки не обійтися без відомого і для багатьох незрозумілого мови PHP.
Тепер давайте розберемося, що в коді можна міняти.
Даний відрізок коду виводить зображення і заголовки постів. Як бачите я тут також використовував таблицю, щоб елементи не розбігалися. Що ми тут можемо змінити ...
Хто не хоче, щоб посилання відкривалися в новому вікні, видаліть наступну ділянку коду:
Для тих, кому необхідно підкоригувати розмір мініатюр, треба замінити:
Де 140,100 - бажаний розмір мініатюри.
Важливо! При зміні розмірів мініатюр, створюється додаткове навантаження на сервер і як наслідок, сповільнюється швидкість завантаження сторінок
Решта чіпати не треба.
Стилі для блоку можна застосувати ті ж, що я привів вище. Ось що у нас повинно вийти:
Важливо! За замовчуванням в WordPress PHP-коди не виконуються в віджети. Ситуацію виправить спеціальна функція.
Тепер нам треба викликати лічильник в потрібному місці. Для цього в файл single.php шукаємо щось схоже на таку сходинку:
У самий кінець цього рядка додаємо код виклику лічильника:
Має вийти приблизно наступне:
Це ще не все! Тепер нам треба вивести популярні записи в сайдбарі. Відкриваємо файл sidebar.php і в потрібне місце вставляємо такий код:
У цьому коді варто звернути Вашу увагу на одну ділянку:
Де цифра 5 - це кількість виведених записів в блоці.
Стилі залишаються ті ж.
Ось як у нас повинно вийти:
C повагою, Віталій Кирилов
Цікаве на блозі
Підсвічування коду на основі SyntaxHighlighter
Релевантність сторінок. Визначення релевантності тексту
Виконання PHP-коду в віджети WordPress без плагіна
Перенесення сайту з Денвера на хостинг. частина №4
Правильна структура заголовків сайту. HTML теги h1 - h6 та їх вплив на просування
ось і я про те ж) завдання складне і мороки багато. Не знаю, чи варта гра свічок, щоб возитися з нею. Шкода, що до сих пір ніхто не виклав працюючий код.