Как легко вставить шорткод в wordpress: в шаблон, в страницу и в виджет

Description

Adds shortcodes to easily create columns in your posts or pages.

Sometimes you just need to divide your page into different columns. With this plugin you just select a column shortcode and it will add the column to the page. You can also change the padding of each individual column from the UI.

There are 10 different column widths available from which you can make all combinations:

• full width (1/1)
• half (1/2)
• one third (1/3)
• two third (2/3)
• one fourth (1/4)
• three fourth (3/4)
• one fifth (1/5)
• two fifth (2/5)
• three fifth (3/5)
• four fifth (4/5)
• one sixth (1/6)
• five sixth (5/6)

A preset stylesheet is included, which you can also overwrite to you liking in your theme’s stylesheet.

Related Links:

Description

Creating an article without giving more information about movies or actors/actresses might show the content simplistic. Therefore shortcode-imdb plugin is created to solve this problem and make richer the articles. Implementing the plugin is very simple. Copy the title or name code from the imdb url and paste between the shortcode tags. No need more effort to carry out. The plugin grabs the data from imdb.com and shows proper way in the article. Further information, visit our demo website.

Disclaimer: This plugin has been coded to automatically quote data from imdb.com. Not available for any other purpose. All showing data have a link to imdb.com. The user is responsible for any other use or change the code.

USAGE

Plugin now works with the cURL feature. If you have problems, activate the cURL feature on your server.
Implementing the plugin in your articles is very simple.
Copy the imdb title or name number from the url and paste between the shortcode tags. The following examples illustrates how you can carry out the tags in a post.

Default Mode

If you add data=”detailed” argument in the tag, the content will be shown more detailed. Please note that, it works for only default skin.

• Title Examples
• Name Examples

You can show “also known as” title of a movie by adding title=”aka” argument. For instance, when you add an anime movie, the content will be shown with original title.

You can turn default skin to transparent.
Normal name/title:

Detailed name/title:

Examples

Old Styles

You can show the content with different styles. These features are from the old version.

Example:

All old style tags here:

Description

Compatible with the WordPress Classic Editor, Gutenberg integration coming soon

Feature requests/ideas welcome!

Forget About Shortcode (FASC) Buttons are a visual way to add CSS buttons in the rich text editor and to your themes. Instead of adding shortcodes in the post editor, you insert real, styled buttons – making the process of adding buttons to your posts and pages much more natural whilst improving the appearance and usability of the post editor.

FASC Buttons tries to be as clean as possible with the html, only using data attributes for necessary features – the buttons you use in the post editor use the exact same classes as on the front end of your site with no extra or hidden markup to make them behave this way.

• New – add FASC buttons to widgets in WP 4.8

• Editing a button couldn’t be easier – just double click a button and an options panel appears allowing you to completely reconfigure the current button – beats tedious shortcodes and using precise syntax!

• Utilises the latest CSS properties for styling

• Includes Dashicons & Font Awesome Icons to add to your buttons and use in your themes.

Your ratings mean a lot – if you like the plugin please consider leaving a review.

This plugin is only compatible with WordPress 4.2 and upwards (download version 1.x for compatibility with WP 3.9 – 4.1)

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

It works perfectly!

#myweyou What is so bad about it? When you write a negative comment you have to explain the reason too.
I didn’t have any problems, it works fine. (WP 5.3.2)
I like the usage of the shortcode, so easy and effective.
Thanks.
—
Teşekkürler Kemal bey.

it is so bad

Everything works great and when I ran into an issue, the develope was quick to assist and fix the issue. Must have plugin for all entertainment based sites.

Initially, the plugin did not work for me. The developer looked into the problem and fixed the issue related to a security setting.

Easy to use, I can just recommend.

Description

Use the shortcode to import remotely hosted content into your posts or page using . Supports HTML and , authentication, HTML entity escaping/encoding, CSS selectors and element removal, regular expression replacements, and caching.

This shortcode will let you…

• Display the contents of a document stored in Subversion or Git repository into a post where it can then be formatted using SyntaxHighlighter.
• Quickly integrate content from other CMS systems, for example a company intranet.
• Control access to protected data using WordPress’ permissions.
• Select and remove DOM elements based on CSS selectors (like jQuery).
• Find and replace text based on PHP regular expressions.
• HTML encode the remote content.
• Strip tags from the remote content.
• Cache the remote content.

Usage

Attributes
[remote_content url=”http://www.example.com” method=”GET” timeout=”10″ userpwd=”username:password” htmlentities=”false” strip_tags=”false” decode_atts=”false” selector=”body” remove=”img” find=”~domain.com~” replace=”new-domain.com” cache=”true” cache_ttl=”3600″]

• The url that you want to request.

• ** **

Shortcode Contents + POST
If there is any content within the shortcode tags, it is sent as part of the request to the remote server.

Использование функции WordPress do_shortcode

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

Например, предположим, что вы хотите вставить плагинWordPress-а Contact Form 7  где-нибудь в заголовочной части(хедере) вашей темы. Но проблема в том, что у вас нет никакого виджета в этой области.

Прежде всего, понадобится взять шорткод плагина, который вы хотите использовать. Как пример, мы будем использовать тот же шорткод Contact Form 7:

1. Перейдите в Консоль WordPress и нажмите на Contact Form 7 -> Контактные формы.

2. Справа, рядом с названием формы вы найдёте шорткод для вашей формы:

3. Нажмите на шорткод и скопируйте выделившийся код.

Так как в нашей теме нет виджета в заголовке страницы и мы не может просто скопировать и вставить шорткод туда, мы воспользуемся функцией WordPress do_shortcode. Она выглядит так:

<?php echo do_shortcode( '' ); ?>

Теперь добавим Contact From 7 в наш хедер, для этого нам нужно отредактировать файл header.php. Как уже упоминалось, настоятельно рекомендуем сделать бекап вашего WordPress сайта перед тем, как вносить изменения в основные файлы WordPress и использовать дочернюю тему WordPress.

В следующих шагах показано как редактировать файлы WordPress через Файловый Менеджер Hostinger, однако, можно также воспользоваться FTP клиентом (руководство по этой теме):

1. Зайдите в Панель Управления Hostinger и нажмите на Файловый Менеджер.
2. Далее, перейдите в установочный каталог WordPress (обычно это public_html) и перейдите в каталог wp-contents -> themes.
3. Найдите каталог вашей текущей темы и откройте его.
4. Так как мы собираемся добавить форму контактов в хедер, открываем файл header.php.
5. Прокрутите страницу и найдите точное место и div, где именно вы хотите добавить форму. Наш шорткод WordPress с функцией do_shortcode будет выглядеть так:

   <?php echo do_shortcode(“”);?>

6. Сохраните файл и проверьте теперь вид вашего сайта.

Примечание: В большинстве случаем, редактирования основных файлов темы ломают шаблон WordPress. Скорее всего нужно будет внести изменения в CSS, чтобы сделать более привлекательный вид для WordPress. Обязательно ознакомьтесь с нашими руководством о том, как проверить стили CSS при помощи браузера (англ.) и download CSS cheatsheet (англ.).

Description

Create Gutenberg Blocks for custom created shortcodes.
A clean, powerful and lightweight way to generate and include custom shortcodes with:
* HTML/PHP code.
* CSS code.
* Javascript code.
* PHP backend code for Ajax calls.
* CSS and Javascript files.
* Other resources files: images, pdfs, …

• The plugin doesn’t interfere with the wordpress database. Nothing is wrote there. Very lightweight.
• Ajax calls are secured with nonces. (https://developer.wordpress.org/themes/theme-security/using-nonces/)
• Shortcodes can be inserted in post, pages, text widgets and html widgets.
• Shortcodes can be enabled/disabled individually.
• Custom CSS and Javascript files required for the shortcode are enqueued in the head section.
• Clean and efficient: Nothing about any saved shortcode is executed if the shortcode is not present in the current frontend page.
• Shortcodes can be used to inject some kind of php, javascript, css or ajax (php) code.
• Repository of already made shortcodes in the plugin page: http://shortcodescreator.com

***** WARNING ********
– Please, if you come from version less than 1.9.7 you must backup the shortcodes before upgrading the plugin and restore them after upgrade.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

I had this plugin installed a very long time ago. But only when I started to reorganize my website I learned all its great functionality to love! And I have only tapped some of its many features.

As I am not comfortable with CSS Styling I learned to value the example on the tutorial page.

This plugin was great to add to our intranet websites. We have noticed that users have to enter this shortcode through the text portion (only) of a page (Classic WP) and cannot toggle back and forth between text and visual otherwise this shortcode will break. Which this wouldn’t be an issue but majority of our users do not know html and would prefer not to create a page only in html. This limits our users and doesn’t allow them to freely edit a website, which is needed, for our intranet is made up of thousands of websites with double almost triple the amount of users.

After testing with some of our existing plugins like the post tabs (we took over the coding because we need it for some of our standard template designs) the shortcode wouldn’t display there either.

We love the different parameters and options this plugin offers but the issues we are experiences is causing more work for us in the end.

Just fantastic.

The doc is a little bit hard to get though.

This is simply a must-have plugin, it’s absolutely amazing and if you have a bit of design knowledge you can tweak it to perfection.
Do you want to make a Blog summary page? Do you want to display some news? Do you want to put some stuff into a sidebar? This plugin got you covered.
It allows you to display posts (with thumbnails) while being responsive and specifying a heck of a lot of parameters (read the documentation, there’s really a lot).
The only «downside» is that it doesn’t really have an interface, but it doesn’t need one either when you think about it.
Thank you SO much

Smoothly running on WordPress v5.4.1. So far doing what’s supposed to do. Good work…

Шорткоды в WordPress — Примеры

Вот Вам первый пример использования шорткода в WordPress:

function pribylwm() {
return'Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru!';
}
add_shortcode('hi', 'pribylwm');

Этот небольшой кусок кода php вы можете вставить в файл functions.php своей активной темы оформления перед значком «?>» в самом конце. И когда Вы вставите вот такой шорткод:

когда будете писать свою новую статью, то вместо этого шорткода появится строка с записью:

И не нужно будет писать длинные строчки и все время повторяться, тратя при этом лишнее время на их написание. Не правда ли удобно и быстро?!

Теперь я Вам расскажу и покажу несколько примеров шорткодов, которые Вы сможете использовать для своего сайта или блога и они вам облегчат жизнь!

Если вам нужно вписать, например ту же фразу, но с использованием ссылки на сайт, то нужно сделать вот так:

function pribylwm_link() {
return'Здравствуйте, уважаемые друзья и гости блога <a href="https://pribylwm.ru">Pribylwm.ru</a>!';
}
add_shortcode('hi link', 'pribylwm_link');

 Хотите, чтобы была возможность вставить шорткод для подписки на ваш сайт по RSS? Тогда нужно сделать вот так:

function pribylwm_rss() {
return '<a href="https://feedburner.google.com/fb/a/mailverify?uri=pribylwm&loc=ru_RU" rel="nofollow">Подпишись на обновления блога Pribylwm.ru!</a>';
}
add_shortcode('rs', 'pribylwm_rss');

Только используйте для вызова свой адрес подписки по RSS. И вставляйте в текстовом редакторе в своей записи в нужное место вот этот шорткод для подписки по RSS:

Вам нужно подключить специальные стили для красивого вывода своих записей через шорткоды WordPress? Нет проблем! Давайте сделаем это прямо сейчас …

Сейчас мы с вами сделаем при помощи шорткода кнопку «Твитнуть» с применением стилей и она будет выглядеть вот так:

кнопка твитнуть

Для этого нам нужно вот этот код:

function pribylwm_twitt() {
return '
<style type="text/css">
button{
background: #2E8CE3;
padding: 7px 30px;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
border: solid 1px #73C8F0;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),
to(#2E8CE3));
box-shadow: inset 0 1px 0 0 #FFFFFF;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
button:hover {
background: #2E69E3;
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF),
to(#2E69E3));
}
button:active {
background: #2E69E3;
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF),
to(#2E69E3));
box-shadow: inset 1px 1px 0 0 #004A7F;
-moz-box-shadow: inset 1px 1px 0 0 #004A7F;
-webkit-box-shadow: inset 1px 1px 0 0 #004A7F;
padding: 8px 29px 6px 31px;
}
</style>

<button><a title="Кликни и отправь этот пост в Твиттер!" href="http://twitter.com/home?status=В данный момент я читаю '.get_permalink($post->ID).'">Твитнуть</a></button>';
}

add_shortcode('tt', 'pribylwm_twitt')

Вставить в нам уже известный файл нашей темы functions.php и в запись, где должна быть наша «кнопка твитнуть» вставить вот такой коротенький шорткод:

Вот таким образом и делаются шорткоды WordPress, которые спасают нас от монотонного и емкого труда.

Пользуйтесь ими друзья!

В следующем своем материале, я Вам расскажу, какие специальные плагины можно использовать для создания шорткодов на WordPress. Об одном из них я уже рассказал в своей прошлой статье, ее Вы найдете вот тут.

На этом позвольте по прощаться. До свидания! До новых встреч!

Changelog

1.4.2

• Added an option to search shortcodes in draft, future, pending and private contents
• Replaced old guid links with permalinks
• WordPress 5.4.2 compatibility

1.4.1

• Added an option to search for shortcodes parameters into documentation page
• Speeded up documentation page
• Link to shortcode uses from documentation page
• Hidden extra contents during documentation page searches

1.4.0

• Documentation page: get information about shortcodes (source file, class and parameters) – Thanks to @luxxor
• Removed unnecessary frontend js/css calls
• Excluded some false positive unused shortcodes
• Used Font Awesome icons instead of images
• WordPress 5.4.1 compatibility
• Tablepress compatibility
• New screenshots in plugin documentation

1.3.0

• Settings page
• Disable all unused/orphan shortcodes
• Disable selected active shortcodes
• WordPress 5.3.2 compatibility
• Minor changes

1.2.7

• WordPress 5.2 compatibility
• Visual Composer (WP Bakery page builder) compatibility
• “Copy to clipboard” function for tested shortcodes
• Italian language
• Minor changes

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

Easy to use and does just what I need it to. You can’t ask for more than that from a plugin. Using Version 5.4.1 of WordPress.

i like the plugin it’s good and does the job but,
-i have to type twice or 3 times to make it appear
-some issues with the saved templates
-links open to a blank page then redirects to the link

Ross has done a sterling job. So much better than using shortcodes.
He is actively supporting and developing this plugin as WordPress evolves.
Great work!!!

… and this has it. Works exactly as advertised and is WYSIWYG. In edit mode, the buttons don’t shrink when they receive focus, which I’ve seen on other plugins. There are a wide variety of choices for appearance, and the icons feature is an excellent addition. It just works.

This is a superb plugin, easy to use and creates a nice shiny button exactly where I need it.
Works perfectly with the latest version of WP as well (as of May 2019)
Top marks!

Very handy plugin. I like that it embeds an actual CSS button rather than interpreting a shortcode. Less opportunity for trouble. Seems to work fine on WordPress 5.0.3 as of today (1/28/2019)

Changelog

1.0

• Compatible with WordPress 4.8 and up
• Padding generator will automatically add ‘px’ to numbers
• Added filter to hide banner
• UI improvements for better readability

0.6.1

• fixed jquery.cookie.js issue where in some cases the server would reject it
• added filter for hiding certain column shortcodes from view.

0.6

• added Danish translation ( thanks to Mads Rosendahl )
• added full width column
• updated css template for margins ( thanks to intheshallow )
• added responsive CSS for devices with a max-width viewport of 600pixels

0.4

• added improvements made for inclusion on WordPress.com VIP ( thanks to danielbachhuber )
• added WordPress coding conventions ( see https://codex.wordpress.org/WordPress_Coding_Standards )
• added fix for script and style loading

0.3

• added RTL support and Hebrew language ( thanks to Rami Yushuvaey )
• added Slovak translation ( thanks to Branco from WebHostingGeeks )
• added column 4/5

0.2

• added french and spanish language ( thanks to Mikel Aralar )
• improved script loading
• shortcodes HTML-view buttons hidden by default. Enable them by adding this to your functions.php:

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

Plugin works great but I’m having one issue. The content I’m pulling is referencing CSS and JS with relative paths ../../ and throwing 404s since it can’t find in relation to where it’s being display. Any suggestions on how to handle that? thanks

This plugin works perfect for my needs. Awesome work! I use it to pull content from a «main article» into «related articles» in a Wikipedia fashion. It works flawlessly. Many thanks!

This plugin is absolutely great.

Many thanks to the developer for creating it, I’m loving it

This plugin is awesome! Helped me save so much working time.
Thanks a lot to doublesharp!

Шорткод с помощью плагина Listo

Об этом плагине было рассказано в статье о секретах работы с Contact Form 7, а именно о том, что Listo умеет работать с длинными списками. Contact Form 7 в своих модулях имеет файл listo.php, он нужен для интеграции одноименного плагина. Поэтому все что нам нужно — это активировать listo и заглянуть к нему «под капот», взять часть кода и переделать под наши реалии.

Для пример, возьмем всё те же рубрики. Код будет состоять из двух частей, обе вставляем в functions.php.

1) Добавляем тип списка

add_filter('listo_list_types', 'listo_list_types_func');
function listo_list_types_func($list_types){
	$list_types = 'Listo_Categories';
	return $list_types;
}

Тут мы добавляет ключ (categories) и значение (Listo_Categories). Ключ используется в теге , а значение ключа — это имя класса, который должен вернуть массив пунктов выпадающего списка.

2) Описываем класс для получение рубрик

class Listo_Categories implements Listo {

	public static function items(){
		$categories = get_categories();

		foreach( $categories as $cat ){
			$items  = $cat->name;
		}

		return $items;
	}

	public static function groups(){}
}

Как видно, код работает на основе функции WP get_categories, параметры которой смотрите в описании.

3) Теперь используем тег выпадающего списка Listo в шаблоне формы

В нем в параметре data указываем какой тип данных надо получить (ключ из первого кода)

И используем тег в шаблоне письма, чтобы получить в письме выбранную пользователем рубрику.

Вступление

Шорткоды в WordPress дают вам дополнительную функциональность и позволяют встраивать контент в страницы, записи и боковые панели. Много плагинов и тем используют шоркоды и дают возможность пользователям динамически добавлять контент в свой блог. Чтобы лучше показать, как работают шоркоды возьмём в качестве примера шорткод формы контактов Contact Form 7:

Как видите это очень просто. У нас есть макрос Contact Form 7 в квадратных скобках. Макрос генерируемые плагином Contact From 7. WordPress заменит макрос контентом, который выдаст PHP-функция. Если мы добавим шорткод к записи, странице или боковой панели, WordPress покажет вам форму контактов.

Но что, если вы захотите использовать шорткоды WordPress в файлах темы? В таком случае, можно воспользоваться функцией WordPress do_shortcode.

Давайте углубимся и посмотрим, как использовать функцию WordPress do_shortcode.

Description

• This is a simple login form in the widget.
• Compatible with WordPress Multisite Installation.
• Use this shortcode to use login form in your pages/ posts.
• Just install the plugin and add the login widget in the sidebar.
• Change some ‘optional’ settings in (admin panel left side menu) and you are good to go.
• Add CSS as you prefer because the form structure is really very simple.
• Use this shortcode in your page to display the forgot password form. Forgot password link can be added to login widget from plugin settings page.
• Login form is responsive.
• Plugin is compatible with WPML plugin. You can check the compatibility at wpml.org.

Other Optional Options

• Add CAPTCHA security in admin and frontend login forms.
• Login Logs are stored in database ( IP, login status, login time ). PRO version has options to block IPs after certain numbers of wrong login attempts.
• You can choose the redirect page after login. It can be a page or a custom URL.
• Choose redirect page after logout.
• Choose user profile page.
• Easy CSS implementation from admin panel.

Facebook Login Widget (PRO)

There is a PRO version of this plugin that supports login with Facebook, Google, Twitter, LinkedIn, Amazon and Instagram accounts. You can get it here in USD 4.00

• The PRO version comes with a FREE Content Restriction Addon. Partial contents of Pages/ Posts or the complete Page/Post can be hidden from visitors of your site.
• Compatible with WooCommerce plugin.
• Compatible with WordPress Multisite Installation.
• Login Logs are stored in database. IPs gets Blocked after a certain numbers of wrong login attempts. This ensures site’s security.
• IPs can be Blocked permanently from admin panel.
• Captcha login securiy in Frontend and Admin login Forms.
• Restrict Admin panel Access for selected user Roles. For example you can restrict Admin Panel access for “Subscriber” and “Contributor” from your site.
• Use Shortcode to display login form in Post or Page.
• Use only Social Icons for logging in. No need to put the entire login form.
• Change welcome text “Howdy” from plugin settings section.
• Manage Forgot Password Email Body.
• Easy CSS implementation from admin panel.
• And with other useful settings. Click here for details

Social Login No Setup

The plugin supports login with 30+ sites. Facebook, Google, YouTube, Google Drive, Gmail, Twitter, LinkedIn, PayPal, Yahoo, Microsoft, WordPress, Amazon, Github, Tumblr, Vimeo, Reddit, Dribbble, Twitch, Medium, Discord, Line, Stack Exchange, Stack Overflow, Disqus, Blogger, Meetup, Foursquare, Yandex, VKontakte, Telegram, Dropbox, Fitbit and Instagram accounts and the most important part is that it requires no Setups, no Maintanance, no need to create any APPs, APIs, Client Ids, Client Secrets or anything. Click here for details | Click here for Live Demo