WordPress - Visual Composer (VC) Shortcode Temizliği

Kaynak ya da referans olarak web sayfama bağlantı barındıran pek çok tartışmayı yakın bir şekilde takip etmekte ve bu durumun yeni fikirler için oldukça besleyici olduğunu düşünmekteyim.

AA

Bunun yanı sıra elbette görev aldığım çalışmalarda, danışmanlık süreçlerinde de pek çok farklı durumla karşılaşmakta ve yeri geldikçe bu konulara dair içerikler yayınlamaya çalışıyorum.

Bu yazının temel aldığı durum ise bizzat sitenin kendisini ilgilendiriyor. Yakın zamanda yeni bir tasarım ile hem arayüzü hem de kullanıcı deneyimini iyileştirmeye yönelik bir adım attım. Detaylardan ayrıca bahsedeceğim bir yazı olacak, şimdilik bu sürecin küçük bir kesitinden bahsetmek istiyorum. Geçici bir süreç için tercih ettiğim, sonrasında ise uzunca bir süre sabit kalan ve üzerinde çeşitli düzenlemeler yaptığım Shopkeeper temasını sevsem de elbette yeterli ol(a)mıyordu1. Bunun pek çok nedeni var elbette, ancak özetlemek gerekirse; basit tasarım, maksimum işlevsellik. 2018’in son günlerinde süreç halindeki çalışmaların da son bulmasıyla birlikte kolları sıvadım ve yeni temayı tasarlayıp kodladım. Şu an için (7 Ocak 2019) %70’lik bir oranda bitti diyebilirim. Her neyse.

WordPress Admin Paneli

Yazının konusuna geçiş yapmak adına, eski tema bağlamında, içeriklerde sıklıkla Visual Composer (VC) eklentisinden faydalanmış ve pek çok alanı shortcode kullanarak şekillendirmiştim. Yeni temada herhangi bir sayfa içeriği oluşturma/düzenleme (page builder) eklentisini kullanmak istemedim ve haliyle önceki eklentinin de izlerinin silinmesi bir iş haline geldi. İlgili eklentileri kullandıysanız bilirsiniz, kendi stilleri vardır, içerikleri kendi oluşturdukları etiketler aracılığıyla şekillendirir ve buna dair class ve id’ler oluşturular. Tek tek yazıları incelemekten ve sırf bu nedenle arayüzü bekletmektense pratik regex işlemiyle süreci kısaltmata karar verdim.

VC Visual Composer

Visual Composer (VC) Shortcode Temizliği

Malzemelerimiz bir adet preg_replace içeren add_filter yapısı. add_filter için aslında ayrı bir yazı yayınlamak daha uygun olacaktır. Ancak, özetlemek gerekirse; kendisi eklentileri filtrelemeyi ve düzenlemeyi mümkün kılan olay kancasıdır. Temel kullanımı şu şekildedir:

add_filter( $tag, $function_to_add, $priority, $accepted_args);
  • $tag filtreleme ve genişletme yapılacak fonksiyon (string)
  • $function_to_add filtre / genişletme amacıyla oluşturduğumuz fonksiyon (callable)
  • $priority filtrenin uygulanma önceliği (int). Boş bırakılması durumunda 10 değerini alır.
  • $accepted_args shortcode kullanımında ve/veya fonksiyon için gerekli olabilecek ek değerler için kullanılır (int). Boş bırakılırsa 1 değerini alır.

CF7 Form Elemanını Hotjar Whitelisting Olarak Tanımlamak başlıklı yazım aslında add_filter için örnek bir kullanıma sahip ve CF7 eklentisi üzerinde bir değişiklikle form elemanlarına müdahale etmiştik. İlgili yazıya hızlıca bir göz atabilirsiniz.

preg_replace ise düzenli ifade kullanarak arama ve dizgede değişiklikler yapma imkanı sunan bir PHP fonksiyonu2. Temel kullanımı şöyle:

  • $pattern aranacak şablon. Tek bir dizge olabileceği gibi çok sayıda dizge içeren bir dizi de olabilir.
  • $replacement yer değiştirme için kullanılacak dizge veya dizi.
  • $subject belirtilen şablonun aranacağı, yer değiştirmeye konu dizge veya dizi.
  • $limit her konu dizgesinde her şablon için olası azami yer değiştirme sayısı. Ön tanımlı olarak -1 alır, yani sınırsızdır.
  • $count yapılan yer değiştirmelerin sayısını alır. Genelde pek tanımlanmaz.

Evet, bu kadar açıklamadan ardından, artık functions.php dosyasına eklememiz gereken fonksiyonumuza bakabiliriz.

add_filter( 'the_content', 'removeVCShortcodes' );
function removeVCShortcodes( $currentContent ) {
    $cleanContent = preg_replace('/\[(.*?)\]/', '', $currentContent );
    return $cleanContent;
}

add_filter ile the_content içeriğinde dönen metin yığınında filtreleme yaparız. preg_replace şablonu olarak tanımladığımız değer \[(.*?)\] içeriğimiz içerisinde [...] olarak tanımlı değerleri alır ve yeni bir tanım yapmadığımız (replacement) için temizler3. Elbette bu işlem sayfa içeriğinde meydana gelir ve veritabanında herhangi bir değişiklik gerçekleştirmez4. Siz sayfa içeriğini düzenlerken kodları görseniz de sayfanız ziyaretçilerinize ilgili kodlar temizlenmiş olarak sunulur.

Şimdi bir de aynı işlemi JavaScript ile yapalım.

\[(.*?)\]

Kullanımda pek bir değişiklik olmadı. preg_replace() kullanırken / arasına ilgili şablonu yazarız. JavaScript kullanımında buna gerek yoktur. Bu haliyle Visual Studio Code kullanıyorsanız şablonu arama işleminde de bu şekilde kullanım gerçekleştirebilirsiniz. Peki, SQL tarafında nasıl Visual Composer kodlarını bulabilirim?

SELECT post_content FROM `wp_posts` WHERE (post_content REGEXP '\[(.*?)\]')

İşlemi bir SQL satırı içerisinde tanımlamamız dışında5, şablon kullanımımız aynı kaldı. Örneğimizi biraz değiştirmeye ne dersiniz? Bu amaçla şöyle bir şablon yazabiliriz: ]+>.*?. Bu kullanımı yine PHP ve JavaScript ile aynı şekilde gerçekleştirebiliriz6.

SELECT post_content FROM `wp_posts` WHERE (post_content REGEXP '<iframe[^>]+>.*?</iframe>')

Bir başka örnek için tekrar PHP'ye dönelim ve preg_replace ile bir bul/değiştir işlemi yapalım. Düzenlemek istediğimiz durumda da sadece belirli bir class değerine sahip strong etiketlerini içeriklerinde değişiklik olmaksızın aynı class değerinde h4 etiketlerine dönüştürmek olsun7.

preg_replace('/<strong .*?class="(.*?cssClass.*?)">(.*?)<\/strong>/','<h4 class="$1">$2</h4>', $subject)

**$replacement alanındaki tüm tanımlamalarımız ilgili değişiklik esnasında uygulanır. Örneğin $pattern alanından aldığımız ilk değer $1 yerine farklı bir class tanımlayabiliriz ya da ilgili class değerini hiç kullanmayabiliriz. İkinci değer $2 ise ilgili kod alanı içerisindeki metni taşımaktadır. Dolayısıyla yeni etiket içerisine de bu değer taşınır.

Son olarak WPI-CLI ile nasıl ara ve değiştir işlemi yapabileceğimize bakalım. Yalnız, bu kod satırını uygularken dikkatli olmalısınız. Yapacağınız işlemi geri alamayacağınız için --dry-run parametresi ile test işlemleri yapmanızı öneririm.

wp search-replace '\[(.*?)\]' wp_posts --include-columns=post_content --skip-columns=guid --regex --skip-themes --skip-plugins --log --dry-run --path='wordpress-kurulumunun-oldugu-dizin'

İlgili işlemi ve örnekleri pek çok amaç doğrultusunda yeni yeteneklerle çeşitlendirmek mümkün. Yazının bağlamını kaybetmemek adına ilgili işlemler için WordPress fonksiyonlarını ve SQL tablolarını kullanmaya gayret ettim. Hızlı bir şekilde ekleme yapmak gerekirse, the_content yerine bir eklenti ya da bir başka ön tanımlı fonksiyon (Örneğin, the_excerpt8) da kullanabilirsiniz. Alternatif kullanımlar görmek isterseniz Removing Visual Composer & Shortcodes From WordPress Content9 başlıklı içeriğe göz atabilirsiniz.