Як додати класний короткий код кнопки CSS3 в WordPress

Якщо ви не є великим прихильником роботи з редактором HTML в WordPress або хочете надати кілька цікавих удосконалень для ваших преміальних тем, шорт-коди – це чудове рішення для розширення можливостей вашого редактора пошти, зберігаючи при цьому прості речі.


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

Що таке шорт-коди?

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

[короткий код]

Що додається до редактора публікацій, поверне значення короткого коду, як визначено у ваших файлах тем. Я покажу вам, як створити короткий код, який дозволить вам легко додавати кнопки до редактора публікацій, не торкаючись жодного коду.

Додавання користувацького “кнопки” короткого коду

Перше, що вам потрібно зробити – це додати до своєї теми PHP-код свого короткого коду. Наступний код можна використовувати для додавання простої кнопки на ваш сайт. Цей код можна розмістити у файлі function.php. Якщо ви використовуєте сторонню тему, найкраще це зробити через тему для дитини WordPress.

функція myprefix_button_shortcode ($ atts, $ content = null) {

// Витяг атрибутів короткого коду
витяг (shortcode_atts (масив (
'url' => '',
'title' => '',
'target' => '',
'текст' => '',
'color' => 'зелений',
), $ atts));

// Використовувати текстове значення для елементів без вмісту
$ content = $ текст? $ текст: $ вміст;

// Кнопка повернення із посиланням
якщо ($ url) {

$ link_attr = масив (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'myprefix color-'. esc_attr ($ колір),
);

$ link_attrs_str = '';

foreach ($ link_attr як $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ ключ. '= "'. $ val. '"';

}

}


повернути ''. do_shortcode ($ вміст). '';

}

// Не визначено посилання, тому кнопка повернення як проміжок часу
ще {

повернути ''. do_shortcode ($ вміст). '';

}

}
add_shortcode ('кнопка', 'myprefix_button_shortcode');

Використання короткого коду у вашому редакторі публікацій

Тепер, коли у вас є короткий код, ви можете додати нову “кнопку” (яка виглядає як звичайне посилання зараз, оскільки ми не створили її) до свого редактора публікацій.

// Приклад використання 1
Текст кнопки [/ button] // Приклад використання 2 [кнопка href = "ВАША ПОСИЛАННЯ" target = "self" text = "Текст кнопки"]

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

Який сенс створювати короткий код, якщо він просто буде схожий на звичайне посилання? Нічого. Ось чому я покажу вам, як додати кілька класних CSS3, щоб стилізувати кнопку завантаження та зробити її сексуальною.

Як ви помітили в шорт-коді, я додав клас “myprefix-button”, щоб ви могли легко стилювати його через файл style.css. Вставте наступний код у свою таблицю стилів, щоб вийшла синя блакитна кнопка на зразок тієї на зображенні.

/ * Основний стиль кнопки * /
.кнопка myprefix {background: # 65A343; текст-тінь: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; межа-радіус: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-тінь: 1px 2px 1px rgba (0, 0, 0, 0,1); поле-тінь: 1px 2px 1px rgba (0, 0, 0, 0,1); курсор: вказівник; дисплей: вбудований блок; переповнення: приховано; підкладка: 1px; вертикально-вирівняти: середній; }

.проміжок кнопки myprefix {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -моз-границя-радіус: 5px; межа-радіус: 5px; колір: #fff; дисплей: блок; шрифт: жирний шрифт; розмір шрифту: 1em; підкладка: 6px 12px; текст-тінь: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Наведіть курсор * /
.кнопка myprefix-кнопка: наведіть курсор {background: # 558938; оформлення тексту: немає; }

/ * Активний * /
.myprefix-button: active {фон: # 446F2D; }

Зелена кнопка короткого коду

Підтримка декількох кольорів

Якщо ви помітили, що у короткого коду є параметр кольору, який можна використовувати для додавання CSS-стилів для різних кольорів кнопок. Наприклад, якщо ви можете додати варіант синього кольору, додавши цей додатковий CSS:

/ * Синя кнопка * /
.myprefix-button.color-blue {фон: # 2981e4}

/ * Наведення синьої кнопки * /
.myprefix-button.color-blue: наведіть курсор {background: # 2575cf}

/ * Синя кнопка активна * /
.myprefix-button.color-blue: активний {фон: # 0760AD}

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

[кнопка href = "ВАША ПОСИЛАННЯ" target = "self" color = "blue"] Текст кнопки [/ button]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map