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

17

Від автора: У цьому уроці ми завершимо написання шорткода, що дозволяє вставляти блок записів обраної рубрики всередину контенту сторінок або записів. Також ми додамо оформлення до виведеним блоку для більшої привабливості.

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

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

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

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

У відео версії уроку ви знайдете докладний коментування написаного коду. Тут же я викладу лістинги коду.

Отже, файл 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 = ‘Шорткод. Блок записів у контенті сторінки. Урок 2‘;
}
$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%;
}

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