WordPress Shortcodes – ползи и създаване

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) е параметър, който трябва да предоставиш. Не го ли направиш няма да получиш видео, а само празна кутия с грешка в нея (по всяка вероятност).

Обръщам внимание на синтаксиса – всяка фиксирана част от кода е между единични кавички. Всяка добавка става чрез интервал и точка и пак интервал. Добавяш или параметъра или друга фиксирана част от кода и пак изписваш интервал, точка интервал.

Употребата на този кратък код е [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. Ако имаш въпроси или предложения, не се колебай да ги отправиш в коментарите по-долу.

До нови срещи!

1
Публикувайте Вашия коментар:

avatar
най-нови най-стари
SEO Affiliate Program
Гост
SEO Affiliate Program

Awesome post! Keep up the great work! 🙂