Wordpress

WordPress – Visual Composer (VC) Shortcode Temizliği

Yayın:
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 ...
GÖRSEL
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. 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ıyordu. 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.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.

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:
<?php 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/ya 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 fonksiyonu. 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 temizler. Elbette bu işlem sayfa içeriğinde meydana gelir ve veritabanında herhangi bir değişiklik gerçekleştirmez. 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ışında, şablon kullanımımız aynı kaldı. Örneğimizi biraz değiştirmeye ne dersiniz? Yeni WordPress temamda YoldanÇıktım‘da da olduğu üzere Semantic UI kullandım ve haliyle iframe etiketi yerine başta videolar olmak üzere iframe olarak eklenen medya ve sayfaları Semantic UI embed yapısı içerisinde kullanmak istedim. Bu amaçla şöyle bir şablon yazabiliriz: ]+>.*? İlgili şablon iframe’in aldığı özellikleri ve içeriğide kapsayacak şekilde etiketi seçecektir. Bu kullanımı yine PHP ve JavaScript ile aynı şekilde gerçekleştirebiliriz.
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 olsun.
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_excerpt) da kullanabilirsiniz. Alternatif kullanımlar görmek isterseniz Removing Visual Composer & Shortcodes From WordPress Content başlıklı içeriğe göz atabilirsiniz.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.