初めてのテーマ作りの骨組みを理解します。

テーマとして認識されるまで

以下の手順で、順を追って用意していきましょう！

「mysite」というフォルダーを用意し、全てのファイルを格納します。
通常のHTML(index.html)を作成します。
3つのパーツに切り離します。(header.php、footer.php、index.php)
必要なファイルを一式揃えましょう。
FTP接続し、最低限必要なファイルをアップロード
テーマとして認識されているかな？

通常のHTMLを作成する

白紙のエディタで、以下の構文を記述します。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>



</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

header.phpとfooter.phpに切り離していきます。

////////////// header.phpになる部分
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
////////////// header.php ここまで



////////////// footer.phpになる部分
</body>
</html>
////////////// footer.phpここまで

////////////// header.phpになる部分

<!DOCTYPE html>

<head>

</head>

<body>

////////////// header.php ここまで

////////////// footer.phpになる部分

</body>

</html>

////////////// footer.phpここまで

パーツの準備

最初に「mysite」というフォルダーを作ります。その中に、ワードプレスの構築に必要な以下のファイルを作成します。(はじめは、白紙のファイルで大丈夫です。)
※index.htmlは、不要です。

テーマを構築する最低限必要なファイル
index.php
single.php
page.php
関数ファイル
functions.php

パーツテンプレート
header.php
footer.php
sidebar.php
スタイルシート
style.css

テーマのサムネイル画像
screenshot.png(800×660)/ 以下を使ってください。

パーツごとに切り離す

テンプレートの設定

index.htmlを基準に、パーツに切り離す。
ワードプレス特有のテンプレートタグを記述

▶ 参考
wordpressCodeX(テンプレートタグ)

header.php

index.htmlの、「body直前まで」(以下記述部分)を切り離し、header.phpにペーストします。

<!-------------- header.phpになる部分 --------------->
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<!--------------  header.php ここまで --------------->

<!DOCTYPE html>

<head>

</head>

<body>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

header.phpを編集する

header.php内にはサイトの情報を記述します。ここには、検索エンジンやSNSにサイトの情報を伝えるためのmetaデータや、各種ファイルを読み込むための記述をしていきます。

変更がある部分は主に、タイトル・スタイルシートやwpシステムの呼び出し部分です。

wordpressのテーマでは <?php wp_head(); ?> を</head>の前に記述することで、システムやプラグインが情報を出力しています。この記述がないと、システムやプラグインとの連携ができなくなるので、必ず記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<!--------- ページタイトル -------->
<title><?php bloginfo('name');?></title>
<!---------  ビューポート設定  -------->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!---------  リセットcssも組み込んでおこう  -------->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

<!--font-awesomeのスタイルシートを呼び出す-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<!---------  スタイルシートを読み込む -------->
<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/style.css">	
<?php wp_head(); ?>
</head>
<!---------  bodyにクラスを充てる場合に必要  -------->
<body <?php body_class(); ?>>

<header>
	
</header>

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

</header>

ビューポート設定
『<meta name=”viewport”～』は、レスポンシブデザインのサイトを作成する上では必要不可欠なコードです。viewportを記述しておくことで各デバイスの画面の横幅を認識し、最適なページを表示します。

font-awesomeを使用
今回は、font-awesomeを利用します。CDNを記述することで、各種アイコンを使用することができます。

footer.php

続きの以下を切り離し、footer.phpにペーストします。

<!-------------- footer.phpになる部分---------->
</body>
</html>

</body>

</html>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

footer.phpを編集する

<?php wp_head(); ?> と同じで、システムやプラグインとの連携のため、<php wp_footer;(); ?> を記述してください。bodyとhtmlの終了タグも、忘れないようにしてください。

<footer>
<!--------- 著作権表示 ----------------->
<small>Copyright ©<?php bloginfo('name'); ?> All Rights Reserved.</small>
</footer>
<?php wp_footer(); ?>
</body>
</html>

</footer>

<?php wp_footer(); ?>

</body>

</html>

index.php

上記で作成した各パーツを読み込んでいきます。以下のワイヤーを参考に、ブロック枠を作成していきます。

<!------ header.phpを呼び出す ------------>
<?php get_header(); ?>

<!-----indexの中身----------------------->
<div id="container">
 <div id="contents">
<?php get_sidebar(); ?>
  </div>

</div>

<!------ footer.phpを呼び出す ------------>
<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

style.css

style.cssの先頭には、テーマ名等を記述します。

@charset "utf-8";
/*
Theme Name: テーマ名
Theme URL: テーマURL
Description: テーマ説明文
Version: 
Author: 作者名
Author URI: 作者のサイトURL
*/

@charset "utf-8";

Theme Name: テーマ名

Theme URL: テーマURL

Description: テーマ説明文

Version:

Author: 作者名

Author URI: 作者のサイトURL

ファイルをアップロード

まずは必要最低限のファイルをアップロードしてテーマとして認識されているか確認してみましょう。wp-content→themeの中に「mysite」をアップロードします。

※mysite.zipに圧縮すると、管理画面からテーマを追加することもできます。

オリジナルテーマが追加される

管理画面にログインして、外観→テーマを確認します。
そこに、追加したオリジナルの「mysite」が加わっていれば、テーマ追加の成功です。

テーマエディタを編集する

テーマとして認識されると、テーマエディタで編集することができます。
「外観」→「テーマエディタ」を開いてみよう。

functions.php

WordPressサイトで使う、オリジナルの関数の定義付けをするためのテンプレートです。機能を追加したりルールを決める場合は、functions.phpに記述します。

ここの記述にエラーがあると、WordPressが機能しなくなったり、ログインできなくなったりしますので、関数を記述する際には必ず一時的にバックアップをとっておきましょう。

<?php
//アイキャッチ画像を使用する
add_theme_support( 'post-thumbnails' );
//カスタムメニュー
register_nav_menu( 'header-nav',  ' ヘッダーナビゲーション ' );
//サイドバーにウィジェット
function my_theme_widgets_init() {
  register_sidebar( array(
	'name' => 'サイドバー',
    'id' => 'sidebar',
  ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

<?php

//アイキャッチ画像を使用する

add_theme_support( 'post-thumbnails' );

//カスタムメニュー

register_nav_menu( 'header-nav', ' ヘッダーナビゲーション ' );

//サイドバーにウィジェット

function my_theme_widgets_init() {

register_sidebar( array(

'name' => 'サイドバー',

'id' => 'sidebar',

) );

}

add_action( 'widgets_init', 'my_theme_widgets_init' );

functions.phpを記述する際は、一番最初にphpの開始タグである <?php から記述を初めます。phpの終了タグ「 ?>」は、基本的に全ての関数を記載した後に記述するか省略します。WordPressのfunctions.phpでは、最後のPHPの閉じタグ(?>)は省略することを推奨しているようです。

テーマのウィジェット対応について
日本語版 Codex：「ウィジェット」「テーマのウィジェット対応」

タイトルを入力してみよう

header.phpに、サイト名を出力してみよう。サイト名を出力する場合は、bloginfoの中に「name」と入力します。サイトのキャッチフレーズを出力するには、bloginfoの中に「description」と入力します。クリックするとトップページに戻れる仕様にしておきます。

<header>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</header>

<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

<?php bloginfo('description'); ?>

</header>

タイトル・著作権が表示されていますか？
header.phpやfooter.phpが、読み込まれてることを確認します。

index.php(ループを記述する)

これから、ブログを投稿していきます。index.phpの#contents内に、投稿が表示されるよう以下のテンプレートタグをペーストします。

<?php get_header(); ?>

<div id="container">
<!-------- 投稿がループする部分 ---------->
 <div id="contents">
 <p>当店の人気のメニューを紹介します。</p>
<?php while ( have_posts() ) : the_post() ?>
<a href="<?= get_permalink() ?>"><?php the_post_thumbnail('medium', array()) ?></a>
<?php the_time('Y年n月j日') ?>
<?php the_category(); ?>
<a href="<?= get_permalink() ?>"><?php the_title(); ?></a>
<a href="<?= get_permalink() ?>"><?php the_excerpt(); ?></a>
 <?php endwhile ?>
</div>
<!-------- ここまで---------->

 <?php get_sidebar(); ?>
</div>

 <?php get_footer(); ?>

<?php get_header(); ?>

<p>当店の人気のメニューを紹介します。</p>

<?php while ( have_posts() ) : the_post() ?>

<?php the_time('Y年n月j日') ?>

<?php the_category(); ?>

<?php endwhile ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

投稿する

カテゴリーを作る

パンのカテゴリーを作ってみよう！「投稿」→「カテゴリー」

投稿する
カテゴリーを「パン」に設定
アイキャッチもメディアから登録して投稿します。残りのパンも同じように投稿していきます。

以下のテキストを使って、投稿してみましょう。写真等は、以下の素材を使ってください。

ふわふわ食パン
ふんわりもっちりとした柔らかい生地がたまらなく美味しい食パンは、モーニングやサンドイッチなどに大活躍です。
クロワッサン
バターをパン生地に練りこんで焼き上げるパン。サクサクした食感と甘みが特徴的で朝食やおやつにも人気です。フランス発祥であり、「三日月」を意味しています。
バゲット
生地が細長く伸ばされていることから、パリッとした焼き上がりが特徴です。フランス語で「棒」や「杖」を意味しています。
メロンパン
日本発祥の人気菓子パン。パン生地の上に甘いビスケット生地をのせて焼いたパンです。ビスケット生地による表面のすじや格子状の模様がマスクメロンに似ているからと言われています。

写真素材
(以下からDLできます。)
https://cocohp.pw/images/bread.zip

トップページに投稿が出力される

以下のように、投稿が出力されれば、成功です！

single.php(個別投稿ページ)

個別投稿ページを編集する
それぞれ投稿されたページは、single.phpで閲覧します。テーマエディタで、single.phpに以下の記述をペーストします。シンプルに、投稿日時・タイトル・投稿内容です。

<?php get_header(); ?>

<?php the_time('Y年n月j日') ?>
<?php the_title() ?>
<?php the_content();?>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php the_time('Y年n月j日') ?>

<?php the_title() ?>

<?php the_content();?>

<?php get_footer(); ?>

それぞれのページを個別で閲覧することができます。

sidebar.php(サイドバー)

サイドに表示される部分です。ここには、ウィジェットが利用できるようにします。基本的に、独立しているエリアなので、asideでマークアップしておきましょう。

<aside>
<!----------- ウィジェット機能の有効化  ------->
    <?php dynamic_sidebar( 'sidebar' ); ?>

</aside>

<aside>

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

</aside>

functions.phpに記述した「id名＝sidebar」と同じにしておきましょう。

ウィジェットの利用

外観→ウィジェットと見ていくと、サイドバーのエリアがあります。利用できるウィジェットからドラッグすると利用できるようになります。

メニューを作る

<nav>
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'header-nav' 
  ) ); 
?>
</nav>

<nav>

<?php

wp_nav_menu( array(

'theme_location' => 'header-nav'

) );

</nav>

仕上げ

これで一通り、初期テーマは仕上がりました！次の段階で、CSSでレイアウトを整えていきましょう。