Статьи

Использование шорткодов WordPress и пользовательских полей для сносок

Что касается веб-дизайна и разработки, то, что вы можете сделать с помощью WordPress, практически безгранично. Вы можете запустить агрегатор новостей, создать краудфандинговую платформу, продавать билеты на первый концерт своей группы, показывать свои произведения в виртуальной галерее и так далее.

Вы также можете сделать клон Wikipedia и подражать его функциям, таким как раздел «оглавление» или связанные перекрестные ссылки. В этом руководстве мы собираемся использовать шорткоды и настраиваемые поля для создания рабочего раздела «Сноски».

Со мной связался профессор университета, который хотел опубликовать некоторые из его статей в Интернете. У него была эта маленькая ...edu.tr/~hisname/ домашняя страница, и он решил, что пришло время перенести контент на «настоящий» сайт, и он понял, что WordPress будет правильным выбором для использования в качестве системы управления контентом.

Как вы знаете, научные статьи могут включать много комментариев, цитат и внешних ссылок, которые мы обычно называем сносками. Когда он сказал, что хочет, чтобы его статьи были более интерактивными, я сразу подумал о схожей функциональности в Википедии и начал искать плагины, которые предлагают этот вид услуг.

Хотя я нашел один из многих , я подумал, что было бы неплохо, если бы я попытался создать свой собственный плагин для добавления сносок. Для этого я сделал именно это и буду проходить через весь оставшийся материал этой статьи.

Процесс создания нашего плагина будет относительно простым даже для начинающих разработчиков. Мы будем:

  • создайте наш файл плагина
  • создать наш шорткод,
  • код нашей функции нижнего колонтитула
  • напишите другую функцию, которая добавляет сноски к содержимому сообщения, подключив к the_content .

Кусок пирога, верно?

Если вы новичок, желающий изучить основы разработки плагинов для WordPress, этот учебник содержит как раз то, что нужно для начала. И если вы немного более продвинуты, этот урок может дать вам хорошие идеи.

Если вы знакомы с плагинами (как при создании одного или даже при просмотре исходного кода одного), вы будете знать, что мы должны запустить основные файлы нашего плагина со следующей информацией заголовка:

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-код в строке «Описание».
  • Есть некоторые другие «имена заголовков», которые вы можете найти на странице «Заголовок файла» в Кодексе .

Теперь, когда мы закончили с заголовками, давайте перейдем к шагу, на котором мы создадим наш шорткод!

Если вы прочитаете мои старые уроки, вы вспомните, что я люблю 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] .

Чтобы сделать сноски, нам нужно использовать «настраиваемые поля» 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 дольше. Надеюсь, тебе тоже понравилось. Если вы хотите получить доступ к полному коду, вы можете найти его здесь .

У вас есть что добавить? Пожалуйста, поделитесь своими мыслями с нами, комментируя ниже. И если вам понравился этот урок, не забудьте поделиться им с друзьями!