トップページを作成
Webページのhead情報を記述
関数
ブログ名を出力
<?php bloginfo('name'); ?>
コンテンツタイプを出力
<?php bloginfo('html_type'); ?>
エンコードの種類を出力
<?php bloginfo('charset'); ?>
基本構造の入力
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ひだまり日記</title> </head> <body> </body> </html>
または、
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ひだまり日記</title> </head> <body> </body> </html>
ページタイトルを記述する
<title><?php bloginfo('name'); ?></title>
meta情報を記述する
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
または、
<meta charset="<?php bloginfo('charset'); ?>">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?></title> </head> <body> </body> </html>
または、
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php bloginfo('name'); ?></title> </head> <body> </body> </html>
body:ヘッダーを記述
- 出力には「echo文」を使う
echo() ・・・ 1つ以上の文字列を出力する
print() ・・・ 文字列を出力する
関数
ブログの説明を出力
<?php bloginfo('description'); ?>
トップページのURLを出力
<?php echo home_url(); ?>
h1は、ブログ名を表示
<!-- ▼#header --> <div id="header"> <h1><?php bloginfo('name'); ?></h1> </div><!-- ▲#header -->
ブログ説明を表示
<!-- ▼#header --> <div id="header"> <h1><?php bloginfo('name'); ?></h1> <p id="desc"><?php bloginfo('description'); ?></p> </div><!-- ▲#header -->
トップページへのリンクを設定する
<!-- ▼#header --> <div id="header"> <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> </div><!-- ▲#header -->
ブログの基本情報を出力
パラメートの値 | 出力する内容 |
---|---|
name | ブログ名 |
description | ブログの説明 |
url | ブログのURL |
rdf_url | RDF/RSS1.0フィードのURL |
rss_url | RSS0.92フィードのURL |
rss2_url | RSS2.0フィードのURL |
atom_url | AtomフィードのURL |
comments_rss2_url | コメントフィードのURL |
pingback_url | ピングバック用のURL |
admin_email | 管理者のメールアドレス |
charset | エンコードの種類 |
version | WordPressのバージョン |
text_direction | テキストの書字方向 |
html_type | コンテンツタイプ |
wpurl | WordPressのインストール場所 |
template_url | テーマフォルダーのURL |
template_deirectory | テーマフォルダーのURL |
stylesheet_url | スタイルシートファイルのURL |
※「template_url」と「template_deirectory」はどちらもテーマフォルダのURLを指します。
スタイルシートを適用
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
スタイルシート(style.css)を編集
/* reset */ * { margin: 0; padding: 0; } /* body */ body { font-size: 16px; color: #363636; } /* #header */ #header { margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: solid 5px #a3d2f2; /*この段階での修飾指定*/ } #header h1 { font-size: 1.875em; } #header h1 a { color: #000; text-decoration: none; } #header p#desc { font-size: 0.75em; color: #444; }