ev borcu WordPress sitesi
WordPress Eğitimi: HTML'den Bir WordPress Teması Nasıl Oluşturulur (Bölüm 1)
Bir HTML (+ CSS) web sitesiyle başladıysanız, WordPress'e geçerken hepsini bir kenara atmak zorunda değilsiniz. HTML'nizi WordPress'e dönüştürebilir ve (artık daha güçlü) web sitenizi dinamik WordPress platformunda çalıştırabilirsiniz.
Ya da belki durum böyle değil. Belki de bir müşterinin HTML tasarımını tam teşekküllü bir WordPress temasına nasıl dönüştüreceğinizi merak ediyorsunuz. Ya da belki daha aşina olduğunuz HTML tarafından temel WordPress (+ PHP) programlamayı öğrenmek istersiniz.
Bugün burada bulunma nedeniniz ne olursa olsun, bu WordPress öğreticisi size HTML'den bir WordPress teması oluşturmanın temellerini tanıtacaktır. Temanızı sıfırdan oluşturmak için bu kılavuzu takip edebilir veya Github'a gidebilir ve başlamak için gerekli tüm şablon dosyaları ve koduyla temanızı oluşturmak için "boş bir tuval" sağlayan WPExplorer başlangıç temasını indirebilirsiniz. Öyleyse, kodu okuyarak öğrenmeyi tercih edenlerdenseniz, başlangıç temasını indirin, kılavuzu atlayın ve işlerin nasıl yürüdüğünü görün… Aksi takdirde, bir kod düzenleyici (Notepad++ veya SublimeText kullanıyorum ve öneririm) ve hazır bir tarayıcı edinin. , ardından bu basit kılavuzu sonuna kadar izleyin.
WordPress Temanızı Adlandırma
Öncelikle, temanıza benzersiz bir ad vermeliyiz; bu, yalnızca web siteniz için bir tema oluşturuyorsanız gerekli değildir. Ne olursa olsun, kurulum sırasında kolayca tanımlanabilmesi için temanızı adlandırmamız gerekiyor.
Bu noktada genel varsayımlar:
- index.html ve CSS stil sayfanız hazır.
- En az bir temaya sahip çalışan bir WordPress kurulumunuz var, örneğin Yirmi Ondört
- Yeni WordPress temanızı kaydedeceğiniz bir tema klasörü zaten oluşturdunuz
WordPress temanızı adlandırmaya geri dönelim. Kod düzenleyicinizi açın ve stil sayfanızın içeriğini yeni bir dosyaya kopyalayıp yapıştırın ve tema klasörünüze style.css olarak kaydedin. Yeni oluşturulan style.css dosyasının en üstüne aşağıdaki bilgileri ekleyin:
/* Theme Name: Your theme's name Theme URI: Your theme's URL Description: A brief description of your theme Version: 1.0 or any other version you want Author: Your name or WordPress.org's username Author URI: Your web address Tags: Tags to locate your theme in the WordPress theme repository */
(/*…*/) yorum etiketlerini dışarıda bırakmayın. Değişiklikleri kaydedin. Bu bilgi, WordPress'e temanızın adını, yazarı ve bunun gibi ücretsiz şeyleri söyler. Önemli olan kısım, temanızı WP panosu aracılığıyla seçmenizi ve etkinleştirmenizi sağlayan temanın adıdır.
HTML Şablonunuzu PHP Dosyalarına Bölmek
Bu öğretici ayrıca, HTML şablonunuzun soldan sağa düzenlenmiş olduğunu varsayar: üstbilgi, içerik, kenar çubuğu, altbilgi. Farklı bir tasarımınız varsa, kodla biraz oynamanız gerekebilir. Eğlenceli ve süper kolay.
Bir sonraki adım, dört PHP dosyası oluşturmayı içerir. Kod düzenleyicinizi kullanarak index.php, header.php, sidebar.php ve footer.php oluşturun ve bunları tema klasörünüze kaydedin. Bu noktada tüm dosyalar boştur, bu yüzden bir şey yapmalarını beklemeyin. Örnekleme amacıyla aşağıdaki index.html ve CSS stil sayfası dosyalarını kullanıyorum:
INDEX.HTML
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>How To Convert HTML Template to WordPress Theme - WPExplorer</title> <link rel="stylesheet" type="text/css" media="all" href="style.css"/> </head> <body> <div id="wrap"> <header class="header"> <p>This is header section. Put your logo and other details here.</p> </header><!-- .header --> <div class="content"> <p>This is the main content area.</p> </div><!-- .content --> <div class="sidebar"> <p>This is the side bar</p> </div><!-- .sidebar --> <footer class="footer"> <p>And this is the footer.</p> </footer><!-- .footer --> </div><!-- #wrap --> </body> </html>
CSS STİL SAYFASI
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;} .header{width:99.8%; border:1px solid #999;height:135px;} .content{width:70%; border:1px solid #999;margin-top:5px;} .sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;} .footer{width:99.8%;border:1px solid #999;margin-top:10px;}
Üzerinde çalışacak bir şeyiniz yoksa her iki kodu da alabilirsiniz. Bunları kod düzenleyicinize kopyalayıp yapıştırın, kaydedin, az önce bahsettiğimiz dört PHP dosyasını oluşturun ve bir sonraki bölüme hazırlanın. Yeni oluşturduğunuz (ve boş) header.php dosyasını açın . Mevcut WordPress kurulumunuza giriş yapın, Görünüm ->> Düzenleyici'ye gidin ve header.php dosyasını açın. <head> etiketleri arasındaki tüm kodu kopyalayın ve header.php dosyanıza yapıştırın. Twenty Fourteen temasında header.php dosyasından aldığım kod aşağıdadır:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head>
Ardından index.html dosyanızı açın ve başlık kodunu (yani <div class= “header”> bölümündeki kod) aşağıda gösterildiği gibi <head> etiketlerinin hemen altındaki header.php'nize kopyalayın:
<html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body> <header class="header"> <p>This is header section. Put your logo and other details here.</p> </header>
Sonra Ekle…
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
…Stil sayfanızı bağlamak için header.php dosyasındaki <head> etiketleri arasında herhangi bir yerde. Ayrıca <html> ve <body> açılış etiketlerini yukarıda gösterildiği gibi header.php dosyasına koymayı unutmayın. Tüm değişiklikleri kaydedin.
İkinci bölümü (yani <div class=”content”>…</div> 'den index.html'den yeni oluşturulan index.php'ye kopyalayın ve ekleyin…
<?php get_header(); ?>
…en tepede ve…
<?php get_sidebar(); ?> <?php get_footer(); ?>
…mutlak dibe. Bu üç satır, header.php, sidebar.php ve footer.php'yi (bu sırayla) getirir ve bunları, kodunuzu tekrar bir araya getiren index.php'de görüntüler. Tüm değişiklikleri kaydedin. Bu noktada index.php dosyanız şöyle görünmelidir:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Ardından, index.html'nizdeki kenar çubuğu ve altbilgi bölümlerinden içeriği sırasıyla sidebar.php ve footer.php'ye kopyalayın.
Gönderi Ekleme
HTML şablonunuz bir WordPress temasına dönüşmek üzere. Sadece yazılarınızı eklememiz gerekiyor. Blogunuzda gönderileriniz varsa, bunları özel olarak hazırlanmış "HTML'den WordPress'e" temanızda nasıl görüntülersiniz? Döngü olarak bilinen özel bir PHP işlevi türü kullanıyorsunuz. Döngü, gönderilerinizi ve yorumlarınızı nereye koyarsanız koyun görüntüleyen özel bir kod parçasıdır.
Şimdi, gönderilerinizi index.php şablonunun içerik bölümünde görüntülemek için, aşağıdaki kodu kopyalayıp <div class=”content”> ve </div> etiketleri arasına aşağıda gösterildiği gibi yapıştırın:
<div class="content"> <?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 jy' ); ?></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><!--.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><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else : ?> <?php endif; ?> </div><!--.content-->
Bu, gönderilerinizle ilgilenecektir. ABC kadar kolay. Bu noktada (ve bu eğitimde sağlanan örnek dosyaları kullanarak), header.php dosyanız şöyle görünmelidir:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head>
sidebar.php dosyanız şöyle görünmelidir:
<?php dynamic_sidebar( 'sidebar' ); ?>
footer.php dosyanız şöyle görünmelidir:
<footer class="footer"> <p>And this is the footer</p> </footer> <?php wp_footer(); // Crucial core hook! ?> </body> </html>
Altbilgideki </body> ve </html> etiketlerinin kapanışını fark ettiniz mi? Bunları da eklemeyi unutmayın.
style.css dosyanız şöyle görünmelidir:
/* Theme Name: Creating WordPress Theme from HTML Theme URI: http://wpexplorer.com Description: This theme shows you how to create WordPress themes from HTML Version: 1.0 Author: Freddy for @WPExplorer Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/ Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme */ body { font-family: arial, helvetica, verdana; font-size: 0.8em; width: 100%; height: 100%; } .header { background-color: #1be; margin-left: 14%; top: 0; border-width: 0.1em; border-color: #999; border-style: solid; width: 72%; height: 250px; } .content { background-color: #999; margin-left: 14%; margin-top: 5px; float: left; width: 46%; border-width: 0.1em; border-color: #999; border-style: solid; } .sidebar { background-color: #1d5; margin-right: 14%; margin-top: 5px; float: right; border-width: 0.1em; border-color: #999; border-style: solid; top: 180px; width: 23%; } .footer { background-color: red; margin-left: 14%; float: left; margin-top: 5px; width: 72%; height: 50px; border-width: 0.1em; border-color: #999; border-style: solid; }
Ve index.php dosyanız şuna benzemelidir:
<?php get_header(); ?> <div class="content"> <?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 jy' ); ?></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><!--.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><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else : ?> <?php endif; ?> </div><!--.content--> <?php get_sidebar(); ?> <?php wp_footer(); // Crucial footer hook! ?> <?php get_footer(); ?>
Yine – bu, üstbilgi, içerik, kenar çubuğu, altbilgi düzenine sahip soldan sağa bir web sitesine dayanmaktadır. takip ediyor musun Beş dosyanın tümü tema klasörünüze kaydedilmelidir. Klasörü istediğiniz şekilde adlandırın ve WinRar veya eşdeğer bir program kullanarak bir ZIP arşivine sıkıştırın. Yeni temanızı WordPress kurulumunuza yükleyin, etkinleştirin ve dönüştürülmüş temanızı çalışırken görün!
Bu kolaydı, değil mi? Temanızı istediğiniz gibi şekillendirebilirsiniz, ancak WordPress'te sevdiğimiz özelliklerin çoğu hala etkin değil, çünkü bu eğitim HTML şablonlarını WordPress'e dönüştürmenin temellerini kapsar ve yeni başlayan biri olarak sizin için çok değerli olmalıdır. Bir sonraki eğitimde, işleri bir adım öteye taşıyacağız ve HTML şablonlarınızı istediğiniz gibi çevirmenize izin verecek WordPress programlamanın diğer yönleriyle ( Şablon Dosyaları ve Şablon Etiketleri gibi) oynayacağız. Bizi izlemeye devam edin!