Bir demo sayfasını yazı içinde göstermek için harici sitenin HTML içeriğini sunucudan çekip olduğu gibi basmak iyi bir varsayılan değildir. Bu içerik sitenizin stilleriyle karışabilir, göreli dosya yolları bozulabilir ve uzak içerik güvenilir olmayabilir. Çoğu durumda normal demo bağlantısı veya izin verilen bir iframe daha uygundur.

Bağlantı mı, gömme mi?

Ziyaretçinin tam demo deneyimini görmesi gerekiyorsa “Demoyu yeni sekmede aç” bağlantısı en anlaşılır seçenektir. Yazı içinde küçük önizleme gerekiyorsa hedefin iframe ile açılmaya izin verdiğini kontrol edin. Hedef sitenin çerçeve engelleme başlıklarını kendi sitenizden aşamazsınız.

Sınırlandırılmış örnek

Aşağıdaki HTML bir demo.example.com yer tutucusu kullanır; gerçek ve güvendiğiniz demo adresiyle değiştirin. sandbox içeriğin izinlerini sınırlar. Bu örnek yalnızca betik çalıştırmaya izin verir; oturum, form ve başka işlevler gerektiren bir demo çalışmayabilir. İzinleri ihtiyacını bilmeden artırmayın.

Yalnızca izin verdiğiniz gerçek demo adresiyle değiştirilecek HTML örneği.

<iframe src="https://demo.example.com/"
    title="Demo önizlemesi" loading="lazy"
    sandbox="allow-scripts"
    style="width:100%;height:500px;border:0"></iframe>
<p><a href="https://demo.example.com/" target="_blank" rel="noopener noreferrer">Demoyu aç</a></p>

Sunucudan veri çekilecekse

Bir API veya metin verisi alacaksanız wp_safe_remote_get gibi WordPress HTTP işlevleriyle izinli hedef, zaman aşımı ve yanıt boyutu üzerinde kontrol kurun. Ziyaretçinin verdiği herhangi bir URL adresini file_get_contents ile çağırmayın. Gelen HTML içeriğini güvenilir kabul ederek doğrudan yayımlamayın.

Görünüm kontrolü

Mobilde çerçevenin taşmadığını ve yüklenmeyen demo için normal bağlantı bulunduğunu kontrol edin. İçerik yerine boş pencere görüyorsanız hedefin gömmeyi engellemesi olasıdır. Bu durumda okuyucuya çalışmayan çerçeve bırakmak yerine bağlantıyı sunun.

Kaynak ve devam

Güncel işlev ve seçenekler için resmî kaynağı inceleyin. Kodlar örnek uygulamalardır; temanızda veya eklentinizde aynı işlevin zaten bulunup bulunmadığını kontrol edin.