Css wordpress: Как редактировать CSS в WordPress

Simple CSS — Плагин для WordPress

Need to add some custom CSS to your site? Simple CSS gives you an awesome admin editor and a live preview editor in the Customizer so you can easily add your CSS.

Want your CSS to only apply on a specific page or post? Simple CSS adds a metabox which allows you to do just that.

Check out GeneratePress, our awesome WordPress theme! (https://wordpress.org/themes/generatepress)

Features include:

• Full featured admin CSS editor
• Dark and light editor themes
• CSS editor in the Customizer so you can live preview your changes
• Metabox for page/post specific CSS

• The dark theme of the CSS editor.
• The light theme of the CSS editor.
• The CSS editor in the Customizer.
• The CSS editor metabox.

There’s two ways to install Simple CSS.

1. Go to «Plugins > Add New» in your Dashboard and search for: Simple CSS
2. Download the .zip from WordPress.org, and upload the folder to the /wp-content/plugins/ directory via FTP.

In most cases, #1 will work fine and is way easier.

How do I add CSS using your plugin?

• Make sure Simple CSS is activated.
• Navigate to «Appearance > Simple CSS» and add your CSS to the editor.

How do I add CSS using the Customizer?

• Make sure Simple CSS is activated.
• Navigation to «Appearance > Customize» and open the «Simple CSS» section.

How do I change the editor color?

• In «Appearance > Simple CSS», change the «Dark» option below the «Save CSS» button to «Light».

How do I add CSS that applies only to one page?

• Navigate to your page or post in the Dashboard and look for the «Simple CSS» metabox.

«Simple CSS» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

1.1.1

• Fix PHP notice when Simple CSS hasn’t been saved yet

1.1

• Fix meta box saving issue

1.0

• Show metabox only on public post types
• Add live preview to Customizer
• Code cleanup
• Better sanitizing/validation

0.4

• Use browser search instead of CodeMirror dialog search
• Don’t show GeneratePress metabox if it’s already activated
• Make CSS box full height

0.3

• Add CSS metabox to add CSS on specific pages and posts
• Adjust styling of dark theme
• Add tips to Simple CSS screen

0.2

• Remove extra whitespace from CSS output
• Remove spellcheck from Customizer input
• Allow > characters in the CSS
• Add find (ctrl + f) functionality

0.1

Как добавить собственный CSS код на свой сайт WordPress

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

Первым делом вам необходимо установить и активировать плагин Simple Custom CSS. После активации просто переходим в Внешний вид » Custom CSS и вписать либо вставить свой CSS код.

Не забудьте нажать кнопку ‘Update Custom CSS’ для сохранения данных.

Теперь можно перейти на сайт и увидеть результаты применения кода.

Использовать плагин Custom CSS или же добавлять CSS в тему?

Добавление собственных сниппетов CSS в свою основную тему не рекомендуется. Ваши изменения CSS будут утеряны, если вы случайно обновите тему без бекапа собственных доработок.

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

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

Мы надеемся, что эта статья помогла вам добавить произвольный CSS на свой WordPress сайт. Также вам может пригодиться наша статья о том, как создать плагин для сайта WordPress для хранения своих сниппетов кода.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 5.0/5 (1 vote cast)

CSS и JavaScript, блокирующие загрузку страницы в WordPress

В этом посту будет подразумеваться, что вы знакомы с инструментом Google по оптимизации скорости загрузки страниц сайта — PageSpeed Insights. Слушайте, да прямо сейчас вбейте туда свой сайт нажмите кнопку «Analize».

Окей, а теперь — о чём этот пост?

Вполне возможно, что в результатах проверки вашего сайта есть пункт «Eliminate render-blocking JavaScript and CSS in above-the-fold content».

Я заметил, что этот пункт один из самых трудноразрешимых (трудоёмких) и практически на всех сайтах, даже на очень быстрых, он присутствует.

Как его исправить

в теории:

1. Объединяем все JavaScript файлы и размещаем то, что получилось перед закрывающим тегом </body> сайта.
2. Объединяем все CSS, суём прямо перед JavaScript, которые мы уже переместили, затем выбираем из них те стили, которые необходимы для корректного отображения страницы, а в особенности её верхней части (первого экрана) и помещаем их в тег <style> в <head> сайта.

Как же обстоит дело на практике, и в данном конкретном случае — для сайтов на WordPress?

1. Воспользуемся зависимостью других скриптов от jQuery

В корректно состряпанной теме WordPress все CSS и JS файлы подключаются через wp_head() и wp_footer() — то есть в

<head> и в конце </body> соответственно.

Также у файлов есть зависимости, то есть например плагин fancybox.js должен подключаться после jquery.js, а это значит, что если библиотека jQuery находится в wp_footer(), то FancyBox ну никак не может попасть в wp_head().

Перемещаем jQuery в футер сайта

Делается это очень просто — при помощи функций wp_deregister_script(), wp_register_script(), wp_enqueue_script() и хука wp_enqueue_scripts (иногда используют хук init в связке с is_admin()). Всё, что требуется от вас, это вставить код следующего содержания в файл functions.php вашего сайта.

add_action('wp_enqueue_scripts', 'true_peremeshhaem_jquery_v_futer');  
 
function true_peremeshhaem_jquery_v_futer() {  
 	// снимаем стандартную регистрацию jQuery
        wp_deregister_script('jquery');  
 
        // регистрируем для подключения в футере, описание параметров - в документации функции (ссылка чуть выше)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  
 
	// подключаем
        wp_enqueue_script('jquery');  
 
}

Хочу обратить ваше внимание на то, что это автоматизированное решение, и хотя оно работает практически в 100% случаев, бывает такое, что некоторые скрипты не хотят переноситься в футер сайта. Тогда уже потребуется более внимательный к каждому вашему файлу JavaScript.

На этом наша работа с JS заканчивается, конечно прирост в скорости даст ещё и объединение скриптов (то есть снимаете их все с регистрации и потом просто подключаете свою объединенную версию) — но Google сейчас это уже не требует.

2. Объединение CSS в WordPress

Если объединение всех JavaScript в один файл — не всегда хорошая идея, то CSS-ки я бы рекомендовал объединять по возможности всегда.

Помните скриншот в самом начале статьи (10 blocking CSS resources)? Откуда берется такое количество файлов стилей, ведь разработчик темы наверное понимал, что делает?

Ответ — из плагинов.

Например плагин «Contact Form 7» подключает свою собственную таблицу стилей, и хотя сама по себе она невелика, то лучше всё же избежать лишних HTTP-запросов.

Давайте пошагово разберем как.

1. Копируете содержимое таблицы стилей плагина и вставляете его в конец основного файла стилей — style.css.
2. Проверяете, проставлены ли в данных стилях относительные ссылки на изображения, например url('images/load.gif'). Если да, то либо заменяете их на абсолютные, либо переносите изображения из плагина в папку с темой.
3. Заходите в настройки плагина и смотрите, есть ли возможность где-нибудь снять галочку и не подключать CSS плагина. В «Contact Form 7» такой возможности нет, а значит мы переходим к следующему пункту.
4. Отрубаем файлы через
   functions.php. Для стилей «Contact Form 7» код будет следующий:

   add_action( 'wp_print_styles', 'true_otkljuchaem_stili_contact_form', 100 ); // по идее вы можете использовать и хук wp_enqueue_scripts, хотя конкретно его я не тестировал
    
   function true_otkljuchaem_stili_contact_form() {
   	wp_deregister_style( 'contact-form-7' ); // в параметрах - ID подключаемого файла
   }

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

Ок, с «Contact Form 7» разобрались, а как узнать ID файлов CSS других плагинов?

Да легко, открываем исходный код страницы и видим там подобную картину:

Также есть плагин, который позволит выполнить объединение CSS и JavaScript автоматически — JS & CSS Script Optimizer.

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

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Как выполняется оптимизация CSS WordPress с помощью плагина Clearfy

Что такое CSS

Язык стилевой разметки CSS или «Cascading Style Sheets» переводится как «каскадные таблицы стилей». Подключив его к какой-либо странице, появится возможность визуализировать элементы, которые создаются Html-тегами. CSS является преемником HTML и считается более сложным языком, нежели предшественник. Его в отличие от HTML недостаточно просто знать. Кроме основной теории в нем существует множество особенностей, узнать которые можно только с опытом.

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

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

 

В чем суть оптимизации

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

Мы провели собственный эксперимент «до» и «после» оптимизации и делимся результатами. На сайте, где не проводилась оптимизация CSS WordPress мы нашли три CSS файла (генерируются конкретной темой, от нее зависит их количество) общим весом 517 Кб. После оптимизации основные три CSS файла отключились, взамен появилась активная копия в виде одного CSS файла размером 412 Кб. Исчезли лишние пробелы и отступы. Такое «снижение» вы вряд ли почувствуете если речь идет о размере обычного файла на жестком диске компьютера. Но если учесть объем данных, получаемый с сервера от запроса одного пользователя, то это хороший результат, который мы достигли благодаря плагину Clearfy. Далее подробнее.

 

Оптимизация CSS WordPress с помощью плагина

Плагин оптимизации Clearfy можно скачать с сайта ru.clearfy.pro или из репозитория WordPress. После активации вам нужно будет попасть в настройки приложения.

Сделать это можно так:

«Настройки» => «Clearfy меню» => «Производительность» => «Minify (HTML/JS/CSS)»

Найдите строку с функцией «Оптимизировать CSS код» и нажмите кнопку ВКЛ. Автоматически вам откроются для выбора отдельные способы оптимизации кода. Вы можете их увидеть на изображении ниже.

Вы можете выбрать одну из предложенных функций, например «Объединять CSS файлы» (рекомендуется в первую очередь) или все сразу. Для удобства каждую функцию сопровождают подсказки в сером значке со знаком вопроса. После активации, нажатием ВКЛ и кнопки «Сохранить настройки» будет завершена оптимизация CSS WordPress.

 

Заключение

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

Классы и индентификаторы CSS генерируемые WordPress

28.08.2013 Ромчик

0

Доброго времени суток. В данной статье я хочу поговорить о CSS классах и индентификаторах генерируемых WordPress. Зачем? — спросите Вы. Ведь CSS классы и индентификаторы зависят от темы WordPress. И Вы будете правы. Но есть такие классы CSS и индентификаторы, которые генерирует сама CMS WordPress. И, если Вы хотите создать тему WordPress для публичного релиза, то Вы должны использовать их. Кстати, в моем блоге Вы можете почитать уроки по созданию темы для WordPress

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

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

.rtl {}

.home {}

.blog {}

.archive {}

.date {}

.search {}

.paged {}

.attachment {}

.error404 {}

.single postid-(id) {}

.attachmentid-(id) {}

.attachment-(mime-type) {}

.author {}

.author-(user_nicename) {}

.category {}

.category-(slug) {}

.tag {}

.tag-(slug) {}

.page-parent {}

.page-child parent-pageid-(id) {}

.page-template page-template-(template file name) {}

.search-results {}

.search-no-results {}

.logged-in {}

.paged-(page number) {}

.single-paged-(page number) {}

.page-paged-(page number) {}

.category-paged-(page number) {}

.tag-paged-(page number) {}

.date-paged-(page number) {}

.author-paged-(page number) {}

.search-paged-(page number) {}

Например, если Вы хотите стилизировать дату, то можете использовать класс .date. WordPress только добавляет этот  класс, а Вы уже делаете для него свои стили.

Также WordPress добавляет свои классы для постов и вот список основных:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

Также с помощью генерируемых классов WordPress мы можем стилизировать меню. Вот некоторые классы:

</pre>
#header .main-menu{} // container class #header .main-menu ul {} // container class first unordered list #header .main-menu ul ul {} //unordered list within an unordered list #header .main-menu li {} // each navigation item #header .main-menu li a {} // each navigation item anchor #header .main-menu li ul {} // unordered list if there is drop down items #header .main-menu li li {} // each drop down navigation item #header .main-menu li li a {} // each drap down navigation item anchor .current_page_item{} // Class for Current Page .current-cat{} // Class for Current Category .current-menu-item{} // Class for any other current Menu Item .menu-item-type-taxonomy{} // Class for a Category .menu-item-type-post_type{} // Class for Pages .menu-item-type-custom{} // Class for any custom item that you added .menu-item-home{} // Class for the Home Link
<pre>

Вот некоторые классы CSS, которые генерирует WordPress для WISIWYG редактора:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Виджеты – это еще один важный аспект WordPress. И стилизация виджетов является одной из приоритетных задач. Для того, чтобы как-то стандартизировать отображение виджетов WordPress генерирует следующие CSS классы:

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

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

/*Comment Output*/

.commentlist .reply {}

.commentlist .reply a {}

.commentlist .alt {}

.commentlist .odd {}

.commentlist .even {}

.commentlist .thread-alt {}

.commentlist .thread-odd {}

.commentlist .thread-even {}

.commentlist li ul.children .alt {}

.commentlist li ul.children .odd {}

.commentlist li ul.children .even {}

.commentlist .vcard {}

.commentlist .vcard cite.fn {}

.commentlist .vcard span.says {}

.commentlist .vcard img.photo {}

.commentlist .vcard img.avatar {}

.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}

.commentlist .comment-meta a {}

.commentlist .commentmetadata {}

.commentlist .commentmetadata a {}

.commentlist .parent {}

.commentlist .comment {}

.commentlist .children {}

.commentlist .pingback {}

.commentlist .bypostauthor {}

.commentlist .comment-author {}

.commentlist .comment-author-admin {}

.commentlist {}

.commentlist li {}

.commentlist li p {}

.commentlist li ul {}

.commentlist li ul.children li {}

.commentlist li ul.children li.alt {}

.commentlist li ul.children li.byuser {}

.commentlist li ul.children li.comment {}

.commentlist li ul.children li.depth-{id} {}

.commentlist li ul.children li.bypostauthor {}

.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}

#cancel-comment-reply a {}

/*Comment Form */

#respond { }

#reply-title { }

#cancel-comment-reply-link { }

#commentform { }

#author { }

#email { }

#url { }

#comment

#submit

.comment-notes { }

.required { }

.comment-form-author { }

.comment-form-email { }

.comment-form-url { }

.comment-form-comment { }

.form-allowed-tags { }

.form-submit

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

Данная статья подготовлена по материалам сайта http://www.wpbeginner.com/

Понравилась статья? Поделись с друзьями.

Как определить стиль элемента на сайте и применить для него свои настройки?

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

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

Что делать?

Для примера буду использовать элементы на своем сайте InwebPress.ru.

1 шаг — Определение стиля конкретного элемента

На моем сайте мне не нравится размер шрифта названий записей. Он большой и занимает много места. Размер нужно уменьшить.

Определяем его стиль. Для этого правой кнопкой мыши я кликаю по названию записи и в контекстном меню выбираю пункт «Просмотреть код». Это в браузере Google Chrome. А в браузере Mozilla Firefox это «Исследовать элемент».

В браузере внизу, в специальном фрейме откроются Инструменты разработчика — DevTools. Само окно будет разделено на две части: слева — код HTML, справа — код CSS.

Наш заголовок в коде HTML слева выделен цветом, а справа представлены все стили, которые определяют характеристики внешнего вида элемента. Здесь задан цвет заголовка, его шрифт, размер, оформление ссылки по умолчанию, при наведении, отступы, насыщенность шрифта, вид курсора и т.д.

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

DevTools браузера не только видит все стили, но и показывает в каком конкретном файле этот стиль прописан.

Итак, наша задача найти размер шрифта.

Вот он:

Как видим, Название записи имеет размер 22 px.

Если вы сомневаетесь в том, тот ли это стиль, то вы можете прямо в правой части окна изменить параметр стиль. После изменения нажмите ENTER (или кликните в др. месте) и посмотрите на сайт.

Нашли свой стиль? Ок! Теперь нам нужно его применить для элемента, в моем случае это Название записи.

2 шаг — Применение нашего стиля

Чтобы это сделать существует несколько вариантов.

1) Правка файла стилей — style.css

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

2) Правка файла стилей в дочерней теме

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

3) Вставить код стиля CSS в админке

Это вариант мне очень нравится. Вам не надо открывать редактор файлов в админке, или пользоваться FTP, а потом еще искать нужный стиль среди сотни, а то и тысячи строк кода.

Итак, нужный нам код выглядит так:

.content-box h3 a {
    font-size: 22px;
}

А нужно вставить так:

.content-box h3 a {
    font-size: 18px;
}

Где в админке нужно вставить этот код?

а) Настройки темы

Большинство современных шаблонов имеют в настройках раздел — Custom CSS
В этом разделе мы и вставляем код стиля. если такого раздела нет, то читаем статью дальше.

б) Через плагин

Я рекомендую использовать плагин WP Add Custom CSS. Он без настроек и всего с одним полем для вставки стилей CSS.
В это поле можно вставлять все наши стили для шаблона и для плагинов. Очень удобно и всегда под рукой.

После того, как вы сохранили свои настройки — перейдите на сайт и посмотрите как выглядят ваши элементы.

Мой результат:

Надеюсь вы осилили написанное и сможете теперь с легкостью применять на сайте свои стили CSS.

Пользовательский CSS в конструкторе сайтов

В этой статье я расскажу, как добавить пользовательский CSS в WordPress с помощью Elementor. С помощью конструктора сайта Elementor вы можете добавить пользовательский CSS в секцию, колонку, виджет. Если вы желаете получить еще больший контроль над стилем CSS страницы, Вы можете использовать пользовательский идентификатор CSS, чтобы добавить CSS к каждому элементу на странице.

Добавление пользовательских CSS к элементам

1. Нажмите кнопку свойств на необходимом элементе (виджет, колонка, секция), чтобы отобразить свойства в панели свойств слева.

2. Перейдите на вкладку Расширенные, далее в группу свойств Пользовательские CSS

3. Добавьте ваш CSS код в поле редактора CSS

4. Для примера добавим следующий код, который добавить красный фон для выбранного элемента.

selector {background-color:red;}

элемент мгновенно применит указанные стили.

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

Используйте «selector» для указания родительского элемента. Примеры:
selector {color: red;} // Для основного элемента
selector .child-element {margin: 10px;} // Для дочернего элемента
.my-class {text-align: center;} // Или используйте любой селектор

Как задать необходимы класс элементу?

1. Нажмите кнопку свойств на необходимом элементе (виджет, колонка, секция), чтобы отобразить свойства в панели свойств слева.

2. Перейдите на вкладку Расширенные, далее в поле CSS ID или CSS класс введите необходимые данные, например класс для секции необходимо ввести в поле CSS класс в виде my-class т.е просто без точки.

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

Редактирование стилей на странице

1. В панеле свойств перейдите к настройкам документа нажав на кнопку Настройки (рис справа)

2. Далее необходимо перейти на вкладку Стили

3. В группе свойств Пользовательские CSS вы можете написать свой код css который вам необходим.

5 простых кодов CSS, которые помогут вам настроить сайт на WordPress

CSS — это сложно!

Похоже на то, что можно сказать? Вы не будете одиноки. CSS (или каскадная таблица стилей) — это язык программирования, с которым непросто поспорить.

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

Лучший способ изучить CSS — понять, что это такое и как работает.Затем вы можете изучить некоторые базовые фрагменты кода, которые помогут вам немного лучше понять это первоначальное понимание, и вы сразу же перестанете проектировать!

Наш пост как раз этим и занимается.

Что такое CSS?

Конечно, CSS означает каскадную таблицу стилей, но все вам это скажут. Однако это ведь не помогает?

Есть более простой способ понять, что это такое.

Думайте о HTML как о каркасе дома, а о CSS как о рисовании внешнего вида.Когда вы красите отделку дома или окрашиваете переднюю террасу, меняет ли это каркас самого дома?

Нет, это не так. Вместо этого он просто меняет внешний вид вещей. Фундамент и каркас дома остаются прежними.

Вот что такое CSS.

Изменяет внешний вид вашего сайта, но не разрушает его основу или ядро.

На каждом доме краска. Каждая тема WordPress использует CSS.

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

На самом деле, вы можете быть удивлены, насколько это просто.

Простой CSS Edit One: редактирование шрифта и быстрый урок по написанию кода

При использовании такой темы, как Genesis Framework, изменение чего-то столь же простого в шрифте, используемом на вашем сайте, требует некоторого CSS. Но не волнуйтесь. Это действительно не так уж и сложно.

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

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

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

Есть 7 основных областей, в которых вы можете редактировать свой шрифт:

• Все 6 типов шрифтов для заголовков
• Шрифт тела

Разметка тегов для них проста. Например, если вы хотите отредактировать шрифт Heading 1 , отображаемый на вашем сайте, вы должны использовать тег h2 .Если вы хотите изменить шрифт заголовка 2 , тег будет иметь вид h3 и так далее.

Вот пример того, как написать код CSS для изменения шрифта заголовка 1:

 h2 {font-family: 'Georgia'; } 

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

Первая часть написана (h2) — это тема , которую вы хотите изменить. Этот символ ({) открывает вашу строку кода, а этот (}) закрывает ее.

Хорошо, хорошо.

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

h2 {открывает дверь своего туалета

В поисках того, во что можно превратиться: «Он находит то, что хочет»;

А потом закрывает дверь}

Вернемся к теме; вот еще один пример того, как вы можете изменить свой шрифт.

 body {
  семейство шрифтов: 'Arial';
  } 

Изменив элемент с h2 на body, я сообщил таблице стилей, что хочу изменить шрифт основного текста, который отображается в сообщениях и страницах, на шрифт Arial.

Это довольно просто, правда?

Если в вашей теме включен Google Font, вы даже можете использовать шрифты оттуда на своем сайте.

Простое редактирование CSS 2: изменение цвета шрифта

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

Скажем, я хочу изменить цвет шрифта Heading 2 на другой.Я могу сделать это, следуя той же схеме, что и раньше (помните историю?), Но с небольшими изменениями основных строк кода. Как это:

 h3 {цвет: # 4f4f4f; } 

Обратите внимание, что тема определена как h3, и у нас все еще есть открывающий и закрывающий теги ( {} ), однако способ написания кода немного отличается от того, что было выше, когда мы писали код для изменения шрифта. .

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

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

 body {font-family: 'Roboto'; цвет: # 4f4f4f; } 

Видите, как я это сделал?

У меня есть две строчки кода внутри одной темы. Если вам нужно внести несколько изменений в одну тему, напишите такой код, чтобы сэкономить время.Просто убедитесь, что вы закрыли эти отдельные строки кода точкой с запятой (;), прежде чем переходить к следующей строке.

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

Простое редактирование CSS 3: цвет фона и инструмент браузера, о котором вы даже не подозревали

Изменение цвета некоторых элементов на вашем сайте — еще один очень простой трюк с CSS.Все, что вам нужно знать, это элемент или предмет , который вы хотите изменить.

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

Чтобы найти это, просто дважды щелкните мышью, чтобы открыть параметры, как показано ниже. Выберите «Проверить элемент», и теперь вы можете выполнять поиск по редактируемым элементам на своем веб-сайте.

Видите это изображение?

У меня есть один пункт меню, выделенный другим цветом, чем остальная часть моего меню.Для этого я использовал свой инструмент Inspect Element Tool, чтобы определить правильное имя для редактирования.

Теперь, когда я прокручиваю пункты меню, фактическое присвоенное ему кодовое имя будет отображаться в моих основных моментах. Тот, который я изменил, имел имя: # menu-item-473 ( Вы можете видеть, что это его имя в желтом поле. Имя выделено синим)

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

 # элемент-меню-473 {цвет фона: # D65050; } 

Опять же, я начинаю с того, что сообщаю таблице стилей тему, которую я хочу изменить (# menu-item-473) , а затем я говорю ей, что изменить (background-color) и на что это изменить. (# D65050) .

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

Еще одна замечательная особенность инструмента Google Inspect Element Tool заключается в том, что вы можете редактировать элементы в реальном времени, чтобы все было правильно, а затем вы можете скопировать и вставить всю свою работу по редактированию оттуда в свою таблицу стилей CSS. Поговорим об экономии времени!

Простая четверка редактирования CSS: Float

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

Для этого вы можете использовать фрагмент кода с плавающей запятой. Как и в приведенных выше шагах, вы должны использовать инструмент Inspect Element Tool, чтобы найти имя объекта, который вы хотите изменить. Изображенный здесь такой же, как упомянутый выше. (# menu-item-473)

Чтобы этот элемент перемещался, но при этом хорошо смотрелся на экране мобильного телефона, я написал следующий код:

 # элемент-меню-473 {цвет фона: # D65050; float: right; } 

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

Например, если у вас есть виджет, который вы хотите изменить, вы можете использовать float: right; или поплавок: левый; Фрагмент кода для изменения места отображения виджета.

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

Простое редактирование CSS, пять: выравнивание текста

Выравнивание текста — это то, что вы, конечно же, можете сделать в посте.Но как насчет заголовков ваших виджетов или чего-то подобного?

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

Я использую Genesis Framework для своих веб-сайтов, и это код, который потребовался для выравнивания заголовков моих виджетов:

. Нижний колонтитул-виджеты. Виджет-заголовок {выравнивание текста: центр; } 

Название элемента или темы в вашей теме может немного отличаться от этого, но вы поняли идею.

Этот небольшой код будет держать мой текст в заголовках виджетов нижнего колонтитула по центру, и, поскольку я объявляю .footer-widgets вместе с .widget-title , только заголовки нижнего колонтитула с центром.

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

Как изменить стили CSS в WordPress

В системах управления контентом, таких как WordPress, стили CSS управляются файлами тем. Это означает, что вам не нужно кодировать стили отдельно.

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

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

После настройки WordPress и перехода к установке темы вам не придется иметь дело с CSS.

Каждая тема WordPress содержит свой файл style.css. Вы можете найти его в папке / wp-content / themes / themename /. В этой статье мы будем использовать начальную тему Visual Composer в качестве примера.

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

Шаг 1

Войдите в панель управления WordPress и нажмите Theme Editor в меню Appearance .

Шаг 2

На следующей странице показан файл style.css вашей темы вместе с редактором, который позволяет редактировать код CSS.

Шаг 3

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

Шаг 4

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

Поиск стилей CSS

В редакторе панели управления WordPress вы можете увидеть файл style.css своего сайта, чтобы внести изменения.

Основная информация о вашей теме WordPress

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

Основные разделы в файле CSS темы WordPress

Далее вы можете увидеть основные разделы (стили) или названия структур кода вашей темы WordPress.

Поиск фрагментов кода в CSS-файле WordPress

Когда вы получите полный список стилей в теме WordPress, используйте CTRL + F , чтобы найти различные разделы в коде.Основные разделы также содержат подразделы кода CSS.

Поиск стилей CSS с помощью функции проверки Chrome

Кроме того, вы можете перейти на домашнюю страницу вашего сайта. Щелкните правой кнопкой мыши раздел, для которого нужно изменить код CSS, и нажмите «Проверить» в коротком меню.

После выбора опции «Проверить» вы увидите, что экран вашего браузера разделен на две части.

Поиск названий стилей CSS на странице

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

Отредактируйте файл Style.css

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

Назначение основных разделов в стиле WordPress.css файл

Следующий список содержит важные разделы в файле style.css WordPress.

• Типографика: В этом разделе представлены настройки стилей, размера и цветов шрифта вашего сайта.
• Заголовок: Верхний раздел вашего сайта WordPress называется заголовком. Обычно он содержит строку меню и логотип.
• Сообщений: Этот раздел управляет способом отображения заголовков, шрифтов, цветов и информации о размере вашего сайта.
• Боковая панель: Раздел CSS, содержащий информацию о боковой панели вашего сайта. Вы можете изменить код, чтобы внести необходимые изменения в боковую панель вашего сайта.
• Нижний колонтитул: Это нижний раздел вашего сайта WordPress. Он содержит ссылки в нижнем колонтитуле, значки социальных сетей, юридические страницы и текст об авторских правах.

Мы определили основные разделы файла style.css WordPress. Как новичок, вы можете искать нужные разделы в файле и вносить необходимые изменения.

Дополнительные места для использования CSS на веб-сайте WordPress

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

Наведите курсор на Внешний вид на левой панели и нажмите Настроить в коротком меню.

На следующей странице вы можете увидеть опцию Additional CSS.

Вставьте код CSS и сохраните изменения. Вы можете увидеть результаты в настройщике в реальном времени.

Меры предосторожности при редактировании файла WordPress Style.css

• Прежде чем приступить к редактированию файла style.css в WordPress, обязательно сделайте его резервную копию.
• При редактировании файла style.css делайте должные заметки для редактируемых разделов, включая открывающие и закрывающие скобки и результаты в браузере.
• Рекомендуется редактировать файл style.css локально на вашем компьютере. Для этого вам может потребоваться установить локальный сервер на свой компьютер и внести необходимые изменения в свой сайт.Как только вы завершите работу над файлом style.css своего сайта, вы можете загрузить обновленный файл style.css в свою учетную запись хостинга.
• Используйте параметр Chrome Inspect, чтобы найти точные разделы стилей на веб-страницах. Определив разделы, вы можете выполнить поиск разделов в файле style.css своего сайта и внести необходимые изменения.

Заключение

Если вы сосредоточитесь на файле style.css, вы можете получить список стилей CSS темы вашего сайта.

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

Если, например, вы не предпочитаете, чтобы редактировал файл style.css , вы можете выбрать облегченную тему при создании своего сайта WordPress.

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

7 лучших плагинов WordPress для добавления пользовательского кода CSS

Я предполагаю, что добавление пользовательского CSS на ваш веб-сайт, вероятно, не в верхней части вашего списка дел сегодня.

И если вы все еще читаете это, то, вероятно, вам нужно быстро настроить дизайн своего веб-сайта WordPress, и несколько поисковых запросов в Google подсказали вам, что плагины CSS могут помочь.

Если вы не выбираете тему Bootstrap WordPress, то плагин CSS — отличная альтернатива.

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

Почему вашему сайту нужен плагин WordPress CSS

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

Темы

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

Пользовательские плагины CSS для WordPress

1. CSS Герой
2. Фрагменты кода
Плагин
3. Genesis Extender
4. Простой пользовательский CSS
5. Пользовательский плагин CSS для WordPress
6. WP Добавить собственный CSS
7. Пользовательский CSS

1.CSS Hero

Если вы ищете плагин, удобный для пользователя, вам следует рассмотреть CSS Hero. Этот плагин делает процесс редактирования CSS безболезненным; вы можете использовать интерфейс перетаскивания для редактирования каждого элемента вашей темы. Даже если у вас нет навыков программирования, вы все равно можете заставить свой сайт выглядеть именно так, как вы хотите.

CSS Hero предоставляет вам огромную коллекцию шрифтов Google Fonts, и вы полностью контролируете цветовую схему.

Источник

2.Фрагменты кода

Редактирование файлов темы для добавления кода с этим плагином осталось в прошлом. Code Snippets — это простой и понятный способ добавить фрагменты кода CSS на ваш сайт. Интерфейс графического интерфейса пользователя имитирует файл functions.php вашей темы, выполняя фрагменты пользовательского кода, как если бы они были добавлены туда напрямую.

Code Snippets предлагается на 13 языках для различных веб-сайтов.

Источник

3. Плагин Genesis Extender

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

Genesis Extender от CobaltApps предлагает множество опций для настройки Genesis. Если вы хотите вставить дополнительный код CSS, этот плагин поможет вам сделать это легко, не редактируя файлы темы. Это обязательный плагин для любого сайта WordPress, работающего на Genesis.

Источник

4. Пользовательский CSS Pro

Custom CSS Pro — это профессиональный редактор CSS, который позволяет настраивать внешний вид вашего сайта WordPress с помощью настраиваемого кода CSS, не изменяя при этом файлы тем или плагинов.Пользователи, загрузившие Custom CSS Pro, любят его за легкий и интуитивно понятный интерфейс, который экономит часы, настраивая свои веб-сайты.

Источник

5. Простой пользовательский CSS

Simple Custom CSS — это очень простой и простой в использовании плагин для переопределения стилей плагинов и тем по умолчанию, добавляя собственный код. Это популярный и широко используемый плагин WordPress для редактирования CSS-стиля файлов WordPress. Некоторые из самых популярных функций этого плагина включают предварительный просмотр в реальном времени, полезную подсветку синтаксиса кода и проверку ошибок, поэтому вы можете быть уверены, что ваш код каждый раз отображается правильно.

Источник

6. WP Добавить собственный CSS

Этот плагин позволяет пользователям добавлять собственный код ко всему сайту, а также к отдельным сообщениям и страницам. Если вы внесете изменения во весь сайт, плагин переопределит таблицы стилей по умолчанию для вашей темы и плагинов. С помощью плагина WP Add Custom CSS вы даже можете скрывать и отображать отдельные элементы на определенных страницах.

Источник

7. модульный пользовательский CSS

Если вы любите часто менять тему WordPress, Modular Custom CSS — идеальный плагин WordPress для вас.Пользовательский параметр CSS является глобальным и будет работать даже после того, как вы измените тему. Ваш веб-сайт будет предварительно просмотрен в реальном времени, так что вы сможете увидеть, как будут выглядеть изменения в реальном времени.

Источник

Пользовательский код CSS у вас под рукой

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

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

Примечание редактора: этот пост был первоначально опубликован в январе 2020 года и был обновлен для полноты.

Как настроить тему WordPress с дополнительным CSS

Опубликовано в WordPress от WP Engine

Последнее обновление 15 августа 2019 г.

Темы

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

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

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

Добавить собственный CSS с настройщиком тем

Уровень опыта: Начинающий

Настройщик WordPress позволяет вносить изменения в дизайн вашего веб-сайта и просматривать их в режиме реального времени. Чтобы получить к нему доступ, войдите в свою панель управления и перейдите на вкладку Внешний вид> Настроить :

Здесь можно поиграть с множеством настроек.Однако прямо сейчас найдите вкладку Additional CSS . Как только вы нажмете на него, откроется новый раздел с полем, в котором вы можете добавить собственный CSS:

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

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

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

Добавить собственный CSS с подключаемым модулем

Уровень опыта: От начального до среднего

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

Примечание : Уровень опыта редактирования CSS WordPress с использованием плагинов будет зависеть от того, какой инструмент вы используете. Мы рекомендуем протестировать их все и посмотреть, какой из них наиболее удобен.

Расширенный редактор CSS

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

После установки подключаемого модуля перейдите на вкладку Внешний вид> Настройщик на панели инструментов. Вы должны увидеть новую опцию Advanced CSS Editor , предоставляющую вам доступ к нескольким редакторам для каждого типа устройства:

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

Плюсы:

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

Минусы:

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

Средний рейтинг: 4,5 / 5

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

Модульный пользовательский CSS

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

Чтобы получить доступ к этим полям, вам нужно вернуться в раздел «Внешний вид »> «Настройка»> «Дополнительные CSS ». Когда вы окажетесь там, вы можете приступить к внесению изменений.

Плюсы:

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

Минусы:

• «Глобальный» CSS может не работать с каждой темой, поэтому вам нужно быть осторожным, когда вы переключаетесь на новую.

Средний рейтинг: 5/5

SiteOrigin CSS

SiteOrigin CSS — это отход от плагинов, о которых мы уже говорили. Вместо добавления новых функций в настройщик он предлагает автономный редактор CSS WordPress. Вы можете получить доступ к этому новому редактору, перейдя на вкладку Appearance> Custom CSS после установки плагина:

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

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

Плюсы:

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

Минусы:

• Может быть трудно отслеживать все настраиваемые CSS, которые вы добавляете в свою тему, если вы настраиваете несколько элементов.

Средний рейтинг: 4.9 / 5

Редактировать CSS с помощью таблицы стилей дочерней темы

Уровень опыта: Продвинутый

Дочерняя тема — это копия существующей темы (известной как «родительская»).Дочерние темы позволяют безопасно вносить изменения в ваш сайт WordPress. Это потому, что вы по-прежнему можете обновить родительскую тему, не теряя свой собственный CSS. Кроме того, если вы добавите какой-либо CSS, который негативно повлияет на ваш сайт, вы можете просто отключить дочернюю тему.

Любой пользовательский CSS, который вы добавляете в дочернюю тему, переопределяет стили ее родительской. Однако, чтобы это сработало, вам в первую очередь нужно знать, как создать дочернюю тему. Когда ваш «ребенок» будет готов, вы можете получить доступ к его файлам с помощью FTP-клиента, такого как FileZilla.

После подключения к своему веб-сайту через FTP вам нужно будет найти корневую папку, которая часто называется public_html или www , или названа в честь вашего веб-сайта:

Затем перейдите в каталог wp-content / themes . Там вы найдете отдельные папки для всех ваших тем, в том числе для дочерней, которую вы настроили. Откройте папку дочерней темы и найдите файл style.css внутри:

Щелкните файл правой кнопкой мыши и выберите параметр View / Edit .Это откроет файл с помощью текстового редактора по умолчанию, что позволит вам внести в него изменения. Это означает, что вы можете добавить собственный CSS в свою тему, только теперь вы используете полнотекстовый редактор вместо WordPress Customizer.

Когда вы закончите, сохраните изменения в файле и закройте редактор. Затем вы можете посетить свой веб-сайт, чтобы убедиться, что внесенные вами изменения сработали так, как предполагалось. Если они этого не сделали, вы можете вернуться к файлу style.css и продолжить настройку его CSS.

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

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

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

• Вы новичок в WordPress и не привыкли использовать CSS. В этом случае лучше всего использовать настройщик WordPress. С его помощью вы сможете мгновенно просмотреть изменения и привыкнуть к использованию CSS.
• У вас есть некоторый опыт работы с WordPress и CSS. На этом этапе вам понадобится больше параметров, чем предоставляет настройщик по умолчанию. Поэтому мы рекомендуем использовать плагины, улучшающие его функциональность.
• Вы ветеран WordPress, хорошо разбирающийся в CSS. Если вас не пугает CSS, вы, вероятно, захотите создать дочернюю тему и отредактировать ее таблицу стилей вручную.

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

Улучшите цифровой опыт с отличным дизайном и первоклассным хостингом

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

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

Добавление пользовательского CSS на ваш сайт

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

Важно : Правило номер 1 при работе с темой WordPress — НИКОГДА не редактировать стиль.css вручную. Если вы сделаете это, вы потеряете все свои правки при обновлении темы, и обновление вашей темы имеет решающее значение. И помните … вы приобрели «Тема», а не бесконечный доступ к бесплатному веб-дизайнеру. Настройки выходят за рамки поддержки. Конечно, если вам нужна помощь в чем-то очень маленьком и простом, дайте нам знать, и мы поможем вам.

Метод 1. Использование настраиваемой панели CSS

Total включает настраиваемую панель администратора, расположенную по адресу Theme Panel> Custom CSS , которая использует собственный редактор кода WordPress, поэтому вы можете добавить встроенный CSS на свой сайт (вставленный в тег заголовка).По сути, это просто ярлык для основной функции WordPress, расположенной по адресу Customize> Additional CSS. Тема просто предоставляет дополнительную область для изменения этого CSS, фактический вывод по-прежнему обрабатывается ядром WordPress.

Метод 2: Использование дополнительной настройки CSS в WordPress

Как упоминалось в предыдущем методе, WordPress имеет встроенное поле CSS для Настройщика. Итак, если вы перейдете к Appearance> Customizer , вы найдете другое поле, которое вы можете использовать для добавления вашего собственного CSS, которое будет отображать ваши изменения в реальном времени, когда вы вводите CSS в поле.

Метод 3. Использование дочерней темы

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

Примерная общая дочерняя тема

Важно : Если вы не начали с дочерней темы и теперь переключаетесь на дочернюю тему, прочтите важное сообщение на следующей странице.

Метод 4. Использование плагина WPBakery (CSS только для определенных страниц)

Если вы хотите применить собственный CSS только для определенной страницы, вы можете сделать это через конструктор страниц Visual Composer. Смотрите скриншот ниже:

Как изменить или добавить CSS в вашу тему WordPress • Silo Creativo

Скидка 20%
Темы WordPress, такие как Divi, по 1 доллару за каждую

Получить скидку

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

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

Темы WordPress отвечают за CSS

Если конкретный плагин не имеет собственного стиля и не содержит саму таблицу стилей CSS, правда в том, что весь дизайн загрузки принадлежит исключительно нашему шаблону WordPress. Итак, почему бы не редактировать шаблон напрямую? Ошибка!

Шаблоны

WordPress — это, как и плагины, элементы, которые обновляются, улучшаются и перезаписывают предыдущие версии.И не раздумывая, изменения, внесенные в этот шаблон, не сохраняются. Это означает, что если вы обновите свою тему до новой версии, вы потеряете все внесенные вами изменения (в файлах CSS или php, конечно, содержимое не имеет никакого отношения …)

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

0. Пользовательский CSS через WordPress Настроить

Обновление : начиная с WordPress 4.7 версии, мы можем добавить наш собственный код CSS без внешних плагинов. Эта функция была добавлена ​​в ядро ​​и может использоваться через Внешний вид> Настройка> Дополнительные CSS. Он доступен для всех установок WordPress.org, независимо от того, какие темы или плагины вы используете. Очень быстрый и простой способ добавить свой собственный CSS.

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

1. Пользовательский модуль CSS JetPack

Несомненно, самый простой и достаточно эффективный метод — загрузить плагин Jetpack (если у вас есть учетная запись на WordPress.com, вы также можете использовать бесплатный плагин Slim JetPack) и активировать модуль Custom CSS.

Шаги простые:

1.Установите плагин.
2. Активируйте плагин. (Вам может быть предложено подключить вашу учетную запись WordPress.com)
3. Перейдите в JetPack (чуть выше Post в меню администратора WordPress) и найдите настраиваемый модуль CSS.
4. После активации у вас появится новая вкладка в меню Внешний вид> Пользовательский CSS. Вуаля! Вот полный редактор CSS вашей темы у вас под рукой.

Примечание. Если вы выберете Slim JetPack, вам не нужно выполнять активацию на шагах 2 и 3. Вам просто нужно перейти в «Настройки»> «Slim JetPack».В остальном все так же.

Готово! Вы активировали свой редактор, чтобы вставить или написать правила CSS, которые изменят ваш дизайн или тему. Фантастическая особенность этого метода заключается в том, что JetPack включает стили CSS, которые определяют этот редактор сразу после загрузки, которую тема имеет по умолчанию (style.css) , поэтому вы можете плавно перезаписать, не опасаясь потери изменений в будущих обновлениях.

2. Использование плагина Simple Custom CSS

Так же просто, как активировать модуль Jetpack.После установки плагина Custom CSS и его активации (мы расскажем вам, как правильно установить плагин в WordPress в этой статье), вам нужно перейти в Внешний вид> Пользовательский CSS, где вы можете добавить свои собственные стили CSS. Не забудьте сохранить изменения перед тем, как покинуть страницу!

Очень просто 🙂

3. Создание дочерней темы

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

Однако для некоторых пользователей этот метод может быть несколько утомительным. Вам понадобится редактор CSS (блокнот не рекомендуется; возвышенный текст лучше), доступ к FTP или дочернему пакету тем и его установка через Внешний вид> Темы.

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

Это мой любимый метод , хотя понятно, что имеет место только тогда, когда изменения имеют определенную сущность.Для небольшой модификации метод с помощью JetPack CSS Editor стал проще и быстрее.

Если у вас нет проблем с созданием дочерних тем, это всегда должно быть вашим первым выбором. Основная причина в том, что он масштабируемый, поэтому, если вам нужно включить некоторые дополнительные функции или шаблон, вы можете сделать это через fuctions.php своей дочерней темы (некоторые могут быть очень интересными, особенно те, которые относятся к адаптивным или тем, которые относятся к включить веб-шрифт в свой WordPress.)

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

4. Непосредственно отредактируйте style.css своей темы

Редактирование CSS в WordPress. Прямое редактирование CSS вашей темы (style.css) — не самое лучшее решение. Независимо от того, используете ли вы тему премиум-класса или бесплатную, вы потеряете эти изменения при обновлении темы.

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

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

1. Перейдите в Внешний вид> Редактор
2. Найдите файл style.css (убедитесь, что выбрана текущая тема)
3. Тщательно отредактируйте

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

Другие методы и альтернативы

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

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

Удачи! (Если у вас есть вопросы, не стесняйтесь спрашивать меня.) Какой ваш любимый способ редактирования CSS в WordPress?

Стилизация таблицы с помощью CSS в WordPress: пользовательские CSS таблицы Ninja

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

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

Мы выбрали Ninja Tables для демонстрации, потому что помимо встроенных функций стилизации, этот плагин также имеет возможность простой настройки CSS.

В чем разница между HTML и CSS?

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

HTML или «язык гипертекстовой разметки» — это в основном содержимое веб-страницы. Это могут быть тексты на странице или что угодно. Таблица HTML имеет специальный код HTML, который определяет тег table-

для таблицы, теги и

,

для содержимого таблицы. Напротив, CSS или «каскадные таблицы стилей» обрабатывают дизайн, макет или визуальные эффекты веб-сайта. Если у вас есть таблица WordPress в HTML и вы хотите стилизовать ее с помощью CSS, существуют селекторы CSS для точного поиска и стилизации элемента HTML. Стилизация таблицы с помощью CSS с помощью Ninja Tables Все таблицы имеют определенные классы CSS и идентификаторы таблиц HTML. Поскольку на данный момент Ninja Tables является одним из ведущих плагинов для таблиц, многие пользователи хотят знать, как стилизовать HTML-таблицы Ninja Tables с помощью CSS. Вы можете добавить свои команды стилей на панели Custom CSS Ninja Tables для стилей заголовка, строк, столбцов и т. Д. Вот несколько примеров того, как работает стилизация таблицы с помощью CSS в Ninja Tables. Примечание : функция настраиваемого CSS недоступна в бесплатной версии Ninja Table.Чтобы использовать руководство по стилю, обновитесь до версии Pro. Во-первых, мы создали таблицу с фиктивными данными, чтобы показать вам процесс. Идентификатор таблицы — «4615». Если вы не добавили родительский идентификатор в качестве селектора, вы можете использовать #footable_parent_NT_ID . Селектор CSS для заголовка таблицы — #footable_parent_ID table.ninja_table_pro> thead Здесь «thead» указывает заголовок таблицы, а «ID» — это идентификатор конкретной таблицы, которую вы хотите стилизовать. Чтобы выбрать содержимое заголовка таблицы, селектор CSS станет — #footable_parent_ID table.ninja_table_pro> thead> tr> th В таблице, показанной ранее, мы открыли панель Custom CSS для изменения стиля заголовка. Например, мы хотим, чтобы фон заголовка был оранжевым, а текст заголовка — желтым. После идентификатора таблицы CSS будет — . # footable_parent_4615 table.ninja_table_pro> thead { цвет фона: оранжевый; цвет: желтый; } Перед последней фигурной скобкой можно указать дополнительные свойства.Мы также хотели изменить стиль шрифта и размер заголовка. размер шрифта: 35 пикселей; font-weight: жирный; стиль шрифта: курсив; Теперь сохраните пользовательский CSS и просмотрите таблицу. Вы увидите, что стиль заголовка изменился. Фон заголовка оранжевый, а текст желтого цвета. Точно так же изменились размер и стиль шрифта. Вы можете настроить свою таблицу с помощью селекторов. 2.Укладка рядов стола Стиль CSS для строк таблицы HTML может изменять цвет, шрифт и даже выбирать нечетные / четные строки. Для тела таблицы (tbody), фона строк и цвета текста CSS — # footable_parent_4615 table.ninja_table_pro> tbody> tr { цвет фона: зеленый; цвет: белый; размер шрифта: 20 пикселей; } Мы выбрали зеленый цвет корпуса и белый текст.Кроме того, размер шрифта 20 пикселей. Примечание : для удобства уменьшите размер шрифта заголовка. Если вы хотите выбрать нечетные / четные строки, используйте CSS- # footable_parent_4615 table.ninja_table_pro> tbody> tr: nth-child (even) { background-color: teal; цвет: белый; } Или, # footable_parent_4615 table.ninja_table_pro> tbody> tr: nth-child (odd) { background-color: blue; цвет: розовый; } После сохранения команды стиля снова откройте окно предварительного просмотра, чтобы проверить изменения. Как и команды, нечетные строки теперь синего цвета с розовыми текстами, а четные строки с белыми текстами. 3. Колонны для укладки У каждого столбца таблицы есть определенный класс CSS, и это «ninja_column_ColumnIndex». Обратите внимание, что индекс столбца для таблиц ниндзя начинается с «0». В результате нам нужно написать код как « ninja_column_0 », чтобы выбрать первый столбец. Вы можете добавить дополнительный класс CSS на панели «Дополнительные настройки» редактора отдельных столбцов. 4.Поиск выравнивания По умолчанию панель поиска находится в правом верхнем углу. Вкладка «Другое» на панели «Дизайн таблицы» позволяет вам выбрать нужное положение: слева, по центру, справа, по умолчанию. Если вы хотите, чтобы панель поиска находилась в центре или слева, используя код CSS, то вот как она должна быть: # footable_parent_4615 table.ninja_table_pro tr.footable-filtering form { text-align: center; } Сохраните CSS с полосой поиска в центре.Или вы можете изменить его положение влево. Вот бар в центре. Бонус 3 бонусных балла: a) Цветовой код Вы можете просто ввести цветовую кодировку определенного цвета для фона или шрифта. Мы ввели название цвета, но в некоторых случаях это затруднительно, например, если выбрать более светлый оттенок. Итак, вы можете просто вставить код и обновить его, чтобы изменить цвет. Мы обновили цвета фона нечетных / четных строк на светлые оттенки зеленого, а не бирюзового и синего, как раньше. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Поиск: Рубрики Seo Wordpress Дизайн Заработок Плагин Разное Рекомендац Сайт Совет Советы Тем Темы Урок Уроки