Пропустить

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

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

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

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

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

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

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

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

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

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

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 или использовать одно из множества приложений Online Button Generator. Генератор кнопок 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

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

  • заголовок - это заголовок, который будет отображаться в раскрывающемся меню
  • селектор - «a» относится к якору, указывая, что этот стиль предназначен для ссылок.
  • классы - это имя класса нашей кнопки 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
Регистрация