HTML Sitelerini WordPress Sitelerine Dönüştürme

Yayınlanan: 2018-10-05

Başlangıçta (web'in) tüm web siteleri, metin ve statik HTML'den başka bir şeyle yapılmadı. Şimdi ise, 20 yılı aşkın bir süre sonra, web çok farklı bir yer. 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.

Bu, büyük ölçüde WordPress gibi açık kaynaklı projeler sayesinde. Son on yılda, çevrimiçi yayıncılığı demokratikleştirme (ve bu süreçte çok daha fazlası) temel misyonunu başardı, böylece bir WordPress kurulumuna ve doğru temaya/eklentilere sahip herkes gelişmiş tasarımlı modern bir web sitesine sahip olabilir. ve işlevsellik. Kodlama yok – hatta HTML bile! – gerekli.

Bu nedenle, benim gibi hevesli WordPress kullanıcıları için, 2018'de birinin tema ve eklentileri olan bir WordPress web sitesi yerine statik bir HTML web sitesini çalıştırdığına inanmak neredeyse zor. Ancak gerçek şu ki, hala önemli miktarda aktif HTML yalnızca siteler var. (Ya da biraz CSS içeren HTML.)

Bu site sahiplerinin yükseltme yapmamak veya dönüştürmemek için iyi nedenleri olabilir. Belki de site içeriği hiç değişmiyor ve halihazırda mevcut olan basit biçimlendirme ve tasarım kullanılabilir durumda mı? Veya bir WordPress sitesini güncel tutma konusunda endişelenmekten daha az zahmetli olabilir mi? Her ikisi de geçerli sebeplerdir (diğerlerinin yanı sıra). “Kırılmayanı tamir etme”nin başlıca örnekleri.

Ancak, bazılarının (belki de birçoğunun) bu adımı atmamasının başlıca nedeninin bu olmayabileceğine dair bir his var. En belirgin olanı, HTML sitelerini bir WordPress sitesine nasıl dönüştüreceklerini bilmemeleridir. Özellikle içerik kaybetmeden veya sayfa bazında aşırı biçimlendirme yapmaya gerek kalmadan.

Neyse ki, WordPress'te sıklıkla olduğu gibi, bu sorunu çözmenin birkaç yolu vardır. Aşağıda bazı seçenekleri derledim.

Youtube Kanalımıza Abone Olun

Statik bir HTML sitesini bir WordPress sitesine Dönüştürme Seçenekleriniz

Statik HTML sitenizi bir WordPress sitesine nasıl dönüştürmeyi seçeceğiniz şüphesiz kişisel tercihinize, istediğiniz zaman/parasal yatırıma ve kodla ilgili beceri düzeyinize bağlı olacaktır. Hangisinin sizin için en iyi olduğuna karar verecek olan siz olmalısınız, ancak aşağıdaki özetlerle hızlı bir şekilde karar verebilmeli ve bu gönderideki özel durumunuz için doğrudan en alakalı bilgilere geçebilmelisiniz.

Üç ana seçenek vardır:

1. Mevcut statik HTML sitenize göre manuel olarak bir WordPress teması oluşturun.

Bu, kodunuza girmenizi gerektirecektir. FTP yoluyla mevcut site dizininize erişmeniz ve başlangıç ​​noktası olarak mevcut kodunuzu kullanmanız gerekecektir. Buradan bir WordPress teması için gerekli dosyaları oluşturmanız ve WordPress kodeksinden kod parçalarını kopyalamanız gerekecektir. HTML, CSS ve biraz PHP ile biraz deneyiminiz varsa, bu oldukça basit ve anlaşılırdır.

2. Önceden hazırlanmış bir tema yükleyin ve içeriğinizi taşıyın.

Bu muhtemelen basitlik ve değerin kesiştiği noktada en iyi seçenektir. Mevcut web siteniz için zaten bir barındırma hizmetiniz olduğunu varsayarsak, yalnızca premium bir tema satın almayı seçerseniz para harcamanız gerekecektir. İçeriği içe aktarmak için kullanacağımız eklenti, resmi WordPress Eklenti Deposunda ücretsiz olarak mevcuttur.

3. Bir HTML'den WordPress'e dönüştürme hizmetine sahip olmak için ödeme yaparak sitenizi yeniden oluşturun.

Çok fazla bir şey yapmanızı gerektirmediği için bu en kolay çözümdür. Bununla birlikte, WordPress ile tanışmanız için fazla bir şey yapmayacaktır ve maliyet, kimi kiralamayı seçtiğinize bağlı olarak değişecektir. Bu seçeneği aşağıdaki bölümlerde ele almayacağım, çünkü ilgilendiğiniz rota buysa, servis sağlayıcıları hızlı bir şekilde aramanız yeterlidir ve gerisini onlar halleder.

HTML'den WordPress'e Dönüştürmeye Hazırlanma

Aşağıda hangi rotayı seçerseniz seçin, dalmadan önce yapmak isteyeceğiniz birkaç şey var.

Birincisi bir barındırma planı seçmektir. Dışarıdaki seçeneklere bakmak ve ihtiyaçlarınıza en uygun paketi seçmek isteyeceksiniz. Veya bunun yerine yerel bir WordPress kurulumu oluşturmak ister misiniz? Daha sonra istediğiniz zaman bir barındırma hizmetine taşıyabilirsiniz.

Seçtikten sonra, WordPress'i kurmanız ve WP Admin'e giriş yapmanız gerekecek. Bu, iki olası yolumuzun ayrıldığı noktadır.

Statik HTML Sitenizi Manuel Olarak WordPress'e Dönüştürme

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, kendi özel temanızı oluşturmanız gerektiği anlamına gelir. Neyse ki, bu ilk başta göründüğü kadar korkutucu değil. 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.

Adım 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 adını istediğiniz gibi adlandırın.

Ardından, kod düzenleyicinizde birkaç dosya (tümü yeni tema klasörünüzde bulunur) oluşturun. Henüz onlara bir şey yapma. Onları daha fazla düzenleme için açık bırakın.

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

Adım 2: Mevcut CSS'yi Yeni Stil Sayfasına Kopyalayın

Bir tasarımı kopyalamak 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. 

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

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

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

Üçüncü adıma geçmeden önce, size WordPress'in nasıl çalıştığına dair kısa bir not vereyim. WordPress, temel veritabanından veri parçalarını aramak ve almak için PHP kullanır. Bu küçük öğreticide kullandığımız her dosya, WordPress'e site içeriğinizin hangi bölümünün ve nerede görüntüleneceğini söylemek için tasarlanmıştır.

Bu yüzden, mevcut HTML'nizi "parçalayacağımızı" söylediğimde, aslında yaptığımız şey, mevcut kodunuzun parçalarını kesip yeni oluşturduğumuz farklı dosyalara yapıştırmak, böylece WordPress nerede görüntüleneceğini bilecektir. onlara.

İşte başlıyoruz.

İ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.

İkinci olarak, 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.

Üçüncüsü, 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.

Son olarak, 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!

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

Yeni temanızın index.php dosyasını son haline getirmek 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. Veya başka bir deyişle, az önce "doğradığımız" öğeleri tekrar bir araya getirin.

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(); ?>

Ve son olarak, The Loop denen şeyi eklemeliyiz. 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

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

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

Artık tema dosyalarınızı oluşturduğunuza ve hepsini yeni tema klasörünüzde depoladığınıza göre, yeni WordPress kurulumunuzun dizinine erişmeniz gerekecek.

Yeni tema klasörünüzü /wp-content/themes/ içine yerleştirin . Ardından WP Admin > Görünüm > Temalar'a geri dönün ve yeni oluşturduğunuz tema orada görünmelidir. Devam edin ve etkinleştirin!

Bu noktada yapılması gereken tek şey, yeni WordPress web sitenizi eski sitenizin içeriğiyle doldurmak. Bunun nasıl yapıldığını görmek için aşağıdaki bölümü takip edin (önceden hazırlanmış bir temayı kullanma ile ilgili bölümü atlayarak).

Önceden Yapılmış Bir WordPress Teması Kullanma ve HTML İçeriğini İçe Aktarma

Yukarıdaki adımlar size çok yoğun veya zaman alıcı görünüyorsa, emin olun, başka bir yol var. Şu anda üzerinde çalıştığınız herhangi bir tasarımı bir WordPress temasına dönüştürmek yerine, daha geniş WordPress pazarında mevcut olan binlerce temadan herhangi birinden yararlanabilirsiniz.

Ücretsiz temalar var ve premium temalar var. Hangisinin sizin için en iyisi olduğuna karar vermeden önce, ihtiyaçlarınızı karşılamak için hangi temaların tasarlandığını okumak ve burada Elegant Temalar'da ve başka yerlerde tema kategorisine göz atmak isteyebilirsiniz.

Beğendiğiniz bir temayı seçtikten sonra (ve sıkıştırılmış dosya paketini indirdikten sonra), WP Admin > Görünüm > Temalar > Yeni Ekle'ye geri dönmek ve yeni WordPress temanızı kurmak/etkinleştirmek isteyeceksiniz.

Bu yapıldıktan sonra, yeni bir WordPress web sitesine ve temasına sahip olacaksınız - ancak başka bir şey yok. Sitenizi önizlediğinizde, içeriği boş olacak ve muhtemelen sıkıcı görünecek. Sorun değil, çünkü daha sonra eski sitenizin içeriğini içe aktaracağız.

WP Admin'de Eklentiler > Yeni Ekle'ye gidin ve Stephanie Leary'nin HTML Import 2 adlı eklentisini arayın. Bu eklenti yüklenip etkinleştirildikten sonra, HTML sayfaları dizinizin tamamını içe aktarmak için kullanışlı kullanım kılavuzunu izleyin. Görüntülerle tamamlayın!

Bundan sonra, eski içeriğinizin tamamının WordPress'te yaşamasına ve yeni temanız tarafından biçimlendirilmesine sahip olacaksınız. Veya yukarıda kendi temanızı oluşturduysanız, siteniz hemen hemen daha önce olduğu gibi görünmelidir; yalnızca WordPress'te çalışır.

Sonuç olarak

Bu gönderiyi web sitenizi WordPress'e taşımak için bir kılavuz olarak kullandıysanız, dünyanın en büyük açık kaynak topluluklarından birine katıldınız demektir. Hoş geldin! WordPress ve WordPress temaları/eklentileri ile inşa eden, oynayan ve oluşturan birçok geliştirici, tasarımcı, blog yazarı, DIY'ci ve daha fazlasıyla eğlenceli bir yer.

"WordPress hatasını yakaladıysanız", resmi WordPress.org web sitesi faydalı temalar, eklentiler ve diğer kaynaklarla dolu. Tema dosyalarınızda daha fazla ince ayar yapmak istiyorsanız, görünüşte sonsuz ipuçları, püf noktaları ve varyasyonlar için Codex'i keşfedin.

Ve elbette, aşağıdaki yorumlarda sohbet etmeye devam edeceğinizi ve gelecekte daha fazla blog yazısı için abone olacağınızı umuyoruz.

Max Griboedov / Shutterstock.com üzerinden Makale Küçük Resmi