2016.05.27 / WEB

HTMLをもとにオリジナルテーマを作成してWordPress化する手順

,

最近は受注したウェブサイトを制作するときにWordPressを導入することが大半を占めてきました。
私がコーディングする場合は、だいたいはHTMLベースで大枠だけを作ってからWordPress化し、詳細はWordPress内で作成しています。
この記事ではHTMLベースのデータをどのようにしてWordPress化していくかを、備忘録的に簡単にまとめていきます。
自分が作業するときにコピペする事が一番の目的なので、詳しい説明を省いている箇所はご勘弁下さい…

WordPressサイトを作成する際にしている作業リスト

WordPressサイトを作成する際は、先にHTMLでコーディングをして大枠を作成していると、作業がスムーズです!
具体的な流れは以下の項目です。

  • HTML & CSS (適宜JavaScriptなども使用)で大枠を作成
  • データベースのバージョンや名前を、本番環境に合わせて作成
  • ローカル環境にWordPressをインストール
  • HTML & CSSで作った大枠をWordPressのテーマにする※この項目をこの記事で詳しくまとめます。
  • 投稿やプラグインなど、WordPress内での入力

HTML & CSSで作った大枠をWordPressのテーマにする

HTMLベースで作ったデータは、そのままではWordPressで使用できません。
WordPressの「テーマ」に設定していく作業が必要になります。

手順はこれ。

style.cssを設定

HTMLベースのデータをWordPressテーマとして読込ませるためにはまずこの作業が必要です。
それぞれ任意の名前でcssを設定しているかと思いますが、WordPressでは必ず「style.css」をテーマフォルダの一番上の階層に設置しなければなりません。
※style.cssから別のcssデータを読込ませたり、style.css以外にもcssを読込ませる事は可能です。

そしてstyle.cssの最上部には以下の内容を入力してください。
Theme Name: テーマ名」は必須です!

/*
Theme Name: テーマ名
Description:テーマの説明
Theme URI: テーマの URL
Author: 作者
Author URI: 作者の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

ちなみに私はWordPress化することを前提で毎回コーディングをスタートさせてますので、「style.css」の設置や上記の必須事項は、HTMLコーディングの段階で設置しています!

HTMLデータをPHPへ変換

index.htmlなどのhtmlデータはphpという形式のファイルに書き換えていきます。
まずは「index.html」を「index.php」に名前を変えます。
このままでは変数を代入できないコーディングですので、コーディング内容をphpのコードで書き直します。

//サンプル
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel=”canonical” href=””>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" media="screen and (max-width: 1024px)" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/css/sp.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery.pages.js"></script>

上記の内容を簡単に説明すると…

<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
// 「ブログのタイトル | サイト名」 というかたちで出力されます。
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
// 「style.css」のURLを出力します。
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery.pages.js"></script>
// テーマフォルダのディレクトリのURLを出力します。
// WordPressのテーマとして使用する場合、HTMLのように相対パスでは表示できません。
// <?php echo get_template_directory_uri(); ?> を入れる事で絶対パスとして出力できます。

他にも細かい事(ループの設定や条件分岐など)がありますが、とりあえずここでは省略で!

header.phpやfooter.phpなどに分解

今度は先ほど作ったindex.htmlを、「header.php」「index.php」「footer.php」に分解していきます。

// header.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel=”canonical” href=””>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" media="screen and (max-width: 1024px)" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/css/sp.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery.pages.js"></script>
<?php wp_head(); ?>
</head>

<body>


// 主に全ページで繰り返し使用している部分をheader.phpに入れましょう。
// 私はヘッダーやナビゲーション、メインビジュアルなどまでのコードを適宜入れています。

// <?php wp_head(); ?> を必ず </head> 直前に入力します。

//index.php

<?php get_header(); ?>
//この部分で「header.php」を読込みます。


<!-- ここにコンテンツをコーディング -->

<?php get_footer(); ?>
//この部分で「footer.php」を読込みます。

//footer.php

// 主に全ページで繰り返し使用している</body>付近のコードをfooter.phpに入れましょう。


<div id="footer">


Copyright (C) 2016 Penpoint-Artwork. All Rights Reserved.

</div>

<!-- /#footer -->


<div id="totop">
<a href="#" alt="TO TOP"><img src="<?php echo get_template_directory_uri(); ?>/library/img/to-top.svg" alt="TO TOP"></a>
</div>


<?php wp_footer(); ?>
// <?php wp_footer(); ?> を </body> 直前に入力します。

</body>
</html>

WordPressテーマとして設定

先ほどまでの項目で書き換えてきたデータをディレクトリごとWordPressのテーマフォルダにアップロードし、テーマとして設定してみましょう。

アップロード先は
/wp-content/themes/ここ ←
次に、管理画面 → 外観 → テーマ から、アップロードしたデータに設定しましょう。

これで、HTMLで作成したデータはWordPressで表示出来ました。
別の記事で詳しく書きますが、ブログなどの投稿を表示するためには、ループを入力する必要があります。
その辺など、よく使うタグは次の項目で載っけてみます。
コピペ用でございます。

WordPress化でよく使うテンプレートタグなど

WordPress化の作業でよく使うテンプレートタグや、鉄板なコードなど、コピペ用に載せておきます。

// 表示している記事のパーマリンクURLを出力
<?php echo get_permalink(); ?>


// 指定したidの記事のパーマリンクURL(この場合はidが2の記事のURL)を出力
<?php echo get_permalink(2); ?>


// ホームのURLを出力 ※esc_urlを入れている説明は省きます。
<?php echo esc_url( home_url( '/' ) ); ?>


// カスタムフィールドの値を呼び出す
<?php echo get_post_meta($post->ID,'呼び出したいカスタムフィールドのキー',true); ?>


// サムネイルを呼び出す(サムネイルサイズ)
<?php the_post_thumbnail('thumbnail'); ?>


//ループの基本形(query_postsを使用しているので、通常は非推奨)
<?php
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $args=array(
   'post_type' => 'post', //カスタム投稿の場合はそのスラッグ
   'posts_per_page'=> 4, //件数(全ての記事表示は-1)
   'paged' => $paged
 );
?>
<?php query_posts( $args ); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()):the_post(); ?>

<!-- ここにループさせるコンテンツ -->

<?php endwhile; else: ?>
<?php endif; ?>

<?php wp_reset_query(); ?>


// 記事タイトルを出力
<?php the_title();?>


// 投稿時間を出力 (「2016.5.26」の場合)
<?php the_time('Y.m.d'); ?>


// トップページかどうかを判断する条件分岐

<?php if(is_home()): ?>

<!-- トップページの場合表示させる内容 -->

<?php else : ?>

<!-- トップページ以外の場合表示させる内容 -->

<?php endif ?>

まだまだたくさんあるのですが…
とりあえず今日はここまで!

TO TOP