возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-13 в теме: Контент, шапка site
Запросто с WordPress создание и продвижение сайтов ATs media

Как к статье добавить блок ссылок на похожие по теме записи сайта

Сегодня интересная статья для новичка, старающегося для своего блога практически!

А именно покажу код, который замечательным образом отработает вывод похожих записей рубрики (категории) – а самое главное – с миниатюрой к статьям. Код лёгкий.

Идея и кодовое решение с блога wp-kama, но !! я несколько код переработал под свои требования, а именно:

1 – добавил к ссылкам похожих записей миниатюры post_thumbnail. 2 – обернул всё это чудо в дивы, меж тем как у Тимура организовано тегами li – мне симпатичнее дивы, ибо к значениям li в шаблонах многое “вкупе” привязано… (ну, так привык)

Что ж, давайте подробнее и по порядку:

Отдёрнем занавес…


 

Добавляем блок похожих по теме записей рубрики (по кольцу)

 

 

 

 

В предыдущей статье (ссылка ниже) мы говорили о том, как добавляются ссылки на похожие записи категории, например, рандомно… Вариант рассматривали также с миниатюрами.

 

 

Как добавить в статью ссылки на похожие записи — с миниатюрами — без плагина

 

 

Нынче, показанный код организует (и запросто) более правильную перелинковку, а именно выведет в блоке жёстко предыдущие записи. Это, может быт, более логично в плане оптимизации – рандомность) создаёт беспорядок: т.е при перезагрузке “статьи” записи меняются – этакая своеобразная автоматическая перелинковка статей блога!

 

 

Ко сведению же нынешнего кода:

если читатель находится “на финальной статье рубрики” выводиться в блоке будет то же указанное количество ссылок, только в этом случае – все четыре ссылки на статьи рубрики покажут линки и миниатюры на самые свежие статьи и их категории.

Т.е код отрабатывает “по кольцу”

 

 

 

 

 

код перелинковки статей рубрики – предыдущие по теме записи

 

 

 

 

/** Предыдущие записи из рубрики (относительно текущей записи) + кольцевая перелинковка (вызов функции: <?php kama_previous_posts_from_cat (5); ?> )
----------------------------------------------------------------------------------------
Параметры передаваемые функции. В скобках указано дефолтное значение.
post_num (4) = количество ссылок
format ('') = {date:j.M.Y} - {a}{title}{/a} ({comments})
cache ('') = включить кэш (по умолчанию выключен). Пишем 1, чтобы включить
list_tag (li или у меня div) = Тег списка.
echo (true) = Выводить на экран или возвращать для обработки (false)
*/
function kama_previous_posts_from_cat ($post_num=4, $format = '', $cache = '', $list_tag='li', $echo=true){
global $post, $wpdb;

$cache_key = (string) md5( __FUNCTION__ . $post->ID );
$cache_flag = __FUNCTION__;

if ( $cache && $cache_out = wp_cache_get($cache_key, $cache_flag) ){
if ($echo) return print($cache_out);
else return $cache_out;
}

$cat = get_the_category($post->ID);
$cat_id = (int) $cat[0]->term_id;

$same_join = "SELECT ID, post_title, post_date, comment_count, guid
FROM $wpdb->posts p
LEFT JOIN $wpdb->term_relationships rel ON (p.ID = rel.object_id)
LEFT JOIN $wpdb->term_taxonomy tax ON (rel.term_taxonomy_id = tax.term_taxonomy_id)";
$same_and = "AND tax.term_id = '$cat_id'
AND tax.taxonomy = 'category' AND p.post_status = 'publish' AND p.post_type = 'post'";
// пробуем получить предыдущие записи
$sql = "$same_join
WHERE p.ID < {$post->ID}
$same_and
ORDER BY p.post_date DESC
LIMIT $post_num";
$res = $wpdb->get_results($sql);

$count_res = count($res);

// если количество меньше нужного, делаем 2-й запрос
if ( !$res || $count_res<$post_num ){
$exclude = $post->ID;
if ($res) foreach ($res as $id) $exclude .= ','.$id->ID;
$post_num = (int) $post_num-$count_res;
$sql = "$same_join
WHERE p.ID NOT IN ($exclude)
AND p.ID != {$post->ID}
$same_and
ORDER BY p.post_date DESC
LIMIT $post_num";
$res2 = $wpdb->get_results($sql);

$res = array_merge($res,$res2);
}
if (!$res)
return false;

if ($format)
preg_match ('!{date:(.*?)}!',$format,$date_m);

$out = $x = '';
foreach ($res as $pst){
$x = ($x == 'div1') ? 'div2' : 'div1'; //'li1') ? 'li2' : 'li1'
$Title = $pst->post_title;

// прикручиваем миниатюру поста (если такая имеется)
$thumb_id = get_post_thumbnail_id($pst->ID); // прицепляем миниатюру выводить: $img_url
$thumb_url = wp_get_attachment_image_src($thumb_id,'full', true); // прицепляем миниатюру выводить: $img_url
$img_url = $thumb_url[0]; // прицепляем миниатюру выводить: $img_url
$image = $pst->$img_url; // прицепляем миниатюру выводить: $img_url onclick='return !window.open(this.href)'
// окончание цикла привязки миниатюры


$a1 = "<a href='". get_permalink($pst->ID) ."' title='{$Title}'><div class='poss'><img title='{$Title}' src='$img_url' alt='{$Title}' /></div>";
$a2 = "</a>";
//

if ($format){
$date = apply_filters('the_time', mysql2date($date_m[1],$pst->post_date));
$Sformat = str_replace ($date_m[0], $date, $format);
$Sformat = str_replace('{title}', $Title, $Sformat);

$Sformat = str_replace('{a}', $a1, $Sformat);
$Sformat = str_replace('{/a}', $a2, $Sformat);
$Sformat = str_replace('{comments}', (($pst->comment_count==0)?'':$pst->comment_count), $Sformat);
}
else
$Sformat = $a1.$Title.$a2;

$out .= "\n<div class='$x'>" . "{$Sformat}</div>";
}

if ($cache) wp_cache_add($cache_key, $out, $cache_flag);

if ($echo)
return print $out;

return $out;
}
/** предыдущие записи в рубриках **/

 

 

 

На данном этапе в коде нас теперь интересуют див классы, а именно такая строка:

 

$a1 = "<a href='". get_permalink($pst->ID) ."' title='{$Title}'><div class='poss'><img title='{$Title}' src='$img_url' alt='{$Title}' /></div>"; $a2 = "</a>";

 

 

Этот .poss див советую прописать прямо в коде (как показано в строке и коде), хотя можно как-то и в файле шаблона отдельной записи организовать: css примеры ниже…

 

 

 

 

Далее – чтобы привязать блок похожих по теме записей к статье рубрики, нужно нашу функцию прицепить к посту: к файлу отвечающему за вывод отдельной записи.

 

 

В файле post-single.php ИЛИ single.php (у кого как) в необходимое местечко прописываем этот вызов функции:

 

 

<div class="pos"><?php kama_previous_posts_from_cat (4, '<div class="pos4">{a}{title}{/a}</div><hr class="ds">'); ?></div>

 

 

 

Обращаю внимание

как видите, и здесь заданы свои стили, которые вам придётся подстраивать в соответствии своего шаблона.

Кое-какие примеры css ниже:

 

 

 

 

css к блоку вывода предыдущих похожих записей из рубрики

 

 

 

 

У меня неоднократно спрашивают…

 

 

как сделать блок похожих записей, чтобы визуально было как у Вас на сайте…

 

 

 

Вот стили css, такие как и у меня:

 

Класс основного блока похожих записей – pos

 

.pos {
margin: 0 24px;
border-radius: 4px 4px;
}

 

 

 

Класс блока ссылки = pos4

 

.pos4 {
border: 1px solid #DEDEDE;
border-radius: 4px 4px;
font-size: 9px;
}

 

 

 

Класс ссылки = pos a

 

.pos a {
background-color: #F5F5F5;
border-radius: 4px 4px;
border-bottom: 1px solid #AAA;
font-style: italic;
font-size: 12px;
display: block;
margin: 2px;
padding: 12px;
}

 

 

 

Класс картинки = pos img

 

.pos img {
width: 103px;
height: 73px;
float: left;
margin: -24px 9px 4px 0;
box-shadow: 1px 5px 17px -4px #777;
transition: all 1s ease-out;
}

 

 

Блок картинки = poss

 

.poss {
margin: 0;
}

 

 

Отдельный div блок “ссылки”.

 

.div1, .div2 {
background-color: #F5F5F5;
border: 1px solid #DEDEDE;
border-radius: 4px;
margin: 5px 18px;
}

 

 

 

Произвольное значение тега: hr (у нас “невидимое” подчёркивание: необходимо для разграничения – правильной геометрии блоков – элементов…) – у нас селектор hr.ds

 

hr.ds{
border:1px solid #F5F5F5;
}

 

 

 

И так далее… всё возможно поправить под свой шаблон 100%.

 

 

 

Код, конечно же, заносится в файл функций functions.php активной темы. Или создаётся отдельный лёгкий плагин (полезно для всяких там скоростей блога/сайта, и в качестве подпитки дельных личных знаний))

 

Если подходить к созданию шаблона/блога/сайта грамотно – скоростя загрузок страниц будут приличными! А плагин этому здорово поспособствует! Всякие байки о вреде плагинов сильно преувеличены: скоростям вредит некачественный код, но не плагин!

 

Словом, читайте о всяких плюсах способа… добавочного файла/плагина функций!

 

 

 

некоторые преимущества функции переликовки записей по кольцу

 

 

 

  1. запросто можно задать (как-то на своё усмотрение) форматы вывода информации о похожих записях: комментарии в коде!
  2. используется возможность включения кэширования (может не всегда оправдано, коли на сайте используется сторонний плагин кэша – тестируйте!)
  3. ссылки выведутся по id, весма прилично: т.е коли вы поменяте из каких-то соображений дату поста, то – пост будет выведен в соответствии с настройками кода. Перетасовки избегаем!
  4. в идее kma использовались теги li, я изменил на div, что, на мой взгляд, решает проблему более тонкой настройки: можно быстренько подогнать под любой шаблон (напоминаю: если хотите вернуть li в коде есть авторский вариант).

 

 

 

небольшая справка к комментариям кода:

 

{comments} – если выводить комментарии к статье;

{title} – заголовок статьи, это понятно, однако – при выводе с миниатюрами статьи, имейте в виду ссылку титле;

{date:j.M.Y} – дата в формате j.M.Y (14.Янв.2017)

 

Регулировка в строке вывода основной функции (в single.php)

 

 

 

 

в качестве постскриптум:

 

Мне не так давно (в комментариях) посетовали на то, что я, мол, пишу не совсем понятно для новичка!!

 

Дело в том, что если приняться расписывать подробнейшим образом, получится пост вроде известного поста Л.Н. Толстого “Война и мир”…

 

Думается, вариант выхода из непоняток прост: спрашивайте… задавайте вопросы коли не ясно что. Есть же комментарии…

 

 

 

Желаю удачи в создании и ведении сайта…

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 


подписка feedburner Online консультация по настройкам и созданию сайтов на WordPress


!..подписываясь на обновления mihalica.ru
...расстаёмся с невежеством..!


 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Код заработал хорошо!
    Но как только пыталась вывести комментарии к ссылкам – белое окно! Почему это так??
    Подскажете..?

    $a1 = "<a href='". get_permalink($pst->ID) ."' title='{$Title}'><div class='poss'><img title='{$Title}' src='$img_url' alt='{$Title}' {comments} /></div>";
    $a2 = "</a>";
    Ответить - Валерия

    • Здравствуйте Валерия!!
      У Вас ошибка в подходе к “вызову функции числа” комментов: !! {comments} !!

      Нужно так, как описано в комментариях к коду – уже в файле single.php (ну или какой там у Вас):

      format ('') = {date:j.M.Y} - {a}{title}{/a} ({comments})

      Т.е строку php вызова функции “похожих записей” (показанную в статье) организовать как-то так:

      <div class="pos"><?php kama_previous_posts_from_cat (4, '<div class="pos4">{a}{title}{/a} ({comments})</div><hr class="ds">'); ?></div>

      Вот и всё!!

      Ответить - Михаил

  2. Здравствуйте! Подскажите как сделать вывод похожих записей не 4, а 3 количества. Где внести изменения? Буду рад ответу.

    Ответить - Гена

    • Здравствуйте Гена!
      Строка:
      post_num (4) число равно количеству ссылок.
      Регулировать количество ссылок в функции вывода “формы постов по теме” – где число “4” регулятор – ставьте нужное:

      <?php kama_previous_posts_from_cat (4, '<div class="pos4">{a}{title}{/a}</div><hr class="ds">'); ?>
      Ответить - Михаил

  3. Еще вопрос. Как уменьшить отступы между постами?

    Ответить - Гена

    • Я там в статье кое что добавил относительно css hr.ds… Это важно.

      Отступы регулировать в CSS: .pos4 .pos a … и .div1, .div2 соответственно: всеми этими селекторами – их значениями – подбирается оптимальный вариант в соответствии со своим шаблоном. Конкретно править свойства margin: и их значения – 5px 8px;
      (css переносить к себе в шаблон)

      Ответить - Михаил

  4. Спасибо огромное! Буду править.

    Ответить - Гена

    • Не за что…
      Разбирайтесь… спрашивайте, если что..!

      Ответить - Михаил

  5. Здравствуйте Михаил!
    Посты в блоге пронумерованы – 1, 2, 3, и т. д.
    Можно ли, как то вывести по порядку постов, а не последнии записи?

    Ответить - Станислав

    • Решил проблему:
      Поменял DESC на ASC

      Ответить - Станислав

      • Решение кривое, лично для меня. Данное решение выводит посты не с последнего опубликованного, а с первого поста.
        Мне для публикации уроков потребовалась сортировка и вывод постов по присвоенному номеру, а не по ID и дате.
        Нашел хороший скрипт, но вывод делаю Вашим скриптом.
        Придется переработать полностью скрипт, и SQL запрос.
        Может подскажите с чего начинать?
        Можно ли заменить

        $post->ID на $post->Position

        Position – это организованное поле с номером записи в панели управления записями. При публикации записи в панели есть дополнительный блок, в котором присваивается нужный номер.
        Заранее спасибо.

        Ответить - Станислав

        • Да, настройки этого скрипта для “кольцевой перелинковки”, но, думаю, и для решения вашей задачи что-то придумать возможно – однако, неплохо бы взглянуть, как отрабатывает ваш код:

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

          Номер посту присваивается автоматически?

          Ответить - Михаил

          • Нет номер проставляется тот который нужен по порядку. То есть урок 1, присваиваю номер 1, урок два, присваиваю 2 и т. д. Уроки публиковались не совсем по порядку.
            Вот PHP скрипт:

            ОТКРЫТЬ скрипт

            
            <?php
            /**
             * Сортировка записей
            */
            /* Создать пользовательское поле метаданных на экране редактирования записи */
            add_action( 'add_meta_boxes', 'jpen_custom_post_sort' );
            function jpen_custom_post_sort( $post ){
              add_meta_box(
                'custom_post_sort_box',
                'Position in List of Posts',
                'jpen_custom_post_order',
                'post' ,
                'side'
                );
            }
            
            ?>
            <?php
            /* Добавить поле в метабокс */
            function jpen_custom_post_order( $post ) {
              wp_nonce_field( basename( __FILE__ ), 'jpen_custom_post_order_nonce' );
              $current_pos = get_post_meta( $post->ID, '_custom_post_order', true);  ?>
             <p>Введите позицию, в которой вы хотите, чтобы сообщение появилось. Например, сначала появится сообщение «1», затем «2» и т. д.</p>
              <p><input type="number" name="pos" value="<?php echo $current_pos; ?>" /></p>
              <?php
            }
            ?>
            
            
            <?php
            /* Сохраните данные в post_meta_data */
            add_action( 'save_post', 'jpen_save_custom_post_order' );
            function jpen_save_custom_post_order( $post_id ){
              if ( !isset( $_POST['jpen_custom_post_order_nonce'] ) || !wp_verify_nonce( $_POST['jpen_custom_post_order_nonce'], basename( __FILE__ ) ) ){
                return;
              }
              if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
                return;
              }
              if ( ! current_user_can( 'edit_post', $post_id ) ){
                return;
              }
              if ( isset( $_REQUEST['pos'] ) ) {
                update_post_meta( $post_id, '_custom_post_order', sanitize_text_field( $_POST['pos'] ) );
              }
            }
            
            ?>
            <?php
            /* Добавить пользовательский столбец заказа в список сообщений */
            add_filter('manage_posts_columns' , 'jpen_add_custom_post_order_column');
            function jpen_add_custom_post_order_column( $columns ){
              return array_merge ( $columns,
                array( 'pos' => 'Position', ));
            }
            
            ?>
            <?php
            /* Отобразить пользовательский порядок сообщений в списке сообщений */
            add_action( 'manage_posts_custom_column' , 'jpen_custom_post_order_value' , 10 , 2 );
            function jpen_custom_post_order_value( $column, $post_id ){
              if ($column == 'pos' ){
                echo '<p>' . get_post_meta( $post_id, '_custom_post_order', true) . '</p>';
              }
            }
            
            	?>
            <?php
            /* Sort posts on the blog posts page according to the custom sort order 
             * Сортировка сообщений на странице сообщения в блоге в соответствии с пользовательским порядком сортировки */
            add_action( 'pre_get_posts' , 'jpen_custom_post_order_sort' );
            function jpen_custom_post_order_sort( $query ){
              if ( $query->is_main_query() && is_home() ){
                $query->set( 'orderby', 'meta_value' );
                $query->set( 'meta_key', '_custom_post_order' );
                $query->set( 'order' , 'ASC' );
              }
            }
            
            
            ?>
            

            Теперь надо увязать все это с Вашим скриптом.
            Ну да и скрипт указанный может кому пригодится.
            Спасибо за ответ.

            Ответить - Станислав

            • Благодарю, Станислав, за скрипт! точно, вероятно, кому-то пригодится…
              (я его немного поправлю…
              …и на тестовый сайт подброшу и попробую как-то организовать… Нужно наглядно увидеть отработку кода в реалиях, так сказать… ибо пока что в голове каша)
              То есть нужно реализовать сортировку, как вы говорите, по присвоенному номеру. Правильно?

              Ответить - Михаил

              • Здравствуйте Михаил и спасибо за поддержку!

                То есть нужно реализовать сортировку, как вы говорите, по присвоенному номеру. Правильно?

                Да именно так, существующие записи и новые посты, им можно дать уникальный номер по нужному порядку и вордпресс должен их выводить от первого ко второму и т.д. Это интересно в плане вывода обучающих материалов, когда нужно соблюсти порядок уроков. В остальных случаях в этом просто нет нужды. Ваш скрипт прекрасно работает на блоге, выводит то, что нужно, последнии записи. А вот для вывода уроков на субдомене не очень подходит. Его использую, потому что вывод идет с миниатюрами, укатал CSS и достаточно прикольно получается. Хотелось бы и в обучалке на субдомене использовать его же.
                Я так понимаю, что первоначально необходимо SQL запрос подгонять под эти нужды. К сожалению все тестовые домены кончались, буквально вчера последний закончался – срок регистрации продлевать не хочу, наверное возьму новый за 150 руб. на год. И буду ковырять. Если у Вас что то получится, то киньте ответ.
                Еще раз спасибо за быстрый ответ и поддержку.


              • День добрый, Станислав!
                Обязательно поделюсь решением, потому как в принципе ваша задача интересная – выводить (сортировать) контент по каким-то его кастомным значениям… Именно с этим кодом подобных эксов не проводил…


      • Здравствуйте, Станислав!
        Да, об опциях DESC и ASC я в посте подробно не упоминал…

        Ответить - Михаил