Редизайн сайта на wordpress как сделать
достаточно хорошо разбираюсь в создании функционала по вордпресс: всякие плагины, дополнения и т.д.
а вот с дизайном - беда.
Делаю сайты на заказ, и уже потеряла много клиентов из-за неумения делать дизайн под заказчика.
Как правило ничего сверх ординарного они не просят, но тем не менее:
ВОПРОС: знающие подскажите возможно ли сделать дизайн не вникая особо в html, например на базе готовых шаблонов - меняя в них цвета, шрифты, фон и тд.
есть ли руководство по такому виду работ?
буду благодарна за ссылку.
заранее спасибо.
Сегодня, в эпоху высокой конкуренции в интернете, для продвижения сайта имеет значение всё, каждая мелочь. И дизайн страницы стоит на одном из первых мест. В этой статье мы приведём вам плагины для дизайна сайта на WordPress, которые помогут сделать проект красивее и лучше.
Значение дизайна при продвижении
Дизайн сайта влияет на продвижение сайта по трём направлениям:
- Адаптивность, кроссбраузерность и кроссплатформенность. Если сайт отображается на каком-либо устройстве, операционной системе или браузере как-то некорректно, не полноценно, то это плохо скажется на его ранжирование при тех условиях, при которых он работает плохо.
- Юзабилити и поведенческие факторы. Расположение элементов на сайте, их внешний вид влияют на юзабилити, удобство использования и поведенческие факторы. Также общее впечатление от внешнего вида тоже не стоит на последнем месте для поведенческих факторов. От этого зависит и продвижение сайта.
- Читабельность. Хорошо оформленные тексты легко читать и воспринимать посетителям. Это положительно сказывается на поведенческих факторах и вообще на мнении о сайте.
BBSpoiler
Удобный плагин, который создаёт спойлеры. Спойлеры — это такие элементы, которые прячут часть текста. Если кликнуть на них, то текст раскрывается. Таким образом можно удобно экономить пространство в длинных статьях, убирая в спойлер текст, который, скорее всего, читателю не понадобится. Кому понадобится, тот сможет развернуть спойлер.
Плагин очень простой в работе. После активации в редакторе записи появляется специальная кнопка. Если кликнуть на неё, то откроется редактор нового спойлера, в котором можно записать текст, выбрать стиль и отметить, будет он по умолчанию раскрыт или закрыт.
BBSpoiler на русском языке и бесплатный. Разработан Flector и имеет более 9 000 установок.
Shortcodes Ultimate
Пожалуй, самый многофункциональный плагин среди всех, которые мы рассмотрим в этой статье. Суть его в том, что он создаёт в WordPress дополнительные новые шорткоды, которые позволяют выводить на страницах и в записях разнообразные элементы дизайна, которые, к тому же, можно настроить по своему усмотрению.
После активации в редакторе появляется новая кнопка, клик по которой открывает все возможные шорткоды, разделённые на категории. Здесь есть заголовки, буквицы, спойлеры, аккордеоны, видео-плееры, изображения, списки, цитаты и много другое.
К плагину есть несколько дополнений, которые расширяют его функционал, а также множество настроек.
Это бесплатный плагин, разработан русскоязычным программистом Vladimir Anokhin, и имеет более 700 000 скачиваний.
WPi Designer Button
Позволяет создавать красивые кнопки. В нём есть множество готовых стилей и иконок. Для кнопок можно задавать свои стили, описания с подсказками, надписи, ссылки.
Плагин на английском языке, но отличается простотой в использовании и имеет понятный интерфейс. После его активации в редакторе появится специальная кнопка, с которой и нужно начинать работу.
Разработан wooprali, установлен более 6 000 раз, совершенно бесплатный.
Cool Tag Cloud
Плагины для дизайна сайта на WordPress продолжает тот, который создаёт облако меток. В WordPress есть собственный встроенный виджет облака. Однако, он примитивный, выглядит не очень красиво и настроек в нём мало.
Cool Tag Cloud создаёт новый виджет, который выглядит намного красивее встроенного, так же имеет множество настроек стиля и цветов.
Плагин полностью бесплатный и на русском языке. Разработан Flector и имеет более 10 000 установок.
Menu Icons
Очень простой плагин, который добавляет во встроенный редактор меню WordPress возможность назначать к пунктам навигации какие-либо иконки. После активации появляется новая опция для добавления иконки. Можно выбрать картинку из готового набора.
Никаких других настроек у плагина нет. Поэтому всё очень просто. Разработан ThemeIsle и имеет более 100 000 активных установок. И, конечно же, он бесплатный.
myStickymenu
Это плагин для дизайна сайта на WordPress полезен тем, что помогает создать “липкое” меню. Это такое меню, которое при прокрутке всегда остаётся в поле зрения вверху экрана. Этот приём используется во многих современных темах и он удобен.
К сожалению, нельзя сказать, что этот плагин прост в работе. Кроме этого, использование усложняет отсутствие русского языка. А также он не будет работать сразу после активации, его потребуется настроить. Поэтому рекомендовать его можно только тем вебмастерам, у которых уже есть определённый опыт.
Плагин бесплатный, разработан m.r.d.a, имеет более 30 000 установок.
SiteOrigin CSS
Если уж и говорить про плагины для дизайна сайта на WordPRess, то среди них обязательно должен быть такой, который позволяет изменить внешний вид активированной темы. SiteOrigin CSS – это как раз один из таких вариантов.
После активации плагина появляется возможность менять элементы темы – шрифты, цвета, размеры, отступы и другие параметры. И, несмотря на английский интерфейс, он интуитивно прост в использовании и понятен – достаточно просто отметить в редакторе мышкой нужный элемент, и изменить его по собственным предпочтениям с помощью панели инструментов. А для профессионалов есть возможность добавлять кастомный CSS для более полного изменения вида дизайна.
Быстрее, чем экспресс-дизайн. Дешевле, чем экспресс-дизайн. Лучше, чем экспресс-дизайн.
В прошлых сериях мы уже залили Вордпресс на хостинг и запустили блог Михаила Максимова. Но он выглядит скучно и несовременно. Настало время исправить это и сделать модный сайт.
На помощь призовём темы для Вордпресса — специальные файлы и настройки, которые меняют внешний вид блога, не трогая контент. Есть три способа подключить тему к Вордпрессу, от простого к сложному:
- найти в магазине тем,
- скачать самому и установить через тот же магазин,
- скачать и установить самостоятельно.
Установка темы из магазина
Перед нами появятся темы, которые уже установлены в блоге. По умолчанию Вордпресс ставит три темы, внешне похожие между собой. Мы можем установить дополнительно сколько угодно тем, но активной может быть всегда только одна. Если мы ставим новую тему и делаем её активной, старая отключается, но не исчезает. Она остаётся в списке установленных тем и ждёт, пока мы к ней не вернёмся.
Магазин тем в Вордпрессе покажет, какие темы у нас уже установлены и какие можно получить. Есть фильтры и сортировка по популярности.
Магазин тем в Вордпрессе покажет, какие темы у нас уже установлены и какие можно получить. Есть фильтры и сортировка по популярности.
Установка скачанной темы через магазин
Есть много тем, которые не попадают в официальный магазин Вордпресса, но при этом такие же классные, а то и лучше. Их можно скачать бесплатно на форумах или тематических сайтах — Чаще всего на крупных ресурсах с Вордпресс-темами есть такой же предпросмотр, как в официальном магазине. Как только нашли нужный дизайн — скачивайте.
После установки тема появится в списке наших тем, и мы можем там её активировать. Дело сделано.
Если шаблон понравился — скачиваем. Скорее всего, там будет демоверсия, а за все возможности надо будет доплатить, но нас это пока устраивает.
Если шаблон понравился — скачиваем. Скорее всего, там будет демоверсия, а за все возможности надо будет доплатить, но нас это пока устраивает.
Установка темы через панель хостинга
Если вы не любите все эти визуальные консоли и всё привыкли делать через панель управления хостингом — это вариант для вас.
Когда всё сделано правильно, то после распаковки вы сможете увидеть свою тему в списке установленных в админке Вордпресса. Если вы не знаете, что такое панель управления хостингом и как в ней работать — для вас есть отдельная статья.
На что смотреть при выборе темы
Когда попадаешь на сайт с темами, сначала глаза разбегаются. Хочется и эту тему, и ту, и вот эту. Но вот несколько соображений, как не потратить деньги на ненужные и плохо работающие темы.
Не смотрите на красивые фотографии . Часто дизайнеры тем ставят в предпросмотр красивых женщин, стильную молодёжь, красивые пейзажи и всевозможный лайфстайл. Это выглядит круто, когда листаешь темы, но тут есть подвох: на вашем сайте вместо этих красивых фотографий будут ваши фотографии. И эффект роскошного дизайна может мгновенно испариться, если ваши фотографии не такие же сочные.
Поэтому, выбирая тему, смотрите в первую очередь на конструкцию, размеры блоков, типографику, отступы, тени и всякие эффекты, а не на красивые фото.
Позадавайте себе эти вопросы и поищите ответы в выбранной вами теме. Вы поймёте, например, что выделение какой-то одной статьи вам не нужно; или что вам совершенно бесполезна роскошная фотогалерея, которая в этой теме играет главную роль.
Много эффектов — плохо. Дизайнеры тем любят понаворачивать анимаций, эффектов, переходов, теней, прозрачностей и прочего колхоза. Это занятно выглядит на рыбном тексте, но на вашем реальном сайте вы, скорее всего, это всё выключите.
Есть ли компоновщик страниц? Многие темы Вордпресса используют плагин — компоновщик страниц (layout editor). Эта минипрограмма позволяет делать многоколоночную вёрстку, вставлять в страницы готовые формы обратной связи, карты, интерактивные компоненты и всё подобное. Тема с компоновщиком удобнее, чем без.
Что за шрифты? Печальная правда в том, что 90% красивых шрифтов в заморских темах не имеют русской версии, поэтому все прекрасные заголовки и роскошные каллиграфические надписи у вас будут работать только на английском. Шрифты, конечно, до какой-то степени можно заменить, но кириллических (то есть русских) по-прежнему маловато.
Создание темы WordPress дает возможность выстроить структуру сайта под индивидуальные нужды и не подстраиваться под существующие шаблоны. Чтобы создать шаблон WordPress, достаточно обладать базовыми знаниями HTML, PHP и уметь работать в админке движка.
Всем будущим владельцам сайтов доступны стандартные темы WordPress. Но не всем они подходят по оформлению. Поэтому некоторым вебмастерам необходима верстка уникального по дизайну и функциям шаблона.
- Возможность отличиться от конкурентов, использующих стандартные шаблоны WordPress;
Для создания темы WordPress из HTML-шаблона понадобятся базовые знания этого языка программирования. Первое, что нужно сделать — скачать и установить WordPress на компьютер. Вам также потребуется любой редактор, например, Notepad++ или Блокнот.
Далее нужно найти директорию wp-content\themes на диске, где установлен WordPress, и создать в ней новую папку с названием будущей темы. Здесь же хранятся стандартные шаблоны WordPress.
Неумелое редактирование шаблона WordPress может привести к плачевным последствиям. Удаление даже одной строки из кода темы может сделать ее полностью неработоспособной. Поэтому в этом вопросе нужно разбираться досконально.
Особенности шаблонов для WordPress
Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html . Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:
В состав темы входит несколько основных групп файлов:
- CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
- Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php ;
- functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
- Изображения – рисунки, которые используются в качестве фона.
Благодаря использованию шаблонов в WordPress удалось отделить внешнее представление сайта от программного кода. Поэтому они никак не влияют друг на друга, и их версии можно обновлять по отдельности.
- Поменять цвет меню;
- Установить цвет ссылок;
- Выбрать один из вариантов структуры сайта;
- Задать расположение меню;
- Установить цвет фона для контента.
На диске ( или хостинге ) файлы всех установленных тем хранятся в папке wp-content/themes/ . В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:
Чтобы лучше понять, как редактировать шаблон WordPress , разберем на примере создание темы для сайта.
Создаем новую рубашку для своего сайта
Создавать тему будем пошагово:
1) Заходим в директорию wp-content/themes/ и создаем папку theme_test . В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css . Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver . Внутри комментариев прописываем название темы:
Так мы даем понять WordPress , что это стилевой файл новой темы;
3) Создаем с помощью того же редактора файл index.php . Вставляем в него код:
Сохраняем файл в папке нашей темы. Теперь здесь два файла, предназначенных для создания шаблона WordPress :
На данном этапе новая тема уже видна через админку сайта в списке установленных:
Если активировать тему, то в окне браузера сайт будет выглядеть вот так:
Как видно из примера, структура и стилевое описание шаблона в WordPress разделены. На практике за вывод частей дизайна отвечают функции. При вызове такой функции происходит генерация кода нужного элемента страницы по одноименному шаблону.
Так что перед тем, как сделать шаблон для WordPress , нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php . Затем разнесем по ним код одноименных частей страницы.
Вот таким образом мы создали одностраничный шаблон для блога.
Более легкий способ
Создание тем для WordPress требует хороших знаний и практического опыта веб-программирования. Поэтому был разработан целый ряд программных приложений, позволяющих создавать уникальные темы даже обычным пользователям. Рассмотрим их на примере программы TemplateToaster .
Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS . Также можно загрузить уже готовые темы:
Весь инструментарий приложения сосредоточен в верхней части. В самом окне редактора отображается черно-белый шаблон страницы сайта. Выделяя каждый из элементов дизайна, с помощью верхней панели инструментов устанавливаются значения множества параметров отображения:
После некоторых манипуляций с интерфейсом программы для создания шаблонов WordPress может получиться что-то стоящее. Доступен предварительный просмотр созданной темы в нескольких браузерах:
К сожалению, в бесплатной версии приложения сохранение темы не доступно. Возможен лишь ее импорт через ftp :
Но это не единственный способ, как создать шаблон для WordPress без специальных навыков. Еще это можно сделать с помощью онлайн-генераторов тем. Их интерфейс во многом схож с рассмотренным выше приложением.
Какой вариант создания шаблона выбрать?
Самостоятельное создание тем для человека, не наделенного соответствующим опытом и знаниями, может стать затруднительным. Поэтому лучше воспользоваться специализированными сервисами или приложениями. А полученные из этой статьи знания использовать для редактирования готовых шаблонов WordPress .
Читайте также: