Как сделать шорткод в elementor
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Cokojiova, Чистота кода на Элементоре вполне достаточная для SEO продвижения. Поисковики хорошо читают и ранжируют страницы.
Вот вставляю в поле элементора шорт код (от плагинов) и как будто он не видит его выводит просто текстов. Если же чисто на wordprss вставлять без элементора то код работает все подгружается.
alexbik:
Вот вставляю в поле элементора шорт код (от плагинов) и как будто он не видит его выводит просто текстов. Если же чисто на wordprss вставлять без элементора то код работает все подгружается.
Попробуйте переустановить элементор. Там это прекрасно работает.
Что бы вывести список постов (записей) на странице категории (рубрики), привязанным к этой категории (рубрики).
1. Создал категорию (рубрику). К ней привязаны посты (записи).
2. После создания в Elementor шаблонах в Theme Builder шаблон для архивов (категорий, рубрик).
3. Для вывода списка постов относящихся к этой категории, использую виджет Edit Posts.
В разделе виджета Query выбираю нужную мне категорию. (смотрите изображение)
Как сделать так, что бы в Edit Posts -> Query в название категории подтягивалось название открытой в данный момент категории и выводились посты (записи) этой категории?
Категорий 1000 и под каждую категорию создавать шаблон и потом настраивать виджет займет много времени.
Я хочу создать один шаблон для всех категорий. В зависимости от того страница какой категории открыта, меняться там должно только содержимое виджета Edit Posts, т.е. списки постов этой категории.
Можно ли это сделать в виджете Edit Posts (может, что то не понял) или вообще другим способом?
" />
Написал здесь вчера большой пост с ответами на последние вопросы, сегодня его почему то нет. Откатили бекап или я что-то нарушил? Уведомлений тоже нет.
Cokojiova:
@benmer добрый день!
Скажет, пожалуйста, чистота и правильность html и css кода важна для seo. На сколько чист и правилен, а также приемлем код конструктора Elementor для seo продвижения?
Есть ли необходимость после создания лендинга на Elementor, отдавать верстальщику для улучшения кода? (конечно, тогда все блоки конструктора съедут, и пропадёт возможность простого редактирования)
С уважением, Алиса!
Алиса, добрый день. У Elementor очень большая вложенность и много лишнего кода. Это его недостаток, но это не мешает SEO продвижению. Вы сможете найти много сайтов сделанных на Elementor, в топе выдачи, особенно в западном интернете.
Простой совет - если делаете на Elementor, прекратите думать про технические нюансы и проблемы с SEO. Здесь все в порядке. А если сайт получается тяжелым, используйте кеширование, любым вышеописанным способом. Все мои Elementor сайты, даже очень тяжелые, очень хорошо себя чувствуют на простом виртуальном хостинге.
air100:
Что бы вывести список постов (записей) на странице категории (рубрики), привязанным к этой категории (рубрики).
1. Создал категорию (рубрику). К ней привязаны посты (записи).
2. После создания в Elementor шаблонах в Theme Builder шаблон для архивов (категорий, рубрик).
3. Для вывода списка постов относящихся к этой категории, использую виджет Edit Posts.
В разделе виджета Query выбираю нужную мне категорию. (смотрите изображение)
Вопрос:
Как сделать так, что бы в Edit Posts -> Query в название категории подтягивалось название открытой в данный момент категории и выводились посты (записи) этой категории?
Категорий 1000 и под каждую категорию создавать шаблон и потом настраивать виджет займет много времени.
Я хочу создать один шаблон для всех категорий. В зависимости от того страница какой категории открыта, меняться там должно только содержимое виджета Edit Posts, т.е. списки постов этой категории.
Можно ли это сделать в виджете Edit Posts (может, что то не понял) или вообще другим способом?
" />
Привет. Как бы я не любил Elementor и его достаточно широкие возможности, но для динамических вещей я пользуюсь JetEngine от Crocoblock. Потому что только он может вывести адекватно просто и функционально листинги записей из категорий (простит меня Toolset)
Что касательно твоего вопроса, здесь я бы однозначно делал через JetEngine.
Если вы еще не проверили плагин Elementor – вам следует. В свое время я использовал много конструкторов plug-n-play, и этот, безусловно, выбивает остальных из воды. Но вы здесь, чтобы узнать, как создавать собственные виджеты Elementor и угадайте, что? Это подпруга!
В этой статье мы создадим простой пользовательский виджет Elementor, который позволит пользователю редактировать текст, изображения и стили как в настройках виджета, так и во встроенном режиме! Мы назовем этот виджет Elementor Awesomesauce.
Я не могу сказать вам, сколько раз я видел пользовательские реализации, сделанные в теме (что возможно), но не очень хорошо для компонентного подхода. Встраивание в плагин позволяет вам разделять код, чтобы ваши существующие PHP, CSS и JS не попали в код вашей темы. Более того, вы можете условно загрузить свои ресурсы веб-интерфейса только в тех местах, где появится пользовательский виджет, что повысит производительность. Итак, начнем там, создадим плагин Elementor Awesomesauce :
Шаг 2. Добавьте свои настраиваемые поля.
Elementor – очень мощный инструмент, позволяющий легко добавлять пользовательские вкладки, поля, настройки стиля и даже отзывчивость. В приведенном выше коде _register_controls мы уже добавили несколько полей для заголовка, описания и содержимого, но что, если вам нужно больше? Посмотрите примеры ниже, чтобы добавить еще больше удивительности в ваш плагин Awesomesauce.
Вы можете добавить / изменить вкладку содержимого и параметры, отображаемые в них, на боковой панели редактора Elementor, указав следующее:
widgets / awesomesauce.php – В _register_controls методе.
Добавить / изменить вкладку стиля элемента
Вы можете добавить / изменить вкладку стиля и параметры, отображаемые в них, на боковой панели редактора Elementor с помощью следующего:
widgets / awesomesauce.php – В _register_controls методе.
Elementor Widget Image Field
Возможность добавлять / изменять изображения имеет решающее значение для любой хорошей темы WordPress, вот как добавить пользовательское поле изображения в виджет Elementor с помощью Controls_Manager::MEDIA :
widgets / awesomesauce.php – В _register_controls методе.
Elementor Widget Select Выпадающий
Что, если мы хотим позволить пользователю выбрать HTML-элемент для заголовка, это также удобно Controls_Manager::SELECT :
widgets / awesomesauce.php – В верхней части файла, где use находятся операторы.
widgets / awesomesauce.php – В _register_controls методе.
Elementor Widget Button Group
Как насчет добавления параметров выравнивания, используя группу кнопок, легко с Controls_Manager::CHOOSE :
widgets / awesomesauce.php – В _register_controls методе.
Типографские параметры виджета Elementor
Elementor поставляется с мощным редактором типографики, который включает отзывчивые опции, вот как вы можете добавить его с помощью Group_Control_Typography & Scheme_Typography::TYPOGRAPHY_1 .
Поделитесь опытом как правильно вызывать шорткоды сгенерированные плагинами,темой в Wordpress.
Зачем нужно: Имею Wordpress + плагин elementor + JupiterX тему. В elementor можно создавать шаблоны блоков/секций и получать их шорткод для вызова. Пример шорткода [elementor-template ] . По клику на кнопку хочу вызывать AJAX нужную секцию (секция содержит слайдеры, табы, посты) и вставить ее в тело страницы.
Но до меня не дошло, как применить это здесь. Есть ли у кого-то подобный опыт? Можете ли выложить примеры кода с комментариями?
Как я пытался вызвать шорт код AJAX.
HTML
PHP
JS
По сути он шорткод не вызывает. Сам шорткод сгенерирован темой.
Если я напишу свой плагин.
И перепишу Функцию
PHP
То такая функция, отработает конечно же. И вставит на фронтенде
Подскажите, что делаю неправильно. Как вызвать на фронтенд шорткод сгенерированный темой ? [elementor-template ]
Шорткоды — это функции PHP, которые можно задействовать внутри содержимого поста, используя условные обозначения.
Например стандартный вордпрессовский шорткод
Понятно дело, что данный функционал дает разработчикам WordPress потрясающие возможности — на сегодняшний день очень актуальна вставка в посты форм, кнопок, слайдеров.
Так же, как у функции могут быть аргументы, так и шорткод может иметь собственные параметры. Ещё один пример с шорткодом
В параметре ids перечислены ID изображений, входящих в галерею, параметр size — размер вставляемых изображений.
Простой пример создания шорткода
Создать свой шорткод не труднее, чем написать собственную функцию PHP. Например я решил создать шорткод [misha] , который при вставке в пост будет выводить URL главной страницы сайта.
Код можете вставить в файл functions.php (я имею ввиду тот, который находится в директории вашей текущей темы).
Имя шорткода должно быть обязательно в нижнем регистре и содержать только буквы латинского алфавита, цифры и символ подчеркивания.
Шорткод с параметрами
Окей, я уже писал, что у шорткодов могут быть свои параметры, давайте теперь посмотрим как это делается.
В качестве примера я написал шорткод, который просто вставляет ссылку в пост, которая открывается в новой вкладке браузера target="_blank" . Не думаю, что на деле он может быть полезен, но для нас сейчас главное — понять сам принцип работы шорткодов.
Параметров будет два: anchor и url — анкор (текст ссылки) и URL соответственно. Как будет выглядеть сам шорткод: [trueurl anchor="Мой блог" url="https://misha.blog/blog"] . Если параметр не будет указан в самом шорткоде, то будет использоваться его значение по умолчанию, заданное в функции.
Названия атрибутов шорткодов также рекомендуется использовать в нижнем регистре. Значения же атрибутов могут содержать любые символы.
Закрывающиеся шорткоды и шорткод внутри шорткода
Давайте возьмём шорткод из предыдущего примера и немного переколдуем его. Напомню, что шорткод выглядел так:
[trueurl anchor="текст ссылки" url="URL ссылки"] .
Что, если мы переделаем его следующим образом: [trueurl anchor="текст ссылки"]URL ссылки[/trueurl] .
Кроме того, вовнутрь закрывающихся шорткодов можно вставлять и другие шорткоды (благодаря функции do_shortcode()).
В соответствии с этим давайте переделаем наш код из предыдущего примера:
Теперь шорткод следующего вида [trueurl anchor="главная"][misha][/trueurl] выведет ссылку на главную страницу вашего сайта (про шорткод [misha] я писал выше).
Добавляем кнопку вставки шорткода в визуальный редактор поста TinyMCE
Понятное дело, что гораздо удобнее вставлять шорткод будет через встроенный редактор TinyMCE, а если при этом будет ещё реализован интерфейс, позволяющий задавать параметры шорткода, то вообще круто.
1. PHP
Вне зависимости от того, будет ли ваша кнопка текстовая, либо с иконкой, будет ли она содержать дополнительные поля ввода (параметры шорткода) или нет — во всех случаях PHP-код регистрации кнопки будет одинаков.
В этом примере для получения URL папки с текущей темой я использовал функцию get_stylesheet_directory_uri(). true_button.js — собственно сама кнопка, создайте этот файл в директории с темой (или там, где вам удобно, но не забудьте в этом случае поменять путь к нему).
2.1. JavaScript. Пример простой кнопки
Займёмся содержимым файла true_button.js . Итак, создадим для начала простую кнопку, которая будет вставлять шорткод [misha] .
Текстовый вариант кнопки вставки шорткода в визуальном редакторе TinyMCE.
2.2. Кнопка с иконкой, выпадающим списком и с возможностью задавать параметры шорткода
Начну с того, что вставлю (а точнее заменю) код в файл true_button.js :
После вставки кода моя кнопка уже появилась и работает. Единственное только — у неё нет никакой иконки (ну кроме стрелочки вниз).
Сейчас нам понадобится немного CSS-кода. Прежде всего хочу сказать, что вы можете использовать:
- Встроенные иконки TinyMCE.
- Другие иконочные шрифты, в том числе и dashicons.
- Любую картинку через background-image .
- Изображение, закодированное в base64.
В своем примере я использовал обычную картинку с перцем, которая у меня находится в той же директории, что и CSS-файл.
Если использовали этот же способ и иконка не появилась — попробуйте прописать к ней абсолютный URL.
Для подключения CSS используйте функцию wp_enqueue_style() либо хук admin_head .
Всплывающее окно, в котором можно задать параметры шорткода, появляющееся при нажатии на кнопку в визуальном редакторе.
Если вы хотите использовать dashicons, то ваш CSS для иконки перца будет выглядеть примерно следующим образом:
Применение шорткодов к переменным в PHP
Тут всё сводится к использованию одной функции — do_shortcode() .
do_shortcode()
$content (строка) (обязательный) Функция выполняет все шорткоды, которые содержатся в этом аргументе.
Функция в качестве параметра может содержать лишь один шорткод:
Или шорткод и какой-то контент:
Популярный пример, позволяет получить или вывести содержимое поста с применением шорткодов при помощи функции get_the_content():
Вот пожалуй и всё. Если у вас возникнут какие-то вопросы, пожалуйста, оставляйте их ниже в комментах, буду рад помочь.
Sharing is caring
Понравилось это:
Похожее
Путешествует по миру и рассказывает всем о WordPress лично, у себя в блогах и на курсах в Санкт-Петербурге. Умеет просто объяснять сложные вещи, делает это красиво. Организовывает неплохие WordCamp's, но совсем не умеет слушать чужие доклады.
Читайте также: