Искате ли да научите как да създадете кратък код в WordPress?
Научаването как да създавате кратък код в WordPress може да бъде ефективен начин за персонализиране на вашите публикации и страници. Въпреки това, ако сте нов в процеса, може да ви е трудно да разберете как да използвате такава функция на вашия уебсайт.
Ето защо сме съставили ръководство, което да ви помогне да започнете. Като разгледате как работят късите кодове и как да ги прилагате ефективно, можете да започнете да персонализирате съдържанието си по ваш вкус без нужда от допълнителни плъгини.
В тази статия ще обсъдим какво представляват късите кодове на WordPress и защо бихте могли да обмислите използването им. След това ще ви покажем как да създадете свой собствен.
Но преди, ако никога не сте инсталирали WordPress открийте Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог
След това обратно към защо сме тук.
Какво представляват късите кодове на WordPress?
Кратките кодове на WordPress действат като преки пътища, които ви позволяват бързо да вграждате елементи в публикация или страница. Обикновено това са един ред код, затворен в квадратни скоби. Например :
[exemplecodehortcode]Този код ще покаже предварително определена функция в предния край на вашия уебсайт.
WordPress за първи път въведени къси кодове с освобождаването на API за кратък код. Това улеснява потребителите да добавят атрактивни елементи към своите публикации и страници, като напр Google Maps или бутона "Харесвам" във Facebook.
Съществува в WordPress по подразбиранеt шест къси кода :
- надпис: Обвийте надписи около съдържанието
- галерия : показва галерии с изображения
- Звук: вгражда и възпроизвежда аудио файлове
- видео : вгражда и възпроизвежда видео файлове
- плейлиста : показва колекция от аудио или видео файлове
- Закрепвам : обвива вградени елементи
Ще срещнете и два основни типа форматиране на къси кодове: self-closing et enclosing.
Кратки кодове self-closing могат да стоят самостоятелно и не се нуждаят от затварящ етикет.
В същото време, enclosing обградете съдържанието, което искате да редактирате, и ви принуди да затворите етикета ръчно. Например, можете да вградите видеоклип в YouTube, като увиете URL адреса между етикетите embed et /embed :
Например, това ще създаде следния резултат:
Някои от най-добрите WordPress плъгини идват със собствени кратки кодове. Например, WP форми et Форма за обратна връзка 7 имат кратки кодове, които ви позволяват бързо да вградите a Формуляр за връзка в публикация или страница. Можете също да използвате плъгин като MaxButtons за да добавите кратък код на бутон, където искате на вашия уебсайт.
Защо трябва да обмислите използването на кратки кодове на WordPress?
Има много причини, поради които можете да използвате кратки кодове на WordPress. Например, това е по-лесно и по-бързо от изучаването и писането на дълъг код в HTML. Освен това те ви помагат да поддържате съдържанието си чисто и достъпно.
Кратките кодове могат да се използват за автоматизиране на определени функции, които използвате многократно. Например, ако използвате бутон призив за действие (CTA) за всяка ваша статия, подготвянето на специален кратък код може да бъде бързо и удобно решение.
Трябва да се спомене, че Редактор на Гутенберг работи по същия начин, разчитайки на използването на къси кодове. Той позволява на потребителите на WordPress да добавят няколко интерактивни функции чрез използването на блокове.
Такъв метод е много по-удобен за начинаещи, защото можете да добавяте съдържание направо в потребителския интерфейс. Въпреки това, редакторът на блокове на WordPress все още е ограничен в това, което предлага. За щастие идва с блокче Кратък, което ви позволява да добавяте персонализирано съдържание към вашите страници.
Как да създадете кратък код в WordPress
Ако вече имате познания за кодиране, можете да създадете свои собствени персонализирани кратки кодове. Това ви дава пълен контрол върху външния вид и функционалността на вашия уебсайт.
Нека да видим как да създадем персонализиран кратък код на WordPress. В този урок ще добавим връзки към социални медии към статия като пример.
Стъпка 1 – Създайте нов файл с тема
Преди да започнете, добре е да напълно архивирайте вашия уебсайт WordPress. Освен това ще трябва да създадете отделен файл за вашия персонализиран кратък код извън файла functions.php вашият WordPress тема. Това ще осигури резервно решение, в случай че нещо се обърка.
Можете да използвате клиент FTP (Протокол за прехвърляне на файлове) като FileZilla за достъп до файловете с теми на вашия уебсайт. След като влезете в уебсайта си, отидете на wp-content> теми и намерете текущата си папка с теми. В нашия пример това ще бъде сова преса:
Отворете вашата папка WordPress тема, щракнете с десния бутон върху него и натиснете Създайте нов файл.
Дайте име на новия си файл custom-shortcodes.php след това щракнете върху OK. След това можете да го редактирате, като щракнете с десния бутон върху него и изберете опцията Преглед/Редактиране :
Това ще отвори файла във вашия текстов редактор по подразбиране. След това просто трябва да добавите следния блок код:
<?php ?>
Това гарантира, че вашият нов файл ще бъде интерпретиран като PHP, който е скриптовият език, върху който е изграден WordPress.
След това можете да запазите промените си и да затворите файла. Не забравяйте да поставите отметка в следното квадратче, за да сте сигурни, че ще бъде актуализирано на сървъра и ще бъде приложено към вашия уебсайт:
След това отворете файла functions.php в същата папка с тема и добавете следния ред код в долната част на документа:
include('shortcodes-personnalises.php');
Това ще каже на системата да включи всички промени, които правите във файла custom-shortcodes.php в functions.php като същевременно ви позволява да ги разделите. Когато сте готови, запазете промените и затворете файла.
Стъпка 2 - Създайте функцията за кратък код
След това ще трябва да създадете функцията за кратък код, като я инструктирате какво да прави. Изберете опцията отново Преглед/Редактиране на вашия файл custom-shortcodes.php. Използвайте следния кодов фрагмент, за да добавите действие, към което да закачите функцията си:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}След това ще трябва да добавите функция за обратно извикване, която ще се изпълнява, когато действието на куката е активирано. Добавянето на следния ред код директно след споменатия по-горе ще каже на WordPress, че вашата функция е кратък код:
add_shortcode('sabonner', 'subscribe_link');Когато създавате кратък код с помощта на функцията add_shortcode, присвоявате маркер за кратък код “ ($tag) "и съответна функционална кука" ($func) който ще се изпълнява всеки път, когато се използва прекият път.
С други думи, ако краткият код е [subscribe], тогава куката 'subscribe_link' пренасочва посетителя към предоставения URL адрес.
Следователно целият код, който използвате във вашия файл shortcodes-personnalises.php ще изглежда така:
Трябва да се отбележи, че когато наименувате таговете, трябва да използвате само малки букви, въпреки че могат да се използват долни черти. Освен това е от решаващо значение избягвайте използването на тирета, тъй като може да попречи на други къси кодове.
Стъпка 3 – Добавете краткия код за самозатваряне към уебсайта
Вече можете да тествате първоначалния си код като самозатварящ се кратък код на вашия WordPress сайт. С помощта на редактора на блокове на WordPress можете да вмъкнете маркера [абониране] директно в публикацията:
Това ще покаже следното съдържание на посетителите на вашия уебсайт:
Ако сте доволни от този кратък код, не е нужно да правите нищо друго. Въпреки това, ако искате да го персонализирате, можете да преминете към следващата стъпка.
Стъпка 4 - Добавете параметри към краткия код
Можете да адаптирате краткия код "Абонирай се" за допълнителна функционалност за показване на други връзки към социалните медии. Можете да направите това, като добавите параметър за промяна на URL адреса.
Изливам добавете атрибути за управление, трябва да отворите файла custom-shortcodes.php и добавете следния код:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Това ще ви позволи да персонализирате връзките във вашия маркер за кратък код, за да ги добавите към редактора на Gutenberg. Можете да го поставите върху предишния код във файла custom-shortcodes.php. Трябва да изглежда нещо подобно:
Добавяне на функция shortcode_atts(). ще комбинира потребителски атрибути с всички известни атрибути и всички липсващи данни ще бъдат заменени със стойностите им по подразбиране. Когато сте готови, запазете промените и затворете файла.
Стъпка 5 - Тествайте настройките
Вече можете да тествате актуализирания кратък код в редактора на блокове на WordPress. В нашия пример ние тестваме нашите връзки в Twitter и Facebook със следните кратки кодове:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Това ще доведе до следния резултат на предния край:
Този самозатварящ се кратък код показва директните URL адреси на вашите социални профили на посетителите. Въпреки това, може да искате тази функция да изглежда малко излъскана.
Например, ще можете да създадете прикачена версия, която ви позволява напълно да персонализирате текста на котва, който се показва на потребителите, когато те са на път да щракнат върху него. Ще ви покажем как да го направите в следващата стъпка.
Стъпка 6 – Създайте затварящ кратък код
Ограждащият кратък код ще бъде форматиран по същия начин като предишния пример за автоматично затваряне. Той обаче ще включва допълнителен параметър за функцията.
Първо, ще трябва да добавите $content = null, който идентифицира тази функция като затварящ кратък код. След това можете да добавите do_shortcode от WordPress, който ще търси в съдържанието къси кодове.
Във файла custom-shortcodes.php, добавете новия затварящ кратък код:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Когато сте готови, вашият файл custom-shortcodes.php трябва да изглежда така:
Предишният код има атрибут "стил" допълнително, което ще промени текста на котва в син цвят. Не забравяйте да запазите промените си, когато сте готови.
Стъпка 7 – Добавете обхващащ кратък код към уебсайта
Вече можете да вмъкнете своя кратък код в редактора на блокове на WordPress, за да видите крайния резултат:
Както забелязахте, можете лесно да промените URL адресите на страниците си в социалните медии и текста на котва, който се показва на посетителя, като използвате този кратък код за обвивка. В този случай ние сме избрали " фейсбук " et "Туитър" :
Там ! Вече създадохте персонализиран кратък код за връзките за абонамент във вашите страници и публикации. Имайте предвид, че всички стъпки, споменати по-горе, могат да бъдат променени, за да създават всякакви различни елементи с помощта на функцията WordPress Кратките.
Добавянето на допълнителна функционалност към вашия уебсайт на WordPress е много по-лесно с кратки кодове. Можете да ги използвате, за да персонализирате съществуващото си съдържание и да добавите интерактивни функции, като формуляри за контакт, галерии с изображения или връзки за абонамент.
Други препоръчани ресурси
Също така ви каним да се консултирате с ресурсите по-долу, за да отидете по-далеч в управлението на вашия уебсайт и блог.
- Как да създадете плаващ бутон с индекс Z с Elementor
- Кога и как да инсталирате WordPress в поддиректория
- Как да създадете прост Gutenberg Block WordPress Plugin
- Как да добавите персонализирани шрифтове към уебсайт на WordPress
Заключение
В тази статия научихме как да създадете свой собствен кратък код в WordPress. Ако имате някакви притеснения или предложения, моля, уведомете ни в рамките на това Връзка.
Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Междувременно, споделете тази статия във вашите различни социални мрежи.
...