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

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

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

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

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

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

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

Стандартные возможности Вордпресс позволяют “обрезать” текст с помощью тега <!—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 видим вот такой код вывода:

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

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

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

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

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

Я обычно для быстрого заполнения статьями использую плагин 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. Перегружаем главную страницу. Видим:

Мы получили что хотели. Наши записи стали выводится анонсом. Есть, правда, небольшой “глюк” в работе этого плагина и его функции. Число 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. Перегружаем главную страницу:

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

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>
</div>

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

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

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

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

<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 >, который отвечает за вывод записи отдельным абзацем. Давайте перегрузим главную и посмотрим что вышло:

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

а) Уменьшим картинку (помните где?). Сделаем ее не 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>

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

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

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

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