Как вывести статьи в сайдбар

Как вывести статьи в сайдбар нужные именно вам

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

Преимущества в продвижении

Да, Вы не ошиблись в заголовке! Именно преимущество в продвижении блога! Какие преимущества дает вывод статей в сайдбар?

1). В статье «Составление семантического ядра» вы найдете полное описание, а точнее характеристику такого метода продвижения. Если говорить вкратце семядро состоит из множества запросов: высокочастотных, среднечастотных и низкочастотных. Продвижение по НЧ запросом не слишком трудное в плане материальных и временных затрат.

Но если взять (ВЧ, СЧ) запросы, выйти в ТОП по ним достаточно сложно, но возможно! Вывод определенных записей, которые продвигаются исключительно ВЧ и СЧ запросами даст необходимый толчок в продвижении по ТОП-у поисковых систем.

2). Увеличивает глубину просмотра страниц(от главной и дальше). Плюс ко всему такие записи получат наибольшую популярность среди ваших пользователей, не говоря о удобстве, ведь можно поместить в сайдбар самые важные по вашему мнению записи своего блога!

Такой способ вывода позволяет улучшать поведенческие факторы статей, улучшая их позиции в топе. Более подробная информация будет мною изложена в следующих статьях(подписывайтесь на рассылку — не пропустите важные моменты в SEO продвижении своего ресурса).

Как была задумана эта статья?

как вывести записи в сайдбар

Задумана она была сразу же, после принятия мною такого решения как вывести нужные мне записи в сайдбар. Поиск информации по этому поводу в интернете свел все мои попытки 100% на нет. Ничего подобного я не нашел!

Попадалось в моем поиске в основном темы про плагины и вывод записей по их популярности. Нет мне это не нужно!

Хотя один блог все же нашелся, на нем был описан метод вывода записей в сайдбар, но мне он не подошел по следующим причинам:

Внешний вид

На описанном методе отсутствовали такие необходимые для меня критерии: критерии записей

— Миниатюры должны быть прописаны в CSS а не в виджете WordPress. Я не хотел и не хочу, чтобы какой-либо ленивый «му…» скопировал миниатюры посредством ПКМ — Сохранить картинку как… тем самым присвоив их себе. Нет уж! Пускай будут в единственном экземпляре;

— Текст под миниатюрами хотелось оформить по своему и не плохо было бы добавить смену цвета шрифта при наведении на картинку, либо на сам текст! Сей метод этого не позволял;

— Выравнивание каждой миниатюры не задавалось. В общем долго мучатся с представленным кодом не хотелось. Поэтому пришлось поковыряться в шаблоне и оформить по своему;

— Еще хотелось бы видеть подсказки при наведении на картинку, либо текст.

Давайте рассмотрим весь код во всех подробностях, дабы у Вас не возникло дальнейших проблем при его настройке и разберемся как вывести статьи в сайдбар!

Как вывести статьи в сайдбар?

Всегда повторял и говорю снова! Первым делом перед тем как менять файлы своей темы делайте «Резервное копирование»! Хотя и достаточно будет только зарезервировать файл Style.css. Но все таки резервная копия не помешает.

1). Первым шагом будет создание миниатюр(мною использован размер 125x125px) для своих будущих статей в сайдбаре. Сделать это можно к примеру в фотошопе. В статье «Бесплатные программы для вебмастера» вы найдете как саму программу так и другие полезные инструменты на своем пути продвижения блога!

2). Хорошо, миниатюры вы сделали! Дабы не загружать сервер лишним весом не забудьте их так же как и остальные картинки правильно оптимизировать! Уменьшить размер не теряя качество — вот подробная статья по этому поводу «Как оптимизировать изображения».

Картинки полностью готовы. Теперь нужно закинуть их на хостинг. Сделать это можно легко! При помощи отличного Ftp-клиента.

Я поместил все миниатюры в отдельную папку по такому пути: httpdocs/wp-content/themes/название шаблона/images/sidebar sidebar — новая папка специально созданная под миниатюры!

Хорошо, с этим у вас проблем возникнуть не должно. Изображения подготовлены и загружены! Теперь заходим в админку блога — виджеты и добавляем текстовый виджет.

Дальше нужно весь приведенный код ниже вставлять в текстовый виджет WordPress!

Первым делом берем вот этот код:

<div class=»text_picture»>

Этим мы открываем блок с будущими выведенными записями!

Дальше остается только изменить все ссылки, подсказки и текст миниатюр на свой:

<a href=»http://ссылка на статью» title=»подсказка при наведении»>

<div class=»picture»>

<div class=»picture_img1″></div>

<div class=»picture_text»>Текст под миниатюрой</div></div></a>

<a href=»http://ссылка на статью» title=»подсказка при наведении»>

<div class=»picture»>

<div class=»picture_img2″></div>

<div class=»picture_text»>текст под миниатюрой</div></div></a>

<div class=»clear»></div>

ВНИМАНИЕ нужно последовательно прописать номера в этой строчке для каждой картинки:

<div class=»picture_img1″></div>

— img 1

— img 2

— img 3 и дальше… .

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

<div class=»clear»></div>

Данный класс сохраняет структуру двух элементов и позволяет менять их расположение по высоте.

Этот код подключает только две миниатюры. Наверняка вам потребуется намного больше? Поэтому смело копируем код например три раза и того получится 6 миниатюр.

Для последней картинки меняем это:

<div class=»clear»></div>

На это:

<div class=»clear»></div></div>

То есть мы добавили закрывающийся тег </div> для самого первого блока позволяющего нам открыть будущие выведенные записи.

<div class=»text_picture»>

Сохраняем виджет, и переключаемся на файл style.css. Добавив стили, выровняем все миниатюры по горизонтали и вертикали! Сделаем меняющийся цвет у текста при наведении на него.

Добавление стилей CSS

Весь приведенный код копируем в самый конец файла style.css:

/* text picture отвечает за блок с выведенными записями */

.text_picture { width: 302px; padding: 10px 0 8px 6px; margin: 0 auto 20px; background: #ffffff;

}

.text_picture:after, .picture_text:after { content: »; display: block; clear: both; visibility: hidden; height: 0;

}

/*picture отвечает за все миниатюры и текст под ними */

.picture { float: left; width: 145px; padding: 0 0 15px; margin: 0 6px 3px 0; text-align: center; color: #0169D3;

}

.picture:hover { color: #00B4FF;

}

/*picture img отвечает за картинки, выравнивание opx — горизонталь; opx — вертикаль*/

.picture_img1 { background: url(images/sidebar/первая картинка.jpg) no-repeat 0px 0px;

}

.picture_img2 { background: url(images/sidebar/вторая картинка.jpg) no-repeat 0px 0px;

}

.picture_img3 { background: url(images/sidebar/третья картинка.jpg) no-repeat 0px 0px;

}

.picture_img4 { background: url(images/sidebar/четвертая картинка.jpg) no-repeat 0px 0px;

}

.picture_img5 { background: url(images/sidebar/пятая картинка.jpg) no-repeat 0px 0px;

}

.picture_img6 { background: url(images/sidebar/шестая картинка.jpg) no-repeat 0px 0px;

}

.picture_img1, .picture_img2, .picture_img3, .picture_img4, .picture_img5, .picture_img6 { width: 145px; height: 140px; margin: 0 auto;

}

/*picture text отвечает за текст(размер, цвет, подчеркивание, шрифт */

.picture_text { text-decoration: underline; font: normal 14px Arial, sans-serif;

}

.picture_text { width: 145px; margin: -9px -20px;

}

Настраиваем под себя цвет шрифта, размер и выравниваем картинки!

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

comments powered by HyperComments

Оставьте мне собщение