読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

テーマの準備

テーマを構成するテンプレートファイル

  • mythemeフォルダー(すでにその名前がある場合は、「picnic」というフォルダー名)
ページの生成に使用されるテンプレート
  • index.php:すべてのページの生成に使用されるテンプレート
  • single.php:記事の個別ページの生成に優先的に使用されるテンプレート
パーツテンプレート
  • header.php:ヘッダー部分の設定を記述するためのテンプレート
  • footer.php:フッター部分の設定を記述するためのテンプレート
  • sidebar.php:サイドバー部分の設定を記述するためのテンプレート
関連ファイル
  • functions.php
スタイルシートファイル
ページの生成に使用されるテンプレート
  • screenshot.png

テンプレートの設定

《header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
<?php wp_title( '|', true, 'right'); ?>
<?php bloginfo( 'name' ); ?>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>


《index.php

<?php get_header(); ?>

<?php get_footer(); ?>


《footer.php

<?php wp_footer(); ?>
</body>
</html>
ページのタイトル
  • 生成するページの記事のタイトルやカテゴリなどを出力します
  • 引数は、右側に区切り文字「|」を入れる設定です
<?php wp_title( '|', true, 'right'); ?>
サイトのタイトル
  • 「ダッシュボード」の「一般設定→サイトのタイトル」が表示されます
<?php bloginfo( 'name' ); ?>


結果、改行されずに以下のように出力されます。

<title>記事のタイトルやカテゴリー名 | サイト名</title>

スタイルシートファイルの設定

  • 文字エンコードの種類
  • テーマに関する情報(テーマ名は必須)
  • 必要に応じて最低限のレイアウトの値


《style.php

@charset "UTF-8";
 /*
 Theme Name: MY THEME PICNIC
 Author: PICNIC
 Description: This is my original theme.
 Version: 1.0
 */

body {
  margin: 0;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height: 1.5;
  font-size: 16px;
}

関数ファイルの設定

  • 不要なトラブルを防ぐため、閉じタグは記述しません


《functions.php

<?php

サムネイル画像

  • 880 × 660pxの大きさでPNGJPEG)形式の画像を準備する
  • ファイル名は「screenshot」