#WordPressの方で用意されたテーマをつかうのではなくテーマを最初から作る。
##オリジナルテーマを作成
###準備
####必要なフォルダを準備
xampp/htdocs/blog/wp-content/themes
の中にフォルダを作成「my_theme」
「my_theme」の中に
「index.php」と「style.css」のファイルを作成する。
WordPress側の「外観」→「テーマ」の中に
👇が作成される。
####「style.css」に情報を記述する
👇を記述すると管理画面からテーマを選べるようになる。
/*
Theme Name:JomaBLOG
Description:仮のブログです
Author:作者の名前
*/
セーブして
WordPress側の「外観」→「テーマ」を確認すると
👇「my_theme」→「JomaBLOG」に変更される。
テーマの詳細をクリックすると先ほどCSSで記載した内容が表示される。
自分で作成したテーマに画像を表示させたいときは
「my_theme」のフォルダの直下に
ファイル名を「screenshot.png」にして画像ファイルを入れる。
##トップページ index.php を作成する
###ブログのタイトルと説明を表示させる
<body>
<h1><?php bloginfo('title'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</body>
出力すると
👆はデータベースに記載されている。
変更するにはWordPressの「設定」→「一般」の
「サイトタイトル」「キャッチフレーズ」をかきかえ変更して保存すれば変わる。
👇
##記事の一覧を表示させる
WordPressの投稿で３つほど仮の記事を作成する。
####データベースを確認してみる
Navicat Liteの「blog」をダブルクリックする。
「テーブル」→「wp_posts」をクリックすると
投稿された一覧が表示される。
これでデータベースに保存されていることが確認できる。
###データベースの中に入ったのを表示させる
####投稿のタイトルを表示させる
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
👆意味は「記事を一つ一つデータベースからとってきて回す」
タイトルだけを表示させる。
👇出力させると
👆先ほど投稿で作成した記事のタイトルが表示される。
####記事のコンテンツ部分を表示
記事の内容と画像を表示させる。
👇
<?php the_content(); ?>
####タイトルにリンクを張る
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2
####スタイルシート「style.css」を適用させる
「テーマフォルダまでのパス」を出力する関数使用する
👇
<?php echo get_template_directory_uri(); ?>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
👆出力させるとCSSが適用される。
####画像を表示させる
xampp/htdocs/blog/wp-content/themes/my_theme/images
の中に表示させたい画像を入れる。
<img src="<?php echo get_template_directory_uri(); ?>/images/back.png" alt="画像です。">
single.php（個別ページ）を作成
single.phpを作成することで別ページが作成される。
個別ページのバックの色を変えてわかりやすくする。
single.php のbodyにidをいれて style.cssで色をつける。
更に、個別ページからトップページに戻れるようにリンクを張る。
####CSSでレイアウトを整える。
####サムネイル（アイキャッチ画像）機能を追加
新規にfunctions.phpを作成し👇のように記述する。
<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size(200,200,true);
?>
WordPressに様々な機能が追加できる。👆の例はサムネールが
使えるようにしてサイズを200pxにし設定する。
設定すると、投稿一覧の編集で「アイキャッチ画像」が追加される。
####記事の概要を表示させる。
<?php the_excerpt(); ?>
👆は記事の概要を表示させることができる。
####サムネールを表示させる
<?php the_excerpt(); ?>
👆サムネールを表示させることができる。
※この段階ではサムネール（画像）は表示されない。
WordPress側で先ほどfunctions.phpで追加した機能を設定する。
投稿一覧の編集をクリックすると「アイキャッチ画像」が追加させれていることが確認できる。
アイキャッチ画像を設定する。
##ここまでのソースコード
👇index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
<div id="wrapper">
<h1><?php bloginfo('title'); ?></h1>
<p><?php bloginfo('description'); ?></p>
<img src="<?php echo get_template_directory_uri(); ?>/images/back.png" alt="画像です。">
<?php while (have_posts()) : the_post(); ?>
<div class="section">
<div class="image">
<?php the_post_thumbnail(); ?>
</div>
<div class="desc">
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
</body>
</html>
👇single.php（個別ページ）
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body id="single">
<h1>
<a href="<?php echo home_url(); ?>"><?php bloginfo('title'); ?></a>
</h1>
<p><?php bloginfo('description'); ?></p>
<?php while (have_posts()) : the_post(); ?>
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php the_content(); ?>
<?php endwhile; ?>
</body>
</html>
👇function.php（機能追加）
<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size(400,400,true);
?>
👇style.css
body {
background: url("images/background.gif");
}
body#single {
background: #9999ff;
}
#wrapper {
width: 1200px;
margin: 0 auto;
background: white;
padding: 20px;
}
.section {
display: flex;
}
.image {
flex: 4;
}
.desc {
flex: 6;
}
##出力結果
