WordPresste yazılarınızda uzun linkler eklediğinizde link bazen taşıyor ve sitenin css yapısını bozabiliyor.

Çoğu tema buna önlem almıyor ve bu durumda uzun link paylaşımlarında sitede kayma oluyor.

Kendi sitemde mobilde dolaşırken aşağıdaki manzara ile karşılaşınca durumu fark ettim!

Resimde göreceğiniz üzere site kaymış. Mobil cihazlarda kayma yapıyor ama bilgisyarda bakınca sorun göremiyorsunuz.

Çünkü monitörler büyük ve uzun yazıları sığdırıyor.

Aslında olması gereken görüntü aşağıdaki gibi cuk oturan bir görüntüdür.

Google da aradım taradım:

WordPress Css Long Link dedim short link dedim pek sonuç çıkmamıştı ki diplerden bir sonuç çıkardım sonunda!

Yapmanız gereken gayet basit:

WordPresste verdiğiniz Linklerin css yapı karşılığı dosyada a olarak geçer.

Aslında sadece wordpresste değil her yerde bu böyledir.

Bu koddan yola çıkarak…

Kodun Bize Lazım Olan Şekli budur!

a {word-break: break-all;}

Gayet basit dimi 🙂

Bu kodu wordpressste:

ayarlarda / görünüm / özelleştir / gelişmiş seçenekler / ek css

bölümüne bir yere yapıştırırsanız göreceksiniz ki artık linkler mobile sayfalarda kaymayacak.

Bu kodu temayı bozan kayma yapan diğer argümanlara da ekleyebilirsiniz.

Sizde bu kod çalışmaz ise şunu da deneyebilirsiniz bende sadece üstteki çalıştı:

a {
display: block;
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Dikkat: Arkadaşlar bu kodu uzun kulanım süresince gördüm ki bazı yerlerde başlıklar kelime olarak alt satıra inmiyor. Son olarak size bir kod vereceğim bunu ekleyin sorun genel anlamda çözülüyor.
Kaynak: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

/* Kodun başına ".entry a" ben kendi temamda kullandığım "entry" class tanımını ve "a" link tanımını yazdım siz kendinize göre uyarlarsınız */

.entry a  {

/* Bunlar teknik olarak aynı olsa da ikisini de kullanmak lazım */
   overflow-wrap: break-word;
   word-wrap: break-word;
/* Bunları da ekleyelim */
   word-break: break-all;
   word-break: break-word;
  -ms-word-break: break-all;

/* Destekleniyorsa, sözcüğün kırıldığı yere kısa çizgi ekler (Göz Kırpma Yok) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
   hyphens: auto;
}

100numaraliadam ile kalın hoşçakalın…