{"id":487,"date":"2024-06-12T14:01:30","date_gmt":"2024-06-12T12:01:30","guid":{"rendered":"https:\/\/projektninja.com\/devblog\/?p=487"},"modified":"2024-06-15T15:46:28","modified_gmt":"2024-06-15T13:46:28","slug":"wtyczka-ninja-ostatnie-filmy-z-yt","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/wtyczki-ninja\/wtyczka-ninja-ostatnie-filmy-z-yt\/","title":{"rendered":"Ninja Wtyczka: Ostatnie Filmy z YouTube w WordPress"},"content":{"rendered":"\n

Update Wersja 2 Najnowsze z podzia\u0142em na normalne i shorty<\/h2>\n\n\n\n

Je\u015bli chcesz mie\u0107 na swojej stronie WordPress zawsze najnowsze filmy z YouTube, wtyczka “Ninja YouTube Latest Videos” jest idealnym rozwi\u0105zaniem. W tym wpisie poka\u017cemy, jak j\u0105 skonfigurowa\u0107 i u\u017cywa\u0107.<\/p>\n\n\n\n

Krok 1: Utw\u00f3rz API Key na YouTube<\/h3>\n\n\n\n
    \n
  1. Zaloguj si\u0119 do Google Cloud Console<\/strong>: Wejd\u017a na stron\u0119 Google Cloud Console<\/a>.<\/li>\n\n\n\n
  2. Utw\u00f3rz nowy projekt<\/strong>: Kliknij na menu projektu i wybierz “Nowy projekt”. Nadaj mu nazw\u0119 i utw\u00f3rz.<\/li>\n\n\n\n
  3. W\u0142\u0105cz YouTube Data API v3<\/strong>: W menu po lewej stronie wybierz \u201eBiblioteka\u201d i znajd\u017a \u201eYouTube Data API v3\u201d. Kliknij \u201eW\u0142\u0105cz\u201d.<\/li>\n\n\n\n
  4. Utw\u00f3rz dane logowania<\/strong>: Przejd\u017a do sekcji \u201eDane logowania\u201d i kliknij \u201eUtw\u00f3rz dane logowania\u201d. Wybierz \u201eKlucz API\u201d. Skopiuj klucz API, poniewa\u017c b\u0119dzie potrzebny w nast\u0119pnym kroku.<\/li>\n<\/ol>\n\n\n\n

    Krok 2: Zainstaluj i aktywuj wtyczk\u0119 w WordPress<\/h3>\n\n\n\n
      \n
    1. Instalacja wtyczki<\/strong>:\n
        \n
      • Wejd\u017a do panelu administratora WordPress.<\/li>\n\n\n\n
      • Przejd\u017a do \u201eWtyczki\u201d -> \u201eDodaj now\u0105\u201d -> \u201ePrze\u015blij wtyczk\u0119\u201d.<\/li>\n\n\n\n
      • Prze\u015blij plik z kodem wtyczki, kt\u00f3ry poda\u0142e\u015b, i zainstaluj go.<\/li>\n\n\n\n
      • Aktywuj wtyczk\u0119.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n

        PHP<\/h3>\n\n\n\n
        <?php\n\/*\nPlugin Name: Ninja YouTube Latest Videos\nDescription: Wy\u015bwietla najnowsze materia\u0142y wideo z kana\u0142u YouTube.\nVersion: 2.0\nAuthor: Maciej Sajan\n*\/\n\nfunction yt_get_latest_videos($atts) {\n    $atts = shortcode_atts(array(\n        'kanal' => '',\n        'api_key' => '',\n        'ilosc' => 5,\n        'jaki-film' => 'wszystko'\n    ), $atts);\n\n    if (empty($atts['kanal']) || empty($atts['api_key'])) {\n        return 'Brak wymaganych parametr\u00f3w: kanal i api_key';\n    }\n\n    $channel_id = sanitize_text_field($atts['kanal']);\n    $api_key = sanitize_text_field($atts['api_key']);\n    $max_results = intval($atts['ilosc']);\n    $jaki_film = sanitize_text_field($atts['jaki-film']);\n\n    $api_url = sprintf(\n        'https:\/\/www.googleapis.com\/youtube\/v3\/search?key=%s&channelId=%s&part=snippet,id&order=date&maxResults=%d&type=video',\n        $api_key,\n        $channel_id,\n        $max_results * 3 \/\/ Pobieramy wi\u0119cej film\u00f3w ni\u017c potrzebujemy, aby m\u00f3c je przefiltrowa\u0107\n    );\n\n    $response = wp_remote_get($api_url);\n\n    if (is_wp_error($response)) {\n        return 'B\u0142\u0105d po\u0142\u0105czenia z API';\n    }\n\n    $body = wp_remote_retrieve_body($response);\n    $data = json_decode($body, true);\n\n    if (empty($data['items'])) {\n        return 'Brak materia\u0142\u00f3w wideo';\n    }\n\n    $output = sprintf('<div class=\"ninja-filmiki-yt\" jaki-film=\"%s\">', esc_attr($jaki_film));\n    $count = 0;\n\n    foreach ($data['items'] as $item) {\n        if ($count >= $max_results) {\n            break;\n        }\n\n        if (isset($item['id']['videoId'])) {\n            $video_id = $item['id']['videoId'];\n            $title = esc_html($item['snippet']['title']);\n            $video_details_url = sprintf('https:\/\/www.googleapis.com\/youtube\/v3\/videos?key=%s&id=%s&part=contentDetails', $api_key, $video_id);\n            $video_details_response = wp_remote_get($video_details_url);\n\n            if (!is_wp_error($video_details_response)) {\n                $video_details_body = wp_remote_retrieve_body($video_details_response);\n                $video_details_data = json_decode($video_details_body, true);\n\n                if (!empty($video_details_data['items'])) {\n                    $duration = $video_details_data['items'][0]['contentDetails']['duration'];\n                    $interval = new DateInterval($duration);\n                    $is_short = ($interval->h == 0 && $interval->i == 0 && $interval->s < 60);\n\n                    \/\/ Debugowanie: logowanie nazwy filmu i jego d\u0142ugo\u015bci\n                    error_log('Film: ' . $title . ' | Duration: ' . $duration . ' | Is Short: ' . ($is_short ? 'Yes' : 'No'));\n\n                    if ($jaki_film === 'short' && !$is_short) {\n                        continue;\n                    } elseif ($jaki_film === 'normalny' && $is_short) {\n                        continue;\n                    }\n                }\n            }\n\n            $output .= sprintf(\n                '<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>',\n                esc_attr($video_id),\n                $title\n            );\n\n            $count++;\n        }\n    }\n\n    if ($count == 0) {\n        return 'Brak materia\u0142\u00f3w wideo';\n    }\n\n    $output .= '<\/div>';\n\n    return $output;\n}\n\nadd_shortcode('ninja-ostatnie-filmiki', 'yt_get_latest_videos');\n\n\n\n\n\n\nfunction odpal_ninja_najnowsze_filmy_yt(){\n    \n    wp_register_style('ninja_najnowsze_filmy_yt_style', plugins_url('ninja_najnowsze_filmy_yt.css',__FILE__ ));\n\n    wp_enqueue_style('ninja_najnowsze_filmy_yt_style');\n    \n}\nadd_action('init', 'odpal_ninja_najnowsze_filmy_yt');\n\n\n\n?>\n<\/code><\/pre>\n\n\n\n
        CSS:<\/h3>\n\n\n\n
        .ninja-filmiki-yt {\n    display: flex;\n    padding: 0;\n    margin: 0;\n    column-gap: 20px;\n    grid-row-gap: 20px;\n    flex-wrap: wrap;\n\n}\n\n.ninja-filmiki-yt .ninja-filmik-yt {\n    width: calc((100% - 20px) \/ 2);\n    margin: 0;\n    height: 320px;\n    background-image: url(https:\/\/postepstudio.pl\/wp-content\/uploads\/loading-min.gif);\n    background-color: #474747;\n    background-repeat: no-repeat;\n    background-position: center;\n    border: solid 3px #444;\n    border-radius: 15px;\n    aspect-ratio: 1.5;\n    height: auto;\n\n}\n\n.ninja-filmiki-yt[jaki-film=\"short\"] .ninja-filmik-yt {\n    aspect-ratio: 0.5;\n    width: calc((100% - 60px) \/ 4);\n    height: auto;\n}\n\n@media (max-width:767px) {\n    .ninja-filmiki-yt .ninja-filmik-yt {\n        width: 100%;\n    }\n\n    .ninja-filmiki-yt[jaki-film=\"short\"] .ninja-filmik-yt {\n        width: calc((100% - 20px) \/ 2);\n    }\n}\n<\/code><\/pre>\n\n\n\n
        U\u017cycie:<\/p>\n\n\n\n
        [ninja-ostatnie-filmiki kanal=\"UC_x5XG1OV2P6uZZ5FSM9Ttw\" api_key=\"YOUR_API_KEY\" ilosc=\"5\" jaki-film=\"normalny\"] \/\/przyjmuje te\u017c: \"short\" i \"\"wszystkie\"<\/code><\/pre>\n\n\n\n
        Wersja 1 – najnowsze z kana\u0142u<\/h2>\n\n\n\n
        PHP<\/h3>\n\n\n\n
        <?php\n\/*\nPlugin Name: Ninja YouTube Latest Videos\nDescription: Wy\u015bwietla najnowsze materia\u0142y wideo z kana\u0142u YouTube.\nVersion: 1.1\nAuthor: Maciej Sajan\n*\/\n\nfunction yt_get_latest_videos($atts) {\n    $atts = shortcode_atts(array(\n        'kanal' => '',\n        'api_key' => '',\n        'ilosc' => 5\n    ), $atts);\n\n    if (empty($atts['kanal']) || empty($atts['api_key'])) {\n        return 'Brak wymaganych parametr\u00f3w: kanal i api_key';\n    }\n\n    $channel_id = sanitize_text_field($atts['kanal']);\n    $api_key = sanitize_text_field($atts['api_key']);\n    $max_results = intval($atts['ilosc']);\n\n    $api_url = sprintf(\n        'https:\/\/www.googleapis.com\/youtube\/v3\/search?key=%s&channelId=%s&part=snippet,id&order=date&maxResults=%d',\n        $api_key,\n        $channel_id,\n        $max_results\n    );\n\n    $response = wp_remote_get($api_url);\n\n    if (is_wp_error($response)) {\n        return 'B\u0142\u0105d po\u0142\u0105czenia z API';\n    }\n\n    $body = wp_remote_retrieve_body($response);\n    $data = json_decode($body, true);\n\n    if (empty($data['items'])) {\n        return 'Brak materia\u0142\u00f3w wideo';\n    }\n\n    $output = '<div class=\"ninja-filmiki-yt\">';\n    foreach ($data['items'] as $item) {\n        if (isset($item['id']['videoId'])) {\n            $video_id = $item['id']['videoId'];\n            $title = esc_html($item['snippet']['title']);\n            $output .= sprintf(\n                '\n                    <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>\n                ',\n                esc_attr($video_id),\n                $title\n            );\n        }\n    }\n    $output .= '<\/div>';\n\n    return $output;\n}\n\nadd_shortcode('ninja-ostatnie-filmiki', 'yt_get_latest_videos');\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nfunction odpal_ninja_najnowsze_filmy_yt(){\n    \n    wp_register_style('ninja_najnowsze_filmy_yt_style', plugins_url('ninja_najnowsze_filmy_yt.css',__FILE__ ));\n\n    wp_enqueue_style('ninja_najnowsze_filmy_yt_style');\n    \n}\nadd_action('init', 'odpal_ninja_najnowsze_filmy_yt');\n\n?>\n\n\n<\/code><\/pre>\n\n\n\n
        CSS:<\/h3>\n\n\n\n
        \n\n.ninja-filmiki-yt {\n    display: flex;\n    padding: 0;\n    margin: 0;\n    column-gap: 20px;\n    grid-row-gap: 20px;\n    flex-wrap: wrap;\n    \n}\n.ninja-filmik-yt {\n    width: calc((100% - 20px) \/ 2);\n    margin: 0;\n    height: 320px;\n    background-image: url(https:\/\/postepstudio.pl\/wp-content\/uploads\/loading-min.gif);\n    background-color: #474747;\n    background-repeat: no-repeat;\n    background-position: center;\n    \n}<\/code><\/pre>\n\n\n\n
        U\u017cycie:<\/h3>\n\n\n\n
        [ninja-ostatnie-filmiki kanal=\"UCrue4jCOYm54WFgSMynziKw\" api_key=\"AIzaSyAhaJOSLMKZJj_GN5BSrWK9jTXxXr92wis\" ilosc=\"10\"]<\/code><\/pre>\n\n\n\n
        Demo:<\/h3>\n\n\n\n
        \r\r\n