HTML Web Sitesini WordPress'e Ücretsiz Nasıl Dönüştürürsünüz? Kılavuz

Yayınlanan: 2015-05-18

Başlangıçta, tüm web siteleri metin ve statik HTML ile yapıldı. WordPress yoktu ve HTML web sitesini WordPress'e veya başka bir CMS sistemine dönüştürmeniz gerekiyordu.

Birçok işletme, çevrimiçi varlıkları için hala basit HTML web sitelerine güveniyor. Bu HTML siteleri genellikle doğada statiktir. Bu, web sitesindeki küçük bir detayın bile değiştirilmesinin kodlama dosyası düzenlenerek yapıldığı anlamına gelir.

20 yıldan fazla bir süre sonra, web çok farklı bir yer. Web'in %25'inden fazlasına güç sağlayan WordPress, giderek ortalama bir kullanıcının tercih ettiği içerik yönetim sistemi (CMS) haline geliyor.

Web siteleri çok daha karmaşıktır. Hem site yaratıcıları hem de ziyaretçiler için daha zengin ve daha keyifli deneyimler sağlarlar. WordPress'e geçmek, baştan başlamak ve mevcut web sitesine harcanan tüm zaman, enerji ve parayı kaybetmek anlamına mı geliyor ?

İçindekiler

HTML Web Sitesi

Siteniz nasıl kodlanırsa kodlansın, bir ziyaretçi sitenize bir sayfa yüklediğinde, tarayıcı tüm parçaları (sunucu tarafı içerir, başka bir dizinden görüntüler vb.) alır ve hepsini son bir statik HTML'de bir araya getirir. sayfa.

Sayfadaki bazı öğeler hala dinamik olsa bile, kodun kendisi, çalışmaya devam edecek bir WordPress sayfasına taşınabilecek tek bir noktada bir aradadır. Bunun bazı istisnaları olabilir, ancak oradaki sitelerin çoğu için bu doğru olacaktır.

Siteniz, header.inc adlı bir dosya ve footer.php adlı bir dosya çağıran somepage.php'den oluşsa bile, kullanıcı bir tarayıcıda somepage.php dosyasını görüntülediğinde, ortaya çıkan kaynak kodun tümü sanki tek bir yerdedir. statik bir HTML sayfası olarak elle kodlanmıştır.

Bu, bir siteyi WordPress'e dönüştürmek için gereken kod türüdür. WordPress kurulumuna ve doğru temaya/eklentilere sahip herkes, gelişmiş tasarım ve işlevselliğe sahip modern bir web sitesine sahip olabilir.

Statik HTML Sitesinden WordPress Ön Adımlarına Geçin

WordPress'e geçmeye hazırsanız, dikkate almanız gereken dört adım aşağıdadır:

1. Mevcut HTML Sitenizi Analiz Edin

Sitenizde alakasız veya güncel olmayan içerik olup olmadığını kontrol edin ve bulunursa temizleyin. Mevcut navigasyon sistemini inceleyin ve nasıl geliştirilebileceğini düşünün. HTML site analizinizi yapmak, hangi içeriğin, özelliklerin ve işlevlerin WordPress'e taşınması gerektiğine karar vermenize yardımcı olur.

Bu, WordPress platformunda aynı işlevselliği elde etmek için hangi eklentileri yüklemeniz gerektiği hakkında net bir fikir verecektir.

2. WordPress'i Tanıyın

WordPress kurulumu oldukça kolay bir işlemdir. Çoğu web barındırıcısı tek tıklamayla yükleme sunar. Eğer aşina değilseniz, sitenizin üzerinde çalışacağı yeni platform hakkında bilgi almak ve bilgi vermek iyi olur.

3. HTML Sitenizin Yedeğini Yapın

Taşıma sırasında herhangi bir veri kaybı riskinden kaçınmak için statik sitenizin tam bir yedeğini almanız şiddetle önerilir.

4. HTML Web Sitesini WordPress'e Dönüştürün

Yeterli kodlama bilgisine sahip olduğunuzu ve sitenizin küçük olduğunu varsayarsak, önünüzdeki olası en iyi seçenek, mevcut HTML kodunuzu dört bölüme (üstbilgi, altbilgi, kenar çubuğu ve içerik) bölmek ve ardından her bölümün içeriğini kopyalamaktır. ilgili PHP dosyası.

Sitenizin büyük olması durumunda, HTML Import 2 gibi bir HTML'den WordPress'e eklentisinden yararlanabilir veya HTML'yi WordPress'e dönüştürmek için birini işe alabilirsiniz.

HTML Web Sitesini WordPress Eğitimine Dönüştürme

Statik HTML sitenizi bir WordPress sitesine dönüştürmeyi nasıl seçeceğiniz, şüphesiz kişisel tercihinize, istediğiniz zaman/parasal yatırıma ve kodla ilgili beceri düzeyinize bağlı olacaktır.

Yöntem 1

HTML Web Sitesini WordPress'e Dönüştürmek için bu yöntemle, sitenin tasarımını ve görünümünü aynı tutacaksınız.

1. HTML sayfalarını mevcut sunucunuzdan indirin. Bunu yapmak için WinHTTrack'i kullanın. Kullanımı çok kolay olan harika bir ücretsiz araçtır. Resim klasörünü de (veya eski sitede resimleriniz varsa) aldığınızdan emin olun.

2. WordPress'i yeni web barındırıcınıza yükleyin .

Kalıcı bağlantı yapınızı “Posta adı” olarak ayarlayın (/%postname%/)
"Arama motorlarının bu siteyi dizine eklemesini engelle" kutusunu işaretleyin (her şey bitene kadar)
Yeni WordPress'inize sizden başka kimsenin erişememesi için (dilerseniz) Bakım Modu eklentisi yükleyin.
Ücretsiz WordPress eklentisi HTML İçe Aktarma yükleyin 2. Eski siteyi yeni sitenize “yüklemek” için kullanın. HTML sayfaları dizininizin tamamını içe aktarmak için kullanıcı kılavuzu.

3. 1. adımdan yeni indirdiğiniz içeriği yeni web barındırma dosya yapınıza yükleyin. Bunları, örneğin "html-files-to-import" adlı bir klasöre koyun. Tüm eski görüntüleri yeni sitenizdeki WordPress'teki Medya Kitaplığınıza yükleyin.

4. İçe Aktarmayı Çalıştır

5. DOS komut isteminizi ve Excel'i hazırlayın

DOS komut isteminde, HTML dosyalarınızı yerleştirdiğiniz yere gidin (bunları “web siteniz” adlı bir klasöre koymak ve bu klasörü C:\ sürücüsüne koymak en kolayıdır). Ardından şu komutu çalıştırın: i. dizin > dosyalar.txt
Files.txt dosyasını Excel'de açın.
Şimdi Excel'e. Esasen, HTML dosyalarına koyacağınız "kurallı" kodu oluşturmak için "birleştirme" dahil olmak üzere birkaç Excel işlevi kullanacaksınız.
İlgili kurallı kodu her HTML dosyasına yerleştirin. Bunu yapabilir, bir taşeron firmaya kiralayabilir veya bunu otomatik olarak yapacak olan PHP kodunu yazması için birini tutabilirsiniz.

6. HTML dosyalarını web barındırıcınıza yükleyin . Bunları yeni web siteniz için KÖK (yani en üstteki) klasörüne koyun. Resimler klasörünü de ROOT'a yüklemeyi unutmayın.

7. Yeni sitede her şeyin hala çalıştığından emin olun .

8. Adım #2 – “Arama motorlarının bu siteyi dizine eklemesini engelleyin” kutusunun işaretini kaldırın ve HTML Import 2 eklentisini devre dışı bırakın.

9. Kayıt kuruluşunuzdaki DNS'yi değiştirin .

10. Sitenizin URL'sinin doğru IP'ye çözümlendiğinden (eski IP değil yeni IP'niz) ve TÜM sayfaların doğru yüklendiğinden emin olun. Ad sunucularının güncellenmesi için birkaç saat beklemeniz gerekebilir.

11. Bir süre sonra eski HTML sayfalarını kaldırabilirsiniz , ancak buna gerek yoktur. Kanonik referanslar bununla ilgileneceği için “yinelenen içerik” cezalarıyla karşılaşmazsınız.

.htaccess dosyanıza, eski “.html sayfalarınızı” yeni WordPress sayfalarınıza yönlendiren yönlendirmeler eklemek isteyeceksiniz.

Yöntem 2

Amacınız yalnızca statik HTML sitenizdeki içeriğinizi WordPress'e taşımak değil, aynı zamanda mevcut tasarımınızı çoğaltmaksa, bu, özel temanızı oluşturmanız gerekeceği anlamına gelir.

Yalnızca birkaç klasör ve dosya oluşturmayı, biraz kopyalayıp yapıştırmayı ve ardından sonucu yüklemeyi içerir. Sublime veya Notepad++ gibi bir kod düzenleyiciye ihtiyacınız olacak ve hem HTML sitenizin dizinine hem de yeni WordPress kurulumunuzun dizinine erişeceksiniz.

1.Yeni bir tema klasörü ve gerekli dosyaları oluşturun. Masaüstünüzde tema dosyalarınızı tutmak için yeni bir klasör oluşturun. Temanızın tanımlanmasını istediğiniz şekilde adlandırın.

Ardından, kod düzenleyicinizde birkaç dosya (tümü yeni tema klasörünüze gider) oluşturun:

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

2. Mevcut CSS'yi yeni stil sayfasına kopyalayın Bir tasarımı çoğaltmak istiyorsanız, bu muhtemelen kaydetmek istediğiniz en azından biraz CSS'niz olduğu anlamına gelir. Yani düzenlemek isteyeceğiniz ilk dosya Style.css dosyanızdır.

Başlamak için aşağıdakini dosyanızın en üstüne ekleyin.

 /*
 Tema Adı: Temanızın adıyla değiştirin.
 Tema URI'si: Temanızın URI'si
 Açıklama: Kısa bir açıklama.
 Sürüm: 1.0
 yazar: sen
 Yazar URI: Web sitenizin adresi.
 */

Bu bölümden sonra yalnızca mevcut CSS'nizi aşağıya yapıştırın. Dosyayı kaydedin ve kapatın.

3. Mevcut HTML'nizi ayırın

İşte mevcut kodunuzun parçalarını kesip, oluşturduğunuz farklı dosyalara yapıştırma işlemi geliyor.

İlk olarak, mevcut sitenizin index.html dosyasını açın. Dosyanın tepesinden açılış div class=”main” etiketine kadar her şeyi vurgulayın. Bu bölümü kopyalayıp header.php dosyanıza yapıştırın, kaydedin ve kapatın.
index.html dosyanıza geri dönün. kenara class=”kenar çubuğu” öğesini ve içindeki her şeyi vurgulayın. Bu bölümü kopyalayıp sidebar.php dosyanıza yapıştırın, kaydedin ve kapatın.
index.html'nizde kenar çubuğunuzdan sonraki her şeyi seçin ve kopyalayıp footer.php dosyanıza yapıştırın, kaydedin ve kapatın.
index.html dosyanızda, kalan her şeyi seçin (bu ana içerik bölümü olmalıdır) ve bunu index.php dosyanıza yapıştırın. Kaydet, ancak henüz kapatmayın. Artık bununla index.html dosyasını kapatmak ve son adımlara geçebiliriz. Neredeyse bitti!

4. Index.php dosyasını sonlandırın

Yeni temanızın index.php dosyasını sonlandırmak için, oluşturduğunuz diğer dosyalarda bulunan diğer bölümü (ana içeriğin yanı sıra) çağırabildiğinden emin olmanız gerekir.

index.php dosyanızın en üstüne aşağıdaki php satırını yerleştirin.

<?php get_header(); ?>

Ardından index.php dosyanızın en altına bu php satırlarını yerleştirin.

 <?php get_sidebar(); ?>
<?php get_footer(); ?>

Artık "Döngü" var. Bu, WordPress'in gönderi içeriğinizi ziyaretçilere göstermek için kullandığı birincil php bitidir. Bu nedenle, yeni temanızın index.php dosyasını oluşturmanın son adımı, içerik bölümüne aşağıdaki kodu eklemektir.

 <?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?> 
  <div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>> 
    <div class = "post-header" > 
       <div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div> 
       <h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2> 
       <div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div> 
    </div><!-- post header--> end post header--> 
    <div class = "entry clear" > 
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?> 
       <?php the_content(); ?> 
       <?php edit_post_link(); ?> 
       <?php wp_link_pages(); ?> </div> 
    <!-- entry--> end entry--> 
    <div class = "post-footer" > 
       <div class = "comments" ><?php comments_popup_link( '% Comments' ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' '1 Comment' '% Comments' ); ?></div> ); ?></div> 
    </div><!-- post footer--> end post footer--> 
    </div><!-- end post-->
 <?php endwhile ; /* rewind or continue if all posts have been fetched */ ?> 
    <div class = "navigation index" > 
       <div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div> 
       <div class = "alignright" ><?php previous_posts_link( "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div> 
    </div><!-- navigation--> end navigation-->
 <?php else : ?>
 <?php endif ; ?> ; ?>

index.php dosyanızı kaydedin ve kapatın. Temanız artık tamamlandı! Geriye kalan tek şey onu WordPress web sitenize yüklemek.

5. Yeni temanızı yükleyin

Artık oluşturulan tema dosyalarını yeni tema klasörünüzde depolayacaksınız. WordPress'i yükleyin.

Yeni tema klasörünüzü /wp-content/themes/ içine yerleştirin . WP Admin > Görünüm > Temalar'a gidin ve orada yeni oluşturulan temayı görmelisiniz. Etkinleştir! Bu noktada yapılması gereken tek şey, yeni WordPress web sitenizi eski sitenizin içeriğiyle doldurmak.

6. İçeriği HTML sitesinden WordPress'e kopyalayın

WP Admin'de Eklentiler > Yeni Ekle'ye gidin . Stephanie Leary tarafından HTML Import 2 adlı bir eklenti arayın. Bu eklenti yüklenip etkinleştirildikten sonra, HTML sayfaları dizinizin tamamını içe aktarmak için kullanım kılavuzunu izleyin. Bundan sonra siteniz daha önce olduğu gibi görünmelidir, sadece WordPress üzerinde çalışır.

HTML Sitesini Dönüştürmek için Mevcut WordPress Temasını Kullanma (en kolay yöntem)

Yukarıdaki adımlar çok yoğun veya zaman alıcı görünüyorsa, başka bir yol var. Bu en kolay yoldur.

Mevcut HTML tasarımını WordPress'te aynı görünecek şekilde dönüştürmek yerine, WordPress pazarında bulunan binlerce temadan herhangi birinden yararlanabilirsiniz.

Ücretsiz temalar ve premium temalar var. Beğendiğiniz bir temayı seçtikten sonra (ve sıkıştırılmış dosya paketini indirdikten sonra), yeni WordPress temanızı kurun/etkinleştirin.

Bu yapıldıktan sonra, yeni bir WordPress web sitesine ve temasına sahip olacaksınız. Sitenizi önizlediğinizde, boş olacaktır. HTML web sitesini WordPress sitesine dönüştürmek için içeriği içe aktarma ve işlemi tamamlama zamanı.

WP Admin'de Eklentiler > Yeni Ekle'ye gidin ve HTML İçe Aktarma 2 adlı bir eklenti arayın. Tüm HTML sayfaları dizininizi içe aktarmak için kullanım kılavuzunu izleyin. Bundan sonra, eski içeriğinizin tümüne ancak yeni bir görünüme sahip olacaksınız.

4 Tema Eşleştirici ile HTML'yi WordPress'e Dönüştürün

Tema Eşleştiriciyi de kullanabilirsiniz. Otomatik HTML'den WordPress'e dönüştürme sunar. Sadece sitenizi girin ve uygun alanı seçin. Tema Eşleştirici, mevcut web sitenizden resimler, stiller ve düzen alır.

HTML-Websitesini-theme-eşleştiricili-WordPress-sitesine dönüştürme

5 HTML'den WordPress'e Dönüştürücü Hizmeti

HTML'den WordPress'e, tek bir PHP satırı yazmanıza gerek kalmadan HTML tasarımlarınızı WordPress temalarına dönüştürür.

Statik HTML web sitenizi WordPress'e dönüştürecekleri hizmet planını seçebilirsiniz. Bu seçenek fiyata eklenebilir. Ayrıca önemli ölçüde daha ucuz olan Dönüştürücü seçeneğini de seçebilirsiniz.

HTML'den WordPress'e Dönüştürücü Hizmeti

Dönüştürme tamamen otomatiktir ve temanın işlevselliği, HTML'nize yalnızca "wp-" önekli dönüştürücü sınıfları eklenerek genişletilebilir.

Dönüştürücü, her HTML dosyası için şablonlar oluşturur ve varlıklarınıza referans verir ve gerekli tüm php işlevlerini doldurur. Web siteleri oluşturmak için Bootstrap, Webflow, Dreamweaver veya zaten rahat olduğunuz herhangi bir araç/çerçeveyi kullanın. Web sitesi HTML kullanılarak yapıldığı sürece onu bir temaya dönüştürebilirsiniz.

Göç Sonrası Yapılması Gerekenler?

Dönüşüm tamamlandığında, WordPress sitenize son dokunuşu yapmak için birkaç şey yapmanız gerekir.

Gerekli Eklentileri Yükleyin – Yepyeni WordPress sitenizi HTML sitesiyle aynı işlevlerle güçlendirmek için kullanışlı bulduğunuz eklentileri yükleyin.
Bozuk Bağlantıları Kontrol Et ve Onar – Web sitenizde bozuk bağlantılar (404 hata) olup olmadığını kontrol edin ve bulunursa düzeltin.
Özel bir 404 Hata Sayfası Ayarlayın – Ziyaretçilerinizi, var olmayan herhangi bir URL'ye erişmeye çalışmaları durumunda, WordPress sitenizin ilgili bölümlerine götürmek için özel bir 404 hata sayfası ekleyin.
Yönlendirme Bağlantıları – Arama motorlarına web sitenizin içeriğinin yeni bir web adresine taşındığını bildirmek için 301 yönlendirmeleri ayarlayın. Bunun için Simple 301 Redirect'i kullanabilirsiniz.
Arama Motoru Dizine Eklemeyi Etkinleştir : WordPress kontrol panelinizde “ Ayarlar –> Okuma ” bölümüne gidin ve sitenizin arama motorları tarafından dizine eklenmesini sağlamak için “ Arama motorlarının bu siteyi dizine eklemesine izin ver ” seçeneğini işaretleyin .
XML Site Haritası Oluşturun ve Gönderin : Sitenizin arama motoru sonuçlarında olabildiğince hızlı yer almasını sağlamak için bir XML site haritası oluşturun ve Google'a gönderin.

WordPress vs HTML – AVANTAJLARI & EKSİLERİ

Bir işletme web sitesi başlatmak kolay bir süreç değildir. En büyük ikilemlerden biri, statik bir HTML sitesi mi yoksa WordPress'e mi gidileceğidir.

WordPress – WordPress bir CMS (İçerik Yönetim Sistemi) olarak algılanır. Teknisyen olmayan kullanıcıların web sitelerine bir şeyler eklemeleri ve değiştirmeleri için basitleştirilmiş HTML sürümü.

CMS siteleri genellikle dinamiktir, yani içeriğinizi ne sıklıkta değiştireceğiniz konusunda herhangi bir kısıtlama yoktur. Resimlerden tüm metinlere kadar her şeyi değiştirebilirsiniz.

Arayüz çok basit ve kullanıcı dostudur ve hiç kimsenin bunu öğrenmek için özel bir eğitime ihtiyacı yoktur. CMS pazarı oldukça rekabetçidir, ancak WordPress her zaman rekabeti yener.

Başlamadan önce hatırlamanız gereken başka bir şey de, WordPress.com ile WordPress.org arasında önemli bir fark olduğudur, çünkü ikincisi açık kaynaklı bir CMS'dir. WordPress.com ise bir blog barındırma hizmeti olarak çalışır.

WordPress kullanmanın avantajları:

Siteye eksik olan işlevselliği eklemek için size binlerce eklenti sağlar.
Herhangi bir zamanda bir değişiklik mümkündür ve kimse sizi sınırlamıyor.
HTML kurulumuyla karşılaştırıldığında, WordPress'in kurulumu önemli ölçüde daha az zaman alır.

WordPress kullanmanın dezavantajları:

Öylece kurup unutamazsınız. Tam zamanlı dikkat ve yazılım, eklenti ve temaların sürekli güncellenmesini gerektirir.
Bilgisayar korsanları, kötü korunan ve güncellenmeyen web sitelerine saldıracaktır. Güncellemeleri takip etmezseniz, web sitenizin hiç çalışmama riskini alırsınız.
WordPress kolaydır, ancak yeni başlayanlar için o kadar da değil. Öğrenme eğrisini aşmanıza yardımcı olacak birçok çevrimiçi öğretici ve kapsamlı materyal vardır.

HTML statik web siteleri – Önceden şablon diye bir şey yoktu ve bir web sitesi yapmanın tek yolu, bunu sizin için yapacak bir programlama uzmanı tutmaktı.

Bu nedenle, tüm web siteleri Statik HTML (Hyper Text Markup Languages) olarak oluşturulmuştur. Amaç bir web sitesine sahip olmaktı. İçeriği veya düzenini değiştirmek için değil, çünkü HTML geliştiricisini yeniden kiralamanız gerekecek.

HTML web sitelerinde içerik statik dosyalarda depolanır ve bu da onu değiştirmeyi inanılmaz derecede zorlaştırır.

HTML web sitesi avantajları:

Web sitesi çevrimiçi olduğunda, onu güncellemeniz veya yedeklemeniz gerekmez. Çoğu zaman, o web sitesinde hiçbir şeyin değiştirilmesi gerekmez.
HTML web siteleri basit ve kurulumu kolaydır.
Boyutları ve dinamik sitelerden daha az kaynak kullanmaları, dinamik sitelere kıyasla onlara önemli bir hız avantajı sağlayarak çok daha hızlı yüklenmelerini sağlar.

HTML web sitesi dezavantajları:

İşaretleme dillerinde profesyonel olmanız gerekir. Aksi takdirde, web sitenizde önemli bir güncelleme yapamazsınız. Web siteniz gerçekten küçük olsa veya önemsiz bilgiler gösterse bile, bir web geliştiricisini tekrar tekrar işe almak maliyetli olacaktır.

Bir diğer önemli dezavantaj, eklenti ekleyememenizdir , bu da ciddi bir işlevsellik eksikliğiyle karşı karşıya olduğunuz anlamına gelir.

HTML'yi WordPress Özetine Dönüştürme

Sitenizden daha fazlasına ihtiyaç duymanız veya bir şablonla yeni bir site oluşturmanız fark etmeksizin, dönüştürme süreci acemi biri için oldukça karmaşık görünebilir. Sabır ve bilgi, yapmanız gerekenleri bir miktar başarı ile yapmanıza izin verecektir.

Siteniz yayına girdikten sonra, yeni bir şeyi nasıl yapacağınızı öğrendiğinizi ve bu bilgiyi web sitenize uygulayabildiğinizi bilmekten gurur duyabilirsiniz.

Umarım yukarıdaki yöntemlerden en az biri, HTML web sitesini WordPress'e dönüştürmenize yardımcı olmuştur . Başka bir yönteminiz veya öğreticiniz varsa, bana bildirin. HTML'yi hiç WordPress'e dönüştürdünüz mü ve bununla ilgili deneyimleriniz neler?