Создайте шорткоды для нашей темы WordPress

Начиная с этого проекта, мы всегда хотели, чтобы у него был собственный ярлык, поэтому второй шаблон, который мы используем в DesdeLinux, он был создан нами на 100%.

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

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

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

А вот как будут выглядеть статьи:

Как видите, это соответствует нашим меркам, и мы добавили новые шорткоды для разработки статей.

Вот почему мне пришло в голову поделиться с вами, как создать один из них (информационный) на случай, если вы захотите включить их в свои темы WordPress. То есть примерно так:

Я не являюсь экспертом в программировании на этой CMS, поэтому я не буду пытаться объяснять, почему и как это работает, я только покажу вам, как это сделать, точка.

Для этого мы используем «швейцарский армейский нож» WordPress, Я имею ввиду файл function.php которые мы обычно находим почти во всех темах.

Пример Function.php с короткими кодами DesdeLinux

Что мы сделаем в этом файле, так это добавим структуру нашего ShortCode и, конечно же, метку, которая его показывает. Итак, приступим к делу.

Внутри Function.php

Внутри нашего файла function.php мы поместим HTML-структуру ShortCode, но это не просто поместить HTML-теги просто так. У нас будет что-то вроде этого:

// Информационная функция infobox ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ content; $ return. = ' '; return $ return; } // Короткий код add_shortcode ('info', 'infobox');

Отсюда мы проясняем пару вещей. Во-первых, когда мы используем две полосы, мы закомментируем строку, поэтому // Информация это просто комментарий.

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

пример:

$ return. = $ content;

переменная $ содержание Это то место, куда по умолчанию попадает контент, который мы помещаем в ShortCode, он вернет нулевое значение, если мы ничего не поместим.

Теперь имя ShortCode - это то, что мы установили с помощью:

add_shortcode( 'info', 'infobox' );

Где вы можете изменить info для чего мы хотим. Теперь, чтобы он выглядел как в примере, мы должны поместить:

[ 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 solid # bce8f1; цвет: # 3a87ad; размер шрифта: 14 пикселей; маржа: 15px 15px; padding: 15px 15px 15px 50px text-align: left}

И все ... Я повторяю, я не программист или что-то в этом роде, и объяснение, которое я дал, - это то, как я понимаю, что ShortCode работает 😛