Как найти css wordpress

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

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

Доступ к редактору CSS

Чтобы открыть редактор CSS, перейдите в раздел Внешний вид → Настроить → Дополнительные CSS:

Предварительный просмотр и сохранение

При добавлении кода CSS на сайт внесённые изменения будут отображаться в окне предварительного просмотра сайта справа, однако они вступят в силу только после нажатия кнопки Сохранить изменения.

Редакции CSS

Сохраняются последние 25 версий CSS. Доступ к ним можно получить, нажав кнопку Посмотреть полную историю в нижней части редактора CSS. Если эта опция не отображается, это говорит о том, что история версий CSS для восстановления отсутствует.

Изменение тем

CSS привязаны к конкретной теме, поэтому большинство из ваших CSS переходят в новую версию, если вы меняете темы. Чтобы просмотреть или восстановить предыдущие CSS, воспользуйтесь ссылкой Редакции CSS.

О CSS

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). Это язык разметки, который контролирует внешний вид HTML-элементов на веб-странице. Возможности использования CSS для изменения дизайна веб-сайта практически безграничны, что подтверждает очень популярный проект CSS Zen Garden, который представляет собой презентацию возможностей CSS по изменению внешнего вида отдельно взятого HTML-файла.

Чтобы воспользоваться этой функцией по максимуму, необходимо знать, как работает CSS и HTML, или, по крайней мере, желание учиться. Дополнительные сведения см. в разделе Справка по CSS ниже на этой странице.

Если вы хотите настроить одну из множества тем WordPress.com, но не заинтересованы самостоятельно изучать CSS, мы рекомендуем вам привлечь дизайнера.

Справка по CSS

Если вы только начинаете, вам придется запастись терпением, но CSS — это очень ценный навык, который вам не раз пригодится. В сети есть МНОЖЕСТВО прекрасных ресурсов, которые помогут вам узнать больше о HTML и CSS. Эта полезная серия статей по CSS является хорошей отправной точкой:

• Введение в CSS, или Как заставить страницы выглядеть так, как вам нравится
• Введение в CSS: поиск средств выбора CSS
• Введение в CSS: предварительный просмотр изменений на панели соответствующего правила

Вот несколько советов:

• ИспользуйтеСредство проверки допустимости CSS.
• Воспользуйтесь инструментальными средствами разработки вашего браузера. Для Firefox используйте Инструментальные средства разработки Firefox. Для Google Chrome используйте Инструментальные средства разработки. Для начала посмотрите наши вводные видеоролики по Инструментальным средствам разработки, встроенным в Firefox, Chrome, Safari и Internet Explorer.

Обучающие материалы

• Руководство для новичков CSS Beginner Tutorial от HTML Dog
• Основы CSS от FreeCodeCamp

Дополнительные средства управления CSS

Ширина медиа

Эту опцию следует использовать в том случае, если вы изменили ширину основной области контента с помощью пользовательских CSS. Параметр «Ширина медиа» используется в качестве размера по умолчанию для полноразмерных изображений, когда их вставляют на сайт. Обратите внимание, что он не повлияет на размер некоторых изображений, которые были добавлены до изменения настроек, независимо от того, как они были вставлены, и вам, возможно, придется вставить некоторые из них повторно после изменения настроек.

Начать с чистого листа

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

Вы можете полностью отключить исходные CSS темы, выбрав опцию Не использовать исходные CSS темы. Это позволит использовать любую тему WordPress.com в качестве чистого холста для создания дизайна с помощью CSS.Это дополнительная опция, которую следует использовать только в том случае, если вы хотите начать все сначала и создать CSS для своей темы с нуля.

Если вы хотите использовать существующие правила CSS, что является рекомендуемым и наиболее распространённым вариантом, этот параметр можно не включать.

Если вы ищете исходные CSS темы, чтобы использовать их в качестве ориентира, лучше всего использовать инструменты браузера. Большинство современных браузеров имеют встроенный веб-инспектор. Чтобы просмотреть HTML-код элемента и связанных с ним стилей CSS, щёлкните элемент правой кнопкой мыши и выберите опцию «Просмотреть код элемента». Два популярных инструмента для просмотра CSS — это Инструментальные средства разработки Firefox и Инструментальные средства разработки Chrome. Для начала вы можете ознакомиться со страницей поддержки, на которой представлены краткие скринкасты о том, как найти CSS по своей теме с помощью встроенных в браузеры инструментов веб-разработчика.

Препроцессор

WordPress.com поддерживает средства предварительной обработки CSS LESS и Sass (SCSS Syntax). Это дополнительная опция для пользователей, которые желают воспользоваться такими расширениями CSS, как переменные и примеси. Дополнительные сведения см. на сайтах LESS и Sass.

Часто задаваемые вопросы

Могу ли я удалить ссылки, например «Блог на WordPress.com», тему, шрифт или ссылки на панель инструментов?

Все пользователи WordPress.com должны иметь доступ к панели инструментов (тёмная панель, которая появляется в верхней части сайтов WordPress.com после входа в систему). Клиенты, имеющие сайты с поддержкой плагинов, могут обратиться в службу поддержки, чтобы запросить удаление панели инструментов.

Пользователи WordPress.com могут выбрать различные варианты отображения подвала: от минималистичного логотипа WordPress.com до текстового описания, например «Сайт WordPress.com» или «Сайт работает на платформе WordPress.com». В некоторых планах ссылки в подвале можно скрыть. Дополнительную информацию см. в этом руководстве.

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

Могу ли я использовать правила CSS, такие как @import и @font-face?

Да, но только на сайтах с поддержкой плагинов.

Могу ли я использовать веб-шрифты в CSS?

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

Могу я загружать изображения для того, чтобы использовать их вместе с моими CSS?

Да. Вы можете загрузить изображение в свою библиотеку медиафайлов, затем разместить ссылку на него в виде прямого URL-адреса в своей таблице стилей CSS. Вот простой пример использования фонового изображения в таблице стилей.

div#content{
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

Что произойдёт, если я откажусь от подписки на свой тарифный план WordPress.com?

Все платные услуги на WordPress.com продлеваются ежегодно. Если вы решите отменить свою подписку, то пользовательские CSS будут сохранены, однако перестанут применяться к вашему сайту. Если вы захотите снова их включить, оплатите подписку, и тогда стили применятся автоматически, но при условии, что вы не меняли темы. Если вы меняли темы, прошлые таблицы CSS можно найти по ссылке «Редакции CSS» над редактором на панели CSS.

In Content Management Systems like WordPress, CSS styles are controlled by theme files. That means you don’t have to code styles separately.

On the other hand, in manual website development, you may need to create styles separately.

Find And Edit WordPress CSS Styles

Once you configure WordPress and proceed to install your theme, you don’t have to deal with CSS.

Every WordPress theme contains its style.css file. You can find one in the /wp-content/themes/themename/ folder. In this article, we will use the Visual Composer Starter Theme as an example.

The CSS file in a WordPress theme defines the style, structure, and colors of a WordPress website. However, if you want to change the code snippets in the styles, you will need to alter CSS via the WordPress Dashboard.

Step 1

Login to WordPress dashboard and proceed to click on the Theme Editor in the Appearance menu.

Step 2

The next page shows your theme’s style.css file, along with an editor that lets you edit the CSS code.

Step 3

On the same page, you can see a list of your theme’s code files. If you need to alter a file, you can click on the one you like and edit the code in the Editor.

Step 4

After you make necessary changes in the CSS, click on Update File at the end to save changes. 

Finding CSS Styles

In the WordPress dashboard editor, you can see your site’s style.css file for making changes.

Basic Information About Your WordPress Theme

At the top of the style.css, you can see the basic information for your WordPress theme. This section outlines the theme name, version, author, description, home page URL, license, and copyright text.

Primary Sections In A WordPress Theme’s CSS File

Next, you can see the basic sections (styles) or code structure names of your WordPress theme.

Finding The Code Snippets In The WordPress CSS File

Once you get the full list of styles in the WordPress theme, use CTRL+F to find different sections in the code. The main sections also contain sub-sections of the CSS code.

Finding CSS Styles With Chrome’s Inspect Feature

Alternatively, you can browse to the homepage of your site. Right-click on the section you want to change the CSS code for, and click on the Inspect in the short menu.

After clicking the Inspect option, you will see your browser screen has been divided into two sections.

Finding The Names Of CSS Styles On A Page

At the top of the right section, click on the arrow symbol and point at the different parts on the pages. As you point at the various parts on the page, you can see the respective CSS class or section name in the tooltip.

Edit The Style.css File

Now, get back to the style.css code in the WordPress editor. Search for the respective class or section in the code and make necessary changes. After you make changes, you can save the file and proceed to see the changes on the site.

Purpose Of The Primary Sections In The WordPress Style.css File

The following list contains essential sections in a WordPress style.css file.

• Typography: This section includes configuration on your site’s font styles, size, and colors.
• Header: The top section of your WordPress site is referred to as the Header. Usually, it contains the menu bar and logo.
• Posts: This section controls the way your site’s titles, fonts, colors, and size information are displayed.
• Sidebar: The CSS section that holds information about your site’s sidebar. You can change the code to make necessary changes to your site’s sidebar.
• Footer: This is the bottom section of your WordPress site. It contains the footer links, social icons, legal pages, and copyright text.

We defined primary sections of the WordPress’ style.css file. As a beginner, you can search for the desired sections in the file and make necessary changes.

Additional Places To Use CSS In A WordPress Website

You can also use the WordPress Additional CSS option to make necessary changes to your WordPress website.

Point at the Appearance in the left panel and click on Customize in the short menu.

On the next page, you can see the Additional CSS option.

Paste in the CSS code and save changes. You can see the results in the live customizer.

Precautions When Editing The WordPress Style.css File

• Before you proceed to edit your WordPress’ style.css file, make sure to back it up first.
• While editing the style.css file, take proper notes of the sections you edit, including opening and closing brackets and results in the browser.
• It is recommended to edit your style.css file locally on your computer. For this, you may need to install a local server on your computer and make the necessary changes to your site. Once you finalize your site’s style.css file, you can upload the updated style.css file to your hosting account.
• Use Chrome’s Inspect option to find the exact style sections on the web pages. Once you identify the sections, you can search your site’s style.css file for the sections and make necessary changes.

Conclusion

If you focus on the style.css file, you can get a list of your site’s theme CSS styles.

With that in hand, Chrome’s Inspect feature helps you find the style sections on your site’s pages. Proceed and make necessary changes, and see the results on the spot.

If, for example, you don’t prefer editing the style.css file, you can choose a lightweight theme while building your WordPress site.

To get more out of your theme, bundle it with a free WordPress drag and drop visual editor to customize how your site’s content will show on the pages.
Join the conversation in the comments, and let us know about your thoughts on dealing with the WordPress CSS styles.

Если сайт работает на WordPress, не всегда бывает легко подогнать элементы дизайна под свои нужды: у темы часто не хватает штатных настроек. Как это сделать с помощью CSS, я покажу на примере бесплатной темы своего блога.

Я не профессиональный верстальщик. Моя основная специальность – продвижение сайтов, однако мой опыт в веб-дизайне может оказаться полезным для всех, кто работает с WordPress.

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

Как работают CSS: немного теории

CSS или каскадные таблицы стилей (англ. Cascading Style Sheets) – это набор свойств на специальном языке, с помощью которых описываются типы шрифтов, вид элементов на страницах и правила экранной типографики.

Пример простого стиля

Стиль состоит из селектора и объявления.

	h1, h2, h3 {
	 margin-top: 25 px;
	 margin-bottom: 20 px;
	}

Здесь указано, какую ширину в пикселях имеют верхний и нижний отступ у заголовков h1, h2 и h3 внутри текста веб-страницы. Это вполне очевидно, хоть и по-английски. Как это выглядит на экране, понятно из скриншота.

Файл стилей, который мы будем пытаться изменить, легко отыскать в консоли движка в редакторе темы. Обычно он называется style.css. Идём в левое меню WordPress: Внешний вид → Редактор тем.

Файлов со стилями может быть несколько, но пока нас это не должно смущать – остановимся на главном, со стандартным названием style.css.

Какие бывают атрибуты CSS и за какие элементы дизайна они отвечают

В процессе настройки бывает нужно что-то изменить по мелочи: сдвинуть какой-то элемент, скрыть, поменять цвет или кегль шрифта. На первый взгляд это незначительные исправления, но результат сильно влияет на внешний вид сайта. Все это решается при помощи доработки CSS.

В CSS есть множество наборов различных свойств, и нет смысла перечислять их все. Если интересно, вы можете сами найти их в книгах и в интернете.

Чтобы было понятно, как это работает, рассмотрим несколько простых примеров свойств.

Отступ от верхнего края:

	margin-top: 25 px

Все просто. Здесь задан отступ содержимого элемента от его верхнего края в 25 пикселей.

Размер шрифта:

		font-size: 17 px

Здесь задан кегль экранного шрифта в 17 пикселей.

Ширина элемента:

width: 100%

Свойство задает относительную ширину элемента в 100 %;

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

Что делать, если у темы мало настроек дизайна

Что делать, если вы хотите подкорректировать размеры заголовков, отступы текста и изображений или убрать рамки у виджетов в сайдбаре, а в стандартном меню – только цвета и акценты? Даже если вы не специалист, можно попробовать самому.

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

Чтобы увидеть код страницы и получить доступ к редактированию элементов сайта в режиме реального времени, наберите комбинацию клавиш:

• Ctrl + Shift + I в Google Chrome, Opera;
• Ctrl + U в «Яндекс.Браузере», Microsoft Edge;
• Ctrl + Shift + C или F12 в Mozilla Firefox.

Выбираем мышкой нужный нам элемент сайта. Например, находим заголовок в тексте статьи и кликаем на нем правой кнопкой. Во всплывающем меню нажимаем «Просмотреть код». В консоли браузера должны быть открыты вкладки Elements и Styles.

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

Когда подберете нужное значение параметра, запишите его название в отдельном файле – оно понадобится в дальнейшем. Справа от его кода, во вкладке Styles, серым шрифтом написано имя файла стилей, который мы будем редактировать.

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

Делаем резервную копию стилей

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

• Открыть в консоли WordPress редактор тем.
• Найти актуальную тему в перечне всех доступных на сайте и нажать «Выбрать».
• Использовать нужный файл со стилями.
• Создать на компьютере пустой документ — например, с помощью редактора Word — и скопировать туда из все содержимое стилей из панели управления сайтом.

Ищем стили в редакторе тем и выгружаем содержимое

Следующий этап – поиск селекторов, которые будем редактировать, и перенос содержимого в файл на локальном компьютере. Действуем как при создании резервной копии:

• Заходим в консоль WordPress. Выбираем в левом меню «Редактор тем».
• Выбираем нашу тему из перечня доступных и нажимаем «Выбрать».
• Находим справа нужный нам файл темы со стилями (название этого файла мы записали при поиске в браузере).
• Создаем пустой текстовый документ на локальном компьютере и копируем в него содержимое файла из WordPress.

Ищем и редактируем нужные стили CSS

Редактировать выбранные стили лучше в отдельном файле. На предыдущем шаге мы выгрузили код в отдельный файл. Я использую Microsoft Word. Вы можете взять любой другой текстовый редактор, который считаете удобным. Главное, чтобы у него была функция поиска фрагмента текста.

С помощью команды «Найти» выбираем в тексте селекторы, свойства которых хотим поменять. Сложность в том, что в одном файле стилей может оказаться много селекторов с похожими названиями. Поэтому внимательно сверяем найденный с тем, что был в консоли браузера.

Ищем внутри объявления селектора нужное свойство и меняем параметр.

Обновляем файл стилей, чистим кэш браузера и проверяем результат

Выделяем в нашем файле отредактированный текст щелчком правой кнопки на тексте, открываем меню и выбираем «Копировать».

Выделяем и удаляем все содержимое файла стилей в окне WordPress.

Копируем в пустое окно наш исправленный код при помощи сочетания клавиш Ctrl + V. Нажимаем «Обновить файл».

Когда все готово, заходим в настройки браузера и чистим кэш. Если этого не сделать, на экране отобразится содержимое сайта со старыми стилями.

Теперь можно обновить страницу, где мы смотрели код, и посмотреть изменения. Если что-то не устраивает, начинаем редактировать снова, пока не получится так, как надо.

Меняем ширину контейнера сайта

В современном веб-дизайне используется адаптивная верстка. Чтобы было удобно, на десктопных и мобильных устройствах одна и та же страница имеет разную ширину. Она как бы адаптируется к разрешению экрана.

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

Допустим, вам не нравится, что содержимое сайта растягивается слишком широко или, наоборот, он слишком узкий. Как это изменить в WordPress?

Пример:

Требуется изменить нашу тему так, чтобы ширина отображения на десктопах стала 970 px, на планшетах — 860 px, а контейнер мобильной версии трогать не нужно.

Решение:

Открываем в браузере страницу. Наводим курсор мыши на содержимое в середине, кликаем правой кнопкой и открываем консоль браузера командой «Просмотреть код».

Ищем в коде HTML-тег:

<div class="container"></div>

Все, что нас интересует – атрибуты width правила @media для контейнера. Не буду вдаваться в детали, но именно там задаются нужные настройки ширины. В нашем случае они будут храниться не в styles.css, а в другом файле с именем bootstrap.css. Увидеть это можно в консоли браузера.

Обратите внимание, что если сузить поле консоли браузера, то контейнер сайта растянется и значение @media изменится. Так работает адаптивная верстка.

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

Идем в редактор и копируем содержимое bootstrap.css в отдельный файл на локальный компьютер. Делаем резервную копию всех стилей.

Ищем в документе Word селектор container. Если верстка адаптивная, выпадет несколько результатов.

Нам надо изменить значение ширины. Ищем селектор контейнера с большим и средним диапазоном значений в пикселях. В нашем случае это выглядит так:

	@media (min-width: 992 px){
		 .container {
		 width: 970px;
		 }
		}

И так:

	@media (min-width: 1 200 px) {
		 .container {
		 width: 1170px;
		 }
		}

Если выставить другие значения width в каждой группе, в итоге получится такой код:

	@media (min-width: 992 px) {
		 .container { 
		 width: 860px;
		 }
		}

И такой:

	@media (min-width: 1 200 px) {
		 .container {
		 width: 970px;
		 }
		}

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

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

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

Заключение

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

Эта статья – не полное руководство, а простой, доступный любому способ «на коленке» внести небольшие косметические правки в дизайн блога на WordPress.

Вот общая методика в двух словах:

1. Ставим задачу.
2. Создаем бэкап файлов со стилями.
3. Ищем нужный селектор, атрибут и название файла со стилями в консоли браузера.
4. Вносим изменения в файл со стилями.
5. Тестируем изменения на сайте и при необходимости повторяем цикл заново.

Берите на вооружение советы, делайте гипотезы и не бойтесь их самостоятельно проверять. И помните, что для успеха бизнеса мало иметь хороший сайт. Эту задачу решает комплексное продвижения в интернете, которым занимаются специалисты агентства «Текстерра».