ChatGPT ile WordPress Eklentisi Oluşturma Yolculuğum: 120 Saatlik Çalışma, Önceden Deneyim Yok
Yayınlanan: 2024-08-28Dürüst olacağım: Aslında ChatGPT ile birkaç saat içinde bir WordPress eklentisi oluşturabileceğimi düşündüm. Veya en azından tüm YouTube eğitimleri ve Twitter yazışmaları beni buna inandırdı.
Ama size şunu söyleyeyim, bu hikayelerde birkaç önemli ayrıntı atlanıyordu; tam olarak söylemek gerekirse yaklaşık 120 saatlik ayrıntı. Evet, eklentiyi baştan sona oluşturmam aslında bu kadar sürdü: 120 saat!
Bağlam açısından, eklenti veya WordPress geliştirme konusunda önceden herhangi bir deneyimim yoktu, ancak yine de dalmaya karar verdim. Her ne kadar bu mücadeleyi sevsem de beklediğimden çok daha zordu. Yolun her adımında, birçoğunun varlığından bile haberdar olmadığım barikatlarla birbiri ardına karşılaştım. Sinir bozucuydu ama aynı zamanda çok büyük(!) bir öğrenme deneyimiydi.
Benim adımlarımı takip etmeyi planladığınızı varsayarsak, önceden bu makalenin tamamını okumanızı şiddetle tavsiye ederim. Bunu bir çeşit kendini tanıtma olarak söylemiyorum. Bunu söylüyorum çünkü bu sizi gerçekten saatlerce, hatta günlerce ekstra işten kurtaracak. Bu süreçte karşılaştığım o kadar çok şey var ki, olay bitene kadar bunların önemli olduğuna dair hiçbir fikrim yoktu. Ne yazık ki bu, önlenebilecek sayısız kod revizyonuna (pek çok hayal kırıklığıyla dolu) yol açtı. Bunu okursanız bu sorunu yaşamazsınız.
Bu kim ve kim için değil 🙋♂️
Geçmişinize ve becerilerinize bağlı olarak, bunu yapmak için "yeterince nitelikli" olup olmadığınızı merak ediyor olabilirsiniz. Şu kadarını söyleyeyim:
Herhangi bir önkoşul kodlama bilgisine sahip olmanıza gerek olmasa da, bazı kodları öğrenme ve bir eklenti geliştirmenin genel süreci konusunda istekli olmanız gerekir . Geçilmesi gereken pek çok aşama vardır ve çoğu zaman bir aşamanın, onu tamamlamak için ihtiyaç duyduğunuz beceriler (hatta araçlar) açısından diğeriyle hiçbir ilgisi yoktur. Kısacası öğrenmeye hazır olun – ÇOK .
Eklentinizin niteliğine ve nihai hedeflerinize bağlı olarak, nihai ürünü ortaya çıkarmanız kolaylıkla bir ay veya daha fazla zaman alabilir.
Ayrıntılara yönelik güçlü bir göze sahip olmak ve kalıpları tanımak, PHP, JavaScript ve CSS'nin ne yaptığını bilmek gibi oldukça yardımcı olacaktır. Onlarla nasıl kod yazacağınızı bilmenize gerek yok ama amaçlarını ve nasıl kullanıldıklarını anlamak bir avantaj olacaktır.
Yukarıdakilerin hiçbiri sizi tanımlamıyorsa, özellikle de öğrenme isteğiniz varsa ve hızlı ve kolay bir çözüm arıyorsanız, bu size göre değildir. Ne hızlı ne de kolay. Ancak çaba gösterirseniz mümkündür.
Eğer bu sizin için sorun değilse, o zaman başlayalım.
Birinci aşama: Eklentinizin ayrıntılı bir şekilde haritasını çıkarın 📝
Kendinize sormanız ve yanıtlamanız gereken ilk soru , ne tür bir eklenti oluşturmak istediğim ve bunun ne yapmasını istediğimdir.
Gerçekten oluşturmaya ve kodlamaya başlayabilmeniz için bu konuda acele etme eğiliminde olabilirsiniz, ancak buna zaman ayırmanızı tavsiye ederim. Burada yapacağınız şey, istemlerinizin temelini oluşturacak ve anında bir şeyler eklemek yerine düzenli bir şekilde oluşturmanıza olanak tanıyacaktır. Bu aşamayı etkili bir şekilde atlatmak için aşağıdakileri göz önünde bulundurun:
- Eklentinizin hangi işlevlere sahip olmasını istiyorsunuz?
- Wp-admin tarafının nasıl görünmesini istiyorsunuz?
- Eklentinin iş akışını görselleştirmek için tel çerçeveler veya akış şemaları oluşturun.
- Haritasını çıkarın ve en küçük ayrıntısına kadar açıklayın.
- Özel kullanım için mi yoksa genel erişim için WordPress deposunda mı sunmak istediğinize karar verin.
Fonksiyonlar
wp-admin
Ardından, eklentinizin WordPress yönetici alanında nasıl görünmesini ve çalışmasını istediğinizi düşünün. Bu şunları içerir:
- Ayarlar sayfaları : Hangi seçenekleri sunmak istiyorsunuz? Bunları nasıl organize edeceksiniz?
- Menüler : Eklentiniz yönetici menüsünde nerede görünecek? Alt menüleri olacak mı?
- Meta Kutular : Eklentiniz gönderiler veya sayfalarla etkileşime giriyorsa özel meta kutulara ihtiyaç duyacak mı?
- Tablolar : Veri depoluyorsanız, yöneticinin incelemesi için bunu nasıl görüntüleyeceksiniz?
Benim durumumda, kısa kodlarımın her biri için sekmeler içeren bir ana ayarlar sayfası, dokümantasyon için ayrı bir sayfa ve ayrıca kullanıcıların benimle iletişime geçmek istemesi durumunda iletişim formunun bulunduğu bir sayfaya karar verdim. Aklıma şu geldi:
Ne yazık ki benim için - ama sizin için değil çünkü bunu okuyorsunuz - planlama aşamasında eklentimin ön uç işlevselliğine o kadar odaklandım ki, işlerin wp-admin tarafını tamamen ihmal ettim.
Bu, önceden planladığımdan daha uzun sürmesine neden oldu çünkü sahip olduğum şeyin eksik olduğunu veya kullanıcı deneyiminin zayıf olduğunu fark ettiğimde kodu gözden geçirmek zorunda kalıyordum. Eğer bunu önceden planlasaydım ya da daha iyisi tel çerçeveler kullansaydım, o zaman bu aşama çok daha sorunsuz ilerleyebilirdi; bu da bir sonraki noktaya geçiş için mükemmel bir adım.
Tel çerçeveler veya akış şemaları
Her şeyi birleştirin ve ayrıntılı olarak açıklayın
WordPress deposu aracılığıyla özel kullanım ve genel erişim
İkinci aşamaya geçmeden önce vermeniz gereken bir karar daha var. Bu karar, bu eklentiyi kimin için oluşturacağınızla ilgilidir.
Bunu yalnızca kendiniz (veya müşteriniz) için mi yapmak istiyorsunuz? Veya genel kullanıma sunulması için WordPress deposuna onay için göndermek mi istiyorsunuz?
Teknik olarak bu kararı henüz kesinlikle vermenize gerek yok. Ancak geriye dönüp baktığımda, keşke bunu süreçte daha önce yapsaydım diyorum. Bu yüzden bunu şimdi yapmanızı öneriyorum.
Bunun nedeni, başından beri amacımın eklentimi depoya göndermek olmasıydı, ancak eklentimi başlangıçta WordPress kodlama standartlarına uymadan oluşturdum. Yalnızca işlevselliğe odaklandım ve onu hatasız çalışacak bir noktaya getirdim.
Sonuç olarak, kodumu standartlara uygun hale getirmek için birçok ek kod değişikliği yapmak zorunda kaldım. Söylemeye gerek yok, bu çok zaman aldı ve önlenebilirdi.
Bununla birlikte, yalnızca özel kullanım için bir eklenti oluşturmayı planlıyor olsanız bile, yine de kodlama standartlarına uymanızı tavsiye ederim. Bu, eklentinizin sonraki WordPress sürümlerinde arızalanma olasılığını azaltacaktır. Süreç açısından temel fark, standartların işlevsel olmayan yönleri konusunda bu kadar anal davranmanıza gerek kalmayacak olmasıdır.
Örneğin, // Use global default. sonuna nokta koymanız gerekmektedir. Dönemin işlevsel bir amacı yoktur, ancak eksik olması durumunda standartlara göre "hata" olarak işaretlenecektir. Özel bir yapı için bu tür "hataları" göz ardı edebilirsiniz.
İkinci aşama: ChatGPT'ye geliştirmeye başlaması için ayrıntılı bir bilgi verin 🗣️
Buradaki ana fikir, GPT'ye açık talimatlarla eklentinize genel bir bakış sunmaktır. Genel bir öneri olarak evin tamamını bir anda yapmaya çalışmaktan kaçınmanızı tavsiye ederim. Tuğla tuğla yaklaşmak daha iyidir.
Örnek olarak benim eklentimi oluşturacağınızı varsayalım.
Sekiz efekti olmasına rağmen GPT'ye tek efektle başlamak istediğinizi söylemenizi tavsiye ederim. Sanki sekiz efektli bir eklenti yerine tek efektli bir eklenti oluşturuyormuşsunuz gibi. Ardından, arka uç ayarlar alanı da dahil olmak üzere efektin çalıştığından emin olmak için kontrol edin. Hataları düzeltin ve her şey yolunda göründüğünde bir sonraki efekti ekleyin. Daha sonra bu süreci tek tek takip edin.
Bunu bu şekilde yapmanın nedeni, kodunuz karmaşıklaştıkça kodunuza gelebilecek hataları düzeltmeyi kolaylaştırmasıdır. GPT kodunuzun tamamını aynı anda oluşturuyorsa ve pek çok şey çalışmıyorsa, düzeltilmesi çok daha zor olacaktır.
Yine de GPT'ye eklentiye ilişkin genel vizyonunuza ilişkin geniş bir genel bakış sunmak istiyorsunuz, ancak önce belirli bir şeye odaklanarak istemi sonlandırın.
Size biraz zaman kazandırmak için, başlamanız için ChatGPT'ye verebileceğiniz örnek bir şablon oluşturdum.
Parantez [X] içindeki bölümlerin tamamlanması için giriş yapmanız gerekir. Oluşturmayı planladığınız eklentinin türüne bağlı olarak, onu daha fazla düzenlemeniz gerekebilir veya gerekmeyebilir.
Bilgi istemindeki her şeyi anlamadıysanız endişelenmeyin, ben de anlamadım. Süreç ilerledikçe öğreneceksiniz.
Benim önerim 🤖
I want to build a WordPress plugin called [name] that does the following: [General overview but don't give GPT the specifics yet] I'd like it to work via [Refer back to the section "combine everything and describe it in detail" from phase one; think about how you want your plugin to function - if you're not sure, then you can delete this part] . I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well] I plan on using the following tools for this process: - Docker and/or Local by Flywheel {Choose one or use both} - Terminal (MAC) {if you're using a PC, substitute with Command Prompt} - Sublime Text - Chrome and Chrome inspector tool Also, I want to use GitHub for version control to track changes and collaborate effectively. I will use the default WordPress template provided by GitHub to generate the code for the .gitignore file. However, I will need your help to walk me through how to set up a repository and how to commit my files to it. For the main PHP file, the author name should be [your name] and the author URI should be [your website if you have one] . For any code you generate, please use tabs for indentation and not spaces. {important if you plan on submitting your plugin to the WordPress repository} If you need to enqueue any scripts, please ask me questions to help me figure out whether we should use conditional loading or if we should enqueue globally. In addition, when generating CSS, please follow BEM (Block Element Modifier) methodology. Let's begin with [insert which feature you'd like to build first] Please [Optional: help me setup Local by Flywheel and then] generate the initial PHP file and advise on next steps after that.ChatGPT'ye isteminizi sağladıktan sonra, aşağıda özetlediğim adımların geri kalanında size yol gösterecektir. ChatGPT'nin ruh haline veya benim belirttiğim süreci takip etme isteğinize bağlı olarak, her şeyi listeleme şeklimin sunulduğu kadar doğrusal olmayabileceğini belirtmekte fayda var.
Ne demek istediğime dair bir fikir vermek için istemi kendim üç farklı kez test ettim. Local by Flywheel'i kurmama ve ilk PHP dosyasını oluşturmama yardımcı olmasının yanı sıra, diğer adımları her seferinde farklı bir şekilde yapmayı seçti.
İlk deneme
İlk denememde ChatGPT, PHP dosyasını oluşturmanın ötesine geçmedi ve bundan sonra nasıl ilerlemek istediğime dair bana iki seçenek sundu. Özellikle, komut dosyalarını koşullu yüklemeyle sıraya alma talimatlarını takip etti ve bundan da bahsetti.
İkinci deneme
İkinci deneme, en basit PHP dosyasıyla sonuçlandı, ancak adım adım çalışma açısından en kapsamlı genel yanıttı. Proje dizinlerini ayarlamak ve Sublime'ı başlatmak için hemen Terminal'i kullanmaya başladı. Hatta Git deposunun nasıl kurulacağı konusunda bana koçluk yapacak kadar ileri gitti.
Üçüncü deneme
Üçüncü deneme de ilk denemeye biraz benziyordu. Ancak ilk denemeden farklı olarak ChatGPT, komut dosyaları için koşullu yükleme ayarlamadı ve bana bu konuda soru sormadı. Bunları varsayılan olarak global olarak oluşturdu.
Paket servis
Bu üç denemeyi sizinle kısaca paylaşmamın nedeni, daha önce iş akışının mutlaka standartlaştırılamayacağına dair söylediklerimi güçlendirmek değil, aynı zamanda istemin GPT için olduğu kadar sizin için de geçerli olduğunu belirtmekti.
Demek istediğim, ChatGPT'nin ne yaptığına - ne yapmadığına - dikkat etmek ve eğer düşerse onu tekrar yoluna koymak size kalmış. Dolayısıyla, bu yolculukta ilerlerken komut istemine ve ayrıca biraz sonra hata ayıklama bölümünde paylaşacağım işaretçilere geri dönmeyi unutmayın. ChatGPT'ye, ihtiyaç duyduğunuz kadar yapmasını istediğiniz şeyi yapmasını hatırlatın ve yeniden yönlendirin.
Eklentimi indirin ve test edin 📥
Eklentimin "çalışan sürümünü" denemek isterseniz zip dosyası aşağıdadır. Bunu yakın gelecekte WP depo sürümünü de içerecek şekilde güncelleyeceğim, ancak bu şimdilik onu kullanmanıza izin verecek.
Üçüncü aşama: araçlar, komut dosyaları, dizinler ve Git 👩💻
Bu aşamada eklentinizi oluşturmak için zemin hazırlayacaksınız. Ayrıca, özellikle komut dosyaları yüklemeye ve Terminal'i (veya PC kullanıyorsanız Komut İstemi'ni) kullanmaya başladığınızda, öğrenme eğrisinin hızla artacağı yerdir. İşte döküm:
- Hangi yerel ortam aracını kullanmak istediğinize karar verin (örneğin, Local by Flywheel, Docker).
- Proje dizinlerinizi ayarlayın.
- Komut dosyalarınızı yükleyin (örneğin, npm, Composer).
- Bir Git deposu (“repo”) oluşturun ve eklenti dosyalarınızı buraya kaydedin (yükleyin)
Yerel ortam oluşturun
Proje dizinlerini ayarlama
Komut dosyalarını yükleyin
Git deposu ("repo") oluşturun ve dosyalarınızı kaydedin
Önceki adımların tümü geride kaldığına göre artık bir Git deposu oluşturmanın ve ilk dosyalarınızı ona kaydetmenin zamanı geldi. Bu adım, projenizin başlangıç noktasının anlık görüntüsünü oluşturur.
Ben şahsen GitHub'u kullandım çünkü Themeisle'de bunu kullanıyoruz, yani orada zaten bir hesabım vardı, ancak başka platformlar da var (örn. GitLab, Bitbucket). GitHub dışında bir platform kullanmaya başlarsanız üçüncü aşamada bilgi istemi şablonunu ayarlamayı unutmayın .
Kısalık adına, bunun nasıl yapılacağı konusunda size yol göstermeyeceğim . Bu adıma ulaştığınızda ChatGPT, Terminal / Komut İsteminize hangi komutları yazmanız gerektiği de dahil olmak üzere süreç boyunca size adım adım rehberlik edebilir.
İlk dosyalarınızı işlerken şu noktaları aklınızda bulundurun:
- Neyi taahhüt ettiğinizi gözden geçirin: Yalnızca gerekli dosyaları eklediğinizden emin olun. Geçici veya oluşturulmuş dosyaları hariç tutmak için
.gitignoredosyanızı kullanın. - Açık bir taahhüt mesajı yazın: "İlk taahhüt: Temel proje yapısı ve yapılandırmaları" gibi bir şey işe yarar.
- Mükemmellik konusunda endişelenmeyin: Bu sadece başlangıç noktanız. Eklentinizi geliştirirken çok daha fazla taahhütte bulunacaksınız.
Yine ChatGPT, büyük olasılıkla bu ilk işleme için kullanılacak belirli komutlar konusunda size rehberlik edecektir. Eğer değilse, sadece isteyin. Kurulumunuza ve Git platformunuza bağlı olarak tam adımlara ihtiyacınız olduğunu yazdığınızdan emin olun.
Bu adımı tamamlayarak eklenti geliştirme projenizi sürüm kontrolü için sağlam bir temelle resmi olarak başlatacaksınız. Şu andan itibaren yaptığınız her değişikliği takip edebilecek, yeni özellikleri güvenli bir şekilde deneyebilecek ve eğer isterseniz başkalarıyla işbirliği yapabileceksiniz.
Dördüncü aşama: eklenti oynatma süresi 🖱️
Tüm aşamalar arasında bunun ve bir sonrakinin muhtemelen en eğlenceli olduğunu söyleyebilirim çünkü her şeyin bir araya geldiğini gerçekten görmeye başladığınız zamandır. Başlamak için yerel WordPress kurulumunuzda oturum açmak isteyeceksiniz. Local by Flywheel'i kullanmaya başlarsanız, bu çok basittir; sağ üst köşedeki WP Admin düğmesine tıklamanız yeterlidir:
Docker'ı veya başka bir yerel geliştirme aracını kullanmaya başlarsanız ve sitenize nasıl gireceğinizden emin değilseniz ChatGPT'ye sormanız yeterli.
Giriş yaptıktan sonra Eklentiler → Yüklü Eklentiler seçeneğine giderek eklentinizi etkinleştirin. Ardından listede eklentinizi bulun ve Etkinleştir'e tıklayın:
⚠️ Önemli : Eklentinizi burada göremezseniz paniğe kapılmayın. Büyük olasılıkla bir dizin uyuşmazlığıdır, ancak ne olursa olsun, bunu anlamanıza yardımcı olması için ChatGPT'ye dokunabilirsiniz. Tekrarlanan denemelerden sonra kendinizi hala takılıp kalıyorsanız ve ChatGPT size WordPress hata ayıklama modunu denemenizi önermediyse, size kod parçacıklarını vermesini isteyin. Bunun gibi bir şeye benzeyecekler:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );Eklentinizi aktif hale getirdikten sonra kullanmaya başlayın ve not alın:
- Her şey olması gerektiği gibi çalışıyor mu? Pek olası değil .
- Ne çalışmıyor? Hangi açıdan çalışmıyor?
- İlk bilgi istemi açıklamanızda tamamen gözden kaçırdığınız ve düzgün çalışmayan bazı küçük şeyler nelerdir?
Notlarınızı aldıktan sonra bir sonraki aşamaya geçmeye hazırsınız: hata ayıklama ve linting.
Beşinci aşama: hata ayıklama ve astarlama 💻
Eklenti karmaşıklığı ve hataların korelasyonel bir ilişkisi vardır: Eklentiniz ne kadar karmaşık olursa, hata potansiyeli de o kadar artar . Ancak daha basit eklentiler bile astarlama ve hata ayıklama gerektirecektir.
Linting
Bu makale "linting" kelimesini ilk kez görüyorsanız ve ne anlama geldiğinden emin değilseniz, çok basit bir şekilde eklentinizin kodunu, bu tür kodlara yönelik bir dizi kural ve standartla karşılaştırarak kontrol eder. Daha sonra size herhangi bir hata veya tutarsızlık bulup bulmadığını, bunların hangi satırlarda olduğunu ve bunların nasıl çözüleceğini söyler.
Linting oldukça basittir. Üzerinde çalışacağınız kod/dosya türleri için uygun astarlama araçlarını kullandığınızdan emin olun:
- PHP linting için WordPress Kodlama Standartlarına sahip PHP_CodeSniffer.
- JavaScript astarlaması için ESLint.
- CSS astarlama için StyleLint.
JavaScript için şunları da eklemek isteyebilirsiniz:
- ESLint Unicorn: 100'den fazla güçlü ESLint kuralı.
- ESLint Promise: API çağrıları, veritabanı sorguları, dosya işleme veya tamamlanması zaman alan herhangi bir işlem gibi eşzamansız görevleri yönetmek için kullanışlıdır.
Hata ayıklama
Linting'in aksine, hata ayıklama önceki aşamada yaptığınıza benzer; yani eklentiyi kendiniz kullanırsınız, düzeltilmesi gereken sorunları belirlersiniz ve ardından bunları kendiniz düzeltirsiniz veya ChatGPT'den size yardımcı olmasını istersiniz.
Şahsen hata ayıklamayı astarlamadan daha karmaşık buldum. Bunun en büyük nedenlerinden biri, tiftiği yaptığınızda, tiftikleme sürecinin çıktısının size sorunların tam olarak ne olduğunu ve kodunuzda nerede bulunduğunu söylemesidir. Hata ayıklamayla bu lüksü elde edemezsiniz. Bunu çözmek size ve ChatGPT'ye kalmış.
Ancak ChatGPT, sorunlu kod satırlarına lazer odaklı kalmakta zorlanıyor; bu da, "ateşlenmesine" izin vermeden önce "hazır, hazır" duruma dikkat etmeniz gerektiği anlamına geliyor.
İşleri sizin için kolaylaştırmak amacıyla, hata ayıklama aşamasına başlamadan önce kendime vereceğim çeşitli tavsiyelerin bir listesini hazırladım.
Belirsiz olmayın ve işi ChatGPT'ye bırakmayın
ChatGPT'ye çok spesifik talimatlar vermezseniz, size sonsuz kod satırları tükürmeye başlar ve çoğu zaman kod, size daha önce verdiğinden farklı bile olmaz. Doğru olup olmadığını "iki kez kontrol etmenizi" isteyecektir, ancak bunun tek yaptığı zaman kaybıdır. Bundan daha sinir bozucu bir şey yok:
Bunun yerine yapmanız gereken, ChatGPT'ye yalnızca kod oluşturmak için değil, aynı zamanda soruna neden olduğuna inanılan kod satırlarını özel olarak izole etmek ve bunları size göstermek için çok özel talimatlar vermektir. Bu satırları nasıl değiştirmeyi planladığını ve neden bu değişikliklerin sorunu çözeceğini düşündüğünü açıklamasını söyleyin. Son olarak, bu değişiklikler uygulandıktan sonra beklenen sonucun ne olması gerektiğini size söylemesini isteyin.
Bu talimatlar soruna odaklanılmasına yardımcı olacak ve bir sorununuzu düzeltirken süreçte yeni sorunlara neden olabilecek yayılma hatalarını en aza indirecektir.
Normal CSS'ye karşı BEM CSS
Yukarıdakiyle ilgili ancak CSS'ye özel olarak, herhangi bir CSS parçacığı için ChatGPT'nin standart CSS veya varsayılan olarak "sınıf CSS'si" dediğim şeyi oluşturacağını aklınızda bulundurmalısınız.
Bu, konuyla ilgili yeni başlayanlar için bir kurs alırken öğreneceğiniz temel CSS'dir. Anlaşılması kolaydır ve kendi başına teknik olarak yanlış bir şey yoktur, ancak WordPress eklentileri geliştirirken diğer eklentiler veya temalarla çakışmalara yol açabilir.
Bunun yerine GPT'ye BEM (Blok Öğe Değiştirici) yöntemini kullanmasını söylemek daha iyidir. BEM, açık ve yapılandırılmış bir adlandırma kuralı sağlayarak CSS çakışmaları riskinin azaltılmasına yardımcı olur. Her bloğun, öğenin ve değiştiricinin istenmeyen stil etkileri olasılığını en aza indiren farklı, açıklayıcı bir sınıf adına sahip olması nedeniyle stillerinizin daha öngörülebilir olmasını ve yönetilmesinin daha kolay olmasını sağlar. Ek olarak BEM, diğerlerini etkilemeden belirli stilleri bulmayı ve güncellemeyi kolaylaştırarak sürdürülebilirliği artırır.
İkinci aşamadaki örnek istemde buna zaten değinmiştim, ancak CSS parçacıklarınız için bu talimatları ChatGPT'ye vermeyi her zaman hatırlamanız için bunu burada vurguluyorum.
Koşullu yükleme ve küresel sıraya alma karşılaştırması
ChatGPT'lerin bir başka varsayılan davranışı da komut dosyalarının kuyruğa alınmasıyla ilgilidir. Henüz bu ifadenin ne anlama geldiğini bilmiyorsanız endişelenmeyin. Önemli olan onu gördüğünüzde kodunuzda tanımanızdır. Bunun gibi bir şeye benzeyecek:
function enqueue_my_scripts() { wp_enqueue_script('my-plugin-script', plugin_dir_url( FILE ) . 'js/my-script.js', array('jquery'), '1.0.0', true); } add_action('admin_enqueue_scripts', 'enqueue_my_scripts');Yukarıdaki örnekte kod, genel olarak tüm yönetici sayfaları için bir komut dosyasını sıraya koyacaktır; bu genellikle gereksizdir ve performans sorunlarına yol açabilir. Ne yazık ki, konuşmadığınız ve yapmamasını söylemediğiniz sürece ChatGPT'nin size vereceği şey budur. Açık olmak gerekirse, bazı durumlarda bu aslında tamamen uygundur, ancak çoğu durumda değildir.
Bu nedenle, ChatGPT'nin "sıraya sokma" kelimesini içeren herhangi bir kod oluşturduğunu fark ettiğiniz anda, bunun hakkında bir konuşma yaptığınızdan emin olun. ChatGPT'ye komut dosyalarınızı küresel olarak mı yoksa yalnızca komut dosyalarının gerekli olduğu belirli sayfalarda - buna "koşullu yükleme" olarak bilinir - sıraya koymanın mantıklı olup olmadığını sorun.
Sık sık hatırlatın ve hatırlatın
ChatGPT'nin unutkan olma eğilimi vardır ve bu, onu kodlamak için kullandığınızda daha da fazladır. Yani siz ona belirli talimatlar verseniz de, projeniz boyunca bu talimatları takip etme olasılığı sıfırdır .
Hatta bazen ondan yapmasını istediğiniz şeyi tamamen görmezden gelir. Böyle bir durumda daha sert olun ve istediğinizi yapmadığını ona bildirin:
Üstelik, birkaç etkileşim içinde, sizi hata ayıklamaya çalıştığınız kod bölümüyle hiçbir ilgisi olmayan devasa miktardaki kod içinde boğmaya çalışma şeklindeki standart davranışına hızlı bir şekilde varsayılan olarak geri dönecektir.
Bu olduğunda, GPT'nin çıktısındaki durdur düğmesine basmanız ve ona talimatlarınızı takip etmesini hatırlatmanız yeterlidir. Hatırlatıcıyı verirken bunları kopyalayıp sohbet penceresine yapıştırmanız da yardımcı olur.
Ve uzun kod satırları oluşturmaktan bahsetmişken…
ChatGPT'nin sizin için tüm dosyaları yeniden oluşturmasını önleyin
Kodla çalışmaya alışkın olmadığınızda ve koddan korktuğunuzu hissettiğinizde, ChatGPT'den her kod değişikliğinden sonra tüm dosyayı sizin için yeniden oluşturmasını istemek ilk başta çekici görünebilir.
Tek yapmanız gereken "kopyalayıp yapıştırmak" değil mi?
Her ne kadar cazip görünse de aslında kötü bir fikir . Uzun vadede başınıza daha fazla bela açacaktır. Bunu yaparken çok fazla zaman harcamakla kalmayacak, özellikle de oldukça uzun sürebilecek PHP dosyanızda hata ayıklama yapıyorsanız, aynı zamanda ChatGPT bu süreçte mevcut kodunuza yeni hatalar da getirebilir. Üzerinde çalıştığınız sorunu çözecektir, ancak daha sonra yanlışlıkla dosyanın başka bir bölümünde değişiklik yapacak ve bir şeyleri bozacaktır.
Kodun soruna neden olan belirli kısımlarını izole etmek ve yalnızca bunlar üzerinde çalışmak daha iyidir.
Bir seferde bir hata alın
Yukarıdakilere paralel olarak, birden fazla hatanız olsa bile (çok küçük olmadıkları sürece) ChatGPT'ye aynı anda yalnızca bir tanesini bildirin. Bir sonrakine geçmeden önce her hatayı düzeltin.
Kod parçacıklarının en üst ve en alt satırlarına çok dikkat edin
ChatGPT size kod parçacıkları verdiğinde, bazen - ama her zaman değil - üzerinde çalıştığınız dosyanın en üst satırını ve aynı zamanda en alt satırını size göstererek bunları kapsüller. Bu nedenle, her zaman pasajın tamamını kopyalayıp yapıştırmamaya dikkat etmeniz gerekir çünkü bu, kodunuzun bozulmasına neden olur.
⚠️ En üst satıra çok dikkat edin:
Hata ayıklamaya çalıştığınız belirli kod pasajıyla alakalı değilse, bunu dikkate almayın.
Aynı şey sonuç için de geçerli, ancak bunu tespit etmek daha zor olabilir. Bazen }); gibi basit bir şey olabilir. bu, henüz kapatılması amaçlanmayan bir ana snippet'i kapattığı için kodunuzun bozulmasına neden olur.
Bir süre sonra sorunu çözmede daha iyi olacaksınız, ancak eklenti geliştirme yolculuğunuza başladığınızda, bir pasajı ekledikten sonra birçok şeyin bozulduğunu fark ederseniz, "sihirli bir şekilde" olup olmadığını görmek için o son satırı silmeyi deneyin. ” her şeyi düzeltir.
Konsol en iyi arkadaşınızdır
ChatGPT aynı sorunun hatalarını ayıklamaya çalışır ancak başarısız olursa ve kendinizi çıkmazda bulursanız, soruna neden olduğuna inandığı kod bölümlerine console.log satırları eklemesini isteyin. Ardından hatayı yeniden oluştururken konsolu açın. Ne olduğunu açıklayacak. Daha sonra bu açıklamanın ekran görüntüsünü alabilir ve ChatGPT'ye verebilirsiniz, böylece nasıl düzeltileceğini bulabilir.
Google Chrome'da konsola erişmek için sayfayı sağ tıklayın ve Denetle'yi seçin:
Konsol size yanıt vermediğinde veritabanınızı kontrol edin
Konsol mükemmeldir ve çoğu zaman ihtiyacınız olan yanıtları verecektir. Bununla birlikte, bazı durumlarda, yalnızca yaşadığınız şeyi doğrular, ancak bunu nasıl düzelteceğiniz konusunda size herhangi bir talimat vermez.
Örneğin, eklentime bir yazma efekti eklemeye çalıştığımda, wp-admin'deki efektin varsayılan önizleme hızı 23 milisaniyeye ayarlandı. Sorunu çözmeye çalışmak için PHP ve JavaScript dosyalarımı gözden geçirmek için inanılmaz miktarda zaman harcadım, ancak işe yaramadı.
Konsol 23'te yüklendiğini doğruladı ancak bunun ötesinde bana başka değerli bilgiler vermedi:
Sonunda veritabanını kontrol ettim ve hatalı değerin oradan geldiğini fark ettim:
Ben bunu 23'ten 60'a değiştirdim, istediğim de buydu ve sorun çözüldü.
Local by Flywheel'i kullanmayı bırakırsanız, Veritabanı sekmesine tıklayarak arayüz aracılığıyla veritabanınıza kolayca erişebilirsiniz:
Erişim elde ettiğinizde, aramaya başlamak için iyi bir yer, yukarıdaki ekran görüntüsünde baktığımı gördüğünüz yerdir: wp_options. Çoğu zaman eklenti ayarlarınız orada bulunur.
⚠️Ancak burada daha büyük sorunun kodumda aktivasyon talimatlarının eksik olması olduğunu da belirtmekte fayda var. Eklentiniz ilk etkinleştirildiğinde veritabanında belirli ayarların mevcut olup olmadığını kontrol etmelidir. Değilse, eklentiniz bunları istediğiniz varsayılan değerlerle eklemelidir. Bu, eklentinizin her yeni kurulumunun doğru ayarlarla başlamasını sağlar. Sen zorunda kalma diye bunu zor yoldan öğrendim.
Yeni bir konu size atılımlar sağlayabilir
Kodunuz büyüdükçe ve ChatGPT ile olan ileti diziniz uzadıkça, hata yapma veya bir şeyleri unutma eğiliminiz artacaktır. Belirli bir noktada yeni bir konu başlatmak iyi bir fikirdir. Ana eklenti dosyalarınızı yeni konuya yükleyin ve ChatGPT'ye ne yaptığınızı ve nerede kaldığınızı açıklayın.
İşte kullanabileceğiniz örnek bir bilgi istemi:
Başka bir başlıkta sizinle birlikte bir WordPress eklentisinin hatalarını ayıklamaya çalışıyordum ama sanırım konu çok uzadı ve kafanız karışmaya başladı. Yeni başlayalım.
Buradaki eklenti dosyalarına bir göz atın ve sorun gidermeyi deneyelim [hatanızı açıklayın] .
Ayrıca, ki bu ÇOK ÖNEMLİdir, sorun giderme amacıyla kod parçacıklarının yeni sürümlerini oluştururken, lütfen yalnızca parçacığı oluşturmakla kalmayın, aynı zamanda mevcut olandan hangi satırları değiştirdiğinize dair bir açıklama da sağlayın. Ayrıca bu satırları değiştirmenin ardındaki mantığı ve yaptığınız değişikliklerle neler görmeyi bekleyebileceğimizi de açıklayın.
[CSS oluşturuyorsanız ChatGPT'ye BEM (Blok Öğe Değiştirici) metodolojisini izlemesini hatırlatmayı unutmayın.]
Beyninizi kullanmaktan korkmayın
Eklentiniz ne kadar karmaşık olursa, GPT'nin kodunuzu bozma potansiyeli de o kadar artar. Hata ayıklamanıza yardımcı olsa da bazen çözümü kendi başınıza bulmanın daha iyi olduğunu göreceksiniz. Dürüst olmak gerekirse, bu durum başıma çok sık geldi, özellikle de ana PHP dosyamın 500 satırın üzerine çıktığı (sonraki sürümler 1.000'i aşan) derlememin sonraki aşamalarında.
Kod okuma konusundaki aşinalığınıza ve rahatınıza bağlı olarak bu caydırıcı olabilir, ancak örüntü tanıma ve tutarsızlıkları tespit etme konusunda iyiyseniz o zaman idare edebilirsiniz.
Kesinlikle yetenekli bir programcı değilim, ancak çeşitli programlama dillerinin ne yaptığını anlıyorum ve koda biraz aşinayım ve bu bana yardımcı oldu.
Yine de, tam bir acemi olsanız bile, GPT'nin soruna neden olabileceğini düşündüğü kod satırlarına bakabilirsiniz. Ardından kodunuzda düzgün çalışan aynı öğeyi bulun. Kodunu bozuk öğenin koduyla karşılaştırın ve neyin farklı olduğunu görmeye çalışın. Çoğu zaman bu sorunu çözecektir:
Eklenti dosyalarınızın yedeklerini saklayın (Git kullanıyorsanız isteğe bağlıdır)
Git'i kullanmak, kodunuzdaki değişiklikleri yönetmek ve geri almak için güçlü bir yol sağlarken, manuel yedeklemeler de tutmak hiçbir zaman kötü bir fikir değildir. Kodunuzda bir dönüm noktasına ulaştığınızda, ana kod dosyalarınızın bir kopyasını başka bir klasöre kaydetmenizi öneririm:
Bu, geliştirmeye devam ederken ciddi hatalarla karşılaşırsanız daha iyi bir önceki sürüme kolayca geri dönmenize olanak tanıyan ek bir güvenlik ağı görevi görebilir.
Kolay pes etmeyin ama sınırlarınızı bilin
Ne kadar çabalarsanız çabalayın, uygulayamayacağınız bazı işlevler veya ince ayarlar olabilir. Beklentilerinizi ayarlamaya ve onların etrafında çalışmaya hazır olun . Bu, duvara çarptığınızda pes edeceğiniz anlamına gelmez. Ancak bu, 100 deneme yaptıysanız ve başarılı olamayan bir şeyi başarmak için saatler (veya günler) harcadıysanız, o zaman bunun muhtemelen ya mümkün olmadığı ya da hem sizin hem de ChatGPT'nin kapasitesinin dışında olduğu anlamına gelir.
Son olarak, eğer ilk önce hata ayıklamayı mı yoksa tiftiği mi yapmanız gerektiğini merak ediyorsanız, anladığım kadarıyla net bir cevap yok. İşleme başlamadan önce hata ayıkladım, ancak süreç boyunca ChatGPT'nin tercihini varsayılan olarak ayarlayabilir veya önce hangisini yapmak istediğinizi söyleyebilirsiniz.
Altıncı aşama (isteğe bağlı): test etme 🔬
Göreceli olarak basit bir eklenti oluşturuyorsanız ve kendi manuel testinize göre işlevselliğine güveniyorsanız bu adımı atmanız gerekmez. Bunu söylüyorum çünkü bu testleri kodlamak hala çok fazla çalışma gerektiriyor ve aynı şekilde ChatGPT ile çalışan bir eklenti alamayacaksınız, aynı zamanda hiçbir hatanın bulunmadığı işlevsel bir test elde etmeniz de pek mümkün değil.
Basitçe söylemek gerekirse, burada zaman yatırımı ile pratik değer arasında bir ödünleşim var .
Kendi deneyimime göre, bir kullanıcı etkileşime girdiğinde eklentilerimin ana işlevlerini yerine getirip getiremediğini kontrol eden bir testi başarılı bir şekilde oluşturmayı başardım - ancak hata ayıklama tüm günümü aldı!
Pratik açıdan bakıldığında, eklentimin işlevlerini zaten manuel olarak kontrol etmiştim, ancak testin her şeyin çalıştığını doğruladığını görmek güzeldi.
Benim yaptığımdan daha karmaşık bir eklenti oluşturmaya çalışacaksanız veya eklentinizin işlevleri arka uca odaklanacaksa (çalışıp çalışmadıklarını manuel olarak kontrol edemediğiniz yer), o zaman zaman ayırın Düzgün yürütülen testler, manuel emeğe değer.
Test türleri
Dikkate alınması gereken araçlar
Yedinci aşama (isteğe bağlı): eklentinizi WordPress deposuna gönderin 🥳
Bu noktaya kadar geldiyseniz, meşhur eklenti dağına başarıyla tırmandınız demektir. Yapmanız gereken tek şey, bayrağınızı WordPress deposundaki diğer 59.650 eklentiye katılacak şekilde yerleştirmektir.
Bunun kendi ayrı süreci vardır ve buna Eklentinizi ekleyin sayfasında bir kontrol listesi eşlik eder:
- Sıkça Sorulan Soruları okuyun.
- Tüm Eklenti Geliştirici Yönergelerine uyun.
- Başkalarının kullanması ve paylaşması için eklentinizi WordPress.org'a yükleme izniniz olduğundan emin olun.
- Eklentiniz, tüm kitaplıkları ve içerdiği diğer varlıklar da dahil olmak üzere GPL olarak lisanslıdır veya GPL uyumludur.
- Eklenti Denetimi eklentisiyle son bir test turu yaparsınız ve belirtilen sorunları çözersiniz (yanlış pozitif olduğunu düşündüğünüz durumlar hariç).
Eklenti Kontrolü (PCP)Güncel Sürüm: 1.1.0
Son Güncelleme: 28 Ağustos 2024
eklenti kontrolü.1.1.0.zip
Yaptığınız tüm hata ayıklama, tarama ve testlerden sonra, kullanmanızı istedikleri eklentinin hiçbir şeyi algılamayacağını düşünebilirsiniz. Bununla birlikte, ilk kez eklenti geliştiricisi olarak, özellikle kontrolü çalıştırmadan önce test dosyalarını yapınızdan kaldırmazsanız, muhtemelen çözmeniz gereken birkaç önemli sorun kalacaktır.
Devam etmek için Araçlar → Eklenti Kontrolü'ne gidin:
Ardından beş kategorinin tamamını işaretleyin ve kontrolü çalıştırın:
Daha sonra bu çözülmemiş sorunları ChatGPT'ye aktarabilir ve çözebilirsiniz. İşiniz bittiğinde temiz bir sonuç elde etmek için kontrolü tekrar çalıştırın. Bunu ihtiyaç duyduğunuz kadar yapın. Tamamen temiz bir kontrol aldıktan sonra (yanlış pozitifler hariç), eklentinizi WordPress geliştirme ekibine gönderebilirsiniz. Daha sonra sabırla incelemelerini bekleyin.
Son düşünceler 🧠
ChatGPT ile eklenti oluşturmak eğlenceli ve ödüllendirici bir süreç olsa da, kesinlikle hızlı bir süreç değildir. Düzgün çalışan bir nihai ürün elde etmek için çok fazla ter dökmeniz gerekir. Ancak sonuçta bu projeyi yapmanın size öğreteceği tüm yeni becerileri takdir edeceksiniz.
İşte öğrendiğim birkaç şey (ve siz de öğrenebilirsiniz):
- Terminal komutlarını kullanarak sabit diskimde nasıl gezineceğimi öğrendim ve ayrıca eklenti oluşturma süreciyle ilgili diğer komutları da öğrendim.
- Artık her ikisini de bu deneyden önce hiç kullanmadığım Docker ve Local by Flywheel ile oldukça rahatım.
- Ayrıca bundan önce varlığından bile haberdar olmadığım birçok geliştirici aracına ve komut dosyasına da aşinayım.
- Geçmişte Free Code Camp ve Codecademy'den bazı dersler aldım ve her ikisi de harika olmasına rağmen, bu projeyi tamamlayarak çok daha fazla uygulamalı bilgi edindiğimi hissediyorum.
- Yukarıdakilerle ilgili olarak, artık benzer bir şey üzerinde tekrar çalışırsam işime yarayacak çok sayıda rastgele kodlama bilgisine sahibim.
- Sıfır ile çalışan eklenti arasındaki boşluk, çalışan eklenti ile gönderime hazır eklenti arasındaki boşluktan çok daha küçüktür. Eklentimin çalışan bir sürümünü birkaç gün içinde tamamladım, ancak WordPress deposuna gönderilecek kadar iyi hale getirmek için tüm ince ayarları yapmam birkaç hafta daha sürdü.
Genel olarak, bu uzun zamandır yaptığım en harika aktivitelerden biriydi. Okumaya zaman ayırdığınız için teşekkür ederiz. İlk eklentinizi oluşturmak için bu bilgilerden herhangi birini kullanırsanız, lütfen bana aşağıya bir yorum bırakın. Nihai sonucunuzu kontrol etmeyi çok isterim.