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 = '
'; 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.

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

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.