
Здравствуйте!
Структура главных страниц почти у всех блогов одинакова. Обычно, там отображается список n последних статей с их короткими анонсами и изображениями-миниатюрами (если таковые используются). При клике по заголовку статьи вы попадаете на страницу этой статьи с её полным содержанием. Достаточно удобно, когда клик по миниатюре тоже будет перенаправлять читателя на полную статью.
Дело в том, что не во всех шаблонах WordPress добавлена ссылка к миниатюре. Если вы тот самый “счастливчик” в шаблоне которого клик по изображению-миниатюре ничего не даёт и вы хотите добавить ссылку к миниатюре, то этот пост как раз для вас.
Как сделать миниатюру ссылкой
Вывод списка статей происходит в файле index.php вашего шаблона WordPress.
Откройте этот файл /wp-content/themes/название_шаблона/index.php.
Вот код, который отвечает за вывод списка анонсов постов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?> <h2 class="title entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка на <?php the_title_attribute();?>"><?php the_title(); ?></a></h2> <div class="postdate updated"><img src="<?php bloginfo('template_url'); ?>/images/date.png" width="16" height="16" /> <?php the_time('j F Y') ?> <img src="<?php bloginfo('template_url'); ?>/images/user.png" width="16" height="16" /> <span class="vcard author"><span class="fn"><?php the_author() ?></span></span> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Редактировать', '', ''); } ?> <?php if(function_exists('the_views')) { the_views(); } ?></div> <div class="entry"> <?php the_content('<strong>Читать далее »</strong>'); ?> </div> </div><!--/post-<?php the_ID(); ?>--> <?php endwhile; ?> |
Здесь идет проверка на наличие статей и цикл в котором выводятся анонсы.
Вот фрагмент кода, который отвечает именно за вывод миниатюры к анонсу статьи:
1 2 3 4 5 |
<?php if (function_exists("has_post_thumbnail") && has_post_thumbnail()) { the_post_thumbnail(array(260, 200), array("class" => "alignleft post_thumbnail")); } ?> |
Собственно здесь и нужно внести коррективы.
Ссылка создается с помощью тегов <a></a>. И у ссылки есть атрибут href в котором указывается url-адрес на который ссылка должна перенаправить пользователя.
Нам нужно, чтобы ссылка, добавляемая к миниатюре, указывала на url поста, к которому относится эта миниатюра.
Давайте посмотрим каким образом получается url-поста для заголовка статьи.
Вот в строке 8 видите фрагмент <a href=”<?php the_permalink() ?>”
Аналогично поступим и с нашей миниатюрой – обрамим её тегами <a></a>, а атрибуту href значение будет задавать функция the_permalink().
Итак, вот, что у меня получилось:
1 2 3 4 5 6 7 8 |
<?php if (function_exists("has_post_thumbnail") && has_post_thumbnail()): ?> <a href="<?php the_permalink() ?>"> <?php the_post_thumbnail(array(260, 200), array("class" => "alignleft post_thumbnail")); ?> </a> <?php endif; ?> |
Добавленный код расположен в строках 3 и 6. Соответственно – открывающий и закрывающий теги a.
Еще вы может заметить, что я изменил синтаксис конструкции if. Это два эквивалентных способа написания условий if:
1 2 3 4 5 6 7 8 9 10 11 |
<!— способ 1 --> <?php if() { ?> <!-- код --> <?php } ?> <!— способ 2 --> <?php if(): ?> <!-- код --> <?php endif; ?> |
Просто endif во втором способе более заметно, чем просто закрывающая фигурная скобка }. Поэтому, когда код php идет вперемешку с кодом html, я использую способ 2.
Это все. Миниатюра теперь расположена в ссылке, и все работает как надо. Проверяйте.
Подведем итог, чтобы сделать миниатюру ссылкой, нужно обрамить код, выводящий миниатюру, тегами <a></a> вот таким образом:
1 2 3 4 5 |
<a href="<?php the_permalink() ?>"> <!— код миниатюры --> </a> |
Есть вопросы – спрашивайте.
Успехов!
Спасибо большое за статью! Попробовал сделать такой алгоритм к одному сайту – получилось! Интересно, это только в старых шаблонах имеется такой “дефект”? Просто в новых такого не наблюдал
Пожалуйста, если действительно пригодилась информация. Шаблоны не смотрел другие по этому поводу, но в моём не хватало такой ссылки. Вот описал способ решения.
Алексей, поздравляю Вас! Вы автор первого комментария к статье. На блоге действует конкурс 15 WMR за первый комментарий. Если желаете получить приз, то Вам нужно еще выполнить репост статьи в любую из соцсетей и прислать мне номер Вашего WMR кошелька (мейл см. на странице О сайте).
Да, пожалуйста – plus.google.com/112356189190732779910/posts – ссылка, а WMR – R217783563730. И большое спасибо, очень интересный конкурс
Отправил приз. =) Заходите в гости почаще!
Спасибо, помогли