Как добавить страницу профиля сотрудника в WordPress. Эпизод 2

Начало статьи читайте по ссылке Как добавить страницу профиля сотрудника в WordPress. Эпизод 1

Добавляем шаблон профиля сотрудника в вашу тему WordPress

Для того, чтобы вывести одного вашего сотрудника, вам необходимо создать шаблон в вашей теме WordPress для обработки типа записей сотрудников (staff member). Начните с создания нового файла в папке вашей темы WordPress (wp-content/themes/yourthemename/).

Назовите этот файл single-staff-member.php. Используя имя произвольного типа записи со словом single, мы создали шаблон единичной записи для произвольного типа записи сотрудников (staff member).

Этот шаблон для сотрудников всё также пустой, поэтому давайте заполним его. Откройте файл single.php вашей темы, скопируйте и вставьте его содержимое в шаблон single-staff-member.php.

Одной из проблем, с которой вы можете столкнуться при копировании содержимого вашего файла single.php, это то, что некоторые темы могут использовать шаблон контента в файле single.php. Например, стандартная тема Twenty Thirteen использует шаблон контента в файле single.php вроде этого:

<?php get_template_part( 'content', get_post_format() ); ?>

Если ваша тема делает так же, то вам необходимо будет открыть файл шаблона (content.php) и скопировать его содержимое в файл single-staff-member.php, заменяя строку get_template_part.

Сейчас ваш файл single-staff-member.php будет точно таким, как и ваш single.php. Теперь нам нужно его подготовить, чтобы он умел выводить поля для сотрудников.

Вот наш файл single-staff-member.php, основанный на файл single.php темы Twenty Thirteen’s. Давайте взглянем на код.

<?php
/**
* Один сотрудник
*
*/

get_header(); 

// Сначала мы получаем поля из произвольного типа записи staff member в переменные

global $post;
$custom 	= get_post_custom();
$t_name 		= get_the_title();
$name_slug	= basename(get_permalink());
$title 		= $custom["_staff_member_title"][0];
$email 		= $custom["_staff_member_email"][0];
$phone 		= $custom["_staff_member_phone"][0];
$fax 		= $custom["_staff_member_fax"][0];
$bio 		= $custom["_staff_member_bio"][0];
$prof 		= $custom["_staff_member_prof"][0];
$fb_url		= $custom["_staff_member_fb"][0];
$tw_url		= 'http://www.twitter.com/' . $custom["_staff_member_tw"][0];
$li_url		= $custom["_staff_member_li"][0];
if(has_post_thumbnail()){

$t_photo_url = wp_get_attachment_url( get_post_thumbnail_id() );
$t_photo = '<img class="staff-member-page-photo" src="'.$t_photo_url.'" alt = "'.$title.'">';
}else{
$t_photo_url = '';
$t_photo = '';
}
$email_mailto = '<a class="staff-member-email" href="mailto:'.antispambot( $email ).'" title="Email '.$name.'">'.antispambot( $email ).'</a>';
?>	
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">


<?php /* Цикл */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<h1><?php the_title(); ?></h1> <!-- Это стандартный заголовок страницы -->

<h3><?=$title?></h3> <!-- Это заголовок сотрудника -->

<?=$t_photo?> <!-- Это фотография сотрудника -->

<p class="staff-member-bio"><?=$bio?></p>  <!-- Это биография сотрудника -->

<p><a href="<?=$fb_url?>">Facebook</a> | <a href="<?=$tw_url?>">Twitter</a></p>
<?php the_content();?>

<?php endwhile; ?>	

</div>

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

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

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

img.staff-member-page-photo { 
float:left;
margin:5px;
}

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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