WordPress Eklenti Geliştirme

Web üzerinde faaliyet gösteren web sitelerinin % 70 oranındaki bölümü WordPress ile oluşturulmuştur. Bu açık kaynak kodlu ve tamamen ücretsiz olduğu için tercih edilmektedir. Ayrıca kurulumu çok kolaydır. Sadece video izleyerek dahi kurulumunu gerçekleştirmeniz mümkündür.

WordPress eklenti geliştirme konusunda da açık kaynak kodlu ve bedava olma özelliğini korumaktadır. Ancak bazı eklentilerin pro sürümleri, ücretli olabilmektedir. Onları kullanmak isteyen kullanıcılar aylık ya da yıllık belli bir ücret ödemeyi kabul ederler. WordPress ile sitenizi kurduktan sonra öğrenmemiz gereken ilk adımlardan biri WordPress eklenti geliştirme işlemlerinin nasıl yapılacağıdır.

WordPress alt yapısında kurulmuş olan bir siteye üyelik sistemleri, e- ticaret sekmesi, galeriler, iletişim formları, slayt gösterileri, bannerlar ekleyebilirsiniz. Bunları gerçekleştirmek için çok kolay kurulabilen binlerce bedava eklenti bulunur. Aradığını ve ihtiyacınız olan eklentiyi bulduktan sonra yapmanız gerekenleri adım adım anlatacağımız bu yazıyı okuduktan sonra kurulumu kendi başınıza da yapabilir hale geleceksiniz.

WordPress Eklenti Geliştirme Aşamaları

İlk olarak yapmanız gereken sitenizin eklenti yüklenecek hazırlığa sahip olup olmadığına bakmaktır. Worepress.com üzerinden kurduysanız sitenizi o zaman bazı kısıtlamalarla karşılaşabilirsiniz. O nedenle eklenti yükleyebilmek için worpress.org üzerinden kurulmuş bir siteye sahip olmalısınız.

WordPress Eklenti Yükleme

WordPress eklenti geliştirme işlemi yapmak istiyorsunuz ama nasıl yapılır bilmiyorsanız cevapları bu andan itibaren bulmaya başlayacaksınız. Yönetici olarak panele giriş yaptınız ve eklentiler menüsüne tıkladınız. Oradan yüklü eklentileri değil “yeni” seçmeniz gerekiyor. Yeni seçtikten sonra eklenti arama çubuğuna yüklemek istediğiniz eklentinin adını yazmalısınız. Örneğin “multilanguge “eklentisi kurmak istiyorsunuz. Arama çubuğuna bunu yazın çıkan eklentilerden kendinize uygun olanı seçin ve “kur” butonuna tıklayın. Sonrasında etkinleştir diyerek eklentinin sitenize entegre olmasını sağlayın.

Dosya İle Eklenti Yükleme

Bazı durumlarda sizin istediğiniz eklenti arama sonuçlarında olmayabilir. Böyle eklentileri bulmak için “eklenti yükle” butonuna tıklamanız gerekmektedir. Buraya tıklayıp açılan yükleme alanında bulunan dosya seçiciden yararlanarak yükleyeceğimiz eklentinin dosyasını seçmeliyiz. “hemen yükle” butonuna tıklayarak zip formatında olması gereken dosyayı yüklüyoruz.

Hemen yükle butonuna tıkladıktan sonra karşınıza gelen ekrandan etkinleştir butonuna tıklamanız yeterli olacaktır. Artık eklentiyi kullanmaya başlayabilirsiniz. Bu işlem de bu kadar kolaydır.

FTP Yardımıyla WordPress Eklenti Geliştirme

Sahip olduğunuz hosting firması diğer şekillerde eklenti yüklemenize izin vermiyorsa WordPress eklenti geliştirme işlemine devam edebilmek için;  ya hosting firmasını değiştireceksiniz ya da FTP ile eklenti yükleme adımlarını takip edeceksiniz. Yazının bu kısmında FTP ile eklenti yükleme işlemi adımlarını anlatacağız.

İlk olarak indirdiğiniz eklenti dosyasını zipli olarak gelen eklenti dosyalarının içinden çıkarın. Bunu yaptığınız zaman eklentinin adının yazdığı klasör oluşur. Bu klasör sizin eklentimizi yüklerken kullanacağımız dosyaların olduğu klasördür.

Şimdi de hosting paketinizdeki FTP ağından yardım alacağız. FTP kullanıcı adı ve şifresi ile giriş yaptığınız bu ağda sitemizin ana dizinine bağlanmamızı sağlayan FTP istemcisini (FileZilla) kullanarak işlemlere başlayın. Açılan dizinlerde “/public­_html/wp-content/plugins.” dizinine ulaşın. Bu dizinde yüklediğimiz tüm eklentilerin klasörlerini görebilirsiniz. Biraz önce zip dosyasından çıkardığınız eklenti klasörünü sürükleyip bu alana bırakmalısınız. Tüm dosyaların yüklenmesi birkaç saniye sürebilir. Bekleyin.

Evet, PTP ile WordPress eklenti geliştirme işlemi de bitti. Bu da aslında kolay ve anlaşılır bir şekilde gerçekleştirilebilecek adımlar içeriyor. Eklenti yüklendikten sonra yönetici panelindeki eklentiler menüsünden eklentiyi bulup etkinleştirin. Artık eklentinizi kullanmaya başlayabilirsiniz.

Hazır eklentileri sitenize kurmak oldukça kolaydır. Ancak WordPress eklenti geliştirme işi biraz daha teknik bilgi gerektirir. Burada da üç adımda yapılan işlemler var ama buradaki işlemler biraz daha kodlama dillerine hâkimiyet gerektirmektedir.

WordPress Eklenti Geliştirme, Kendi Eklentimizi Geliştiriyoruz

WordPress eklenti geliştirme yani eklenti yazmak, üç farklı aşamayı gerçekleştirmeyi gerektirir.  İlk olarak eklenti ve yazarın bilgilerinin olduğu bölüm oluşturulmalıdır. Sonrasında fonksiyonlar yazılmalıdır. En son olarak da yazılan fonksiyonların wordPress’e tanıtılması gerekmektedir.

WordPress Eklenti Geliştirme – Birinci Bölüm

Bunun için 8 satırlık bir kod yazılması gerekiyor. Siz de bu kodu kopyalayıp yapıştırın ve üzerindeki kişisel bilgiler yerine kendi bilgilerinizi yazın. Yalnız önemli olan ne görüyorsanız kopyalayın. * ve / dahi önemlidir unutmayın.

<?php
/* 
*  Plugin Name: Brunos WordPress Eklentisi 
*  Plugin URI: https://brunos.digital/eklenti.zip
*  Description: WordPress için eklenti geliştirme
*  Version: 1.0
*  Author: Brunos Digital
*  AuthorURI: https://brunos.digital/eklenti.zip
*/

WordPress Eklenti Geliştirme – İkinci Bölüm

Bu bölümde gerekli olan fonksiyonları yazarız. Örnek vermek gerekirse:

<?php 
   function brunos_eklenti(){
      $isim="Brunos";
      echo $isim;
   }
?>

WordPress Eklenti Geliştirme – Üçüncü Bölüm

WordPress eklenti geliştirme aşamalarında en önemli bölümdür. WordPress bu sayede eklentiyi tanıyacaktır.

<?php 
   add-action(‘wp_footer’, ‘brunos_eklenti’);
?>

Şeklindeki bir kod wp’in footer’ına fonksiyonu eklemektedir. Böylece her sayfada alt bilgi yani footer olacağından fonksiyonunuzu istediğimiz sayfada çağırabilirsiniz. Sorunsuz olarak çalışır. add_action() fonksiyonu, WordPress tarafından oluşturulmuş fonksiyonları tanımasına yardımcı olan bir fonksiyon kalıbıdır. İçine yerleştirdiğiniz wp-footer ise kancadır.

WordPress eklenti geliştirme adımlarını takip ederek eklentinizi yazdıktan sonra yazılanları birleştirerek derya_eklenti.php dosyasına kaydediyorsunuz. Sonrasında plugins klasörüne attığımız dosyalar sayesinde eklentimiz wp yönetim panelinde görünür hale geliyor. Aktifleştirip themes klasöründe kullandığınız temanın içine girin. Burada bulunan footer.php dosyasının en altına aşağıdaki kodu yazıyorsunuz.

<?php 
   $eklenti = brunos_eklenti();
   echo $eklenti;
?>

WordPress eklenti geliştirme yazılım kısmının kod özetlerini verecek olursak aşağıdaki gibi bir sıralama şu şekilde olur.

<?php
/* 
*  Plugin Name: Brunos WordPress Eklentisi 
*  Plugin URI: https://brunos.digital/eklenti.zip
*  Description: WordPress için eklenti geliştirme
*  Version: 1.0
*  Author: Brunos Digital
*  AuthorURI: https://brunos.digital/eklenti.zip
*/

   function brunos_eklenti(){
      $isim="Brunos";
      echo $isim;
   }

   add-action(‘wp_footer’, ‘brunos_eklenti’);

   $eklenti = brunos_eklenti();
   echo $eklenti;

WordPress eklentileri, web sitenizi özelleştirmek veya belirli bir işlevselliği eklemek için kullanılan küçük yazılım programlarıdır. Eklenti geliştirme, web geliştirme becerilerinizi kullanarak WordPress’e işlevsellik eklemenizi sağlar.

Bir WordPress eklentisi geliştirmek için öncelikle PHP, HTML, CSS ve JavaScript dillerinde bilgi sahibi olmanız gerekir. Ayrıca, WordPress kod yapısını ve API’lerini anlamak önemlidir. WordPress eklentisi geliştirme konusunda deneyimli olmayanlar için öğrenmesi zor olabilir, ancak temel bilgileri edindikten sonra, özelleştirilmiş eklentiler oluşturmak oldukça kolaydır.

Eklenti geliştirme ile ilgili konuları aşağıdaki blog yazılarında detaylandırdık

WordPress Eklenti Geliştirmek İçin Hangi Becerilere İhtiyacınız Var?

WordPress Eklenti Geliştirme Süreci

WordPress Eklenti Yapısı ve API’leri

Eklenti Güvenliği İpuçları

Siz de bir eklenti geliştirmek istiyorsanız hemen bizimle yeni proje başlatabilirsiniz.

Brunos Digital, müşterilerine özelleştirilmiş ve profesyonel WordPress eklentileri oluşturma hizmeti sunar. Müşterilerinin ihtiyaçlarına göre eklentiler oluşturur ve müşterilerinin web sitelerinin işlevselliğini artırarak daha iyi bir kullanıcı deneyimi sunmalarını sağlar.

Brunos Digital, WordPress ekosistemi için müşterilerine birçok hizmet sunar. Bu hizmetler, özelleştirilmiş WordPress eklentileri oluşturma, mevcut eklentilerin güncellenmesi, eklenti sorunlarının giderilmesi, eklenti entegrasyonları, eklenti testleri ve eklentilerin bakımını kapsamaktadır.

Brunos Digital ile çalışmanın faydaları şunlardır:

Müşteri ihtiyaçlarına göre özelleştirilmiş WordPress eklentiler oluşturur.

Müşterilerin işletmelerine özgü işlevselliği artırır.

Müşterilerin web sitelerinin performansını ve güvenliğini artırır.

Müşterilere daha iyi bir kullanıcı deneyimi sağlar.

Uzun vadede, müşterilere tasarruf sağlar.

Müşterilerinin eklentilerini güncel tutarak web sitelerinin sürekli gelişmesini sağlar.

Devamını oku

UI Ve UX Tasarım Arasındaki Farklar Neler? UI ve UX Nedir?

User Interface (UI) ve User Experience (UX) her zaman karıştırılan ya da aynı zannedilen terimler arasındadır. UI Ve UX Tasarım Arasındaki Farklar Nelerdir? Basitçe, UX tasarımı kullanıcı deneyimi tasarımına, UI tasarımı ise kullanıcı arayüzü tasarımına atıfta bulunur. Ürün tasarımında yakın bir ilişkileri vardır, ancak farklı rollere hizmet ederler.

İşlevsellik açısından, UI işlerin nasıl göründüğünü, UX işlerin nasıl yürüdüğünü gösterir. UX bir süreçtir, UI ise bir çıktıdır. Ancak simbiyotik bir ilişkiye sahip olma eğiliminde oldukları için insanlar ikisini kolayca karıştırır. 

Foster.fm’in kurucusu Rahul Varshney’in dediği gibi “Kullanıcı Deneyimi (UX) ve Kullanıcı Arayüzü (UI), alanımızda en çok karıştırılan ve yanlış kullanılan terimlerden bazılarıdır. UX’siz bir UI, ressamın tuvale düşünmeden boyayı tokatlaması gibidir; UI’sız UX ise kağıt eşleşmesi olmayan bir heykelin çerçevesi gibidir. Harika bir ürün deneyimi, UX ile başlar ve ardından UI gelir. Her ikisi de ürünün başarısı için çok önemlidir.” Dolayısıyla, UI tasarımı ile UX tasarımı arasındaki bariz farklar, farklı rollerle sonuçlanır.

UI Tasarımı Nedir?

UI tasarımındaki “UI”, “kullanıcı arayüzü” anlamına gelmektedir. Kullanıcı arayüzü, uygulamanın grafik düzenidir. Kullanıcıların okudukları metinler, görüntüler, kaydırıcılar, metin giriş alanları, tıkladığı düğmeler ve kullanıcının etkileşimde bulunduğu diğer tüm öğelerden oluşur. Ekran yerleşimi, arayüz animasyonları, geçişler ve her bir mikro etkileşimi içerir. Görsel öğelerin tamamı, etkileşim veya animasyonların hepsi tasarlanmalıdır.

Bu görev UI tasarımcılarındır. Uygulamanın nasıl görüneceğine karar verirler. Renk şemaları ve düğme şekilleri seçmeleri gerekir, satırların genişliği ve metin için kullanılan yazı tipleri belirlenir. UI tasarımcıları, bir uygulamanın kullanıcı arayüzünün görünümünü ve kullanıcılarda yaratacağı duyguyu tasarlar.

UI tasarımcıları grafik tasarımcılardır. Estetikle ilgilenirler. Uygulamanın arayüzünün ilgi çekici, görsel olarak etkileyici ve uygulamanın amacına ve / veya kişiliğine uygun temalı olduğundan emin olmak görevleridir. Ve her bir görsel öğenin hem estetik hem de amaç olarak bir bütün olduğundan emin olmaları gerekir.

Ux Tasarımı Nedir?

“UX”, “kullanıcı deneyimi” anlamına gelir. Kullanıcıların uygulamada yaşadığı deneyim, uygulamayla nasıl etkileşim kurduğuna göre belirlenir. Deneyim sorunsuz ve sezgisel mi yoksa yavaş ve kafa karıştırıcı mı? Uygulamada gezinmek mantıklı mı yoksa keyifli mi geliyor? Uygulamayla etkileşimde bulunmak, insanlara başarmak için belirledikleri görevleri verimli bir şekilde yerine getirdikleri hissini veriyor mu yoksa bu bir mücadele gibi geliyor mu? Kullanıcı deneyimi, UI tasarımcılarının oluşturduğu kullanıcı arayüzü öğeleriyle etkileşime girmenin ne kadar kolay veya zor olduğuna göre belirlenir.

UX tasarımcılarının odağı uygulamanın kullanıcı arayüzüdür. Bu nedenle UI Ve UX tasarım arasındaki farklar konusunda karışıklık yaşanır. Ancak UI tasarımcılarının görevi, kullanıcı arayüzünün nasıl görüneceğine karar vermek iken UX tasarımcıları kullanıcı arayüzünün nasıl işlediğini belirlemekten sorumludur.

1. UI Ve UX Tasarım Arasındaki Farklar: Farklı Odak

UI ve UX tasarımcıları arasındaki en önemli fark, prototipleme için farklı bir kullanıma sahip olmalarıdır. Birçok UI tasarımcısı, bir prototipin bir hi-fi modeli olması gerektiğine inanır. Bununla birlikte, UX tasarımcısı için sadakat sonradan akla gelen bir konudur; mantığı daha çok önemsenir. Basitçe söylemek gerekirse: Müşterilerinizle tanışacağınız zaman, onlara UI tasarımcısı tarafından yapılan tasarımı gösterin. Programcılarla tanışacağınız zaman, UX tasarımcısı tarafından yapılan prototip sunun.

Bunun nedeni; Kullanıcı arayüzü tasarımcıları arayüze daha fazla önem verirken, kullanıcı deneyimi tasarımcıları derine odaklanır.

2. UI Ve UX Tasarım Arasındaki Farklar: Kullandıkları Renkler

UI Ve UX tasarım arasındaki farklardan en fazla öne çıkanlarından biri de kullandıkları renklerdir. UI tasarımcıları, prototipleri tam renkli tasarlama eğilimindedir. Tersine, UX tasarımcıları prototip tasarımında genellikle yalnızca üç renk kullanır: siyah, beyaz ve gri

Bu fark, simge tasarlarken ve kullanırken yaygın olarak görülür. Örneğin, bir alt gezinme çubuğu oluşturulması gerektiğinde, UI tasarımcıları, tıklamadan önce ve sonra düğme rengi de dahil olmak üzere, olabildiğince gerçekçi hale getirmek için çok fazla enerji harcar. Aksine, UX tasarımcıları düğmeyi doğru yere yerleştirir ve ardından bir not bırakır: Tıkladıktan sonra Gri.

3. UI Ve UX Tasarım Arasındaki Fark: Kullandıkları Araçlar

UI ve UX tasarım arasındaki farklar net bir şekilde fazla olduğundan, kullandıkları araçlar farklı olmalıdır. UI tasarımcıları için, görsel tasarlamak birinci derecede önemlidir. Dolayısıyla Sketch’e bağlı Flinto ve Principle gibi araçların avantajı vardır. InVision da seçeneklerden biridir ve ekip işbirliği işlevi, rekabetçi bir seçenek haline gelmesini sağlar.

UX tasarımcıları, zaman kazandırdığı ve tasarımı daha verimli hale getirdiği için güvenilir olanları tercih edeceklerdir. Çok sayıda nitelikli prototip oluşturma aracı vardır: Kullanımı kolay ve şeffaf Mockplus , eskiz stiliyle Balsamiq ve kapsamlı işlevlere sahip Axure. Mockplus kullanmanın birçok avantajı öne çıkmaktadır. Projeleri test etmek ve önizlemek için 8 yolu vardır. Bu yollar, özellikle test sırasında faydalıdır.

UI Ve UX Tasarım Arasındaki Farklar! UX, UI Değildir

UI Ve UX tasarım arasındaki farklar; Teorik olarak, UX tasarımı sınırları belirleme / prototip oluşturma, etkileşim tasarımı ve kullanıcı testini içerir. UI tasarımı, görsel tasarım ve etkileşim tasarımını içerir. Hem UI tasarımı hem de UX tasarımı etkileşim tasarımı gerektirir.Etkileşim tasarımı, kullanıcının duygularına ve davranışlarına rehberlik eder.

UI Ve UX tasarım arasındaki farklar nelerdir? sıralayacak olursak;

  • UX, UI değildir, ancak birbirlerini tamamlarlar,
  • UX arayüzleri kullanışlı ve kolay hale getirir, UI arayüzleri güzelleştirir,
  • UX, kullanıcıların hedeflere ulaşmasına yardımcı olur ve iyi bir deneyim yaşamalarını sağlar. UI duygusal bağlantılar kurar.
  • UX tasarımı, UI tasarımından önce gelir.
  • UX tasarımı ürünler, arayüzler ve hizmetler boyunca gerçekleşir; UI yalnızca arayüzlerle ilgilidir.

Yazımızda UI Ve UX tasarım arasındaki farklar nelerdir? UI nedir? UX nedir? sorularına cevap verdik. Son olarak SteveJobs’un sözleriyle yazımızı sonlandıralım.

“Tasarım sadece göründüğü ve hissettirdiği değil. Tasarım nasıl çalıştığıdır ”

Devamını oku

Nuxt.js Nedir? Ne Tür Uygulamalar Geliştirilebilir?

Vue.js çatısı altında çalışan Nuxt.js, sunucu tarafından oluşturulan uygulamaları geliştirmek için bizlere kolaylık sağlayan bir Javascript kütüphanesidir.

Genellike Node.js tabanlı sistemlerin sayfalarda html tag lerin görünmemesinden dolayı SEO problemleri yaşamaktadır. Tam bu noktada Nuxt.js imdada yetişiyor.

Bir çok projede Nuxt.js kullanmak için sabırsızlanıyoruz.

Düşündüğünüz bir proje varsa ve Nuxt.js kullanmamızı isterseniz, Yeni Proje başlatabilirsiniz.

Nuxt.js ile Neler Geliştirebiliriz?

Universal App

Front-end önce sunucu üzerinde oluşturulur ve sonra tek sayfa uygulama yani Single Page App’e dönüştürülür. Bu durum bize SEO da büyük avantaj sağlamaktadır.

Single Page App

İlk yükleme işleminden sonra başlayacaktır ve daima tek sayfa uygulama olacaktır. Normal Vue.js gibi kolay bir şekilde çalışır.

Static App

Front-end öncelikle Pre-render olarak oluşturulur ve ilk yükleme sonrasında tek sayfa uygulamaya dönüştürülür. Bu durum bize SEO da büyük avantaj sağlamaktadır.

Devamını oku