HTML Şablonlarını WordPress Temalarına Dönüştürme

Web teknolojisi çok yol kat etmesine rağmen, hala yalnızca HTML ile oluşturulan web siteleri var. Bunlardan birine sahipseniz, bir HTML şablonunu nasıl WordPress temasına dönüştürebileceğinizi merak ediyor olabilirsiniz.

Neyse ki, bu HTML dosyalarını WordPress'e dönüştürmek istiyorsanız, emrinizde birkaç seçeneğiniz var. Mevcut teknikler, uygulamalı manuel dönüşümlerden tüm ağır yüklerin üstesinden gelebilecek uzmanlarla ortak çalışmaya kadar uzanır.

Bu makalede, HTML şablonu dönüştürmeye yönelik dört farklı yaklaşımı ele alacağız. Her biri için, HTML tabanlı bir web sitesini WordPress katına getirmenize yardımcı olabilecek talimatlar ve kaynaklar sağlayacağız. Ele alınacak çok şey var, o yüzden hemen konuya girelim!

HTML'yi Manuel Olarak Dönüştürme

Dönüşüm söz konusu olduğunda ilk seçenek manuel yaklaşımdır. Bu oldukça uygulamalı bir süreç olduğundan, hem orijinal web sitenizin hem de yeni web sitenizin dosyalarına erişiminiz olduğundan emin olmanız gerekir.

Genellikle, bu amaç için bir Güvenli Dosya Aktarım Protokolü (SFTP) uygulaması kullanırsınız. Web sitenize eriştikten sonra, aşağıdaki adımlarla ilerleyebilirsiniz.

1. Adım: Bir Tema Klasörü Oluşturun

Öncelikle, yeni tema dosyalarınızı tutmak için bir klasör oluşturmanız ve onu yeni temanızın adıyla etiketlemeniz gerekir. Kod düzenleyicinizi kullanarak beş özel dosya oluşturabilirsiniz:

• stil.css
• index.php
• başlık.php
• altbilgi.php
• kenar çubuğu.php

Şimdilik bu dosyaları boş bırakıp yeni oluşturduğunuz klasöre kaydedebilirsiniz.

2. Adım: Mevcut CSS'nizi Kopyalayıp Yapıştırın

Bir sonraki önceliğiniz Basamaklı Stil Sayfası (CSS) dosyasını özelleştirmek. Burası, siteniz için tüm farklı stil öğelerini özetleyeceğiniz yerdir.

En üstte, dosya hakkında bazı bilgiler eklemek iyi bir uygulamadır. Aslında WordPress söz konusu olduğunda, temanın Tema Dizininde yer alması için gerekli olan bazı unsurlar vardır.

Bu bilgilerin altına, orijinal web sitenizden yeni temanıza taşımak istediğiniz mevcut CSS stillerini yapıştırmak isteyeceksiniz.

3. Adım: Mevcut HTML'yi Ayırın

Orijinal web sitenizde, üstbilginizi, altbilginizi, kenar çubuğunuzu ve ana içerik alanlarınızı belirleyen HTML kodunun tümü büyük olasılıkla index.html dosyanızda olacaktır. Şimdi, bu öğelerin her birini WordPress temanız için oluşturduğunuz yeni dosyalara ayırmanız gerekecek.

Örneğin, orijinal web sitenizin index.html dosyasında, 'main' sınıfına sahip ilk <div> etiketini bulabilirsiniz. Bu etiketten önce gelen her şey kopyalanıp yeni header.php dosyanıza yapıştırılabilir.

Daha sonra bu işlemi 'kenar çubuğu' ve 'altbilgi' etiketleri için tekrarlayacaksınız. Bu öğelerin her birinde bulunan kodu kopyalayın ve ilgili PHP dosyalarına yapıştırın.

Şimdi, geriye index.html dosyanızın birincil kısmı kalacak. Bu, HTML tabanlı web sitenizin ana içerik düzenini oluşturan şeydir. Bu kalan kodu kopyalayıp yeni index.php dosyanıza yapıştırmanız gerekecek.

4. Adım: Index.php Dosyanızı Yapılandırın

Bir sonraki adımınız, yeni dizin dosyanızın, temanızın sitenizin yapısını ve stilini görüntülemesini sağlamak için gerekli dosyaları bulabildiğinden emin olmaktır. Bunu başarmak için WordPress şablon etiketlerini kullanacaksınız. Bunlar, temaya üst bilgi, alt bilgi ve kenar çubuğu dosyalarını almasını söylemek için kullanılır.

Örneğin, şablonunuzun aşağıdaki etiketi kullanarak oluşturduğunuz başlık dosyasını görüntülemesini sağlayabilirsiniz:

get_header();

Bunu index.php şablon dosyanıza veya başlığın görünmesini istediğiniz sonraki sayfalara yerleştireceksiniz. Aynısı altbilginiz için de geçerlidir.

Yeni şablonunuzun anlamanız gereken başka bir önemli kısmı daha var. Buna WordPress döngüsü denir - şablona gönderileri çekmesini söyleyen bir PHP kod parçası. Kaç gönderinin görüntülendiğini kontrol etmek için de özelleştirilebilir.

5. Adım: Yeni Temanızı Yükleyin

Artık yeni temanız harekete geçmeye hazır olduğuna göre, klasörünü web sitenizin wp-themes/content/ dizinine yerleştirmeniz gerekecek:

Dosyaları yükledikten sonra, WordPress panonuza giriş yapabilir ve Görünüm > Temalar'a gidebilirsiniz. Burada, yeni temanızın listelendiğini görmeli ve Etkinleştir'e tıklayıp kullanmaya başlayabilmelisiniz.

Bir Eklentiyle HTML İçeriğini İçe Aktarma

Bu işlemi gerçekleştirmenin başka bir yolu da eski, HTML tabanlı sitenizden içerik aktarmak için bir eklenti kullanmaktır. Ne yazık ki, WordPress'in son sürümleriyle uyumlu çok az araç bulunmaktadır. Bununla birlikte, WP Site Importer'ın ücretsiz deneme sürümüne göz atabilirsiniz :

Bu eklenti, tüm web sitenizi tarayabilir ve taşınabilir içeriği kataloglayabilir. HTML'niz iyi organize edilmişse ve başlangıç ​​için "temiz" ise en iyi sonucu verir. Menüler ve bağlantılar gibi içerikleri de içe aktarabileceksiniz.

Alt Tema Kullanma

HTML sitenizi WordPress'e taşımanın başka bir yolu da alt tema kullanmaktır. Bu, ana temasıyla aynı temel işleve ve stile sahiptir, ancak üst temayı güncelleseniz bile yaptığınız ince ayarları ve özelleştirmeleri koruyabileceksiniz.

1. Adım: Bir Tema Seçin

WordPress Tema Dizininde seçebileceğiniz birçok iyi oluşturulmuş ücretsiz tema vardır. Beğendiğiniz birini seçtikten sonra, dosyalarının web sitenizin dosya dizininde bulunabilmesi için yüklemeniz gerekir:

Ancak bu ana temayı etkinleştirmeniz gerekmez.

2. Adım: Çocuğunuzun Teması İçin Bir Klasör Oluşturun

Ardından, dosyalarınıza bir FTP uygulamasıyla erişmeniz ve wp-content/themes dizininizde yeni bir klasör oluşturmanız gerekir. Bu dosya, sonuna “-child” eklenerek ana temanızla aynı ada sahip olmalıdır.

Örneğin, Twenty Nineteen için bir alt tema oluşturacaksanız, Twentynineteen-child adlı bir klasör oluşturabilirsiniz:

Bu kurulum, gerekli tema dosyalarının geri kalanını kurduktan sonra alt temanızın işlevleri ve stilleri ana temadan otomatik olarak çekebileceği anlamına gelir.

3. Adım: Bir Stil Sayfası Oluşturun

Bir sonraki adımınız style.css dosyanızı kurmak olacaktır. WordPress, ebeveyn-alt tema ilişkisinin çalışması için stil sayfasında bazı özel bilgiler gerektirir. Gerekirse orijinal HTML dosyalarınızdan ek stil bilgileri de yapıştırabilirsiniz.

4. Adım: Bir Function.php Dosyası Kurun

Artık temelde üzerinde çalıştığınız iki temanız olduğuna göre, WordPress'e alt temanızın ebeveynin CSS'sine bağlı olduğunu söylemeniz gerekir. Bunun için wp_enqueue_style() PHP çağrısını kullanabilirsiniz.

Önce bir function.php dosyası oluşturacak ve onu alt temanızın klasörüne yerleştireceksiniz. Bu, tema bağımlılıklarını ve hiyerarşiyi açıklayan kuyruğa alma işlevini yürüteceğiniz dosyadır.

5. Adım: Çocuk Temanızı Etkinleştirin

Bu yeni dosyaları web sitenizin sunucusuna yükledikten sonra, WordPress kontrol panelinize geri dönebilir ve Görünüm > Temalar seçeneğine gidebilirsiniz. Orada, artık çocuk temanızın kullanıma hazır olduğunu görmelisiniz.

Alt temanızı web sitenizin teması olarak ayarlamak için Etkinleştir'e tıklayın. Ardından, HTML web sitesi içeriğinizi yeni WordPress sitenize kopyalamaya hazırsınız.

Bir Site Dönüştürme Hizmeti Satın Alın

Bir dönüştürmeyi kendiniz gerçekleştirmek için zamanınız veya kaynaklarınız yoksa, bir dönüştürme hizmetine de göz atabilirsiniz. Ek olarak, diğer WordPress içeriğini taşımak için daha fazla kaynağa veya yardıma ihtiyacınız varsa, burada WP Engine'de taşıma ve dönüştürme için birçok çözüm ve kaynak sunuyoruz.

1. WPG Geeks Kiralama

HireWPGeeks, tam hizmet dönüştürme seçeneğidir. Tüm ağır işleri halledecek ve sonunda tüm içeriğinizle eksiksiz, esnek, duyarlı, tema tabanlı bir WordPress web sitesine sahip olacaksınız. Bir fiyat teklifi için şirketle iletişime geçmeniz gerekecek, ancak hizmetlerini 89 dolardan başlayan fiyatlarla planlayabilirsiniz.

2. FantasTech Çözümleri

FantasTech Solutions, başka bir HTML'den WordPress'e dönüştürme hizmetidir. HTML'den üst düzey, iyi kodlanmış WordPress tema şablonlarına son derece profesyonel dönüşümlerin reklamını yapar. Maliyetlerin bir sayfa için 297 ABD dolarından başladığını aklınızda bulundurmak isteyeceksiniz. Ek sayfaların her biri 147 dolardan başlar ve karmaşıklığa bağlı olarak tam fiyatlandırma yapılır.

WP Engine ile Site Deneyiminizi Özelleştirin

Büyük bir girişim gibi görünebilir, ancak HTML web sitenizi WordPress'e dönüştürmek birçok başka fırsatın önünü açabilir. Bu son derece esnek ve genişletilebilir platformla, daha çevik hale gelecek ve yeni içeriği hızla dağıtabileceksiniz.

WP Engine'de, doğru geliştirici kaynaklarının projeleriniz üzerinde büyük bir etki yaratabileceğine inanıyoruz. Yenilikçi çözümlere ek olarak, her bütçeye uygun planlar ve fiyatlandırma seviyeleri sunuyoruz!