Если удалось подобрать качественный шаблон для веб-площадки, но что-то в нем не нравится, следует покопаться в его коде. В разделе сайта «Внешний вид» или «Дизайн» в подразделе «Редактор» нужно найти файл style.css. В нем легко изменить цвет фона, рамок, ссылок и текста.
Как изменить что-то в шаблоне сайта?
Можно методом тыка искать код цвета и изменять его. Обычно он состоит из решеточки и набора цифр или букв, как, например, #f0f0f0. Нужно кликнуть левой кнопкой мыши по содержимому файла style.css, затем нажать Ctrl и F, в появившемся окне ввести # и нажать на клавиатуре на кнопку Enter. Так будет найден первый код оттенка какой-либо детали шаблона.
Узнать, какой цвет выводит код, можно в онлайн-фотошопе. Там же следует подобрать нужные оттенки, чтобы заменить ими те, что не нравятся. Куда кликать, как выбрать и где скопировать код выбранного цвета, видно на этом скриншоте.
Все шаблоны разные, поэтому не получится предоставить в данной статье полноценную инструкцию по изменению цвета в теме сайта. Но перечисленные ниже шаги помогут внести несколько простеньких изменений:
- 1. Необходимо сделать резервную копию шаблона сайта. Делается это на хостинге в директории wp-content/themes. Достаточно заархивировать там папку с файлами шаблона, чтобы потом можно было ее быстро распаковать и установить шаблон по новой.
- 2. Надо открыть страницу сайта, кликнуть правой кнопкой мыши по той детали, которую хочется изменить и в выпадающей вкладке выбрать «Просмотреть код». Справа или снизу появится код страницы и ее стили. Там надо скопировать код цвета детали. Здесь можно просмотреть скриншот-пример.
Затем в административной панели сайта следует кликнуть левой кнопкой мыши по содержимому файла style.css, нажать Ctrl и F, в появившееся окно внедрить скопированный код и нажать на клавиатуре на кнопку Enter. Так будет найден нужный кусок кода. Его следует заменить на выбранный в онлайн-фотошопе.
- 3. После изменения любой строчки кода нужно перейти на страницу сайта и посмотреть на изменения. Если они оказались некорректными, следует скопировать код, который был ранее сохранен в редакторе Notepad, и внедрить его в файл style.css на сайте. После этого вернется прежняя цветовая гамма.
- 4. Если из-за изменений, осуществленных в файлах сайта, административная панель станет недоступной, надо зайти на хостинг в свой кабинет и удалить из директории сайта шаблон. А затем нужно по новой установить тему.
Как стилизовать страницы веб-ресурса?
- 1. Любителям создавать красивые кнопочки и картинки, рекомендуется использовать этот онлайн-фотошоп. Он на русском языке, поэтому можно легко разобраться в его функциональности. Следует также воспользоваться этим генератором кнопок и логотипов.
- 2. Картинки, что устанавливаются в шапке сайта и в сайдбаре, должны быть отличного качества. В ином случае не будет постоянных читателей статей. Ведь некачественные сайты отпугивают интернет-пользователей.
- 3. Обязательно нужно создать для веб-ресурса фавикон. Рекомендуется рисовать его на сайте Favicon. Там надо выбрать нужный цвет или несколько оттенков и создать рисунок, заполняя выбранным цветом клеточки. После этого нужно нажать на кнопку Download Favicon.
Рекомендуется придерживаться строгого стиля при оформлении интернет-ресурса. В дизайне сайта omirs.com использовались всего три оттенка. Они не раздражают глаза и не действуют негативно на нервную систему. Поэтому сайт нравится практически всем.
Чтобы внедрить на сайте изображение, следует использовать следующий код:
<img src="Ссылка на картинку" alt="Название изображения" title="Альтернативное наименование картинки">
Если картинка (например, кнопка) должна быть кликабельной, стоит применить следующий код:
<a href="Ссылка на страницу сайта" target="_blank"><img src="Ссылка на картинку" alt="Название изображения" title="Альтернативное наименование картинки"></a>
Готовый фавикон следует закачать на веб-ресурс в раздел «Медиафайлы» либо в специальный раздел шаблона, если такой есть, или в коневую папку сайта. В последнем случае фавикон появится в левом углу окна браузера, в котором открыт сайт. На изображении, размещенном ниже, можно увидеть, как выглядит фавикон данного сайта.
Создавать лучше уникальную картинку, чтобы сайт выделялся среди других. Фавикон нужен для того, чтобы люди, добавившие веб-ресурс в закладки, быстро находили его по этой картинке. Если был загружен фавикон в раздел «Медиафайлы», нужно скопировать адрес его размещения и внедрить в специальный код:
<link rel="icon" href="Ссылка на фавикон" type="image/x-icon"><link rel="shortcut icon" href="Ссылка на фавикон" type="image/x-icon">
В код требуется дважды внедрить веб-адрес фавикона. После этого следует внедрить готовый код перед тегом
в файл header.php. Найти последний можно в настройках сайта в разделе «Внешний вид» в подразделе «Редактор тем».
Все манипуляции с шаблонами, что перечислены на этой странице, необходимы, если используется бесплатная тема из тех, что доступны в сети. Гораздо проще настраивать шаблоны, созданные профессионалами. Как, к примеру, следующие:
Эти шаблоны легко изменяются через административную панель сайта. При этом нет надобности изменять код в файлах темы. Путем перетаскивания ползунков и отметок галочками чекбоксов задаются необходимые параметры, как, например: оттенки, расположение блоков на странице, их количество, форма и внешний вид каждого.
Copyright © omirs.com
Спасибо за подсказки, очень помогли мне. Я начинающий, по Вашим урокам сайт сделал, вот шаблон под себя подстроил, цвет выбрал, кнопки изменил. Теперь безмерно рад, что могу это все.