Пишем свой WordPress-плагин для вывода биографии автора в записях

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

1. Готовим биографию.

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

1

2. Создаем необходимые файлы.

Нам нужно будет создать отдельный файл, который включит в себя функциональность нашего плагина. Воспользуйтесь предпочтительным FTP-менеджером, и в пределах папки wp-content/plugins/ создайте файл ntauthorbio.php. Чтобы WordPress мог распознать наш плагин, мы должны создать специальный закомментированный заголовок в нашем файле, как это делается со style.css. Поместите следующий код в свой файл, внеся в него соответствующие изменения.

/* 
Plugin Name: Nettuts Author Bio 
Plugin URI: http://www.nettuts.com/ 
Description: This plugin adds an authors bio to his/her post 
Author: nettuts 
Version: 0.1 
Author URI: http://www.nettuts.com/ 
*/  

3. Функции и действия.

Далее нам нужно создать основу для нашего плагина. Вставьте следующий код после секции заголовка.

function author_bio_display($content)  
{  
    // this is where we'll display the bio  
}  
  
function author_bio_style()  
{  
    // this is where we'll style our box  
}  
  
function author_bio_settings()  
{  
    // this is where we'll display our admin options  
}  
  
function author_bio_admin_menu()  
{  
    // this is where we add our plugin to the admin menu  
}  
  
add_action('the_content', 'author_bio_display'); 
add_action('admin_menu', 'author_bio_admin_menu'); 
add_action('wp_head', 'author_bio_style'); 

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

При разработке плагина очень важно понимать, что собой представляет «хук». Хук – это место в запущенном цикле, где мы можем сцепиться с WordPress и вызвать наши функции. К примеру, хук для author_bio_display – это the_content; это означает, что когда система WordPress будет использовать the_content (применяется для вывода основного контента записей/страниц), она сначала вызовет функцию, которую мы подцепили к хуку.

  • the_content – выводит контент записи/страницы
  • admin_menu  — вызывается при создании сайдбара в консоли администратора
  • wp_head  — позволяет нам добавлять код к head-тегам страницы. Именно поэтому мы подключаем wp_head() при разработке тем для WordPress.

4. Функция вывода на экран.

Одна из достаточно важных функций в нашем плагине – это функция вывода информации на экран, которая обрабатывает процесс отображения данных после контента. Перед тем, как мы приступим к ней, важно отметить, что эта функция принимает параметр, который называется $content. Это означает, что контент записи/страницы передается в нашу функцию, поэтому мы можем добавить в конец контента авторскую биографию.

Давайте начнем с формирования простого условия if/else:

function author_bio_display($content)  
{  
    // this is where we will display the bio  
      
    if ( is_single() || is_page() )  
    {  
        $bio_box = // placeholder;  
        return $content . $bio_box;  
    } else {  
        return $content;  
    }  
}  

Мы проверяем, представлен ли контент в отдельной записи — делается это с помощью is_single(), или же на странице – с помощью is_page(). Если какой-либо из результатов верен, то в таком случае мы можем опубликовать нашу панель с биографией, которая будет находиться в переменной $bio_box. Иначе, если мы находимся на какой-либо иной странице – скажем, на главной странице или в архивах, — то мы в таком случае должны просто вернуть контент в нетронутом виде.

Теперь мы должны добавить наш код для представления панели, изменив переменную $bio_box :

$bio_box =   
'<div id="author-bio-box"> 
    '.get_avatar( get_the_author_meta('user_email'), '80' ).' 
    <span class="author-name">'.get_the_author_meta('display_name').'</span> 
    <p>'.get_the_author_meta('description').'</p> 
    <div class="spacer"></div> 
</div>';  

Стилизация, естественно, может быть изменена впоследствии с помощью стилевых таблиц. На данный момент мы используем простую панель, к которой затем добавим некоторые стили.

Мы использовали несколько функций выше для получения требуемых нам данных. get_avatar() – встроенная функция в WordPress для получения пользовательского аватара, если такой имеется, в зависимости от почтового адреса. Мы передаем функции get_avatar() два параметра – email автора, а также размер изображения (в нашем случае 80 на 80 пикселей).

Функция get_the_author_meta() может получать любую информацию о зарегистрированном WP-пользователе. Полный список всех пунктов доступен в кодексе WordPress.

Если теперь мы запустим наш плагин, мы должны увидеть что-то наподобие следующего:

2

Не самый красивый вариант биографии, но зато у нас есть базовая функциональность. Если у вас имеются проблемы, убедитесь в том, что для автора задана биография и/или аватар, после чего убедитесь в том, что плагин был активирован в соответствующем разделе консоли. Давайте теперь проведем некоторую стилизацию.

5. Увеличиваем привлекательность биографии.

Если вы являетесь дизайнером, то в таком случае вы сделаете все самостоятельно. Мой код, который приведен ниже, позволяет улучшить представление панели, сделать ее более простой и притягательной. Чтобы показать, как можно использовать wp_head(), мы вставим CSS-стили для данной панели в тег head нашего документа. Однако вы можете просто поместить эти стили в свою стилевую таблицу.

Функция author_bio_style() должна возвратить простой блок CSS-стилей:

function author_bio_style()  
{  
    // this is where we'll style our box  
    echo   
    '<style type="text/css">  
    #author-bio-box {  
        border: 1px solid #bbb;  
        background: #eee;  
        padding: 5px;  
    }  
      
    #author-bio-box img {  
        float: left;  
        margin-right: 10px;  
    }  
      
    #author-bio-box .author-name {  
        font-weight: bold;  
        margin: 0px;  
        font-size: 14px;  
    }  
      
    #author-bio-box p {  
        font-size: 10px;  
        line-height: 14px;  
        font-style: italic;  
    }  
      
    .spacer { display: block; clear: both; }  
    </style>';  
}  

Код выше не нуждается в масштабном объяснении. CSS выходит за рамки данного руководства. Обычно мы просто создаем панель с границей, после чего делаем изображение плавающим по левому краю. Наконец, мы добавляем разделитель, чтобы убедиться в том, что панель достаточно большая для вмещения изображения и текста. Вы можете также использовать clearfix-хак или даже overflow:hidden для активации данного эффекта. В конечном счете все будет зависеть от вашей разметки.

Ваша обновленная панель теперь должна выглядеть следующим образом:

3

6. Создаем страницу настроек.

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

Можно добавить самые разные опции; к примеру, место вывода панели (верх или низ записи), используемые цвета, исключение определенных пользователей и т.д. В данном руководстве я сделаю пункт, который будет отвечать за то, где именно будет выводиться плагин – только в записях, только на страницах или и там, и там. Надеюсь, что этого будет достаточно, чтобы вы затем могли реализовать свои настройки.

Создаем страницу

Нам нужно настроить страницу в консоли администратора WordPress. Для этого мы должны сообщить WordPress, что именно система должна делать, когда инициировано действие admin_menu. Мы отредактируем функцию author_bio_admin_menu():

function author_bio_admin_menu()  
{  
    // this is where we add our plugin to the admin menu  
    add_options_page('Author Bio', 'Author Bio', 9, basename(__FILE__), 'author_bio_settings');  
}  

В коде выше мы создаем страницу настроек в консоли, и передаем ей следующие параметры:

  • Название меню — Author Bio
  • Заголовок страницы — Author Bio
  • Доступ – 9 (т.е. доступ только для администраторов)
  • Хэндл
  • Необходимая функция — author_bio_settings()

Затем мы должны добавить на страницу некоторый контент. Поскольку мы вызывали author_bio_settings() при создании страницы, эту функцию мы будем использовать для вывода на экран наших опций и обновления базы данных.

Функция для параметров

Данная функция требуется для вывода формы с опциями. Также она должна проверить, была ли отправлена форма, и, если да, то сохранить новые значения в базу данных. Во-первых, давайте посмотрим на создание самой формы.

function author_bio_settings()  
{  
    // this is where we'll display our admin options  
      
    $options['page'] = get_option('bio_on_page'); 
    $options['post'] = get_option('bio_on_post'); 
     
    echo '  
    <div class="wrap">  
        '.$message.'  
        <div id="icon-options-general" class="icon32"><br /></div>  
        <h2>Author Bio Settings</h2>  
          
        <form method="post" action="">  
        <input type="hidden" name="action" value="update" />  
          
        <h3>When to Display Author Bio</h3>  
        <input name="show_pages" type="checkbox" id="show_pages" '.$options['page'].' /> Pages<br />  
        <input name="show_posts" type="checkbox" id="show_posts" '.$options['post'].' /> Posts<br />  
        <br />  
        <input type="submit" class="button-primary" value="Save Changes" />  
        </form>  
          
    </div>';  
}  

Сначала мы получаем некоторые опции из базы данных. Естественно, пока у нас нет возможностей для их задания, поэтому они будут пустыми. Далее мы выводим на экран форму, которая уже стилизована при помощи стилей консоли WordPress. Вы можете отметить для себя, что мы выводим (на данный момент в исходном состоянии) переменную $message; с ее помощью мы можем уведомить пользователя об обновлении настроек, когда это будет завершено.

Мы печатаем наши опции в самом конце кода чекбокса. Если пользователь включит опцию, нас нужно будет сохранить ее в базу данных как «checked», чтобы установить данный чекбокс. Функции, которые мы используем для получения и установки опций – это get_option() и update_option() соответственно. Функция получения опции требует название опции (важно, чтобы оно было уникальным), функция обновления опции – требует название опции и новое значение. Если функция обновления не нашла опцию, она просто создает новую.

На данный момент ваша страница должна иметь следующий вид:

4

Теперь давайте добавим код, чтобы получить значения, отправленные через форму, и обновить опции в базе данных. Форма содержит в себе скрытое значение action, которое установлено в «update». Мы производим проверку данного значения – если оно установлено, то мы обновляем наши опции. Код должен быть расположен в самом верху нашей функции autor_bio_settings().

if ($_POST['action'] == 'update')  
{  
    $_POST['show_pages'] == 'on' ? update_option('bio_on_page', 'checked') : update_option('bio_on_page', '');  
    $_POST['show_posts'] == 'on' ? update_option('bio_on_post', 'checked') : update_option('bio_on_post', '');  
    $message = '<div id="message" class="updated fade"><p><strong>Options Saved</strong></p></div>';  
}  

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

Изменение вывода

На данном этапе мы можем установить опции и увидеть изменения на нашей странице настроек; однако функциональность нашего плагина до сих пор осталась прежней, поскольку мы ничего для этого не сделали. Таким образом, финальный шаг в нашем проекте – сделать так, чтобы функция вывода отвечала на выбор опций. Для этого мы в нашей функции author_bio_display() добавим следующий код, который будет находиться в самом верху, чтобы получить установленные опции.

$options['page'] = get_option('bio_on_page');  
$options['post'] = get_option('bio_on_post');  

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

if ( (is_single() && $options['post']) || (is_page() && $options['page']) )  

Здесь мы применяем два условия, которые, если они будут выполнены, приведут к отображению нашей панели. Не так уж и сложно, верно? Вот плагин целиком:

<?php  
/* 
Plugin Name: Nettuts Author Bio 
Plugin URI: http://www.nettuts.com/ 
Description: This plugin adds an authors bio to his/her post 
Author: nettuts 
Version: 0.1 
Author URI: http://www.nettuts.com/ 
*/  
  
function author_bio_display($content)  
{  
    // this is where we will display the bio  
      
    $options["page"] = get_option("bio_on_page");  
    $options["post"] = get_option("bio_on_post");  
      
    if ( (is_single() && $options["post"]) || (is_page() && $options["page"]) )  
    {  
        $bio_box =   
        "<div id="author-bio-box"> 
            ".get_avatar( get_the_author_meta("user_email"), "80" )." 
            <span class="author-name">".get_the_author_meta("display_name")."</span> 
            <p>".get_the_author_meta("description")."</p> 
            <div class="spacer"></div> 
        </div>";  
          
        return $content . $bio_box;  
    } else {  
        return $content;  
    }  
}  
  
function author_bio_style()  
{  
    // this is where we will style our box  
    echo   
    '<style type="text/css"> 
    #author-bio-box { 
        border: 1px solid #bbb; 
        background: #eee; 
        padding: 5px; 
    } 
     
    #author-bio-box img { 
        float: left; 
        margin-right: 10px; 
    } 
     
    #author-bio-box .author-name { 
        font-weight: bold; 
        margin: 0px; 
        font-size: 14px; 
    } 
     
    #author-bio-box p { 
        font-size: 10px; 
        line-height: 14px; 
        font-style: italic; 
    } 
     
    .spacer { display: block; clear: both; } 
    </style>';  
}  
  
function author_bio_settings()  
{  
    // this is where we will display our admin options  
    if ($_POST["action"] == "update")  
    {  
        $_POST["show_pages"] == "on" ? update_option("bio_on_page", "checked") : update_option("bio_on_page", "");  
        $_POST["show_posts"] == "on" ? update_option("bio_on_post", "checked") : update_option("bio_on_post", "");  
        $message = "<div id="message" class="updated fade"><p><strong>Options Saved</strong></p></div>";  
    }  
      
    $options["page"] = get_option("bio_on_page");  
    $options["post"] = get_option("bio_on_post");  
      
    echo " 
    <div class="wrap"> 
        ".$message." 
        <div id="icon-options-general" class="icon32"><br /></div> 
        <h2>Author Bio Settings</h2> 
         
        <form method="post" action=""> 
        <input type="hidden" name="action" value="update" /> 
         
        <h3>When to Display Author Bio</h3> 
        <input name="show_pages" type="checkbox" id="show_pages" ".$options["page"]." /> Pages<br /> 
        <input name="show_posts" type="checkbox" id="show_posts" ".$options["post"]." /> Posts<br /> 
        <br /> 
        <input type="submit" class="button-primary" value="Save Changes" /> 
        </form> 
         
    </div>";  
}  
  
function author_bio_admin_menu()  
{  
    // this is where we add our plugin to the admin menu  
    add_options_page("Author Bio", "Author Bio", 9, basename(__FILE__), "author_bio_settings");  
}  
  
add_action("the_content", "author_bio_display");  
add_action("admin_menu", "author_bio_admin_menu");  
add_action("wp_head", "author_bio_style");  
  
?>  

Заключение

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

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

Блог про WordPress
Комментарии: 12
  1. Dev01234

    долбанный процедурный гавнокод! фу!

  2. Александр

    Все работает, благодарю, осталось 2 вопроса:

    1. (в приоритете) Как сделать вывод по функции? т.е. без хуков. Куда я втыкну author_bio_display(); (например) там блок и вылезет.

    2. Можно ли его присобачить перед блоком комментов? здесь мы крепим к the_content, и выводим после него, а мне надо перед comments_template. Есть ли хук для него? не могу найти.

  3. Дмитрий (автор)

    1. Возможно, что получится самым простейшим способом — выводить блок в функции через echo. Нужно тестировать.

    2. Есть следующие хуки для подцепления, связанные с формой комментариев:

    comment_form_before
    comment_form_top
    comment_form_before_fields
    comment_form_after_fields
    comment_form
    comment_form_after

    Эти хуки не описаны в кодексе, но они существуют и работают. Пробуйте, тестируйте. Из названия хуков понятно, за что они отвечают.

  4. Anatoly

    add_action(‘the_content’, ‘author_bio_display’);
    С каких это пор хук the_content стал action?
    Всегда был вроде filter.
    Вызов через add_filter.
    Или add_action прямо таки работает?

    1. Anatoly

      Работает! ))
      Вот это новости! )

  5. Дмитрий (автор)

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

  6. Alex

    Здравствуйте, есть ряд вопросов и замечаний.
    1. код не работает, и первое что бросается в глаза, это в выводе html кода, присутствуют двойные кавычки у тэгов, и так со всем html кодом. К примеру 20,21,22 строчки:
    $bio_box =
    »
    «.get_avatar( get_the_author_meta(«user_email»), «80» ).»
    Должно быть так:
    $bio_box =
    »
    «.get_avatar( get_the_author_meta(‘user_email’), ’80’ ).»
    Или используйте Heredoc синтаксис.
    2. В коде присутствует функция get_option() берущая значение сохранённой опции, но нету объявление этой опции add_option(). Для меня эта тема новая, и возможно я что-то не понимаю, прошу разъяснить этот момент.

    1. Дмитрий (автор)

      Здравствуйте. По поводу первого пункта: посмотрите участок этого же кода выше в статье. Там он приведен в правильном виде.
      По поводу пункта 2: мы создаем форму и получаем из нее данные на странице настроек. Если пользователь зажег флажок возле нужного пункта, то мы передаем опцию. Более подробно читайте в пункте «Функция для параметров» в этой статье.

  7. Alex

    Спасибо за быстрый ответ!
    По первому пункту, я всё таки настаиваю) Во всех html тэгах надо убрать двойные кавычки, т.к. php думает что вывод блока echo прервался, и пытается выполнить «wrap» как переменную. Это касается всего html кода в этом примере. И пардон, неправильно указал строки примера кода: 79, 80, 81 и т.д.
    По второму нашёл ответ: update_option() «update_option сначала проверяет существует ли указанная опция, если нет, то добавляется новая.». То есть заранее объявлять опцию с помощью add_option() необязательно.
    И ещё вопросик. Разница между объявлением опций с помощью «add_option()» и «register_setting(), add_settings_field() и т.д.» состоит в том что, во втором случае можно вызывать callback функцию (функцию обратного вызова) для обработки значения опции при её сохранении в БД, правильно? То есть, если не надо обрабатывать введённые данные, можно обойтись «add_option()»?! Мне это напоминает механизм работы хуков: action и filter, первый вариант просто для замены функции, второй для предварительных манипуляций с ней.

    1. Дмитрий (автор)

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

      По-второму вопросу: в принципе, две функции тождественны. register_setting() — это часть Settings API, т.е. просто API для options.php. Такой способ является более простым и быстрым, особенно если нужно задать всего несколько опций. Вообще, Settings API был создан для упрощения добавления опций и работе с ними, потому он является предпочтительным (с версии 2.7). Можно обойти многочисленные подводные камни, которые возникают при работе с длинными формами. Плюс ко всему, есть callback-функция, как вы верно подметили.

      Так что вывод: эти две функции практически идентичны, если не касаться мелких деталей.

  8. Alex

    Спасибо за разъяснения! Очень кстати. В сети много примеров и описаний функций, но нет сравнений, и предпочтений в использовании.

  9. samsim

    Хороший пример написания плагина. Надо будет как то попробовать самому написать что то подобное. Автору респект!

Добавить комментарий для Дмитрий Алёшин Отменить ответ

Получать новые комментарии по электронной почте.