Ninja Wtyczka: Ostatnie Filmy z YouTube w WordPress

Update Wersja 2 Najnowsze z podziałem na normalne i shorty

Jeśli chcesz mieć na swojej stronie WordPress zawsze najnowsze filmy z YouTube, wtyczka “Ninja YouTube Latest Videos” jest idealnym rozwiązaniem. W tym wpisie pokażemy, jak ją skonfigurować i używać.

Krok 1: Utwórz API Key na YouTube

  1. Zaloguj się do Google Cloud Console: Wejdź na stronę Google Cloud Console.
  2. Utwórz nowy projekt: Kliknij na menu projektu i wybierz “Nowy projekt”. Nadaj mu nazwę i utwórz.
  3. Włącz YouTube Data API v3: W menu po lewej stronie wybierz „Biblioteka” i znajdź „YouTube Data API v3”. Kliknij „Włącz”.
  4. Utwórz dane logowania: Przejdź do sekcji „Dane logowania” i kliknij „Utwórz dane logowania”. Wybierz „Klucz API”. Skopiuj klucz API, ponieważ będzie potrzebny w następnym kroku.

Krok 2: Zainstaluj i aktywuj wtyczkę w WordPress

  1. Instalacja wtyczki:
    • Wejdź do panelu administratora WordPress.
    • Przejdź do „Wtyczki” -> „Dodaj nową” -> „Prześlij wtyczkę”.
    • Prześlij plik z kodem wtyczki, który podałeś, i zainstaluj go.
    • Aktywuj wtyczkę.

PHP

<?php
/*
Plugin Name: Ninja YouTube Latest Videos
Description: Wyświetla najnowsze materiały wideo z kanału YouTube.
Version: 2.0
Author: Maciej Sajan
*/

function yt_get_latest_videos($atts) {
    $atts = shortcode_atts(array(
        'kanal' => '',
        'api_key' => '',
        'ilosc' => 5,
        'jaki-film' => 'wszystko'
    ), $atts);

    if (empty($atts['kanal']) || empty($atts['api_key'])) {
        return 'Brak wymaganych parametrów: kanal i api_key';
    }

    $channel_id = sanitize_text_field($atts['kanal']);
    $api_key = sanitize_text_field($atts['api_key']);
    $max_results = intval($atts['ilosc']);
    $jaki_film = sanitize_text_field($atts['jaki-film']);

    $api_url = sprintf(
        'https://www.googleapis.com/youtube/v3/search?key=%s&channelId=%s&part=snippet,id&order=date&maxResults=%d&type=video',
        $api_key,
        $channel_id,
        $max_results * 3 // Pobieramy więcej filmów niż potrzebujemy, aby móc je przefiltrować
    );

    $response = wp_remote_get($api_url);

    if (is_wp_error($response)) {
        return 'Błąd połączenia z API';
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (empty($data['items'])) {
        return 'Brak materiałów wideo';
    }

    $output = sprintf('<div class="ninja-filmiki-yt" jaki-film="%s">', esc_attr($jaki_film));
    $count = 0;

    foreach ($data['items'] as $item) {
        if ($count >= $max_results) {
            break;
        }

        if (isset($item['id']['videoId'])) {
            $video_id = $item['id']['videoId'];
            $title = esc_html($item['snippet']['title']);
            $video_details_url = sprintf('https://www.googleapis.com/youtube/v3/videos?key=%s&id=%s&part=contentDetails', $api_key, $video_id);
            $video_details_response = wp_remote_get($video_details_url);

            if (!is_wp_error($video_details_response)) {
                $video_details_body = wp_remote_retrieve_body($video_details_response);
                $video_details_data = json_decode($video_details_body, true);

                if (!empty($video_details_data['items'])) {
                    $duration = $video_details_data['items'][0]['contentDetails']['duration'];
                    $interval = new DateInterval($duration);
                    $is_short = ($interval->h == 0 && $interval->i == 0 && $interval->s < 60);

                    // Debugowanie: logowanie nazwy filmu i jego długości
                    error_log('Film: ' . $title . ' | Duration: ' . $duration . ' | Is Short: ' . ($is_short ? 'Yes' : 'No'));

                    if ($jaki_film === 'short' && !$is_short) {
                        continue;
                    } elseif ($jaki_film === 'normalny' && $is_short) {
                        continue;
                    }
                }
            }

            $output .= sprintf(
                '<iframe class="ninja-filmik-yt" width="560" height="315" src="https://www.youtube.com/embed/%s" title="%s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
                esc_attr($video_id),
                $title
            );

            $count++;
        }
    }

    if ($count == 0) {
        return 'Brak materiałów wideo';
    }

    $output .= '</div>';

    return $output;
}

add_shortcode('ninja-ostatnie-filmiki', 'yt_get_latest_videos');






function odpal_ninja_najnowsze_filmy_yt(){
    
    wp_register_style('ninja_najnowsze_filmy_yt_style', plugins_url('ninja_najnowsze_filmy_yt.css',__FILE__ ));

    wp_enqueue_style('ninja_najnowsze_filmy_yt_style');
    
}
add_action('init', 'odpal_ninja_najnowsze_filmy_yt');



?>

CSS:

.ninja-filmiki-yt {
    display: flex;
    padding: 0;
    margin: 0;
    column-gap: 20px;
    grid-row-gap: 20px;
    flex-wrap: wrap;

}

.ninja-filmiki-yt .ninja-filmik-yt {
    width: calc((100% - 20px) / 2);
    margin: 0;
    height: 320px;
    background-image: url(https://postepstudio.pl/wp-content/uploads/loading-min.gif);
    background-color: #474747;
    background-repeat: no-repeat;
    background-position: center;
    border: solid 3px #444;
    border-radius: 15px;
    aspect-ratio: 1.5;
    height: auto;

}

.ninja-filmiki-yt[jaki-film="short"] .ninja-filmik-yt {
    aspect-ratio: 0.5;
    width: calc((100% - 60px) / 4);
    height: auto;
}

@media (max-width:767px) {
    .ninja-filmiki-yt .ninja-filmik-yt {
        width: 100%;
    }

    .ninja-filmiki-yt[jaki-film="short"] .ninja-filmik-yt {
        width: calc((100% - 20px) / 2);
    }
}

Użycie:

[ninja-ostatnie-filmiki kanal="UC_x5XG1OV2P6uZZ5FSM9Ttw" api_key="YOUR_API_KEY" ilosc="5" jaki-film="normalny"] //przyjmuje też: "short" i ""wszystkie"

Wersja 1 – najnowsze z kanału

PHP

<?php
/*
Plugin Name: Ninja YouTube Latest Videos
Description: Wyświetla najnowsze materiały wideo z kanału YouTube.
Version: 1.1
Author: Maciej Sajan
*/

function yt_get_latest_videos($atts) {
    $atts = shortcode_atts(array(
        'kanal' => '',
        'api_key' => '',
        'ilosc' => 5
    ), $atts);

    if (empty($atts['kanal']) || empty($atts['api_key'])) {
        return 'Brak wymaganych parametrów: kanal i api_key';
    }

    $channel_id = sanitize_text_field($atts['kanal']);
    $api_key = sanitize_text_field($atts['api_key']);
    $max_results = intval($atts['ilosc']);

    $api_url = sprintf(
        'https://www.googleapis.com/youtube/v3/search?key=%s&channelId=%s&part=snippet,id&order=date&maxResults=%d',
        $api_key,
        $channel_id,
        $max_results
    );

    $response = wp_remote_get($api_url);

    if (is_wp_error($response)) {
        return 'Błąd połączenia z API';
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (empty($data['items'])) {
        return 'Brak materiałów wideo';
    }

    $output = '<div class="ninja-filmiki-yt">';
    foreach ($data['items'] as $item) {
        if (isset($item['id']['videoId'])) {
            $video_id = $item['id']['videoId'];
            $title = esc_html($item['snippet']['title']);
            $output .= sprintf(
                '
                    <iframe  class="ninja-filmik-yt" width="500" height="250" src="https://www.youtube.com/embed/%s" title="%s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                ',
                esc_attr($video_id),
                $title
            );
        }
    }
    $output .= '</div>';

    return $output;
}

add_shortcode('ninja-ostatnie-filmiki', 'yt_get_latest_videos');

















function odpal_ninja_najnowsze_filmy_yt(){
    
    wp_register_style('ninja_najnowsze_filmy_yt_style', plugins_url('ninja_najnowsze_filmy_yt.css',__FILE__ ));

    wp_enqueue_style('ninja_najnowsze_filmy_yt_style');
    
}
add_action('init', 'odpal_ninja_najnowsze_filmy_yt');

?>

CSS:



.ninja-filmiki-yt {
    display: flex;
    padding: 0;
    margin: 0;
    column-gap: 20px;
    grid-row-gap: 20px;
    flex-wrap: wrap;
    
}
.ninja-filmik-yt {
    width: calc((100% - 20px) / 2);
    margin: 0;
    height: 320px;
    background-image: url(https://postepstudio.pl/wp-content/uploads/loading-min.gif);
    background-color: #474747;
    background-repeat: no-repeat;
    background-position: center;
    
}

Użycie:

[ninja-ostatnie-filmiki kanal="UCrue4jCOYm54WFgSMynziKw" api_key="AIzaSyAhaJOSLMKZJj_GN5BSrWK9jTXxXr92wis" ilosc="10"]

Demo:

ninja-najnowsze-filmy-ytPobierz
Wróć