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

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

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

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

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.

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

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

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 для активации данного эффекта. В конечном счете все будет зависеть от вашей разметки.

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

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() соответственно. Функция получения опции требует название опции (важно, чтобы оно было уникальным), функция обновления опции – требует название опции и новое значение. Если функция обновления не нашла опцию, она просто создает новую.

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

Теперь давайте добавим код, чтобы получить значения, отправленные через форму, и обновить опции в базе данных. Форма содержит в себе скрытое значение 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");  
  
?>  

Заключение

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