Пост с картинкой wordpress
Подбирая шаблон для своего сайта, всегда приходится «допиливать» дизайн под себя. Тем более когда речь идет о создании дизайна с нуля. Не так давно мне понадобилась возможность вывода поста определенной категории в определенном месте. Передо мной встала задача следующего содержания:
1.Вывод заголовка поста
2.Вывод анонса определенной длины
3.Вывод картинки поста
4.Вывод в определенном месте
5.Вывод определенной категории
Я сразу же кинулся в гугл и много чего нашел, но как это часто бывает, нашел не совсем то, что нужно. Одни решения выводили только заголовок статьи с картинкой, другие не выводили картинку вовсе, третьи предлагали в каждой статье отмечать ту картинку, которая будет служить миниатюрой, или же создавать изображение в отдельной папке. Как-то всё это очень не удобно, да и хотелось реализовать вывод поста с картинкой без плагина.
В итоге я плюнул, и решил сам написать, позаимствовав некоторые функции из найденных решений.
Итак нам понадобятся две функции – вывод анонса и вывод картинки:
Функция номер раз: поиск первой картинки в посте (функция не моя, подсмотрел где-то на блоге):
function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ $first_img = "/images/default.jpg"; }//изображение по умолчанию, если в статье нет изображение return $first_img; }
Функция номер два – вывод анонса поста, с фиксированным числом символов (тоже не моё):
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') { $content = get_the_content($more_link_text, $stripteaser, $more_file); $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]>', $content); $content = strip_tags($content); if (strlen($_GET['p']) > 0) { echo "<p>"; echo $content; echo " <a href='"; the_permalink(); echo "'>"."Read More →</a>"; echo "</p>"; } else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) { $content = substr($content, 0, $espacio); $content = $content; echo "<p>"; echo $content; echo "..."; echo "<div style='clear:left; '></div><br/><a href='"; the_permalink(); echo "' style='text-align:right;color: #000;'>".$more_link_text."</a>"; echo "</p>"; } else { echo "<p>"; echo $content; echo " <a href='"; the_permalink(); echo "'>"."Read More →</a>"; echo "</p>"; } }
Обе эти функции копируем друг за другом в файл functions.php нашей темы.
Теперь дело за малым – вывести на страницы нашего блога. Прежде всего необходимо сделать конструкцию из div-ов, т.е. определиться как внешне будет выглядеть пост. Я для себя выбрал следующую структуру: название поста, ниже слева изображение, справа его обтекает текст статьи. Пример можно увидеть на этом сайте справа в сайдбаре.
Код который нужно разместить в месте где планируете вывод (в моем случае – это sidebar.php):
<div align="left" > <?php query_posts('cat=77&showposts=10'); ?> <!--вывод категории 77, количество постов 10--> <h2>заголовок для постов</h2> <div > <?php if (have_posts()) : while (have_posts()) : the_post();?> <div class="experiense"><a href="<?php the_permalink() ?>" ><?php the_title() ?></a></div> <div> <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="80"/> <!--width="80" - ширина миниатюры--> <div> <?php the_content_limit(200, "[узнать больше...]"); ?> <!--вывод анонса в 200 символов, [узнать больше...] будет выводиться после анонса--> </div> </div> <?php endwhile; else: ?> <?php endif; ?> <?php>wp_reset_query();?> </div> </div>
Вот, собственно и все. Задача выполнена, я получил то что хотел, если кому-то статья окажется полезной – рад стараться.
Спасибо большое автору за помощь!
А можно выводить посты в отдельно для каждой записи? вставлять код не в шаблон, а в пост?как это можно сделать?
Если вставлять пост в шаблон, то код php не нужен, просто вставляйте картинку, ссылку и текст.
Можно сделать вставку php кода, но нужно ставить плагин, чтобы появилась такая возможность. Я такой вариант использовал на одном сайте, но есть недостаток – пост редактировать можно только в режиме HTML, визуальный редактор работать не будет.
P.S. может, конечно, есть плагин более продвинутый, честно говоря, не в курсе.