İşaretlerden WordPress temaları oluşturun

Bir WordPress teması oluşturmanız mı gerekiyor? Aşağıdaki öğreticide, temaları bir Sass ve Bootstrap çerçevesi ile entegre etmek için bir WordPress teması oluşturmak için size adım adım rehberlik edeceğiz. Şu anda, tüm “WordPress geliştiricileri” gerçek geliştiriciler değil, aslında “uygulayıcılar” gibi görünüyor. Yaptıkları şey sadece hazır WordPress temasını almak, küçük bir stil, iyi görünen bir logo, bazı WP eklentileri ve voila – bir siteniz var. Ancak, sıfırdan başlaması istendiğinde endişeli oldular. WP zamanla giderek daha popüler hale geliyor, bu nedenle WordPress Web geliştirme hizmetlerini sağlayan herkes için oyunlarında en iyi olmasını sağlıyor. Bu, müşteriler için, nedenler ve mantıkla WordPress ile bir şey yapabilmeniz gerektiği anlamına gelir. Yapılan çerçeveye ve şablona bağımlılık sadece şimdiye kadar adım atmanızı sağlayacaktır. Bu nedenle, yeni başlayan bir tema kullanarak bir proje oluşturmak için bir WordPress web sitesi tasarım şirketi kiralamak iyi bir fikirdir çünkü benzersiz bir tasarım üretir.


Söylemek için bir WP geliştirici-daha kolay mı? WordPress geliştiricisi olmak herkes için kolay değildir. Akıcı olmalısınız:
HTML
CSS
Javascript
jQuery
PHP
MySQL (WP için yazılan miktar projede değişir)
Yani temelde ihtiyacınız olan şey, programlama dili ve web teknolojisinde deneyim ile donatılmış gerçek bir geliştirici olmaktır. Sunucuda eklentiler içeren bir WP temasını nasıl yükleyeceğinizi bilmek WP geliştiricisi olmak için yeterli değildir. Başlayalım, ha? Öncelikle, www.wordpress.org adresinden yerel makinenize WordPress’i indirin ve gerekli tüm dosyaları açın. Daha sonra wp-content> temaları bulmanız gerekir. Mevcut konumda, oluşturmak istediğimiz temanın adını içeren yeni bir klasör oluşturacağız. Bootstrap ile temiz bir site oluşturmayı planladığımız için, buna marş scanwp diyoruz. Sahip olmanız gereken ilk dosya style.css dosyasıdır. Üst dosyada, birkaç yorum girmek, WP’ye tema adınızın ne olduğunu söylemek istersiniz. Yorum dizesinde (/ * text */), temanızın adını, URL’sini, yazarın adı, tema açıklaması, sürüm (1 net), lisans, etiket ve metin alanının adını yazmak istersiniz. Aşağıdakiler, tüm araçlara genel bir bakış:
İsim Tema: Oldukça açık olan bu, izleyicilere, yöneticinizde gördüğünüz temanızın adının adını anlatır.
URL teması: Temayı indirmek için başkaları tarafından kullanılabilecek URL.
Yazar: Gerçek geliştiricinin adı.
Açıklama: Temanızla alakalı olanı ve kimin için tasarlandığını vb. Yazın.
Sürüm: Sürüm Numarası Temayı WordPress Dizini’ne yüklemeyi planlıyorsanız.
Lisans: GNU lisansıyla bir yorum bırakın, açık kaynak haline getirin.
Etki alanı metni: Bu konuda fazla konuşmayacağız, ancak bu, temanızı çeviren kişiler tarafından kullanılan addır.
Bununla, temayı gerçekten etkinleştirmeden önce eklemek için sadece 2 dosyamız var. Her iki dosya da function.php ve index.php’dir. Bu 2 dosyayı içine bir satır kod eklemeden ekleyebilirsiniz. Temanız artık etkinleştirilebilir. Ancak, gerçekten etkinleştirmek için bir WP kurulumunuz olmalıdır. Zaten sahipseniz, özleyebilirsiniz, ancak değilse, bazılarını deneyebilirsiniz.

Yerel WordPress veya Sunucunun Geliştirilmesi
Yerel geliştirme için XAMPP / WAMP / LAMP kullanabilirsiniz.
Yerel geliştirme için bir masaüstü sunucusu da kullanabilirsiniz.
Doğrudan sunucuda siteler geliştirin.
Öğrenme amacıyla, genellikle yerel gelişimi seçeriz, çünkü sunucudaki doğrudan geliştirme faydası yoktur. XAMPP ve Wamp kullanarak birçok web sitesi oluşturduk, ancak masaüstü sunucusuna geçtik. Süreç çok daha basit hale geliyor, ancak daha önce iki tane iyi. Bu makale oluşturuluncaya kadar önerdiğimiz en iyi çözüm XAMPP (burada daha fazla öğrenin) ve Gulp.

WP temasını etkinleştirme ve çalıştırdığınızda ve yapmanız gereken tek şey kök klasöründen WP-content klasörüne gitmek ve tema klasörüne geçmektir, daha önce bulunduk. Şimdi temamızın adını ve içinde 3 dosyayı içeren bir klasörümüz olmalı. Yani dosya style.css, functions.php ve index.php. Artık yeni bir temayı etkinleştirmeye ve ellerimizi gelişimle kirletmeye başlıyoruz. WP kurulumunuzu girin ve giriş sayfasına yönlendirileceksiniz. Sadece girmek için kullanıcı adınızı ve şifrenizi ekleyin. Sizi doğrudan tema sayfasına götüren görünüm sekmesine gidin. Şimdi temanın tema sayfasında olduğunu göreceksiniz. Şimdi tek yapmanız gereken Etkinleştir düğmesine tıklayın ve tema şimdi kullanılıyor. İyi bir ekran görüntüsü var, ancak temanızın hiç resmi yok. Bu makalenin bu kısmı zorunlu değil, bu temayla bir şeyler yapmak istiyorsanız kullanışlıdır. Sadece resmi ekleyin. Tema klasöründe, 800 x 660 boyutlarına sahip “screethot.png” başlığı verilmesi gereken bir dosya ekleyebilirsiniz. Şimdi tema sayfasını yeniledikten sonra tema ekran görüntülerini göreceksiniz.

Önce WordPress temamıza bootstrap twitter ekleyin, bootstrap’ı hiç duymadıysanız, küçük bir önizleme yapacağız. Çok derin tartışmayacağız, bunun için belgeleri okuyabilirsiniz. Ön ucun gelişimi ile bağlantılı olarak, Bootstrap tüm sıkı çalışmaları kolaylaştırır. Bootstrap oldukça standart bir çerçevedir. HTML veya CSS hakkında fazla bir şey bilmeseniz bile, belgeleri mükemmeldir ve kolayca okuyabilir ve alabilirsiniz. Genellikle HTML veya CSS ile siteler geliştirdiğimizde, genellikle
, ve
gibi etiketleri kullanırız. Diğerleri var ama temel bu. Bootstrap olmadan, bu öğeler sadece statik HTML’dir ve hiçbir şekilde düzenlenmez. Bootstrap ile her şey çok daha kolay hale gelir, çünkü bu etikette metninizi ona göre düzenlemek için kullanabileceğiniz birçok sınıf vardır, bu da işin zor bir parçasını çok daha kolay hale getirir. Twitter bootstrap’ı kullanırken alabileceğiniz çeşitli avantajlar vardır ve bunlardan biri ızgara sistemidir. Bir kez daha, derinlemesine tartışmayacağız, ancak Bootstrap öğreticisindeki her şeyi okuyabilirsiniz. ve içindeki kodu WordPress temasına entegre edin. Boilerplate kodu 3 farklı gruba ayrılmıştır:
Başlık
Dipnot
İçerik sayfası

WP sitesi ile ilgili olarak, sitenin tüm alanına başlık denir. Bu, header.php adına sahip bir dosyadır. Sitenin altındaki alana footer.php adlı bir dosyada bulunan Footer olarak adlandırılır. Geri kalanı içerik sayfası olarak kullanacağımız dosyaya yerleştirilecektir. Tema klasörünüzde, header.php ve footer.php. korkutucu görünebilir. Ama korkmana gerek yok. Şablon kodunu gövde etiketine ekleriz, WP dili özniteliğinin işlevini, WP işlevinin başlığı, WP başlığı, baş ve vücut sınıfı işlevinden önce gereken kod olan WP’nin başlığı ekleriz. Bu, her sayfa için birkaç değişkene dayalı benzersiz bir sınıf verir.
<html >
<Önde
<meta charset = "”>

<Body

> Tema altbilgisine eklenecek kod

Başlamadan önce yapmanız gereken son şey, içerik dosyanıza 2 dosya girmektir. Şu anda index.php dosyasını kullanacağız. Yani, index.php’de aşağıdakileri ekleyebilirsiniz:

Şu anda bir altbilgi, başlık ve içerik dosyası hazırladık. Siteyi şimdi yenilerseniz, “Merhaba Dünya” nın sembolünü görebilirsiniz. veya stil. Bunun nedeni, bunu function.php aracılığıyla WordPress tarafından yapacağız. Scanwp_enqueue () function ()
{
wp_enqueue_style (‘bootstrap’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css’);
if ($ _server [‘server_name’]! = ‘localhost’)
{wp_enqueue_style (‘stil’, get_template_directory_uri (). ‘/style.min.css’);}
değilse
{wp_enqueue_style (‘stil’, get_template_directory_uri (). ‘/style.css’); }
wp_enqueue_script (‘customjs’, get_template_directory_uri (). ‘/assets/js/custom.min.js’, dizi (‘jQuery’), ”, true);
wp_enqueue_style (‘arial’, “https://fonts.googleis.com/css?family=arial:300|arial:normal|iarial:700″);
wp_enqueue_style (‘fontawome’, ‘https://use.fontawesome.com/releases/v5.2.0/css/all.css’);
wp_enqueue_script (‘bootstrapcdn’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/Bootstrap.min.js’, dizi (‘JQuery’), ”, true); @
Add_action (‘wp_enqueue_scripts’, ‘scanwp_enqueue’); Bu işlevde, üstbilgi ve altbilgiye uygun kod ve stil ekledik. Ek bir bonus olarak, hangi stil sayfasının görüntüleneceğine karar vermek ve ücretsiz kullanabileceğiniz bir Google yazı tipi eklemek için stil işlevselliği ekledik. Gerçekten daha çok çalışmak istiyorsanız, Fontawesome kullanabilirsiniz. Şimdi birkaç işlev daha ekleyelim: add_theme_support (‘tel başlık’); add_theme_support (‘thumbnail sonrası’);
Register_nav_menus (dizi (
‘Başlık’ => ‘Özel Ana Menü’,
));
Scanwp_widgets_init () işlevi {
Register_idabar (dizi (
‘İsim’ => ‘bacak 1’,
‘id’ => ‘footer_1’,
‘Önce_widget’ => ‘
‘,
‘After_widget’ => ”,
‘Önce_title’ => ‘

‘,
‘After_title’ => ‘

‘,
));
Register_idabar (dizi (
‘İsim’ => ‘ayak 2’,
‘id’ => ‘footer_2’,
‘Önce_widget’ => ‘
‘,
‘After_widget’ => ”,
‘Önce_title’ => ‘

‘,
‘After_title’ => ‘

‘,
));
Register_idabar (dizi (
‘isim’ => ‘ayak 3’,
‘id’ => ‘footer_3’,
‘Önce_widget’ => ‘
‘,
‘After_widget’ => ”,
‘Önce_title’ => ‘

‘,
‘After_title’ => ‘

‘,
));
Register_idabar (dizi (
‘İsim’ => ‘yan bıçak’,
‘id’ => ‘yan bıçaklar’,
‘Önce_widget’ => ‘
‘,
‘After_widget’ => ”,
‘Önce_title’ => ‘

‘,
‘After_title’ => ‘

‘,
));}
Add_action (‘widgets_init’, ‘scanwp_widgets_init’);Bu temelde kodunuzu doğru bir şekilde eklediğiniz bir oyundur.Sadece WP tema işlevlerimizi iyi hale getirmek için bir dizi temel işlev ekledik.Function.php hakkında daha fazla bilgiyi buradan edinebilirsiniz.
Başlık Etiketi seçeneğini eklediğinizde, bunu header.php’den silmenizi ve WordPress’ten ilginizi çekmenizi sağlar.
Küçük resim yayınlamak duyulmakla aynıdır.Sitemizdeki her gönderide küçük resim yapma seçeneğini etkinleştirirler.
Gerektiğinde çok fazla gezinme menüsü yapabiliriz, ancak önce kaydetmeliyiz.
Widget’lar Site Yönetici panelinden ekleyeceğiniz her widget’ı sarar.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir