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

Шорткод

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

автор

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

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

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

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

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

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

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее
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%;
}

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Получить

Метки: ,

Похожие статьи:

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

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

Комментарии (1)

  1. Василий

    Хороший урок, но следовало бы его дополнить всего 2-мя вещами, без которых он кажется не полным на мой взгляд.
    1. Выводить записи рандомно.
    2. Запретить вывод ссылки на ту запись, на которой находится пользователь, тоесть на саму себя

    Я сразу скажу, что не знаю как это сделать

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

Ваш 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