Шорткод. Блок записей в контенте страниц. Урок 2

Шорткод

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

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

Итак, в файл functions.php активной темы добавим код шорткода:

add_shortcode( 'wfm-cats', 'wfm_add_category_posts' );
function wfm_add_category_posts($atts){
	if( empty($atts['id']) ) return;
	$per_page = !empty($atts['count']) ? (int)$atts['count'] : 3;
	if( $per_page < 1 ) $per_page = 3;

	$cats_id = explode(',', $atts['id']);
	
	$get_posts = new WP_Query(
		array(
			'category__in' => $cats_id,
			'posts_per_page' => $per_page
		)
	);

	$content = '';

	if( $get_posts->have_posts() ){
		$content .= '<div class="insert-posts">';
		while( $get_posts->have_posts() ){
			$get_posts->the_post();

			if( has_post_thumbnail() ){
				$img = get_the_post_thumbnail( get_the_ID(), 'full', array('title' => get_the_title() ) );
			}else{
				$img = '<img src="' . get_template_directory_uri() . '/images/no_img.png" alt="" title="' . get_the_title() . '">';
			}

			$content .= '<a href="' . get_permalink() . '">' . $img . '</a>';
		}
		$content .= '</div>';
		wp_reset_query();
	}

	return $content;
}

Ну и минимальное оформление добавим в файл style.css активной темы:

.insert-posts{
	border: 10px solid #ccc;
	padding: 20px;
	margin: 0 0 20px 0;
	box-shadow: 0 0 10px #ccc;
}
.insert-posts img{
	margin: 0 20px 20px 0;
	border: 5px solid #ccc;
	transition: border-radius .5s;
}
.insert-posts a:hover img{
	border-radius: 50%;
}

На этом наш урок завершен. Удачи и до новых встреч!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree