WordPress има едно скрито оръжие! Това са неговите кратки кодове известни още като WordPress Shortcodes. Чрез тях можеш да генерираш и поставиш съдържание навсякъде – абсолютно навсякъде в твоя сайт. Разбира се във времената на новия редактор Gutenberg има и други доста добри инструменти – като например custom blocks. Въпреки това обаче поне за мен кратките кодове си остават безспорния лидер.
Остани с мен до края на тази статия и ще получиш следната информация за тях:
- Какво представляват;
- Примери за честа употреба на кратки кодове;
- Проблемите със shortcodes;
- Как да създадеш свои custom shortcodes – ще получиш два начина за тази цел;
Нека да не губим повече време, ок?
Какво представляват WordPress Shortcodes?
Това е код, който се асоциира с дадено съдържание. Примерно конкретен текст с конкретно оформление се свързва с определен shortcode. Поставянето на въпросния кратък код в сайта (примерно в статия) ще добави и текста към нея. Ти като автор ще виждаш краткия код в редактора на WordPress, но посетителите ще виждат съдържанието, свързано с него.
Звучи сложно и объркващо? Нека да ти дам няколко примери за WordPress Shortcodes:
Вариант 1: Обикновен кратък код
[example_code1]
Най-простият пример за shortcode. На мястото на текста в скобите е реалното наименование на кода. Ако го свържем с някакво съдържание и поставим този код в сайта, ще получим съдържанието. Да, толкова е просто! И повечето кратки кодове, които се използват от различни плъгини за WordPress са точно от този тип. Това означава, че ако вече си имал досег с конкретен shortcode или тепърва ще имаш – то най-вероятно ще е обикновен.
Вариант 2: Кратък код с параметри в него
[example_code2 parameter1 parameter2]
Принципа на действие е същия – имаш името на кода и няколко параметъра. Параметрите в повечето случаи са двойки от име и стойност. Тоест, ако имаш параметър id, употребата му в такъв shortcode е следната [example_code2 id=“XYZ“]. Където XYZ е стойността на конкретния параметър. Тези WordPress Shortcodes се използват за динамично съдържание – тоест съдържание, което работи по сходен начин, но част от него (параметъра) го променя за конкретна нужда. Примерно URL адрес или някакъв стил за форматиране на текст.
Вариант 3: Отварящ и затварящ кратък код, който огражда съдържание
[example_code3] Съдържание [/example_code3]
Идеята на тези WordPress Shortcodes е да приложат промени около ограденото съдържание. Те могат да му повлияят откъм форматиране и ефекти, но могат и да добавят съдържание към него. Тези кодове отново могат да използват параметри. В случая те се поставят в отварящата част.
Кратките кодове в WordPress могат да бъдат изключително мощни! Те могат да имат и стойност по подразбиране, която да се промени с параметър. Възможно е да използваш кратък код в краткия код. А употребата им може да бъде наистина универсална – от статия и страница, през widget, до файл на темата, която използваш!
Кога WordPress Shortcodes могат да представляват проблем?
Ще бъда прям – докато имаш нещо на сайта ти, което осъществява връзката кратък код и свързано с него съдържание, всичко ще бъде наред. Това нещо може да е конкретен плъгин с неговите shortcodes, кратки кодове от темата ти или свои собствени custom shortcodes (след малко ще видиш как да си направиш такива).
В момента, в който WordPress не разпознава кратките кодове като такива, ще имаш проблем! По-горе в статията ти дадох примери за shortcodes. Ако те бяха реални такива, ти никога нямаше да видиш примерите ми, а съдържанието, което стои зад тях. Нека сега за миг предположим, че си си създал няколко кратки кодове и ги използваш за изграждане на конкретна страница. А сега да предположим, че WordPress вече не ги разпознава като такива. Ще получиш това, което е известно като Shortcode Hell! Една страница пълна с неизползваеми кратки кодове. Това е проблем на някои Pagebuilders (плъгини, за лесно изграждане на WordPress сайтове). В мига, в който разкараш някой от тях и получаваш купчина кратки кодове.
Затова моят съвет към теб е да ги използваш умерено и винаги да си сигурен, че разполагаш с актуални shortcodes. Едва тогава те ще ти бъдат от полза.
Как да създам мои собствени custom WordPress Shortcodes?
Имаш две възможности – чрез плъгин или чрез писане на код към твоята тема.
Нека да започнем с варианта чрез плъгин:
Препоръчвам да си инсталираш Shortcoder. А как да го използваш можеш да видиш във видео урок №49.
А ако искам да си напиша сам свои custom shortcodes?
Тогава се нуждаеш от достъп до файловете на твоята тема. По-конкретно говорим за файла functions.php. Горещо препоръчвам да редактираш неговата версия за дъщерната ти тема. Ако нямаш такава – създай си (научи повече от тук).
Сега ще ти дам примерен код за трите типа кратки кодове, които представих по-горе. Ще предложа и вариант за кратък код със стойност по подразбиране, която може да се промени с параметър. Под всеки примерен код ще има кратки пояснения.
Започвам с обикновен кратък код:
function create_test_sc() {
return '<p>Test shortcode entered!</p>';
}
add_shortcode ("scTest", "create_test_sc");
Първата част създава функция, която се казва create_test_sc. Можеш да промениш името ѝ, както желаеш. Тук няма параметри към краткия код. Неговата единствена роля е да създаде параграф с текст „Test shortcode entered!“. Накрая се свързва функцията с име на кратък код и така получаваш кратък код [scTest]. Както името на функцията, така и името на кода могат да бъдат преименувани от теб по желан начин. 🙂
Вариант с параметри:
function embed_video($atts) {
$id = $atts['id'];
return '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . $id . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}
add_shortcode ("manualScVideo", "embed_video");
Отново имаш функция, която можеш да преименуваш. Тук обаче се създава масив от атрибути (параметри) за краткия код. Има един атрибут, който тази функция ще приеме и това е „id“. Можеш да промениш и името на атрибута, както желаеш. След това функцията вмъква код за вграждане на YouTube клип, но неговия URL (id) е параметър, който трябва да предоставиш. Не го ли направиш няма да получиш видео, а само празна кутия с грешка в нея (по всяка вероятност).
Обръщам внимание на синтаксиса – всяка фиксирана част от кода е между единични кавички. Всяка добавка става чрез интервал и точка и пак интервал. Добавяш или параметъра или друга фиксирана част от кода и пак изписваш интервал, точка интервал.
Warning!
Употребата на този кратък код е [manualScVideo id=“XYZ“], като можеш да преименуваш краткия код, както намериш за добре.
Следва сложен пример за ограждащ shortcode с параметри и вмъкнат в него друг кратък код:
function create_advanced_shortcode($atts, $content="null") {
$shortCOne = do_shortcode('[sc name="test1" ]');
$color = $atts['color'];
return '<p>Next is the shortcode entered as parameter: </p>' . '<p style="color: red;">' . $shortCOne . '</p>' . '<p>Here it ends!</p>' . $content . '<p style="color: green;">Here comes additional content! And our color parameter is: </p>' . '<p style="color:' . $color . ';">' . $color . '</p>';
}
add_shortcode ("advancedSc", "create_advanced_shortcode");
Отново имаме функция, която можеш да кръстиш както искаш. Отново имаме атрибути. Новото в случая е content при функцията. Стойност null означава, че на мястото на тази променлива в return частта ще е съдържанието, която ще оградим с въпросния shortcode.
След това имаме 2 променливи, които можеш да преименуваш. Първата shortCOne е фиксирана и тя получава стойността на вече създаден кратък код (примера за него е даден във видео урок №49).
Втората приема стойност от теб и е динамична. В случая тази стойност е име на цвят и този цвят ще се приложи като стил за част от краткия код и отделно ще изпише и текста с цвета на английски език. Примерно текст green в зелен цвят.
Следва return частта с познатия ни синтаксис, който напомням е важно да спазваш. Има няколко фиксирани параграфи, съдържание за ограждане и накрая динамично съдържание с цвета.
Употребата на този кратък код (който можеш да преименуваш) е следната: [advancedSc color=“green’] Примерен текст или съдържание [/advancedSc]
А сега вариант със стойност по подразбиране, която даден параметър може да промени:
function dynamic_image_size( $atts = '' ) {
$value = shortcode_atts( array(
'width' => 300,
'height' => 250,
), $atts );
return '<img src="https://url-na-izobrajenie/'. $value['width'] . 'x'. $value['height'] . '" />';
}
add_shortcode( 'imgSize', 'dynamic_image_size' );
Какво имаме тук – празен масив, който приема 2 стойности по подразбиране за широчина и височина на изображение. На мястото на url-na-izobrajenie трябва да поставиш адреса на картинката. Ако след това използваш краткия код без параметри, тоест [imgSize] то размерите по подразбиране ще се приложат за картинката. Ако обаче предоставиш параметри [imgSize width=“1024″ height=“768″] тогава размерите на изображението ще са (в случая) широчина 1024 пиксела на височина 768 пиксела.
С това мисля, че изчерпах темата за кратките кодове в WordPress. Ако имаш въпроси или предложения, не се колебай да ги отправиш в коментарите по-долу.
До нови срещи!
Awesome post! Keep up the great work! 🙂