WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 1)

1.現在読んでいる記事: WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 1)
<スパン>2. WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 2)
<スパン>3. WordPress テーマの構造の紹介

HTML ( + CSS) Web サイトから始めた場合、WordPress に移行するときにすべてを捨てる必要はありません。 HTML を WordPress に変換し、動的 WordPress プラットフォーム上で (より強力になった) Web サイトを実行できます。

あるいは、そうではないかもしれません。おそらく、クライアントの HTML デザインを本格的な WordPress テーマに変換する方法を疑問に思っているのではないでしょうか。あるいは、より馴染みのある HTML 側から基本的な WordPress (+ PHP) プログラミングを学びたいと考えているかもしれません。

今日ここに来た理由が何であれ、この WordPress チュートリアルでは、HTML から WordPress テーマを作成する基本を紹介します。このガイドに従ってテーマを最初から作成することも、Github にアクセスして WPExplorer スターターテーマをダウンロードすることもできます。このスターターテーマには、開始するために必要なテンプレートファイルとコードがすべて含まれたテーマを作成するための「空のキャンバス」が用意されています。したがって、コードを読んで学習したい人であれば、スターターテーマをダウンロードし、ガイドをスキップして、どのように機能するかを確認してください。それ以外の場合は、コードエディタ（私は Notepad++ または SublimeText を使用しており、推奨しています）とブラウザを用意してください。をクリックしてから、この簡単なガイドを最後まで実行してください。

WordPress テーマに名前を付ける

まず最初に、テーマに一意の名前を付ける必要があります。これは、Web サイト専用のテーマを作成する場合は必要ありません。いずれにしても、インストール時に簡単に識別できるように、テーマに名前を付ける必要があります。

現時点での一般的な前提条件:

これで、index.html と CSS スタイルシートが準備できました。
少なくとも 1 つのテーマを備えた動作する WordPress インストールがある。トゥエンティ・フォーティーン
新しい WordPress テーマを保存するテーマフォルダーはすでに作成されています 🙂

WordPress テーマの命名に戻りましょう。コードエディターを開き、スタイルシートの内容をコピーして新しいファイルに貼り付け、style.css としてテーマフォルダーに保存します。 新しく作成した style.css の先頭に次の情報を追加します。

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

(/*…*/) コメントタグを省略しないでください。変更を保存します。この情報は、WordPress にテーマの名前、作成者、その他の追加情報を伝えます。重要な部分はテーマの名前です。これにより、WP ダッシュボードからテーマを選択してアクティブ化できるようになります。

HTML テンプレートを PHP ファイルに分割する

さらにこのチュートリアルでは、HTML テンプレートがヘッダー、コンテンツ、サイドバー、フッターのように左から右に配置されていることを前提としています。別のデザインの場合は、コードを少しいじる必要があるかもしれません。楽しいし、とても簡単です。

次のステップでは、4 つの PHP ファイルを作成します。コードエディターを使用して、index.php、header.php、sidebar.php、および footer.php を作成し、テーマフォルダーに保存します。この時点ではすべてのファイルが空であるため、何も行われないことを期待しないでください。説明のために、次の Index.html および CSS スタイルシートファイルを使用しています。

インデックス.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 スタイルシート

#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;}

作業するものが何もない場合は、両方のコードを取得できます。これらをコードエディターにコピーして貼り付けて保存し、先ほど述べた 4 つの PHP ファイルを作成して、次の部分の準備をします。新しく作成した (空の) header.php を開きます。既存の WordPress インストールにログインし、[外観] –>> エディタに移動して、header.php を開きます。 <head> タグ間のコードをすべてコピーし、header.php ファイルに貼り付けます。以下は、Twenty Fourteen テーマの header.php ファイルから取得したコードです。

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

次に、index.html ファイルを開き、以下に示すようにヘッダーコード (

セクションのコード) を header.php の <head> タグのすぐ下にコピーします。 :

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

それから加えて…

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

…header.php ファイルの <head> タグ間の任意の場所に、スタイルシートをリンクします。上に示したように、header.php に <html> および <body> 開始タグを忘れずに配置してください。すべての変更を保存します。

2 番目のセクション (つまり、

…

をindex.html から 新しく作成したindex.php にコピーし、…を追加します)

<?php get_header(); ?>

…一番上、そして…

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

…絶対的な最下位へ。これらの 3 行は、header.php、sidebar.php、footer.php を (この順序で) フェッチし、index.php に表示し、コードを元に戻します。すべての変更を保存します。この時点で、index.php ファイルは次のようになります。

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

次に、index.html のサイドバーセクションとフッターセクションのコンテンツをそれぞれsidebar.php と footer.php にコピーします。

投稿の追加

HTML テンプレートが WordPress テーマに変わろうとしています。投稿を追加するだけです。ブログに投稿がある場合、カスタムメイドの「HTML-to-WordPress」テーマで投稿をどのように表示しますか? ループと呼ばれる特別なタイプの PHP 関数を使用します。ループは、どこに配置しても投稿やコメントを表示する特殊なコードにすぎません。

次に、index.php テンプレートのコンテンツセクションに投稿を表示するには、次のコードをコピーして

と

の間に貼り付けます。以下に示すように、タグ:

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

これであなたの投稿は処理されます。 ABC のように簡単です。 この時点で (そしてこのチュートリアルで提供されるサンプルファイルを使用すると)、header.php は次のようになります。

<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 は次のようになります。

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

footer.php は次のようになります。

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

フッターのとの終了タグに気づきましたか?それらも忘れずに含めてください。

style.css は次のようになります。

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

そして、index.php は次のようになります。

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

繰り返しになりますが、これはヘッダー、コンテンツ、サイドバー、フッターのレイアウトを備えた左から右の Web サイトに基づいています。フォローしていますか？ 5 つのファイルはすべてテーマフォルダーに保存する必要があります。フォルダーに任意の名前を付け、WinRar または同等のプログラムを使用して ZIP アーカイブに圧縮します。新しいテーマを WordPress インストールにアップロードしてアクティブ化し、変換されたテーマが実際に動作するのを確認してください。

それは簡単でしたね？テーマのスタイルは自由に設定できますが、WordPress で気に入っている機能のほとんどはまだアクティブではありません。このチュートリアルでは、HTML テンプレートを WordPress に変換する基本について説明しており、初心者にとっては非常に有益です。次のチュートリアルでは、さらに一歩進んで、WordPress プログラミングの他の側面 (テンプレートファイル やテンプレートタグなど) を試して、HTML テンプレートを任意の方向に変更できるようにします。あなたが好きです。 乞うご期待！