Всем привет! В последнее время получается так, что на seo-mayak.com я публикую статьи на темы, которые попросили осветить мои читатели. Этот пост как раз из данной серии и называется серия — использование миниатюр в WordPress.
Наверно пора для этого выделять специальную рубрику. Ну да ладно. Тема, о которой сегодня пойдет речь, волнует многих начинающих веб-мастеров и не только начинающих.
Не так давно весьма опытный блогер обратилсяь ко мне с просьбой помочь с выводом миниатюр на главной странице, конечно без использования плагинов.
Говорит, мол до него дошли слухи, что появился отчаянный веб-мастер, который ведет бескомпромиссную войну с плагинами и может предложить альтернативу любому из них. Мягко сказать, это не совсем так.
Альтернативы конечно у меня есть, но к сожалению далеко не всем плагинам, коих с каждым днем становится все больше и больше. Но я работаю! И буду дальше стараться «убивать» необходимость использовать плагины, для реализации той или иной поставленной задачи.
А вы знаете, что означает слово миниатюра? Слово «Миниатюра» произошло от латинского «minium», что означает — «красные краски», которые применяли в росписи древних книг.
Итак, как вывести миниатюры на главной странице без плагина? Кстати, про использование миниатюр на WordPress у меня уже выходило пару статей, в частности — похожие записи с миниатюрами, а также популярные записи с миниатюрами. Кому интересно, можете почитать.
Как включать миниатюры в WordPress, я описывал здесь.
Есть много способов вывода уменьшенных изображений на главной, все зависит тот того, какая стоит задача. Давайте я предложу на Ваш суд два варианта, а Вы уже выбирайте, какой Вам больше подходит. Поехали!
Выводим миниатюры с заголовками на главной в несколько рядов
Начнем с вывода миниатюр в несколько рядов. Должно получится что-то наподобие каталога товаров в интернет магазине. Именно с такой просьбой обратился ко мне вышеупомянутый веб-мастер и пусть данный пост будет моим ответом.
Дело в том, что по-умолчанию в WordPress размеры для миниатюр установлены 150х150 пикселей, т.е. если изображение, к примеру 450х333 пикселей, то при создании миниатюры края просто обрезаются.
Поэтому надо заранее задать размеры для всех миниатюр, пропорциональные исходным картинкам. Как и где устанавливать размеры для изображений в WordPress, читайте в статье — оптимизация изображений.
Представляю реакцию некоторых веб-мастеров, мол нифига себе, это что теперь надо все изображения заново заливать на сервер? Скажу так, если Вы заботитесь о скорости загрузки страниц своего ресурса, то придется поработать.
Конечно есть более простой способ изменения размеров миниатюр, который я описывал тут, но лучше будет если они изначально будут нужных пропорций.
Итак, вроде все сказал, всех предупредил, давайте теперь преступим непосредственно к реализации.
Открываем для редактирования файл index.php (именно index.php в большинстве случаев отвечает за отображение главной страницы, но бывают исключения) и в нужное место вставляем такой код:
<div class="home_page"> <ul> <?php query_posts('showposts=8'); ?> <?php while (have_posts()) : the_post(); ?> <li><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div>
Далее, в файле style.css прописываем стили для класса .home_page:
.home_page li{ /* стили для элементов списка */ float: left; /* миниатюры располагаются слева от соседней */ height: 230px; /* высота ячейки с миниатюрой и заголовком */ width: 150px; /* ширина ячейки */ margin: 5px 10px 0 0; /* внешние отступы сверху и справа от ячейки */ overflow:hidden; /* скрываем все что не поместилось в ячейку */ } .home_page { /* общие стили для блока */ width: 99%; /* общая ширина блока */ margin: 0 auto; /* внешние отступы сверху и снизу, а также выравнивание по центру */ } .home_page img{ /* здесь можно задать отдельные стили для миниатюр */ } .home_page a{ /* здесь можно задать отдельные стили для ссылок */ }
После чего получаем следующий результат:
Как видите, я вывел миниатюры на главной странице в 2 ряда по 4 картинки. Можно сделать хоть 10 рядов, все зависит от поставленной задачи.
Кстати, совсем недавно я делал шаблон для одного кулинарного блога, где реализовал вышеизложенный метод. Посмотреть можно здесь. Также читайте как создать шаблон.
Допустим надо, чтобы рядов было 5. Не вопрос! Для этого нам потребуется внести изменения в один участок кода, а именно:
<?php query_posts('showposts=8'); ?>
Где цифра 8 — это количество выводимых миниатюр.
Количество выводимых миниатюр в одном ряду, напрямую зависит от их размера. У меня на ширину страницы влезло четыре миниатюры, т.е. сколько помещается в один ряд, столько и выводиться.
Ну раз у меня влезло 4 миниатюры, то для того, чтобы было 5 рядов, меняю цифру 8 на 20. Вот такая несложная арифметика.
Не уверен, что у новичков с первого раза так все просто возьмет и получиться. Придется изрядно повозиться со стилями прежде, чем миниатюры встанут как надо, но без этого не стать настоящим веб-МАСТЕРОМ. Для облегчения собственного труда, советую научиться пользоваться расширением для браузерf Firebug.
Идем дальше. В коде, приведенном мой выше, миниатюры берутся из последних опубликованных постов по-порядку, но товарищ, что обратился ко мне за помощью, просил написать код, который бы выводил миниатюры с определенной рубрики. Пожалуйста! Берем тот же участок кода и добавляем вызов из категории по id. Выглядеть это будет так:
<?php query_posts('cat=133&showposts=8'); ?>
Где 133 и есть id категории. Читайте здесь, как определять id категории, страницы или записи.
Если вдруг Вам потребуется увеличить или уменьшить размеры миниатюр, то тогда потребуется подправить другой участок кода, а именно:
<?php the_post_thumbnail('thumbnail'); ?>
Здесь изменяем размеры миниатюр следующим образом:
<?php the_post_thumbnail(array(138,120)); ?>
Где 138,120 — новые размеры миниатюр. Но учтите, изменяя размеры изображений, мы нагружаем сервер.
Как вывести миниатюры с анонсами постов на главной странице
Опять же, один из читателей блога как-то просил меня описать данный способ. Хоть и не сразу, но я выполняю его просьбу.
Для этого нам потребуется следующий код, который также надо вставить в файл index.php:
<div class="home_page"> <?php query_posts('showposts=5'); ?> <?php while (have_posts()) : the_post(); ?> <table> <tr> <td><a onclick="return !window.open(this.href)" href="<?php the_permalink()?>"><?php the_post_thumbnail('thumbnail');?><?php the_title();?></br></a> <p><?php the_content_rss('', FALSE, '', 50); ?><a href="<?php the_permalink() ?>" title="читать запись полностью <?php the_title_attribute(); ?>" style="color:#5191df; float:right; margin-top:10px; font-size:12px">Читать полностью »</a></p> </td> </tr> </table> <?php endwhile; ?> </div>
В файл style.css вставляем следующее:
.home_page { /* общие стили для блока */ margin: 20px 0 0 20px; /* внешние отступы */ } .home_page a{ /* стили для ссылок-заголовков */ font-weight: bold; /* выделение ссылки жирным */ text-align: left; /* прижимаем текст к левому краю */ margin-left: 20px; /* отступ от левого края */ font-size:16px; /* размер шрифта*/ } .home_page img{ /* стили для миниатюр */ float: left; /* обтекание текста по левому краю */ margin:10px; /* внешние отступы */ } .home_page table { /* стили для таблицы */ border-bottom: 1px solid #f2f2f2; /* черта по верхнему краю ячейки */ }
Также в самом коде прописаны стили для ссылки «Читать полностью»:
style="color:#5191df; float:right; margin-top:10px; font-size:12px"
Где:
color:#5191df; — цвет ссылки.
float:right; — расположение ссылки по правому краю.
font-size:12px — размер шрифта
Наверное Вы заметили, что в данном варианте кода я не использовал элементы списка, а за основу взял структуру html таблицы.
В принципе коды очень схожи, но визуальная разница конечна огромна:
В данном варианте анонсы выводятся с помощью тега the_content_rss, который применяется для отображения фида на сайте. Тег the_content_rss не учитывает тег more и обрезание текста происходит по количеству символов. Например:
<?php the_content_rss('', FALSE, '', 50); ?>
Где 50 — количество символов.
Стоит сказать, что для вывода анонсов статей и миниатюр на главной странице можно использовать и другие теги, которые я подробно описал в статье — «Как правильно выводить анонсы статей на WordPress»
Не примените подписаться на обновления блога и наверняка узнаете много нового и интересного.
На сегодня у меня все. Если что непонятно, в самом низу страницы есть форма комментариев.
В наступившем году постараюсь писать почаще.
До встречи!
С уважением, Виталий Кириллов
)Может, не так поняла, но вот в моей теме миниатюры автоматически формируются. Я просто пишу вступление, ставлю нужный тег и выбираю фото, которое автоматически приобретает нужные размер. Статья очень полезная для тех, у кого не очень хорошая/понятная тема Вордпресс. И вообще, здорово, что можно выбирать, где именно эти миниатюры выводить. Большое спасибо!
Саша, значит Вашу тему создавал хороший специалист, но в большинстве бесплатных шаблонах, которые выбирают в основном начинающие веб-мастера, такой автоматики нет или хуже того функция поддержки миниатюр просто неактивна.
Да уж, каких только шаблонов не довелось видеть…
Открываем для редактирования файл index.php (именно index.php в большинстве случаев отвечает за отображение главной страницы, но бывают исключения) и в нужное место вставляем такой код… Не поможете найти это нужное место?))) Сайт ekspat.ru. Хотелось бы их на главную;
Давно ищу как вывести миниатюры с ссылками на посты на главную. Но для меня пока самой осилить этот код не просто))
Заранее благодарю!
Brittany, рад видеть Вас на блоге! Все зависит от поставленной задачи и от особенностей шаблона. Если Вы хотите, чтобы миниатюры встали прямо под заголовком, то ищите в файле index.php тег h1 или h2 и под ним вставляйте код.
Если не справитесь — пишите. А если нужна будет практическая помощь, то пишите через форму обратной связи.
У меня почему то ничего не получается ( Вставляю по инструкции, но ничего не происходит.
Вячеслав, в какое место вы вставляете код?
Уже по всякому пробовал. С HTML то я отлично знаком (правда был) Но основы понимаю. css так же понимаю. Но вот все равно не получается у меня. У вас случайно нет Artisteer ?
Нет Вячеслав у меня Artisteer нет. Если у Вас включена функция поддержки миниатюр, то все должно работать.
У меня просто другой код шаблона, поэтому не работает. ( Жаль (
Вячеслав, возможно у Вас файл index.php разделен на несколько файлов. Если в коде файле есть такая строчка:
Где /includes/post путь до файла, который выводит контент. Конечно у Вас может быть другие названия.
Если так, то код вызова миниатюр надо вставлять именно в прикрепленный файл.
Да, у меня вот так get_template_part(‘content’, get_post_format()); И в редакторе много страниц с названием content. Например content-galery content-page и тд ( Совсем все запутано (
Вячеслав, я так понимаю, что файл content.php и есть тот файл, в который надо вставлять код вызова миниатюр. Сделайте бекап и попробуйте.
У меня там вот такой код
global $post;
theme_post_wrapper(
array(
‘id’ => theme_get_post_id(),
‘class’ => theme_get_post_class(),
‘thumbnail’ => theme_get_post_thumbnail(),
‘title’ => ‘ID) . ‘» rel=»bookmark» title=»‘ . strip_tags(get_the_title()) . ‘»>’ . get_the_title() . ‘‘,
‘heading’ => theme_get_option(‘theme_’ . (is_home() ? ‘posts’ : ‘single’) . ‘_article_title_tag’),
‘before’ => theme_get_metadata_icons(‘date,author,edit’, ‘header’),
‘content’ => theme_get_excerpt(),
‘after’ => theme_get_metadata_icons(‘category,tag,comments’, ‘footer’)
)
);
?>
Куда тут поставить? Помогите плз )
Если вам не трудно, давайте я дам вам админку на блоге, он пустой пока все равно 🙂 Покажите куда вставлять код. Заодно может и статья новая будет как его вставлять в шаблоны сделанные на артистере )
Вячеслав, конкретную помощь я оказываю только подписчикам блога. Подпишитесь на обновления seo-mayak.com и напишите мне через форму обратной связи, указав e-mail.
Очень хочется сделать такую штуку на рубриках. Не получается и все тут.
Отличная статья, то, что надо и то, что искал.
Думал уже самому сидеть писать, но сначала решил поискать. Очень благодарен за статью, спасибо. Редко пишу комментарии на блоги, но в этот раз решил написать.
Илья, рад видеть Вас на блоге!
Здравствуйте! Подскажите пожалуйста, а как сделать то же самое, но со страницами?
Спасибо за статью. Подскажите пожалуйста возможно ли выводить не последние и не из категорий, а случайные записи блога?
Надо в строчке:
Надо добавить еще один параметр для функции query_posts().
Должно получится так:
Большое спасибо, но у меня эта строка заменена на:
<?php if (have_posts()) : ?> т.к. кол-во постов задается в админке
для такого кода есть вариант?
Еще подскажите пожалуйста, в сайдбар возможно вставить?
Добрый день,Виталий! Хотелось бы узнать о бесплатных аналогах такого плагина, как представлен здесь, например
youtu.be/1jKpZfizovY
он позволяет статическую страницу разбить на блоки, т.е. главные статьи на статической странице и отделить всё от блога. Я уверен, что есть бесплатные аналоги такого плагина, может в буржунете. Возможно Вы знаете другое решение, как сделать нечто подобное. Спасибо.Здравствуйте Алекс! Я конечно не смогу в рамках комментария показать безплагинный аналог, но на мой поверхностный взгляд ничего особо сложного в реализации сей задачи нет. Возможно в будущем я напишу статью, где все расскажу.
Насколько мне известно существует плагин Inline Posts Plugin, но нигде нет конкретного описания и его применения. Здесь интересен именно плагин, чтобы не ковырять сам код!!!
Тогда Алекс Вы не по адресу. Я не сторонник плагинов и всем советую максимально сократить их число.
Как всегда, очень полезная статья. Виталий, спасибо за помощь начинающим «веб-мастерам». Попутно нашла у Вас еще одну статью на интересующую меня тему. Если найдется время, подскажите, пожалуйста, правильно ли я поняла? Для того, чтобы картинки были в индексе, с анонса на главной может быть ссылка с миниатюры изображения на запись, заголовок открывающейся записи не должен быть ссылкой, с картинки записи — ссылка на изображение, или последнее не обязательно? Дело в том, что у меня картинка в записи ссылается на свою страницу, то есть это, как я понимаю, дубль и при этом картинки в поиске, и клики есть. Не совсем пока понимаю, какие лучше сделать изменения.
Алена, я считаю, что ссылок в изображениях не должно быть, за исключением ссылок с картинок в анонсах. Но это не значит, что картинки с ссылками не будут индексироваться!
Поняла, спасибо за ответ
Здравствуйте Виталий очень понравилась статья, давно искал что то подобное но у меня возникла проблема, я вставляю код ( миниатюры с анонсами постов на главной странице) в category.php и тогда у всех! категориях отображаются последние записи никак не могу понять как сделать так чтоб на главной отображались все последние посты а в категориях отображались в виде анонсов с миниатюрами но только те записи которые я туда назначаю а не все. Очень жду на ответ и заранее спасибо
Здравствуйте Богдан! Ответ тут
Здравствуйте, Виталий! Что-то у меня снова не выходит. Мне надо, чтобы на главной (у меня статическая), после текста выводились миниатюры популярных постов с заголовками без анонсов. В моей теме есть файлы index.php и page.php, код вставляла и в тот и в другой, в разные места — но ничего не выводится. Подскажите, в чем может быть проблема?
Здравствуйте Ирина! Мне трудно сказать наверняка, все шаблоны разные и возможно где-то ошибка.
Ясно.
А где находятся эти файлы: индекс.пхп и т.д.?
В корне вашей темы. Вы знаете структуру файлов WordPress!
Здравствуйте Виталий, очень полезная статья. Я сделал все как Вы описали, всё работает, но только когда включены на главной странице последние записи, если переключить на статическую главную, не работает, почему. Мне как раз нужно на статической главной вывод миниатюр. Может что то посоветуете, заранее благодарен.
Здравствуйте Владимир!
Возможно вам лучше создать шаблон статической страницы, которую вы хотите сделать главной, и вставить код вывода миниатюр именно в этот шаблон.
Виталий вопрос отпадает, внимательно почитал комменты и все понял, все заработало, еще раз спасибо за статью.
Уже ответил, может мой ответ Вам тоже пригодится.
Виталий есть другой вопрос? Как сделать чтобы при нажатии на ссылку статья открывалась на месте а не в новом окне браузера.
Владимир, для этого надо убрать из кода следующий участок:
Спасибо за помощь Виталий, я еще новичок в этом деле поэтому сам не догадался
Виталий, у меня еще один вопрос, как вывести форму комментирования в сайдбар, без плагина, а так же разные опросы. Я пробовал ставить но где то делал ошибку и у меня не получалось, видно надо для этого отдельный файл создавать, если в курсе, посоветуй что нибудь, заранее благодарю.
Владимир, я таких экспериментов не проводил.
Понятно. У меня сайт про туризм в Закарпатье и хотелось бы проводить опросы по этому поводу не на странице или в записях, а отдельно, чтобы форма опроса например была в сайдбаре а результаты с коментами открывались на отдельной странице, поэтому наверно и надо создавать отдельный файл.
Если что то подобное знаешь или где то увидишь, дай знать, благодарю заранее.
У тебя очень полезные и поучительные статьи на блоге, жаль что я раньше не связался с тобой и не поставил блог в закладки, а то я как новичок много еще не понимаю.
Владимир, такой функционал можно организовать через Google опросы: http://www.google.ru/intl/ru/forms/about/, а потом вывести форму через картинку-ссылку в виджете сайдбара. Посмотрите, как сделано у меня на блоге.
Пробовал не получается, копировал сгенерированный код, вставлял в виджет, выводится коряво, со ссылками на гугол. Короче не то. Или может я что то неправильно делал, не знаю.
Владимир, если Вас устраивает вариант моего блога, я могу расписать все по шагам.
Виталий, есть еще один вопрос, хочу создать карту сайта, почитал статью о плагине Dagon Design Sitemap Generator, хотел установить но он по моему мертвый, я его не нашел у себя в адмике в поиске. Что нибудь подобное можете посоветовать, заранее благодарю.
Владимир, советую сделать динамическую карту сайта на основе плагина All in One SEO Pack.
Спасибо за совет Виталий, я почитал статью, но если я правильно понял, эта карта не будет видна посетителям, она только для роботов, или я что то неправильно понял.
Все правильно, именно для роботов, а вы хотели сделать карту для посетителей?
Да, для посетителей
Виталий, если я скину ссылку на сайт с опросом в сайдбаре, вы сможете разобраться как он сделан, с помощью плагина или вручную
Здравствуйте, Виталий.
После обновления версию темы Graphene , много настроек сбилось. Самое бросающееся в глаза это исчезли миниатюры в анонсах на главной странице, хотя в рубриках отображается всё так как нужно.
Не пойму куда нужно вставить код в файл index.php. Вот содержимое этого файла.
А может быть из файла, отвечающего за рубрики какой-то код скопировать и перенести в index.php?
Здравствуйте Валентина!
Содержание файла index.php не прошло. Воспользуйтесь преобразователем.
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package Graphene
* @since Graphene 1.0
*/
global $graphene_settings;
get_header(); ?>
<div class="entries-wrapper">
<?php
do_action('graphene_index_pre_loop');
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
while ( have_posts() ) {
the_post();
get_template_part( 'loop', 'index' );
}
?>
</div>
<?php graphene_posts_nav(); ?>
<?php get_footer(); ?>
Вот, преобразовала.
Валентина, вам надо почитатть мою статью, думаю после прочтения для вас многое прояснится, но если нет, пишите.
Виталий, указанную статью прочитала, но код на миниатюры в анонсах всё-таки куда вставлять? После этой строки: get_template_part( ‘loop’, ‘index’ ) ?
Валентина, в вашем шаблоне должен быть файл loop.php по всей видимости именно там расположены функции, которые работают только в пределах цикла wordpress.
Виталий, в этом файле ещё больше строк, и всё же после какой строки вставить код?
<?php
global $graphene_settings;
$post_type = get_post_type_object( get_post_type() );
?>
<?php
/**
* Check if the post has a post format. Load a post-format specific loop file,
* if it has. Continue with standard loop otherwise.
*/
if ( function_exists( 'get_post_format' ) && $post_type->name != 'page' ) {
global $post_format;
$post_format = get_post_format();
// Get the post formats supported by the theme
$supported_formats = get_theme_support( 'post-formats' );
if ( is_array( $supported_formats ) ) $supported_formats = $supported_formats[0];
if ( in_array( $post_format, $supported_formats ) ) {
// Get the post format loop file
get_template_part( 'loop-post-formats', $post_format );
// Stop this default posts loop
return;
}
}
?>
<?php if ( $post_type->name == 'page' && $graphene_settings['hide_parent_content_if_empty'] && $post->post_content == '' ) : ?>
<h1 class="page-title">
<?php if ( get_the_title() == '' ) { _e( '(No title)', 'graphene' ); } else { the_title(); } ?>
</h1>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix post' ); ?>>
<?php do_action( 'graphene_before_post' ); ?>
<div class="entry clearfix">
<?php /* Post date is not shown if this is a Page post */ ?>
<?php if ( stristr( graphene_post_date_setting( get_the_ID() ), 'icon' ) ) graphene_post_date(); ?>
<?php /* Show the post author's gravatar if enabled */
if ( $graphene_settings['show_post_avatar'] ) {
echo '<div class="post-avatar-wrap gutter-left">' . get_avatar( get_the_author_meta( 'user_email' ), 45 ) . '</div>';
}
?>
<?php
/* Add a print button only for single pages/posts
* and if enabled in the theme option.
*/
if ( $graphene_settings['print_button'] && is_singular() ) : ?>
<?php graphene_print_button(); ?>
<?php endif; ?>
<?php /* Add an email post icon if the WP-Email plugin is installed and activated */
if( function_exists( 'wp_email' ) && is_singular() ) { echo '<p class="email wp-email-button">'; email_link(); echo '</p>'; }
?>
<?php /* Post title */ ?>
<h2 class="post-title entry-title">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'graphene' ), the_title_attribute( 'echo=0' ) ); ?>">
<?php if ( get_the_title() == '' ) { _e( '(No title)', 'graphene' ); } else { the_title(); } ?>
</a>
<?php do_action( 'graphene_post_title' ); ?>
</h2>
<?php /* Post meta */ ?>
<?php if ( $post_type->name != 'page' || is_user_logged_in() ) : ?>
<div class="post-meta clearfix">
<?php /* Post category, not shown if admin decides to hide it */ ?>
<?php if ( ( $graphene_settings['hide_post_cat'] != true ) ) : ?>
<span class="printonly"><?php _e( 'Categories:', 'graphene' ); ?> </span>
<p class="meta_categories"><?php the_category( ", " ); ?></p>
<?php endif; ?>
<?php /* Edit post link, if user is logged in */ ?>
<?php if ( is_user_logged_in() ) : ?>
<p class="edit-post">
<?php edit_post_link( sprintf( __( 'Edit %s', 'graphene' ), $post_type->labels->singular_name ), ' (', ')' ); ?>
</p>
<?php endif; ?>
<?php /* Inline post date */ ?>
<?php if ( graphene_post_date_setting( get_the_ID() ) == 'text' ) graphene_post_date(); ?>
<?php /* Post author, not shown if this is a Page post or if admin decides to hide it */ ?>
<?php if ( $post_type->name != 'page' && $graphene_settings['hide_post_author'] != true ) : ?>
<p class="post-author author vcard">
<?php
/* translators: this is for the author byline, such as 'by John Doe' */
$author_url = '<a href="' . get_author_posts_url( get_the_author_meta( 'ID' ) ) . '" class="url" rel="author">' . get_the_author_meta( 'display_name' ) . '</a>';
printf( __( 'by %s', 'graphene' ), '<span class="fn nickname">' . apply_filters( 'graphene_author_url', $author_url ) . '</span>' );
?>
</p>
<?php endif; ?>
<?php /* For printing: the date of the post */
if ( $graphene_settings['print_css'] && graphene_should_show_date() ) {
echo graphene_print_only_text( get_the_time( get_option( 'date_format' ) ) );
}
?>
<?php do_action( 'graphene_post_meta' ); ?>
</div>
<?php endif; ?>
<?php /* Post content */ ?>
<div class="entry-content clearfix">
<?php do_action( 'graphene_before_post_content' ); ?>
<?php if ( ( is_home() && !$graphene_settings['posts_show_excerpt'] ) || is_singular() || ( ! is_singular() && ! is_home() && $graphene_settings['archive_full_content'] ) ) : ?>
<?php /* Social sharing buttons at top of post */ ?>
<?php if ( stripos( $graphene_settings['addthis_location'], 'top' ) !== false) { graphene_addthis( get_the_ID() ); } ?>
<?php /* The full content */ ?>
<?php the_content( '<span class="block-button">' . __( 'Read the rest of this entry »', 'graphene' ) . '</span>' ); ?>
<?php else : ?>
<?php /* The post thumbnail */
if ( has_post_thumbnail( get_the_ID() ) ) { ?>
<div class="excerpt-thumb">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'graphene' ), the_title_attribute( 'echo=0' ) ); ?>">
<?php the_post_thumbnail( apply_filters( 'graphene_excerpt_thumbnail_size', 'thumbnail' ) ); ?>
</a>
</div>
<?php
} else {
echo graphene_get_post_image( get_the_ID(), apply_filters( 'graphene_excerpt_thumbnail_size', 'thumbnail' ), 'excerpt' );
}
?>
<?php /* Social sharing buttons at top of post */ ?>
<?php if ( stripos( $graphene_settings['addthis_location'], 'top' ) !== false && $graphene_settings['show_addthis_archive'] ) { graphene_addthis( get_the_ID() ); } ?>
<?php /* The excerpt */ ?>
<?php the_excerpt(); ?>
<?php endif; ?>
<?php wp_link_pages( array( 'before' => '<div class="link-pages"><p><strong>' . __( 'Pages:','graphene' ) . '</strong> ', 'after' => '</p></div>', 'next_or_number' => 'number' ) ); ?>
<?php do_action( 'graphene_after_post_content' ); ?>
</div>
<?php /* Post footer */ ?>
<div class="entry-footer clearfix">
<?php /* Display the post's tags, if there is any */ ?>
<?php if ( $post_type->name != 'page' && ( $graphene_settings['hide_post_tags'] != true) ) : ?>
<p class="post-tags"><?php if ( has_tag() ) { _e( 'Tags:', 'graphene' ); the_tags( ' ', ', ', '' ); } else { _e( 'This post has no tag','graphene' ); } ?></p>
<?php endif; ?>
<?php /* Display comments popup link. */ ?>
<?php if ( graphene_should_show_comments() ) : ?>
<p class="comment-link">
<?php
$comments_num = get_comments_number();
comments_popup_link( __( 'Leave comment', 'graphene' ), sprintf( __( '%s comment', 'graphene' ), number_format_i18n( $comments_num ) ), sprintf( _n( '%s comment', '%s comments', $comments_num, 'graphene' ), number_format_i18n( $comments_num ) ), 'comments-link' );
?>
</p>
<?php endif; ?>
<?php
/* Display AddThis social sharing button */
if ( stripos( $graphene_settings['addthis_location'], 'bottom' ) !== false && $graphene_settings['show_addthis_archive'] ) { graphene_addthis( get_the_ID() ); }
?>
<?php do_action( 'graphene_post_footer' ); ?>
</div>
</div>
</div>
<?php endif; ?>
<?php /* For printing: the permalink */
if ( $graphene_settings['print_css']) {
echo graphene_print_only_text( '<span class="printonly url"><strong>' .__( 'Permanent link to this article:', 'graphene' ). ' </strong><span>' . get_permalink(). '</span></span>' );
}
?>
<?php /* Display Adsense advertising */ ?>
<?php if ( ! is_front_page() || ( is_front_page() && $graphene_settings['adsense_show_frontpage'] ) ) { graphene_adsense(); } ?>
<?php do_action( 'graphene_loop_footer' ); ?>
Валентина, а Вы не хотели бы поближе познакомиться с php, а то трудно будет самостоятельно вести свой проект. Или хотя бы записались в группу, сайты которой я сопровождаю (см. страницу «Мои Услуги»). Если по существу, то надо экспериментировать с местом для кода. Попробуйте вставить после тега </h2>.
Виталий приветствую, один мой пользователь предложил сделать одну фишку на сайте, а именно: чтобы название рубрики оставалось в измененном ховере, то есть цвете, пока пользователь находится в данной рубрике. Если в курсе, подскажи как реализовать, заранее благодарю. Гугол выкидывает не то что я ищу.
Владимир, попробуйте так:
Спасибо Виталий, у меня еще один вопрос о постраничной навигации. Я создал отдельную страницу front-page для новостей, поставил навигацию, не работает, ставил и плагин и вручную, кодом, ничего не работает. Если в курсе помоги.
a:active, не работает
Здравствуйте Виталий. Хочу убрать рубрики из сайдбара и вывести их на главной странице тематическими картинками, которые будут открывать соответствующие рубрики. Гугол выдает все о миниатюрах постов а то что я хочу нет, если есть варианты помогите пожалуйста, заранее благодарю..
Владимир, так к рубрикам не привязываются миниатюры, их можно только отдельно прописывать, в ручном режиме.
Например:
Спасибо Виталий. Если я правильно понял эти ссылки надо вставлять в цикл и делать на каждую рубрику отдельную
Владимир, в цикл вставлять не надо, наоборот, если Вы хотите, чтобы на главной у вас были ссылки на категории с миниатюрами, то надо сделать или статическую страницу или вставить в файл index.php перед циклом.
Спасибо Виталий, я понял, уже дошло. По началу не мог понять, дело в том что под миниатюрами хочу запустить новостной блок с навигацией а она работает только на базовых шаблонах, поэтому у меня и не получалось.
Красивый шаблон Постряпушки, сколько стоят ваши шаблоны?
Не дешево)
А можно точнее? Если заказать вам подобный шаблон, то сколько это будет стоить?
Игорь я написал ответ на Ваш e-mail.
Я получил письмо, к сожалению он не адаптирован под мобильные устройства ((
Добрый день! Огромное спасибо за статью, да и весь ваш блог мега-полезный и написан понятным языком. Как раз для меня, я по-тихоньку вникаю в код, планирую в будущем сверстать для себя тему для кулинарного сайта. Сделала я вывод на главную по вашей статье, но знакомая верстальщица, сказала, что функция query_posts устарела и нужно использовать get_posts, но для меня это не удобно, так как мне нужен вывод из определенных категорий и определенное кол-во постов. Что вы думаете, по поводу устаревания этой функции?
И еще один вопрос, к вам, я хочу на главной оставить прежний вывод постов, но из опреленной рубрики, а где там указать id, мне не совсем понятно. Вот код
<a class="post-title" href="">
<a href=""><img class="alignleft thumb" src="" alt=""></a>
<a class="post-more-link" href="">Читать далее →</a>
Здравствуйте! Вот выдежка — «Функция query_posts() предназначена для самого WordPress и должна использоваться для изменения основного Цикла WordPress, если нужно создать еще одни цикл, то используйте get_posts() или WP_Query». Функция не устарела, просто ее нельзя использовать на странице вместе с основным циклом.
На счет второго вопроса, не понял…
Спасибо за быстрый ответ! Мне хочется сделать вывод постов на своем сайте, как вы сделали для кулинарного сайта. Вверху вывод плиткой, а внизу обычный вывод постов из определенной рубрики
Екатерина! В статье у меня приведен код. Я специально туда добавил вывод из определенной категории:
Где cat=4 — ID рубрики.
Да, я уже так и подумала, что мне нужно будет использовать этот код, я даже думаю сделать это на другой странице, чтобы можно было менять. Спасибо за помощь!
Здравствуйте. Я хочу сделать вывод миниатюр с анонсами постов на главной странице. Но только не как вы описали выше с помощью тега the_content_rss, а как нибудь по другому можно. Если честно хочу точно также как у вас на /. Пожалуйста напишите как у вас организовано на главной странице, с помощью каких тегов? А если можно полностью код, как это все организовать. Просто я новичок. Но мне понравилось именно как у вас сделано на главной. Подскажите пожалуйста как мне точно также сделать.
Здравствуйте Михаил. Вот код, который я использую:
Спасибо за код. Но только вот я не понял.
1)Этот код нужно вставлять в index.php ?
2)Как вывести потом этот код на главной, наверное с помощью каких то тегов?
3)И какие стили для этого прописать?
Михаил,
1. Да, код надо прописывать в файл index.php.
2. Для вывода кода никаких тегов не надо. Просто надо правильно все прописать.
3. В шаблоне есть файл index.php и в нем прописаны индивидуальные стили Вашего шаблона. У меня они другие и Вам не подойдут, поэтому я свои стили в код не прописывал. Посмотрите как устроен Ваш файл index.php.
Насчет 3 пункта стили я понял что ваши мне не подходят которые в статье. Я хочу оставить свои стили. Вы не могли бы глянуть на мой сайт. Адрес сайта я указал в поле «Адрес блога». Посмотреть через браузер код моего сайта. И под стили моего сайта написать код как у вас на главной. Все как у вас, только под мои стили. Пожалуйста. Просто я новичок, только начал создавать сайт.
Михаил, набирайтесь знаний, скачайте бесплатные курсы по HTML и CSS. За вас никто данную работу не сделает, по крайней мере бесплатно.
Ладно пускай остается все как есть. Только вот не пойму как сделать как у вас. При нажатии на главной на любую миниатюру попадаешь на полную новость, но при этом миниатюра не дублируется в полной новости. У вас миниатюра только на главной странице. А у меня и на главной и в полной новости остается.
Михаил, миниатюра выводится с помощью специальной функции, если эта функция будет только в файле index.php и не будет ее в файле single.php, то миниатюра будет только в анонсе
Здравствуйте! Воспользовался вашим примером создания миниатюр ввиде каталога, Возникла задача сделать количество миниатюр меньше, а на остальные сделать ссылку, которая будет вести на оставшиеся записи, Или же название рубрики сделать кликабельным?! Буду благодарен за помощь!
Здравствуйте Александр!
За количество выводимых миниатюр отвечает этот кусок кода:
Где 8 и есть количество миниатюр.
Ссылку же на оставшиеся записи можно прописать вручную. Пример:
Добрый вечер Виталий! мне нужно что бы в категории с подкатегориями выводилась ссылка вот код, сократил число миниатюр до 3 и нужно сделать дальше ссылку, подкатегорий несколько
Александр, если я Вас правильно понял, то вывести ссылки в заголовках подкатегорий можно так:
То что нужно! Спасибо огромное! только не могу задать отдельный стиль для echo,
прописываю для h3, но ничего не меняется, может поможете еще)?
Александр, заголовок теперь стал ссылкой, поэтому надо прописывать так:
.общий класс h3 a {
стили
}
Спасибо! Очень помогли)
И снова здравствуйте)
Виталий, я, скорее всего, малость не в тему, но это наиболее подходящая. Не могу разобраться, как в Woocommerce вывести на страницу сайта категорию товаров как папку. Пример — я создаю категории в родительском порядке — электронные системы — мобильные телефоны — айфоны, айпады, айпэды. Ну и внутри каждого из трех уже сами товары. Все товары айфоны, к примеру, я приписываю только к категории Айфоны, а не по всему пути. Но при нажатии на электронные устройства — мне выдает полный список всех товаров, а не миниатюры трех основных подкатегорий. Подскажите, пожалуйста, как с этим справиться без лазания в код)
Здравствуйте Валентин!
Как я уже говорил, к сожалению я не знаком с плагином Woocommerce, поэтому не могу помочь в Вашей проблеме.
Все нормально, спасибо, ответ я уже нашел, у Woocommerce есть персональные настройки, где устанавливаются выводы по категориям, затем — по подкатегориям. Очень жаль, что Вы, так хорошо разбираетесь в Вордпресс и не разбираетесь в основном его плагине для продаж(
Валентин, все знать не возможно, но я бы для создания интернет-магазина использовал другой бесплатный движок, например OpenCart, который по моему мнению гораздо больше подходит для продаж.
Зависла на статье = давно хотела реализовать эту фишку без плагинов. Интересно -спасибо! НО можно ли реализовать то же самое на page.php? Или на любой стационарной странице — для меня это актуально. Пока попытки неудачные — выводятся статьи несколько раз((( В какую часть кода интегрировать ваши образцы кода или покажите примеры на к-л сайте. Благодарю.
Елена, я не совсем понял, что вы хотите вывести на статической странице?
Виталий, миниатюры с анонсами постов. В статический page.php.
Елена, просто так на статических страницах типа page анонсы не выведешь, там не предусмотрен цикл WordPress. Попробуйте сделать это с помощью функции the_content_rss().
Да, Виталий, теперь понятен источник такого глюка — цикла в коде не было. Благодарю за разъяснение. Буду пытаться с the_content_rss(). Если все получится — поделюсь опытом, думаю не одна я стремлюсь свести количество плагинов на сайтах wp к минимуму.
Вопрос следующего характера. Нужно организовать вывод новостей с горизонтальной прокруткой, как здесь
wired.co.uk
, можете помочь? У меня вообще нет идей, как это сделать. Буду очень благодарен.К сожалению помочь не смогу.
Я еще ничего не применил, из того, о чем вы пишете, но уже во многом разобрался. Спасибо за доходчивые объяснения. Пожалуй посмотрю рекламу на вашем блоге…
вот пытаюся воспользоваться кодом но не выходит, в оригинале выводится 1 блок с 3 разных постов, но пытался добавить блоки и поменять с определенной категории по 3 поста, не получается. По коду вообще выводят блок через , подскажите что не так делаю?
За ранее спасибо, подписался к вам, очень полезный у вас сайт!!!!
Просто в коде надо указать категорию с которой будут браться анонсы, например:
Где cat=3 ID категории.
это пытался сделать, но выводится не корректно ВЕРТИКАЛЬНО
Если выводится некорректно, то php тут не причем, надо стили править.
если добавляю еще 1 блок, то тему наперекосяк ведет
Здравствуйте. Все сделал как Вы написали выше. Выводятся только названия поста, а картинки нет.
Вот вам пример
market-infotovarov.ru
Какой хороший сайт у Вас. И все понятно. И самое главное все работает. Добавил в избранное эту страницу. Спасибо Вам за информацию
Приведенный в статье код, не только добавляет в шаблон вывод миниатюр на главной странице, но так же меняет статьи отображаемые на главной странице… По умолчанию у меня стоит показывать последние опубликованные статьи, но если добавить код с указанием категории, то и в миниатюрах и в последних опубликованных выводятся статьи из указанной категории. Фактически они дублируют друг друга. Что я делаю не так? Код вставлял в index.php, может имеет смысл добавлять его в header.php тема используется стандартная twentytwelve
Код:
<span class="hidden-link" onclick="return !window.open(this.data-link)" data-link="»>
<span class="hidden-link" data-link="» rel=»bookmark»>
ddsitemapgen перестал работать после установки ваших кодов.. как исправить
А можно ли использовать ваш код не только на главной, но для каждой статьи. То есть отказаться от плагина Yet Another Related Posts Plugin.
Для этого есть другой код. Смотрите тут.
добрый день.
на моем сайте на главной странице посты иду в один ряд в низ.и за главную страницу отвечает файл home.php а не index.php .я вставляю код и у меня получается сначала идет как у вас в примере первом 4 сторочки и 4 ряда а после них идут теже посты но как обычно в один ряд вниз.подскажите что заменить?спасибо
Здравствуйте Дмитрий!
Почитайте этот пост.
Спасибо Виталий.У вас хороший сайт с подробным разъяснением.некоторые коды внедрил в свой сайт.
Здравствуйте, подскажите как еще вывести дату публикации?
Виталий подскажите пожалуйста
пробую вывести в садбар определенные статьи — прописываю в коде вручную используя ваш код Если захожу на другую страницу сайта выводится та стать внутри которой нахожусь. Подскажите пожалуйста что нужно подправить чтобы выводились нужные страницы в сайдбаре на всех страницах сайта (статьях рубриках категориях)
<ul>
<li data-link="прописываю урл на нужную статью"><?php the_post_thumbnail('thumbnail'); ?></a>
<a data-link="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
</ul>