Какие стандартные CSS id/классы используются в админке WordPress?

13 янв. 2012 г., 05:18:33
Просмотры: 76.8K
Голосов: 56

Существует ли список CSS id/классов WordPress, которые можно использовать для создания экранов настроек плагинов, чтобы они выглядели и ощущались как стандартные страницы настроек WordPress? Я нашел некоторые случайным образом, но было бы здорово иметь полный список.

Например, этот класс: button-primary Делает кнопку похожей на эту: кнопка-primary

5
Комментарии

Это выглядит как стандартная кнопка сохранения в WordPress. Если я наберу достаточно репутации, чтобы опубликовать изображение, не хватает всего 2 баллов :)

Ole Henrik Skogstrøm Ole Henrik Skogstrøm
13 янв. 2012 г. 05:20:04

Привет... Я предлагаю решение, которое не совсем соответствует вопросу, но очень полезно для веб-разработки. Вот инструмент Web Developer, который показывает всю информацию о веб-странице. Скачайте его по этой ссылке: http://chrispederick.com/work/web-developer/ Он установится как аддон для Firebug, и вы сможете легко его использовать.

w3uiguru w3uiguru
13 янв. 2012 г. 10:12:06

Выглядит неплохо, @HappySingh, я посмотрю. Хорошие инструменты для разработчиков всегда пригодятся :)

Ole Henrik Skogstrøm Ole Henrik Skogstrøm
13 янв. 2012 г. 13:27:13

Bracketspace создал макет панели управления, который оказался очень полезным. https://wpadmin.bracketspace.com/

Emil Lindén Emil Lindén
23 мая 2022 г. 16:22:17

@EmilLindén это должен быть принятый ответ, большое спасибо!

pixeline pixeline
13 июл. 2023 г. 13:23:30
Все ответы на вопрос 6
2
18

Мы работаем над обновлением http://dotorgstyleguide.wordpress.com/, чтобы добавить больше этой информации и отразить обновления стилей из версии 3.2.

Кроме того, я видел плагин (который сейчас не могу найти), который показывает демонстрационную страницу с различными CSS-селекторами и их визуальным представлением, но, кажется, он устарел. Пока что лучшим вариантом может быть использование Firebug/Web Inspector и изучение файла wp-admin/css/wp-admin.dev.css.

13 янв. 2012 г. 07:33:03
Комментарии

спасибо, я использовал решение с firebug для некоторых небольших задач, которые делал до сих пор. Оно работает нормально, но я бы предпочел что-то более похожее на два примера со списками, которые я получил от вас и @bultge :) спасибо!

Ole Henrik Skogstrøm Ole Henrik Skogstrøm
13 янв. 2012 г. 13:19:17

Содержание на этом сайте сейчас довольно устарело.

Burgi Burgi
2 авг. 2018 г. 19:28:13
1
15

Установите этот плагин, и вы увидите все элементы, классы и идентификаторы https://github.com/bueltge/WordPress-Admin-Style

13 янв. 2012 г. 07:53:33
Комментарии

Отлично! Хороший список, нужно только протестировать некоторые варианты. Также надеюсь на больше ответов и советов :) скоро выберу лучший ответ!

Ole Henrik Skogstrøm Ole Henrik Skogstrøm
13 янв. 2012 г. 13:15:52
2

*Примечание: Для фронтенд части - Вот список, который я составил после долгих исследований стандартных CSS стилей WordPress. Я сделал всё возможное, чтобы тщательно изучить и максимально точно систематизировать всё. Если вы заметите что-то пропущенное или неполное, пожалуйста, напишите в комментариях. Надеюсь, это поможет вам в разработке желаемых плагинов и тем *

/* Стили редактора WP WYSIWYG */

.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 {}
.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 {}

/* Разные стили WordPress */

/* ссылки категорий */
 li.categories {}  
 li.cat-item {}
 li.cat-item-{id} {}
 li.current-cat {}
 li.current-cat-parent {}
 ul.children {}

/* ссылки блогролла */
.linkcat {}
.blogroll {}

/* ссылки "читать далее" */
.more-link {}

/* Стили списка страниц WordPress */

.pagenav {}               /* внешний элемент списка */
.page_item {}             /* любой элемент страницы */
.page-item-{id} {}        /* конкретный ID страницы */
.current_page_item {}     /* текущая страница */
.current_page_parent {}   /* родитель текущей страницы */
.current_page_ancestor {} /* любой предок текущей страницы */

.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 {}

/* Стандартные виджеты WordPress */

.widget {}

/* виджет ссылок */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* мета-виджет */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* виджет страниц */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* виджет последних записей */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* виджет архивов */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* виджет облака тегов */
.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 {}

/* виджет поиска */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* текстовый виджет */
.textwidget {}
.widget_text {}
.textwidget p {}

/* Стили комментариев WordPress */

.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 {}

/* body_class() 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) {}

/* post_class() WordPress */

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}
13 янв. 2012 г. 07:00:56
Комментарии

Я не совсем понимаю ваш список, это список пустых id/классов, чтобы я мог сам настроить стили CSS в WordPress?

Ole Henrik Skogstrøm Ole Henrik Skogstrøm
14 янв. 2012 г. 01:20:06

Это список всех классов для изображений, если вы включаете их разными способами в контенте; например, через float для выравнивания по левому или правому краю и так далее. Думаю, это просто копия из поста в интернете?

bueltge bueltge
15 янв. 2012 г. 23:24:28
0

В WordPress в админ-панели действительно генерируются классы для тега "body". Я нигде не видел явной документации по этому поводу (хотя, возможно, просто пропустил её). Вы можете увидеть эти классы и то, как они генерируются, в исходном коде admin-header.php.

Сгенерированные классы очень похожи на те, что используются на фронтенде:

<body class="wp-admin no-js  upload-php admin-bar branch-3-3 version-3-3-1 admin-color-fresh">
18 нояб. 2013 г. 20:48:43
0

Я столкнулся с этим вопросом, когда создавал собственную страницу админки с помощью add_menu_page(). Вам нужно разместить свой контент между

<div class = "wrap">Ваш контент.</div>

Это активирует стандартные CSS стили админки WordPress, чтобы ваша кастомная страница выглядела естественно. Другие div-элементы в этом случае будут автоматически обработаны WordPress.

class AdminScreen{

    public function __construct(){
        add_action( 'admin_menu', array( $this, 'doAddMenuPage' ) );
    }

    public function doAddMenuPage(){
        add_menu_page( "AdminScreen", "AdminScreen", 'edit_others_pages', 'AdminScreen', array($this, 'echoAdminPage') );
    }

    public function echoAdminPage(){        
        //Выводит HTML в буфер вывода:
        echo '<div class = "wrap"><h1 class = "wp-heading-inline">Теперь это выглядит правильно, наконец-то!</h1></div>';
    }
}
30 авг. 2017 г. 01:40:53
0

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

Еще один полезный ресурс — это Dashicons в WordPress.

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

14 окт. 2019 г. 11:12:03