前回の「WordPressのテーマ作成(テーマの作成、テーマの詳細)」にて、
index.phpとstyle.cssの準備が終わり、テーマの作成ができました。
今回は各パーツとindex.phpを編集していきます。
目次
/wp-content/themes/sample/内に、
functions.php、header.php、footer.php、sidebar.phpをアップします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<header>
ヘッダー
</header>
<main>
メインコンテンツ
</main>
<aside>
サイドバー
</aside>
<footer>
フッター
</footer>
</body>
</html>
ここまではいつも通りの、htmlでの記述です。
WordPressではfunctions.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>
<?php get_header(); ?>
<main>
メインコンテンツ
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</body>
</html>
ブログのタイトルが表示されます。
<?php bloginfo('name'); ?>
ダッシュボードの「設定」>「一般設定」で入力したキャッチフレーズが表示されます。
<?php bloginfo('description'); ?>
サイトのトップページのURLを取得。
末尾に「/」が付かないので、「/」を入れます。
<?php $url = home_url('/'); ?>
サイトのトップページのURLを取得。
<?php echo get_template_directory_uri(); ?>
画像を読み込む場合
<img src="<?php echo get_template_directory_uri(); ?>/images/01.jpg" alt="">
<?php echo get_stylesheet_uri(); ?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>