Ваш путь: Главная » WordPress без плагинов, Бардачок html php css » текущая страница

возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено 2024-10-27 в теме: WordPress без плагинов; Бардачок html php css
Запросто с WordPress создание и продвижение сайтов ATs media

Добавляем на страницы сайта видео из соцсетей, по кнопке отрабатывает шорткод – для TinyMCE или html редакторов

По причине перебоев, скажем так, в работе YouTube, часть админов ищет решение того, каким образом можно заменить или добавить в статьи (контент) видеоролики с каких-то других соцсетей, например с ВКонтакте, Одноклассников и т.п. где есть возможность работать с видео с так называемым фреймом.

 

В общем-то, встраивание видео в пост на сайте, это довольно простая задача, и решение которой вряд ли нужно в подробностях описывать. Думаю, достаточно предложить некоторые варианты: ловчее всего, если добавление видео частично автоматизировано, скажем, по клику кнопки в текстовом редакторе.

 

  • а) организуем дополнительную кнопку;
  • б) создадим небольшой код, который и создаст функцию обработки шорткода…

 

По тексту ниже дам пару вариантов, все они без использования плагинов:

 


 

 

 

Добавляем на страницы сайта видео из соцсетей, по кнопке отрабатывает шорткод

 

 

Примера ради и опыта для рекомендую ознакомиться со статьями: как добавить на сайт видео: например с YouTube канала (есть вариант для HTML редактора, а также css стили для коррекции элемента), или этот пост, или

 

 

Для начала нам требуется получить в разделе Видео Соцсети такой примерно код iframe, который создаст встроенную область обработки данных iframe (а) – т.е. видео, это, скажем, документ со сторонней страницы (соцсети), который будет отображаться встроенным средствами JavaScript уже на нашей странице, взаимодействуя – в так называемом фрейме – в общем, фрейм, по сути безграничные возможности “художественных изображений” на сайте:

 

 

<iframe width="560" height="315" src="//ok.ru/videoembed/737204797722" frameborder="0" allow="autoplay" allowfullscreen></iframe>

 

 

… “для встраивания на сайт”…а точнее не весь код, но его id видео, в примере это 737204797722 – копировать для вставки видно на сайт нужно только его, его и добавим на страницу, а обработка фрейма – для всех роликов, которые будут на сайте, осуществляется в функции, которую и о которой подробнее ниже по тексту:

 

 

немного лирики по принципиальным решениям

 

 

Да, возможно добавить просто-напросто весь этот полный код в тело статьи (в html) и как бы все замечательно заработает, и, если этот код обработать стилями css, то вообще…

 

Но тут дело вот в чем: если вы добавляете код в статью, он записывается в Базе данных для каждой отдельной статьи! таким образом, если вы захотите через какое-то время (мало ли, что может случиться) каким-то образом подкорректировать код или, скажем, вовсе его заменить, то нам с вами придется редактировать абсолютно все статьи сайта, либо прибегать как каким-то утонченным решениям с Базой Данных (не всем это по силам).

 

А потому, весьма целесообразнее все это дело запрограммировать: т.е. написать простенький код, который и будет обрабатывать фрейм абсолютно всех видео сайта (шорткод), а нам лишь при написании поста останется добавить id видео в тело статьи и обернуть шорткодом. Все остальные дела выполнить программа.

 

Да, кто-то спросит… мол, и шорткод записывается в БД. Совершенно верно, но шорткод легко убрать и перенастроить для всех видео-документов разом, скорректировав только функцию!

 

Вот в чем и штука!..

 

 

Как добавить свои кнопки в текстовый HTML редактор WordPress, или в визуальный TinyMCE WordPress редактор (или немного устаревший, НО рабочий олд-вариант для тех кто занимается инженЕрингом с ВП))

 

 

код для создания шорткода, с помощью которого можно легко добавлять видео…

 

 

Для начала создаем функцию в файле functions.php активного шаблона сайта. Или возможно создать дополнительный файл functions.php

 

Затем добавляем предложенный ниже сниппет себе… (к слову, этот подходит практически для любых соцсетей)!.. Я даю пример для ВКонтакте и ОК:

 

 

/*ВК кнопка видео*/
add_shortcode( 'vkvideos', '__return_false' ); // УБИРАЕМ теги шорткодов из записей, если видео глобально отключаем
//
add_shortcode( 'vkvideos', 'mihalica_vkvideos' );
function mihalica_vkvideos( $attr, $content= null ) {
return '<br /><div class="teni-too"><iframe src="https://vk.com/video_ext.php?oid='.$content.'" width="640" height="360" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe></div><br />';
}
## пример: 2
/*ВК ОК видео*/
add_shortcode( 'okvideos', '__return_false' );
add_shortcode( 'okvideos', 'mihalica_okvideos' );
function mihalica_okvideos( $attr, $content= null ) {
return '<br /><div class="teni-too"><iframe width="560" height="315" src="//ok.ru/videoembed/'.$content.'" frameborder="0" allow="autoplay" allowfullscreen></iframe></div><br />';
}
/*ОК видео*/

 

 

После прописки в ядре сайта данной функции у вас на сайте уже будет отрабатывать видео-шорткод: или okvideos здесь id /okvideos или vkvideos здесь id видео /vkvideos – т.е. видео уже возможно добавлять, однако делать это придется вручную: т.е. записывать id видео в текст статьи и оборачивать его шорткодом.

 

Вам, если хотите, останется только организовать кнопку в текстовом редакторе: вариантов масса (от кода до плагинов)…

 

Кнопка несказанно упрощает работы по добавлению видеоролика в статью.

 

 

принципиальное решение кода для видео ВК и Ок

 

 

Собственно, что нужно понять, так это обратить внимание на эту '.$content.' конструкцию. Это как раз тот “контент”, который мы выделяем в тексте статьи “курсором!” (в данном случае id-видео) и затем тюкаем по кнопке, после чего (если кнопка на сайте организована) выделенный текст, в нашем случае ID видеоролика, оборачивается нашим шорткодом, ввиду чего функция mihalica_vkvideo() сделает все остальное за нас…

 

Сохраняем запись, проверяем фронт статьи… Все ок – видеоролик замечательно проигрывается!

 

 

кнопку в редакторе возможно добавить куда-нить сюда:

 

код для создания шорткода, с помощью которого можно легко добавлять видео...

 

 

Как добавляются все эти варианты кнопок можно прочесть, если пройтись по ссылкам данным чуть выше.

 

 

Вот в принципе и все, что хотелось доложить на сегодняшний момент)

 

 

А вот пример видео опубликованного ниже из ВКонтакте:

 



 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !

 



Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





рекомендовано по запросу лично для вас:

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Лихо!
    Спасибо! Все перелопатил… Не нашел подходящего.
    Это решение мне подходит. Ещё кнопку организовать полегче и поправил нее)

    Ответить - Ирвин

    • Обращайтесь)

      Ответить - Михаил