Как записать свои стили css в админку wordpress

Защита

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


## Полное Удаление версии WP
## Также нужно удалить файл readme.html в корне сайта
remove_action('wp_head', 'wp_generator'); // из заголовка
add_filter('the_generator', '__return_empty_string'); // из фидов и URL

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

// Отключим выводи ошибок на странице авторизации
add_filter('login_errors', 'login_obscure_func');
function login_obscure_func(){
	return 'Ошибка: вы ввели неправильный логин или пароль.';
}

Возможность редактировать файлы прямо из админки может стать большой дырой в защите. Давайте её закроем.

## Отключим возможность редактировать файлы в админке для тем, плагинов
define('DISALLOW_FILE_EDIT', true);

По умолчанию включена возможность публикации записей через файл .

Это такая возможность пубилковать записи из вне, например с почты… Чаще всего этот функционал не нужен и в нем могут быть потенциальные дыры. Поэтому его чаще всего желаетльно отключить. Кстати, в ранних версиях WordPress этот функционал был отключен по умолчанию и его нужно было включить чтобы им пользоваться.

## закроем возможность публикации через xmlrpc.php
add_filter('xmlrpc_enabled', '__return_false');

Подключение скриптов для плагинов

Плагины это очень сложна штука. Нужно понимать что нужно на данной странице пользователю в данный момент, а что нет. На своём сайте в плагине для определения вхождений ключей в текст я подключаю стили и js дважды. В первый раз при загрузке страницы (загружается плагин по шорткоду) и во второй раз в момент отображения ответа по ajax. Как же достичь такого же в своём плагине.

Допустим у нас есть задача по шорткоду вывести текст и подключить текст для него. В нашем фале мы пишем следующие:

/**
* В файле плагине
*/
// Регистрируем стиль
function your_preffix_reg_script() {
    wp_register_style( 'my_style', 'https://example.ru/style.css');
}
add_action( 'wp_enqueue_scripts', 'your_preffix_reg_script' );

// Регистрируем шорткод
add_shortcode('shortcode_name', 'shortcode_func');
function shortcode_func(){
    // Print string
    do_action('your_preffix_desc');
    // Include script
    wp_enqueue_script( 'your_preffix_reg_script' );
}
add_action('your_preffix_desc', 'your_preffix_desc_func');
function your_preffix_desc_func(){
    echo 'some string';  
}

Таким образом мы зарегистрировали свой стиль и вызвали его в функции, которая выполняется на странице с шорткодом. Теперь если вызвать шорткод shortcode_name то мы увидим строку ‘some string’ и поключенный наш стиль. То же самое касается и javascript-файлов.

1-й вариант:

Загрузка и подключение скриптов через функцию wp_register_script в файле functions.php

где:

$handle — рабочее название скрипта в системе (уникальный ID)$src — путь к исходному файлу в вашем плагине или теме$deps — массив, содержащий $handle для любых других скриптов, от которых зависит ваш скрипт$ver — номер версии скрипта. По умолчанию WordPress будет использовать свой собственный номер версии (версия движка)$in_footer — вы хотите, чтобы ваш скрипт загружался в футере (подвале сайта)? Тогда используйте значение true. Значение false – это значение по умолчанию, при котором скрипт загружается в секции head.

Теперь более детально о коде.

Для начала мы регистрируем скрипт, чтобы WordPress «узнал» о нем, присваиваем ему системное имя и указываем его расположение.

Затем, если ваш скрипт нуждается в одной из библиотек, которые включены в WordPress, такие как jQuery, вы можете использовать 3-й параметр функции $deps, который «помещает» ваш скрипт после подключения скриптов, указанных в этом параметре:    

Этот параметр является массивом, поэтому вы можете подключать несколько скриптов, например,

 . Если вам нужно, чтобы к названию файла скрипта добавлялась версия, используйте 4-й параметр функции $ver. Для примера воспользуемся сегодняшней датой и посмотрим, как теперь выглядит код:

wp_register_script ('nekiy-script', plugins_url ('/js/nekiy-script.js', __FILE__), array ('jquery'), '29072015');

а на сайте, в разделе head целая строчка подключения JS-скрипта будет выглядеть так:

<script type='text/javascript' src='http://vashsait.com/wp-content/plugins/vashplugin/js/nekiy-script.js?ver=29072015'></script>

Вы можете использовать любую версию нумерации по своему усмотрению.

И, в завершение, рассмотрим 5-й параметр: подключение скрипта в футер сайта — $in_footer для этого в функцию регистрации скрипта добавляем 5-м параметром true.

wp_register_script ('nekiy-script', plugins_url ('/js/nekiy-script.js', __FILE__), array ('jquery'), '29072015', true);

Со всеми параметрами наша функция приобретает следующий вид:

Процесс подключения стилей почти идентичен процессу подключения скриптов. Это делается с помощью функции WordPress под названием wp_register_style, а вот его использование в соответствии с WordPress Codex:

wp_register_style ($handle, $src, $deps, $ver, $media);

Обратите внимание, что единственная разница между wp_register_script и wp_register_style в том, что вместо параметра $in_footer, используется параметр $media. Этот параметр может принимать следующие значения: ‘all’, ‘screen’, ‘handheld’, и ‘print’, или любой другой тип носителя, определенный W3C

Рассмотрим пример подключения файла стилей в файле functions.php:

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

<link rel='stylesheet' id='nekiy-style-css' href='http://vashsait.com/wp-content/plugins/vashplugin/css/nekiy-style.css?ver=29072015' type='text/css' media='all' />

Как это работает

Нужно «сказать» WP, что у вашего скрипта есть перевод, и какой текстовый домен (ID) нужно использовать для этого перевода. Делается это функцией wp_set_script_translations().

Таким образом регистрация вашего скрипта с переводом должна выглядеть так:

wp_register_script( 'my-handle', plugins_url( '/js/my-file.js', __FILE__ ) );
wp_set_script_translations( 'my-handle', 'my-domain' );

Функция добавляет зависимость основного скрипта от и подключает файл.


Обязательно ознакомьтесь с описанием функции wp_set_script_translations().

Теперь в JS коде нужно использовать объект wp-18n следующим образом:

const { __, _x, _n, _nx } = wp.i18n;

__( 'Hello', 'myl10n' );
_x( 'Hi', 'short word', 'myl10n' );
_n( '%s star', '%s stars', 5, 'myl10n' );
_nx( '%s star', '%s stars', 5, 'superstars', 'myl10n' );
sprintf( __( 'See Link: %s', 'myl10n' ), 'http://site.com' );

Используемые функции перевода полностью схожи с одноименными функциями PHP и используются точно так же. См. __(), _n(), _x(), _nx().

Настройка перевода для JS файлов готова!

Остается только создать файлы переводов из которых будут браться переводы строк. Как это делать читайте ниже.

Заметки:
  • Отсутствие функций , и т.д. в JS объясняется тем, что они не нужны в JavaScript, потому что браузер сам умеет экранировать небезопасные символы.

  • Контент JSON файла перевода выводится прямо в HTML страницу в виде js кода, прямо перед скриптом для которого подключается перевод.

  • Если регистрируются несколько скриптов для которых нужны переводы, то переводы нужно подключать для каждого скрипта отдельно (у каждого должен быть свой JSON файл перевода):

    wp_register_script( 'my-plugin-script', plugins_url( 'js/my-script.js', __FILE__ ), , '0.0.1' );
    wp_set_script_translations( 'my-plugin-script', 'my-plugin' );
    
    wp_register_script( 'my-awesome-block', plugins_url( 'js/my-block.js', __FILE__ ), , '0.0.1' );
    wp_set_script_translations( 'my-awesome-block', 'my-plugin' );

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

Подключение CSS стилей в WordPress

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

Файл стилей можно также зарегистрировать используя только функцию .

Подключим стандартный файл стилей и файл , который будет выводится только на странице контактов.

Файл регистрировать не нужно. Он зарегистрирован по умолчанию.

Откроем файл и укажем в нем следующий код.

functions.php

PHP

<?php function travelblog_resources(){ // Используем переменную $post для хранения информации о постах global $post; // Подключаем главный файл стилей style.css wp_enqueue_style(‘style’,get_stylesheet_uri()); // Подключаем файл contact-page.css, из каталога /css только для страницы с id==34 (контакты) if($post->ID == 34){ // Регистрируем файл стилей wp_register_style(‘contact-page-styles’, get_template_directory_uri() .’/css/contact-page.css’); // Добавляем его в очередь на подключение wp_enqueue_style(‘contact-page-styles’); } // Одновременное подключение и регистрация файла slider.css wp_enqueue_style(‘slider’, get_template_directory_uri() .’/css/slider.css’); } // Добавляем хук для обработки подключения стилей и скриптов add_action(‘wp_enqueue_scripts’, ‘travelblog_resources’);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php

functiontravelblog_resources(){

// Используем переменную $post для хранения информации о постах

global$post;

// Подключаем главный файл стилей style.css

wp_enqueue_style(‘style’,get_stylesheet_uri());

// Подключаем файл contact-page.css, из каталога /css только для страницы с id==34 (контакты)

if($post->ID==34){

// Регистрируем файл стилей

wp_register_style(‘contact-page-styles’,get_template_directory_uri().’/css/contact-page.css’);

// Добавляем его в очередь на подключение

wp_enqueue_style(‘contact-page-styles’);

}

// Одновременное подключение и регистрация файла slider.css

wp_enqueue_style(‘slider’,get_template_directory_uri().’/css/slider.css’);

} // Добавляем хук для обработки подключения стилей и скриптов

add_action(‘wp_enqueue_scripts’,’travelblog_resources’);

Подключение для скриптов аналитики

Тут я говорю в контексте подключения Analitycs от Google , Метрика.Яндекс, ROIstat и т.д. Поместите свои скрипты в файл в папку js в папку с темой (допустим metrika.js). Далее чтобы определить что вошёл на сайт человек зарегистрированный, например администратор, нужно использовать функцию is_user_logged_in(). Она возвращает true если пользователь вошел под паролем на сайт. Нам нужно обратное значение нужно использовать отрицание. Ваш код для подключения скрипта примет следующий вид: 

* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Metrika Yandex and others
    if( !is_user_logged_in() ){
        wp_enqueue_script('yandex-metrika', get_template_directory_uri() . '/js/metrika.js', array(), null, false);
    }
}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

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

для чего на сайте используют js скрипты

Статья рассчитана преимущественно на тех пользователей, которые стараются не использовать плагины, включающие в свой функционал отработку — это нецелесообразно в плане серьёзного подхода к делу!

Если в вашем шаблоне уже был подключен функционал примитивным способом: т.е строки подключения файлов помещены перед тегом боди  — самое время это исправить!..

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

Например: кнопка наверх, фиксированный сайдбар или прилепленное меню… либо скрытие внешних ссылок посредством AJAX и многое-многое другое подобное по функционалу требует подключения этих самых файлов.

Но как это сделать правильно, чтобы не притормозить свой ресурс (в плане загрузки по времени)??


В общем-то, не очень сложно.

Для начала нужно припомнить

2-й вариант (ошибочный):

Загрузка и подключение скриптов через файлы шаблона header.php и footer.php

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

Чтобы подключить скрипты и файлы стилей в хедере и футере, нужно лишь добавить строчки кода в файлы header.php (для загрузки в секцию head) и footer.php (для загрузки в подвал сайта):

пример для подключения скриптов

<script type='text/javascript' src='http://vashsait.com/wp-content/plugins/vashplugin/js/nekiy-script.js?ver=29072015'></script>

пример для подключения стилей

<link rel='stylesheet' id='nekiy-style-css' href='http://vashsait.com/wp-content/plugins/vashplugin/css/nekiy-style.css?ver=29072015' type='text/css' media='all' />

Три способа редактировать CSS сайта WordPress

Предложу три варианта редактирования файла style.css.

Редактирование из панели администратора

Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

Справа вы видите список файлов темы, в поле редактора открывается содержимое файлов

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

По умолчанию откроется активная тема, но редактировать можно любую установленную тему без её активации.

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

Редактирование файла style.css по FTP

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

  • Входите в каталог сайта по FTP;
  • Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
  • Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.

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

Дочерняя тема WordPress

Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

На этом принципе основан и третий способ редактирования стилей.

Редактирование файла style.css с помощью плагинов

Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

редактировать CSS сайта WordPress

Теперь не нужно редактировать style.css напрямую, достаточно вписать кусок кода css в поле редактора и изменения появятся на сайте. Причем при обновлении темы они не потеряются.

Ссылка (URL) первой картинки в контенте

Вариант 1:

Код ниже автоматический «вытащит» первую картинку из текущей записи (поста) и вернет готовый код картинки обернутый в ссылку на текущую запись.

В параметре , можно указать номер картинки в записи, которую нужно получить. Например, если указать 2, то код получит вторую картинку, а не первую.

/**
 * Получает первую или указанную в $num картинку из контента текущей записи в цикле
 * и возвращает её в виде `<a><img>` конструкции (картинка = анкор ссылки на текущий пост).
 * удобно использовать в качестве миниатюры записи...
 *
 * @param  integer  Номер картинки в тексте которую нужно получить.
 * @return string   HTML
 */
function get_post_content_image( $num = 1 ){
	global $more;

	$more = 1;

	$content = get_the_content();
	$count = substr_count( $content, '<img');
	$start = 0;

	for( $i=1; $i<=$count && $i<=$num; $i++ ){
		$imgBeg = strpos( $content, '<img', $start );
		$post   = substr( $content, $imgBeg );
		$imgEnd = strpos( $post, '>');

		$postOutput = substr( $post, 0, $imgEnd+1 );
		$postOutput = preg_replace('~(?:width|height)="*"~', '', $postOutput );
		$image  = $postOutput;

		$start = $imgEnd + 1;
	}

	// картинка есть, выводим
	if( isset($image) && stristr($image, '<img') )
		return '<a href="'. get_permalink() .'">'. $image ."</a>";

	$more = 0;
}

Пример использования:

echo get_post_content_image();
// <a href="http://example.com/zapis/"><img class="alignnone size-medium wp-image-126" src="http://example.com/wp-content/uploads/2016/05/asd.jpg" alt=""></a>

Вариант 2:

Смотрите в ответе на вопрос: Как получить URL первой картинки из контента записи?

CSS это


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

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

Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: http://htmlbook.ru/.

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

Правильное подключение Twitter Bootstrap 4 к WordPress (CDN integrity)

При подключении Фреймворка Twitter Bootstrap 4 к движку WordPress можно использовать CDN. Это удобно тем, что кроме высокой скорости загрузки Bootstrap будет проще обновить, не заливая каждый раз файлы физически на свой хостинг. Используйте атрибут целостности «integrity», это позволит не беспокоиться о совместимости версий. Все изменения будут под контролем веб-мастера.

Пример подключения Bootstrap 4:

/**
 * Enqueue scripts and styles.
 */
function new_scripts() {
	// Styles
	wp_enqueue_style( 'bootstrap-style', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1' );

	// Scripts
	wp_enqueue_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery' ), '1.14.7', true );
	wp_enqueue_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ), '4.3.1', true );
}
add_action( 'wp_enqueue_scripts', 'new_scripts' );

Интеграцию целостности можно добавить к уже зарегистрированным выше скриптам при помощи фильтров для CSS стилей и для JS для скриптов:

/**
 * Add integrity/crossorigin for CDN styles.
 * 
 * @param  string $html   The <style> tag for the enqueued style.
 * @param  string $handle The style's registered handle.
 * @return string         The 'async' attribute.
 */
function new_style_loader_tag( $html, $handle ) {
	$scripts_to_load = array(
		array(
			( 'name' )      => 'bootstrap-style',
			( 'integrity' ) => 'sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T',
		),
	);

	$key = array_search( $handle, array_column( $scripts_to_load, 'name' ) );

	if ( false !== $key ) {
		$html = str_replace( '/>', ' integrity=\'' . $scripts_to_load . '\' crossorigin=\'anonymous\' />', $html );
	}

	return $html;
}
add_filter( 'style_loader_tag', 'new_style_loader_tag', 10, 2 );

/**
 * Add integrity/crossorigin for CDN scripts.
 * 
 * @param  string $tag    The <script> tag for the enqueued script.
 * @param  string $handle The script's registered handle.
 * @return string         The 'async' attribute.
 */
function new_script_loader_tag( $tag, $handle ) {
	$scripts_to_load = array(
		array(
			( 'name' )      => 'popper-js',
			( 'integrity' ) => 'sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1',
		),
		array(
			( 'name' )      => 'bootstrap-js',
			( 'integrity' ) => 'sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM',
		),
	);

	$key = array_search( $handle, array_column( $scripts_to_load, 'name' ) );

	if ( false !== $key ) {
		$tag = str_replace( '></script>', ' integrity=\'' . $scripts_to_load . '\' crossorigin=\'anonymous\'></script>', $tag );
	}

	return $tag;
}
add_filter( 'script_loader_tag', 'new_script_loader_tag', 10, 2 );

В примере указаны следующие стили: , , . Подключать скрипты по правилам CMS следует через хук .

Теперь вы можете удобно редактировать как стили, так и JS скрипты, добавленные при помощи CDN.

Август 2018

Подключение JS скриптов в WordPress

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

Регистрацию скрипта обеспечивает следующая функция.

После регистрации скрипта его можно установить на сайт по его имени.

Регистрацию и подключение скриптов можно выполнить сразу в одной функции .

Для примера откроем файл и подключим несколько скриптов.

functions.php

PHP

<?php function travelblog_resources(){ // CSS стили // … // jQuery регистрируется по умолчанию, поэтому его нужно лишь подключить. wp_enqueue_script(‘jquery’); // Регистрируем скрипт slider.js, который должен загружаться перед jquery в конце загрузки сайта. wp_register_script(‘slider’, get_template_directory_uri() . ‘/js/slider.js’, array(‘jquery’), false, true); // Подключаем скрипт slider.js wp_enqueue_script(‘slider’); // Одновременная регистрация и подключение скрипта main.js wp_enqueue_script(‘main’, get_template_directory_uri() . ‘/js/main.js’); } // Добавляем хук для обработки подключения стилей и скриптов add_action(‘wp_enqueue_scripts’, ‘travelblog_resources’);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?php

functiontravelblog_resources(){

// CSS стили

// …

// jQuery регистрируется по умолчанию, поэтому его нужно лишь подключить.

wp_enqueue_script(‘jquery’);

// Регистрируем скрипт slider.js, который должен загружаться перед jquery в конце загрузки сайта.

wp_register_script(‘slider’,get_template_directory_uri().’/js/slider.js’,array(‘jquery’),false,true);

// Подключаем скрипт slider.js

wp_enqueue_script(‘slider’);

// Одновременная регистрация и подключение скрипта main.js

wp_enqueue_script(‘main’,get_template_directory_uri().’/js/main.js’);

} // Добавляем хук для обработки подключения стилей и скриптов

add_action(‘wp_enqueue_scripts’,’travelblog_resources’);

Как понять, что нужно редактировать

Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

Показываю, как им пользоваться:

Например, хотим поменять заголовок сайта.

Наводим на него мышь, через правую кнопку открываем «Код элемента»;

редактировать CSS сайта WordPress начало

Видим код HTML в правом поле и код CSS в левом поле;

  • Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
  • Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).

редактировать CSS сайта WordPress

Для примера, я поменял онлайн размер шрифта названия.

Но это еще не все.

  • Нашли нужный кусок кода css;
  • Копируем его;
  • Переносим в текстовой редактор;
  • Редактируем и переносим кусок кода в style.css дочерней темы или в поле редактора Jetpack.
  • Таким образом, меняем любые стили активной темы.

С этим читают