Dacă ai un site de prezentare imobiliară, un muzeu virtual sau vrei să oferi o experiență interactivă vizitatorilor tăi, un tur virtual este o soluție excelentă. În acest tutorial, îți voi arăta cum să implementezi un tur virtual interactiv pe site-ul tău WordPress folosind Pannellum, o bibliotecă JavaScript gratuită, și un shortcode personalizat.

La final, vei avea un tur virtual unde utilizatorii pot naviga între camere folosind hotspot-uri personalizate.

Ce este Pannellum și cum funcționează?

Pannellum este o bibliotecă open-source care îți permite să creezi tururi panoramice fără a necesita software suplimentar. Aceasta oferă o metodă simplă și eficientă pentru a afișa imagini 360° direct într-un browser, fără a fi nevoie de pluginuri suplimentare.

Cum să creezi un tur virtual personalizat în WordPress?

Pasul 1: Adaugă imaginile panoramice

Pentru a crea turul virtual, ai nevoie de imagini panoramice pentru fiecare încăpere. Acestea trebuie să fie în format equirectangular (2:1 aspect ratio) și să fie încărcate în biblioteca media a WordPress.

Pasul 2: Adaugă codul shortcode-ului în functions.php sau într-un plugin custom

Vom crea un shortcode în WordPress care va afișa turul virtual pe orice pagină sau postare. Acest shortcode va genera automat codul necesar pentru a încărca Pannellum și a configura scenele.

Codul complet pentru turul virtual:

function tur_virtual_shortcode() {
    // Imagini panoramice pentru fiecare cameră + hotspot-uri personalizate (uși)
    $house_tour_scenes = [
        "camera1" => [
            "image" => "https://tutoriale.site/wp-content/uploads/2025/02/shot-panoramic-composition-living-room-2-scaled.jpg",
            "yaw" => 20,
            "hotspots" => [
                ["pitch" => 0, "yaw" => 90, "scene" => "camera2", "text" => "Intră în dormitor"]
            ]
        ],
        "camera2" => [
            "image" => "https://tutoriale.site/wp-content/uploads/2025/02/shot-panoramic-composition-bedroom-scaled.jpg",
            "yaw" => 90,
            "hotspots" => [
                ["pitch" => 0, "yaw" => -90, "scene" => "camera1", "text" => "Înapoi în living"],
                ["pitch" => 0, "yaw" => 180, "scene" => "camera3", "text" => "Mergi în bucătărie"]
            ]
        ],
        "camera3" => [
            "image" => "https://tutoriale.site/wp-content/uploads/2025/02/shot-panoramic-composition-living-room-scaled.jpg",
            "yaw" => 180,
            "hotspots" => [
                ["pitch" => 0, "yaw" => 0, "scene" => "camera2", "text" => "Înapoi în dormitor"],
                ["pitch" => 0, "yaw" => 270, "scene" => "camera4", "text" => "Mergi pe balcon"]
            ]
        ],
        "camera4" => [
            "image" => "https://tutoriale.site/wp-content/uploads/2025/02/new-york-city-panorama-scaled.jpg",
            "yaw" => 270,
            "hotspots" => [
                ["pitch" => 0, "yaw" => 90, "scene" => "camera3", "text" => "Înapoi în bucătărie"]
            ]
        ]
    ];

    ob_start();
    echo '<div style="margin-top: 20px;">';
    echo '<div id="panorama" style="width: 100%; height: 500px;"></div>';
    echo '</div>';
    echo '<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.min.js"></script>';
    echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">';
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            var scenes = ' . json_encode($house_tour_scenes) . ';

            var viewer = pannellum.viewer("panorama", {
                "default": {
                    "firstScene": "camera1"
                },
                "scenes": {';

    foreach ($house_tour_scenes as $scene => $data) {
        echo '"' . $scene . '": {
                    "type": "equirectangular",
                    "panorama": "' . esc_url($data["image"]) . '",
                    "yaw": ' . $data["yaw"] . ',
                    "hotSpots": [';
        
        if (!empty($data["hotspots"])) {
            $hotspotArray = [];
            foreach ($data["hotspots"] as $hotspot) {
                $hotspotArray[] = '{
                    "pitch": ' . $hotspot["pitch"] . ',
                    "yaw": ' . $hotspot["yaw"] . ',
                    "type": "scene",
                    "text": "' . esc_html($hotspot["text"]) . '",
                    "sceneId": "' . esc_html($hotspot["scene"]) . '",
                    "cssClass": "hotspot-door"
                }';
            }
            echo implode(',', $hotspotArray);
        }

        echo ']
                },';
    }

    echo '}
            });

            viewer.loadScene("camera1");
        });
    </script>';

    // Stilizare pentru ușă
    echo '<style>
        .hotspot-door {
            background: url("https://tutoriale.site/wp-content/uploads/2025/02/WhatsApp-Image-2025-01-16-at-17.18.04-removebg-preview.png") no-repeat center center;
            background-size: contain;
            width: 80px;
            height: 120px;
            cursor: pointer;
            border-radius: 5px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .hotspot-door:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }
    </style>';

    return ob_get_clean();
}
add_shortcode('tur_virtual', 'tur_virtual_shortcode');

Pasul 3: Folosirea shortcode-ului

Adaugă [tur_virtual] într-o pagină sau postare și vei avea un tur virtual interactiv!

Concluzie

Acest tutorial te-a ghidat pas cu pas în crearea unui tur virtual folosind WordPress și Pannellum. Poți adăuga mai multe camere, personaliza hotspot-urile și ajusta stilul pentru o experiență mai interactivă. Încearcă-l și oferă vizitatorilor o experiență unică!