Пропустить

Как добавить выпадающее меню с CSS в вашем визуальном редакторе

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

Конечный результат.

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

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

How-To-Styles-01

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

How-To-Styles-02

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

Инструкции по технике безопасности.

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

  • fonctions.php
  • style.css

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Добавление в Меню пункта «Стили».

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

Чтобы открыть файл и изменить его, перейдите в меню " apparence "Затем нажмите"ИздательВ подменю. Если у вас английская версия, перейдите на Внешний вид> Редактор

How-To-Styles-03

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

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

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

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

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

Мы хотим Добавьте наши собственные стили в список.

Создайте стили CSS ваших кнопок.

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Теперь мы собираемся создать стили CSS для кнопок. Вы можете создать свой собственный CSS или использовать одно из множества онлайн-приложений-генераторов кнопок. Генератор кнопок CSS - хороший выбор, поэтому посетите сайт и быстро создайте кнопку, а затем скопируйте CSS. Затем перейдите в «Внешний вид», затем в «Редактор» и щелкните файл. style.css в списке файлов с правой стороны. На английском у вас будет Внешний вид> Страница редактора> style.css.

Снова прокрутите файл до конца и вставьте в него CSS с кнопки ниже или используйте свой собственный CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Обновите файл, чтобы сохранить изменения.

Добавить стили в выпадающее меню.

Теперь снова нажмите на файл fonctions.php  и вставьте следующий код внизу файла.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Обратите внимание на эти строки внутри таблицы:

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

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

Вставив в него код, нажмите кнопку обновления, чтобы сохранить изменения. Как только файл будет сохранен, перейдите в редактор сообщений WordPress и обновите окно, чтобы изменения вступили в силу. Затем щелкните раскрывающееся меню «Стили», и вы должны увидеть запись с заголовком «LinkButton».

 

How-To-Styles-05

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

How-To-Styles-06

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

Расширенные возможности

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

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

Ссылки.

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

Заключение.

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

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

Эта статья содержит комментарии 0

Оставить комментарий

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

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

Вверх
11 акции
доля10
чирикать1
Регистрация