Редизайн сайта на wordpress как сделать

Обновлено: 06.07.2024

достаточно хорошо разбираюсь в создании функционала по вордпресс: всякие плагины, дополнения и т.д.
а вот с дизайном - беда.
Делаю сайты на заказ, и уже потеряла много клиентов из-за неумения делать дизайн под заказчика.
Как правило ничего сверх ординарного они не просят, но тем не менее:
ВОПРОС: знающие подскажите возможно ли сделать дизайн не вникая особо в 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 .

Читайте также:

  
• Рапида для тандыра своими руками
  
• Крейг своими руками
  
• Что можно склеить клеем карандашом
  
• Тиролька на хариуса своими руками
  
• Конфеты с вишней и ликером своими руками