Что касается веб-дизайна и разработки, то, что вы можете сделать с помощью WordPress, практически безгранично. Вы можете запустить агрегатор новостей, создать краудфандинговую платформу, продавать билеты на первый концерт своей группы, показывать свои произведения в виртуальной галерее и так далее.
Вы также можете сделать клон Wikipedia и подражать его функциям, таким как раздел «оглавление» или связанные перекрестные ссылки. В этом руководстве мы собираемся использовать шорткоды и настраиваемые поля для создания рабочего раздела «Сноски».
Представляем сноски
Со мной связался профессор университета, который хотел опубликовать некоторые из его статей в Интернете. У него была эта маленькая ...edu.tr/~hisname/ домашняя страница, и он решил, что пришло время перенести контент на «настоящий» сайт, и он понял, что WordPress будет правильным выбором для использования в качестве системы управления контентом.
Как вы знаете, научные статьи могут включать много комментариев, цитат и внешних ссылок, которые мы обычно называем сносками. Когда он сказал, что хочет, чтобы его статьи были более интерактивными, я сразу подумал о схожей функциональности в Википедии и начал искать плагины, которые предлагают этот вид услуг.
Хотя я нашел один из многих , я подумал, что было бы неплохо, если бы я попытался создать свой собственный плагин для добавления сносок. Для этого я сделал именно это и буду проходить через весь оставшийся материал этой статьи.
Построение нашего сносок плагин
Процесс создания нашего плагина будет относительно простым даже для начинающих разработчиков. Мы будем:
- создайте наш файл плагина
- создать наш шорткод,
- код нашей функции нижнего колонтитула
- напишите другую функцию, которая добавляет сноски к содержимому сообщения, подключив к
the_content.
Кусок пирога, верно?
Если вы новичок, желающий изучить основы разработки плагинов для WordPress, этот учебник содержит как раз то, что нужно для начала. И если вы немного более продвинуты, этот урок может дать вам хорошие идеи.
1. Создайте файл плагина
Если вы знакомы с плагинами (как при создании одного или даже при просмотре исходного кода одного), вы будете знать, что мы должны запустить основные файлы нашего плагина со следующей информацией заголовка:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php
/**
* Plugin Name: Footnotes Shortcode (by Tuts+ Code)
* Plugin URI: https://github.com/barisunver/tuts-footnotes/
* Description: A simple plugin utilizing shortcodes and custom fields to create footnotes in your articles.
* Version: 1.0
* Author: Baris Unver
* Author URI: http://tutsplus.com/authors/baris-unver
* License: GPL2
*/
?>
|
Все строки говорят сами за себя, поэтому я не буду вдаваться в подробности, сообщая, что версия представляет номер версии вашего плагина.
Хотя есть несколько советов, которые я могу дать:
- Единственная обязательная строка — это строка «Имя плагина»; остальное необязательно (но очень полезно).
- Вы можете использовать простой HTML-код в строке «Описание».
- Есть некоторые другие «имена заголовков», которые вы можете найти на странице «Заголовок файла» в Кодексе .
Теперь, когда мы закончили с заголовками, давайте перейдем к шагу, на котором мы создадим наш шорткод!
2. Создайте шорткод
Если вы прочитаете мои старые уроки, вы вспомните, что я люблю Shortcode API. Таким образом, это моя любимая часть.
Как указывалось ранее, целью нашего шорткода будет отображение номера нашей сноски, который вы можете указать в качестве параметра. Поскольку это всего лишь несколько простых строк кода, давайте напишем код сейчас и посмотрим сразу после:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?php
function footnotes_sc( $atts ) {
extract(
shortcode_atts(
array(
‘id’ => ‘1’,
),
$atts )
);
return ‘<a href=»#ref-‘ . $id . ‘» rel=»footnote»><sup>[‘ .
}
add_shortcode( ‘ref’, ‘footnotes_sc’ );
?>
|
Как видите, код действительно очень прост. Вот что он делает:
- Мы создали функцию с именем
footnotes_sc, - Мы создали только один параметр с именем
id(со значением по умолчанию «1») и превратили его в переменную с помощью функцииextract(), - Мы
returnпростую строку со ссылкой на соответствующую сноску, - И наконец, мы установили шорткод с именем
[ref]и подключили к нему нашу функциюfootnotes_sc().
Впредь; каждый раз, когда мы используем [ref id="X"] (где X — идентификатор сноски), WordPress будет печатать ссылочный номер, например [1] .
3. Создание функции сноски
Чтобы сделать сноски, нам нужно использовать «настраиваемые поля» WordPress. Приведенная ниже функция не является «расширенным кодом», но, поскольку она немного длинная, мы можем с таким же успехом документировать ее Вот так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<?php
// create the function with some arguments
function make_footnotes( $title = », $titletag = ‘h3’, $listtag = ‘ol’ ) {
// set the title to a translatable string («Footnotes») if no title is specified
if( » == $title ) {
$title = __( ‘Footnotes’, ‘tuts-footnotes’ );
}
// create an empty array to avoid any PHP notices
$footnotes_array = array();
// get the results of each custom field named «ref-X»,
// where X must be a number from 1 to 100,
// and add them to $footnotes_array
for( $i = 1; i <= 100; $i++ ) {
$get_post_meta = get_post_meta( get_the_ID(), ‘ref-‘ . $i, true );
if( » == $get_post_meta ) {
break;
} else {
$footnotes_array[] = array( ‘ref-‘ . $i => $get_post_meta );
}
}
// if the $footnotes_array is NOT empty…
if( count( $footnotes_array ) > 0 ) {
// …start the $output variable with a DIV…
$output = ‘<div class=»tutsplus-footnotes»>’;
// …use the default values of our function’s arguments
$output .= ‘<‘ .
$output .= ‘<‘ .
// list the footnotes with corresponding reference IDs
foreach( $footnotes_array as $footnote ) {
foreach( $footnote as $ref_id => $footnote_content ) {
$output .= ‘<li id=»‘ . $ref_id . ‘»>’ .
}
}
// close the HTML tags
$output .= ‘</’ .
$output .= ‘</div>’;
}
// and return the $output variable if it’s a single post or page
if( is_singular() ) {
return $output;
}
}
|
Короче говоря; мы сохранили мета-запись в массиве, заполнили переменную $output , превратив сноски в список HTML, и вернули $output . Легко, как пирог.
Используя наш плагин сносок
Использовать плагин довольно просто: если вы добавите пользовательские поля с именами ref-1 , ref-2 , ref-3 и т. Д., Сразу после вашей статьи появится раздел «Сноски». И мы уже рассмотрели, как использовать шорткод, так что это все, что вам нужно сделать.
Завершение
Теперь, когда у нас есть функция, которая возвращает HTML-список сносок, пришло время добавить этот список в наши статьи!
|
1
2
3
4
5
6
7
8
9
|
<?php
function print_footnotes( $content ) {
$content .= make_footnotes();
return $content;
}
add_filter( ‘the_content’, ‘print_footnotes’ );
|
Вероятно, это самая простая часть нашего кода, поскольку мы вызываем только нашу предыдущую функцию, чтобы добавить ее вывод после содержимого публикации, а затем подключаем эту новую функцию к фильтру the_content .
Если вы не хотите автоматически добавлять раздел «Сноски» под содержимым, удалите эти строки. Вместо этого вам придется использовать небольшой кусочек кода в вашей теме, например <?php echo make_footnotes(); ?> <?php echo make_footnotes(); ?> в том месте, куда вы хотите показать сноски статьи. Вы также можете изменить аргументы функции по умолчанию.
Вывод
В конечном счете, профессору очень понравилось то, что я сделал с функциональностью «сносок», и я думаю, что он все еще использует созданный мной веб-сайт — он использовал свою домашнюю страницу более 10 лет и, вероятно, будет использовать WordPress дольше. Надеюсь, тебе тоже понравилось. Если вы хотите получить доступ к полному коду, вы можете найти его здесь .
У вас есть что добавить? Пожалуйста, поделитесь своими мыслями с нами, комментируя ниже. И если вам понравился этот урок, не забудьте поделиться им с друзьями!