WORDPRESS TEMA ENTEGRE DERSLERİ

Bu eğitim serisinde HTML to WORDPRESS yani wordpress tema entegresi yapacağız. Bu baştan sona kadar ücretsiz bir tema yapımı eğitimi olacak. Örnek şablon olarak BOOTSTRAP RESPONSİVE özellikli Kurumsal bir html tema kullanacağız. Bir tasarımcı tarafından daha önce çizilen ve HTML CSS JAVASCRİPT kodlaması yapılmış bir template’i alıp wordpresse giydireceğiz. Bu eğitimi bitirdikten sonra dilediğiniz bir HTML şablonu alıp WORDPRESS’e uyarlayabileceksiniz.

HTML, CSS, PHP dillerini az çok biliyorsanız bu eğitim gözünüzü korkutmasın WORDPRESS ve ADVANCED CUSTOM FIELD PRO eklentisi kullanarak bir HTML template’nin nasıl çok kolay bir şekilde dinamik hale getirildiğini göreceksiniz. wordpress advanced custom field kullanımı ve tab menü yapımı, header menü yapımı, bileşen oluşturma, kategori sayfası yapımı wordpress fonksiyonlarının etkili kullanımı vs. konuları detaylıca ele alacağız.

NOT: Daha önce BURADA XAMP KURULUMUNU ve BURADA WORDPRESS kurulumunu paylaştığım için tekrar bu kurulumları gerçekleştirmeyeceğiZ ve eğitim sırasında kod/metin editörü olarak SUBLIMETEXT ve nodepad++ kullanıyor olacağım.

GİRİŞ (PROJE TANITIMI, TEMA ÖNİZLEMESİ)

PART 1 (HTM temanın parçalanması, style tanımlaması, header.php düzenlemesi, bloginfo fonksiyonu)

PART 1 VİDEO İÇERİĞİ

– Yeni Tema Klasörünün Oluşturulması (yenitema)
– WordPress dizinini SublimeText ile açma
– WordPress için index.php, style.css, page.php, header.php, footer.php, front-page.php, functions.php, single.php, search.php, 404.php, archive.php dosyalarının oluşuturulması – Style.css içine yazılması gerekenler, tema adı, linki, sürüm bilgisini gösterme
– Colorlib sayfasından template indirme
– HTML Temanın Parçalanması, (header, footer, front-page olarak üçe ayrılması)
– Get_header, get_footer, fonksiyonları
– Screenshot.png ayarlanması (Boyutları 1200 px x 900 px olan wordpress önizleme resminin ayarlanması )
– Css, js, img dosyaların taşınması, tema yolunu gösterme,
– Bloginfo(); fonksiyonun kullanımı
– Wp_head(), wp_footer() fonksiyonlarının önemi
– Functions.php içinde javascript ve css dosyalarının tanımlanması
– Wp_register_style() fonksiyonuyla css tanımlama
– Wp_register_script() fonksiyonuyla javascript dosyalarını tanımlama
– Tab Menünün çalıştırılması
– Get_template_directory_uri() fonksiyonu ile tema yolunu yazma
– Tema önizlemesi,
– Temada görünmeyen resimlerin ayarlanması
– Logonun gösterilmesi
– Bloginfo(‘url’) , Bloginfo(‘template_url’), Bloginfo(‘name’), wp_title() , Bloginfo(‘descripiton’) fonksiyonlarıyla header.php’nin dinamik hale getirilmesi…
– Eğitimde Kullanılan luigis isimli kurumsal Tema indirme adresi: https://colorlib.com/wp/template/luigis/
– Kullandığım screenshot.png dosyası

PART 2 (Header Düzenlemesi, Dinamik Menü Yapımı)

PART 2 VİDEO İÇERİĞİ

–  header.php dosyasında çalışma yapılıyor
– Görünüm -> “Menüler” alanını aktif etmek (functions.php’de)
– Üst Menü / Header Menü oluşuturulması
– Klasik Düzenleyiciye Geçiş
– HAKKIMIZDA, İLETİŞİM, SAYFALARININ OLUŞTURULMASI, BLOG KATEGORİSİNİN OLUŞTURULMASI
– Menünün Tema Konumunun ayarlanması
– Menüyü functions.php’de register etmek
– add_theme_support(‘menus’) fonksiyonu
– register_nav_menus() fonksiyonu
– wp_nav_menu() fonksiyonu
– html template içindeki menünün style tanımlamalarının, wordpress menüsüne aktarılması

PART 3 (ÖN SAYFA – Frontpage Yapımı, Adcanced Custom Field Kurulumu ve Kullanımı, Gelişmiş Özel Alan Yapımı)

PART 3 VİDEO İÇERİĞİ

00:33 – Ön Sayfa’nın oluşturulması,
00:38 – Ayarlar – “Okuma” sabit sayfa ayarlanması
00:54 – “Advanced Custom Field Pro” Eklentisi ve Kurulumu
01:16 – Github’dan ACF’nin indirilmesi, aktif edilmesi
03:14 – Ön Sayfa isimli Özel Alan’ın oluşturulması
09:19 – ACF ile oluşturulan özel alanlarla GİRİŞ alanının dinamik hale getirilmesi

PART 4 (Frontpage Hikayemiz Alanı, Gelişmiş Özel Alanlarla Çalışmak)

PART 4 VİDEO İÇERİĞİ

– front-page.php sayfa düzenlemesine heyecanla son hız devam ediyoruz. ACF(Gelişmiş Özel Alan) kullanarak temamız içindeki statik “Our Story” yani hikayemiz bölümünü dinamik hale getiriyoruz.

PART 5 (Frontpage Popüler Ürünler Alanı Yapımı & Repeater Kullanımı)

PART 5 VİDEO İÇERİĞİ

Devam ediyoruz, temamızı yavaş yavaş düzenlenebilir hale getiriyoruz, bu videoda Advanced Custom Field eklentisinin mantığını daha iyi kavrayacaksınız. Sınırsız eklenebilir bir alan yapıyoruz, bunu ACF yani gelişmiş özel alanlar eklentisinin “Tekrarlayıcı” özelliğini yani advanced custom field repeater kullanarak yapıyoruz ve tema içinde yer alan “Best Sellers” Çok Satanlar bölümünü kodluyoruz ben bunu “Popüler Ürünler” olarak değiştirdim ama siz istediğiniz başlığı verebilirsiniz.

PART 6 (Frontpage’de Repeater Kullanarak Tab Menü Yapımı)

PART 6 VİDEO İÇERİĞİ

Bu bölümde Advanced Custom Field Repeater kullanımı daha iyi anlaşılacaktır çünkü Repeater kullanarak jquery ile çalışan tab menümüzü dinamik hale getiriyoruz ve tema içinde yer alan statik html “Our Menu” alanını wordpress’e entegre ediyoruz.

PART 7 (WordPress Sayfa Şablonu Yapımı: Hakkımızda)

PART 7 VİDEO İÇERİĞİ

Bu bölümde wordpress hakkımızda sayfası yapıyor olacağız. Özel sayfa şablonu oluşturmayı öğreneceğiz.

– about_us HTML dosyasının WORDPRESS’te page.php dosyasına aktarılması
– Bozuk görsellerin düzeltilmesi, bloginfo fonksiyonuyla tema yolunun tanımlanması
– About Us Sayfa şablonunun, hakkımızda sayfasına özel olarak ayarlanması (template-hakkimizda.php yapımı)
– Öne Çıkarılmış Görsel Alanının yapımı, post-thumbnails kullanımı

PART 8 (ACF ile Müşteri Yorumları Alanı Yapımı)

PART 8 VİDEO İÇERİĞİ

Advanced Custom Field ile repeater kullanarak kim ne söyledi? tarzında şablonda yer alan kısmı müşteri yorumları alanı şeklinde yapacağız, profil resmi, yorum başlık ve yorum alanını düzenlenebilir hale getireceğiz.

PART 9 (Archive.php Blog Kategorisi Yapımı, İçerik özet listeleme)

PART 9 VİDEO İÇERİĞİ

Şimdi Anasayfa’nın WordPress‘e aktarılması bitti şimdi geldik blog şablonuna, Adım adım blog kategorisini archive.php üzerinde dinamik hale getireceğiz. Blog kategorisine ait yazıları listeleyeceğiz ve özetlerini göstereceğiz, ayrıca wordpress’te öne çıkarılmış görsel, yazı başlığı, yazı linki, yazar adı, yazı tarihi, yazı kategori bilgisi, yorum sayısı gibi dinamik alanların nasıl yapıldığını kullanıcıya nasıl gösterildiğini öğreneceğiz.

PART 10 (Widget Oluşturma 1: Özel arama bileşeni yapımı)

PART 10 VİDEO İÇERİĞİ

Sıra geldi kendi bileşenimizi yapmaya,  bu videoda Sidebar oluşturacağız.
– Görünüm – Bileşenler’i aktif etme (register_sidebar() fonksiyonu)
– Widget / Bileşen Yapımı (Örnek Bileşen Yapımı)
– Arama Bileşeni Yapımı

PART 11 (Widget Oluşturma 2: Özel kampanya bileşeni yapımı)

PART 11 VİDEO İÇERİĞİ

Widget Yapımına devam ediyoruz. 2. Özel bileşenimizi yapıyoruz
– Temaya Özel Kampanya Bileşeni yapımı
– Kategori sayfasının tamamlanması

PART 12 (Single.php Yapımı & Yorumlar’ın Gösterilmesi)

PART 12 VİDEO İÇERİĞİ

Temamızı tamamlıyoruz son olarak Tekil yazı sayfası (single.php) yapıyoruz.
– Yazı detaylarının gösterilmesi
– Yorumlar alanının gösterilmesi