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

Также возможно создать аналог Википедии, имитируя ее функции, как например, раздел Оглавление или перекрестные ссылки.

Знакомство со сносками

Один профессор университета хотел опубликовать несколько своих статей онлайн. У него была небольшая домашняя страница, и он решил, что настало время переместить свой контент на полноценный сайт, услышав, что WordPress — это именно та платформа, которая отлично подойдет в качестве системы управления контентом.

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

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

Исходники на GitHub | Скачать готовый плагин

Создание плагина для сносок в WordPress

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

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

Ничего сложного, правда?

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

1. Файл плагина

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

<?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
 */
 
?>

Строки в этом коде достаточно читабельны, поэтому мы не будем останавливаться на их объяснение.

Хотя несколько советов все же имеется:

  • Единственная обязательная строка — это «Plugin Name», остальные же не являются таковыми, хоть и достаточно полезны.
  • Можно использовать простой HTML-код в строке «Description».
  • Есть еще и другие "header names" (названия шапок), которые можно найти на странице File Header в Codex.

С шапками мы закончили, теперь перейдем к созданию шорткода.

2. Шорткод

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

<?php
 
function footnotes_sc( $atts ) {
 
    extract( 
        shortcode_atts(
            array(
                'id' => '1',
            ), 
        $atts )
    );
 
    return '<a href="#ref-' . $id . '" rel="footnote"><sup>[' . $id . ']</sup></a>';
     
}
 
add_shortcode( 'ref', 'footnotes_sc' );
 
?>

Как видите, код действительно очень и очень простой. И вот, что мы сделали:

  • Создали функцию под названием footnotes_sc.
  • Создали только один параметр под названием id (со стандартным значением «1») и превратили его в переменную с функцией extract().
  • Мы сделали return (вернули) простую строку со ссылкой на соответствующую сноску.
  • И наконец, мы установили шорткод под названием [ref] и привязали к нему функцию footnotes_sc().

Теперь каждый раз, когда мы будем использовать шорткод [ref id="X"] (где Х – это ID сноски), WordPress будет делать сноску [1].

3. Функция сноски

Для того чтоб создать саму сноску, нам нужно использовать произвольные поля в редакторе записей WordPress. Функция, указанная ниже, не является «продвинутым кодом», но так как он немного длинный, то мы рассмотрим его пошагово:

<?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 .= '<' . $titletag . '>' . $title . '</' . $titletag . '>';
        $output .= '<' . $listtag . '>';
         
        // list the footnotes with corresponding reference IDs
        foreach( $footnotes_array as $footnote ) {
         
            foreach( $footnote as $ref_id => $footnote_content ) {
                $output .= '<li id="' . $ref_id . '">' . $footnote_content . '</li>';
            }
             
        }
         
        // close the HTML tags
        $output .= '</' . $listtag . '>';
        $output .= '</div>';
    }
     
    // and return the $output variable if it's a single post or page
    if( is_singular() ) {
        return $output;
    }
     
}

Если говорить вкратце, то мы сохранили мета-данные поста, заполнили переменную $output путем преобразования сноски в список HTML, и вернули $output. Проще простого.

Использование плагина для сносок

Использовать плагин для сносок достаточно просто. Если вы добавите произвольные поля под названием ref-1ref-2, ref-3 и так далее, то раздел «Footnotes» («Сноски») появится сразу же после вашей статьи. И мы уже рассмотрели, как использовать шорткод, так что это все, что вам нужно сделать.

Подведем итоги

Теперь, когда у нас есть функция, которая возвращает HTML-список сносок, пришло время добавить этот список под статьями!

<?php
 
function print_footnotes( $content ) {
 
    $content .= make_footnotes();
    return $content;
     
}
add_filter( 'the_content', 'print_footnotes' );

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

Если вы не хотите автоматически добавлять раздел «Footnotes» («Сноски») под контентом, то удалите эти строки. Вместо этого вам нужно будет использовать небольшую часть кода в используемой вами теме, как например, <?php echo make_footnotes(); ?> там, где должна быть сноска статьи. Можно также изменить стандартный аргумент функции.

Источник: code.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.