Анонс на главной странице плюс картинка

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

— как сделать анонс на главной странице,

— как добавить миниатюру в анонс на главной странице,

— как переделать запись в анонс и добавить картинку – миниатюру.

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

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

Стандартные возможности Вордпресс позволяют “обрезать” текст с помощью тега <!—more—>, но не всегда это красиво. И второе: такого рода “обрезание” не позволяет вывести картинку в анонсе.

Что я предлагаю сделать? Существует несколько эффективных способов изменить вывод статей на главной и сделать анонсы и миниатюры.

Мой рассказ сегодня – об одном из них.

Для моего короткого урока (можно и так его назвать) я возьму известный шаблон, который есть у всех – Default от Michael Heilemann. Или как многие его называют – дефолтный шаблон Вордпресс. Далее. Нам понадобятся два плагина:

The Excerpt Reloaded. Я его очень часто использую при моих переводах шаблонов на русский язык. Он корректно делает анонс, в отличие от многих авторских, которые не работают с кириллическими символами. Часто вместо отдельных русских букв вы видите у себя черный ромб с вопросом внутри. Вот этот плагин как раз такой “баг” и исправляет. При этом у него есть возможность регулировать число слов, выводимых в анонсах (слов, не букв или символов! обратите на это внимание). Работает он просто. Надо добавить в файлы шаблона (обычно index.php, search.php, archive.php) нужную строку кода, заменив ею стандартную функцию вывода текста целиком — the_content(). Чуть позже покажу – как и где будем менять в дефолтном шаблоне.

Get The Image. Плагин такого же плана – надо сначала вписать нужные функции в файлы шаблона. Там, где мы хотим видеть миниатюры картинок. Обычно – это те же файлы, что и в примере с плагином The Excerpt Reloaded.

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

1. Сначала давайте определим, в каких файлах чаще всего работает функция вывода полной записи — the_content(). Я уже примерный список таких файлов написал выше. Сейчас мы рассматриваем именно файлы шаблона Default.

Основной файл нашей главной страницы – index.php. Откроем его и на строке 20 видим вот такой код вывода:

the_content('Читать полностью »');

Где этот код в шаблоне есть еще? В файле archive.php, строка 43. Этот файл служит для вывода записей когда посетитель выбирает посмотреть из списка Рубрики, Архив. Эта функция есть в файле page.php, но этот файл служит для вывода статичных страниц и менять в нем код мы не будем. В файле search.php дефолтного шаблона в поиске выводится только заголовок записи. Можно, конечно, переделать и будет выводится с анонсом и картинкой, но в этот раз мы файл трогать не будем.

Итак. Мы нашли два файла – index.php и archive.php – в которых надо будет изменить вывод статей целиком на анонсы и добавить миниатюру в анонс. Начнем в основного файла – index.php.

2. Вы скачали у меня по ссылкам выше файлы плагинов. Пока активировать плагины не надо, иначе будет криво выводится шаблон.

3. Активируем дефолтный шаблон в админке. Открываем и смотрим на главную страницу:

01

Я обычно для быстрого заполнения статьями использую плагин Lorem Ipsum Generator. Сейчас сделал текст последней записи на русском языке, для примера и описания в этой статье.

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

4. Открываем файл index.php и ищем строку 20:

<?php the_content('Читать полностью'); ?>

Здесь наша функция содержит в себе фразу, которая появится в том случае, если мы применили бы тег <!—more—> при ee использовании. Мы можем функцию просто удалить. Можем – закомментировать. Советую сделать второе, т.к. в случае вашей ошибки вы можете все вернуть как было. Да. Главное. Скопируйте файл index.php или сохраните его под другим именем (например, добавьте в имя цифру 2). Так будет еще надежней. Если хотите закомментировать – добавьте впереди и сзади функции символы как в теге more  <!—  это в начале, и  в конце —>. Получится вот так:

<?php the_content('Читать полностью »'); ?>

Функция закрыта, или закомментирована.

5. Теперь нам надо вставить вместо нее функцию плагина The Excerpt Reloaded. У нее есть несколько вариантов, я использую один, и вам советую:

<?php the_excerpt_reloaded(50, '', 'none', TRUE, '', FALSE, 2); ?>

Разбирать всю функцию и ее атрибуты я не буду. Скажу лишь, что число 50 – ограничение вывода количества слов в анонсе. Это число мы будем корректировать, так как у каждого из вас будет свой вариант анонса, будет и свой размер миниатюры. Надо, чтобы текст рядом выглядел корректно. Посмотрите на функцию: она окружена тегом < p >< /p >, который отвечает за вывод записи в виде абзаца. Это важно. Пригодится чуть позже.

6. Сохраняем файл. Плагин вы еще не активировали? Теперь можно.

7. Активируем плагин The Excerpt Reloaded. Перегружаем главную страницу. Видим:

02

Мы получили что хотели. Наши записи стали выводится анонсом. Есть, правда, небольшой “глюк” в работе этого плагина и его функции. Число 50 должно определять количество выводимых слов. Но не всегда и везде точно пятьдесят. Как видно на скриншоте. У вас скорее всего, будет похоже. Но – лучше плагина я не нашел. Если кто знает – подскажите.

Мы сделали первый шаг к нашей главной цели: анонсы на главной вместе с картинкой — миниатюрой.  К корректированию этой функции мы еще вернемся.

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

<?php get_the_image( array( 'meta_key' => 'image', 'size' => 'medium', 'width' => '200', 'height' => '200', 'image_class' => 'feature' ) ); ?>

В ней я изменил имя Произвольного поля. Поставил image. Автор в своем примере дает другое имя, но мне это нравится больше. Как использовать Произвольное поле? Я писал несколько раз, потратье еще пять минут и найдите у меня в каталоге, я подробно описывал работу Произвольного поля на примерах двух плагинов: Featured Content Gallery и CB-Featured.

Понятно, что имя Произвольного поля вы также можете изменить. Вдруг у вас в шаблоне уже используется это имя с вашим шаблоном? Будет конфликт. Поэтому можно изменить. На что еще обратите внимание: ширина и высота картинки в моей функции стоят 180х150 px. Пока их не трогаем, посмотрим как будет выглядеть.

Если вы не будете применять Произвольное поле image, тогда плагин может вытащить любую картинку из вашей статьи, первую, вторую, последнюю, может даже взять ту, которой нет, но она есть в другом произвольном поле. Это надо учитывать и лучше все-таки добавлять картинку через произвольное поле.

8. Куда надо вставить эту функцию? В файле index.php дефолтного шаблона за вывод записи отвечает див class=»entry»>

<div class="entry"></div>

Картинку мы хотим добавить в текст, значит, функция плагина Get The Image, рассмотренная выше, должна стоять внутри этого дива, перед функцией вывода анонса записи:

<div class="entry"></div>

9. Сохраняем файл index.php. Активируем плагин Get The Image. Перегружаем главную страницу:

03

Как видно на скриншоте, картинки добавились без произвольного поля. Плагин взял те, которые уже стоят в записях. Что плохо? Плохо то, что текст не обтекает картинку, а стоит ниже. Надо исправить и сделать красиво.

10. Открываем файл index.php и ищем функцию вывода картинки, которую мы только что добавили:

<div class="entry"></div>

Можно сделать двумя вариантами:
а) Добавить новый див < div > в файле style.css и указать свойства для этой картинки. Если вы слабо знакомы с написанием стилей – мы пока этот вариант не трогаем.
б) Добавить новый див и прямо в нем, здесь, в файле, укажем стиль обтекания картинки текстом. Так проще для вас. Вы точно знаете, что не ошиблись и сделали новый стиль именно для этой функции. В CSS есть несколько вариантов свойства обтекания, основной – это свойство float. Див наш будет выглядеть вот так:

<div class"entry">
<div style="float:left;">
<?php the_excerpt_reloaded(50, '', 'none', TRUE, '', FALSE, 2); ?>
</div>
</div>

Я окружил новым дивом функцию вывода картинки. Сделайте также. Сохраняем файл. Перегружаем главную страницу.

Теперь текст обтекает картинку. Но все равно плохо: текст прямо прилип к картинке. Надо его немного отодвинуть. Есть такое свойство и называется оно margin-right.

11. Давайте добавим его в наш новый див, который установил свойство обтекания. Схраняем файл. Перегружаем главную страницу. Смотрим:

05

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

<div class="entry">
<div style="float: left; margin-right: 15px;">
<?php the_excerpt_reloaded(50, '', 'none', TRUE, '', FALSE, 2); ?><a class="more-link">Подробнее...</a>
</div>

Обратите внимание. Я тег Подробнее поставил внутри тега < p >, который отвечает за вывод записи отдельным абзацем. Давайте перегрузим главную и посмотрим что вышло:

06

Смотрите. Тег Подробнее в одном случае – под картинкой, в другом – сбоку. Почему? Во-первых, он по умолчанию должен стоять слева (как в первой записи на скриншоте). Во-вторых, из-за разного количества слов в анонсе и большого размера картинки этот тег “гуляет” по странице, в каждой записи – по разному. Надо сделать так, чтобы было единообразно. Для этого:

а) Уменьшим картинку (помните где?). Сделаем ее не 180х150 px, а к примеру – 100х100 px.

б) В теге < p >, окружающем тег Подробнее, добавим свойство – разместить справа (align=»right»):

<div class="entry">
<div style="float:left; margin-right: 15px;">
<?php the_excerpt_reloaded(50, '', 'none', TRUE, '', FALSE, 2); ?><a class="more-link">Подробнее...</a>
</div>

Изменили. Сохранили. Перегрузили главную страницу. Смотрим:

07

Как по мне, то для такого макета главной страницы как в дефолтном шаблоне, именно такой размер миниатюры и анонса – наиболее отпимален. Если вы хотите попробовать поэкспериментировать с размером картинки и анонса, пробуйте. Вспомните, что количество слов – это число 50 в функции the_excerpt_reloaded, а размер картинки – это числа внутри свойств width – height функции get_the_image.

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

Всем удачи в совершенствовании ваших шаблонов!


http://www.flo4you.ru/


Понравилась статья? Поделись с друзьями!

42 коммент.

  1. а как сделать чтоб при клике на категорию допустим (клиентские)было так joxi.ru/gV2VGvoTV7d4Av не списком может плагины какие есть

    Ответить
  2. Нашел как вывести список страниц как анонс в WordPress по ссылке: sasanov.ru/anons-stranic-v-wordpress/
    Очень помогло

    Ответить
    • Я этой статье я рассказал о выводе ленты записей.
      Вы дали ссылку на плагин, который выводит анонсы страниц.
      Страницы и Записи — разный контент.
      Ничего общего.
      За ссылку — возможно,читатели поблагодарят.
      Нечто похожее я уже публиковал здесь -bestplugins.ru/wordpress-plugins/plagin-wordpress-posts-in-page-dobavlyaem-zapisi-na-lyubuyu-statichnuyu-stranitsu.html
      Только повторяю — в статье я рассказываю о Записях.

      Ответить
  3. Олег, здравствуйте! Мне ваша статья понравилась, все написано в очень доступной форме. Но, честно говоря, никак не получается сделать обтекание картинки текстом. Прилагаю копию того, что я сделала (до вставки функции обтекания):

    ‘image’, ‘size’ => ‘medium’, ‘width’ => ‘200’, ‘height’ => ‘200’, ‘image_class’ => ‘feature’ ) ); ?>
    ‘alignleft post_thumbnail’)); } ?>

    <a class="readmore" href="» rel=»bookmark» title=»»>Читать далее »

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

    Заранее спасибо!

    Ответить
    • Вероятно, вы скопировали код из статьи. Статью я писал достаточно давно, и в ней код немного исказился. Это проблема плагина, с помощью котрого я добавляю код в статьях. Некоторые специальные символы HTML меняют свое значение, а именно: в коде пишется к примеру угловая скобка > а со временем она отображается как спец.символ HTML — & g t ; (я поставил между символами пробелы, иначе опять же они приобретут другое значение в статье).
      Сейчас я в обзоре все исправил, код правильный.
      Смотрите, что у вас не так и замените код.

      Ответить
  4. Здравствуйте! В своей статье Вы разбираете формирование анонсов статей с картинками на Главной сайта. А вот на сайте 9muses.ru мне надо, чтобы щелкнув по меню Статьи, чел получал страницу с анонсами статей. Можно ли это реализовать, используя вышеописанные действия?
    И еще вопрос — а вот внизу всплывающее окошко с рекламой — это с помощью какого плагина реализовано? Спасибо!

    Ответить
    • Можно, если сделать страницу-шаблон и реализовать ее в виде вывода всех новостей, в формате: миниатюра и анонсы записей.
      Что касается вопроса о всплывающем окне с рекламой внизу сайта — это плагин, называется Optincrusher. Авторский сайт плагина — optincrusher.com/

      Ответить
      • А можете подсказать более подробно — как это реализовать? «Можно, если сделать страницу-шаблон и реализовать ее в виде вывода всех новостей, в формате: миниатюра и анонсы записей.»
        Спасибо!

        Ответить
  5. Всё работет, даже обрадовался! можно оказывается, так как мне нужно, но вот тока запросы то к базе растут таким способом(((

    Ответить
  6. Крутая капча, минут 20 всем офисом игрался. Вечером еще сыну покажу. Напишу об этом в своем блоге на livejournal, на своем сайте фирмы и на хабре тоже тему открою. Попрошу знакомого журналиста чтобы он статью в газету написал, по возможности видеорепортаж сделал. Огонь, я поражен!

    К стати, у Вас случайно книг по javascript`у нет. А то моему коллеге нужно.
    danil_belov@inbox.ru
    Жду там.

    С уважением, Ваш Мехаил

    Ответить
  7. Ссылка на тему указана в первом посте, могу продублировать еще раз, мне не сложно wpfreethemes.ru/2010/11/lightnes-iii/
    называется Lightnes III – тема с тремя сайдбарами.

    Повторю на всякий случай вопрос:
    Я взял вашу тему, и хотел вставить в нее коды обоих плагинов. Но в ней нет строк которые вы описываете.
    Насколько понимаю их нужно вставить в главную, архивы, теги, и рубрики, вопрос что нужно там заменить, чтобы оба плагина заработали?

    Ответить
    • Каких двух плагинов?
      Вы читали внимательно мой обзор?
      Там есть страница настроек, есть специальные окна куда надо добавить код рекламного баннера.
      И последнее — если вы задаете вопрос по теме — почему вы пишите комментарии в другом обзоре? Пишите свои вопросы там же где тема опубликована — и мне будет понятно, о чем речь, и другие посетители потом смогут прочитать и если что, сами разберутся или вам что-то подскажут.

      Ответить
  8. Вопрос такой а где это вставлять в Вашей теме wpfreethemes.ru/2010/11/lightnes-iii/

    Я пока не волшебник, только учусь попытался вставить как это понял я, и страница просто умерла…

    Ответить
    • «А где это..» — что ЭТО? Мне надо пол-дня сидеть и думать — что ЭТО и где его вам вставлять. Можете написать подробнее — о чем речь?

      Ответить
      • Я взял вашу тему, и хотел вставить в нее коды обоих плагинов. Но в ней нет строк которые вы описываете. Попытался втавить так как я это понял страница просто рассыпалась на куски.

        Насколько понимаю их нужно вставить в главную, архивы, теги, и рубрики, вопрос что нужно там заменить, чтобы оба плагина заработали?

        Ответить
        • Опять же — какую тему? неужели сложно написать имя шаблона и дать на него ссылку на обзор? Опять двадцать пять…

          Ответить
  9. Отличная статья. Только в исходном коде не правильное отображение < ?php и => Сначало сам не понял что заначит &gt — это «>» если кто то сталкнулся тоже. Автору спасибо.

    Ответить
    • Это проблемы отображения кода в тексте.
      Бывает, что автоматически заменяет угловые скобки этими специальными символами HTML.
      Конфликт и ничего с этим не поделаешь. Не все плагины отображения кода работают корректно.
      Сейчас пишу новый шаблон для этого сайта, хочу реализовать эту задачу другим путем, через шорткод.

      Ответить
  10. Здравствуйте Олег!
    Вы оч хорошо и детально все описали, но …
    …у меня в шаблоне выводятся обрезаные новости , но без рисунков…
    … и я тав в конец попутал все рамсы…
    Помогите пожалуйста.
    Заранее благодарен!
    С уважением, Сергей.

    Ответить
    • Вы мало информации мне дали, чтобы я мог вам помочь. Дайте ссылку на сайт, где у вас не работает. По ссылке — у вас стоит шаблон, в котором анонсы выводит другой скрипт, и соответственно, все по-другому реализовано, не так, как я описывал в своей статье.

      Ответить
  11. Здравствуйте. очень полезна была ваша статья, спасибо! Один вопрос..у вас написано так: В теге , окружающем тег Подробнее, добавим свойство – разместить справа (align=”right”): где найти этот тег? и еще…сама ссылка «Подробнее» у меня почему то не активна…в чем может быть причина? вот мой сайт igri-casino.ru Спасибо.

    Ответить
  12. Со 2 вопросом удачно справилась. Теперь все-все записи выводятся анонсами. 🙂
    Качество картинок-превьюшек улучшила путем их уменьшения… 🙂

    Ответить
  13. Спасибо!
    По 1 вопросу — редактирование текста не работает для анонсов… В полной версии записи все как положено, а в анонсе жирный становится обычным… По 2 вопросу — точно, архив.пхп! Попробую и его поковырять чуть позже :)…
    С качеством картинок — спасибо за совет, поэкспериментирую…
    🙂

    Ответить
  14. Да, и еще очень важно — как улучшить качество этих маленьких картинок? А то уж совсем они страшненькие…

    Ответить
    • Здесь вам надо проанализировать ваши настройки в разделе Библиотека Медиафайлов, посмотреть, какие размеры у вас там стоят для миниатюр, возможно, что ваш Вордпресс «режет» крупные фото и получается не очень корректно. Попробуйте там поменять размеры для средних фото и миниатюр и посмотрите, как это отразится на выводе ваших миниатюр в анонсах

      Ответить
  15. Получилось! Получилось! Спасибо большое за подробную инструкцию! 🙂 Есть дополнительные вопросики.
    Можно ли сделать так, чтобы часть текста в анонсе выводилась жирным шрифтом, а остальное — обычным.
    Куда применить эту же технология для вывода анонса статей для записей которые размещены в других рубриках, но не на главной.?
    🙂

    Ответить
    • сделать так, чтобы часть текста в анонсе выводилась жирным шрифтом, а остальное – обычным.

      Не знаю — попробуйте поэкспериментировать при рекдактировании текста. Задайте там свойства — жирный или курсив — и посмотрите, что будет происходить в анонсе на главной.

      Куда применить эту же технология для вывода анонса статей для записей которые размещены в других рубриках, но не на главной.?

      Я не знаю, какая иерархия (структура) файлов в вашем шаблоне, но обычно за вывод записей из одной категории (например, вы кликнули по имени рубрики в сайдбаре) отвечает файл arhive.php или categories.php. Посмотрите свои файлы и почитайте их содержимое, найдите, где выводится архив с циклом Loop

      Ответить
  16. Спасибо, разобралась. Все получается, кроме обтекания картинки текстом. В чем может быть причина.
    И еще, вы пишете о добавлении свойства для размещения «Подробнее» с правой стороны, но при этом код не изменили. Можно это поправить?

    Ответить
  17. В какое место вставлять кол для вывода миниатюр нашла, но вставить функцию вывода не получлось, т.к у вас нужные символы заменены другими, например &gt или &lt. Сама устранить это не смогла, выдает синтаксическую ошибку. Жду вашего возвращения из отпуска 🙂

    Ответить
    • Лариса, у меня глючат все без исключения плагины, которые служат корректному выводу кода PHP или CSS в статьях WordPress. Например, тот, который сейчас у меня работает, автоматом заменяетв записи правую и левую скобки на специальные символы, принятые в HTML. Закрывающаяся скобка — это обозначение > открывающаяся — <
      Попытайтесь в том коде просто заменить эти обозначения самими скобками.

      Ответить
  18. С анонсами справилась без проблем. А вот с миниатюрами пока нет. В моем шаблоне нет div class=»entry» Какой еще может быть div ?

    Ответить
    • Все зависит от мысли автора 🙂
      Может быть «post» или как-то похоже. Дайте ссылку на ваш шаблон — я скажу точно.

      Ответить
  19. Скажите, а вывод картинок будет работать без второго плагина? Я хочу, чтобы у меня на главной вместо анонса выводились цитаты. Это я сделала, но цитаты-то идут без картинок. Попыталась добавить картинки (скачала ваш плагин, вставила указанный код), а на деле вместо картинок выводится все-таки код ((

    Ответить
    • плагин get-the-image отвечает за вывод картинок
      плагин the-excerpt-reloaded выводит текст в виде анонса, а не полной записью
      эти плагины между собой никак не связаны
      вы можете установить любой из них, и у вас будет — или картинка в виде миниатюры, или анонс

      Ответить

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