テーマを一から作成する 第2回目
前回はindex.php及びstyle.css、screenshot.pngを準備したので、今回から具体的な中身を記述していきます。
第1回目 テーマを一から作成する[index.php][style.css]
スポンサーリンク
まずはstyle.cssのテーマ詳細から。
style.cssに以下のようにコメント形式でテーマに関する情報を記述をすると、WordPressのテーマとして反映されるようになります。
/*
Theme Name: テーマの名前（必須項目）
Theme URI: テーマのアドレス
Author: 作成者
Author URI: 作成者のアドレス
Description: テーマの説明
Version: バージョン
License: ライセンス
License URI: ライセンスのアドレス
Tags: テーマのタグ
*/
今回はTheme Nameのみを記述しておきます。
|
1 2 3 |
/* Theme Name: sample */ |
Theme Name は 外観>テーマ で表示される「有効:〇〇」の〇〇部分に反映されます。
次にindex.phpとstyle.cssを記述していきます。トップ画面は以下の画像のような画面になります。
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* 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を分割していきます。
第3回目 header/saidebar/footerに分割する[wp_head][wp_enqueue_style]
参照ページ
HTMLとCSSは以下サイトを参照させて頂きました。
ほんっとにはじめての HTML5 と CSS3
[17-1] HTML5の新要素でページ全体を組もう
WordPress
Codex日本語版
テーマの作成
