WordPress css


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

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

Способ №1

1. Заходим в административное меню и переходим в Внешний вид -> Редактор.

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

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

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

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

Способ №2


Для редактирования стилей этим способом нам нужно:

1. Найти файл style.css в корне папки вашей активированной темы (шаблона).

Путь к файлу: wp-contentthemesназвание_вашей темыstyle.css

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

2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.

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

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

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

Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!


wp-lessons.com

Как неправильно загружать CSS на WordPress


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

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

…или же в файлах functions.php, считая, что так лучше:

<?php     function add_stylesheet_to_head() {   echo "<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";  }     add_action( 'wp_head', 'add_stylesheet_to_head' );     ?>

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

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

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

Как правильно загружатьCSS на WordPress


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

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

1. Регистрация CSS-файлов

Если вы намерены загрузить каскадные таблицы стилей, для начала вам следует их зарегистрировать с помощью функции wp_register_style():

<?php  wp_register_style( $handle, $src, $deps, $ver, $media );  ?>
  • $handle (обязательное) — это уникальное название таблицы стилей. В других функциях оно будет употребляться для постановки в очередь и печати таблицы стилей.
  • $src (обязательное) — относится к URL вашей таблицы стилей. Можно использовать функцию get_template_directory_uri() для поиска CSS-файлов в вашей теме. И не вздумайте даже применить жесткое кодирование!
  • $deps (необязательное) — управляет названиями зависимых стилей. Если ваша таблица стилей не будет работать при отсутствии CSS-файла, используйте эти параметры для установки «зависимых стилей».

  • $ver (обязательное) — это номер версии. Можно использовать номер версии вашей темы или, по желанию, создать его. Если вы не хотите использовать какой-либо другой номер версии, установите null, по умолчанию — false, и WordPress добавит свой собственный номер версии.
  • $media (необязательное) — медиа-типы CSS, например, «ручное управление» или «печать». Если вы не уверенны, нужна ли вам эта опция, не используйте ее.

Вот пример регистрации с помощью функции wp_register_style():

<?php     // wp_register_style() example  wp_register_style(   'my-bootstrap-extension', // handle name   get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet   array( 'bootstrap-main' ), // an array of dependent styles   '1.2', // version number   'screen', // CSS media type  );     ?>

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

2. Добавление CSS-файлов в очередь

После регистрации файла стиля необходимо поставить его в очередь, чтоб загрузить в <head> темы.

Это осуществляется с помощью функции wp_enqueue_style():


&lt;?php  wp_enqueue_style( $handle, $src, $deps, $ver, $media );  ?&gt;

Ее параметры в точности совпадают с параметрами функции wp_register_style(), поэтому нет необходимости снова о них упоминать.

Но как уже было сказано, регистрация, а именно функция wp_register_style() не является обязательной. Стоит отметить, что wp_enqueue_style() можно использовать двумя разными способами:

&lt;?php     // if we registered the style before:  wp_enqueue_style( 'my-bootstrap-extension' );     // if we didn't register it, we HAVE to set the $src parameter!  wp_enqueue_style(   'my-bootstrap-extension',   get_template_directory_uri() . '/css/my-bootstrap-extension.css',   array( 'bootstrap-main' ),   null, // example of no version number...   // ...and no CSS media type  );     ?&gt;

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

3. Загрузка стилей на сайт

Мы не можем использовать функцию wp_enqueue_style() везде в применяемой нами теме, нам следует использовать «действия». Следующие три действия могут помочь для достижения различных целей:

  • wp_enqueue_scripts — для загрузки скриптов и стилей в «front-end» сайта;
  • admin_enqueue_scripts — для загрузки скриптов и стилей на страницах или же в административной панели сайта;
  • login_enqueue_scripts — для загрузки скриптов и стилей для страницы входа на сайт.

Пример:

&lt;?php     // load css into the website's front-end  function mytheme_enqueue_style() {   wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );   }  add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );     // load css into the admin pages  function mytheme_enqueue_options_style() {   wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' );   }  add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );     // load css into the login page  function mytheme_enqueue_login_style() {   wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' );   }  add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );     ?&gt;

Дополнительные функции

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

Давайте рассмотрим подробнее.

1. Добавление встроенных стилей: wp_add_inline_style()

Если в используемой вами теме на WordPress есть опции, позволяющие настроить стили темы, вы можете печатать встроенные стили с помощью функции wp_add_inline_style():


&lt;?php     function mytheme_custom_styles() {   wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );   $bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"   $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';   wp_add_inline_style( 'custom-style', $custom_inline_style );  }  add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );     ?&gt;

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

2. Проверка статуса очереди таблицы стилей: wp_style_is()

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

&lt;?php     /*   * wp_style_is( $handle, $state );   * $handle - name of the stylesheet   * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'   */     // wp_style_is() example  function bootstrap_styles() {      if( wp_style_is( 'bootstrap-main' ) {      // enqueue the bootstrap theme if bootstrap is already enqueued   wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );      }     }  add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );     ?&gt;

3. Добавление метаданных в стили: wp_style_add_data()

На WordPress есть одна замечательная функция под названием wp_style_add_data(), которая позволяет добавлять мета-данные в стиль используемой темы, включая условные комментарии, RTL поддержку и многое другое!


Вот как она выглядит:

&lt;?php     /*   * wp_style_add_data( $handle, $key, $value );   * Possible values for $key and $value:   * 'conditional' string Comments for IE 6, lte IE 7 etc.   * 'rtl' bool|string To declare an RTL stylesheet.   * 'suffix' string Optional suffix, used in combination with RTL.   * 'alt' bool For rel="alternate stylesheet".   * 'title' string For preferred/alternate stylesheets.   */     // wp_style_add_data() example  function mytheme_extra_styles() {   wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );   wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );   /*   * alternate usage:   * $GLOBALS['wp_styles']-&gt;add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );   * wp_style_add_data() is cleaner, though.   */  }     add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );     ?&gt;

4. Вычеркивание стилей из списка с помощью wp_deregister_style()

Если у вас когда-либо будет необходимость вычеркнуть стиль таблицы (например, чтоб зарегистрировать ее с обновленной версией), то вы можете это сделать с помощью wp_deregister_style().


Смотрите пример:

&lt;?php     function mytheme_load_modified_bootstrap() {   // if bootstrap is registered before...   if( wp_script_is( 'bootstrap-main', 'registered' ) ) {   // ...deregister it first...   wp_deregister_style( 'bootstrap-main' );   // ...and re-register it with our own, modified bootstrap-main.css...   wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );   // ...and enqueue it!   wp_enqueue_style( 'bootstrap-main' );   }  }     add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );     ?&gt;

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

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

Заключение

Подведем итоги всего вышесказанного.

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

hostenko.com


WordPress gives us full control over the presentation of our websites. We specify which classes and attributes to use in our template files, and then apply CSS using our theme’s custom stylesheet. Behind the scenes, WordPress generates its own classes and IDs, and applies them to specific HTML elements in theme files and database content. Having these default hooks available makes it super-easy to custom-style your theme’s blockquotes, post images, widget items, and much more.

In addition to generating default classes for your site’s “front-end” (public-facing) pages, WordPress also employs a default set of CSS attributes for the Admin, or “back-end” pages. If you’ve ever delved into the convoluted CSS stylings of the WordPress Admin, you will understand why we focus exclusively on front-end attributes in this article. The goal is to include all classes and IDs generated for database content, theme template files, and default widget items.

Fortunately, most (if not all) of your WP CSS work happens at the “theme” or “post” level. And when you do need to style the Admin, it’s usually easiest to just do it en bloc via plugin. You can also do it the old-fashioned way.

Different Types of Default WordPress Styles

In this DiW post, we assemble and dissect as many of the default front-end WordPress CSS attributes that we could find. It turns out there are many more automatically generated classes and IDs than you probably realize, including those for more commonly styled elements such as the following:

  • Images included via WordPress’ WYSIWYG Post Editor
  • Image captions and galleries included via the WYSIWYG Post Editor
  • The body_class() and post_class() template tags
  • WordPress’ automatic “smilies”
  • WordPress’ default widgets

Some of these features are used quite frequently, while others not so much. It’s a good idea to cover your bases for these items, especially when producing publicly available themes. By including some basic styles for key CSS attributes, you ensure a more complete and rewarding experience for your theme’s users (and their users as well).

Fortunately, not all of WordPress’ default CSS attributes require explicit styling. Many default classes and IDs are generated and included as a matter of convenience. Conversely, there some core styles that are essential for public themes. So to organize things, we have two somewhat arbitrary types of default attributes, “essential” or “optional” — and here they are now:

Essential WordPress Styles

These are default WordPress attributes that should be styled with CSS:

  • Default styles applied by WordPress’ WYSIWYG editor
  • Default styles generated by WordPress’ default widgets
  • Comment styles — threaded comments, specific comment styles, et al.
  • Miscellaneous WordPress styles

Optional WordPress Styles

These are default WordPress attributes that should be styled only when needed:

  • WordPress Page Listings
  • CSS attributes generated by body_class()
  • CSS attributes generated by post_class()
  • Miscellaneous WordPress styles

For each of these sections, we’ll review the associated functionality and then present the default CSS styles generated and output by WordPress. It is ultimately up to you to decide the best approach for dealing with these default styles. If nothing else, it is wise to provide styles for WordPress’ WYSIWYG Editor items and perhaps widgets, if enabled. This is functionality that users typically employ while working with their site.

For all of these CSS attributes, we are merely presenting the selectors devoid of any preset styles. Only the styles for the WYSIWYG Editor are included, mostly because they are styled according to the WordPress Codex. Everything else is entirely up to you.

↑ WordPress CSS – WYSIWYG Editor Styles

When you are working with WordPress’ WYSIWYG Editor in the Edit Post screen, WordPress applies context-specific CSS attributes to certain elements when they are included in your post. For example, when inserting images, you can specify whether the images are floated left, right, or even centered. To do this, WordPress applies classes such as alignleft, alignright, or aligncenter. Without defining styles for WordPress’ default hooks, images and other elements may not display as intended.

Thus, at a bare minimum, if you are building a theme that will be used by the general public, it is wise to include the following basic styles for the items attributed via the WYSIWYG Editor:

/* == WordPress WYSIWYG Editor Styles == */  .entry-content img { 	margin: 0 0 1.5em 0; 	} .alignleft, img.alignleft { 	margin-right: 1.5em; 	display: inline; 	float: left; 	} .alignright, img.alignright { 	margin-left: 1.5em; 	display: inline; 	float: right; 	} .aligncenter, img.aligncenter { 	margin-right: auto; 	margin-left: auto; 	display: block; 	clear: both; 	} .alignnone, img.alignnone { 	/* not sure about this one */ 	} .wp-caption { 	margin-bottom: 1.5em; 	text-align: center; 	padding-top: 5px; 	} .wp-caption img { 	border: 0 none; 	padding: 0; 	margin: 0; 	} .wp-caption p.wp-caption-text { 	line-height: 1.5; 	font-size: 10px; 	margin: 0; 	} .wp-smiley { 	margin: 0 !important; 	max-height: 1em; 	} blockquote.left { 	margin-right: 20px; 	text-align: right; 	margin-left: 0; 	width: 33%; 	float: left; 	} blockquote.right { 	margin-left: 20px; 	text-align: left; 	margin-right: 0; 	width: 33%; 	float: right; 	} .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {}  .size-full {} .size-large {} .size-medium {} .size-thumbnail {}

Lots of good stuff there, but no predefined styles for some of the Gallery items, such as .gallery dl and .size-thumbnail, as seen near the end of the list. Also, if you are using reset styles for margins and padding, you can strip out quite a few rules from this default set.

Quick Tip: an easy way to ensure that everything is looking great is to simply create a test post in which you include each of the WYSIWYG items. Then include this set of default styles and fine-tune as desired.

As with most everything else WordPress-related, for more information on these default WordPress styles, check out the Codex. The default selectors above basically define CSS styles for images, captions, galleries, blockquotes, and smilies &ndash: in other words, all of the items that you can include using WordPress’ built-in WYSIWYG Editor.

↑ WordPress CSS – Miscellaneous Styles

After styling the essentials, you may also want to keep an eye out for these miscellaneous WordPress classes:

/* == WordPress CSS - Miscellaneous Styles == */  /* category links */  li.categories {}   li.cat-item {}  li.cat-item-{id} {}  li.current-cat {}  li.current-cat-parent {}  ul.children {}  /* blogroll links */ .linkcat {} .blogroll {}  /* read-more links */ .more-link {}

Not all of them are going to be used in every theme, but they are used quite commonly, especially the .read-more class, which is frequently used for archive, category and tag pages. It may be wise to anticipate their presence to ensure that nothing is going to break your theme’s design. Also, for more information on the category-links template tag, visit the WP Codex: wp_list_categories.

↑ WP CSS – Page Listings

If you are using WordPress’ built-in page-listing functionality provided by the wp_list_pages() and wp_page_menu() template tags, there are a variety of items that should be styled. These may look like a lot of work, but once you get the pattern down, it goes pretty quickly. Hopefully the following list will prove a useful reference during your next page-list styling session:

/* == WP CSS - Page Listings == */  .pagenav {} /* outermost list item */ .page_item {} /* any page item */ .page-item-{id} {} /* specific page id */ .current_page_item {} /* current page */ .current_page_parent {} /* parent of current page */ .current_page_ancestor {} /* any ancestor of current page */  .pagenav ul, .pagenav .current_page_item ul, .pagenav .current_page_ancestor ul, .pagenav .current_page_ancestor .current_page_item ul, .pagenav .current_page_ancestor .current_page_ancestor ul, .pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul, .pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {}  .pagenav ul ul, .pagenav .current_page_item ul ul, .pagenav .current_page_ancestor ul ul, .pagenav .current_page_ancestor .current_page_item ul ul, .pagenav .current_page_ancestor .current_page_ancestor ul ul {} .pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul ul,  .pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul ul {}

Again, the easiest way to understand this spaghetti is to create a list by including wp_list_pages() in a theme template file, and define a big red border (or whatever) for each declaration block. Check the results and you should quickly recognize the pattern. For more information on the template tags used to generate these rules, go to Codex:

  • wp_list_pages()
  • wp_page_menu()

You may also want to check out some delicious recipes for WordPress page navigation, which provide everything you need to create the perfect page navigation menus for your website. </hype>

↑ WordPress CSS – Default WordPress Widgets

There are literally thousands of widgets available to WordPress users, but there is a handful of very common widgets that are frequently used with widgetized themes. If you are planning on widgetizing your theme, you should include some styles for some of the more popular widgets. Many of the widgets included with the retiring Kubrick theme have become very common, if not expected:

Kubrick Widgets

As the theme designer, you will decide which (if any) widgets to include in your theme, so you will know exactly which styles to apply. Here are the generic rules for some of the more common WordPress widgets:

/* == WordPress CSS - Default WordPress Widgets == */  .widget {}  /* links widget */ .widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {}  /* meta widget */ .widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {}  /* pages widget */ .widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {}  /* recent-posts widget */ .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {}  /* archives widget */ .widget_archive {} .widget_archive ul {} .widget_archive ul li {}  .widget_archive ul li a {} .widget_archive select {} .widget_archive option {}  /* tag-cloud widget */ .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 {}  /* calendar widget */ .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 {}  /* category widget */ .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 {}  /* recent-comments widget */ .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {}  /* search widget */ #searchform {} .widget_search {} .screen-reader-text {}  /* text widget */ .textwidget {} .widget_text {} .textwidget p {}

That’s obviously a lot of work for any designer, but there are many similar elements that would probably look best with matching styles. For example, instead of multiple declarations for list elements such as .widget_archive ul li, .widget_pages ul li, and .widget_recent_entries ul li, we can simplify by combining them into a single declaration, for example:

.widget_pages ul li,
.widget_archive ul li,
.widget_recent_entries ul li {}

In other words, when it comes to styling widgets, there’s a lot of repetition that may be consolidated and streamlined in your stylesheet. As you apply styles for WordPress’ default widgets, keep an eye out for exploitable selector patterns and similar styles that may be combined to save time and effort.

↑ WordPress CSS – Comment Styles

Styling comments is the bane of WordPress theme designers, especially when threaded/nested comments are enabled. The deeper they go, the more time you’re going to spend with them, but thankfully WordPress makes things a little easier by providing plenty of precise CSS hooks. Of course, if threaded comments are disabled, there is no need to bother with most of these classes. But when they are used, many of the following selectors should define style:

/* == WP CSS - Comment Styles == */  .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 {}

These are all of the classes and IDs that I could find, and they all seem to be pretty self-explanatory, especially after using them a few times. Even so, consider the collection a work in progress. As new information is discovered, the list will continue to improve (hypothetically speaking). Many of these selectors target markup elements generated via WordPress’ built-in wp_list_comments() template tag. Even when using a custom callback function for your comments loop, many of these CSS classes will be available for your styling convenience.

↑ WordPress CSS – body_class()

As of version 2.5, WordPress provides the body_class() template tag, which is included in the <body> element of your theme’s markup. When included, this tag outputs a variety of context-dependent class names that facilitate styling different types of page views. We talk more about body_class() here and here, but for now, let’s look at the different classes WordPress generates for this powerful tag:

/* == WP CSS - body_class() == */  .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) {}

As you can see, these classes enable us to easily target elements on any specific type of page. For example, if you want to customize the presentation of your search results, you could define your styles using the .search-results class. This flexibility offers greater control over the granular construction of your WordPress theme. For more information on the body_class() tag, check out the WordPress Codex.

↑ WordPress CSS – post_class()

As with body_class(), the post_class() template tag outputs a variety of context-dependent class names for your posts. The post_class() tag makes it easy to target and style specific posts and post-types, as well as posts from specific categories or tags. Here are the different class names automatically generated by post_class():

/* == WP CSS - post_class() == */  .post-id {} .post {} .page {} .attachment {} .sticky {} .hentry {} .category-misc {} .category-example {} .tag-news {} .tag-wordpress {} .tag-markup {}

Again, these classes seem pretty self-explanatory, but if anyone happens to know the definition of the .hentry class, it would be nice to know — I couldn’t find anything, and sadly didn’t take time to test. Basically, these classes enable you to define styles for specific types of posts, attachments, stickies, categories and tags. You can also include your own classes to post_class(), and even include current category IDs. For more information on the post_class() tag, check out the WordPress Codex.

Call for updates

So what’s missing? Notice any errors? I did my best to research everything and organize everything as accurately as possible, but this turned out to be a bit more insane than I had planned, and so there is definitely room for improvement. If you see anything that is inaccurate or incomplete, please advise in the comments. It would be great to fine-tune a complete reference for all of WordPress’ default CSS styles and hooks all in one place.

digwp.com

Как правильно подключать внешние CSS и JS файлы в тему WordPress

1. Регистрируем наши css и js файлы

Для этого в файле functions.php. Например, мне нужно подключить файл bootstrap_grid.css.

Для этого в function.php я использую функцию Php wp_register_style, которая может получать 5 параметров:

Два обязательных параметра

  • $handle(строка)

Это название подключаемого файла (например, style, bootstrap, responsive). Оно должно быть уникальным. Это важно.

  • $src(строка)
    Адрес к подключаемому файлу стилей. Например, http://site.ru/css/style.css.

Советую указывать относительный адрес. То есть, в случае с темой —

Необязательные параметры

  • $deps(массив)

Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array()

  • $ver(строка/логический)

Указания версии файла. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1.

По умолчанию: false

  • $media(строка)

Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть:

all
screen
handheld
print

В моем случае я использую только пару обязательных параметров

  1. Имя (bootstrap_grid)
  2. Адрес (get_template_directory_uri() . ‘/css/bootstrap_grid.css’)

Итого получается так

2. Ставим в очередь на загрузку

Функция wp_enqueue_style необходима как раз для того, чтобы поставить наши стили в очередь на загрузку, она принимает такие же параметры как и функция wp_register_style

В нашем случае выйдет так

3. Запускаем наш файл стилей

Для этого наш нужно использовать функцию add_action.

Я не буду расписывать все ее возможные параметры. Нам достаточно передать дав параметра

Мы используем wp_enqueue_scripts как для подключения скриптов, так и для подключения стилей!

P.S. Мой совет

Я рекомендую под подключение css и js создавать отдельные функции и вызывать их по мере необходимости.

Например, я создал функцию all_css, где зарегистрировал и поставил в очередь все свои css-файлы. И, затем, ее вызвал.

Вот и все. Есть возникли вопросы — пишите в комментариях

forwww.com

Что такое css-стили

CSS – (каскадные таблицы стилей) язык, используемый для оформления внешнего вида html-страницы. Любой элемент сайта имеет свои css-правила, записанные в отдельном файле (таблице стилей) и задающие внешний вид этого элемента.

На моем блоге есть серия статей, где я учу индивидуально оформлять те или иные элементы блога:

  • Внешний вид цитат в WordPress
  • Оформление подписки Feedburner
  • Настройка формы поиска
  • Красивая форма обратной связи
  • Стилизация кнопки «читать далее»

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

Как вносить изменения в стили WordPress-блога?

Для начала, всем, кто сталкивается с подобным вопросом впервые, предлагаю изучить структуру шаблона и его основные файлы. Файл стилей style.css в WordPress отвечает за внешнее оформление темы. Если вы загляните внутрь этого файла с помощью редактора Notepad или любого другого, то увидите приблизительно следующее:

Файл стилей style.css

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

Редактирование CSS в WordPress

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

Для этого нам нужно вспомнить дополнение FireBug для FireFox. В статье про данное расширение описано, как находить элементы кода, которые отвечают за ту, или иную деталь сайта. Далее вы можете скопировать отрывок кода данного элемента и вставить его в файл css-стилей (далее я расскажу, как редактировать файл дочерней темы или поле изменения стилей, созданное плагином). Таким образом, мы сохраняем протестированные в Файербаге изменения.

Задаются стили в WordPress, как и на любых других типах сайтов, с помощью стандартной модели: селектор {свойство: значение;}.

Разберем, как это делается на примере селектора «socials», который отвечает за отображение социальных кнопок:

Свойство border-bottom отвечает за стиль нижней границы, а прописанные после двоеточия значения определяют ее толщину (2 пикселя), тип (solid – сплошной), цвет (#f0f3f4).

Соответственно border-top – верхняя граница с подобными значениями, height – высота элемента, margin-bottom – нижний отступ, padding – поля вокруг элемента, position – положение элемента.

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

Свойство «Шрифт» (Font)

font-size — размер шрифта в пикселях, процентах и т.д., например, font-size: 12 px;

font-family – название шрифта (Calibri, Tahoma  и т.д.);

font-weight – насыщенность: жирный (bold), нормальный (normal) или значения от 100 до 900;

font-style – стиль шрифта: курсив, нормальный, наклонный (normal, italic, oblique);

font – свойство, которое задает сразу ряд характеристик, например,

p { font: italic 110% tahoma; }

Размеры

width – ширина элемента в пикселях, процентах, пунктах и т.д.;

height – высота элемента.

Свойства текста

text-align – горизонтальное выравнивание: по центру, по левому или правому краю, по ширине и т.д.;

text-align: left;

vertical-align – выравнивание по вертикали;

line-height – высота строки в пикселях, процентах, пунктах;

color – цвет текста элемента задается с помощью названия (red, green, black и проч.) или посредством шестнадцатеричной системы, где используются числа от 0 до 9 и латинские буквы от A до F, обозначающие числа от 10 до 15 (color: #dee1e2;). Для определения цветов есть множество специальных программок и онлайн сервисов. Я использую для этого фотошоп.

Свойство Background (Фон)

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

Соответственно, background-color– это отдельно только цвет фона, background-image– изображение, где значением служит путь к файлу:

background-image: url ('images/test.gif').

Свойство «Граница» (Border)

border – мы уже разбирали на примере выше, это свойство границы.

Соответственно если через дефис прибавить top, bottom, right, left (например, border-top), то это будет верхняя, нижняя, правая или левая граница.

Отступы (Margin)

margin – величина отступа со всех сторон. По аналогии с border, можно описывать отдельно top, bottom, right, left (margin-right).

Поля (Padding)

padding – поле вокруг элемента (сверху, справа, снизу и слева);

Отдельные поля по аналогии с margin и border (top и т.д.).

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

Проблема с обновление темы

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

Что же делать, чтобы этого не случилось?

Для этой задачи есть два варианта решения:

  • Вообще не обновлять свою тему:)
  • Подключить к установленной вами WordPress-теме дочернюю со своим файлом style.css;
  • Воспользоваться плагином для правки стилей.

Разберем 2 и 3 пункты подробнее.

Как создать дочернюю тему WordPress?

Для установки вспомогательной темы, вам необходимо создать новую папку в wp-content/themes. К примеру, назовем ее Additional Theme. В ней вам нужно создать новый файл style.css.

Открываем этот файл и прописываем следующее:

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

Команда @import url импортирует стили родительской темы. После этой директивы можно указывать свойства и значения выбранных вами для изменения элементов. В нашем случае это тэг «h1» (заголовок), которому мы присвоили красный цвет.

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

Теперь копируем созданную нами папку на сервер. Если все сделано верно, то в разделе «Внешний вид» — «Темы» у вас появится новая тема Additional Theme. Именно ее нужно активировать. При этом родительская тема должна быть установлена, но не активирована.

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

pro-wordpress.ru

Вступление

Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

CSS это

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

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

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

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

Где лежит файл style.css WordPress

Несколько прописных истин:

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

А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

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

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

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

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

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

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

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

Совет: Ошибки в редактировании 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-сайта-WordPress-2

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

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

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

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

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

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

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

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

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

  • Наводим на него мышь, через правую кнопку открываем «Код элемента»;
редактировать-CSS-сайта-WordPress-5
редактировать CSS сайта WordPress начало
  • Видим код HTML в правом поле и код CSS в левом поле;
  • Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
  • Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).
редактировать-CSS-сайта-WordPress-6
редактировать CSS сайта WordPress

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

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

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

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

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

Полезные ссылки

  • Сервис проверки CSS от W3C (формат CSS3): http://jigsaw.w3.org/css-validator/
  • Сервис сжатия CSS файлов: 15 Сервисов сжатия CSS файлов.

©www.wordpress-abc.ru

www.wordpress-abc.ru

Редактирование файла style.css вашей темы

Самым распространённым спобом редактирования CSS кода вашего сайта WordPress является его изменение в файле style.css вашей активной темы. Все темы в WordPress находятся в директории wp-content/themes и по названию вашей активной темы, вы сможете легко определить в какой директории она располагается.

Для редактирования файла style.css вашей темы вам необходимо иметь доступ к сайту через FTP, или поддержку изменения файлов темы прямо из панели администрирования WordPress. Если изменение файлов из панели администратора поддерживается вашим хостинг провайдером, вы найдёте эту возможность в разделе Внешний вид → Редактор.

Убедитесь, что в списке справа выбран файл style.css (таблица стилей). Редактировать файлы .php таким образом крайне не рекомендуется, поскольку малейшая ошибка может привести к поломке вашего сайта. Более надёжным методом является редактирование через FTP.

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

Дочерние темы WordPress

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

Для создания новой дочерней темы, дайте ей новую папку в директории wp-content/themes и поместите в неё пустой файл с названием style.css. Путь до вашего файла стилей будет выглядеть следующим образом: wp-content/themes/my-child-theme/style.css, где my-child-theme — название нашей новой дочерней темы.

Откройте файл style.css вашей дочерней темы в вашем любимом текстовом редакторе, и впишите в него следующий код:

/**   * Theme Name: My Child Theme   * Template: twentytwelve   */  @import url("../twentytwelve/style.css");    body { background: red; }  

Директивой Theme Name мы указываем название нашей дочерней темы, а на следующей строке директивой Template указываем на родительскую тему, которую хотим использовать. В нашем случае это тема Twenty Twelve, которая находится в директории twentytwelve.

После заголовка темы, командой @import мы включаем стили темы Twenty Twelve, а всё что следует ниже — наш собственный CSS код. В нашем случае мы изменяем цвет фона на красный.

Сохраните изменения в файл style.css вашей дочерней темы, и загрузите всю директорию my-child-theme на сервер по FTP. Вы увидите, что ваша новая дочерняя тема доступна при выборе тем в разделе Внешний вид → Темы.

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

Редактирование CSS с помощью плагина

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

Модуль Custom CSS позволяет редактировать стили прямо из панели администрирования WordPress и не требует FTP доступа или особых настроек хостинг площадки. Custom CSS имеет подсветку и проверку синтаксиса, поддерживает ревизии, а так же несколько CSS препроцессоров (LESS и Sass).


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

wpmag.ru

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

Для выполнения заданий этой статьи вам понадобится:

  • Установленная система WordPress;
  • Редактор кодов.

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

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

Если вы уже выполняли задания из предыдущей статьи и установили стили для главной страницы блога на основе категорий, то можно использовать эту тему в качестве отправной точки — именно так поступлю и я. Также можно работать с существующей темой или создать дочернюю темы Twenty Fifteen.

Создаем тему

Если вы работаете с собственной темой или темой, созданной во время выполнения заданий предыдущей статьи, то можете пропустить этот раздел. Иначе вам нужно создать дочернюю тему от Twenty Fifteen.

В папке wp-content/themes создайте новую папку и задайте для нее имя. Я назвала свою папку tutsplus-style-posts-by-category.

В этой папке создайте пустой CSS-файл под названием style.css и добавьте в него следующий код:

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

Теперь активируйте тему.

Импорт данных

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

  • Перейдите на страницу Theme Unit Test и скачайте по размещенной на ней ссылке XML-файл;
  • На своем сайте перейдите в меню Инструменты> Импорт. Нажмите на соответствующую ссылку;
  • Нажмите на кнопку «Выбрать файл» и выберите файл, который вы только что скачали. Нажмите кнопку «Загрузить файл и импортировать»;
  • Далее следуйте инструкциям, а затем подождите, пока WordPress импортирует данные.

Определение стилей для указанных элементов

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

Он добавляет в элемент body классы в зависимости от типа страницы, которая просматривается.

post_class()— делает то же самое, но используется в цикле записей.

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

Если вы работаете с дочерней темой Twenty Fifteen, то эти теги уже были добавлены самой темой, и вам не нужно ничего делать.

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

В этом примере тег body содержит классы, которые сообщают нам, к какому типу принадлежит данная страница:

Эти классы говорят, что мы находимся на странице архива категории, с разметкой для категории. Класс, который нам нужно указать, это category-markup.

Назначение стиля заголовков в списке архива

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

Вы можете изменить цвета в соответствии с дизайном своего сайта. Теперь сохраните файл и откройте страницу категорий в браузере. Моя страница категории Markup теперь содержит цветные заголовки записей:

А на странице архива категории Media заголовки записей имеют другой цвет:

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

Теперь давайте установим границы. Добавьте в таблицу стилей следующий код:

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

Назначение стилей для заголовков архивов

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

Заголовок архива выводится следующим образом:

Мы должны указать классы page-header и page-title, а также классы в теге body для архива.

Добавьте в файл CSS следующий код:

.

Это изменило цвет заголовка архивов:

Теперь давайте изменим цвет границы. Добавьте в файл CSS следующий код:

Теперь цвет границы изменился:

Заключение

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

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

Вы можете пойти еще дальше, например:

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

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

Перевод статьи «Style Different Categories in Your WordPress Site Differently Using CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.