Jak stworzyć shortcode dla filmów z Youtube w WordPressie?

Jak stworzyć shortcode dla filmów z Youtube w WordPressie?

Nie lubię gotowców. Zwykle nie spełniają one w pełni moich oczekiwań. Jeżeli tylko pozwala na to czas wolę rozwiązać problem po swojemu. Dlatego dziś napiszemy prosty plugin do WordPressa i dowiemy się jak stworzyć shortcode obsługujący filmy z Youtube.

https://github.com/devolkpl/youtube-shortcode

Założenia

Wtyczkę tę napisałem na potrzebę ostatniego projektu, nad którym pracowałem. Zaistniała potrzeba osadzania filmów z YouTube wewnątrz treści strony. Wymagania jakie sobie założyłem wyglądały tak:

  • filmy mają być responsywne,
  • można zamieszczać je w dowolnym miejscu między akapitami,
  • zamiast kopiować kod iframe z YouTube, będę dodawał jedynie ID filmu,
  • w edytorze będzie dostępny przycisk, który pomoże wstawić film bez znajomości składni shortcode.

Tworzenie pluginu

Czym są pluginy chyba tłumaczyć nikomu nie trzeba. W skrócie są to rozszerzenia funkcjonalności danego systemu. Jedną z zalet platformy Worpdress jest stosunkowo łatwe tworzenie wtyczek na własne potrzeby. Działają one niezależnie od zastosowanego szablonu i często ułatwiają życie osobom pracującym nad contentem strony czy bloga.

Folder i pliki

Rozpoczynając pisanie pluginu tworzymy folder o nazwie bez spacji, znaków specjalnych i wielkich liter. W moim przypadku nadałem mu nazwę „youtube-shortcode-button”. Wewnątrz katalogu tworzymy dwa pliki:

  • yotube-shortcode-button.php – posłuży do załączenia skryptu JavaScript oraz rejestracji shortcode i buttona,
  • index.js – rozszerzenie do wordpress-owego edytora TinyMCE.

Rejestrowanie pluginu

Analogicznie do chociażby własnych szablonów, rejestrację nowego pluginu rozpoczyna się wykomentowanej składni, rozumianej przez silnik WordPressa. Aby zdefiniować nowy plugin, dodajemy w pliku yotube-shortcode-button.php poniższy kod:

/*
Plugin Name: Youtube Shortcode Button
Plugin URI: http://devolk.pl/
Description: This plugin adds Youtube shortcode button to visual editor.
Author: Michał Wilk
*/

Załączanie JavaScript

Kolejnym krokiem jest zaimportowanie pliku index.js do instancji WordPressa. W tym celu dopisujemy:

function enqueue_plugin_scripts($plugin_array){
  $plugin_array["youtube_shortcode_plugin"] =  plugin_dir_url(__FILE__) . "index.js";
  return $plugin_array;
}
add_filter("mce_external_plugins", "enqueue_plugin_scripts");

Rejestrowanie nowego przycisku w edytorze

Aby w edytorze tekstu był widoczny specjalny przycisk wstawiający nasz shortcode, musimy taki przycisk zarejestrować. W tym celu dopisujemy:

function register_buttons_editor($buttons){
  array_push($buttons, "youtube_button");
  return $buttons;
}
add_filter("mce_buttons", "register_buttons_editor");

Tworzenie shortcode

W tym miejscu zajmiemy się tym co najważniejsze czyli stworzymy własny shortcode. Shortcode w WordPressie to specjalna składnia, która na poziomie serwera przetwarzana jest na kod zrozumiały dla przeglądarki. Pozwala to zamieszczać kod HTML wewnątrz treści bez jego znajomości i w bardziej elegancki sposób. Dla przykładu wstawiając wewnątrz treści shortcode youtube id="X" zmusimy interpreter by przetłumaczył go na kod HTML. W naszym przypadku będzie to kod iframe wyświetlający film z Youtube.

W pliku yotube-shortcode-button.php wklejamy poniższy blok:

function append_iframe($atts){
  extract(shortcode_atts(array(
    'id' => false
  ), $atts));
  if( $id ){
   return '
'; } else { return ''; } } add_shortcode('youtube', 'append_iframe');

Funkcja append_iframe() wydziela parametr ID zawierający identyfikator filmu z YouTube. Jeżeli parametr ID został poprawnie załączony zwracany jest iframe wewnątrz div-a o klasie flex-video.

Skalowanie odtwarzacza

Klasa flex-video umożliwi nam skalowanie odtwarzacza do wielkości kontenera. Aby osiągnąć taki efekt należy na stronie zamieścić następujący CSS:

.flex-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.flex-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Dodajemy obsługę TinyMCE

Aby nasz plugin zaczął współpracować z edytorem tekstowym musimy zdefiniować sam przycisk jak i akcję, która wykona się po jego naciśnięciu. Zdecydowałem, że ID filmu będzie wprowadzane przy pomocy klasycznego okienka „prompt” z JavaScript. Kod źródłowy pliku index.js prezentuje się następująco:

(function() {
  tinymce.create("tinymce.plugins.youtube_shortcode_plugin", {
    init : function(ed, url) {

      //dodaj przycisk   
      ed.addButton("youtube_button", {
        title : "Dodaj film z YouTube",
        cmd : "append_player",
        image : "https://image.flaticon.com/icons/png/512/0/108.png"
      });

      //obsługa przycisku
      ed.addCommand("append_player", function() {
        var yt_id = prompt("Wprowadź ID filmu na YouTube :", "np. bG3mX-zqASY");
        if (yt_id != null) {
          var return_text = '

ARVE Error: Mode: is invalid or not supported. Note that you will need the Pro Addon activated for modes other than normal.

'; ed.execCommand("mceInsertContent", 0, return_text); } }); }, createControl : function(n, cm) { return null; }, getInfo : function() { return { longname : "YouTube Shortcode Button", author : "Michal Wilk", version : "1" }; } }); tinymce.PluginManager.add("youtube_shortcode_plugin", tinymce.plugins.youtube_shortcode_plugin); })();

To właściwie wszystko, plugin jest gotowy do pracy. Wystarczy go pobrać, zamieścić w katalogu /wp-content/plugins i aktywować w panelu WordPressa.

Cały plugin możesz pobrać z mojego repozytorium pod adresem:
https://github.com/devolkpl/youtube-shortcode.

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.