Samouczek WordPress: Jak utworzyć motyw WordPress z HTML (część 1)

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

Następnie dodaj…

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

…w dowolnym miejscu pomiędzy znacznikami <head> w pliku header.php, aby połączyć arkusz stylów. Pamiętaj także o umieszczeniu znaczników otwierających <html> i <body> w pliku header.php, jak pokazano powyżej. Zapisz wszystkie zmiany.

Skopiuj drugą sekcję (tj.

<?php get_header(); ?>

…na samej górze i…

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

…do absolutnego dna. Te trzy linie pobierają pliki header.php, sidebar.php i footer.php (w tej kolejności) i wyświetlają je w pliku Index.php, co ponownie składa kod. Zapisz wszystkie zmiany. W tym momencie Twój plik Index.php powinien wyglądać następująco:

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

Następnie skopiuj zawartość sekcji paska bocznego i stopki w pliku Index.html odpowiednio do sidebar.php i footer.php.

Dodawanie postów

Twój szablon HTML wkrótce zmieni się w motyw WordPress. Musimy tylko dodać Twoje posty. Jeśli masz posty na swoim blogu, w jaki sposób wyświetliłbyś je w niestandardowym motywie „HTML-to-WordPress”? Używasz specjalnego typu funkcji PHP znanego jako Pętla. Pętla to wyspecjalizowany fragment kodu, który wyświetla Twoje posty i komentarze, gdziekolwiek je umieścisz.

Teraz, aby wyświetlić swoje posty w sekcji treści szablonu Index.php, skopiuj i wklej następujący kod między

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

To zajmie się twoimi postami. Łatwe jak ABC. W tym momencie (i korzystając z przykładowych plików dostarczonych w tym samouczku) plik header.php powinien wyglądać następująco:

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

Twój sidebar.php powinien wyglądać tak:

<?php dynamic_sidebar( 'sidebar' ); ?>

Twoja stopka.php powinna wyglądać następująco:

<footer class="footer">
    <p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>

Czy zauważyłeś znaczniki zamykające i w stopce? Nie zapomnij ich również uwzględnić.

Twój plik style.css powinien wyglądać mniej więcej tak:

/*
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;
}

Twój plik Index.php powinien wyglądać podobnie do:

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

Ponownie – opiera się to na stronie internetowej od lewej do prawej z nagłówkiem, treścią, paskiem bocznym i układem stopki. Czy podążasz? Wszystkie pięć plików należy zapisać w folderze motywu. Nadaj folderowi dowolną nazwę i skompresuj go do archiwum ZIP za pomocą programu WinRar lub równoważnego. Prześlij swój nowy motyw do instalacji WordPress, aktywuj go i zobacz przekonwertowany motyw w akcji!

To było łatwe, prawda? Możesz nadać swojemu motywowi dowolny styl, ale większość funkcji, które uwielbiamy w WordPressie, jest nadal nieaktywna, ponieważ… ten samouczek omawia podstawy konwersji szablonów HTML do WordPressa i powinien być bardzo przydatny dla Ciebie jako początkującego. W następnym samouczku pójdziemy o krok wyżej i pobawimy się innymi aspektami programowania WordPress (takimi jak Pliki szablonów i Tagi szablonów), które pozwolą Ci zmienić szablony HTML w dowolny sposób lubisz. Bądź na bieżąco!