Робимо сторінку-шаблон для WordPress з меню, що прокручується, і посиланнями

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

 Завантажити вихідні

Що ми будемо робити

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

У версії 3.5 блогролл і Менеджер посилань приховані для нових установок двигуна. Якщо ви оновлюєтеся з попередньої версії WordPress з будь-якими активними посиланнями, то колишній менеджер посилань у вас буде працювати так, як раніше.

Якщо ви хочете відновити панель Посилань , то вам потрібно завантажити та встановити плагін Link Manager.

Корисно застосовувати Менеджер посилань для створення списку зовнішніх посилань на сайти, проекти та сторінки, що тематично пов'язані з вашим власним блогом або сайтом, добірки відео-аудіо контенту, партнерські ресурси тощо. У вас є багато способів для застосування добірки посилань: аж до створення добірки улюблених пісень з посиланнями на них у магазині контенту на зразок iTunes.

1. Створюємо рубрики посилань

Перш ніж ми розпочнемо створення сторінки-шаблону з посиланнями, нам треба задати рубрики для посилань . Є для цього кілька способів. Іноді посилання сортують за жанрами (це стосується музики та кіно). У нашому прикладі ми створюємо список пісень , тому відсортуємо їх за абеткою.

Почніть з того, що авторизуйтесь у консолі WordPress, перейдіть до Посилання → Рубрики посилань . Щоб правильно встановити рубрику для посилань, переконайтеся, що ви вказали для рубрики назву та адресу, яка буде виконувати паралельно роль URL. Зазвичай прописується все це малими літерами, використовуючи лише цифри та літери.

Якщо ви не прописали власну адресу для рубрики, Менеджер посилань створить її автоматично на основі вибраної назви для рубрики посилань. Ми сортуємо пісні за абеткою, так що рубрики для посилань проставимо від " # ", далі - " A ", " B " і так далі аж до " Z ". Якщо у вас вже є якісь рубрики посилань, краще їх видалити, щоб не виникала плутанина під час редагування та управління

2. Створюємо шаблон сторінки посилань і меню, що прокручується

Створили рубрики для посилань, тепер саме час приступити до створення сторінки-шаблону.

Почнемо з того, що вже готовий шаблон сторінки . Потім відкриємо цей файл у будь-якому текстовому редакторі. Якщо у вас проблеми з пошуком вже готової сторінки як шаблон, пошукайте підбірку файлів під назвами на кшталт page-contact.php , page-portfolio.php , page-full-width.php.

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

<?php
/*
Template Name: Links
*/
?>

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

3. Додаємо меню, що прокручується

Тепер шукаємо в коді the_content() . Цей рядок "віддає" контент сторінки, який також доступний у візуальному редакторі постів та сторінок на сайті. Ось тут можна створити меню, що прокручується, зі списком посилань, які з'являться тільки тоді, коли ви присвоите посиланням назви рубрик. Ось як виглядатиме код для вашого шаблону після параметра the_content() :

<!-- scrollable menu -->
<div id="scrollablemenu">
<?php $cats = get_categories( "taxonomy=link_category&hierarchical=0" );
foreach ($cats as $cat) {
    echo '<a href="#' . $cat->cat_name . '" class="scrollablemenubutton">' . $cat->cat_name . '</a>';
}
?>
</div><!-- end of scrollable menu -->

$cats = get_categories( "taxonomy=link_category&hierarchical=0" ) показує нам рубрики посилань і відображає назву рубрики з використанням значення ' . $cat->cat_name. ' Якщо ви хочете більше дізнатися про це, перейдіть до get_categories у рамках WordPress Codex.

Значення id="scrollablemenu" прив'язане до JavaScript (про нього йдеться трохи нижче), щоб наша нова функція працювала належним чином. А параметр class="scrollablemenubutton" - це CSS для базового оформлення ваших пунктів у списку посилань. Можете експериментувати з оформленням, але й базового буде цілком достатньо. Далі я розповім вам, як додати оформлення та JavaScript до вашої сторінки-шаблону так, щоб він завантажувався тільки у разі застосування параметра wp_enqueue_*.

Властивості для вашого id="scrollablemenu" будуть наступними:

position: fixed;
top: 10px; /* Make sure the top property has the same value as the javascript file */
padding: 20px;
width: 90px;
margin-left: 500px;

Параметр position: fixed; та top: 10px; фіксує розташування меню у вибраній частині екрана.

Параметр top: 10px; можна і потрібно змінити так, щоб результат відповідав вашому оформленню сайту.

Не забувайте, що зміна розташування верхньої частини блоку вимагає від вас правок у коді JavaScript . Цей код "загорнутий" в тег div з вирівнюванням margin-left , щоб меню, що прокручується, було в правій частині сайту.

Параметр margin-left: 500px; швидше за все доведеться підігнати під ширину вашого сайту.

Також у нашому випадку ми зробили вертикальне , що прокручується , а не горизонтальне меню. Змінити його на горизонтальне досить просто, вилучивши width: 90px; margin-left: 500px;

Перейдемо до файлу JavaScript , завдяки якому працює меню, що прокручується. Відкрийте JavaScript під назвою scrollablemenu.js

$(window).scroll(function(){
    $("#scrollablemenu").css( "top", Math.max( 0, 10 - $(this).scrollTop() ) );
});

Дві важливі частини коду тут - #scrollablemenu і 10.

#scrollablemenu має збігатися з вашим значенням id="scrollablemenu" , інакше нічого не працюватиме. Також треба внести редагування в top: 10px; відповідно до того, що ви вказали у файлі scrollablemenu.js.

4. Додаємо файли

Тепер трохи попрацюємо над візуальним оформленням, щоб меню прокручувалося, а кнопки мали хоча б базове оформлення. Зробити це досить просто, застосувавши wp_enqueue_script та wp_enqueue_style ; так вам не доведеться додавати CSS-таблицю або JavaScript-код у файл header.php . Завантажуються файли тільки в тому випадку, коли завантажено шаблон сторінки, а значить ваш сайт працюватиме швидше.

Спочатку додамо JavaScript. Візьмемо наведений нижче код і додамо його до нашого шаблону сторінки:

<?php
function scrollablemenu_script() {
    wp_register_script( 'scrollablemenu_custom_script', get_template_directory_uri() . '/js/scrollablemenu.js' );
    wp_enqueue_script( 'scrollablemenu_custom_script' );
}
add_action( 'wp_enqueue_scripts', 'scrollablemenu_script' );
?>

Тепер завантажуємо FTP файл scrollablemenu.js на хостинг. Не забудьте змінити шлях /js/scrollablemenu.js на папку, до якої ви вивантажили JavaScript.

Тепер настав час привнести трохи форматування стилів для нового коду:

<?php
function scrollablemenu_style() {
    wp_register_style( 'scrollablemenu_custom_style', get_template_directory_uri() . '/css/scrollablemenu.css' );
    wp_enqueue_style( 'scrollablemenu_custom_style' );
}
add_action( 'wp_enqueue_scripts', 'scrollablemenu_style' );
?>

Закачуємо FTP файл scrollablemenu.css на сервер і не забуваємо вказати коректний шлях до файлу замість /css/scrollablemenu.css . Тепер файли JavaScript та таблиці стилів будуть завантажуватися щоразу, коли завантажується сторінка-шаблон із посиланнями.

Основна відмінність між кодом в них - це функції wp_enqueue_script та wp_enqueue_style.

5. Додаємо рубрики посилань

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

<!-- link categories -->
<div class="linkcategories">
<?php $cats = get_categories( "taxonomy=link_category&hierarchical=0" );
foreach ( $cats as $cat ) {
    echo '<a name="' . $cat->cat_name . '"></a><h3>' . $cat->cat_name . '</h3>';
    echo '<ul>';
    $books = get_bookmarks( "category=$cat->cat_ID" );
    foreach ( $books as $book ) {
        echo '<li>';
        echo '<a href="' . $book->link_url . '">' . $book->link_name . '</a>';
        echo '</li>';
    } // end books loop
    echo '</ul>';
} // end cats loop;
?>
</div><!-- end of link categories -->

Тут ми знову використовуємо $cats = get_categories( "taxonomy=link_category&hierarchical=0" ) і цей код "віддає" нам перелік рубрик для посилань і відображає назву рубрики зі значенням ' . $cat->cat_name. ' . Важливо те, як '. $cat->cat_name. ' віддає назву рубрики у форматі якоря anchor name (a name="'.$cat->cat_name.'") . Тепер коли відвідувач натисне на пункті меню посилань, то відкриється потрібна секція вашого шаблону-сторінки.

Решта коду відображає URL , використовуючи значення ' . $book->link_url . ' і відображає ім'я посилання з використанням значення ' . $book->link_name. ' . Завершується функція get_bookmarks( "category=$cat->cat_ID" ) . Більше дізнатися про те, як це все працює, можна в розділі get_bookmarks в рамках WordPress Codex.

Кожен рядок коду укладено в тег div із зазначенням класу class="linkcategories" (доданого до файлу scrollablemenu.css ), і кожен рядок коду відображатиме заголовок (ім'я або рубрику) з тегом h3 , і заголовок при цьому також буде якорним ім'ям і всі прив'язані до відповідних URL.

Значення width: 490px; швидше за все доведеться змінити, підігнавши під ширину вашого сайту. При внесенні правок не забувайте, що треба змінити і ширину меню, що прокручується в margin-left: 500px;.

Ну ось шаблон для посилань на сторінці готовий. Готовий файл links-page-template.php не забудьте вивантажити у кореневу папку теми оформлення WordPress.

6. Створюємо сторінку із шаблонами посилань

Ми створили і посилання, і рубрики, надали їм шаблони; тепер саме час створити на основі шаблону нову сторінку.

У консолі WordPress знайдіть Сторінки та клацніть на " Додати нову ". Спочатку вкажіть назву сторінки, далі виберіть ваш шаблон посилань у меню, що випадає в блоці Атрибути сторінки (праворуч збоку). Опублікуйте і перейдемо до заключної частини створення сторінки-шаблону з посиланнями.

7. Додаємо нове посилання до рубрики посилань

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

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

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/