WordPress'te oEmbed Genişliğini ve Yüksekliğini Dinamik Olarak Değiştirme

Gömülü içeriğinizin ekran boyutundan bağımsız olarak WordPress web sitenizde mükemmel görünmesini mi istiyorsunuz?

Varsayılan olarak WordPress, gönderilerinize ve sayfalarınıza video ve diğer oEmbed'leri yerleştirme konusunda harika bir iş çıkarır. Ancak, deneyimlerimize dayanarak, bazen boyutları üzerinde daha fazla kontrole ihtiyacınız olur.

Gömülü öğelerin genişliğini ve yüksekliğini dinamik olarak değiştirme yeteneği, duyarlı tasarım için önemlidir ve web sitenizin telefonlarda, tabletlerde ve masaüstlerinde harika görünmesini sağlar. Ayrıca, daha cilalı bir görünüm için içeriğinizin düzenini ince ayarlamanıza olanak tanır. 

Bu makalede, WordPress'te oEmbed genişliğini ve yüksekliğini dinamik olarak nasıl değiştireceğinizi göstereceğiz.

WordPress'te Dinamik oEmbed Genişliği ve Yüksekliği Neden Ayarlanır

WordPress, oEmbed adlı bir teknolojiyi kullanarak gönderilerinize ve sayfalarınıza üçüncü taraf içeriklerini yerleştirmeyi kolaylaştırır.

Bu, WordPress'e kolayca YouTube videoları, Facebook gönderileri, TikTok videoları, tweetler ve çok daha fazlasını eklemenizi sağlar. En iyi yanı, bu içeriğin WordPress web sitenizde barındırılmamasıdır, bu da sunucu kaynaklarınızı korur ve WordPress performansını iyileştirir.

Varsayılan olarak WordPress, yerleştirilen içeriğin yüksekliğini ve genişliğini gönderilerinize ve sayfalarınıza uyacak şekilde otomatik olarak ayarlama konusunda harika bir iş çıkarır.

Ancak, bazı kullanıcılar bu varsayılan davranışı değiştirmek isteyebilir. Örneğin, ana sayfa ve bireysel makaleler için farklı varsayılan gömme genişliği ve yüksekliği ayarlamak isteyebilirsiniz.

Bu, özel bir ana sayfa düzeni kullandığınızda veya kendi özel tema tasarımınız üzerinde çalıştığınızda kullanışlıdır.

Bununla birlikte, WordPress'te oEmbed içeriği için dinamik genişlik ve yüksekliği kolayca nasıl ayarlayacağınıza bir göz atalım.

İki farklı yöntem göstereceğiz, ilgilendiğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz.

• Yöntem 1. WordPress'te Dinamik Yerleştirme Genişliği ve Yüksekliği Ayarlama
• Yöntem 2. Dinamik oEmbed Genişliği ve Yüksekliğini Ayarlamak İçin CSS Kullanma

Yöntem 1. WordPress'te Dinamik Yerleştirme Genişliği ve Yüksekliği Ayarlama

Bu yöntem, WordPress web sitenize özel kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, web'den kod parçacıklarını WordPress'e nasıl kolayca yapıştıracağınıza dair kılavuzumuza göz atın. web'den WordPress'e kod parçacıkları yapıştırın.

Bu yöntem için, hangi WordPress sayfasının görüntülendiğini algılamak ve ardından oEmbed genişliği ve yüksekliği varsayılanlarını buna göre değiştirmek için WordPress koşullu etiketlerini kullanacağız.

Aşağıdaki kodu temanızın functions.php dosyasına, bir siteye özel eklentiye veya bir kod parçacıkları eklentisine eklemeniz yeterlidir.

//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Bu kodu, en iyi WordPress kod parçacığı eklentisi olan WPCode kullanarak eklemenizi öneririz. Bu, temanızın functions.php dosyasını düzenlemeden özel kod eklemenin en kolay yoludur.

Bu yöntemle sitenizi bozma endişesi taşımanıza gerek kalmaz. Ayrıca, WordPress temanızı değiştirirseniz, tüm özelleştirmelerinizi koruyabilirsiniz.

Başlamak için, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Adım adım talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.

Eklenti etkinleştirildikten sonra, WordPress yönetici kontrol panelinizden Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Parça)’ seçeneğini bulun ve ‘+ Özel Parça Ekle’ düğmesine tıklayın.

Ardından, ekranda görünen seçeneklerden kod türü olarak 'PHP Kod Parçacığı'nı seçin.

Bundan sonra, özel kod parçacığınız için, kodun ne işe yaradığını hatırlamanıza yardımcı olacak herhangi bir şey olabilecek bir ad ekleyebilirsiniz.

Ardından, yukarıdaki kod parçasını 'Kod Önizleme' kutusuna kopyalayıp yapıştırın.

İşlem bittiğinde, ekranın üst kısmındaki geçişi 'Etkin Değil'den 'Etkin'e getirin ve 'Parçacığı Kaydet' düğmesine tıklayın.

Farklı senaryoları algılamak için mevcut WordPress koşullu etiketlerinden herhangi birini kullanabilirsiniz.

WordPress'te özel bir açılış sayfası için oEmbed varsayılan genişliğini değiştirdiğimiz başka bir örneği burada bulabilirsiniz. özel bir açılış sayfası.

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Gördüğünüz gibi, bu kod yalnızca belirli bir sayfa kimliği için farklı bir varsayılan genişlik ve yükseklik ayarlar.

Yöntem 2. Dinamik oEmbed Genişliği ve Yüksekliğini Ayarlamak İçin CSS Kullanma

WordPress, web sitenizin farklı alanlarına otomatik olarak varsayılan CSS sınıfları ekler.

Bu CSS sınıfları daha sonra web sitenizin belirli alanlarındaki gömmelerin görünümünü değiştirmek için kullanılabilir.

Örneğin, WordPress temanızda page-id, post-id, category, tag ve daha birçok CSS sınıfı bulabilirsiniz. Bu CSS sınıflarını İncele aracını kullanarak öğrenebilirsiniz.

Benzer şekilde, WordPress de gönderilerinizdeki ve sayfalarınızdaki yerleştirme bloklarına CSS sınıfları ekler. Yine, yerleştirme bloğu tarafından kullanılan sınıfları bulmak için İncele aracını kullanacaksınız.

Bu CSS sınıflarına sahip olduğunuzda, oEmbed'ler için dinamik yükseklik ve genişlik ayarlamak üzere bunları kullanabilirsiniz. Örneğin, aşağıdaki örnek kodda, belirli bir gönderi kimliğindeki Pinterest yerleştirme bloğu için dinamik genişlik ve yükseklik ayarlıyoruz.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

CSS kodunuzu tema özelleştiricisinde özel CSS ekleyerek deneyebilirsiniz. Memnun kaldığınızda, değişikliklerinizi kaydetmeyi ve yayınlamayı unutmayın.

Umuyoruz ki bu iki yöntem, WordPress'te dinamik oEmbed genişliğini ve yüksekliğini kolayca nasıl ayarlayacağınızı öğrenmenize yardımcı olmuştur. Ayrıca bu kullanışlı WordPress ipuçları, püf noktaları ve hilelerine de göz atmak isteyebilirsiniz veya WordPress için en iyi sosyal medya eklentileri seçkimize bakabilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.