Начало работы с WordPress: изменение внешнего вида вашего сайта с помощью CSS

04.11.2017

Содержание:

Изменение стилей вашего сайта
ЭТО ВАЖНО!
Заключение

Содержание цикла статей «Начало работы с WordPress»:

Итак, теперь у нас есть дочерняя тема, в которую мы готовы внести некоторые изменения, чтобы изменить внешний вид нашего сайта.

Что вам понадобится:

Перед тем, как мы начнем

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

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

Это очень эффективная автоматизированная система, однако, она требует внимательности при изменении файлов, так как если мы сделаем ошибку, то это отразится на нашем сайте, который уже работает в Интернете. Для начала, установим текстовый редактор по умолчанию.

Перейдите в «FileZilla > Настройки > Редактирование файлов» (FileZilla > Preferences > File editing) и найдите программу, которой вы хотите по умолчанию открывать текстовые файлы (как я писал выше, я использую Text Wrangler, поэтому на изображении ниже вы можете видеть именно его).

Вторая вещь, которую нам нужно сделать, перед настройкой нашей темы, это установить форматы вывода записей – post formats (подробнее об этом можно прочитать на официальном сайте WordPress здесь). Я создал несколько новых записей, используя различные форматы записей.

Как видно на изображении ниже, записи разных форматов содержат различное фоновое оформление: первая запись в стандартном формате и содержит ссылку, ниже идет галерея, затем другая стандартная запись, следом цитата, а потом видео и так далее. Тема Twenty Thirteen меняет оформление каждой из этих записей. Мы же, в свою очередь, хотим изменить некоторые части нашего сайта, чтобы придать ему индивидуальность и сделать отличным от стандартной темы.

Изменение стилей вашего сайта

Первое изменение, которое мы осуществим, не требует вмешательства в код сайта – нужно просто изменить изображение верхней части («шапки») сайта.

Тема Twenty Thirteen имеет три предустановленных изображения в оранжевых тонах. Мы добавим к ним изображения в голубой и зеленой цветовой палитре. Для этого, перейдите в меню «Внешний вид>Заголовок» (Appearance>Header) и загрузите нужные изображения. Нет смысла менять настройки заголовка в CSS, когда тема сама предоставляет нам возможность изменить его.

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

Теперь, перейдем к следующему шагу.

Настройка сайта с помощью файлов стилей

Чтобы дать вам некоторое общее представление, я объясню, из каких трех слоев состоит страница веб-сайта. Его основой является «слой содержимого», который является скелетом сайта, выделяя основные его элементы в структурные блоки. Данный слой создается посредством кода на языке HTML (Hypertext Markup Language – Язык разметки гипертекста), которым размечаются различные части вашего сайта.

Вот несколько примеров HTML-кода:

Но HTML сам по себе ничего не стилизует. HTML только структурирует содержимое. Чтобы внести изменения во внешний вид сайта, используется «слой представления». Одним из преимуществ разделения на слои, является то, что содержание отделено от представления.

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

Язык, на котором написан слой представления, называется CSS (Cascading Style Sheets – Каскадные таблицы стилей). Именно на этом языке написаны все файлы стилей темы Twenty Thirteen.

Любую строку в CSS-файле можно привести к следующему общему виду:

К примеру, если нужно создать стиль для заголовка первого уровня, то необходимо написать в файле стилей следующую строку:

Следующая строка указывает конкретное свойство color, которое мы хотим изменить у тега h1:

И наконец, мы зададим значение. Для этого у нас есть три возможных способа:

Чаще всего используется шестнадцатеричный код (hex-код). В этом случае, мы переводим нужный нам цвет в соответствующий ему hex-код формата #FFFFFF.

Вот окончательный параметр задания цвета для заголовка первого уровня:

Усвоив это, мы можем продолжить настраивать нашу тему. Мы собираемся изменить шрифт текста в заголовке и основной части темы. Дл
я этого, откройте FileZilla и перейдите на панель доступа к диску удаленного сервера. Откройте там папку с CSS-файлами вашей дочерней темы и, нажав, правой кнопкой мыши на файле style.css, выберите пункт «Вид>Редактировать» (View>Edit).

Выбранный файл стилей откроется в текстовом редакторе, который вы указали ранее в настройках FileZilla.

ЭТО ВАЖНО!

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

До внесения каких-либо изменений, нажмите сочетание клавиш CMD + A (CTRL+A) в окне Text Wrangler, чтобы выделить весь текст. Затем, нажмите CMD + C (CTRL+C), чтобы скопировать его и создайте новый файл в Text Wrangler комбинацией CMD + N (CTRL+N). Вставьте скопированный текст в этот новый документ комбинацией клавиш CMD + V (CTRL+V), а затем сохраните его на рабочий стол с помощью сочетания CMD + S (CTRL+S). Таким образом, вы обезопасите себя от совершения непоправимых ошибок и всегда, в случае чего, сможете восстановить данные из резервной копии.

При внесении изменений в файл стилей, периодически сохраняйте его в качестве резервной копии. Есть много способов резервирования файлов, однако для новичка описанный выше метод является наиболее оптимальным.

Теперь мы начнем вносить творческие изменения в наш сайт!

Смена шрифтов

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

Поэтому отличным решением данной проблемы является использование сервиса шрифтов Google Web Fonts. Для оформления нашего сайта есть отличная пара шрифтов: Rancho для заголовков и Gudea для основного текста.

Находясь на сайте сервиса Google Fonts, добавьте эти шрифты (Rancho и Gudea, или любую другую пару на ваш выбор) в коллекцию, нажав на кнопку «Использовать» (Use) в правой нижней части страницы. Далее, используйте конструкцию @import, чтобы добавить выбранные шрифты в ваш файл стилей:

@import url(http://fonts.googleapis.com/css?family=Gudea:400,700,400italic|Rancho);

Эта строка скажет нашей теме, где искать файл шрифта. Далее, мы укажем нашему файлу стилей, где какой шрифт отображать, отредактировав пару селекторов. Но как мы узнаем, к каким элементам страницы относится тот или иной селектор?

Использование инструментов веб-разработки.

Практически во всех современных браузерах есть встроенные инструменты для веб-разработчиков. В Google Chrome, например, такой инструмент называется Developer Tools, и получить к нему доступ можно нажав правой кнопкой мыши на интересующем элементе веб-страницы и выбрав в контекстном меню пункт «Проинспектировать элемент» (Inspect Element).

В Firefox инструменты веб-разработчика называются Firebug, а для их использования, необходимо установить одноименный плагин, так как он не входит в комплект поставки браузера. В Safari инструменты веб-разработки также встроены в браузер, но их необходимо включить через опцию «Настройки>Дополнительно>Показывать инструменты веб-разработки в контекстном меню» (Preferences > Advanced > Show develop menu in the menu bar).

Давайте теперь проинспектируем шапку нашего сайта. Нажмите правой кнопкой мыши на тексте заголовка и выберите пункт «Исследовать элемент» (Inspect Element).

После этого, высветится панель инструментов в нижней части окна браузера.

В левой части панели расположена секция HTML-элементов, а выбранный элемент будет подсвечен. На правой стороне расположена секция CSS-кода. Как мы можем увидеть, выбранному в левой секции HTML-элементу <h1> соответствуют различные параметры CSS в правой секции. Если вы прокрутите список чуть ниже на несколько строк, то обнаружите набор селекторов заголовков имеющих общее свойство font-family.

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

Итак, поместите курсор над свойством font-family (а точнее, над словом Bitter) и, так как мы уже сохранили шрифт Rancho в наш файл стилей с помощью селектора @import, замените текущее значение на значение «Rancho», и вы сразу же увидите, как изменилась ваша страница.

Если вам нравится, как выглядит наша страница с этим шрифтом, мы можем скопировать строку из «инспектора» в наш файл стилей.

Выберите код от начала селектора h1 до закрывающей фигурной скобки и скопируйте его в буфер обмена.

Затем вставьте этот код в ваш файл стилей:

Структура файлов стилей каскадная. Это значит, что селекторы, которые в файле стилей по ходу следования кода находятся ниже, являются более приоритетными, и именно они будут использоваться при выводе соответствующих им HTML-элементов в браузере.

В нашем случае, мы импортировали свои стили в начало CSS-файла нашей дочерней темы, поэтому новый код, который мы будем писать, по умолчанию будет располагаться ниже стилей родительской темы. Как следствие, именно наш код будет использован при выводе элементов сайта в браузере. Более того, так как вставленный нами код содержит строки, которые мы не изменяли, то это вызовет дублирование уже имеющегося кода (такие строки уже имеются в родительской теме, поэтому нам нет нужды использовать их снова в дочерней). Поэтому, мы удалим все строки выше и ниже свойства font-family, так как они лишние.

Теперь, сохраните наш CSS-файл и переключитесь на FileZilla, где вы увидите следующее диалоговое окно:

Если вы удовлетворены результатом, то сохраните резервную копию на рабочий стол и нажмите «Да», чтобы перезаписать файл на удаленном сервере. Теперь, обновите свой сайт в браузере и посмотрите на то, как он изменился
.

После того, как мы изменили шрифты для заголовка, давайте изменим их и для основного текста. Вновь открыв сайт, нажмите правой кнопкой мыши на основном тексте и выберите пункт в контекстном меню «Исследовать элемент» (Inspect Element).

Далее, в Инспекторе, найдите селектор font-family на панели CSS и смените значение «Source Sans Pro» на «Gudea». В данном случае, следует отметить, что селектор, который мы меняем, оказывает влияние не только на данный тег (параграф), как можно было бы подумать, а на все теги , находящиеся внутри тега .

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

В коде выше вы можете видеть, что я добавил несколько строк комментариев, которые заключены в открывающие и закрывающие символы комментариев: /* и */, соответственно. Я рекомендую вам взять привычку оставлять комментарии к вашему коду, чтобы потом было проще разобраться в написанном.

Следующим шагом, мы пройдемся с помощью «инспектора» по всем элементам, цвет которых хотим изменить. Вот их список:

Затем, цвет меню навигации и ссылок:

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

Я мог бы дать вам список тех изменений, которые я внес в CSS-файлы своей темы Twenty Thirteen, чтобы вы смогли привести свой к виду, который изображен на картинках в этой статье, но тогда это будет не интересно, верно?

Заключение

Когда мы смотрим на свой сайт в «инспекторе», то он выглядит очень сложным. Но как только вы достаточно освоитесь с CSS, то сразу же понимать, как именно вам необходимо изменить тот или иной HTML-элемент, чтобы ваша страница выглядела так, как вы задумали. На самом деле, это целый мир, который вам предстоит исследовать! Поэтому, потратьте определенное количество времени на то, чтобы поэкспериментировать с темой на этой неделе, и мы посмотрим, сможете ли вы настроить его так, как изображено на рисунке выше.

На следующей неделе, до публикации следующей статьи из данного цикла, я дам вам файл стилей от моей версии темы Twenty Thirteen, изображенного выше.

Перевод статьи “Beginning With WordPress: Editing the Look of Your Site With CSS” был подготовлен дружной командой проекта Сайтостроение от А до Я.