2:56
Автор: Рубрика: Без рубрики Комментариев нет

Красивое меню рубрик для WordPress

Как обычно пошел в google, и написал «как сделать красивое меню рубрик для WordPress?» К моему удивления нормальной информации по этой теме я не нашел, а красивое меню для своего блога очень сильно хотел-)) Тогда я начал думать как можно это сделать, не прибегая к различным виджетам, так-как виджеты очень сильно тормозят блог. И тут пришла в голову неплохая идея, а именно сделать кнопки на html. Тем более что есть встроенный html виджет, который по сути не несет большой нагрузки на блог.

Вот что у меня получилось!

Красивое меню рубрик для WordPress

 

К сожалению я не дизайнер, и меню конечно не идеально, но в любом случае оно получше предыдущего. Если Вы желаете сделать себе что-то подобное, то читайте дальше, и сделаете своё идеальное меню. Для работы Вам понадобиться программам «Photoshop», и стандартный «редактор текста wordpress».

Первое что стоит сделать, это найти понравившиеся Вам иконке в интернете, я скачивал с сайта «iconfinder«. Просто забиваем в поиск сайта то что Вам нужно, и он выдаст Вам все что хоть как-то совпадает с критериями поиска. Скачивать лучше в формате «png«, иначе потом могут возникнуть проблемы при работе с «Photoshop».

Вот Вы выбрали подходящие иконки, теперь можно начинать редактирование в «Photoshop». Запускаем программу, и создаем новый документ нажав клавиши «Ctrl+N».

Новый документ в photoshop

Задайте параметры примерно такие как у меня на картинке, в прочим это не сильно важно. Главное тут это ширина и высота, у меня 200 х 35, у Вас могут быть другие размеры. После чего нажимаем «ок», у вас получится примерно такой блок…

Новый документ в photoshop 1

Следующее что стоит сделать, это включить функцию линейка, если конечно она у Вас не включена. Для того что бы активировать линейку, нажмите сочетание клавиш «Ctrl+R». Линейка нужна для точной центровки иконок, и названия рубрик. Для того что бы сделать такие полоски как у меня на картинке, просто нажмите левой кнопочкой мыши на линейку, и тащите в право.

Теперь приступим к созданию нашей первой кнопки для рубрик, для этого просто перетаскиваем из папки иконку, в главное окно программы «photoshop». После того как перетащили иконку, зажимаем клавиши «Alt+Ctrl+I» появится такое окно…

Изменении разришения

Задаем ширину и Высоту 32 х 32, и нажимаем «ок». Разрешение изображения изменено, и теперь оно соответствует нашей будущей кнопке. Остается только перетащить нашу иконку, на заранее приготовленную заготовку (200 х 32). Для этого выбираем инструмент перемещение, нажав английскую букву «V», и простым движением перетаскиваем. Должно получится примерно вот что…

перенос иконки

 

Остается добавить только название рубрики, для этого выбираем инструмент текст «T», и пишем название рубрики, получится должно примерно так…

написать текст в photoshop

Ну вот и все, кнопка готова, остается только сохранить и добавить на сайт. Для сохранения картинки зажмите клавиши «Shift+Ctrl+S» укажите имя, и выберите тип файла «png»…

Сохраняем картинку

А теперь приступим к непосредственному формированию «Красивого меню рубрик для WordPress«. Для этого как я говорил в самом начале понадобится обычные текстовый редактор wordpress. Заходи в редактор, и начинаем добавлять наши созданные кнопки в текстовый документ, должно получится примерно так…

Красивое меню рубрик для WordPress

 

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

сюда ссылка

 

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

код кнопок

Этот код нужно вставить в виджет «Текст», и нажать сохранить.

виджет текст

Ну вот и все!!! Я привел не большой пример как можно сделать «Красивое меню рубрик для WordPress«. Но стоит помнить, фантазия не ограничена, и применив этот способ, можно сделать практически все что угодно. Главным преимуществом можно считать тот факт, что вам не придется изменять что-то в шаблоне, пару строчек html кода, могут полностью изменить Ваш блог….

 

Комментариев нет

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: