Шорткод. Блок записів у контенті сторінки. Урок 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 $cats_id,
‘posts_per_page’ => $per_page
)
);
$content = «;
if( $get_posts->have_posts() ){
$content .= ‘

‘;
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 = ‘‘;
}
$content .= «. $img . «;
}
$content .= ‘

‘;
wp_reset_query();
}
return $content;
}

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

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

На цьому наш урок закінчено. Удачі і до нових зустрічей!