②style.cssのテーマ詳細[bloginfo(‘stylesheet_url’)]
投稿日：2020年12月15日
テーマを一から作成する 第2回目
前回はindex.php及びstyle.css、screenshot.pngを準備したので、今回から具体的な中身を記述していきます。
まずはstyle.cssのテーマ詳細から。
style.cssに以下のようにコメント形式でテーマに関する情報を記述をすると、WordPressのテーマとして反映されるようになります。
/*
Theme Name: テーマの名前（必須項目）
Theme URI: テーマのアドレス
Author: 作成者
Author URI: 作成者のアドレス
Description: テーマの説明
Version: バージョン
License: ライセンス
License URI: ライセンスのアドレス
Tags: テーマのタグ
*/今回はTheme Nameのみを記述しておきます。
/*
Theme Name: sample
*/Theme Name は 外観>テーマ で表示される「有効:〇〇」の〇〇部分に反映されます。
次にindex.phpとstyle.cssを記述していきます。トップ画面は以下の画像のような画面になります。
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
<main>
メインコンテンツ
</main>
<aside>
サイドバー
</aside>
<footer>
フッター
</footer>
</body>
</html>
style.css
Theme Name: sample
*/
body {
width:900px;
margin:20px auto;
}
header, main, aside, footer{
display:block;
}
header, main, aside, footer {
border:1px solid #ccc;
margin:0px 0px 10px 0px;
padding:20px;
}
header {
text-align:center;
}
main {
float:left;
width:625px;
}
aside {
float:right;
width:180px;
}
footer {
clear:both;
text-align: center;
padding: 10px;
}index.phpの説明
5行目・6行目の<?php bloginfo(‘name’); ?>と<?php bloginfo(‘description’); ?>には、WordPress管理画面の 設定＞一般 画面において入力してあるタイトルとキャッチフレーズが出力されます。
7行目
<?php echo get_stylesheet_uri(); ?>で、作成したスタイルシート（style.css）にリンクを貼っています。
以上でトップ画面を表示させることができました。
次回はこのindex.phpを分割していきます。