Створіть шорткоди для нашої теми WordPress

Оскільки ми починали з цього проекту, ми завжди хотіли, щоб він мав власний ярлик, і саме тому другий шаблон, який ми використовуємо DesdeLinux, він був створений нами на 100%.

Потім пішли інші версії, і хоча ми можемо купити або найняти певні веб-сервіси для створення наших дизайнів, подібних до StudioDWeb.com, або придбайте шаблони, вже створені в ThemeForest.net, ми завжди хотіли мати власного, адаптованого до наших потреб і зупинятися WebDevelopment.com може допомогти 😀

У будь-якому випадку, я захоплююсь веб-дизайном та розробкою, і я вже працюю над новою темою для DesdeLinux і я покажу вам кілька знімків екрану, як це виглядає.

Ідея полягає не в тому, щоб вийти з того, до чого ми вже пристосовані, тому багато елементів залишаються однаковими або подібним чином. Починаю з домашньої сторінки

І ось як би виглядали статті:

Як бачите, це відповідає нашій мірі, і ми включили нове ShortCodes для опрацювання статей.

Ось чому мені спало на думку поділитися з вами, як створити один з них (інформаційний) на випадок, якщо ви захочете включити їх до своїх тем WordPress. Я маю на увазі щось подібне:

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

Для цього ми використовуємо «швейцарський армійський ніж» Росії WordPress, Я маю на увазі файл function.php що ми зазвичай знаходимо майже у всіх темах.

Ejemplo del Function.php con los ShortCodes de DesdeLinux

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

Усередині Function.php

Усередині нашого файлу function.php ми помістимо структуру HTML ShortCode, але це не просто розміщення тегів HTML просто так. Ми мали б щось подібне:

// Інформаційне поле інформаційної функції ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ вміст; $ return. = ' '; повернути $ повернути; } // Короткий код add_shortcode ('info', 'infobox');

Звідси ми прояснимо кілька речей. По-перше, коли ми використовуємо два стовпчики, ми коментуємо рядок, отже // Інформація це просто коментар.

Ім'я функції, в даному випадку інфобокс Його можна змінити на будь-що, що ми хочемо, але воно повинно відповідати імені, яке ми використовуємо в останньому рядку.

Приклад:

$ return. = $ вміст;

Змінна $ зміст саме там вміст, який ми розміщуємо в ShortCode, за замовчуванням переходить до нульового значення, якщо ми нічого не поміщаємо.

Тепер назва ShortCode - це те, що ми встановили:

add_shortcode( 'info', 'infobox' );

Де ти можеш змінитися інформація для того, що ми хочемо. Тепер, щоб це виглядало як приклад, ми повинні навести:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Хоча, звичайно, без пробілів, які я поставив, оскільки очевидно, що ShortCode буде активовано.

Стиль ShortCode

Якщо подивитися на рядок вище, без коду PHP та змінних, ShortCode в чистому HTML буде виглядати приблизно так:

<div class="alert-info"></div>

Отже, нам залишається лише застосувати стиль CSS.

.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; межа-радіус: 4 пікселі; межа: 1px суцільний # bce8f1; колір: # 3a87ad; розмір шрифту: 14 пікселів; поле: 15px 15px; відступ: 15px 15px 15px 50px вирівнювання тексту: ліворуч}

І все .. Повторюю, я не програміст чи щось подібне, і пояснення, яке я дав, полягає в тому, як я розумію, що ShortCode працює 😛