Выводим в нужном месте статьи ссылки навигации по тегам

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

Выведем в финале статьи ссылки навигации по меткам (тегам).  Но тут в чём сложность!? ..а в том, что сейчас в сети великое множество шаблонов – и они все разные. Но ведь и требования у нас у всех разные: всегда что-то будет не устраивать, хотя, казалось бы, выбран симпатичный шаблон.

И в этом посте мы разберёмся в поднастройке оптимального отображения ссылок тегов.

настроим вывод меток HTML и CSS

Значит, нам потребуется документ (файл) post-single.php или у вас может быть и какой-то иной, к примеру просто single.php — смотрите… Словом, вам нужен тот, который выводит контент (статьи) на странички сайта…

Я напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Пригодится!

Поверьте: так короче до профессионализма, ибо возможность переварки накопленных крупиц знаний в кашу маловероятна!

Открываем post-single.php и отыскивам такой код:

<div class="sample-posty">
<p>теги:</p></div>         
        <?php if(get_the_tags()) {
                ?><div class="postmeta-secondary"><span class="meta_tags"><?php the_tags('', ', ', ''); ?></span></div><?php
           }
       ?>

(тем, кто читал предыдущие статьи – проматывайте до кода вывода ссылок на похожие записи блога)

Но если в вашем шаблоне вообще нет возможности вывода навигации по тегам, то вам нужно отыскать в post-single.php такую строку: the_content(”); которая заключена в определённый код ЧИТАЙТЕ это место. …и сразу после тега ?> (вывода контента) пробуйте прописать код показанный выше. У вас должны появиться после вашей статьи ссылки меток.

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

1 – строка div класса, в который обёрнуто пояснение “Метки” (див у нас как и в выводе похожих постов – вернитесь к статье, ссылка выше, там и свойства CSS).

…Далее функция вывода самой выборки меток сайта.Обратите внимание на строку 4 !! – это обёртка div самой ссылки метки. У меня выполнено именно так. У вас, вероятно, этот класс не прокатит и вы можете присвоить любое иное имя (по английски) и настроить свой вариант отображения цвета ссылок, географии и т.п.

А вот в помощь дизайнерский вариант CSS селектора.

.postmeta-secondary a{
color: #999;/*цвет ссылки*/
font-size: 14px;/*размер шрифта*/
line-height: 18px;
margin: 0px 0px 10px 20px;/*отступы - положение*/
font-style: italic;/*наклон шрифта*/
}

Если станете менять (стили) имя дива в ВЕРХНЕМ КОДЕ, то замените и в селекторе CSS postmeta-secondary на своё.

Теперь вам потребуется вот эта статья: Как выровнять размер шрифта виджета облака меток

Online консультация по настройкам и созданию сайтов на WordPress

!..подписываясь на обновления mihalica.ru —
...расстаёмся с невежеством..!