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


1. Подготовьте биографию заранее

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


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

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

/* 
Plugin Name: TUTSDAY Author Bio 
Plugin URI: http://tutsday.ru 
Description: Этот плагин добавляет авторскую биографию в пост
Author: Alexey Serge
Version: 0.1 
Author URI: http://tutsday.ru
*/

3. Функции и Экшены (Actions)

Теперь мы создадим основной каркас для нашего плагина. Вставьте нижеприведенный код после системного комментария в файле ntauthorbio.php.

function author_bio_display($content)  
{
    //тут мы напишем функцию отображения биографии
}  
function author_bio_style()  
{  
    //тут мы опишем оформление для нашего блока с биографией
}  
function author_bio_settings()  
{  
    //тут мы опишем функцию вывода опций в администраторском разделе
}  
function author_bio_admin_menu()  
{  
    //тут мы добавим плагин в меню панели администрирования
}  
add_action('the_content', 'author_bio_display'); 
add_action('admin_menu', 'author_bio_admin_menu'); 
add_action('wp_head', 'author_bio_style');

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

При создании плагинов важно понимать, что такое «hook» — это место в цикле, откуда можно подключиться к wordpress и запустить ту или иную функцию. Например, мы использовали хук для нашей функции author_bio_display в the_content. Это значит, что когда будет вызвана функция the_content (эта функция позволяет выводить содержимое записей на страницу), сначала запустится наша функция.

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

  • the_content – при помощи него отображается контент страницы/поста
  • admin_menu – необходим для создания пункта меню панели администрирования
  • wp_head – позволяет добавлять в теги <head>. Вот поэтому вы вызываете функцию wp_head() перед закрывающим тегом </head>, когда проектируете темы оформления.

4. Функция отображения

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

function author_bio_display($content)  
{  
    if ( is_single() || is_page() ) 
    {  
        $bio_box = // placeholder;  
        return $content . $bio_box;  
    } else {  
        return $content;  
    }  
}

Необходимо, чтобы автобиография отображалась только на одиночной странице (single page / page.php) или одиночном посте (single post / single.php), т.е. не в архиве, не списках разделов, не на главной странице. Для этого мы воспользуемся стандартными функциями (условными тегами / Conditional Tags) — is_single() и is_page() для проверки. Теперь необходимо добавить код, чтобы появилось поле для автобиографии. Измените $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>';

Стиль, конечно же, можно потом поменять на ваш вкус, но  пока что будем использовать простое поле и добавим немного CSS, чтобы его оформить. Используем несколько указанных выше функций, чтобы загрузить требуемые данные. get_avatar()  — это встроенная функция в WP, которая вернет пользовательский аватар, если  есть адрес электронной почты. Передадим функции  get_avatar() 2 параметра: авторский адрес электронной почты и размер фотоизображения (в нашем случае это 80px*80px). Функция get_the_author_meta поможет  загрузить любую  информацию о зарегистрированном в WP пользователе. Весь  список параметров можно посмотреть в кодексе WordPress Codex.

Если мы запустим плагин, то увидим что-то наподобие этого:

Не стилизованный блок биографии автора

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


5. Стили оформления

Если вы дизайнер, то вот ваш шанс сделать так, как вам нравится! Кода внизу вполне достаточно, чтобы освежить и сделать блок более привлекательным и читабельным. Нам необходимо вставить CSS код в рамки тега <head>. Для этого используем хук (hook) в wp_head. Этого делать не обязательно, можно просто поместить этот код в вашу таблицу стилей. Функция author_bio_style() необходима, чтобы поместить CSS блок.

function author_bio_style()  
{  
    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 не входит в  этот урок. Обычно мы просто создаем поле с границей и помещаем фотоизображение слева. В конце добавляем разделитель, чтобы убедиться, что поле достаточно велико для изображения и текста. В конечном счете, все будет зависеть от макета вашей страницы.

Ваше новоизобретенное поле должно выглядеть более привлекательно.

Стилизованный блок биографии пользователя


6. Создание страницы настроек плагина

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

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

Необходимо создать страницу в панели администрирования. Для этого нам надо сообщить WP, что делать, когда он вызывает экшн admin_menu. Отредактируем функцию author_bio_admin_menu() , чтобы та приобрела следующий вид:

function author_bio_admin_menu()
{
//добавляем плагин в меню
add_options_page('Author Bio', 'Author Bio', 9, basename(__FILE__), 'author_bio_settings');
}

Этот код создает страницу с опциями в панели управления и передает следующие параметры:

add_options_page( $page_title, $menu_title, $capability, $function);

$page_title — Заголовок страницы.

$menu_title — Название пункта меню в панели управления.

$capability — доступность пункта меню (9 и выше — только для администраторов).

$function — функция, которая будет запускаться при переходе на страницу настроек.

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

Функция настроек плагина

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

function author_bio_settings()

{

//здесь отображаем опции администратора

$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>Настройки автобиографии</h2>

<form method="post" action="">

<input type="hidden" name="action" value="update" />

<h3>Где отображать автобиографию пользователя?</h3>

<input name="show_pages" type="checkbox" id="show_pages" '.$options['page'].' /> Страницы<br />

<input name="show_posts" type="checkbox" id="show_posts" '.$options['post'].'/> Посты<br />

<br />

<input type="submit" class="button-primary" value="Сохранить" />

</form>

</div>';

}

На данный момент ваша страница настроек должна выглядеть вот так:

Страница настроек плагина автобиографии

Теперь попробуем добавить код, чтобы отправить данные формы и обновить их в базе данных. Форма содержит скрытый показатель action, который настроен на апдейт. Проверим, установлен ли этот показатель, и если это так, обновим настройки. Код должен быть размещен вверху функции 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>Настройки сохранены</strong></p></div>';

}

Чтобы проверить, были ли отправлены данные формы мы использовали тернарный оператор на проверку значений. Если данные были отправлены — установим значение опции в качестве checked, в противном случае отправится пустое. Затем выведем сообщение об успешном изменении.

Дополнительная настройка отображения автобиографии

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

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

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

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

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

Тут мы добавили наши значения опций к уже имеющимся условиям и если значение опций не будет пустым — условие сработает.

Ниже приведен полный код плагина:

 

<?php  
/*
Plugin Name: TUTSDAY Author Bio
Plugin URI: http://tutsday.ru
Description: Этот плагин добавляет авторскую биографию в пост
Author: Alexey Serge
Version: 0.1
Author URI: http://tutsday.ru
*/

function author_bio_display($content)  
{  

    //тут мы напишем функцию отображения биографии 

    $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()  
{  
	//тут мы опишем оформление для нашего блока с биографией

    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()  
{  

	//тут мы опишем функцию вывода опций в администраторском разделе

    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>Настройки сохранены</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>Настройки автобиографии</h2>

	<form method="post" action="">
		<input type="hidden" name="action" value="update" />
		<h3>Где отображать автобиографию пользователя?</h3>
		<input name="show_pages" type="checkbox" id="show_pages" '.$options['page'].' /> Страницы<br />
		<input name="show_posts" type="checkbox" id="show_posts" '.$options['post'].'/> Посты<br />
		<br />
		<input type="submit" class="button-primary" value="Сохранить" />
	</form>

	</div>'; 
}  

function author_bio_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");  

?>

Вуаля!

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

Если у вас возникли вопросы, оставляйте комментарии!


Теги:


  • AlexeySerge

    Буду рад комментариям! :)