Здрастуйте, шановні читачі блогу . Сьогодні хочу розповісти про те, як зараз у мене реалізовані хлібні крихти, що допомагають читачеві зрозуміти, всередині якої структури знаходиться дана стаття. Напевно, вони в першу чергу необхідні проектам зі складною системою вкладених категорій (рубрик), але особисто мені вони сподобалися чисто зовні.
Є і оптимизаторская підґрунтя у використанні крихт — вони є елементом внутрішньої перелінковки, про яку я писав не так давно. Інші справа, що статична вага вони наганяють на рубрики головну сторінку, що особисто мені зовсім не потрібно. Однак, у мене вже був період, коли крихти стояли досить тривалий час (більше року, і це збіглося з періодом найбільшого зростання відвідуваності).
Навіщо крихти і чому без плагіна?
Реалізовані вони тоді були на основі плагіна Breadcrumb NavXT — досить таки функціонального, але з досить бідними можливостями візуального оформлення крихт.
Звичайно ж, можна було б використовувати і стилі для створення красивості, але тоді я не дуже то дуже з ним дружив. Тільки написавши серію уроків по CSS стилів, став і сам в цьому трохи розбиратися. Вийшло як в анекдоті про обуреного на нетямущість студентів викладача, який спересердя заявив: «Три рази пояснив! Сам зрозумів! А ви…».
Ось, потім крихти я прибрав і вже навіть точно не пам’ятаю чому, але точно не з міркувань оптимізації. Взагалі, якщо спиратися на цю і цю мої статті, то крихти будуть зайвими в тонкій справі створення ідеальної схеми перелінковки. Але, тим не менш, варто мені вірити після попадання в опалу.
Теорій багато з даного питання. Якщо в згаданих статтях я намагався мудрувати і шукати істину у високих матеріях (аякс, правильна схеми перелінковки) то ось цей товариш, наприклад, розповідає як оптимізувати wordpress в тезах, без деталей, але цілком зрозуміло. Треба бути простіше і люди до тебе потягнуться, а за ними і пошуковики, можливо. Гаразд повернемо до крихт.
Зробити їх зовсім не складно і плагінів ставити не доведеться. В цьому є свій плюс, бо один кривоватый плагін може нагнути досить потужний сервер. У мене, наприклад, схожі проблеми виникли після установки описаного трохи раніше плагіна внутрішньої перелінковки upPrev (виїжджають панелька у правій області, яка з’являється на моєму блозі при прокрутки його сторінки до початку коментарів).
Я, як ви пам’ятаєте (щоправда, не зрозуміло, навіщо вам це пам’ятати, але все ж), зараз сиджу на VPS c Parallels від Инфобокса. Чудова і недорога штука, але от трохи більше місяця тому в мене з’явилося відчуття дежавю — ніби мене повернули до звичайного віртуального хостингу.
Хвилеподібно накочували моторошні гальма, що досить часто відбувається на звичайному хостингу, якщо хтось з твого ж сервера починає віджиратись загальні ресурси не злічити або ддосят кого-небудь з твоїх віртуальних сусідів.
Почав писати гнівні листи в техпідтримку, вимагати сатисфакції і потрясати посиланням на згадану трохи вище статтю про їх Parallels, який я там хвалив, а він он який бридкий виявився.
Мені відповідали (ввічливо, але досить переконливо), що у мене навантаження йде дуже висока. Я їм відповідав, що вона в мене з початку року в рази знизилася (маючи на увазі відвідуваність і кількість переглядів). Ну, загалом, вони мене переконали подумати в сторону того, а що я, власне, останнім часом таке з блогом робив, що могло так недобре відбитися на його роботі.
В силу виникли складнощі з пошуковим трафіків я думав переважно про все повернути назад, ну або вдавався до меланхолії, згадуючи славні деньки до обвалу. Загалом, насилу пригадав, що приблизно в цей же час я і ставив цей плагін upPrev. Поліз в його налаштування і правильно прочитав фразу на вкладці «Кеш»:
Використання на великих сайтах (більше 1000 повідомлень) може призвести до падіння сайту
Точніше, я її просто не дочитав до кінця в момент установки і поставив галочку на автоматі, вирішивши, що кеш це взагалі чудово, а у відносини Вордпресс, так взагалі повний цимус (згадайте мого спасителя Hyper Cache, описаного тут і дозволяє платити за хостинг в рази менше). Загалом, кеш в upPrev відключив і гальма зникли.
Звичайно ж, цей приклад не свідчить однозначно про шкоду плагінів, але вони можу бути причиною гальм (може бути навіть на початку і непомітних). Загалом, якщо хто-то upPrev теж ставив, то ви знаєте що робити, якщо хостер повідомить вам про перевищення допустимої навантаження або ви самі це відчуєте.
Власне, тому, по можливості, намагаюся обходитися мінімальним числом плагінів. Тим більше, що досить цікаво використовувати різні функції, бо сам собі здаєшся розумнішими, ніж є насправді. Особливо це здорово, коли PHP ти знаєш, а точніше зовсім не знаєш. Ось тоді прям таки справжній ребус виходить, як, наприклад, той, що був описаний мною тут.
Ну, і крім всього іншого дані хлібні крихти виробляють дуже приємне візуальне враження:
А для підгону їх під дизайн свого блогу у вас буде вибір з шести колірних гам.
Реалізація красивих хлібних крихт для Вордпресс
Для початку потрібно буде підключиться до свого сервера (віртуального хостингу) по ФТП. Наприклад, з допомогою описаної тут Файлзилы. Потім заходите в папку з вашої поточної теми оформлення, яка зазвичай живе по такому шляху:
/wp-content/themes/її назва
Взагалі, теми Вордпресс я описував тут, а точніше розповідав з яких файлів (шаблонів) вони можуть складатися і за які фрагменти макета блогу вони відповідають. Однак, крім чисто дизайнерських рішень в папці з темою ви знайдете файл functions.php (якщо його немає, то просто створіть його).
Він служить для прописування усіляких функцій або фільтрів, які дозволяють реалізувати багато чого корисного не копаючись безпосередньо у файли движка, зміни в яких після оновлення версії Вордпресс можуть бути втрачені. А все, що внесете в functions.php буде жити аж до зміни вами теми оформлення.
Отже, додаєте в цей расчудесный файл наступну функцію:
//Breadcrumb як у Google
function the_breadcrumb() {
if ( !is_home() ) {
echo’
- ‘;
echo «. bloginfo(‘name’) . «;
echo « - ‘.$output.’
- ‘;the_title();echo ‘
- ‘;the_title();echo ‘
«;
}
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= ‘
‘.$cat->name.’‘;
echo ‘
‘;
}
if(is_single())
{
echo ‘
‘;
}
if(is_page())
{
echo ‘
‘;
}
echo «
«;
}
Тільки не впихайте її всередину вже існуючої функції. Напевно, найпростіше знайти слово function і вставити наведену вище конструкцію відразу перед нею (хоча, краще буде розділити переносом рядка для наочності).
Це каркас. Тепер потрібно буде додати до нього ще трохи стилів. Спочатку вам бажано визначитися з расцветочкой, але можна буде її відкоригувати і по ходу.
В архіві буде шість графічних файлів у форматі PNG, кожен з яких представляє з себе CSS спрайт з смужками вибраного вами відтінку і різними ступенями освітлення:
Одна з смужок буде використовуватися за замовчуванням, інша буде показана при підведенні до неї курсор миші, а третя — при клацанні по посиланню з хлібних крихт. Все це визначається, природно, в стилях CSS, які ми зараз і пропишемо.
Але спочатку розпакуйте архів з фонами і залийте їх в папку з вашою темою у наявну там директорію:
/wp-content/themes/папка теми/images
Тепер відкрийте на редагування (краще не в адмінці Вордпресс, а підключившись до сайту по ФТП) файл зі стилями style.css з папки з вашою темою оформлення. Можна прямо в його кінець додати наступний код:
#breadcrumb {display:block;float:none;margin:0 0 40px 0;font-weight:600;}
#breadcrumb ul {font-family : Helvetica, sans-serif;list-style : none;}
.crumbs {display : block;}
.crumbs li.first {padding-left : 8px;}
.crumbs li a, .crumbs li a:link, .crumbs li a:visited {color : #616d7e;display : block;float : left;font-size : 11px;margin-left : -13px;padding : 7px 17px 11px 25px;position : relative;text-decoration : none;}
.crumbs li a {background-image: url(images/bg-crumbs-blue.png);background-position : 100% 0%;background-repeat : no-repeat;position : relative;}
.crumbs li a:hover {background-position : 100% -48px;color : #333;cursor : pointer;}
.crumbs li a:active {background-position : 100% -96px;color : #333;}
.crumbs li.first a span {border-left : 1px solid #d9d9d9;height : 29px;left : 0;position : absolute;top : 0;width : 3px;}
У рядку background-image: url (images/bg-crumbs-blue.png) ви будете вільні змінити назву графічного файлу фону на той, чий колір найбільше підходить дизайну вашого блогу. Про те, як працює background в CSS, читайте тут, а так само про всі його можливі варіації (color, position, image, repeat, attachment). Насправді жах, як цікаво, бо відкриває масу можливостей.
А так само про display читайте тут, про font тут, а про атрибути hover, active і first — тут. Теми цікаві, але якщо в CSS ви новачок, то краще буде починати спочатку.
Висновок крихт в постах Вордпресс і їх невеликий тюнінг
Власне, базу ми підготували і тепер залишилося тільки визначитися, де саме наші хлібні крихти будуть видні відвідувачам. Очевидно, що на головній вони будуть зайвими. Особисто я вирішив їх виводити тільки в постах, а значить нам треба буде додати код їх виклику в той файл (шаблон) вашої теми оформлення, який за це відповідає.
В більшості випадків це буде файл single.php але можливо, що у вас замість нього працює index.php (див. вище посилання на статтю про пристрій тим Вордпресс). Тоді для виведення хлібних крихт тільки в постах, вам доведеться створити файл single.php, скопіювавши в нього вміст index.php, а потім додавши код виклику крихт тільки в single.
Він (код) буде виглядати так:
Я не довго думаючи запхав його в самому початку, відразу після завантаження шапки блогу:
Власне, на блозі крихти прорізалися, але поблукавши по сторінкам я виявив один неприємний момент — деякі заголовки моїх статей виявлялися довший, ніж ширина графічної підкладки. Буковки вилазили на її межі і було не айс.
Можна було б, звичайно, подовжити в графічному редакторі (хоча б в онлайновому Фотошопі, описаному тут) смужки підкладки, але це було б занадто просто, а ми не шукаємо легких шляхів. Або, навпаки.
Загалом, я трохи скоротив кількість символів (замінив у коді the_title () на trim_title_chars (60, ‘…’), яке відображається в посиланні на поточний пост, бо назви у мене занадто довгі і заготівлі підкладок просто не влазять:
function the_breadcrumb() {
…
if(is_single())
{
echo ‘
‘;
…
}
Ось, але для цього в наш багатостраждальний файл functions.php довелося додати ще одну функцію:
function trim_title_chars($count, $after) {
$title = get_the_title();
if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count);
else $after = «;
echo $title . $after;
}
Чудова штука і може скрізь, де вам знадобиться, замінити the_title () на trim_title_chars (60, ‘…’). Наприклад, у мене це реалізовано в кнопці додати в Твіттер. Природно, що цифра 60 означає кількість відображуваних символів Тайтал і ви можете його замінити на потрібне вам.
Але потім мені не сподобалося, що слова обрізаються посередині або ще якось негарно, тому я в підсумку замінив trim_title_chars (60, ‘…’) на trim_title_words (5, ‘…’). Здогадайтеся — чого там 5? Ну, очевидно, що слів, а далі буде стояти три крапки.
echo ‘
‘;
Правда, в functions.php потрібно додати ще одну функцію:
function trim_title_words($count, $after) {
$title = get_the_title();
$words = split(‘ ‘, $title);
if (count($words) > $count) {
array_splice($words, $count);
$title = implode(‘ ‘, $words);
}
else $after = «;
echo $title . $after;
}
Ось і все, що я хотів сказати з цього многозначительному приводу.
P. S. переніс мій маленький звіт в коментарі до посту про фільтрі Яндекса.
Удачі вам! До зустрічей на сторінках блогу
