WordPress классы css в меню: Как в WordPress присвоить элементам меню свой css класс?

Содержание

Шпаргалка по стандартным стилям CSS для начинающих. Часть 1

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

Цель данной шпаргалки — помочь новичкам в изучении тем ВП. Если же вы такой новичок, который не хочет связываться с кодом, то вам стОит взглянуть в направлении фреймфорков (например, Headway) где всё можно сделать «под себя» простым перетаскиванием. Для остальных же мы пройдемся по некоторым наиболее важным стандартным стилям WordPress.

Стандартные стили для класса Body

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


.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(имя-пользователя) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(имя файла шаблона) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(номер страницы) {}
.single-paged-(номер страницы) {}
.page-paged-(номер страницы) {}
.category-paged-(номер страницы) {}
.tag-paged-(номер страницы) {}
.date-paged-(номер страницы) {}
.author-paged-(номер страницы) {}
.search-paged-(номер страницы) {}

Если, например, вы захотите оформить вашу страницу результатов поиска, то можете использовать класс “search-results” для добавления своего оформления. WordPress добавляет этот класс к тегу body только тогда, когда активна страница результатов поиска, поэтому не затрагиваются остальные страницы.

Стандартные стили записей

Как и в случае с элементом body, WordPress добавляет динамические классы к элементам записи. Вот список наиболее популярных из них:

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

И снова, WordPress добавляет динамические классы к вашим записям, используя функцию post_class (), которая позволяет вам создавать свои собственные стили для каждого формата. Функция post_class () добавит класс в виде “.format-foo”, где foo — любой выбранный вами формат записи (например, галерея, изображение и т.д.)


.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Стандартные стили меню

В нашей статье под названием как стилизировать меню в WordPress мы обсуждали как добавить собственный класс к вашем меню. Мы будем считать, что вы прочли ту статью и то, что вы дали своему классу меню имя “main-menu”.


#header .main-menu{}           /* контейнер */
#header .main-menu ul {}       /* первый неупорядоченный список */
#header .main-menu ul ul {}    /* неупорядоченный список в неупорядоченном списке */
#header .main-menu li {}       /* пункт списка */
#header .main-menu li a {}     /* ссылка в пункте списка */
#header .main-menu li ul {}    /* вложенный список в пункте списка */
#header .main-menu li li {}    /* выпадающий элемент навигации */
#header .main-menu li li a {}  /* анкор выпадающего элемента */


.current_page_item{}           /* Класс для текущей страницы */
.current-cat{}                 /* Класс для текущей рубрики */
.current-menu-item{}           /* Класс для любого другого текущего пункта меню */
.menu-item-type-taxonomy{}     /* Класс для таксономии */
.menu-item-type-post_type{}    /* Класс для страницы */
.menu-item-type-custom{}       /* Класс для любого пользовательского элемента, который был добавлен */
.menu-item-home{}              /* Класс для элемента, ведущего на главную страницу блога */

Обратите внимание, что каждый раз при создании меню в WordPress оно автоматически оборачивается в контейнер (div). Этот div имеет только имя класса, если вы его указали (мы выбрали “main-menu”). И уже внутри него вы стилизируете остальные элементы списка.

Продолжение статьи
Шпаргалка по стандартным стилям CSS для начинающих. Часть 2
Шпаргалка по стандартным стилям CSS для начинающих. Часть 3

VN:F [1.9.22_1171]

Rating: 3.7/5 (3 votes cast)

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

28.08.2013
Ромчик

Доброго времени суток. В данной статье я хочу поговорить о 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/

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

меню стиля списка wordpress стиль css

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

http://www.circuitosanmartinodellago.com/тест/Индекс.html

css

list

styles

Поделиться

Источник

pette

16 октября 2012 в 16:28

2 ответа

Стиль конкретной статьи wordpress с CSS
Как применить стиль css к статье wordpress, не будучи администратором? Я нашел много информации в google, но ни одна из них не относится к моему делу, потому что: Я не являюсь администратором сайта, поэтому изменение темы, глобальной таблицы стилей или взлом php, чтобы разрешить теги html style ,…
Новая ссылка меню без css стиля
Это веб-сайт wordpress, разработанный третьей стороной, к которому я делаю некоторые поправки. Я пытаюсь добавить новый пункт меню под названием новости & событий, который ссылается на все сообщения, классифицированные с этим именем. Проблема в том, что css не стилизует ссылку в соответствии с…

Поделиться

MikeM

16 октября 2012 в 16:37

Так это используется в wordpress? В этом случае вы можете применить элементы CSS к отдельным пунктам меню, которые по умолчанию генерирует wordpress, что должно решить эту проблему. Просто примените свой собственный стиль к одному элементу навигации, например #menu-item-1.

Поделиться

matt

16 октября 2012 в 19:11

WordPress. Меню навигации. Часть 1 из 2. Категория: Web-разработка • CMS WoprdPress

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

Включаем поддержку произвольных меню

Для начала нужно зарегистрировать возможность использования произвольных меню. Для этого добвляем в файл functions.php вызов функции register_nav_menu() или register_nav_menus().

Функция register_nav_menu()

Регистрирует одно расположение меню, к которому затем в админке прикрепляется меню. Меню выводится в шаблоне функцией wp_nav_menu().

register_nav_menu($location, $description);

$location (строка, обязательный). Идентификатор расположения меню.

$description (строка, обязательный). Описание расположения меню, которое будет показываться в админке.

Функцию принято вызывать во время события after_setup_theme. Чтобы зарегистрировать сразу несколько расположений, можно использовать функцию register_nav_menus().

// пример регистрации двух меню
add_action(
    'after_setup_theme',
    function() {
        register_nav_menu('header_menu', 'Меню в шапке');
        register_nav_menu('footer_menu', 'Меню в подвале');
    }
);

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

add_theme_support('menus');

Функция register_nav_menus()

Регистрирует сразу несколько расположений меню, к которым затем в админке прикрепляются меню. Меню выводятся в шаблоне функцией wp_nav_menu().

register_nav_menus($locations);

$locations (массив, обязательный). Массив с идентификаторами (ключи массива) и описаниями (значения ключей) каждого создаваемого меню.

Функцию принято вызывать во время события after_setup_theme. Чтобы зарегистрировать только одно расположение, можно использовать функцию register_nav_menu().

// пример регистрации двух меню
add_action(
    'after_setup_theme',
    function() {
        register_nav_menus([
            'header_menu' => 'Меню в шапке',
            'footer_menu' => 'Меню в подвале'
        ]);
    }
);

add_theme_support('menus');

Создаем произвольные меню

После того, как меню зарегистрированы, идем в панель управления и создаем свои меню. Связь между меню и расположением — «один-ко-многим». Т.е. одно меню может быть привязано к нескольким расположениям. Но к одному расположению может быть привязано только одно меню.

Вывод произвольных меню

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

Функция wp_nav_menu()

Выводит произвольное меню, созданное в панели: «Внешний вид • Меню». Какое именно меню навигации выводить, указывается в параметре theme_location или menu.

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

add_theme_support('menus');

Или можно зарегистрировать место для меню, с помощью register_nav_menu(), тогда поддержка меню темой включиться автоматически.

wp_nav_menu([
    'theme_location'  => '',
    'menu'            => '', 
    'container'       => 'div', 
    'container_class' => '', 
    'container_id'    => '',
    'menu_class'      => 'menu', 
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul>%3$s</ul>',
    'depth'           => 0,
    'walker'          => '',
]);

theme_location (строка). Идентификатор расположения меню в шаблоне. По умолчанию пустая строка.

menu (строка). Меню которое нужно вывести. Соответствие: id, slug или название меню. По умолчанию пустая строка.

container (строка/false). Чем оборачивать ul тег. Допустимо: false, div или nav. По умолчанию: 'div'.

container_class (строка). Значение атрибута class у контейнера меню. По умолчанию: 'menu-{slug}-container'.

container_id (строка). Значение атрибута id у контейнера меню. По умолчанию пустая строка.

menu_class (строка). Значение атрибута class у тега ul. По умолчанию: 'menu'.

menu_id (строка). Значение атрибута id у тега ul. По умолчанию: 'menu-{slug}'.

items_wrap (строка). Шаблон обёртки для элементов меню. Шаблон обязательно должен иметь плейсхолдер %3$s, остальное опционально. По умолчанию: '<ul>%3$s</ul>'.

fallback_cb (строка). Функция для обработки вывода, если никакое меню не найдено. Установите пустую строку, чтобы ничего не выводилось, если меню нет. По умолчанию: 'wp_page_menu'.

before (строка). Текст перед тегом <a> в меню. По умолчанию пустая строка.

after (строка). Текст после каждого тега </a> в меню. По умолчанию пустая строка.

link_before (строка). Текст перед анкором каждой ссылки в меню. По умолчанию пустая строка.

link_after (строка). Текст после анкора каждой ссылки в меню. По умолчанию пустая строка.

depth (число). Сколько уровеней вложенности показывать. По умолчанию ноль (все уровни).

item_spacing (строка). Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discard. По умолчанию: preserve.

echo (логическое). Выводить на экран (true) или возвратить для обработки (false). По умолчанию: true.

walker (объект). Объект класса для построения меню. По умолчанию: объект Walker_Nav_Menu().

Чаще всего для указания, какое меню выводить, используют параметр theme_location:

wp_nav_menu([
    'theme_location'  => 'header_menu'
]);

Но можно использовать и параметр menu:

wp_nav_menu([
    'menu'  => 'Главное меню'
]);

Результат будет одинаковый:

<div>
    <ul>
        <li>
            <a href="http://www.server.com/about-author/">Об авторе блога</a>
        </li>
        <li>
            <a href="http://www.server.com/feedback/">Обратная связь</a>
        </li>
        <li>
            <a href="http://www.server.com/test-page/">Тестовая страница</a>
        </li>
        <li>
            <a href="https://wp-kama.ru/">Сайт WP-KAMA</a>
        </li>
    </ul>
</div>

Пример создания меню

Допустим, при верстке шаблона был использован фреймворк Bootstrap 4. Чтобы не создавать стили для меню с нуля, нам нужно использовать свой шаблон, с классами bootstrap. Который выглядит так:

<nav>
    <a href="#">Главная</a>
    <button
            type="button"
            data-toggle="collapse"
            data-target="#main-menu"
            aria-controls="main-menu"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span></span>
    </button>
    <div>
        <ul>
            <li> <!-- текущая страница -->
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

Для начала просто вставим вызов функции и посмотрим, что получилось:

<nav>
    <a href="<?= home_url(); ?>">Главная</a>
    <button
            type="button"
            data-toggle="collapse"
            data-target="#main-menu"
            aria-controls="main-menu"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span></span>
    </button>
    <?php
    wp_nav_menu([
        'theme_location'  => 'header_menu',
        'container'       => 'div',
        'container_class' => 'collapse navbar-collapse',
        'container_id'    => 'main-menu',
        'menu_class'      => 'navbar-nav mr-auto',
        'menu_id'         => 'main-menu-ul',
    ]);
    ?>
</nav>

<nav>
    <a href="http://www.server.com">Главная</a>
    <button
            type="button"
            data-toggle="collapse"
            data-target="#main-menu"
            aria-controls="main-menu"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span></span>
    </button>
    <div>
        <ul>
            <li>
                <a href="http://www.server.com/about-author/">Об авторе блога</a>
            </li>
            <li>
                <a href="http://www.server.com/feedback/">Обратная связь</a>
            </li>
            <li>
                <a href="http://www.server.com/test-page/">Тестовая страница</a>
            </li>
            <li>
                <a href="https://wp-kama.ru/">Сайт WP-KAMA</a>
            </li>
        </ul>
    </div>
</nav>

Не хватает класса nav-item для элементов <li> и класса nav-link для элементов <a>. Давайте это исправим.

Класс nav-item для элементов <li> можно добавить в панели управления. Для этого отмечаем checkbox «Классы CSS» в настройках экрана и добавляем для каждого элемента меню класс nav-item:

Но выглядит это не очень красиво — нам нужен только один CSS-класс, а у нас целых пять. Да и как задать класс active для текущей страницы? Поэтому добавляем в файл functions.php следующий код:

add_filter(
    'nav_menu_css_class',
    function($classes, $item) {
        /*
         * Переменная $classes содержит
         * Array(
         *   [1] => menu-item
         *   [2] => menu-item-type-post_type
         *   [3] => menu-item-object-page
         *   [4] => menu-item-1911
         * )
         */
        // переопределяем переменную $classes
        $classes = [1 => 'nav-item'];
        if ($item->current) {
            // добавляем класс active для текущей страницы
            $classes[2] = 'active';
        }
        return $classes;
    },
    10,
    2
);

Осталось только добавить класс nav-link для элементов <a>:

add_filter(
    'nav_menu_link_attributes',
    function($atts, $item, $args, $depth) {
        // добавляем класс nav-link для элементов <a>
        $atts['class'] = 'nav-link';
        return $atts;
    },
    10,
    4
);

И получаем в результате то, что нам нужно:

<nav>
    <a href="http://www.server.com">Главная</a>
    <button
            type="button"
            data-toggle="collapse"
            data-target="#main-menu"
            aria-controls="main-menu"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span></span>
    </button>
    <div>
        <ul>
            <li>
                <a href="http://www.server.com/about-author/">Об авторе блога</a>
           </li>
            <li>
                <a href="http://www.server.com/feedback/">Обратная связь</a>
            </li>
            <li>
                <a href="http://www.server.com/test-page/">Тестовая страница</a>
            </li>
            <li>
                <a href="https://wp-kama.ru/">Сайт WP-KAMA</a>
            </li>
        </ul>
    </div>
</nav>

Поиск:
CMS • Web-разработка • WordPress • Меню • Навигация • register_nav_menu • register_nav_menus • add_theme_support • wp_nav_menu • Bootstrap

Как активировать дополнительные свойства для меню

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

В правом верхнем углу админки найдите пункт «Настройки экрана» и щёлкните по нему:

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

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

Блоки

Первый ряд настроек откроет дополнительные блоки для выбора типов материалов и таксономий, которые вы можете добавить в ваше меню:

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

Расширенные свойства меню

Во втором ряду открываются дополнительные свойства для каждого отдельного пункта меню, например: указание атрибута title, задание классов CSS для ссылок, использование атрибута rel для «nofollow» или же можете указать атрибут target.

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

Свойство «Атрибут Title»

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

Свойство «Открывать в новом окне»

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

Для тех, кто знаком с HTML, поясню: данная опция добавляет атрибут target="_blank" для текущего пункта меню.

Примечание

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

Свойство «Классы CSS»

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

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

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

Как добавить rel=nofollow к ссылкам в меню

Данный атрибут очень часто используется при создании ссылок на сторонние сайты, когда не нужно передавать «вес» текущей страницы на другой сайт, активно используется для SEO (поискового продвижения).

Так вот, если вам ваш специалист по продвижению говорит, что необходимо добавить атрибут rel="nofollow" для внешних ссылок в меню, то делать это необходимо именно в свойстве «Отношение к ссылке». Указываете в это поле текст «nofollow» и всё будет хорошо! 😉

Свойство «Описание»

На моей практике и встречал только 2 или 3 сайта на WordPress, которые использовали данное свойство. Суть его такова: в оформлении темы задаётся кусок кода, который может дополнительно показать всплывающую или какую-либо другую подсказку, в которой отобразится текст из этого свойства.

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

Заключение

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

И снова повторюсь: не ленитесь прощёлкивать кнопку «Настройки экрана» и в других административных частях вашего WordPress, очень часто там спрятаны полезные настройки, которые не видны невооружённым глазом. Успехов в поисках! 😉

Меню в WordPress. Волкер меню. — WordPressify

Не хотите читать этот длинный текст? Могу предложить мой видеоурок про меню!

Функционал меню появился в версии WordPress 3.0. До этого вывод навигации обычно осуществлялся при помощи функций wp_list_categories() и wp_list_pages(). Конечно, иногда бывает нужно вывести категории сайта в виде меню и ещё чтобы дочерние категории были в виде выпадающих списков, но гораздо удобнее, если каждый элемент меню можно добавить, изменить или удалить по отдельности в админке сайта.

Также в меню WordPress вы можете изменять порядок элементов банальным перетаскиванием.

Давайте подробно рассмотрим весь процесс добавления меню. Для начала переходим в админке во Внешний вид > Меню… У вас нет такого пункта? Окей, значит вашей темой меню не поддерживаются, сейчас мы это исправим, рассмотрим даже два способа.

Способ 1. Включение поддержки меню в теме WordPress

Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.

add_theme_support('menus');

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

Способ 2. Регистрация областей темы

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

Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню тут: Внешний вид > Меню. Допустим мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
И завершающий шаг. В разных частях темы выводим меню, соответствующие разным областям.

Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».

Да, код — в functions.php.

register_nav_menus(
	array(
		'head_menu' => 'Шапка сайта',
		'side_menu' => 'Левый сайдбар'
	)
);

Создание меню

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

Переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.

В итоге у нас получилось вот что:

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

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

Всё получилось? Тогда нажимаем кнопку Сохранить меню.

Вы можете удалить или отредактировать (переместить, переименовать) элемент, нажав на стрелку справа (на скриншоте отмечена красным).

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

CSS-классы для отдельных элементов меню, открытие некоторых ссылок в новой вкладке

Как?

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

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

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

Как добавлять в меню записи, таксономии и произвольные типы постов

На предыдущых скриншотах видно, что по умолчанию в меню можно добавлять только страницы, ссылки и рубрики. А если нам надо добавить запись? Конечно, вы можете добавить её через «ссылки», но тогда, если изменится URL записи, у нас появится ошибка 404.

Решение этой задачи есть и оно очень простое.

Записи и метки

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

Таксономии и типы постов

И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true.

register_taxonomy('mytaxonomy',
		array('post'),
		array(
			...
			'show_in_nav_menus' => true,
			...
		)
);

$args = array(
	...
	'show_in_nav_menus' => true,
	...
);
register_post_type('product',$args);

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

Вывод меню на сайте

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

Пример 1. Используем для вывода ID / ярлык / название меню

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

В итоге имеем:

$args = array(
	'menu'	=> 381
);
wp_nav_menu( $args );

Пример 2. Использование зарегистрированных областей темы для вывода меню

На первый взгляд, этот пример может показаться сложнее, потому что сначала нам требуется зарегистрировать область темы (в этом посту мы уже зарегали две области — head_menu (Шапка сайта) и side_menu (Левый сайдбар), затем, при создании меню, нам надо присвоить его одной из этих областей (мы уже создали с вами меню и присвоили его области head_menu) и только после этого мы можем выводить область с содержащимся в ней меню на сайте.

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

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

$args = array(
	'theme_location' => 'head_menu'
);
wp_nav_menu( $args );

Функция wp_nav_menu() имеет большое количество параметров, все они описаны в документации этой функции.

Вставляем меню в сайдбар (в виде виджета)

Существует ещё и третий способ вывода меню на сайте — в виде виджета. Для этого переходим во Внешний вид > Виджеты, находим виджет «Произвольное меню» и перетаскиваем его в сайдбар. Если по каким-то причинам у вас не получается это сделать, сначала прочитайте пост про сайдбары в WordPress.

Переделываем меню при помощи волкера

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

Для начала нужно создать класс, у меня это True_Walker_Nav_Menu, код которого я вставил в functions.php текущей темы.

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

class True_Walker_Nav_Menu extends Walker_Nav_Menu {
	/*
	 * Позволяет перезаписать <ul>
	 */
	function start_lvl(&$output, $depth) {
	// для WordPress 5.3+
	// function start_lvl( &$output, $depth = 0, $args = NULL ) {
		/*
		 * $depth – уровень вложенности, например 2,3 и т д
		 */ 
		$output .= '<ul>';
	}
	/**
	 * @see Walker::start_el()
	 * @since 3.0.0
	 *
	 * @param string $output
	 * @param object $item Объект элемента меню, подробнее ниже.
	 * @param int $depth Уровень вложенности элемента меню.
	 * @param object $args Параметры функции wp_nav_menu
	 */
	function start_el( &$output, $item, $depth, $args ) {
	// для WordPress 5.3+
	// function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 ) {
		global $wp_query;           
		/*
		 * Некоторые из параметров объекта $item
		 * ID - ID самого элемента меню, а не объекта на который он ссылается
		 * menu_item_parent - ID родительского элемента меню
		 * classes - массив классов элемента меню
		 * post_date - дата добавления
		 * post_modified - дата последнего изменения
		 * post_author - ID пользователя, добавившего этот элемент меню
		 * title - заголовок элемента меню
		 * url - ссылка
		 * attr_title - HTML-атрибут title ссылки
		 * xfn - атрибут rel
		 * target - атрибут target
		 * current - равен 1, если является текущим элементом
		 * current_item_ancestor - равен 1, если текущим (открытым на сайте) является вложенный элемент данного
		 * current_item_parent - равен 1, если текущим (открытым на сайте) является родительский элемент данного
		 * menu_order - порядок в меню
		 * object_id - ID объекта меню
		 * type - тип объекта меню (таксономия, пост, произвольно)
		 * object - какая это таксономия / какой тип поста (page /category / post_tag и т д)
		 * type_label - название данного типа с локализацией (Рубрика, Страница)
		 * post_parent - ID родительского поста / категории
		 * post_title - заголовок, который был у поста, когда он был добавлен в меню
		 * post_name - ярлык, который был у поста при его добавлении в меню
		 */
		$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
 
		/*
		 * Генерируем строку с CSS-классами элемента меню
		 */
		$class_names = $value = '';
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;
 
		// функция join превращает массив в строку
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = '';
 
		/*
		 * Генерируем ID элемента
		 */
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = strlen( $id ) ? '' : '';
 
		/*
		 * Генерируем элемент меню
		 */
		$output .= $indent . '<li' . $id . $value . $class_names .'>';
 
		// атрибуты элемента, title="", rel="", target="" и 
		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
		// ссылка и околоссылочный текст
		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;
 
 		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Если вам нужны ещё параметры объектов $item, смотрите документацию функции wp_get_nav_menu_items(), которая кстати является ещё одним нестандартным способом вывода меню в WordPress.

Окей, класс вставили, второй шаг — добавить параметр walker в функцию wp_nav_menu(). То есть, если у вас уже используется меню на сайте, не нужно менять его код на тот, который указан тут ниже, надо всего лишь добавить туда ещё один параметр.

$args = array(
	'theme_location' => 'head_menu',
	'walker'=> new True_Walker_Nav_Menu() // этот параметр нужно добавить
 
);
wp_nav_menu( $args );

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

Как в WordPress изменить стиль отдельного пункта меню или отдельной рубрики

18 сентября 2014 Алексей Ершов Просмотров: 20 073

Добрый день!

В предыдущей статье я сообщил вам о создании на блоге страницы “Поддержать блог”. После добавления этой страницы в меню появился еще один стандартный пункт такой же как “О сайте”, “Карта сайта” и т.п. Мне захотелось выделить его каким-то другим цветом, чтобы он отличался от других и немного привлекал на себя внимание. =)

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

В WordPress при выводе списка страниц к каждому элементу этого списка добавляются классы page_item и page-item-xxx, где xxx – это номер страницы.

Аналогично и для рубрик: cat-item и cat-item-xxx, где xxx – это номер рубрики.

Например, в мое блоге для пункта “Поддержать блог” был добавлен класс page-item-996.

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

Теперь, если вы будете изменять CSS свойства для класса page_item, то эти изменения затронут все пункты меню, а если вам нужно изменить стиль конкретного пункта, то прописывайте соответствующие свойства для класса page-item-xxx.

В моём случае мне нужно прописать свойства для класса page-item-996.

Открываем файл style.css. Это можно сделать, например, через админку Внешний вид – Редактор – Таблица стилей (style.css). Либо подключиться к серверу через WinSCP и открыть файл /wp-content/themes/название_шаблона/style.css

В конец файла style.css добавляем необходимые нам свойства. Вот что добавил я.

#pagemenu li.page-item-996 a {
color: gold;
}
#pagemenu li.page-item-996:hover a {
color: #0099cc;
}
#pagemenu li.page-item-996.current_page_item a {
color: #0099cc;
}

#pagemenu li.page-item-996 a {

color: gold;

}

#pagemenu li.page-item-996:hover a {

color: #0099cc;

}

#pagemenu li.page-item-996.current_page_item a {

color: #0099cc;

}

Первая конструкция определяет цвет текста ссылки пункта меню страницы 996 как золотой.

#pagemenu – указывает, что все следующее далее будет касаться только блока с id=pagemenu.

li.page-item-996 – сужает действие заданного свойства (цвета) до конкретного элемента списка.

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

Т.е. если вам нужно изменить только цвет, то достаточно добавить:

#pagemenu li.page-item-996 a {
color: gold;
}

#pagemenu li.page-item-996 a {

color: gold;

}

Цвет, естественно, зададите какой нужно вам.

Вторая конструкция, которую я добавил – задает цвет текста при наведении курсора мыши (hover).

Третья конструкция – определяет цвет текста, когда пункт активен (выбран). К активному пункту добавляется класс current_page_item.

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

У меня получилось вот так:

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

Аналогичные изменения, как вы поняли, можно делать и для рубрик, только в этом случае работать с классом cat-item-xxx.

Если что не понятно – спрашивайте.

До новых публикаций!

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Как добавить настраиваемый класс в пункт меню WordPress

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

1. В меню «Внешний вид»> «Меню» щелкните вкладку «Параметры экрана

2.В разделе

Показать дополнительные свойства меню отметьте Классы CSS

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

Классы CSS (необязательно) .

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

Класс будет добавлен к элементу LI (элемент списка), к тому же элементу, к которому прикреплен идентификатор элемента меню. Затем вы можете стилизовать свой элемент следующим образом, где .menu заменяется классом, используемым для вашего меню:

 / * Выберите пункт меню LI * /
.menu li.my-class {
  / * Здесь может идти маржа * /
}
/ * Таргетируем пункт меню Якорь (ссылка) * /
.menu li.my-class> a {
  / * Здесь обычно идут цвета и размеры шрифта * /
}

/ * Выбираем пункт меню LI в UberMenu * /
.ubermenu .ubermenu-item.my-class {

}
/ * Нацельтесь на пункт меню Якорь (ссылка) или диапазон (ссылка отключена) в UberMenu * /
.ubermenu .ubermenu-item.my-class> .ubermenu-target {
  / * Цвета, размеры шрифта, будут здесь * /
}

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

5. Наслаждайтесь еще большим контролем над настройками своего меню!

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

Эта запись была опубликована в How To, WordPress, WordPress Tutorials. Добавьте в закладки постоянную ссылку.

Как создавать кнопки из пунктов меню

Если вы используете Hestia, см. Здесь: Документация Hestia

После этого урока мы сделаем что-то вроде этого:

Добавить «кнопку» в ваше меню довольно просто.Первый шаг — Панель управления WordPress-> Внешний вид-> Меню. Убедитесь, что опция CSS Classes включена, щелкнув « Screen options » в верхней части экрана и затем отметив опцию CSS Classes .

В вашем меню должна появиться новая опция:

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

Теперь перейдите к Внешний вид-> Настроить-> Дополнительный CSS и вставьте следующий CSS:

 .zerif-cus-btn {
    фон: # 0000ff;
    отступ: 0 10 пикселей 0 10 пикселей;
    радиус границы: 5 пикселей;
}

Это превратит пункт меню в кнопку, как на изображении выше. Вы можете изменить цвет, сгенерировав HEX-код для цвета по вашему выбору здесь: http: // www.hexcolortool.com/ и заменив им код в коде, обязательно сохраните изменения в настройщике после вставки кода.

СОВЕТ: Чтобы сделать кнопки «плоскими», удалите строку кода border-radius. Вы можете сделать несколько довольно крутых кнопок, используя различные свойства border-radius, такие как: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right- радиус. Пример:

 .zerif-cus-btn {
фон: # 34d293;
    отступ: 0 10 пикселей 0 10 пикселей;
   граница-нижний-левый-радиус: 5 пикселей;
    граница-верх-правый-радиус: 5 пикселей;
}

Результат:

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

Как упоминалось ранее, вы можете добавить несколько разных классов и изменить их цвета, отредактировав приведенный выше код с именем вашего класса CSS (оставьте «.») И изменив цветовой код HEX:

Вот и все! Готово 🙂

Ресурсы:

Как добавить значки меню в WordPress менее чем за 3 минуты ( Видеоурок )

Дополнительные видеоуроки по WordPress

Как выделить определенный пункт меню?

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

Шаг 1 — На панели инструментов WordPress перейдите в Внешний вид> Меню .
Шаг 2 — Щелкните Параметры экрана и установите флажок CSS-классы .
Шаг 3 — Щелкните по пункту меню, который необходимо выделить.
Шаг 4 — Добавьте класс CSS в пункт меню и сохраните изменения в меню.

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

Ниже CSS создаст простую кнопку из пункта меню:

.выделение меню
{
 фон: # d3d3d3;
 радиус границы: 35 пикселей;
 отступ: 0px 20px;
 высота строки: 50 пикселей! важно;
 маржа: авто;
}

Для приведенного выше CSS выделенное меню будет выглядеть, как показано на снимке экрана ниже —
Ниже CSS добавит выделенную кнопку к пункту меню:

 .menu-выделить {
цвет: #ffffff! important;
фон: прозрачный;
цвет границы: # 1172c4;
стиль границы: сплошной;
ширина границы: 2 пикселя;
радиус границы: 50 пикселей;
отступ: 0px 10px! important;
переход: все 0.2с линейный;
высота строки: 45 пикселей;
}
.menu-выделить {
цвет: # 1172c4! important;
}
.menu-highlight a: hover {
цвет: #ffffff! important;
фон: # 1172c4;
цвет границы: # 1172c4;
}
li.menu-highlight: hover a {
цвет: #ffffff! important;
}
.menu-highlight: active {
радиус границы: 22 пикселя;
}

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

Дополнительные примечания:

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

Назад к основам с WordPress CSS: понимание собственных классов

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

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

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

, нравится вам это или нет), в то время как другие больше под вашим контролем благодаря настраиваемым PHP, WordPress хуки действий и другие приемы, которые вы можете использовать. Хотя это факт, что платформа не налагает большого количества ограничений, вам все же нужно помнить о самых основных чертах, если вы хотите, чтобы ваш контент отображался должным образом.
В этом руководстве мы кратко рассмотрим абсолютный минимальный набор CSS, о котором вам нужно позаботиться при создании сайта WordPress.
Вот что я имею в виду. У всех нас есть любимые структуры HTML и CSS и способы кодирования в целом. Я здесь не для того, чтобы говорить вам, что правильно, а что нет. Вместо этого я хочу перечислить классы, которые WordPress будет выдавать независимо от , что вы можете сделать самостоятельно. Короче говоря, не стесняйтесь использовать любую структуру, которую хотите, когда дело касается строительных лесов вашего сайта. Однако также заботится о классах WordPress по умолчанию, чтобы убедиться, что ваш CSS максимально оптимизирован для WordPress.
Опытный разработчик WordPress может заметить, что WordPress чрезвычайно настраиваемый и можно изменять эти классы по умолчанию, но мы не собираемся здесь вдаваться в подробности.
Намного легче объяснить, что я имею в виду, если мы посмотрим на первый пример — речь идет о самом родном элементе в WordPress:
Будет легче понять, что я имею в виду, когда мы рассмотрим пример, поэтому давайте посмотрим на постоянно популярный виджет.
Виджеты стиля
Трудно представить себе сайт WordPress, который вообще не использует никаких виджетов.С момента своего появления виджеты стали популярными на самых разных сайтах. Их цель, как правило, — отображать вторичный контент рядом с сообщениями и страницами, часто на боковых панелях.
WordPress поставляется с несколькими виджетами прямо из коробки, и многие плагины добавляют свои собственные. На момент написания набор по умолчанию включает: Архивы, Календарь, Категории, Пользовательское меню, Мета, Страницы, Недавние комментарии, Недавние сообщения, RSS, Поиск, Облако тегов, Текст.
Каждый из этих виджетов поставляется со своим собственным диапазоном классов CSS, которые включаются всякий раз, когда используется конкретный виджет.
Классы, которые WordPress назначает всем элементам виджета (независимо от типа виджета):
.widget {} / * класс верхнего уровня для каждого виджета * / .widget-title {} / * обычно во внутреннем элементе заголовка * /
Затем, в зависимости от типа виджета, можно использовать любой из этих классов:
/ * Архив * / .widget_archive {} / * используется рядом с .widget (в том же теге) * / / * Календарь * / .widget_calendar {} / * используется рядом с.виджет (в том же теге) * / #calendar_wrap {} / * в & lt; div & gt; упаковка календаря * / # wp-calendar {} / * в & lt; table & gt; построение календаря * / / * Категории * / .widget_categories {} / * используется рядом с .widget (в том же теге) * / .cat-item {} / * для каждого элемента в & lt; ul & gt; список */ / * Пользовательское меню * / .widget_nav_menu {} / * используется рядом с .widget (в том же теге) * / .пункт меню {} / * Мета * / .widget_meta {} / * используется рядом с.виджет (в том же теге) * / / * Страницы * / .widget_pages {} / * используется рядом с .widget (в том же теге) * / .page_item {} /* Последние комментарии */ .widget_recent_comments {} / * используется рядом с .widget (в том же теге) * / .recentcomments {} / * по каждому элементу в & lt; ul & gt; список */ /* Недавние Посты */ .widget_recent_entries {} / * используется рядом с .widget (в том же теге) * / / * RSS * / .widget_rss {} / * используется рядом с .widget (в том же теге) * / .rsswidget {} / * для каждой RSS-ссылки * / /* Поиск */ .widget_search {} / * используется рядом с .widget (в том же теге) * / .search-form {} / * используется с фактическим тегом & lt; form & gt; элемент * / /* Облако тегов */ .widget_tag_cloud {} / * используется рядом с .widget (в том же теге) * / .tagcloud {} / * на
, обертывающем облако * / / * Текст * / .widget_text {} / * используется рядом с .widget (в том же теге) * / .textwidget {} / * фактическое текстовое содержимое виджета * /
Лучшей отправной точкой здесь было бы сначала стилизовать .widget и убедитесь, что основной блок виджета всегда отображается правильно. Переходим к стилизации отдельных классов по мере необходимости. Так мы всегда это делаем.
Работа с этими параметрами по умолчанию может быть более быстрым способом создания дизайна по сравнению с созданием собственного способа обертывания определенных элементов. В качестве побочного продукта вы также убедитесь, что администратор сайта не увидит ничего странного, если попытается использовать какой-либо из этих собственных виджетов.
Чтобы проверить, как выглядит фактическая структура HTML-документа, я рекомендую вам создать тестовый сайт WordPress с использованием темы по умолчанию, разместить все виджеты на боковой панели и изучить исходный HTML-код.
Стиль

WordPress действительно великодушен, когда дело доходит до добавления различных классов в тег . Все они имеют разные цели и отображаются на разных подстраницах сайта. Это позволяет легко вводить индивидуальный стиль для разных страниц и разных типов страниц. Например: архивы категорий, сообщения и страницы авторов, и это лишь некоторые из них.
Возьмем сверху:
.home {} / * если это домашняя страница * / .page {} / * если это любая страница * / .postid-XX {} / * если это сообщение - XX - это идентификатор сообщения * / .rtl {} / * при работе с содержимым с письмом справа налево * / .blog {} / * если это собственный список блогов * / .archive {} / * если это какая-то страница архива * / .category {} / * если это страница со списком категорий * / .tag {} / * если это страница со списком тегов * / .search .search-results {} / * если это страница результатов поиска * / .author {} / * если это страница авторов * / .author-XX {} / * если это индивидуальный архив автора - XX - ник автора * / .date {} / * если это страница архивов на основе даты * / .error404 {} / * если это страница 404 * /
Вышеприведенный список классов не является полным, но его должно быть достаточно, чтобы вы начали и охватили все основы.
Стилизация постов и страниц
Несмотря на то, что сообщения и страницы имеют разные цели в зависимости от сайта, сам WordPress обращается с ними очень похоже. И сообщения, и страницы хранятся в одной таблице в базе данных, и они также имеют одну и ту же общую структуру, когда дело доходит до их отображения на сайте.
Итак, в зависимости от того, имеете ли вы дело с публикацией или страницей, WordPress назначит следующие классы основному тегу содержимого (который в HTML5 обычно равен
).
.post-XX {} / * идентификатор отображаемого элемента; используется как для сообщений, так и для страниц * / .post {} / * если это сообщение * / .page {} / * если это страница * / .attachment {} / * если это вложение; на большинстве сайтов это не используется * / .sticky {} / * если это прилепленная запись * / .format-YY {} / * присваивается пользовательским типам контента - YY - это имя типа контента, например «audio» * /
Важной частью здесь являются такие классы, как .post-XX и .format-YY . Они позволяют вам вводить индивидуальный стиль для любого сообщения или страницы в базе данных, а также различать различные типы контента, используемые администратором сайта. CSS может многое. Иногда возникает соблазн создать совершенно новые шаблоны, когда вам нужны страницы, которые будут выглядеть по-другому, но это может выйти из-под контроля, поэтому просто не забывайте полагаться на CSS и эти пользовательские классы, когда это возможно.
Меню стилей
WordPress обрабатывает все меню очень просто. Каждое меню отображается в стандартном неупорядоченном списке (
). Единственное, что вы можете сделать, не прибегая к продвинутой фильтрации, — это индивидуально стилизовать эти списки и их элементы.
Когда дело доходит до элементов, охватывающих сам список, они полностью зависят от вас и от того, как вы регистрируете области меню. Поэтому на самом деле здесь нет классов по умолчанию, которые использует WordPress.
Вкратце, вам решать, какую внешнюю структуру вы используете. Затем войдет WordPress и отобразит меню в виде списка внутри этой структуры.
Материалы для укладки
WordPress предоставляет редактор WYSIWYG (TinyMCE), с помощью которого пользователи могут создавать свой контент. Итак, чтобы убедиться, что все оформлено красиво, вам просто нужно позаботиться о каждом классе, который выводит TinyMCE.
Рекомендуемый способ сделать это — начать с создания тестового сообщения и разместить в нем все возможные типы контента.Затем взгляните на исходный HTML-код сообщения и включите эти классы в свой CSS.
Вот небольшая шпаргалка, с которой можно начать:
/ * основные классы, используемые для выравнивания * / .alignnone {} .выровнять по левому краю {} .alignright {} .aligncenter {} img.alignnone {} img.alignleft {} img.alignright {} img.aligncenter {} .wp-caption {} / * img caption * / .gallery {} .gallery-caption {} / * стили для размеров img * / img.полный размер {} img.size-large {} img.size-medium {} img.size-thumbnail {} / * не классы, но определенно то, о чем вы должны позаботиться * / цитата {} код {} pre {} час {} дель {}
Безусловно, самое важное в приведенном выше списке — стили изображений. Как только сайт заработает, администратор будет использовать их на регулярной основе, поэтому вам нужно убедиться, что ваш CSS способен обрабатывать даже самые странные комбинации изображений.
Например, что происходит, когда кто-то кладет два изображения рядом друг с другом, одно .alignleft , а другой .aligncenter ? Что, если рядом есть третье изображение? И так далее.
Всегда начинайте с сброса
Начать работу с CSS со сброса всех тегов по умолчанию — хорошая практика независимо от проекта, над которым вы работаете, и WordPress здесь ничем не отличается.
Например, текущая тема по умолчанию для WordPress — Twenty Fourteen — использует измененную версию таблицы стилей сброса Эрика Мейера.
При работе над собственной таблицей стилей вы также можете начать со сброса Мейера.Но если вам нужен ярлык, просто загрузите любую тему по умолчанию для WordPress на данный момент, получите ее таблицу стилей и скопируйте и вставьте часть сброса в свою. Сброс текущей темы по умолчанию занимает более 400 строк, поэтому создание чего-то подобного самостоятельно наверняка потребует времени.
Вот и все! Список классов CSS, которые помогут вам создать таблицу стилей для темы WordPress. Что вы думаете о том, как WordPress использует CSS? Вы думаете, что, возможно, слишком много раздувания и что все могло бы быть немного более минималистичным? Или этого мало?
Как добавить дополнительный класс в меню WordPress
Иногда нам нужно выделить пункт меню на нашем веб-сайте WordPress, и это довольно сложно сделать.Но это так же просто, как добавить пункт меню в меню WordPress.
WordPress уже предоставляет множество настроек, но мы не знаем об этом. В этом уроке я научу вас не только добавлять класс CSS, но и добавлять другие атрибуты к пункту меню.
Да, есть секретная опция, позволяющая добавлять классы CSS в меню. Чтобы найти его, нам нужно переместить Админ> Внешний вид> Меню Здесь вверху справа вы можете увидеть Параметры экрана. Это секретная кнопка.Когда вы нажимаете на нее, вы обнаруживаете 2 раздела.
Ящики: В этом разделе можно включить / отключить тип элемента меню. Например, вы хотите добавить тег в свое меню, вы можете включить его здесь. Тогда тег будет отображаться в разделе меню.
Показать дополнительные свойства меню: В этом разделе можно добавить некоторые дополнительные функции к пункту меню. Как и в заголовке, новая вкладка и добавление класса CSS.
По умолчанию WordPress не поддерживает такие функции, поэтому мы должны включить обязательные поля.Включить очень просто, достаточно поставить галочку в нужном поле и готово.
Дополнительная литература: Как дублировать страницу в WordPress: Простое руководство
Как только вы отметите CSS Classes в параметрах экрана, он отобразится в настройках пункта меню. В этом можно убедиться, развернув пункт меню.
Теперь добавьте свое имя класса во входные данные класса CSS и обновите меню. Вы можете придать стиль пункту меню с помощью этого класса CSS.
Поскольку есть и другие опции, вы также можете их использовать.Например, если вы хотите открыть меню в новой вкладке, просто отметьте открыть ссылку в новой вкладке .
Аналогично, если вы хотите добавить атрибут заголовка в свое меню, вы можете добавить его в параметр заголовка . Добавленный текст будет отображаться при наведении курсора.
Добавление атрибута title увеличивает удобство использования.
Заключение
В этом руководстве мы узнаем о добавлении класса CSS в пункт меню WordPress. Кроме того, мы можем добавить другие функции, такие как открытая ссылка в новой вкладке, добавление атрибута заголовка и т. Д. С помощью этого метода.Вы также можете воспользоваться видеоуроком, как показано ниже.

Запуск призыва к действию с использованием уникального класса или идентификатора CSS (кнопка и пункт меню WordPress)
Convert Pro позволяет использовать уникальный класс или идентификатор CSS для запуска всплывающего окна / призыва к действию при нажатии кнопки, пункта меню и т. Д. Вам просто нужно добавить уникальное имя класса для вызова action и используйте то же имя, что и пользовательский класс CSS для элемента.
Если вы еще не создали призыв к действию, продолжайте и
Создайте призыв к действию
Создайте свой призыв к действию
Если вы не уверены в описанных выше шагах, вы можете обратиться к статье «Начните с первой статьи с призывом к действию».
Шаг 1 -> Перейдите в настройки конфигурации, затем в раздел запуска и откройте Onclick accordion .
Шаг 2 -> Введите уникальный класс или идентификатор CSS в выделенное ниже поле.
Примечание: Вам необходимо добавить «.» перед именем класса и «#» перед идентификатором. Вы можете добавить несколько имен классов и идентификаторов, разделенных запятыми.
Давайте теперь посмотрим, как мы можем добавить это к
Кнопка
Пункт меню
Добавление класса CSS к кнопке.
В качестве примера мы взяли кнопку Beaver Builder. Вы можете сделать это и с другими конструкторами страниц.
Просто вставьте имя класса, которое вы ввели в Step 3 , как показано ниже.
Добавить пункт меню в ваше меню
Добавьте имя класса в поле CSS Classes соответствующего пункта меню.
Примечание: Если вы не видите поле «Классы CSS», вам нужно будет включить его с помощью параметров экрана в верхней правой части экрана.
Параметры экрана -> Классы CSS
Всплывающие окна появляются всякий раз, когда пользователь нажимает на текст, кнопку или изображение, которое вы используете. Следовательно, вы не можете установить параметры конфигурации, такие как целевые страницы, посетители или даже настройки файлов cookie для всплывающих окон по щелчку.
Если вы планируете собирать данные о потенциальных клиентах с помощью призыва к действию, Convert Pro позволяет управлять ими двумя способами.
Интеграция со сторонним поставщиком услуг электронного маркетинга или CRM
Отправить уведомление подписчику на адрес электронной почты.
Вы готовы к поиску десятков тысяч потенциальных клиентов! 🙂
Нужна помощь? Связаться!
Выделение страницы в меню WordPress • Silo Creativo
$ 89
Все наши премиальные темы в наборе тем
Посмотреть темы
Мы уже говорили о важности облегчения жизни наших посетителей и улучшения пользовательского опыта. Следовательно, если в нашем заголовке или меню навигации есть элемент, по которому мы хотим, чтобы пользователи нажимали, мы будем уделять больше внимания и выделять его, чтобы сделать его более наглядным. Итак, мы добавим классы CSS в элемент меню WordPress.
Чтобы применить стиль или дизайн к определенному пункту меню в WordPress, у нас есть два варианта:
Сначала мы можем использовать расширенных селекторов CSS , выбирая позицию относительно других элементов (первого, четвертого или последнего) с помощью псевдоселекторов: first-child , : last-child или аналогичные. Это требует некоторых навыков и хорошей практики для написания хороших правил CSS.
Второй вариант намного проще, чем использование функциональности WordPress для добавления определенного класса к элементу, который вы хотите выделить.В нашем примере мы воспользуемся демонстрационным сайтом шаблона для блогов Розали и выделим элемент, который будет страницей контактов.
Активация функциональности для добавления классов CSS на страницу меню
Эта функциональность ядра WordPress часто скрыта в нашей панели администрирования, но сделать ее видимой очень просто. Для этого нам нужно получить доступ к нашей панели администрирования (вы знаете, через адрес mywebsite.com/wp-admin/) и, войдя внутрь, перейдите в меню Внешний вид> Меню.
Оттуда вы можете создать собственное меню WordPress . Если у вас есть какие-либо вопросы о том, как создать его или добавить элемент без ссылки, я рекомендую вам взглянуть на это руководство по меню в WordPress. Отсюда у вас также есть доступ к настройкам социальных меню, как в случае с Розали, шаблоном, который мы используем в качестве примера.
После того, как вы создали свое меню, вы щелкните «Параметры экрана», расположенный на вкладке в правом верхнем углу.
Появится меню с различными опциями и флажками.Только с этим отображением мы активируем эту функцию, но даже если она не включена, она все равно будет работать, поэтому эти селекторы предназначены только для отображения или не отображения этих параметров.
Что нас интересует, так это опция «Классы CSS», позволяющая добавить к каждому из наших пунктов меню отдельный класс, а дать уникальный стиль каждой странице или ссылке. Выберите его, чтобы активировать.
После активации вы можете найти на этой странице предмет, которому хотите придать уникальный стиль. Когда вы его найдете, вы щелкаете по нему и видите, как отображается новое изображение под названием «Классы CSS (необязательно)».Это тот, который вы будете использовать.
классов CSS, которые мы хотим добавить, должны идти вперед без точки после использования для их выбора, и если мы хотим добавить несколько, мы всегда должны оставлять между ними пробел. Чтобы узнать больше о , как правильно назвать класс в CSS , вы можете прочитать эту статью.
В этом примере мы ввели класс «highlight-menu» для «Contact», то есть страницы, которую мы хотим выделить. Нам нужно только сохранить его в правом нижнем углу, и наш класс будет опубликован.
Стиль к классу CSS добавлен в меню
Теперь начинается самое интересное: стилизация нашего предмета. Поскольку мы хотим, чтобы это был яркий элемент, приглашающий посетителей щелкнуть ссылку, мы решили применить зеленый фон и белый цвет шрифта. Для этого мы зададим стиль этому элементу с помощью следующего CSS. Вот правильный выбор о том, как добавить CSS в WordPress:
.destacado-menu> a { цвет фона: # 8bc34a; цвет: #fff; }
Если мы проанализируем приведенный выше случай, меню WordPress представляет собой элемент неупорядоченного списка в HTML, и если вы немного изучите код, вы увидите, как класс HTML добавляется к элементу li, поэтому, если вы хотите стилизовать ссылку , вы должны выбрать ссылку, которая находится на одном уровне иерархии.Если приведенный выше код не работает, может быть, что таблица стилей вашей темы использует более полный селектор. Для этого у вас есть два варианта:
Используйте более полный селектор:

#page .