Добавьте классный шорткод кнопки CSS3 в WordPress
Если вы не являетесь большим поклонником работы с редактором HTML в WordPress или хотите предоставить несколько интересных улучшений для ваших премиальных тем, шорткоды – отличное решение для расширения возможностей вашего редактора сообщений, сохраняя при этом простоту.
Я подумал, что было бы здорово добавить какую-то кнопку на мой сайт при предоставлении ссылок на бесплатные файлы или другие сайты (конечно, с использованием шорткодов), поэтому после добавления шорткода в мою тему я решил, что поделюсь кодом здесь на blog, чтобы другие люди, заинтересованные в добавлении шорткодов кнопок на свой сайт, могли просто скопировать и вставить мой код в свою тему и не тратить слишком много времени на создание шорткода и стилизацию кнопки.
Что такое шорткоды?
Шорткоды были представлены еще в WordPress 2.5, и они позволяют создавать макрокоды для использования в контенте публикации. Простой шорткод будет выглядеть примерно так:
[shortcode]Который при добавлении в редактор сообщений вернет значение шорткода, как определено в ваших файлах темы. Я покажу вам, как создать шорткод, который позволит вам легко добавлять кнопки в редактор сообщений, не касаясь кода.
Добавление пользовательского шорткода «кнопки»
Первое, что вам нужно сделать, это добавить php-код для вашего шорткода в вашу тему. Следующий код можно использовать для добавления простой кнопки на ваш сайт. Этот код можно поместить в файл functions.php. Если вы используете стороннюю тему, это лучше всего сделать с помощью дочерней темы WordPress.
Использование шорткода в редакторе сообщений
Теперь, когда у вас есть шорткод, вы можете добавить новую «кнопку» (которая теперь выглядит как обычная ссылка, поскольку мы не использовали ее стили) в свой редактор сообщений.
// Example usage 1
Button Text
// Example usage 2
Стилизация кнопки
Какой смысл создавать шорткод, если он будет выглядеть как обычная ссылка? Ничего. Вот почему я покажу вам, как добавить классный CSS3, чтобы стилизовать кнопку загрузки и сделать ее привлекательной.
Как вы заметили в шорткоде, я добавил класс myprefix-button, чтобы вы могли легко стилизовать его с помощью файла style.css. Вставьте следующий код в свою таблицу стилей, чтобы сделать красивую синюю кнопку, как на изображении.
/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }
.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }
/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }
/* Active */
.myprefix-button:active{ background:#446F2D; }
Поддержка нескольких цветов
Если вы заметили, что у шорткода есть параметр цвета, который вы можете использовать для добавления стилей CSS для разных цветов кнопок. Например, если вы можете добавить вариант синего цвета, добавив этот дополнительный CSS:
/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }
/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }
/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }Теперь просто используйте параметр цвета в шорткоде:
Источник записи: https://www.wpexplorer.com