Украшаем боковую панель превью
С неделю назад в блок последних записей, который расположился в боковой панели, я добавил превью. Это конечно не спасет мою боковую панель от удаления, меня все еще не покинула мысль о ее бесполезности, но все же разнообразить, как-то украсить, в общем добавить яйцо 🙂 какой-то изюминки это поможет, да и внимание посетителей привлечет больше, чем просто текстовые ссылки.
Честно говоря, я даже не думал писать пост об этом. Не знаю почему, да и не важно это. Главное, что просьбы читателей помочь в реализации подобных блоков изменили мое отношение и заставили таки написать. Приступим.
Первым делом качаем scripts.zip. Этот архив содержит папку scripts, в которой находятся файл timthumb.php, отвечающий за уменьшение и обрезку изображений, а также папка cache, в которую скрипт будет складывать созданные превью.
Распакованную папку scripts заливаем к себе на сервер. Я закинул в папку с темой, думаю Вам стоит сделать также. Папке cache в обязательном порядке выставляем полные права доступа на чтение, запись и выполнение данных, а именно 777.
Сделали. Переходим к редактированию темы.
Сначала правке подвергнется файл functions.php. В него нам необходимо добавить функцию, которая будет определять первое изображение в посте:
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]; // no image found display default image instead if(empty($first_img)){ $first_img = " "; } return $first_img; } |
Прописываем эту функцию перед закрывающим ?> и сохраняем. Кстати, Вы также можете указать картинку по-умолчанию на случай отсутствия в посте картинок вообще. Для этого укажите путь к ней в строчке $first_img = » «; в блоке идущем после комментария «// no image found display default image instead».
На очереди файл sidebar.php.
Обычно в боковой панели уже присутствуют функции вывода последних, популярных и прочих записей. Для последних, функция может выглядеть примерно вот так:
<ul><?php query_posts('showposts=5'); ?> <?php while (have_posts()) : the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php endwhile; ?></ul> |
Нам остается добавить в функцию тег img, путь в котором будет обрабатываться через timthumb.php. Выглядит он так:
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?>&w=88&h=48&zc=1&q=80" alt="" /> |
Добавляем стиль, который обведет картинку небольшой рамкой, а также сместит ее влево от текстовой части, и получаем вот такую функцию:
<?php query_posts('showposts=5'); ?> <?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink() ?>" rel="bookmark" > <img style="border: 1px solid #DADBDD; padding: 4px; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: 0 8px 0 0; float:left;" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?>&w=88&h=48&zc=1&q=80" alt="<?php the_title(); ?>" /></a> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <div class="clear"></div><br /> <?php endwhile; ?> |
Можете скопировать этот код, прописать его в нужном месте sidebar.php, ну и сохранить не забудьте ;). Выглядеть будет примерно так:
Получилось?
Не совсем понятно где и что вставлять
sidebar.php. Мой файл выглядит так:
Экспериментируйте!
Эксперименты иногда плохо заканчиваются. Например, как-то пытался установить Pipdomination, так пришлось по крупицам сайт восстанавливать…
Для таких случаев существует бекап http://pervushin.com/backup-site-ispmanager.html.
Попробуйте заголовок блока прописать между
, а код вывода записей вместоБоковую панель от поисковиков закрыть можно и наверное даже нужно, она для людей, вроде как, существует, хотя и им особа не нужна 🙂
Очень рад, что пост в тему пришелся 😉 Пробуйте.
Без проблем, отправил. Спасибо, что читаете.
А у меня в сайтбаре содержимое выводится одной переменной, вставить код туда не получилось.
не понял смысл, есть же плагины
Смысл в плагинах, если можно сделать руками?Чем больше плагинов, тем больше геморроя, потому там где можно, лучше руками делать.
Т.е.? Не понял, как портиться?
Спасибо большое за добрые слова!
Размеры изображения меняйте в самой функции (w=88&h=48).
Сергей, у меня sidebar выглядит вот так:
——————————-
——————————
так куда в этом случае вставлять
<img src="<?php bloginfo('template_directory')…. а так же последнюю функцию ………
Буду очень признателен за ответ.
Попробуйте после
Archives
добавитьПоследние записи, а здесь последний код из постат.е. после добавляю
Последние записи и далее вставляю функцию
……(и т.д.)
А куда вставлять тег <img src="<?php bloginfo('template_directory')…..в таком случае?Прошу прощения за "ламерские вопросы" ("мы все учились по немного, чему-нибудь и как-нибудь"(с))
Последний код в посте содержит все необходимое.
Правка файла functions.php приводит к ошибке: Parse error: syntax error, unexpected T_STRING in …/public_html/wp-content/themes/twentyeleven/functions.php on line 610
Скорее всего где-то была допущена ошибка при вставке функции в functions.php.
Это логично, ведь была нарушена целостность темы.
Во во, я так же пробовал однажды, мой блог тоже умер, причём восстанавливал проблематично..
Чтобы такое случилось, достаточно одну кавычку не там поставить или забыть поставить вообще, тут уж ничего не поделаешь, нужна полная концентрация и внимательность.
Кстати, блоги от этого не умирают. Просто сливаем functions.php, удаляем в редакторе зловредные строки и заливаем назад, заменив старый functions.php. Все на самом деле просто 😉
Здравствуйте. Боюсь сделать это руками будет сложно. В этом случае могу порекомендовать плагин Featured Post with thumbnail. Этот плагин делает как раз то, что требуется.
Т.е. Вы хотите код, в котором могли бы указать ID записей и размещать этот код в каком-то определенном месте, например под статьями, так?
В общем примерно так:
array( 108, 21, 63 ) ) ); ?>
<a href="" rel="bookmark" >
<img style="border: 1px solid #DADBDD; padding: 4px; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: 0 8px 0 0; float:left;" src="/scripts/timthumb.php?src=&w=88&h=48&zc=1&q=80" alt="" />
<a href="" rel="bookmark" title="">
Там где 108, 21, 63 — свои ID записей.
Блин. Дискус код режет. Вот код, там где ? не забываем ставить :
?php query_posts( array( 'post__in' => array( 108, 21, 63 ) ) ); ??php while (have_posts()) : the_post(); ?
"тут код из статьи"
?php endwhile; ?
?php wp_reset_query() ?
Там где 108, 21, 63 — прописываем свои ID постов. «тут код из статьи» заменить на код описанный в статье выше, это если хотите с картинками выводить.
Можете написать мне на email sergey [гав] pervushin.com — вышлю полностью сформированные строчки.
Не отображаются картинки почему то. md-blog.ru
В чём может быть причина?
Попробуйте на папку cache в папке themes/wpcatalogue_v2/scripts права на запись поставить, например 755. С меньшими у меня на одном блоге не запускались картинки также, как у Вас сейчас.
Поставил 755, результат не поменялся, что бы можно ещё сделать :/ Причём почему то по длине картинки разными выводятся…
Сергей, сносить? Нет предположений как исправить?
Сложно определить неисправность не наблюдая «изнутри».
Смотрю, картинки на поддомене живут? Может в этом дело…
Да, картинки на поддомене, кстати давно хотел вернуть всё обратно, прироста скорости я не заметил всё равно…
Проблема была именно в этом, исправил, теперь всё нормально 😉 Спасибо.
http://konservov.net/pervye-blyuda/gribnojj-sup-pyure-iz-shampinonov.html Посмотрите у меня некоторые привью не отображаются
У пропавших превью названия на кирилице, исправьте на английский язык, должно помочь.
У пропавших превью расширение gif.
Да нет, jpg, вот, например, http://konservov.net/wp-content/uploads/2012/12/%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5.jpg
Еще раз перепроверил — все jpg
Здравствуйте! Простите пожалуйста, а можно ли вывести в горизонтальном виде — для футера? К сожалению, я не очень разбираюсь в кодах, была бы очень признательна, если бы вы подсказали как изменить код
ok
Получил следующий результат, так как не во всех постах есть картинки, а дефолтный путь не указал.
Вопрос в следующем, как заставить скрипт брать не первую картинку поста а «post thumbnail»?