Диетата за вашия код: Как да поддържате страницата си тънка с WordPress Shortcode

Аудио и видео файлове, галерии, плейлисти, бутони и други елементи на дизайна: с шорткодовете на WordPress и евентуално съответния плъгин можете лесно да интегрирате всичко това във вашата страница - често само с един [шорткод].

Това не само прави вашата страница да изглежда шик, но и вашия код. Очарователното: с късите кодове можете да интегрирате сложни елементи, без да се налага да имате никакви познания по програмиране. В тази публикация ще научите как точно работи съкращението за Lean Code.

И не се притеснявайте: когато работите с къси кодове, разбира се можете да пиете кола и да ядете пица!

За да видите цялата снимка, моля, кликнете върху нея

1. Какво представляват шорткодовете на WordPress?

„Шорткодове“ са кодови съкращения, които представляват по-дълъг код. Благодарение на тях кодът остава чист и ясен, въпреки че включва сложни функции. Подробният код, за който шорткодът е съкращението, е точно дефиниран другаде от тема или приставка. Следователно шорткодът работи като своеобразна връзка към подробния код: WordPress автоматично включва това чрез шорткода, без да се налага да бъде посочен индивидуално в кода на страницата.

Вместо да се налага да вмъквате дълги и подробни раздели на кода в страницата, например за галерия, шорткодът [галерия] е достатъчен. Точният код за галерията е наличен в тема или приставка. За WordPress кратката справка „[галерия]“ е достатъчна, за да извикате подробна информация другаде и да можете да покажете галерия.

Шорткодовете са особено ценни, когато даден елемент - например галерия - трябва да бъде вмъкнат няколко пъти на страница. В тези случаи е достатъчно да изпълните кода в детайли в един момент и да го интегрирате в страниците, на които той трябва да бъде реализиран, с помощта на къс код.

2. Как изглежда шорткод на WordPress?

Кратък код е показан в квадратни скоби в текстовия изглед. В зависимост от шорткода, можете или трябва да дефинирате допълнителни параметри, така че WordPress да може да внедри шорткода.

Да се върнем към примера с галерията. Основният шорткод изглежда така:

WordPress вече знае, че трябва да включва галерия на страницата в подходящия момент. Но това не казва нищо за броя и избора на изображения. Поради тази причина даваме на WordPress повече информация, като добавяме допълнителен атрибут: ИД на изображенията, които ще бъдат включени в галерията (и които по този начин определят и броя на изображенията):

Сега имаме възможност да добавим редица други атрибути, например броя на колоните или размера на изображението:

[колони в галерията = "2" size = "large"]

Точните стойности, които могат да се въведат тук, се регулират отделно за всеки шорткод и тук не могат да се обсъждат отделно. Разпоредбите за краткия код на галерията могат да бъдат намерени в WordPress Codex

Други къси кодове са вградени в кода на WordPress по много подобен начин, като се използват квадратните скоби и евентуално други атрибути.

3. Примери за къси кодове в WordPress

Самият WordPress предлага шест шорткода по подразбиране. Винаги можете да ги използвате - дори ако не използвате никакви специфични приставки за шорткодове. Тези шест шорткода са:

С аудио шорткода можете да вграждате аудио файлове във вашия уеб сайт на WordPress. След това посетителите могат да ги възпроизвеждат с едно щракване. Обикновено включвате името на файла в шорткода - в края на краищата WordPress трябва да знае кой аудио трябва да възпроизвежда изобщо:

Разбира се, важно е съответният аудио файл с това име на файл да се съхранява във вашата медийна библиотека.

Подробна информация за звуковия шорткод можете да намерите тук.

С видео шорткода можете - разбира се, това не е изненадващо - да интегрирате видеоклипове във вашата страница. Както при изображенията, въведете тук името на файла на видео файла. Последните трябва да се намират под носителя във вашата медийна библиотека. Шорткодът изглежда така, например:

Подробното описание на този кратък код в WordPress Codex можете да намерите тук.

Използвайте краткия код на надписа, за да добавите надписи към изображения. WordPress изисква да въведете "width", с който можете да зададете ширината на надписа в пиксели. Можете също да изберете дали надписът да се показва отляво, в средата или отдясно под изображението. Можете също да присвоите идентификатор или клас на надписа, за да промените дизайна с помощта на CSS.
Повече информация за надписите можете да намерите тук.

Вграденият шорткод ви позволява да вградите елементи в WordPress и да им присвоите фиксиран размер. За разлика от другите къси кодове, вграденият шорткод включва отварящ и затварящ елемент, т.е.

където рамкираният елемент е между двата елемента с къс код. След това можете да присвоите атрибутите височина и ширина на отварящия елемент, например

Можете да намерите повече информация за вградения шорткод тук.

С краткия код на галерията можете да интегрирате галерия във вашия WordPress сайт. Можете да намерите по-подробно обяснение в предишния раздел на тази публикация, връзката към официалното описание на шорткода в WordPress Codex тук.

Можете да интегрирате плейлист във вашия сайт на WordPress, като използвате шорткод за аудио и видео файлове. Използвайки различна допълнителна информация, можете да добавите дизайн, тип файл и идентификатори на интегрираните елементи. Шорткодът може да изглежда така в края, например:

[плейлист тип = "аудио" ids = "211,212,213" style = "dark"]

Можете да намерите подробна информация за шорткода на плейлиста в WordPress Codex тук.

4. Как да добавите шорткод към вашия WordPress сайт

Ако искате да вмъкнете къси кодове, първо проверете кой редактор използвате.

Освен ако нямате Версия на WordPress преди WordPress 5.0 или WordPress 5 с приставката за класически редактор влезте във вашия WordPress backkend. Сега кликнете върху Публикации или Страници в лентата с менюта вляво - в зависимост от това дали искате да създадете нова страница или нова публикация в блога. В нашия пример решаваме да редактираме стара публикация в блога.

Вече можете да избирате между два изгледа: визуален и текстов. Изберете текстовия изглед тук. Ще ви бъде показан HTML кодът. Просто поставете съответния шорткод тук.

За да видите цялата снимка, моля, кликнете върху нея

Ако имате Редактор на Гутенберг направи го по различен начин. Създайте нов блок за шорткода. За да направите това, щракнете върху знака плюс вляво от празното поле за блока.

За да видите цялата снимка, моля, кликнете върху нея

Вече можете да избирате елементи от различни категории. Отидете в категорията Widgets.

За да видите цялата снимка, моля, кликнете върху нея

Сега кликнете върху иконата на шорткод.

За да видите цялата снимка, моля, кликнете върху нея

WordPress сега ще създаде блок с шорткод за вас.

За да видите цялата снимка, моля, кликнете върху нея

Въведете избрания от вас шорт код в този блок. Внимание: Дори ако WordPress вече знае, че искате да включите къс код в този блок, пак трябва да използвате квадратните скоби за записа.

За да видите цялата снимка, моля, кликнете върху нея

5. Приставки за шорткод

Ако сами програмирате шорткодове на WordPress, вие сте - както вече показва глаголът „програма“ - вие сте на ниво програмист. С други думи: Вече не работите сами с функциите на WordPress, а бъркате директно с PHP кода.

Ако искате да избегнете това, но не искате да се откажете от използването на конкретни шорткодове, препоръчваме да използвате приставка за шорткод. Те вграждат различни шорткодове във вашата страница, без да се налага да програмирате нищо сами.

На пазара има голям брой такива приставки, от които бихме искали да ви представим три на този етап: