Учебники

Добавьте классный шорткод кнопки CSS3 в WordPress

Добавьте классный шорткод кнопки CSS3 в WordPress

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

Я подумал, что было бы здорово добавить какую-то кнопку на мой сайт при предоставлении ссылок на бесплатные файлы или другие сайты (конечно, с использованием шорткодов), поэтому после добавления шорткода в мою тему я решил, что поделюсь кодом здесь на blog, чтобы другие люди, заинтересованные в добавлении шорткодов кнопок на свой сайт, могли просто скопировать и вставить мой код в свою тему и не тратить слишком много времени на создание шорткода и стилизацию кнопки.

Что такое шорткоды?

Шорткоды были представлены еще в WordPress 2.5, и они позволяют создавать макрокоды для использования в контенте публикации. Простой шорткод будет выглядеть примерно так:

[shortcode]

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

Добавление пользовательского шорткода «кнопки»

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

function myprefix_button_shortcode( $atts, $content = null) { // Extract shortcode attributes extract( shortcode_atts( array( 'url' => '', 'title' => '', 'target' => '', 'text' => '', 'color' => 'green', ), $atts) ); // Use text value for items without content $content = $text? $text: $content; // Return button with link if ($url) { $link_attr = array( 'href' => esc_url( $url ), 'title' => esc_attr( $title ), 'target' => ('blank' == $target )? '_blank': '', 'class' => 'myprefix-button color-'. esc_attr( $color ), ); $link_attrs_str = ''; foreach ($link_attr as $key => $val) { if ($val) { $link_attrs_str .= ' '. $key. '="'. $val. '"'; } } return '<a'. $link_attrs_str. '><span>'. do_shortcode( $content ). '</span></a>'; } // No link defined so return button as a span else { return '<span class="myprefix-button"><span>'. do_shortcode( $content ). '</span></span>'; } } add_shortcode( 'button', 'myprefix_button_shortcode' );

Использование шорткода в редакторе сообщений

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

// Example usage 1 [button href="YOUR LINK" target="self"]Button Text[/button] // Example usage 2 [button href="YOUR LINK" target="self" text="Button Text"]

Стилизация кнопки

Какой смысл создавать шорткод, если он будет выглядеть как обычная ссылка? Ничего. Вот почему я покажу вам, как добавить классный 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; }

Добавьте классный шорткод кнопки CSS3 в WordPress

Поддержка нескольких цветов

Если вы заметили, что у шорткода есть параметр цвета, который вы можете использовать для добавления стилей 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 }

Теперь просто используйте параметр цвета в шорткоде:

[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]

Добавьте классный шорткод кнопки CSS3 в WordPress

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Как отображать похожие сообщения по категориям в WordPress

Учебники

Как получить отличный поиск для вашего блога WordPress

Учебники

Как начать успешный блог о еде с WordPress

Учебники

Как вручную загрузить шрифты Google в WordPress

Добавить комментарий

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