Как бы вы хотели использовать менеджер ссылок WordPress? Вы найдете это весьма полезным, если использовать его по правильным причинам.
Я хотел бы показать вам способ добавления ссылок на ваш сайт WordPress, которые не только используют Менеджер ссылок, но и создают больше контента для вашего сайта с быстрым и простым рабочим процессом.
Что вы будете строить
Позвольте мне начать с краткого обзора Менеджера ссылок для WordPress. Менеджер ссылок позволяет хранить набор внешних ссылок, также известный как ваш блогролл . Эти ссылки можно поместить в категории, импортировать, экспортировать, добавлять, удалять и редактировать. Категории ссылок также можно добавлять, удалять и редактировать. Вы можете найти менеджер ссылок в разделе ссылок панели администрирования WordPress.
Начиная с версии 3.5, менеджер ссылок и блогролл скрыты для новых установок и любых существующих установок WordPress, у которых нет ссылок. Если вы обновляете предыдущую версию WordPress с любыми активными ссылками, Менеджер ссылок продолжит работать в обычном режиме.
Если вы хотите восстановить панель «Ссылки» для вашей установки, вы можете скачать и установить плагин «Менеджер ссылок» .
Полезный способ использования Менеджера ссылок WordPress — отображение ежедневного скомпилированного списка внешних ссылок, таких как избранные веб-сайты, партнеры, песни, смешные видеоролики и т. Д.
Варианты безграничны, но имейте в виду стратегию вашего сайта. Так, например, я собираюсь составить список ссылок моих любимых песен, которые содержат гиперссылку на песню в iTunes, где они могут услышать и / или загрузить песню.
1. Создание категорий ссылок
Прежде чем мы начнем разрабатывать шаблон страницы ссылок, мы должны определить, какими будут категории ссылок. Это можно определить несколькими способами. Некоторые примеры по жанрам — например, регги, рэп, кантри, метал — по 5-звездочному рейтингу или по алфавиту. Поскольку я составляю список любимых песен, я организую категории ссылок в алфавитном порядке.
Для начала войдите в WordPress, наведите курсор на ссылки и нажмите «Категории ссылок». Чтобы правильно добавить категорию ссылок, убедитесь, что у вас есть имя и слаг. В описании нет необходимости. Название так выглядит на вашем сайте. Слаг — это URL-версия имени. Обычно это строчные буквы и содержат только буквы, цифры и дефисы. Если при создании категории ссылок не введен фрагмент, Менеджер ссылок автоматически создаст его на основе имени.
Поскольку мы организуем песни в алфавитном порядке, создайте имя первой категории ссылок «#», второй категории ссылок «A», третьей категории «B» и т. Д., Пока не достигнете «Z». Не делайте никаких дополнительных категорий ссылок, иначе они будут отображаться в вашей навигации на шаблоне страницы ссылок. Поэтому обязательно удалите все существующие категории ссылок.
2. Создание шаблона страницы ссылок и прокручиваемого меню
Теперь, когда все категории ссылок созданы, мы можем приступить к созданию шаблона страницы ссылок. Итак, начнем с копирования и вставки уже созданного шаблона страницы в тему WordPress, переименования его в links-page-template.php и открытия его в вашем любимом текстовом редакторе.
Причина копирования и вставки уже созданного шаблона страницы заключается в том, что вы хотите, чтобы шаблон страницы ссылок имел тот же дизайн, что и остальная часть вашего сайта.
Если у вас возникли проблемы с поиском уже созданного шаблона страницы в вашей теме WordPress, поищите набор файлов с постоянным именем, например page-contact.php , page-portfolio.php , page-full-width.php и т. Д.
Для тем WordPress характерно иметь несколько шаблонов страниц, которые имеют одинаковые имена, чтобы они оставались организованными. Вы также можете открыть файл, чтобы увидеть, начинается ли файл с идентификатора шаблона страницы, как в примере ниже:
|
1
2
3
4
5
|
<?php
/*
Template Name: Links
*/
?>
|
Первое, что вам нужно сделать, это изменить имя шаблона (см. Код выше) на «Ссылки». Приведенный выше код сообщает WordPress, что это шаблон, поэтому он будет доступен в раскрывающемся меню через редактор страниц по имени шаблона, которому вы его даете, в данном случае с именем «Ссылки».
3. Добавление прокручиваемого меню
Теперь ищите код the_content() . Этот код извлекает содержимое страницы, содержимое, которое добавляется в редактор WYSIWYG для страницы.
Это отличное место для размещения прокручиваемого меню и отличное место для отображения ссылок, которые не появятся, пока вы не добавите новую ссылку в одну из только что созданных вами категорий ссылок. Мы вернемся к этому позже. Ниже the_content() в вашем шаблоне добавьте:
|
1
2
3
4
5
6
7
8
|
<!— 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»>’ .
}
?>
</div><!— end of scrollable menu —>
|
Код $cats = get_categories( "taxonomy=link_category&hierarchical=0" ) возвращает все созданные категории ссылок и отображает имя категории, используя значение ' . $cat->cat_name . ' ' . $cat->cat_name . ' ' . $cat->cat_name . ' . Если вы хотите узнать больше, перейдите к get_categories в Кодексе WordPress.
id="scrollablemenu" подключен к некоторому JavaScript (о котором я расскажу далее), чтобы меню функционировало правильно, а class="scrollablemenubutton" — это некоторый CSS, который придаст вашим кнопкам очень простой стиль. Я призываю вас быть более креативными с CSS, но основной стиль пока работает.
Чтобы увидеть основные CSS, загрузите файлы для этого урока. Вскоре я покажу вам, как добавить таблицу стилей (и JavaScript) в шаблон страницы, чтобы она загружалась только тогда, когда шаблон страницы загружается с помощью wp_enqueue_* .
Для вашего id="scrollablemenu" вы захотите добавить свойства:
|
1
2
3
4
5
|
position: fixed;
top: 10px;
padding: 20px;
width: 90px;
margin-left: 500px;
|
position: fixed; и top: 10px; сохраняет меню в выбранном вами месте. top: 10px; стиль может и может потребоваться изменить, чтобы получить результаты, которые вы ищете.
Если бы вы поставили top: 100px; это даст вашему меню верхний отступ в 100px от самой верхней части вашего сайта, поэтому, если вы 100px 0px ваше меню должно касаться самой верхней части вашего сайта. Имейте в виду, что каждый раз, когда вы меняете верхний стиль, вам также нужно изменить код JavaScript для соответствия.
Не волнуйтесь — мы немного дойдем до кода JavaScript.
Я обернул меню в div с margin-left стиле, чтобы расположить прокручиваемое меню с правой стороны. Это связано с тем, что меню располагается поверх содержимого, поэтому, если бы меню не сдвигалось вправо, ссылки терялись за прокручиваемым меню. Поле margin-left: 500px; Скорее всего, необходимо изменить, чтобы соответствовать ширине вашего сайта.
Я также сделал прокручиваемое меню как вертикальное, а не горизонтальное, установив ширину в 90px . Вы можете легко изменить меню в горизонтальное меню, удалив width: 90px; margin-left: 500px; width: 90px; margin-left: 500px; , но знайте, что ваш контент может потеряться за меню.
Давайте поговорим о файле JavaScript, который обеспечивает работу прокручиваемого меню. Загрузите файлы для этого урока и откройте файл JavaScript с именем scrollablemenu.js .
|
1
2
3
|
$(window).scroll(function(){
$(«#scrollablemenu»).css( «top», Math.max( 0, 10 — $(this).scrollTop() ) );
});
|
Две важные части в коде — #scrollablemenu и 10 .
#scrollablemenu должен соответствовать вашему id="scrollablemenu" иначе он не будет работать.
Ранее мы говорили о том, как бы вы изменили top: 10px; стиль, вам нужно изменить его в файле JavaScript соответственно. Вы можете сделать это, просто изменив сумму 10 на любую сумму, на которую вы изменили свой лучший стиль.
4. Добавление файлов
Теперь, когда у вас есть понимание того, как работает код JavaScript, давайте добавим его и таблицу стилей в шаблон страницы, чтобы меню прокручивалось, а кнопки имели некоторый стиль.
Простой и организованный способ сделать это — использовать wp_enqueue_script и wp_enqueue_style ; это позволяет вам не добавлять CSS в другую таблицу стилей или JavaScript в файл header.php . Он загружает файлы только тогда, когда загружен шаблон страницы, что позволяет вашему веб-сайту работать быстрее.
Давайте сначала добавим файл JavaScript. Возьмите приведенный ниже код и добавьте в начало вашего шаблона страницы (под названием шаблона).
|
1
2
3
4
5
6
7
|
<?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’ );
?>
|
Теперь отправьте файл scrollablemenu.js на хостинг вашего сайта. Обязательно измените местоположение /js/scrollablemenu.js на папку, в которую вы загрузили файл JavaScript. Теперь давайте добавим файл таблицы стилей прямо под только что добавленным кодом.
|
1
2
3
4
5
6
7
|
<?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 . Если вы хотите узнать больше о wp_enqueue_* посмотрите учебник Как включить JavaScript и CSS в ваши темы и плагины WordPress .
5. Добавление категорий ссылок
Теперь давайте добавим наиболее важную часть в шаблон страницы ссылок … категории ссылок.
Добавьте этот код под прокручиваемый код меню.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!— 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>’ .
echo ‘<ul>’;
$books = get_bookmarks( «category=$cat->cat_ID» );
foreach ( $books as $book ) {
echo ‘<li>’;
echo ‘<a href=»‘ . $book->link_url . ‘»>’ .
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 . ' ' . $cat->cat_name . ' .
Важная часть кода — как ' . $cat->cat_name . ' ' . $cat->cat_name . ' ' . $cat->cat_name . ' возвращает имя категории в качестве имени привязки (a name="'.$cat->cat_name.'") . Это делает так, что прокручиваемое меню работает, поэтому, когда посетитель нажимает на прокручиваемое меню, он ссылается на правильный раздел в шаблоне вашей страницы.
В остальной части кода URL ссылки отображается с использованием значения ' . $book->link_url . ' ' . $book->link_url . ' ' . $book->link_url . ' и отображает имя ссылки, используя значение ' . $book->link_name . ' ' . $book->link_name . ' ' . $book->link_name . ' . Все это выполняется с помощью функции get_bookmarks( "category=$cat->cat_ID" ) .
Вы можете узнать больше, перейдя к get_bookmarks в Кодексе WordPress.
Каждая строка кода находится внутри элемента div с class="linkcategories" (который добавляется в файл class="linkcategories" ), и каждая строка кода будет отображать заголовок (имя категории) с тегом h3 , заголовок также будет имя привязки и ссылки, созданные в Менеджере ссылок, будут обернуты в теги li гиперссылкой на URL ссылки.
Итак, вы знаете, что код обернут в div с шириной 490px , таким образом никакой текст не будет потерян за прокручиваемым (вертикальным) меню. width: 490px; Скорее всего, необходимо изменить, чтобы соответствовать ширине вашего сайта.
Если вы изменяете ширину, не забудьте изменить прокручиваемый стиль меню div margin-left: 500px; , Он увеличивается на 10px вправо, поэтому прокручиваемый div меню не будет перекрывать div категорий ссылок.
Ваш шаблон страницы ссылок закончен! Обязательно отправьте файл links-page-template.php по FTP в корневой каталог темы WordPress.
6. Создайте страницу с шаблоном ссылок.
Теперь, когда категории ссылок созданы, а шаблон страницы ссылок создан и загружен, давайте добавим новую страницу, используя шаблон.
В разделе администратора WordPress под страницами нажмите «Добавить». Сначала добавьте имя своей страницы, затем выберите шаблон «Ссылки» в раскрывающемся меню в разделе «Атрибуты страницы» (справа). Опубликуйте и давайте перейдем к последнему шагу.
7. Добавить новую ссылку в категорию ссылок
Если вы уже просмотрели страницу, которую только что создали, и заметили, что показывается только вертикальное прокручиваемое меню, это связано с тем, что вам нужно добавить ссылки на категории ссылок, которые вы сделали ранее. Если в категории ссылок нет ссылок, то ничего не появится.
Итак, давайте добавим ссылку, нажав кнопку Добавить в разделе Ссылки в разделе администратора WordPress. Введите имя, например, « Даниэль Ли Кендалл — Затерянный момент» , веб-адрес и выберите категорию. Справа нажмите ссылку «Добавить», и теперь вы можете проверить свою страницу, чтобы увидеть результаты. Вы все закончили!
Вывод
Если вы не получаете ожидаемых результатов, поэкспериментируйте с шириной каждого div и / или создайте лучшую таблицу стилей для прокручиваемого меню.