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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?php
/*
Template Name: 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;

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

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

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

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

Також у нашому випадку ми зробили прокручується вертикальне, а не горизонтальне меню. Змінити його на горизонтальне досить просто, видаливши 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", інакше нічого не працюватиме. Також треба внести правки до зверху: 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. ' віддає назву рубрики у форматі якоря назва якоря(a name="'.$cat->cat_name.'"). Тепер коли відвідувач натисне на пункті меню посилань, то відкриється потрібна секція вашого шаблону-сторінки.

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

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

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

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

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

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

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

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

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

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

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

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

редактор wpcafe

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